/* Talisman Amor — mobile-first UX polish, 2026-09-11 */

:root {
  --mobile-header-h: 64px;
  --mobile-page-x: 20px;
  --mobile-ease: cubic-bezier(.22,.72,.24,1);
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }

@media (max-width: 980px) {
  html { scroll-padding-top: calc(var(--mobile-header-h) + 8px); }
  body { min-width: 0; }

  .topline {
    height: auto;
    min-height: 27px;
    padding: 7px max(14px, env(safe-area-inset-right)) 7px max(14px, env(safe-area-inset-left));
    text-align: center;
    line-height: 1.35;
  }

  .header {
    position: sticky !important;
    top: 0;
    z-index: 35;
    height: var(--mobile-header-h);
    min-height: var(--mobile-header-h);
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }

  .header .wordmark strong { font-size: 15px; }
  .header .wordmark small { margin-top: 6px; font-size: 6px; }
  .menu-button,
  .header-actions .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
  }
  .menu-button span { margin: 3px 0; }
  .header-actions { gap: 0; }
  .bag b { right: 3px; top: 3px; }

  .mobile-drawer {
    min-height: 100dvh;
    padding-top: calc(78px + env(safe-area-inset-top));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
  }
  .drawer-close {
    top: calc(16px + env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
  }

  .section-pad { padding-left: clamp(20px, 5vw, 34px); padding-right: clamp(20px, 5vw, 34px); }

  /* Homepage carousel: readable swipe affordance rather than desktop arrows. */
  .category-slider-viewport {
    margin-right: calc(-1 * clamp(20px, 5vw, 34px));
    padding-right: clamp(20px, 5vw, 34px);
    touch-action: pan-x;
  }
  .category-slider-track { align-items: start; }
  .category-slide { touch-action: manipulation; }

  /* Catalog tabs are a single, swipeable line. */
  .catalog-page .category-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .catalog-page .category-tabs::-webkit-scrollbar { display: none; }
  .catalog-page .category-tabs a { flex: 0 0 auto; scroll-snap-align: start; }

  .catalog-page .catalog-toolbar {
    position: sticky;
    top: var(--mobile-header-h);
    z-index: 12;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* Keep the two-column listing but make it resilient to long Ukrainian labels. */
  .catalog-page .product-card,
  .catalog-page .product-info,
  .catalog-page .product-info h3,
  .catalog-page .product-info p { min-width: 0; }
  .catalog-page .product-info h3,
  .catalog-page .product-info p {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Tablet PDP already becomes a natural document, never a sticky desktop column. */
  .pdp-panel {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  footer { min-width: 0; }
}

@media (max-width: 820px) {
  .section-pad { padding-top: 78px; padding-bottom: 78px; }

  .hero {
    height: min(78dvh, 760px);
    min-height: 580px;
  }
  .hero-content { max-width: min(86vw, 520px); }
  .hero h1 { font-size: clamp(43px, 8vw, 61px); }

  .category-slider-track {
    --category-gap: 12px;
    grid-auto-columns: min(42vw, 320px);
  }

  .brand-story .story-image { height: min(68dvh, 600px); }

  .catalog-page .catalog-heading h1 { font-size: clamp(36px, 7vw, 48px); }

  .pdp-media {
    position: relative;
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    background: #faf9f7;
  }
  .pdp-media::-webkit-scrollbar { display: none; }
  .pdp-media-item,
  .pdp-media-item:nth-child(n+2) {
    display: block !important;
    flex: 0 0 100%;
    width: 100%;
    height: min(70dvh, 620px);
    min-height: 460px;
    border: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .pdp-slide-number {
    position: absolute;
    right: 16px;
    bottom: 15px;
    z-index: 4;
    min-width: 46px;
    height: 28px;
    padding: 0 10px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #4e4844;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .09em;
  }

  .pdp-content { padding-top: 76px; padding-bottom: 76px; }
  .recommendations { padding-top: 76px; padding-bottom: 88px; }

  .recommendation-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    margin-right: -20px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .recommendation-grid::-webkit-scrollbar { display: none; }
  .recommendation-card,
  .recommendation-card:nth-child(5) {
    display: flex;
    flex: 0 0 min(58vw, 290px);
    scroll-snap-align: start;
  }

  .cart-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  :root { --mobile-page-x: 18px; }

  .topline {
    min-height: 25px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 7.5px;
    letter-spacing: .105em;
  }

  .header { height: 62px; min-height: 62px; --mobile-header-h: 62px; }
  .header .wordmark { transform: translateY(-1px); }
  .header .wordmark strong { font-size: 14px; letter-spacing: .17em; }
  .header .wordmark small { font-size: 5.5px; letter-spacing: .55em; }
  .header-actions .icon-button:not(.bag) { display: none; }

  /* Hero is composed for a phone, not merely shrunk from desktop. */
  .hero {
    height: calc(100dvh - 87px);
    min-height: 540px;
    max-height: 780px;
  }
  .hero > img { object-position: 66% center; }
  .hero-content {
    left: var(--mobile-page-x);
    right: var(--mobile-page-x);
    bottom: calc(34px + env(safe-area-inset-bottom));
    max-width: 390px;
  }
  .hero .eyebrow { margin-bottom: 12px; font-size: 8.5px; }
  .hero h1 {
    max-width: 345px;
    font-size: clamp(38px, 11.2vw, 49px);
    line-height: 1.04;
    letter-spacing: -.025em;
  }
  .hero .lead {
    max-width: 330px;
    margin: 15px 0 22px;
    font-size: 12.5px;
    line-height: 1.55;
  }
  .hero .button { min-height: 48px; padding: 0 18px; gap: 26px; font-size: 9px; }

  .section-pad { padding: 66px var(--mobile-page-x); }
  .intro h2,
  .section-head h2,
  .stores h2 { font-size: clamp(32px, 9.4vw, 40px); }
  .intro > p:last-child { margin-top: 22px; font-size: 12.5px; line-height: 1.7; }

  .catalog { padding-top: 6px; }
  .catalog .section-head { margin-bottom: 18px; }
  .category-slider-controls { display: none; }
  .category-slider-viewport {
    margin-right: calc(-1 * var(--mobile-page-x));
    padding-right: var(--mobile-page-x);
  }
  .category-slider-track {
    --category-gap: 10px;
    grid-auto-columns: min(62vw, 252px);
  }
  .category-slide-media { aspect-ratio: 4 / 5; }
  .category-slide-copy { min-height: 54px; padding: 11px 1px 2px; }
  .category-slide-copy strong { font-size: clamp(18px, 5.4vw, 21px); }
  .category-slide-copy span { font-size: 15px; }
  .category-slider-status {
    margin-top: 7px;
    padding-right: 1px;
    text-align: right;
    font-size: 7.5px;
    letter-spacing: .11em;
  }

  .brand-story .story-image { height: min(59dvh, 470px); }
  .story-copy { padding: 58px var(--mobile-page-x) 64px; }
  .story-copy h2 { font-size: clamp(34px, 10vw, 42px); }
  .story-copy > p:not(.eyebrow) { margin: 23px 0; font-size: 12.5px; line-height: 1.72; }
  .monogram { font-size: 84px; }

  .store-grid article { min-height: 184px; padding-top: 32px; padding-bottom: 26px; }
  .store-grid h3 { margin-top: 20px; font-size: 25px; }

  /* Catalog */
  .catalog-page .catalog-hero { padding: 36px var(--mobile-page-x) 14px; }
  .catalog-page .catalog-heading h1 {
    font-size: clamp(31px, 9.8vw, 39px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .catalog-page .category-tabs {
    gap: 24px;
    padding: 10px var(--mobile-page-x) 17px;
  }
  .catalog-page .category-tabs a { font-size: 9px; letter-spacing: .13em; }

  /* Inline quick filters become a bottom sheet on touch phones. */
  .catalog-page .catalog-quick-select { display: none !important; }
  .catalog-page .catalog-toolbar {
    top: 62px;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 11px var(--mobile-page-x);
    border-top: 1px solid #eeeae6;
    border-bottom: 1px solid #eeeae6;
  }
  .catalog-page .toolbar-action {
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dedad5;
    background: #fff;
    gap: 7px;
    font-size: 7.5px;
    letter-spacing: .12em;
  }
  .catalog-page .toolbar-action svg { width: 14px; height: 14px; }
  .catalog-page .product-count { font-size: 7.5px; letter-spacing: .1em; text-align: center; }

  .catalog-page .category-products { padding: 18px var(--mobile-page-x) 66px; }
  .catalog-page .category-products .product-grid { gap: 27px 9px; }
  .catalog-page .product-photo { aspect-ratio: 1 / 1.08; }
  .catalog-page .product-info { min-height: 98px; padding: 12px 2px 2px; }
  .catalog-page .product-info h3 { margin-bottom: 6px; font-size: clamp(13px, 4vw, 15px); line-height: 1.25; }
  .catalog-page .product-info p { margin-bottom: 7px; font-size: 9px; line-height: 1.4; }
  .catalog-page .product-info strong { font-size: 9px; }
  .catalog-page .product-card > .quick-add {
    min-height: 34px;
    margin-top: 2px;
    padding: 9px 0 7px;
    font-size: 8px;
    letter-spacing: .11em;
    opacity: 1;
    transform: none;
  }
  .favorite-button {
    top: 4px !important;
    right: 4px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .favorite-button svg { width: 23px !important; height: 23px !important; }

  /* PDP */
  .pdp-media-item,
  .pdp-media-item:nth-child(n+2) {
    height: min(66dvh, 560px);
    min-height: 390px;
  }
  .pdp-panel {
    padding: 28px var(--mobile-page-x) 44px !important;
    border-top: 0 !important;
  }
  .pdp-back {
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
  }
  .pdp-back span { font-size: 26px; }
  .pdp-panel h1 { font-size: clamp(30px, 9.2vw, 38px); overflow-wrap: anywhere; }
  .pdp-subtitle { margin-top: 10px; font-size: 11px; line-height: 1.55; }
  .pdp-price { margin-top: 17px; font-size: 13px; }
  .pdp-field { margin-top: 25px; padding-top: 20px; }
  .pdp-label-row { margin-bottom: 13px; font-size: 9px; }

  .metal-options {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    margin-right: calc(-1 * var(--mobile-page-x));
    padding-right: var(--mobile-page-x);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .metal-options::-webkit-scrollbar { display: none; }
  .metal-option { flex: 0 0 116px; scroll-snap-align: start; }
  .metal-thumb { height: 88px; }
  .metal-option small { font-size: 8px; }

  .size-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
  }
  .size-option {
    min-width: 48px;
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 10px;
  }

  .pdp-actions { margin-top: 28px; gap: 9px; }
  .pdp-cta { min-height: 54px; font-size: 9px; }
  .pdp-note { margin-top: 11px; font-size: 8px; }

  .pdp-content { padding: 62px var(--mobile-page-x); }
  .pdp-editorial { gap: 28px; }
  .pdp-editorial h2 { font-size: clamp(31px, 9vw, 39px); }
  .pdp-story-copy > p { font-size: 15px; line-height: 1.72; }
  .pdp-specifications { margin-top: 28px; }
  .pdp-gallery { margin-top: 52px; }
  .pdp-gallery-item { min-height: 340px; }

  .recommendations { padding: 64px var(--mobile-page-x) 80px; text-align: left; }
  .recommendations h2 { font-size: clamp(30px, 8.8vw, 38px); }
  .recommendation-grid { margin-top: 34px; margin-right: calc(-1 * var(--mobile-page-x)); padding-right: var(--mobile-page-x); }
  .recommendation-card,
  .recommendation-card:nth-child(5) { flex-basis: min(64vw, 260px); }
  .recommendation-copy { min-height: 94px; padding: 14px 4px 0; text-align: left; }
  .recommendation-copy h3 { font-size: 14px; }

  .pdp-mobile-sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 32;
    padding: 9px max(var(--mobile-page-x), env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(var(--mobile-page-x), env(safe-area-inset-left));
    background: rgba(255,255,255,.94);
    border-top: 1px solid #e3ded9;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 240ms ease, transform 320ms var(--mobile-ease), visibility 240ms ease;
  }
  .pdp-mobile-sticky-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
  .pdp-mobile-sticky-cta button {
    width: 100%;
    min-height: 50px;
    border: 0;
    background: var(--wine);
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  /* Cart becomes one quiet reading column, with summary after products. */
  .cart-title { padding: 38px var(--mobile-page-x) 28px; }
  .cart-title h1 { font-size: clamp(31px, 9vw, 38px); }
  .cart-layout { gap: 40px; padding: 32px var(--mobile-page-x) 74px; }
  .cart-item {
    grid-template-columns: 96px minmax(0,1fr) !important;
    gap: 15px !important;
    margin-bottom: 28px;
    padding-bottom: 28px;
  }
  .cart-item-photo { width: 96px !important; height: 112px !important; }
  .cart-item-info h2 { margin-top: 1px; font-size: 19px; }
  .cart-item-subtitle { margin-bottom: 15px !important; font-size: 9px !important; }
  .cart-meta > div { grid-template-columns: 62px minmax(0,1fr); gap: 10px; margin-top: 8px; font-size: 9.5px; }
  .quantity-row { gap: 5px; }
  .quantity-row button {
    width: 44px;
    height: 44px;
    border: 1px solid #e4e0db;
    background: #fff;
    font-size: 16px;
  }
  .cart-item-actions { gap: 20px; margin-top: 15px; }
  .cart-item-actions a,
  .remove-item { min-height: 34px; display: inline-flex; align-items: center; font-size: 9px; }
  .cart-item-price { grid-column: 2; padding-top: 0; font-size: 10px; }
  .cart-summary {
    padding: 28px 0 0 !important;
    background: #fff !important;
    border-top: 1px solid #dedad5;
  }
  .summary-row { padding: 10px 0; font-size: 10px; }
  .summary-detail { margin: 8px 0 19px; font-size: 9px; }
  .summary-row.total { padding-top: 19px; }
  .checkout-button { width: 100%; min-height: 54px; height: auto; margin-top: 20px; font-size: 9px; }

  /* Footer keeps the brand hierarchy without becoming another full screen. */
  footer {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding: 46px var(--mobile-page-x) calc(22px + env(safe-area-inset-bottom));
  }
  .footer-brand,
  .newsletter { grid-column: 1 / -1; }
  footer .footer-brand .wordmark strong { font-size: 17px; }
  .footer-brand p { margin-top: 19px; }
  footer h4 { margin-bottom: 15px; font-size: 9px; }
  footer a,
  .newsletter p { margin: 11px 0; font-size: 10.5px; line-height: 1.45; }
  .newsletter { padding-top: 3px; }
  .copyright { margin-top: 10px; padding-top: 17px; font-size: 7.5px; line-height: 1.8; }

  /* Bottom sheets used by mobile catalog sorting and filtering. */
  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(24,21,20,.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  .mobile-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
  .mobile-catalog-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 71;
    max-height: min(82dvh, 660px);
    padding: 23px var(--mobile-page-x) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -16px 50px rgba(23,18,17,.09);
    transform: translateY(105%);
    transition: transform 360ms var(--mobile-ease);
  }
  .mobile-catalog-sheet.is-open { transform: none; }
  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ebe7e3;
  }
  .mobile-sheet-head h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
  }
  .mobile-sheet-close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 25px;
    font-weight: 300;
  }
  .mobile-sheet-group { padding: 21px 0 3px; }
  .mobile-sheet-group + .mobile-sheet-group { border-top: 1px solid #eeeae6; }
  .mobile-sheet-label {
    display: block;
    margin-bottom: 12px;
    color: #7a726d;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  .mobile-sheet-options { display: flex; flex-wrap: wrap; gap: 7px; }
  .mobile-sheet-option {
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid #dedad5;
    background: #fff;
    color: #332e2b;
    font-size: 10px;
  }
  .mobile-sheet-option.is-active { border-color: var(--wine); color: var(--wine); }
  .mobile-sort-options { display: grid; }
  .mobile-sort-option {
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid #eeeae6;
    background: #fff;
    color: #332e2b;
    text-align: left;
    font-size: 11px;
  }
  .mobile-sort-option.is-active { color: var(--wine); }

  .mobile-image-fade {
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .mobile-image-fade.is-loaded { opacity: 1; }
}

@media (max-width: 430px) {
  .category-slider-track { grid-auto-columns: 63vw; }
  .catalog-page .toolbar-action { padding-right: 10px; padding-left: 10px; }
  .catalog-page .toolbar-action span { font-size: 7px; }
  .catalog-page .product-count { max-width: 72px; line-height: 1.25; }
  .pdp-media-item,
  .pdp-media-item:nth-child(n+2) { min-height: 365px; }
}

@media (max-width: 360px) {
  :root { --mobile-page-x: 14px; }
  .topline { font-size: 7px; }
  .hero h1 { font-size: 37px; }
  .hero .lead { font-size: 11.5px; }
  .category-slider-track { grid-auto-columns: 66vw; }
  .catalog-page .catalog-heading h1 { font-size: 31px; }
  .catalog-page .catalog-toolbar { gap: 5px; }
  .catalog-page .toolbar-action { padding: 0 8px; }
  .catalog-page .toolbar-action svg { display: none; }
  .catalog-page .product-count { font-size: 7px; }

  .metal-option { flex-basis: 108px; }
  footer { gap: 26px 16px; }
}

@media (hover: none), (pointer: coarse) {
  .category-slide:hover .category-slide-media img,
  .catalog-page .product-card:hover .product-photo img,
  .catalog-page .product-card:hover .direct-product-photo img,
  .recommendation-card:hover .recommendation-image img {
    filter: none !important;
  }
  .category-slide:hover .category-slide-media img { transform: scale(1.001); }
  .catalog-page .product-card > .quick-add { opacity: 1; transform: none; }
  .button:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-catalog-sheet,
  .mobile-sheet-backdrop,
  .pdp-mobile-sticky-cta,
  .mobile-image-fade { transition-duration: 1ms !important; }
  .pdp-media { scroll-behavior: auto; }
}


/* Secondary service links in the mobile drawer. */
.drawer-secondary{margin-top:4px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:12px}
.drawer-secondary-label{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mobile-drawer .drawer-secondary-link{font-family:var(--sans);font-size:13px;line-height:1.35;color:rgba(255,255,255,.82);letter-spacing:.01em}
@media(max-width:620px){.drawer-secondary{margin-top:0;padding-top:16px;gap:10px}.mobile-drawer .drawer-secondary-link{font-size:12px}}