/* VESRETH mockup — phone & tablet layer: bottom tab bar, rails, touch tuning */

.tabbar{display:none}

@media (max-width:820px){
  :root{--tabbar:64px}

  /* ---------- Bottom tab bar ---------- */
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;
    height:var(--tabbar);padding:0 4px;
    background:rgba(11,11,11,.92);color:rgba(247,245,240,.62);
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(247,245,240,.08);border-radius:22px;
    box-shadow:0 18px 40px -12px rgba(11,11,11,.45),0 2px 8px rgba(11,11,11,.18);
    transition:transform .45s var(--ease),opacity .45s var(--ease);
  }
  body.locked .tabbar{transform:translateY(calc(100% + 24px));opacity:0}
  .tabbar a,.tabbar button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:inherit;
    -webkit-tap-highlight-color:transparent;transition:color .3s;
  }
  .tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
  .tabbar .on{color:var(--ivory)}
  .tabbar .on::before{content:"";position:absolute;top:7px;width:4px;height:4px;border-radius:50%;background:var(--champagne)}
  .tabbar .on svg{transform:translateY(2px)}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.88)}
  .tabbar .badge{position:absolute;top:9px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--champagne);color:var(--obsidian);font-size:9.5px;letter-spacing:0;font-weight:500;display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--ease)}
  .tabbar .badge.show{transform:scale(1)}
  .tabbar .badge.pop{animation:pop .5s var(--ease)}
  @keyframes pop{40%{transform:scale(1.35)}}

  /* keep content clear of the bar */
  body{padding-bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom))}
  .footer{padding-bottom:calc(28px + var(--tabbar))}
  .sticky-atc{bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom));left:10px;right:10px;border:1px solid rgba(11,11,11,.08);border-radius:16px;box-shadow:0 10px 30px -10px rgba(11,11,11,.25)}
  .sticky-atc{transform:translateY(calc(100% + var(--tabbar) + 40px))}
  .sticky-atc.show{transform:none}

  /* ---------- Header: logo only, the tab bar does the rest ---------- */
  .header__inner{grid-template-columns:44px 1fr 44px;padding:14px var(--gutter)}
  .nav--left a,.nav--right a{display:none!important}
  .nav--right{justify-content:flex-end}
  .menu-btn{display:block;width:22px}
  .header.is-solid .header__inner{padding-top:10px;padding-bottom:10px}
  .brand{gap:7px}
  .brand .mono{width:22px}
  .brand .word{width:96px}
  .header.is-solid .brand .mono{width:18px}

  /* ---------- Heroes use the small-viewport height so mobile toolbars don't crop them ---------- */
  .poster{height:100svh;min-height:540px}
  .phero{height:82svh}
  .poster__content{padding-bottom:calc(var(--tabbar) + 44px + env(safe-area-inset-bottom))}
  .poster__title{font-size:clamp(40px,12vw,64px)}
  .poster__sub{font-size:13.5px;margin:16px auto 26px}
  .poster--split .right{font-size:30px;text-align:center}
  .poster--split .left img{width:150px;margin:0 auto}
  /* Homepage hero on phones: photo on top, copy below on obsidian so nothing covers the model */
  .poster--hero{--hero-img:max(430px,64svh);height:auto;min-height:0;flex-direction:column;align-items:stretch;background:var(--obsidian)}
  .poster--hero > .ph{position:relative;inset:auto;height:var(--hero-img)}
  .poster--hero::after{bottom:auto;height:var(--hero-img);background:linear-gradient(180deg,rgba(11,11,11,.45) 0%,transparent 22%,transparent 72%,var(--obsidian) 100%)}
  .poster--hero .poster__content{margin-top:-40px;padding:0 var(--gutter) 52px}
  .poster--hero .poster__eyebrow{margin-bottom:14px}
  /* Second poster on phones: portrait image, line set in the sky above the model */
  .poster--split{height:92svh}
  .poster--split::after{background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.2) 38%,transparent 55%,rgba(11,11,11,.35) 100%)}
  .poster--split .poster__content{justify-content:flex-start;padding-top:86px;gap:12px}
  .poster--split .right{font-size:26px!important}
  .poster--split .left img{width:118px!important}
  .poster--split .cta{bottom:calc(var(--tabbar) + 36px + env(safe-area-inset-bottom))}
  .phero__content{padding-bottom:calc(var(--tabbar) + 40px)}

  /* ---------- Sections ---------- */
  .section{padding:64px var(--gutter)}
  .head{margin-bottom:28px;gap:16px}
  .head h2{font-size:36px}
  .philosophy{padding:84px var(--gutter)}
  .philosophy blockquote{font-size:28px}
  .soon{padding:84px var(--gutter)}
  .soon h2{font-size:38px}
  .cats{gap:10px 22px;font-size:10px}
  .pillars .pillar{padding:30px var(--gutter)}
  .manifesto{padding:84px var(--gutter)}
  .manifesto p.big{font-size:26px}
  .split__text{padding:48px var(--gutter)}
  .look-quote{padding:84px var(--gutter)}

  /* ---------- Product cards on touch: no hover swap, info stacks ---------- */
  .card__info{flex-direction:column;gap:4px;padding-top:12px}
  .card__name{font-size:11px;letter-spacing:.12em;line-height:1.4}
  .card__meta{margin-top:2px;font-size:11.5px}
  .card__price{font-size:11.5px}
  .swatches{margin-top:8px}

  /* ---------- Horizontal product rails (homepage, related) ---------- */
  .grid.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--gutter)}
  .grid.rail::-webkit-scrollbar{display:none}
  .grid.rail > .card{flex:0 0 68%;scroll-snap-align:start}
  .rail-hint{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
  .rail-progress{flex:0 0 96px;height:1px;background:rgba(11,11,11,.12);position:relative;overflow:hidden}
  .rail-progress i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--obsidian);transition:transform .2s linear}

  /* ---------- Collection ---------- */
  .col-head{margin:18px 0 26px}
  .col-head h1{font-size:44px}
  .col-head p{font-size:13.5px}
  .toolbar{padding:12px var(--gutter);gap:10px;font-size:10.5px}
  .col-grid .grid{column-gap:10px;row-gap:30px}
  .more{padding:48px var(--gutter) 64px}

  /* ---------- Product page ---------- */
  .gallery{scroll-behavior:smooth}
  .gallery-dots{display:flex;justify-content:center;gap:7px;padding:14px 0 0}
  .gallery-dots i{width:6px;height:6px;border-radius:50%;background:rgba(11,11,11,.18);transition:all .3s var(--ease)}
  .gallery-dots i.on{width:18px;border-radius:3px;background:var(--obsidian)}
  .info{padding-top:22px}
  .info h1{font-size:38px}
  .size{height:48px}
  .pdp-swatches a{width:30px;height:30px}
  .help{flex-direction:column;gap:12px}
  .acc summary{padding:18px 0}
  .story__text{padding:48px var(--gutter)}

  /* ---------- Forms: 16px inputs stop iOS from zooming ---------- */
  .field input,.field select,.field textarea,.news input,.summary .promo input{font-size:16px}

  /* ---------- Drawers / modal ---------- */
  .drawer{width:100vw}
  .drawer__nav a{font-size:30px}
  .modal{width:100vw;left:0;top:auto;bottom:0;transform:translateY(100%);max-height:86vh;border-radius:20px 20px 0 0}
  .modal.open{transform:none}
  .modal .table{font-size:12px}
  .modal .table th,.modal .table td{padding:11px 4px}
}

@media (min-width:821px){.gallery-dots,.rail-hint{display:none}}

/* Touch devices: hover-only effects off */
@media (hover:none){
  .card .ph.alt{display:none}
  .card__quick{display:none}
  .nav a::after{display:none}
}

@media (max-width:380px){
  .tabbar a,.tabbar button{font-size:8px;letter-spacing:.12em}
  .grid.rail > .card{flex-basis:76%}
  .poster__title{font-size:38px}
}