/* Mobile bottle-site navigation only. Desktop and fragrance pages stay intact. */
.mobile-feed-page { display: none; }
@media (max-width: 760px) {
  html.mobile-feed-active { overflow-anchor: none; }
  .mobile-feed-page {
    display: grid; place-items: center; position: fixed; z-index: 35;
    right: max(18px, env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom));
    min-width: 42px; height: 42px; padding: 0 10px; border-radius: 50%;
    background: rgb(17 17 17 / 82%); color: #fff; font: 500 16px/1 system-ui, sans-serif;
    pointer-events: none; opacity: 0; transform: translateY(5px);
    transition: opacity .32s ease, transform .32s ease;
  }
  .mobile-feed-page.is-visible { opacity: 1; transform: translateY(0); }
  #catalogue-pagination.mobile-feed-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 28px 12px 0; min-height: 48px; }
  #catalogue-pagination.mobile-feed-footer[hidden], .mobile-feed-more[hidden] { display: none; }
  .mobile-feed-status { color: #7b7b7b; font-size: 12px; line-height: 1.6; }
  #catalogue-pagination .mobile-feed-more { min-width: 116px; min-height: 44px; padding: 10px 18px; border: 1px solid #ddd; background: transparent; border-radius: 6px; color: #333; font-size: 13px; }
  #catalogue-pagination .mobile-feed-more:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-feed-page { transition: none; transform: none; } }
.mobile-menu-toggle, .mobile-menu { display: none; }
@media (max-width: 760px) {
  header:has(.brand-signature) {
    --mobile-fragrance-width: clamp(60px, 19.5vw, 76px);
    display: grid;
    grid-template-columns: var(--mobile-fragrance-width) minmax(0, 1fr) var(--mobile-fragrance-width);
    grid-template-areas: 'menu brand nav';
    height: 64px;
    min-height: 64px;
    padding: 0 10px;
    gap: 0 4px;
    overflow: visible;
  }
  header:has(.brand-signature) .brand { grid-area: brand; justify-self: center; text-align: center; margin: 0; }
  header:has(.brand-signature) .brand strong { font-size: clamp(14px, 4.2vw, 18px); letter-spacing: .06em; line-height: 1; }
  header:has(.brand-signature) .brand-signature,
  header:has(.brand-signature) > .button { display: none; }
  header:has(.brand-signature) #language { display: none; }
  .mobile-menu-toggle { grid-area: menu; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .mobile-menu-toggle img { display: block; width: 26px; height: 26px; }
  header:has(.brand-signature) #nav {
    display: block;
    grid-area: nav;
    position: static;
    width: var(--mobile-fragrance-width);
    justify-self: end;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 11;
  }
  header:has(.brand-signature) #nav .fragrance-nav-link {
    width: var(--mobile-fragrance-width);
    height: 44px;
    min-height: 44px;
    padding: 0 9px;
    justify-content: flex-start;
    border: 1px solid #8b7447;
    border-radius: 25px 25px 25px 7px;
    background-color: #1b1c18;
    background-image: linear-gradient(90deg, #1b1c18 0%, rgb(27 28 24 / 78%) 30%, rgb(27 28 24 / 0%) 65%), linear-gradient(rgb(255 248 227 / 6%), rgb(255 248 227 / 6%)), url('/fragrance-assets/hero-amber.png');
    background-position: center, center, right -12px center;
    background-size: 100% 100%, 100% 100%, auto 72px;
    background-repeat: no-repeat;
    color: #f3e4c4;
    text-align: left;
    box-shadow: 0 2px 6px rgb(39 29 12 / 12%);
  }
  header:has(.brand-signature) #nav .fragrance-nav-copy { gap: 3px; }
  header:has(.brand-signature) #nav .fragrance-nav-copy strong { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
  header:has(.brand-signature) #nav .fragrance-nav-copy small { display: none; }
  header:has(.brand-signature) #nav [aria-label="Explore fragrance"] strong { font-size: 9px; letter-spacing: -.035em; }
  .mobile-menu[open] {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0 22px 24px;
    border: 0;
    background: #151b18;
    color: #f5f4ee;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: mobile-menu-enter .22s ease-out;
  }
  .mobile-menu::backdrop { background: rgb(0 0 0 / 45%); }
  .mobile-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 88px; border-bottom: 1px solid #354239; }
  .mobile-menu-heading strong { font-size: 17px; letter-spacing: .07em; }
  .mobile-menu-heading small { display: block; margin-top: 7px; font-size: 8px; letter-spacing: .15em; color: #adae9e; }
  .mobile-menu-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .mobile-menu-close img { display: block; filter: invert(1); }
  .mobile-menu-links { display: block; margin: 16px 0 0; font-size: 15px; }
  .mobile-menu-links > a, .mobile-menu-links summary { min-height: 48px; padding: 14px 0; border-bottom: 1px solid #2a342d; }
  .mobile-menu-links > a { display: flex; align-items: center; justify-content: space-between; }
  .mobile-menu-links > a small { font-size: 8px; letter-spacing: .12em; color: #c8b991; }
  .mobile-menu-links summary { cursor: pointer; }
  .mobile-menu-categories { padding: 6px 0 12px 14px; }
  .mobile-menu-categories a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: #ccd4ce; }
  .mobile-menu-language { display: block; min-height: 44px; margin-top: 20px; padding: 10px 0; border: 0; background: transparent; color: #ccd4ce; font: inherit; font-size: 13px; cursor: pointer; }
  .mobile-menu a:focus-visible, .mobile-menu button:focus-visible, .mobile-menu summary:focus-visible, .mobile-menu-toggle:focus-visible { outline: 2px solid #c8b991; outline-offset: 2px; }
  @keyframes mobile-menu-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu[open] { animation: none; } }

/* Category destinations: a two-row, four-column selector directly below the header. */
@media (max-width: 760px) {
  #app > .section:has(> .catalogue-nav-row) { padding-top: 0; }
  #app > .section:has(> .catalogue-nav-row) > .eyebrow,
  #app > .section:has(> .catalogue-nav-row) > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .catalogue-nav-row { gap: 16px; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--line);
    overflow: visible;
  }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .filters button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 8px 3px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .filters button:last-child:nth-child(7) { grid-column: span 2; }
  .catalogue-nav-row .filters button.active,
  .detail-catalogue-controls .filters button[aria-current="true"] { background: #17221e; color: #fff; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .filters button:focus-visible { outline: 2px solid #987c42; outline-offset: -3px; }
  .catalogue-nav-row .toolbar.catalogue-search-toolbar { margin: 0 12px; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .toolbar.catalogue-search-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 48px;
    padding: 0 4px 0 14px;
    border: 0;
    border-radius: 8px;
    background: #f0f0f0;
  }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-size: 16px;
    line-height: 1.5;
  }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar input::placeholder { color: #737373; font-size: 13px; opacity: 1; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar .catalogue-search-button {
    display: block;
    flex: 0 0 auto;
    min-width: 56px;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111;
    font-size: 13px;
    font-weight: 600;
  }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar:focus-within { box-shadow: inset 0 0 0 1px #777; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar input:focus { outline: none; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar .catalogue-search-button:focus-visible { outline: 2px solid #111; outline-offset: -3px; }
  :is(.catalogue-nav-row, .detail-catalogue-controls) .catalogue-search-toolbar .catalogue-search-button:active { background: #e2e2e2; }
  #app > .detail:has(> .detail-catalogue-controls) { padding-top: 0; }
  .detail-catalogue-controls { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; }
  .detail-catalogue-controls .filters { order: -1; }
  .detail-catalogue-controls .toolbar { margin: 0 12px; }
  .detail-catalogue-controls .toolbar input { min-width: 0; width: 100%; max-width: none; }
}

/* Mobile product presentation; shared capacity filter styling follows below. */
.mobile-gallery-counter { display: none; }
.mobile-detail-search-button { display: none; }
@media (max-width: 760px) {
  .product-grid .product .image-swap .photo.primary { opacity: 1; transition: none; }
  .product-grid .product .image-swap .photo.secondary { opacity: 0; transition: none; }
  .product-grid .product .mobile-list-image { position: relative; touch-action: pan-y pinch-zoom; }
  .product-grid .product .mobile-list-image.is-secondary .photo.primary { opacity: 0; }
  .product-grid .product .mobile-list-image.is-secondary .photo.secondary { opacity: 1; }
  .mobile-list-image-count { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 3px 7px; border-radius: 12px; background: rgba(255,255,255,.85); color: #333; font: 10px/1.3 Arial,sans-serif; pointer-events: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid > .product { min-width: 0; }
  .product-grid > .product > .image-swap { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; }
  .product-grid > .product > .image-swap > .photo { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #fff; }
  .product-grid > .product > .photo,
  .product-grid > .product > .placeholder { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; background: #fff; }
  #detail-main-frame { position: relative; touch-action: pan-y pinch-zoom; }
  .mobile-gallery-counter {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgb(17 17 17 / 72%);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .catalogue-summary > span { display: none; }
  .product-grid > .product > .copy > .category-label,
  .product-grid > .product > .copy > p:not(.product-code) { display: none; }
  .product-grid > .product > .copy > h3 {
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #303030;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .detail > .detail-grid h1 {
    margin: 12px 0 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: #303030;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* Shared desktop/mobile filter: grouped units and unchanged 44px slider targets. */
  .catalogue-spec-filters:has(.capacity-range-row) {
    margin-left: 0;
    margin-right: 0;
    border: 0;
    background: transparent;
  }
  .spec-filter-row.capacity-range-row {
    --green: #111111;
    --ink: #111111;
    --line: #e5e5e5;
    color: #111111;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 8px;
    padding: 12px 0 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
  }
  .spec-filter-row.capacity-range-row > b {
    grid-column: 1;
    place-items: center start;
    width: auto;
    padding: 0;
    background: transparent;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
  }
  .spec-filter-row.capacity-range-row > div,
  .spec-filter-row.capacity-range-row .capacity-range-control { display: contents; }
  .capacity-range-row .capacity-range-heading { grid-column: 2; grid-row: 1; }
  .capacity-range-row .capacity-range-units {
    flex-wrap: nowrap;
    gap: 0;
    padding: 3px;
    border-radius: 8px;
    background: #f0f0f0;
  }
  .capacity-range-row .capacity-range-units button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-size: 12px;
  }
  .capacity-range-row .capacity-range-units button[aria-pressed="true"] {
    background: var(--green);
    color: #fff;
  }
  .capacity-range-row .capacity-range-track { grid-column: 1 / -1; margin-top: 25px; }
  .capacity-range-row .capacity-range-selection {
    padding: 2px 8px;
    border: 0;
    background: transparent;
    font-size: 13px;
  }
  .capacity-range-row .capacity-range-rail { background: #dedede; }
  .capacity-range-row .capacity-range-track input[type="range"]:focus-visible::-webkit-slider-thumb { background: radial-gradient(circle, #fff 0 10px, #111 10px 13px, #d9d9d9 13px 19px, transparent 19px); }
  .capacity-range-row .capacity-range-track input[type="range"]:focus-visible::-moz-range-thumb { background: radial-gradient(circle, #fff 0 10px, #111 10px 13px, #d9d9d9 13px 19px, transparent 19px); }
  .capacity-range-row .capacity-range-ticks { grid-column: 1 / -1; color: #737373; }
  .capacity-range-row .capacity-range-note { margin-top: 8px; color: #737373; font-size: 11px; }
@media (max-width: 760px) {
  .catalogue-spec-filters:has(.capacity-range-row) { margin-left: 12px; margin-right: 12px; }
}

/* Desktop catalogue search matches the mobile finish without moving its position. */
@media (min-width: 761px) {
  .catalogue-nav-row .toolbar.catalogue-search-toolbar {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    min-height: 48px;
    padding: 0 4px 0 14px;
    border: 0;
    border-radius: 8px;
    background: #f0f0f0;
  }
  .catalogue-nav-row .catalogue-search-toolbar input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-size: 14px;
    line-height: 1.5;
  }
  .catalogue-nav-row .catalogue-search-toolbar input::placeholder { color: #737373; font-size: 13px; opacity: 1; }
  .catalogue-nav-row .catalogue-search-toolbar .catalogue-search-button {
    flex: 0 0 auto;
    min-width: 56px;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111;
    font-size: 13px;
    font-weight: 600;
  }
  .catalogue-nav-row .catalogue-search-toolbar:focus-within { box-shadow: inset 0 0 0 1px #777; }
  .catalogue-nav-row .catalogue-search-toolbar input:focus { outline: none; }
  .catalogue-nav-row .catalogue-search-toolbar .catalogue-search-button:focus-visible { outline: 2px solid #111; outline-offset: -3px; }
  .catalogue-nav-row .catalogue-search-toolbar .catalogue-search-button:active { background: #e2e2e2; }
}