/* ========================================================================== 
   DOLONG PRODUCT ARCHIVE — editorial listing and collection-filtered state.
   ========================================================================== */

.dl-products-page { background: var(--dl-paper, #f7f4ec); color: var(--dl-ink, #0e0e0e); }
.dl-products-page h1, .dl-products-page h2 { font-family: var(--dl-font-display, "Playfair Display", Georgia, serif); font-weight: 400; }
.dl-products-page .dl-overline, .dl-products-page select, .dl-products-page button { font-family: var(--dl-font-body, "Montserrat", Arial, sans-serif); }

.dl-products-masthead { padding: clamp(56px, 7vw, 102px) 0 clamp(33px, 4vw, 56px); text-align: center; }
.dl-products-masthead .dl-overline { margin: 0; color: var(--dl-muted, #756f68); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dl-products-masthead h1 { margin: 18px 0 0; font-size: clamp(53px, 6vw, 92px); letter-spacing: -.06em; line-height: .94; }
.dl-products-masthead__intro { max-width: 48ch; margin: 20px auto 0; color: var(--dl-muted, #756f68); font-size: 13px; line-height: 1.7; }

.dl-products-collection-intro { padding: 0 0 clamp(30px, 4vw, 52px); }
.dl-products-collection-intro__panel { position: relative; min-height: clamp(290px, 27vw, 410px); overflow: hidden; background: #ded5c6; }
.dl-products-collection-intro__panel > img, .dl-products-collection-intro__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-products-collection-intro__panel > img { object-fit: cover; object-position: center; }
.dl-products-collection-intro__veil { background: linear-gradient(90deg, rgba(247,244,236,.98) 0%, rgba(247,244,236,.87) 31%, rgba(247,244,236,.28) 56%, rgba(247,244,236,0) 77%); }
.dl-products-collection-intro__copy { position: relative; z-index: 1; display: flex; min-height: inherit; width: min(42%, 495px); flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(28px, 4vw, 58px); }
.dl-products-collection-intro__copy .dl-overline { margin: 0; color: #98733c; font-size: 9px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.dl-products-collection-intro__copy h2 { margin: 18px 0 0; font-size: clamp(45px, 4.5vw, 70px); letter-spacing: -.06em; line-height: .94; }
.dl-products-collection-intro__copy > p { max-width: 34ch; margin: 14px 0 0; color: #514c46; font-size: 12px; line-height: 1.65; }
.dl-products-page .dl-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 0 0 7px; border-bottom: 1px solid currentColor; color: var(--dl-ink, #0e0e0e); font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1; text-decoration: none; text-transform: uppercase; }

.dl-products-archive { padding-bottom: clamp(80px, 10vw, 140px); }
.dl-product-tools { position: relative; padding: 0 0 1px; border-bottom: 1px solid var(--dl-ink, #0e0e0e); }
.dl-product-tools__desktop-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 71px; border-top: 1px solid var(--dl-line, #cbc2b8); }
.dl-product-tools label { display: grid; gap: 7px; }
.dl-product-tools__field { position: relative; display: grid; align-content: center; min-width: 0; padding: 13px 24px 15px; border-left: 1px solid var(--dl-line, #cbc2b8); }
.dl-product-tools__field:last-child { border-right: 1px solid var(--dl-line, #cbc2b8); }
.dl-product-tools__field:focus-within::after, .dl-product-tools__field.is-selected::after { position: absolute; z-index: 32; right: 24px; bottom: 0; left: 24px; height: 3px; background: var(--dl-gold, #c5ae87); content: ""; }
.dl-product-tools label > span, .dl-product-tools__label { color: var(--dl-muted, #756f68); font-size: 9px; font-weight: 600; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.dl-product-tools select { width: 100%; padding: 0 20px 0 0; border: 0; outline: 0; appearance: none; background: linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 6px) 51% / 5px 5px no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) 100% 51% / 5px 5px no-repeat; color: var(--dl-ink, #0e0e0e); font-size: 11px; font-weight: 500; line-height: 1.5; text-transform: none; }
.dl-filter-select__native { display: none; }
.dl-filter-select { min-width: 0; margin-top: 7px; }
.dl-filter-select__trigger { display: flex; width: 100%; min-height: 23px; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--dl-ink, #0e0e0e); font-size: 13px; font-weight: 500; line-height: 1.5; text-align: left; cursor: pointer; }
.dl-filter-select__trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-filter-select__trigger i { width: 7px; height: 7px; flex: 0 0 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease; }
.dl-filter-select.is-open .dl-filter-select__trigger i { transform: translateY(2px) rotate(225deg); }
.dl-product-tools__field.is-selected .dl-filter-select__trigger { color: #98733c; }
.dl-filter-select__menu { position: absolute; z-index: 31; top: calc(100% + 1px); right: -1px; left: -1px; max-height: min(360px, 55vh); overflow-y: auto; padding: 7px 0; border: 1px solid var(--dl-line, #cbc2b8); border-top: 0; background: var(--dl-paper, #f7f4ec); box-shadow: 0 18px 36px rgba(14,14,14,.09); }
.dl-filter-select__menu[hidden] { display: none; }
.dl-filter-select__option { position: relative; display: block; width: 100%; min-height: 42px; padding: 11px 24px; border: 0; border-radius: 0; background: transparent; color: var(--dl-ink, #0e0e0e); font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left; cursor: pointer; }
.dl-filter-select__option::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; background: transparent; content: ""; }
.dl-filter-select__option:hover, .dl-filter-select__option:focus-visible { outline: 0; background: rgba(255,253,249,.7); }
.dl-filter-select__option.is-active { color: #98733c; }
.dl-filter-select__option.is-active::before { background: var(--dl-gold, #c5ae87); }
.dl-product-tools__clear { display: inline-block; margin-top: 14px; color: var(--dl-muted, #756f68); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }

.dl-product-tools__mobile-actions, .dl-product-tools__drawer { display: none; }
.dl-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 4.8vw, 58px) clamp(16px, 2vw, 28px); margin-top: clamp(37px, 5vw, 66px); }
.dl-product-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #e4ded3; }
.dl-product-card__image > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 380ms ease, transform 650ms cubic-bezier(.22,.61,.36,1); }
.dl-product-card__image--hover { position: absolute; inset: 0; opacity: 0; }
.dl-product-card:hover .dl-product-card__image > img:first-child { transform: scale(1.012); }
.dl-product-card:hover .dl-product-card__image--hover { opacity: 1; }
.dl-product-card__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; padding: 14px 0 0; }
.dl-product-card__meta h2 { margin: 0; font-size: clamp(22px, 1.7vw, 29px); letter-spacing: -.045em; line-height: 1; }
.dl-product-card__meta h2 a { color: inherit; text-decoration: none; }
.dl-product-card__meta > div { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 10px; margin-top: 9px; color: var(--dl-muted, #756f68); font-size: 8px; font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.dl-product-card__meta > div span { color: #98733c; }
.dl-product-card__meta small { font: inherit; }
.dl-product-card__link { grid-column: 1 / -1; width: max-content; margin-top: 13px; padding-bottom: 5px; border-bottom: 1px solid var(--dl-ink, #0e0e0e); font-size: 8px; font-weight: 600; letter-spacing: .11em; line-height: 1; text-decoration: none; text-transform: uppercase; }
.dl-products-load-more { display: flex; justify-content: center; margin-top: 55px; }
.dl-products-load-more .page-numbers { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dl-products-load-more a, .dl-products-load-more span { display: inline-flex; min-height: 46px; align-items: center; padding: 0 17px; border: 1px solid var(--dl-ink, #0e0e0e); color: var(--dl-ink, #0e0e0e); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.dl-products-load-more .current, .dl-products-load-more a:hover { background: var(--dl-ink, #0e0e0e); color: var(--dl-ivory, #fffdf9); }
.dl-products-empty { max-width: 520px; padding: 88px 0 110px; text-align: center; margin-inline: auto; }
.dl-products-empty .dl-overline { font-size: 9px; font-weight: 600; letter-spacing: .13em; }
.dl-products-empty h2 { margin: 16px 0 0; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.055em; line-height: .98; }
.dl-products-empty > p:not(.dl-overline) { margin: 17px auto 0; color: var(--dl-muted, #756f68); font-size: 13px; line-height: 1.7; }

@media (min-width: 821px) and (max-width: 1100px) {
  .dl-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .dl-products-masthead { padding: 38px 0 27px; }
  .dl-products-masthead h1 { margin-top: 13px; font-size: clamp(45px, 13vw, 62px); }
  .dl-products-masthead__intro { max-width: 31ch; margin-top: 14px; font-size: 12px; line-height: 1.65; }
  .dl-products-collection-intro { padding-bottom: 26px; }
  .dl-products-collection-intro__panel { min-height: 365px; }
  .dl-products-collection-intro__panel > img { object-position: 64% center; }
  .dl-products-collection-intro__veil { background: linear-gradient(0deg, rgba(247,244,236,.98) 0%, rgba(247,244,236,.91) 39%, rgba(247,244,236,.26) 70%, rgba(247,244,236,0) 100%); }
  .dl-products-collection-intro__copy { width: 100%; padding: 23px 20px; }
  .dl-products-collection-intro__copy h2 { margin-top: 11px; font-size: clamp(42px, 12vw, 55px); }
  .dl-products-collection-intro__copy > p { margin-top: 9px; font-size: 11.5px; }
  .dl-products-page .dl-text-link { margin-top: 13px; }
  .dl-product-tools { display: block; min-height: 51px; padding: 0; border-bottom: 0; }
  .dl-product-tools__desktop-fields { display: none; }
  .dl-product-tools__mobile-actions { display: grid; grid-template-columns: 1fr 1fr auto; align-items: stretch; border-top: 1px solid var(--dl-line, #cbc2b8); border-bottom: 1px solid var(--dl-line, #cbc2b8); }
  .dl-product-tools__mobile-actions > button, .dl-product-tools__mobile-actions > label, .dl-product-tools__mobile-actions > span { min-height: 50px; padding: 0 14px; border: 0; background: transparent; color: var(--dl-ink, #0e0e0e); font-family: var(--dl-font-body, "Montserrat", Arial, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
  .dl-product-tools__mobile-actions > button, .dl-product-tools__mobile-actions > label { border-right: 1px solid var(--dl-line, #cbc2b8); }
  .dl-product-tools__mobile-actions > label { display: flex; align-items: center; }
  .dl-product-tools__mobile-actions select { padding-right: 13px; font-size: 9px; }
  .dl-product-tools__mobile-actions > span { display: grid; place-items: center; color: var(--dl-muted, #756f68); white-space: nowrap; }
  .dl-product-tools__drawer { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--dl-line, #cbc2b8); background: var(--dl-paper, #f7f4ec); box-shadow: 0 -18px 50px rgba(14,14,14,.12); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity 220ms ease, transform 260ms ease; }
  .dl-product-tools__drawer.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .dl-product-tools__drawer-head { display: flex; grid-column: auto; align-items: center; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid var(--dl-line, #cbc2b8); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .dl-product-tools__drawer-head button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--dl-ink, #0e0e0e); font-size: 27px; font-weight: 300; line-height: 1; }
  .dl-product-tools__mobile-fields { display: grid; gap: 0; }
  .dl-mobile-filter { position: relative; z-index: 0; padding: 0 0 14px; border-bottom: 1px solid var(--dl-line, #cbc2b8); }
  .dl-mobile-filter + .dl-mobile-filter { padding-top: 17px; }
  .dl-mobile-filter > span { display: block; color: var(--dl-muted, #756f68); font-size: 9px; font-weight: 600; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
  .dl-mobile-filter .dl-filter-select { margin-top: 8px; }
  .dl-mobile-filter .dl-filter-select__trigger { min-height: 31px; padding: 0; font-size: 13px; }
  .dl-mobile-filter .dl-filter-select__menu { z-index: 5; top: calc(100% + 1px); max-height: min(238px, 31vh); border: 1px solid var(--dl-line, #cbc2b8); background: var(--dl-paper, #f7f4ec); }
  .dl-mobile-filter .dl-filter-select__option { min-height: 43px; padding-inline: 16px; font-size: 12px; }
  .dl-mobile-filter:has(.dl-filter-select.is-open) { z-index: 2; }
  .dl-product-tools__apply { min-height: 48px; margin-top: 2px; border: 1px solid var(--dl-ink, #0e0e0e); border-radius: 0; background: var(--dl-ink, #0e0e0e); color: var(--dl-ivory, #fffdf9); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
  .dl-product-tools__clear { right: auto; bottom: -35px; left: 0; }
  .dl-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px 10px; margin-top: 28px; }
  .dl-product-card__meta { padding-top: 10px; }
  .dl-product-card__meta h2 { font-size: clamp(19px, 5.6vw, 24px); }
  .dl-product-card__meta > div { gap: 5px; margin-top: 7px; font-size: 7px; letter-spacing: .08em; }
  .dl-product-card__link { display: none; }
  .dl-products-load-more { margin-top: 38px; }
}

@media (max-width: 390px) {
  .dl-products-grid { gap: 25px 8px; }
  .dl-product-tools__mobile-actions > button, .dl-product-tools__mobile-actions > label, .dl-product-tools__mobile-actions > span { padding-inline: 10px; font-size: 8px; }
  .dl-product-card__meta h2 { font-size: 18px; }
}