.catalog-page [hidden] { display: none !important; }
.catalog-page { min-width: 0; }
.catalog-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.catalog-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.catalog-page .brand-monogram { width: 42px; height: 42px; }
.catalog-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .9rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); background: var(--ink); }
.catalog-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(.8rem, 2vw, 2rem); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.catalog-header nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); transition: color .3s ease; }
.catalog-header nav a[aria-current] { color: var(--ivory); }
.catalog-header nav a:active { color: var(--gold); }
@media (hover: hover) {
  .catalog-header nav a:hover { color: var(--ivory); }
}
/* Layout for the Bag lives in storefront-mobile.css, which owns the control at
   every width. Only the colour that must beat the link reset stays here. */
.catalog-header .catalog-bag { color: var(--ivory); white-space: nowrap; }
.catalog-back-row { padding: clamp(.7rem, 2vw, 1.5rem) max(5vw, calc((100vw - 1440px) / 2)) 0; }
.catalog-back { min-height: 44px; display: inline-flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.catalog-back:focus-visible { color: var(--ivory); transform: translateX(-3px); }
.catalog-back:active { color: var(--gold); transform: translateX(-1px); }
@media (hover: hover) {
  .catalog-back:hover { color: var(--ivory); transform: translateX(-3px); }
}
.catalog-intro { padding: clamp(4.5rem, 8vw, 8rem) max(5vw, calc((100vw - 1440px) / 2)) clamp(3rem, 6vw, 5rem); }
.catalog-back-row + .catalog-intro { padding-top: clamp(2rem, 5vw, 4rem); }
.catalog-intro h1, .product-empty h1, .catalog-empty h2, .product-information h1 { max-width: 1100px; margin: 0; font-family: var(--display); font-size: clamp(3.3rem, 7vw, 7rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.catalog-intro > p:last-child { max-width: 36rem; margin: 1.6rem 0 0; color: var(--muted); line-height: 1.7; }
.catalog-section { min-height: 55vh; padding: clamp(2rem, 4vw, 4rem) max(5vw, calc((100vw - 1440px) / 2)) clamp(5rem, 8vw, 8rem); background: var(--ivory); color: var(--ink); }

/* Search and Sort share the toolbar's first line — the two controls that set
   what the query is — and the filter grid keeps the line beneath them. */
.catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search side" "filters filters"; align-items: end; gap: 1.25rem 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(11,10,9,.2); }
.catalog-search { grid-area: search; display: grid; gap: .5rem; max-width: 34rem; }
.catalog-search > label { color: #5c574f; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.catalog-search-field { position: relative; display: flex; align-items: center; }
.catalog-search-icon { position: absolute; left: .85rem; width: 17px; height: 17px; fill: none; stroke: #6b655c; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.catalog-search input { width: 100%; min-height: 44px; padding: .65rem 3rem .65rem 2.5rem; border: 1px solid rgba(11,10,9,.25); border-radius: 0; background: transparent; color: var(--ink); font: 400 .9rem var(--sans); letter-spacing: 0; }
.catalog-search input::placeholder { color: #8b857a; }
.catalog-search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The native WebKit affordance is replaced by the labelled control below, so the
   two can never appear together. */
.catalog-search input::-webkit-search-cancel-button,
.catalog-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.catalog-search-clear { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: none; color: #6b655c; cursor: pointer; transition: color .25s ease; }
.catalog-search-clear svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.catalog-search-clear:focus-visible { color: var(--ink); }
.catalog-search-clear:active { color: var(--ink); }
@media (hover: hover) {
  .catalog-search-clear:hover { color: var(--ink); }
}
.catalog-filters { grid-area: filters; min-width: 0; }
.catalog-filters-summary { display: flex; align-items: center; gap: .65rem; min-height: 44px; list-style: none; color: #5c574f; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.catalog-filters-summary::-webkit-details-marker { display: none; }
.catalog-filters-summary::after { content: '+'; margin-left: auto; font: 400 1.05rem var(--sans); letter-spacing: 0; line-height: 1; }
.catalog-filters[open] .catalog-filters-summary::after { content: '–'; }
.catalog-filters[open] .catalog-filters-summary { margin-bottom: 1rem; }
.catalog-filters-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .4rem; border: 1px solid rgba(11,10,9,.35); border-radius: 999px; color: #5c574f; font-size: .7rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.catalog-filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.catalog-filters label, .catalog-sort, .product-options label { display: grid; gap: .5rem; color: #5c574f; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.catalog-filters select, .catalog-sort select, .product-options select { min-height: 44px; padding: .65rem 2rem .65rem .8rem; border: 1px solid rgba(11,10,9,.25); border-radius: 0; background: transparent; color: var(--ink); font: 400 .9rem var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.catalog-filters select, .catalog-sort select { min-width: 0; width: 100%; }
.catalog-toolbar-side { grid-area: side; min-width: 0; display: flex; align-items: end; gap: 1.6rem; }
.catalog-sort select { min-width: 190px; }
.catalog-count { margin: 0; color: #615b52; font-size: .85rem; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 3rem) clamp(.8rem, 1.5vw, 1.5rem); margin-top: 2rem; }
/* Results change in place — a filter, a sort, a keystroke — so the pieces settle
   into the grid rather than snapping. The stagger stops at the seventh card, so
   the whole grid finishes well inside half a second however many pieces match;
   the reduced-motion rule at the foot of this file zeroes duration and delay. */
@keyframes catalog-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.product-grid > .product-card { animation: catalog-result-in .34s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--result-index, 0) * 22ms); }
.product-card { min-width: 0; }
.product-card a { display: block; }
.product-card-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd6cb; }
.product-card { position: relative; }
.product-card-save { position: absolute; top: .5rem; right: .5rem; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; border: 1px solid #cbbfae; border-radius: 50%; background: #f7f2e9; color: #403224; cursor: pointer; -webkit-tap-highlight-color: rgba(121,89,35,.18); }
.product-card-save svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.product-card-save[hidden] { display: none; }
.product-card-save[aria-pressed="true"] { color: #795923; }
.product-card-save[aria-pressed="true"] svg { fill: currentColor; }
.product-card-save:focus-visible { outline: 3px solid #795923; outline-offset: 3px; }
.product-card-save:disabled { cursor: wait; opacity: .65; }
.product-card-save:active { background: #e8ddca; }
@media (hover: hover) and (pointer: fine) {
  .product-card-save:hover { background: #e8ddca; border-color: #795923; }
}
.product-card-save-notice { margin: .35rem 0 0; color: #615b52; font-size: .75rem; line-height: 1.4; }
.product-card-save-notice:empty { margin: 0; }
.product-card-save-notice.is-error { color: #963921; }
.product-card-preview-pause { position: absolute; bottom: .5rem; right: .5rem; z-index: 2; min-height: 44px; max-width: calc(100% - 1rem); padding: .5rem .75rem; border: 1px solid #756248; background: #f4efe6; color: #302519; font: inherit; font-size: .75rem; cursor: pointer; }
.product-card-preview-pause[hidden] { display: none; }
.product-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.product-card a:focus-visible img { transform: scale(1.035); }
@media (hover: hover) {
  .product-card a:hover img { transform: scale(1.035); }
}
.product-card-badge { position: absolute; left: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); padding: .45rem .6rem; background: rgba(11,10,9,.86); color: var(--ivory); font-size: .7rem; text-transform: uppercase; }
.product-card-category { margin: .9rem 0 .35rem; color: #777066; font-size: .67rem; text-transform: uppercase; letter-spacing: .13em; }
.product-card h2 { margin: 0; font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.15; }
.product-card-price { margin: .55rem 0 0; font-size: .88rem; }
.product-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin: .7rem 0 0; color: #615b52; font-size: .75rem; line-height: 1.4; }
.product-card-meta span:last-child { text-transform: uppercase; }
.product-card-action { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .9rem; padding: .5rem 0; border: 0; border-top: 1px solid rgba(11,10,9,.2); background: transparent; color: var(--ink); font: 500 .75rem var(--sans); letter-spacing: .1em; text-align: left; text-transform: uppercase; cursor: pointer; transition: color .3s ease, padding-inline .3s cubic-bezier(.2,.7,.2,1); }
.product-card-action:focus-visible { color: #906828; padding-inline: .3rem; }
@media (hover: hover) {
  .product-card-action:hover { color: #906828; padding-inline: .3rem; }
}
.product-card-action:active { padding-inline: .1rem; }
.product-card-action:disabled { color: #777066; cursor: not-allowed; padding-inline: 0; }
.product-card-qty { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-top: .9rem; }
.product-card-qty[hidden] { display: none; }
.product-card-qty .qty-step { width: 40px; min-width: 40px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(11,10,9,.25); background: transparent; color: var(--ink); font: 400 1.15rem var(--sans); line-height: 1; cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease; }
.product-card-qty .qty-step:focus-visible { border-color: var(--gold); color: #906828; }
@media (hover: hover) {
  .product-card-qty .qty-step:hover { border-color: var(--gold); color: #906828; }
}
.product-card-qty .qty-step:disabled { color: #b9b2a6; border-color: rgba(11,10,9,.12); cursor: not-allowed; }
.product-card-qty .qty-value { min-width: 1.6rem; text-align: center; color: var(--ink); font: 400 .95rem var(--sans); }
.product-card-feedback { min-height: 1.5em; margin: .35rem 0 0; color: #615b52; font-size: .73rem; line-height: 1.4; }
.catalog-empty, .product-empty { max-width: 680px; margin: clamp(4rem, 8vw, 7rem) auto; text-align: center; }
.catalog-empty h2, .product-empty h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
/* Partial-load notice: informative, never a blocker. It sits between the grid
   and the empty state, so a skipped piece is explained without hiding the
   pieces that did load. */
.catalog-partial { max-width: 44rem; margin: 1.75rem auto 0; padding: .9rem 1.1rem; border: 1px solid rgba(11,10,9,.18); background: rgba(11,10,9,.03); color: #4a453d; font-size: .86rem; line-height: 1.6; text-align: center; }
.catalog-partial[hidden] { display: none; }
.catalog-empty > p:not(.eyebrow), .product-empty > p:not(.eyebrow) { max-width: 35rem; margin: 1.5rem auto 2rem; line-height: 1.75; color: #645e55; }
.catalog-link { min-height: 44px; display: inline-flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid currentColor; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.catalog-link span { color: #a77e3e; }
/* The way out of the search that produced a zero-result state. It replaces the
   standing escape hatch rather than sitting beside it, so the block offers one
   clear next step — and it is reset to the link treatment above, because a
   <button> would otherwise keep the browser's own border and background. */
.catalog-empty-action { display: flex; width: max-content; margin: 0 auto; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font-family: inherit; cursor: pointer; }
.catalog-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem max(5vw, calc((100vw - 1440px) / 2)); border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.catalog-footer .brand-lockup { width: clamp(150px, 18vw, 215px); align-self: center; }
.catalog-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.catalog-footer a:active { color: var(--gold); }
@media (hover: hover) {
  .catalog-footer a:hover { color: var(--ivory); }
}

.product-breadcrumb { display: flex; gap: .75rem; align-items: center; padding: 1.5rem max(5vw, calc((100vw - 1440px) / 2)); color: var(--muted); font-size: .78rem; }
.product-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.product-back-row { padding: 0 max(5vw, calc((100vw - 1440px) / 2)); }
.product-back { min-height: 44px; display: inline-flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; transition: color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.product-back:focus-visible { color: var(--ivory); transform: translateX(-3px); }
.product-back:active { transform: translateX(-1px); color: var(--gold); }
@media (hover: hover) {
  .product-back:hover { color: var(--ivory); transform: translateX(-3px); }
}
.product-empty > p:not(.eyebrow) { color: var(--muted); }
.product-detail { max-width: 1600px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(3rem, 7vw, 8rem); margin: 0 auto; padding: 2rem 5vw clamp(5rem, 8vw, 8rem); }
.product-gallery, .product-information { min-width: 0; }
.product-main-image { background: #28231d; }
.product-main-image img { display: block; width: 100%; height: auto; }
/* Choosing a thumbnail swaps the file instantly — the source is never stale — and
   this only softens the arrival of the new photograph on top of it. */
@keyframes gallery-swap { from { opacity: .3; } to { opacity: 1; } }
.product-main-image img.is-swapping { animation: gallery-swap .38s ease-out; }
.product-thumbnails { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .8rem; }
.product-thumbnail { width: clamp(64px, 7vw, 92px); aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--line); background: #28231d; cursor: pointer; }
.product-thumbnail[aria-pressed="true"] { border-color: var(--gold); }
.product-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.product-information { padding-top: clamp(.5rem, 4vw, 4rem); }
.product-information h1 { font-size: clamp(3rem, 5vw, 6rem); }
.product-price { margin: 1.8rem 0 .6rem; font-size: 1.25rem; }
.product-status { margin: 0; color: var(--gold); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.product-lead { max-width: 36rem; margin: 2rem 0; color: var(--ivory); font-size: 1.07rem; line-height: 1.7; }
.product-options { margin: 2rem 0; }
.product-options label { color: var(--muted); }
.product-options select { max-width: 100%; border-color: var(--line); color: var(--ivory); background: #171513; }
.product-description { padding-top: 2rem; border-top: 1px solid var(--line); }
.product-description h2 { font-family: var(--display); font-size: 2rem; font-weight: 400; }
.product-description p { color: var(--muted); line-height: 1.8; }
.product-details { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.product-details h2 { font-family: var(--display); font-size: 2rem; font-weight: 400; }
.product-details ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.8; }
.product-details li::marker { color: var(--gold); }
.product-facts { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 2rem; margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .88rem; }
.product-facts dt { color: var(--muted); }
.product-facts dd { margin: 0; }
.product-later { margin-top: 3rem; padding: 1.25rem; border: 1px solid var(--line); color: var(--muted); font-size: .84rem; }

/* At desktop width the five filters resolve onto one line, so the toolbar reads
   as two clean bands — what to look for, then how to narrow it — rather than
   leaving Availability stranded on its own row beside a hole. */
@media (min-width: 1200px) {
  .catalog-filters-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .catalog-filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-detail { grid-template-columns: 1fr; gap: 1rem; }
  .product-information { padding-top: 1.5rem; }
}
@media (max-width: 700px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-header { min-height: 70px; }
  .catalog-header nav a:not(:nth-child(2)):not(.catalog-bag) { display: none; }
  .catalog-intro { padding: 4.5rem 5vw 3rem; }
  .catalog-back-row + .catalog-intro { padding-top: 2.5rem; }
  .catalog-intro h1 { font-size: clamp(3.1rem, 11vw, 4.5rem); }
  .catalog-section { padding: 2rem 5vw 5rem; }
  /* One column: search, then the filters summary, then Sort with the count. */
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "filters" "side"; align-items: stretch; gap: 1.25rem; }
  .catalog-search { max-width: none; }
  /* 16px keeps iOS from zooming the whole page when the field takes focus. */
  .catalog-search input { min-height: 48px; font-size: 1rem; }
  .catalog-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar-side { justify-content: space-between; align-items: end; }
  .catalog-sort { flex: 1 1 190px; min-width: 0; }
  .catalog-count { align-self: end; }
  .product-breadcrumb { padding: .75rem 5vw; }
  .product-detail { padding: 1rem 5vw 5rem; }
}
@media (max-width: 420px) {
  .product-card h2 { font-size: clamp(1.2rem, 5.5vw, 1.45rem); }
  .product-card-badge { left: .45rem; bottom: .45rem; max-width: calc(100% - .9rem); padding: .35rem .45rem; font-size: .65rem; }
  .catalog-filters-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .catalog-header { padding-inline: 5vw; gap: .5rem; }
  .catalog-header .wordmark { gap: .4rem; font-size: .69rem; letter-spacing: .06em; }
  .catalog-header nav { font-size: .68rem; }
  .catalog-intro h1 { font-size: clamp(2.8rem, 10vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-page *, .catalog-page *::before, .catalog-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}