*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f1ea;color:#16181c;font-family:'Spectral',Georgia,serif;overflow-x:hidden}
a{color:#2247c4;text-decoration:none}
a:hover{color:#16181c}
::selection{background:#16181c;color:#f4f1ea}

@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-6%) scale(1.16)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-8%,5%) scale(.88)}100%{transform:translate(0,0) scale(1.06)}}
@keyframes drift3{0%{transform:translate(0,0) scale(.94)}50%{transform:translate(5%,8%) scale(1.18)}100%{transform:translate(0,0) scale(.94)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,-7%) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-13px)}100%{transform:translateY(0)}}
@keyframes cue{0%{transform:translateY(0);opacity:.15}50%{opacity:.9}100%{transform:translateY(11px);opacity:.15}}
@keyframes shimmer{0%,100%{opacity:.6}50%{opacity:1}}

.rv{opacity:0;transform:translateY(42px);filter:blur(6px)}

.lang-btn{transition:background .15s ease,color .15s ease}

.btn-bag{transition:background .2s,color .2s}
.btn-bag:hover{background:#16181c;color:#f4f1ea}

.btn-add{transition:background .2s,color .2s,border-color .2s}
.btn-add:hover{background:#16181c;color:#f4f1ea;border-color:#16181c}

.btn-cta{transition:background .2s,color .2s}
.btn-cta:hover{background:transparent;color:#16181c}

.btn-cart-close{transition:background .2s,color .2s}
.btn-cart-close:hover{background:#16181c;color:#f4f1ea}

.cart-backdrop{position:fixed;inset:0;background:rgba(28,24,18,.3);backdrop-filter:blur(2px);opacity:0;pointer-events:none;z-index:99}

.cart-panel{position:fixed;top:0;right:0;height:100vh;width:400px;max-width:92vw;background:#fbf9f5;border-left:1px solid rgba(22,24,28,.14);transform:translateX(103%);z-index:100;box-shadow:-40px 0 90px -30px rgba(48,36,24,.35);display:flex;flex-direction:column}

.size-select{font:11px/1 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#16181c;background:transparent;border:1px solid rgba(22,24,28,.22);border-radius:999px;padding:5px 22px 5px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316181c' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}

.vcard button,.vcard select{touch-action:manipulation}

@media (max-width:1100px){
  .side{max-width:64vw !important}
}
@media (max-width:820px){
  .chap{flex-direction:column !important;gap:34px !important;padding:96px 22px 78px !important;text-align:left !important}
  .side{width:100% !important;max-width:none !important}
  .hdr{padding:12px 16px !important;gap:10px}
  .hdr-brand span{display:none}
  .num{display:none !important}
  .ghost{font-size:44vw !important}
  /* Stacked instead of 3 cards squeezed (or overflowing, since body clips overflow-x) into a row:
     scroll-snap + touch-scrolling also reliably eats taps on buttons/selects on real phones
     (confirmed — touch-action alone didn't fix it), so at the same width .chap/.side go single-
     column we trade any horizontal card layout for a plain vertical list where taps just work
     and nothing gets clipped off-screen. */
  .vrow{flex-direction:column !important;animation:none !important}
  .vcard{width:100% !important}
}
@media (max-width:430px){
  .bag-label{display:none}
  .hdr{padding:10px 12px !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1 !important;transform:none !important;filter:none !important}
}