/* Without this, any element that combines width:100% with its own padding (several modals/
   buttons in this codebase do — e.g. the checkout dialog: width:100% of an already-padded
   parent, plus its own 32px padding) renders WIDER than its container, since content-box adds
   padding on top of the specified width instead of eating into it. On desktop there's usually
   enough slack around a centered modal that this goes unnoticed; on a narrow phone the modal's
   effective width can exceed the viewport itself, clipping/cutting it off at the screen edge —
   this is the fix, not a per-element patch, since the same class of bug can recur anywhere. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@keyframes hero-fadein{from{opacity:0}to{opacity:1}}
.hero-video-wrap{animation:hero-fadein 1.1s ease}
@keyframes hero-kenburns{0%{transform:scale(1)}100%{transform:scale(1.05)}}
.hero-video-kenburns{animation:hero-kenburns 14s ease-in-out infinite alternate;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero-video-wrap{animation:none !important}.hero-video-kenburns{animation:none !important}}
body{margin:0;background:#FDFAF6;color:#3A2C31;font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased}
input,textarea,select,button{font-family:'Manrope',sans-serif}
::selection{background:#EBD3D5}
@keyframes bba-marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marq{animation:bba-marq 28s linear infinite}
@media(prefers-reduced-motion:reduce){.marq{animation:none !important}}
.hv-dark:hover{background:#94555E!important;border-color:#94555E!important}
.hv-fill:hover{background:#3A2C31!important;color:#fff!important}
.hv-white:hover{color:#fff!important}
button{transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease}
button:active{transform:scale(.97)}
a{transition:color .18s ease,opacity .18s ease}
input,textarea,select{transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:#94555E!important;box-shadow:0 0 0 3px rgba(148,85,94,.16)}
button:focus-visible,a:focus-visible{outline:2px solid #94555E;outline-offset:2px;border-radius:2px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
.pcard{transition:transform .2s ease}
.pcard:hover{transform:translateY(-4px)}
@keyframes bba-fade{from{opacity:0}to{opacity:1}}
@keyframes bba-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes bba-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes bba-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.ov-fade{animation:bba-fade .22s ease}
.drawer-in{animation:bba-slide .28s cubic-bezier(.22,.8,.36,1)}
.modal-in{animation:bba-rise .26s cubic-bezier(.22,.8,.36,1)}
.toast-in{animation:bba-toast .24s ease}
@media(prefers-reduced-motion:reduce){.ov-fade,.drawer-in,.modal-in,.toast-in{animation:none !important}.pcard,button,a{transition:none !important}}
@keyframes bba-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.pop-in{animation:bba-pop .32s cubic-bezier(.22,.8,.36,1)}
@media(prefers-reduced-motion:reduce){.pop-in{animation:none !important}}
@keyframes bba-notice-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.notice-in{animation:bba-notice-up .38s cubic-bezier(.22,.8,.36,1)}
@media(prefers-reduced-motion:reduce){.notice-in{animation:none !important}}
@keyframes bba-spin{to{transform:rotate(360deg)}}
.bba-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:bba-spin .7s linear infinite;vertical-align:-2px}
@media(prefers-reduced-motion:reduce){.bba-spinner{animation:none !important}}
.yarn-thread{--lp:clamp(0,calc((var(--p,0) - var(--start,0)) / (var(--end,1) - var(--start,0))),1);transform:translate(calc(var(--tx) * (1 - var(--lp))),calc(var(--ty) * (1 - var(--lp)))) rotate(calc(var(--rot) * (1 - var(--lp)))) scale(calc(1 - .22 * var(--lp)));opacity:calc(1 - var(--lp));will-change:transform,opacity}
#yarn-bag-handle,#yarn-bag-handle2,#yarn-bag-outline{--lp:clamp(0,calc((var(--p,0) - var(--start,0)) / (var(--end,1) - var(--start,0))),1);stroke-dashoffset:calc(var(--dash,1100) * (1 - var(--lp)))}
#yarn-bag-handle{--dash:190}
#yarn-bag-handle2{--dash:150}
#yarn-bag-outline{--dash:620}
[id^="yarn-row-"],#yarn-bag-stitch,#yarn-bag-text{--lp:clamp(0,calc((var(--p,0) - var(--start,0)) / (var(--end,1) - var(--start,0))),1);opacity:var(--lp)}
#yarn-bag-text{transform:translateY(calc((1 - var(--lp)) * 10px))}
#yarn-bag-shadow{--lp:clamp(0,calc((var(--p,0) - var(--start,0)) / (var(--end,1) - var(--start,0))),1);opacity:calc(var(--lp) * .2);transform:scaleX(calc(.65 + .35 * var(--lp)));transform-origin:260px 396px}
.yarn-sparkle{--lp:clamp(0,calc((var(--p,0) - var(--start,0)) / (var(--end,1) - var(--start,0))),1);opacity:var(--lp);transform:scale(var(--lp))}
/* Camera "settles into focus" across the whole sequence — subtle zoom-in + de-rotate, the
   single cheapest addition for making a scroll illustration read as a directed shot. */
.yarn-scene{transform:scale(calc(.88 + .12 * var(--p,0))) rotate(calc(-6deg + 6deg * var(--p,0)));transform-origin:260px 300px;will-change:transform}
/* Slow, always-on ambient sway on the still-loose thread groups only (not the finished bag) so
   the section has a little life even before the visitor starts scrolling. */
@keyframes yarn-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.yarn-sway{animation:yarn-sway 7s ease-in-out infinite;transform-origin:260px 300px}
@keyframes yarn-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.yarn-done .yarn-bag-group{animation:yarn-breathe 4.2s ease-in-out infinite;transform-origin:260px 320px}
@keyframes yarn-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.yarn-done .yarn-sparkle{animation:yarn-twinkle 2.4s ease-in-out infinite}
#yarn-scroll-section{will-change:auto}
@media(prefers-reduced-motion:reduce){#yarn-scroll-section{height:auto !important}.yarn-thread{display:none}.yarn-scene{transform:none !important}.yarn-sway{animation:none !important}.yarn-done .yarn-bag-group{animation:none}.yarn-done .yarn-sparkle{animation:none}}
.bba-hamburger{display:none;position:relative;z-index:200}
.bba-navlinks-mobile-cart{display:none}
.bba-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:0!important}
@media(max-width:760px){
  html,body{overflow-x:hidden}
  .bba-topbar{font-size:10px!important;line-height:1.35!important;padding:8px 12px!important;gap:4px 12px!important}
  .bba-topbar>span:first-child{min-width:0;white-space:normal}
  .bba-split{grid-template-columns:1fr !important}
  .bba-foot{grid-template-columns:1fr !important;gap:24px !important}
  .bba-pad{padding:40px 26px !important}
  .bba-admin2,.bba-admin3{grid-template-columns:1fr !important}
  .bba-navshell{gap:0 !important;margin-top:8px !important;padding:12px 14px !important}
  /* No hamburger / hidden fullscreen menu on phones any more (per the owner): every nav entry
     stays visible from the first moment, wrapping naturally into compact rows. Nothing to tap
     open, and no fullscreen menu to clip off-screen. The hamburger button still exists in the DOM
     but the base rule keeps it display:none everywhere. */
  .bba-navlinks{display:grid !important;grid-template-columns:repeat(3,max-content);justify-content:center;align-items:center;gap:11px 14px;font-size:10.8px;line-height:1.15;width:100%;overflow:hidden}
  .bba-navlinks button{font-size:10.6px !important;line-height:1.15 !important;white-space:nowrap}
  /* On phones the cookie notice's own width (anchored left:20px, up to 360px wide) reaches well
     past the WhatsApp button's corner (right:20px, 56px wide) — every phone screen is narrower
     than 20+360+20+56=456px, so without this the notice (z-index:180) always renders on top of
     and blocks the WhatsApp button (z-index:90) for any visitor who hasn't dismissed it yet.
     Below 760px: make the notice a near-full-width bar and lift it clear above the button's row
     instead of overlapping it. */
  #cookie-notice{left:10px !important;right:10px !important;max-width:none !important;bottom:14px !important;bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;border-radius:10px !important;padding:9px 10px !important;gap:7px !important}
  #cookie-notice .bba-cookie-text{font-size:10.6px !important;line-height:1.35 !important}
  #cookie-notice .bba-cookie-actions{gap:7px !important}
  #cookie-notice .bba-cookie-actions button{padding:8px 12px !important;font-size:9.8px !important;flex:1}
  .bba-shop-chips{display:grid !important;grid-template-columns:repeat(2,max-content) !important;gap:8px !important}
  .bba-shop-chips button{min-width:96px}
  .bba-product-grid{width:300px !important;max-width:calc(100vw - 32px) !important;margin-left:16px !important;margin-right:auto !important;grid-template-columns:1fr !important;gap:18px !important}
  .bba-card-foot{display:block !important}
  .bba-card-cta{width:100% !important;min-width:0 !important;margin-top:8px !important}
  .bba-options-grid{grid-template-columns:1fr !important}
}
/* iPhone (notch/home-indicator models): keep fixed bottom elements clear of the home-indicator
   strip. env() needs viewport-fit=cover on the <meta viewport> (set in index.html) to be
   non-zero; on other devices it resolves to 0 and these are identical to the base values. */
.bba-fab{bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important}
.toast-in{bottom:calc(26px + env(safe-area-inset-bottom, 0px)) !important}
/* iOS Safari's URL bar makes 90vh taller than the visible screen, so a 90vh modal's bottom
   (and its submit buttons) can sit under the toolbar. dvh tracks the *visible* viewport. */
@supports (height: 1dvh){
  #checkout-dialog,#orderconfirm-dialog{max-height:88dvh !important}
}