/* Phone experience for the main website. The desktop composition stays intact. */
.mobile-hero-experience,.studio,.mobile-bottom-bar{display:none}

@media(max-width:600px){
  :root{--phone-face-width:min(72vw,340px);--phone-face-depth:min(36vw,170px)}
  html{scroll-padding-top:76px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .site-header{height:66px}
  .site-nav{top:66px}
  .site-nav a{min-height:44px;display:flex;align-items:center}
  .site-header>.bag-button{display:none}
  .hero{padding-top:30px;padding-bottom:24px;gap:0}
  .hero-copy{text-align:center}
  .hero h1{font-size:clamp(43px,11vw,67px);max-width:480px;margin:13px auto 12px}
  .hero-copy>p{font-size:14px;line-height:1.65;max-width:345px;margin:auto}
  .hero-actions,.hero-foot,.hero-art{display:none}
  .mobile-hero-experience{display:block;width:100%}
  .carousel{margin-top:24px;touch-action:pan-y}
  .carousel-stage{position:relative;width:var(--phone-face-width);aspect-ratio:3/4;margin:auto;perspective:1100px;perspective-origin:50% 47%}
  .carousel-cube{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform:translateZ(calc(0px - var(--phone-face-depth))) rotateY(var(--angle,0deg));transition:transform .75s cubic-bezier(.2,.7,.2,1);-webkit-transition:transform .75s cubic-bezier(.2,.7,.2,1)}
  .carousel-face{position:absolute;inset:0;overflow:hidden;background:#d9c9bb;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 30px #2a211d30}
  .carousel-face:nth-child(1){transform:rotateY(0deg) translateZ(var(--phone-face-depth))}
  .carousel-face:nth-child(2){transform:rotateY(90deg) translateZ(var(--phone-face-depth))}
  .carousel-face:nth-child(3){transform:rotateY(180deg) translateZ(var(--phone-face-depth))}
  .carousel-face:nth-child(4){transform:rotateY(270deg) translateZ(var(--phone-face-depth))}
  .carousel-face img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .carousel-face:nth-child(2) img,.carousel-face:nth-child(4) img{object-fit:contain;background:#dac9bd}
  .carousel-caption{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;margin:19px 4px 0;border-bottom:1px solid #e0d3c6;padding-bottom:15px}
  .carousel-caption>span{font-size:10px;letter-spacing:.12em;color:#a96846}
  .carousel-caption div{display:grid;gap:3px}
  .carousel-caption strong{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1}
  .carousel-caption div span{font-size:11px;color:var(--muted)}
  .carousel-caption a{font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center}
  .carousel-controls{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 0}
  .carousel-controls>button{border:0;background:transparent;width:44px;height:44px;font-size:20px}
  .carousel-dots{display:flex;align-items:center;gap:2px}
  .carousel-dots button{width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center}
  .carousel-dots button:after{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#beada0}
  .carousel-dots button[aria-pressed="true"]:after{width:18px;border-radius:10px;background:var(--ink)}
  .mobile-hero-jump{margin:8px auto 0;min-height:44px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;font-weight:700}
  .mobile-hero-jump span{font-size:18px}
  .studio{display:block;width:100%;max-width:none;padding:68px 20px 62px;background:#fffaf4;scroll-margin-top:66px}
  .studio-intro{margin-bottom:25px}
  .studio-intro h2{font-family:var(--serif);font-size:clamp(40px,10vw,58px);line-height:1.02;letter-spacing:-.055em;margin:10px 0 12px}
  .studio-intro h2 em{color:#a96846}
  .studio-intro p{font-size:14px;line-height:1.7;color:var(--muted)}
  .studio-preview{height:clamp(310px,93vw,495px);display:grid;grid-template-columns:minmax(0,1fr) 24%;gap:6px}
  .studio-image,.studio-product{position:relative;overflow:hidden;background:#e2d4c8}
  .studio-image img,.studio-product img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .studio-image[data-style="italian"] img,.studio-image[data-style="bone"] img{object-fit:contain}
  .studio-image span,.studio-product span{position:absolute;left:7px;bottom:7px;background:#fffaf4e8;padding:6px;color:#49352b;font-size:8px;letter-spacing:.1em;font-weight:700}
  .studio-product span{font-size:7px}
  .studio-details{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:18px 0 20px}
  .studio-details h3{font-family:var(--serif);font-size:29px;margin:5px 0}
  .studio-details p{font-size:12px;color:var(--muted)}
  .studio-details>strong{font-size:15px;white-space:nowrap;padding-bottom:4px}
  .choice-block{margin:11px 0 18px}
  .choice-title{display:block;font-size:10px;letter-spacing:.12em;font-weight:750;margin-bottom:10px}
  .style-choices,.studio-shades{display:flex;gap:8px;flex-wrap:wrap}
  .style-choices button,.studio-shades button{min-height:44px;border:1px solid #cbb8aa;background:transparent;padding:9px 13px;color:var(--ink);font-size:12px}
  .style-choices button[aria-pressed="true"],.studio-shades button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .studio-shades button{display:inline-flex;align-items:center;gap:8px}
  .studio-add{min-height:52px;width:100%;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--ink);border:1px solid var(--ink);color:#fff;font-size:12px;font-weight:750;letter-spacing:.03em;text-align:center;padding:12px 16px}
  .studio-note{font-size:11px;line-height:1.5;color:var(--muted);margin-top:13px}
  .product-card{scroll-margin-top:80px}
  .mobile-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;min-height:66px;padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:9px;background:#f5efe7f2;border-top:1px solid #e0d3c6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .mobile-bottom-bar a,.mobile-bottom-bar button{min-height:48px;border:1px solid var(--ink);display:flex;justify-content:center;align-items:center;gap:7px;background:transparent;color:var(--ink);font-size:12px;font-weight:750}
  .mobile-bottom-bar button{background:var(--ink);color:#fff}
  .mobile-bottom-bar button span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--ink);font-size:10px}
  .bag-drawer{left:0;right:0;top:auto;bottom:0;width:100%;max-height:calc(100dvh - 16px);padding:23px 20px calc(25px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;box-shadow:0 -10px 40px #1c131050}
  .drawer-top button{min-width:44px;min-height:44px}
}

@media(max-width:340px){.studio-preview{grid-template-columns:minmax(0,1fr) 26%}.style-choices button,.studio-shades button{font-size:11px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.carousel-cube{transition:none;-webkit-transition:none}}