/*! mc-applehig 2026-10-28 — Apple HIG upgrade pass (t599u). Loaded last; rollback = remove the tag. */

/* ===== Critical 1: overlays never cover primary CTAs ===== */
/* Telegram bar: bigger, AA-contrast Join + 44px dismiss target */
html.mc-homepreview #mc-tg2-root .mc-tg2-cta{min-height:44px;padding:0 16px;background:#0b6fa4}
html.mc-homepreview #mc-tg2-root .mc-tg2-close{width:44px;height:44px;top:50%;right:2px;transform:translateY(-50%);font-size:20px;color:#cbd5e1}
html.mc-homepreview #mc-tg2-root .mc-tg2-sheet{padding-right:48px}
/* While the bar is up on phones, lift the support FAB + AI panel above it */
@media (max-width:767px){
  html.mc-tg2-vis body .fixed.bottom-5.right-4{bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  html.mc-tg2-vis body .fixed.bottom-24.right-4{bottom:calc(168px + env(safe-area-inset-bottom,0px))!important}
  /* Never let the bar sit on a sticky buy/checkout bar */
  html.mcx-bar-on #mc-tg2-root,html.mcx-cbar-on #mc-tg2-root,html.mcx-kbar-on #mc-tg2-root{display:none!important}
  /* FAB always clears the home indicator */
  html body .fixed.bottom-5.right-4{margin-bottom:env(safe-area-inset-bottom,0px)}
}

/* ===== Critical 3: contrast (AA) — helper/placeholder greys on light surfaces ===== */
html body #root main .text-gray-400,
html body #root main .text-slate-400{color:#64748b}
html body #root main :is(.bg-gray-900,.bg-gray-800,.bg-slate-900,.bg-slate-800,.bg-black,.bg-primary,.bg-secondary) .text-gray-400,
html body #root main :is(.bg-gray-900,.bg-gray-800,.bg-slate-900,.bg-slate-800,.bg-black,.bg-primary,.bg-secondary) .text-slate-400{color:#cbd5e1}
html body #root main svg.text-gray-400{color:#64748b}
html body #root :is(main,header) :is(input,textarea)::placeholder{color:#64748b;opacity:1}
html body #root :is(main,header) select:invalid{color:#64748b}
html body .mcv-v.ph{color:#64748b}
html body .mc-inf-end{color:#64748b}
/* Footer small print on navy: #6b7280 was 3.7:1 -> #9ca3af is 7:1 */
html body footer .text-gray-500{color:#9ca3af}
html body #mc-subscribe-footer .mc-sub-note{color:#9ca3af}

/* ===== Critical 4: search sheet ===== */
#mc-srch{position:fixed;inset:0;z-index:100060}
#mc-srch[hidden]{display:none!important}
#mc-srch .mc-srch-scrim{position:absolute;inset:0;background:rgba(15,23,42,.45);opacity:0;transition:opacity .2s}
#mc-srch .mc-srch-panel{position:absolute;left:0;right:0;top:0;background:#fff;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 14px;box-shadow:0 12px 30px rgba(15,23,42,.18);border-radius:0 0 18px 18px;transform:translateY(-12px);opacity:0;transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .22s}
#mc-srch.on .mc-srch-scrim{opacity:1}
#mc-srch.on .mc-srch-panel{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){#mc-srch .mc-srch-scrim,#mc-srch .mc-srch-panel{transition:none}}
#mc-srch .mc-srch-form{display:flex;align-items:center;gap:8px;max-width:720px;margin:0 auto}
#mc-srch .mc-srch-field{flex:1;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:#f1f5f9;color:#475569;border:1.5px solid transparent}
#mc-srch .mc-srch-field:focus-within{border-color:#027FB9;background:#fff}
#mc-srch .mc-srch-field input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;font:500 16px/1.2 inherit;color:#0f172a;-webkit-appearance:none;appearance:none}
#mc-srch .mc-srch-field input::placeholder{color:#64748b;opacity:1}
#mc-srch .mc-srch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mc-srch .mc-srch-cancel{min-height:44px;min-width:44px;padding:0 8px;border:0;background:transparent;color:#0277b0;font:600 16px/1 inherit;cursor:pointer}
#mc-srch .mc-srch-cancel:focus-visible,#mc-srch .mc-srch-quick a:focus-visible{outline:2px solid #027FB9;outline-offset:2px;border-radius:10px}
#mc-srch .mc-srch-quick{display:flex;flex-wrap:wrap;gap:8px;max-width:720px;margin:12px auto 0}
#mc-srch .mc-srch-quick a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#f1f5f9;color:#0f172a;font:600 14px/1 inherit;text-decoration:none}
html.mc-srch-open{overflow:hidden}

/* ===== High 6: product cards — one badge max on the photo, availability as quiet meta ===== */
html body a[href^="/product/"] .absolute.top-2.left-2 > :nth-child(n+2){display:none!important}
html body a[href^="/product/"] :has(> .mc-oos-tag) > .absolute.top-2.left-2{display:none!important}
html body .mc-av.mc-av-meta{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:none;margin-top:6px;padding:0;background:none;box-shadow:none;color:#475569;font:500 11px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html body .mc-av.mc-av-meta .mc-av-t{color:#475569}
html body .mc-av.mc-av-meta .mc-av-k{display:inline!important;font-weight:600;color:#334155}
html body .mc-av.mc-av-meta .mc-av-t{display:inline!important}
html body .mc-av.mc-av-meta svg{width:12px;height:8px}

/* ===== High 7: category tiles — always a dark scrim under white titles ===== */
html body .mcx-tile:not(.mcx-adult):not(.mcx-all-tile):after{background:linear-gradient(to top,rgba(7,13,22,.94) 0%,rgba(7,13,22,.82) 30%,rgba(7,13,22,.64) 54%,rgba(7,13,22,.3) 72%,rgba(7,13,22,.06) 84%,rgba(7,13,22,.3) 100%)!important}
html body .mcx-name{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45)}
html body .mcx-count,html body .mcx-explore{text-shadow:0 1px 2px rgba(0,0,0,.5)}
html body .mcx-chip{background:rgba(7,13,22,.45)}

/* ===== Medium 8: hero — Shop Now filled primary (AA), Wholesale outline secondary ===== */
html body #root main a[href="/shop"].bg-primary.rounded-full{background:#0277b0!important;background-image:none!important}
html body #root main a[href="/shop"].bg-primary.rounded-full:hover{background:#015f8c!important;color:#fff!important}
html body #root main a[href="/wholesale"].bg-secondary.rounded-full{background:#fff!important;color:#0f172a!important;border:2px solid #027FB9!important;box-shadow:none!important}
html body #root main a[href="/wholesale"].bg-secondary.rounded-full svg{color:#027FB9}

/* ===== Medium 9: size chips >=44px, selected state not colour-alone ===== */
html body .mcv-chip,html[data-mc-page="product"]:root body .mcv-chip{min-height:44px!important}
html body .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot)){padding-left:30px}
html body .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot))::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-6px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}
html body .mcv-chips.mcv-grid .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot)),html body .mcv-chips.mcv-g2 .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot)){padding-left:24px}
html body .mcv-chips.mcv-grid .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot))::before,html body .mcv-chips.mcv-g2 .mcv-chip[aria-checked="true"]:not(:disabled):not(:has(img,.mcv-sd,.mcv-dot))::before{left:8px}
html.mc-homepreview body #mc-subscribe-footer .mc-sub-note,html body .mc-sub-note{color:#9ca3af}
html body #root footer #mc-legal{color:#9ca3af}

/* =====================================================================
   hig4 — 2026-10-28 (t600u brand blue AA, t602u/t603u site-wide polish)
   Brand blue for small text: #0096DB (3.3:1 on white) -> #0277b0 (4.9:1).
   On blue tints (bg-primary/10 ~ #e6f4fb) text uses #026a9e (5.3:1).
   Large fills, borders, icons and gradients keep their brand colours.
   ===================================================================== */
html body #root{--mc-blue-ink:#0277b0;--mc-blue-ink-tint:#026a9e}
html body #root .text-primary,
html body #root .hover\:text-primary:hover,
html body #root .group:hover .group-hover\:text-primary{color:#0277b0}
html body #root .bg-primary\/10.text-primary,
html body #root .bg-primary\/5.text-primary,
html body #root .bg-primary\/20.text-primary{color:#026a9e}
/* catgrid tokens (eyebrow, "Shop all categories") */
html body .mcx{--p:#0277b0}
/* product page: --mcx-pri-d (#027FB9, 4.4:1) is used as small text colour */
html body{--mcx-pri-d:#0277b0}
/* NEW badges: green->blue gradient behind 10px white text (2.0-3.3:1) -> solid ink, 11px */
html body #root .absolute.bg-gradient-to-r.from-secondary.to-primary.text-white,
html body .mc-new-badge{background:#0277b0!important;background-image:none!important;color:#fff!important;font-size:11px!important;letter-spacing:.04em}
/* small white-on-blue fills */
html body #mc-subscribe-footer .mc-sub-cta,
html.mc-homepreview #mc-subscribe-footer .mc-sub-cta{background:#0277b0}
html body #mc-subscribe-footer .mc-sub-cta:hover{background:#015f8c}
html body #root .fixed .bg-primary.px-4.py-3{background:#0277b0}
html.mc-homepreview #mc-sourcing-preview .mc-src-ctas a.pri{background:#0277b0}
html.mc-homepreview #mc-sourcing-preview .mc-src-ctas a.sec:hover{color:#0277b0}
html.mc-homepreview #mc-sourcing-preview .mc-src-badge .ic{color:#0277b0}
/* inline-styled bits in index.html (variant picker links, cart stepper) */
html body .mcv-clear,html body .mcv-more{color:#0277b0}
html body span[style*="color:#0096db"]{color:#0277b0!important}
html body div[style*="background:#0096db"][style*="color:#fff"]{background:#0277b0!important}

/* ===== Typography: sharper rendering, clear hierarchy, 11px floor ===== */
html body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html body #root :is(h1,h2){letter-spacing:-.015em;text-wrap:balance}
html body #root :is(h3,h4){letter-spacing:-.005em}
html body #root main p{text-wrap:pretty}
html body #root main p.text-base,html body #root main p.text-lg{max-width:68ch}
/* below-minimum UI text -> 11px */
html body .mcx-chip{font-size:11px}
html body #root .text-\[10px\]{font-size:11px}
html body #root .mc-chip.text-\[10px\]{font-size:11px}
html body .mc-cards-soon{font-size:11px}
/* card category captions: gray-400 at 10.9px was muddy; quieter but legible */
html body #root a[href^="/product/"] p.text-\[10px\].text-gray-400{color:#64748b;letter-spacing:.04em}
/* product card titles: tighter, two clean lines */
html body #root a[href^="/product/"] h3{line-height:1.3}

/* ===== Motion: brief, subtle, reduced-motion aware ===== */
/* header logo: no perpetual pendulum/shimmer (it blurred the logo every few seconds) */
html body #root .animate-logo-nav{animation:none!important;filter:none!important}
/* long hover transitions -> 200-300ms; photo zoom 1.10 -> 1.04 */
html body #root .duration-500,html body #root .duration-700,html body #root .duration-1000{transition-duration:.28s!important}
html body #root .mcx-tile,html body #root .mc-card,html body #root a.group{transition-duration:.22s!important;transition-timing-function:cubic-bezier(.2,.7,.3,1)!important}
@media (hover:hover){
  html body #root .group:hover .group-hover\:scale-110,html body #root .group:hover .group-hover\:scale-105{transform:scale(1.04)}
}
/* category cards: drop the 1s white light-sweep that ran on top of the hover zoom */
html body #root a.group .absolute.top-0.left-0.w-full.h-full.bg-gradient-to-r.from-transparent{display:none}
@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html body #root .group:hover .group-hover\:scale-110,html body #root .group:hover .group-hover\:scale-105{transform:none}
}

/* ===== Surfaces: crisper cards, lighter shadows ===== */
html body #root a[href^="/product/"].shadow-md,html body #root a[href^="/product/"].shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.05)}
@media (hover:hover){html body #root a[href^="/product/"]:is(.shadow-md,.shadow-sm):hover{box-shadow:0 6px 18px rgba(15,23,42,.10),0 0 0 1px rgba(15,23,42,.06);transform:translateY(-2px)}}
html body #root main a[href="/shop"].bg-primary.rounded-full{box-shadow:0 4px 12px rgba(2,119,176,.22)!important}

/* ===== Overlays: currency pill never covers price/CTA rows ===== */
html body #mc-loc-pill{font-size:13px!important;color:#1f2937!important}
html body #mc-loc-pill button[aria-label="Dismiss"]{min-width:36px;min-height:36px;margin:-8px -8px -8px 0!important;color:#64748b!important;font-size:18px!important}
html.mcx-bar-on #mc-loc-pill,html.mcx-cbar-on #mc-loc-pill,html.mcx-kbar-on #mc-loc-pill{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:767px){
  html:has(#mc-pwa2-root.mc-pwa2-on) #mc-loc-pill,html:has(#mc-tg2-root.mc-tg2-on) #mc-loc-pill{display:none!important}
  /* the pill spans the width: keep it left of the support FAB */
  html body #mc-loc-pill{max-width:calc(100vw - 104px)!important}
}
/* hig4b: blue text sitting on blue/brand tints -> deeper ink (>=5:1) */
html body #root [class*="bg-primary/"].text-primary,
html body #root [class*="bg-primary/"] > .text-primary{color:#026a9e!important}
html body #root section[class*="from-primary/"] a.text-primary{color:#026a9e}
html body .mcx .mcx-eyebrow{color:#026a9e}
/* hig4c: white text on solid brand-blue fills (stepper dots, small buttons) -> #0277b0 (4.9:1) */
html body #root .bg-primary.text-white{background-color:#0277b0}