/* ================= Maammaa Studio v11 (v56) =================
   v56: cart button + drawer + checkout (see bottom of file).
   Desktop (Amar's drawing): TWO columns — tall portrait stage card (lady +
   preg chips + model thumbs inside) and ONE control panel (designs, words,
   design color, letter style, design size, garment color, price/save/add).
   Phone keeps the v48 portrait two-box layout untouched (see media query).
   v50: BIG design tiles + the design grid is a bounded scroll-well
   (finger/wheel inside the well only — the page itself never scrolls).
   The old ‹ 1/2 › pager is gone. */
.shop-main{display:flex!important;flex-direction:column;padding:90px 20px 6px!important}
.shop{max-width:1180px;width:100%;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column}
.shop-top{display:block}
.shop .sec-head{margin:0 auto 8px}
.shop .sec-head .eyebrow{margin-bottom:5px}
.shop .sec-head h2{font-size:clamp(1.55rem,2.5vw,2.1rem);margin-bottom:5px}
.shop .sec-head p{font-size:.95rem}
.shop-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:520px;margin:0 auto 10px;width:100%}
.shop-prods button{border:1px solid var(--gold-soft);background:rgba(255,255,255,.7);border-radius:16px;padding:8px 6px;font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.25s}
.shop-prods button svg{width:26px;height:26px}
.shop-prods button[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 10px 26px rgba(234,147,80,.28)}
.shop-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:22px}
.shop-card{background:var(--white);border:1px solid #F3E4D8;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;min-width:0;display:flex;flex-direction:column;min-height:0}
.shop-views{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.shop-chip{border:1px solid var(--gold-soft);background:#fff;border-radius:100px;padding:6px 14px;font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep);cursor:pointer}
.shop-chip[aria-pressed="true"]{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.shop-stagewrap{flex:1;min-height:0;width:100%;container-type:size;display:flex;align-items:center;justify-content:center}
.shop-stage{position:relative;width:min(100cqw,100cqh);aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#FBF3EA;touch-action:pan-y;user-select:none;-webkit-user-select:none;flex:none}
.shop-stage.tall{aspect-ratio:2/3;width:min(100cqw,66.67cqh)}
.shop-stage>img.base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.shop-design{position:absolute;cursor:grab;touch-action:none}
.shop-design img{display:block;width:100%;height:100%;pointer-events:none}
.shop-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(255,255,255,.88);border-radius:100px;padding:6px 14px;font-size:.72rem;color:var(--rose-deep);white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(201,116,47,.12)}
.shop-preg{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.shop-models{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.shop-models button{width:40px;height:54px;border-radius:10px;border:2px solid #F3E4D8;padding:0;overflow:hidden;background:#FBF3EA;cursor:pointer;flex:none}
.shop-models button[aria-pressed="true"]{border-color:var(--rose)}
.shop-models img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.shop-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:6px}
.shop-card h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 6px}
.ctl-group{margin-bottom:10px}
.ctl-group:last-child{margin-bottom:0}
.ctl-designs{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:10px}
.shop-opts{display:flex;flex-wrap:wrap;gap:6px}
.shop-designs{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,92px);grid-auto-rows:92px;gap:8px;justify-content:center;align-content:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#EBC9AE rgba(0,0,0,0);padding:2px 6px 2px 2px;margin-top:6px}
.shop-designs::-webkit-scrollbar{width:7px}
.shop-designs::-webkit-scrollbar-track{background:rgba(0,0,0,0);border-radius:99px}
.shop-designs::-webkit-scrollbar-thumb{background:#EBC9AE;border-radius:99px}
.shop-designs::-webkit-scrollbar-thumb:hover{background:#DFAF87}
.shop-designs button{width:92px;height:92px;border-radius:14px;border:2px solid #F3E4D8;background:#FDF8F2;padding:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.05rem;color:var(--rose-deep);line-height:1.1;text-align:center}
.shop-designs .dtxt{font-family:'Great Vibes',serif;font-size:1.8rem;line-height:1.08}
.shop-designs button[aria-pressed="true"]{border-color:var(--rose);background:#fff}
.shop-designs img{width:100%;height:100%}
.shop-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:.95rem;padding:14px 10px}
.shop-text{width:100%;box-sizing:border-box;border:1px solid var(--gold-soft);border-radius:12px;padding:9px 12px;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff}
.shop-sw{width:24px;height:24px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--gold-soft);padding:0;cursor:pointer;flex:none}
.shop-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--rose-deep)}
/* v52: garment color swatches — bigger, full-strength ring so real colors read clearly (ink row unchanged) */
#shopCols .shop-sw{width:32px;height:32px;box-shadow:0 0 0 2px #D3AF74,inset 0 0 0 1px rgba(90,60,20,.18)}
#shopCols .shop-sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--rose-deep),inset 0 0 0 1px rgba(90,60,20,.18);transform:scale(1.14);position:relative;z-index:1}
.shop-fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.shop-fonts button{border:1px solid var(--gold-soft);background:#fff;border-radius:10px;padding:5px 3px;font-size:.98rem;color:var(--ink);cursor:pointer;min-height:30px}
.shop-fonts button[aria-pressed="true"]{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.shop-range{width:100%;accent-color:var(--rose);touch-action:pan-y}
.shop-panel{padding:18px 20px}
.ctl-actions{display:flex;align-items:center;gap:10px;margin-top:4px}
.ctl-actions .shop-add{margin-left:auto}
.shop-price{font-family:var(--serif);font-size:1.5rem;color:var(--rose-deep);line-height:1}
.shop-price small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.shop-cart{position:fixed;right:18px;bottom:18px;z-index:90;border:0;border-radius:100px;background:var(--rose-deep);color:#fff;padding:12px 18px;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;box-shadow:0 10px 26px rgba(201,116,47,.3);cursor:pointer}
.shop-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--rose-deep);color:#fff;border-radius:100px;padding:10px 20px;font-size:.85rem;z-index:120;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.shop-mbar{display:none}
.mbar-cart{font-family:var(--sans);font-size:.8rem;color:var(--rose-deep);white-space:nowrap}
/* v50 one-screen lock: the shop page is exactly one viewport tall, so the
   flex chain (.page > main > .shop > .shop-grid > cards > designs well) has a
   definite height and the WELL — never the page — absorbs overflow. */
.page{height:100vh;height:100svh;height:100dvh;max-height:100dvh}
.shop-main{min-height:0}
/* garment color tint on model photos (unchanged engine) */
.shop-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.8;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Shop page: slightly tighter footer so the studio owns the screen (shop page only) */
html.scroll footer.rich .foot-inner{padding:10px 28px 8px}
html.scroll footer.rich .foot-top{margin-bottom:7px}
html.scroll footer.rich .foot-base{padding-top:7px}
/* Short desktop windows: slim the studio header */
@media(max-height:900px) and (min-width:901px){
  .shop .sec-head p{display:none}
  .shop .sec-head .eyebrow{display:none}
  .shop .sec-head h2{font-size:1.65rem;margin-bottom:0}
  .shop .sec-head{margin-bottom:4px}
  .shop-prods button{padding:6px 6px}
  .shop-prods button svg{width:22px;height:22px}
  .shop-main{padding-top:86px!important}
  /* v49: the single panel must also fit short desktop windows — compress
     paddings/margins (labels stay; v50: tiles stay big, the well scrolls) */
  .shop-panel{padding:12px 16px}
  .shop-card{padding:12px}
  .shop-card h3{margin-bottom:4px}
  .ctl-group{margin-bottom:6px}
  .shop-panel .ctl-designs{margin-bottom:6px}
  .shop-designs{grid-template-columns:repeat(auto-fill,76px);grid-auto-rows:76px}
  .shop-designs button{width:76px;height:76px}
  .shop-designs .dtxt{font-size:1.5rem}
  .shop-text{padding:7px 10px}
  .shop-fonts button{min-height:27px;padding:3px 2px}
  .shop-sw{width:20px;height:20px;border-width:2px}
  #shopCols .shop-sw{width:27px;height:27px}
  .shop-chip{padding:5px 11px}
  .ctl-actions{padding-top:6px}
  .ctl-actions .btn{padding:10px 18px}
  .shop-price{font-size:1.3rem}
  .shop-preg{margin-top:7px}
  .shop-models{margin-top:6px}
  .shop-models button{width:36px;height:48px}
}
/* Short desktop windows, round 2 (v49): squeeze hero + footer + panel a touch
   more so 1366x768 also holds one screen. Letter-style goes to one row of six
   ONLY in these short windows; tall desktops keep Amar's 2 rows x 3. */
@media(max-height:900px) and (min-width:901px){
  .shop-main{padding-bottom:2px!important}
  .shop .sec-head h2{font-size:1.5rem}
  .shop-prods{margin-bottom:6px}
  .shop-prods button{padding:5px 6px;gap:2px}
  .shop-prods button svg{width:19px;height:19px}
  .shop-panel{padding:10px 16px}
  .shop-card h3{font-size:.64rem;margin-bottom:3px}
  .ctl-group{margin-bottom:5px}
  .shop-panel .ctl-designs{margin-bottom:5px}
  .shop-designs{grid-template-columns:repeat(auto-fill,76px);grid-auto-rows:76px;gap:7px}
  .shop-designs button{width:76px;height:76px}
  .shop-fonts{grid-template-columns:repeat(6,minmax(0,1fr))}
  .shop-fonts button{min-height:25px;font-size:.88rem;padding:3px 1px}
  .shop-chip{padding:4px 10px}
  .ctl-actions .btn{padding:9px 18px}
  .shop-price{font-size:1.22rem}
  html.scroll footer.rich .foot-inner{padding:6px 28px 4px}
  html.scroll footer.rich .foot-top{margin-bottom:4px}
  html.scroll footer.rich .socials a{padding:4px 10px;font-size:.62rem}
  html.scroll footer.rich .foot-base{padding-top:4px}
}
/* ---------- Desktop panel (v49, Amar's drawing) ---------- */
@media(min-width:901px){.ctl-actions .mbar-cart{display:none}}
@media(min-width:901px){
  /* words stay one slim label-less row under the design tiles (feature kept) */
  .ctl-words{margin-bottom:8px}
  .ctl-words h3,.ctl-pos h3{display:none}
  .ctl-pos{margin-bottom:10px}
  .ctl-pos .shop-chip{padding:5px 12px}
  /* bottom actions inside the panel: price left, SAVE + ADD TO CART right */
  .ctl-actions{margin-top:2px;padding-top:10px;border-top:1px solid #F7E9DC}
  .ctl-actions .shop-save{margin-left:auto}
  .ctl-actions .shop-add{margin-left:0}
  .ctl-actions .btn{padding:13px 24px}
  .shop-panel .ctl-designs{margin-bottom:8px}
}
/* ---------- Phone / small tablet (v49): Amar's attachment, phone proportions ----------
   Same ORGANIZATION as his desktop drawing: the lady stands in her own portrait
   card on the LEFT — preg chips + model thumbs INSIDE the card bottom — and the
   control panel on the RIGHT carries the same sections in the same order
   (Pick a design -> tiles -> words -> Design color -> Letter style -> Design
   size -> Color -> price / Save / Add). Compressed, one page, zero scrolling. */
@media(max-width:900px){
  .shop-main{padding:72px 8px 2px!important}
  /* v54: no "The Maammaa Studio" title on phones — the two product tabs
     own the row and span it evenly (Amar's screenshot fix). */
  .shop-top{display:block;margin-bottom:5px}
  .shop-top .sec-head{display:none}
  .shop-top .shop-prods{margin:0;width:100%;max-width:none;gap:6px}
  .shop-prods button{padding:5px 1px;font-size:.5rem;letter-spacing:.03em;border-radius:12px;gap:2px;white-space:nowrap}
  .shop-prods button svg{width:18px;height:18px}
  .shop-card h3{display:none}
  .shop-note{display:none}
  .shop-hint{display:none}
  /* two columns: lady card | control panel */
  .shop-grid{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);gap:6px;flex:1;min-height:0}
  /* LEFT: portrait stage card, whole lady; chips + thumbs inside the bottom */
  .shop-left{padding:6px}
  .shop-left .shop-views{display:none}
  .shop-stagewrap{flex:1;min-height:0;width:100%;container-type:normal;display:flex;align-items:center;justify-content:center}
  .shop-stage,.shop-stage.tall{width:100%;height:auto;aspect-ratio:2/3;max-height:100%;border-radius:12px;flex:none}
  .shop-stage:not(.tall){aspect-ratio:1/1}
  .shop-stage>img.base{object-fit:contain;background:#FBF3EA}
  .shop-preg{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:6px}
  .shop-models{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:5px}
  .shop-models button{width:30px;height:38px;border-radius:8px}
  /* RIGHT: the control panel, desktop order, compressed */
  .shop-panel{padding:6px 7px}
  .ctl-designs{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:4px}
  .ctl-group{margin-bottom:5px}
  .shop-chip{padding:6px 5px;font-size:.52rem;letter-spacing:.02em;white-space:nowrap}
  .shop-opts{gap:3px}
  .shop-designs{margin-top:4px;grid-template-columns:repeat(auto-fill,72px);grid-auto-rows:72px;gap:6px;flex:1;min-height:0;padding-right:4px}
  .shop-designs button{width:72px;height:72px;padding:5px}
  .shop-designs .dtxt{font-size:1.45rem}
  .shop-text{padding:6px 10px;font-size:.9rem}
  .shop-fonts{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
  .shop-fonts button{font-size:.56rem;min-height:30px;padding:3px 0;overflow:hidden}
  .shop-sw{width:18px;height:18px;border-width:2px}
  #shopCols{gap:4px}
  #shopCols .shop-sw{width:20px;height:20px}
  .shop-range{padding:2px 0}
  /* actions live in the panel now (price / cart / Save / Add) */
  .ctl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:0;padding-top:5px;border-top:1px solid #F7E9DC}
  .ctl-actions .shop-price{font-size:1.02rem}
  .ctl-actions .shop-price small{display:none}
  .ctl-actions .mbar-cart{font-size:.72rem}
  .ctl-actions .shop-save{flex:1 1 42%;margin-left:0;padding:7px 4px;font-size:.58rem;letter-spacing:.04em}
  .ctl-actions .shop-add{flex:1 1 42%;margin-left:0;padding:7px 4px;font-size:.58rem;letter-spacing:.04em}
  .shop-mbar{display:none}
  .shop-cart{display:none}
  html.scroll footer.rich .foot-inner{padding:6px 10px 4px}
  html.scroll footer.rich .foot-top{margin-bottom:4px;gap:8px}
  html.scroll footer.rich .socials{gap:4px}
  html.scroll footer.rich .socials a{padding:3px 7px;font-size:.55rem;letter-spacing:.06em}
  html.scroll footer.rich .foot-links{font-size:.6rem;gap:10px}
  html.scroll footer.rich .foot-base{padding-top:4px;font-size:.6rem;gap:4px}
  html.scroll footer.rich .foot-base .copy{font-size:.78rem}
}
/* Short landscape phones: same two columns, squeezed (no overlap, lady whole) */
@media(max-width:900px) and (max-height:480px){
  .shop-main{padding:64px 8px 2px!important}
  .shop-stage.tall{width:min(100%,32svh)}
  .shop-designs{grid-template-columns:repeat(auto-fill,64px);grid-auto-rows:64px}
  .shop-designs button{width:64px;height:64px}
  .shop-designs .dtxt{font-size:1.3rem}
  .shop-models button{width:26px;height:34px}
  .shop-fonts button{min-height:26px;font-size:.58rem}
  .shop-chip{padding:4px 6px}
}
/* Short phones (<=780px tall): squeeze both columns so one page still holds */
@media(max-width:900px) and (max-height:780px){
  .shop-left,.shop-panel{padding-top:5px;padding-bottom:5px}
  .ctl-group{margin-bottom:4px}
  .shop-models button{width:28px;height:34px}
  .shop-fonts button{min-height:26px}
  .shop-text{padding:5px 10px}
  .ctl-actions .shop-save,.ctl-actions .shop-add{padding:6px 4px}
}


/* ---------- v51: real-phone scroll lock + no shop ads on mobile ---------- */
@media(max-width:900px){
  .ad-mobile-top,.ad-bottom,.ad-rail{display:none!important}
  html.scroll,html.scroll body{height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
  html.scroll .page{height:100dvh;max-height:100dvh;overflow:hidden}
  html.scroll .shop-main{min-height:0;overflow:hidden}
  html.scroll .shop,.shop-grid,.shop-card{min-height:0}
}
/* Very short phone viewports (URL-bar expanded / small Android heights):
   squeeze chrome a little more so the locked one-screen studio still fits. */
@media(max-width:900px) and (max-height:720px){
  .shop-main{padding-top:66px!important}
  .shop-models button{width:26px;height:32px}
  .shop-preg{margin-top:4px}
  .shop-models{margin-top:4px}
  .shop-fonts button{min-height:24px}
  .shop-designs{grid-template-columns:repeat(auto-fill,66px);grid-auto-rows:66px}
  .shop-designs button{width:66px;height:66px}
  html.scroll footer.rich .foot-inner{padding-top:4px;padding-bottom:3px}
  html.scroll footer.rich .socials a{padding:2px 6px}
}

/* ================= v56: THE FULL CART + CHECKOUT =================
   Cart button beside the price (Save shrinks to make room), add-to-cart
   bump + toast, right-side drawer with shirt thumbnails, Join-Us gate at
   the Checkout door, demo checkout. Modal scrolls internally only — the
   page itself never scrolls. */
.ctl-actions .shop-cartbtn{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--rose);background:#fff;color:var(--rose-deep);border-radius:100px;padding:11px 18px;font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.05em;cursor:pointer;white-space:nowrap;line-height:1;box-shadow:0 4px 14px rgba(201,116,47,.12)}
.ctl-actions .shop-cartbtn:hover{background:#FFF3E4}
.ctl-actions .shop-cartbtn #shopCartN{font-weight:700}
@keyframes mcBump{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
.ctl-actions .shop-cartbtn.bump{animation:mcBump .45s ease}
/* Save my design shrinks so the Cart can breathe (Amar's screenshot fix) */
.shop .ctl-actions .shop-save{padding:9px 15px;font-size:.74rem;letter-spacing:.06em}
.shop-toast{animation:mcToastIn .25s ease}
@keyframes mcToastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* modal / drawer */
.mc-overlay{position:fixed;inset:0;background:rgba(74,44,23,.48);z-index:300;display:flex;justify-content:flex-end}
.mc-overlay[hidden]{display:none!important}
.mc-sheet{background:#FFF9F3;width:min(450px,100vw);height:100dvh;max-height:100dvh;display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(120,70,30,.28);transform:translateX(30px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.mc-overlay.open .mc-sheet{transform:none;opacity:1}
.mc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #F3E4D8;flex:none}
.mc-title{font-family:var(--serif);font-size:1.35rem;color:var(--rose-deep);margin:0;font-weight:600}
.mc-x{border:1px solid var(--gold-soft);background:#fff;color:var(--rose-deep);width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;flex:none;line-height:1}
.mc-body{padding:14px 18px 22px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1;min-height:0}
.mc-items{display:flex;flex-direction:column;gap:12px}
.mc-item{display:flex;gap:12px;background:#fff;border:1px solid #F3E4D8;border-radius:16px;padding:10px}
.mc-thumb{width:64px;height:82px;object-fit:cover;border-radius:10px;background:#FBF3EA;flex:none}
.mc-thumb-fallback{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.7rem;color:var(--rose-deep)}
.mc-info{flex:1;min-width:0}
.mc-name{font-family:var(--serif);font-size:1.05rem;color:var(--rose-deep);line-height:1.15}
.mc-meta{font-size:.74rem;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mc-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(90,60,20,.25);display:inline-block;flex:none}
.mc-words{font-size:.76rem;color:var(--ink);font-style:italic;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-rowline{display:flex;align-items:center;gap:10px;margin-top:7px}
.mc-qty{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-soft);border-radius:100px;padding:3px 8px;background:#FFF9F3}
.mc-qty button{border:0;background:none;font-size:1rem;color:var(--rose-deep);cursor:pointer;width:22px;height:24px;line-height:1;padding:0}
.mc-qty span{font-weight:600;font-size:.86rem;min-width:14px;text-align:center}
.mc-lineprice{font-family:var(--serif);font-size:1.05rem;color:var(--rose-deep);margin-left:auto}
.mc-rm{border:0;background:none;color:#B0572F;font-size:.72rem;letter-spacing:.04em;cursor:pointer;text-decoration:underline;padding:4px 2px}
.mc-sum{margin-top:14px;border-top:1px solid #F3E4D8;padding-top:10px}
.mc-sum>div{display:flex;justify-content:space-between;font-size:.9rem;color:var(--ink);padding:2px 0}
.mc-sum .mc-grand{font-family:var(--serif);font-size:1.25rem;color:var(--rose-deep)}
.mc-actions{display:flex;gap:10px;margin-top:14px}
.mc-actions .btn{flex:1;padding:13px 10px;text-align:center}
.mc-empty{text-align:center;padding:34px 12px}
.mc-empty-fl{font-size:2.4rem}
.mc-empty p{font-family:var(--serif);font-size:1.1rem;color:var(--rose-deep)}
.mc-thanks{font-family:var(--serif);font-size:1.4rem;color:var(--rose-deep);margin:6px 0 2px}
.mc-muted{color:var(--muted);font-size:.86rem}
.mc-lede{font-size:.92rem;color:var(--ink);background:#FFF3E4;border:1px solid #F3E4D8;border-radius:12px;padding:10px 12px}
.mc-tabs{display:flex;gap:8px;margin:12px 0 4px}
.mc-tabs button{flex:1;border:1px solid var(--gold-soft);background:#fff;border-radius:100px;padding:9px 6px;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);cursor:pointer}
.mc-tabs button[aria-pressed="true"]{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.mc-form{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.mc-field{display:flex;flex-direction:column;gap:4px}
.mc-field>span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.mc-field input{border:1px solid var(--gold-soft);border-radius:12px;padding:11px 12px;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff;width:100%;box-sizing:border-box}
.mc-field.bad input{border-color:#D9534F;box-shadow:0 0 0 2px rgba(217,83,79,.18)}
.mc-err{background:#FDECEA;border:1px solid #F3B8B0;color:#9E3226;border-radius:12px;padding:9px 12px;font-size:.85rem;margin-top:10px}
.mc-wide{width:100%;text-align:center;padding:13px 10px;margin-top:2px}
.mc-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.75rem;margin:12px 0 2px}
.mc-or:before,.mc-or:after{content:'';flex:1;height:1px;background:#F3E4D8}
.mc-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mc-phonerow{display:flex;align-items:center;gap:10px}
.mc-code{font-size:.8rem;color:var(--rose-deep);font-weight:600}
.mc-demo{font-size:.76rem;color:var(--muted);text-align:center;margin:8px 0 2px}
.mc-link{border:0;background:none;color:var(--rose-deep);font-size:.82rem;cursor:pointer;margin-top:14px;padding:4px 2px;text-decoration:underline}
/* phone: cart button readable at a glance, Save stays the small one */
@media(max-width:900px){
  .ctl-actions .shop-cartbtn{margin-left:auto;font-size:.84rem;padding:10px 14px;min-height:42px}
  .shop .ctl-actions .shop-save{flex:0 1 36%;padding:6px 3px;font-size:.56rem}
  .ctl-actions .shop-add{flex:1 1 52%}
  .mc-body{padding:12px 14px 20px}
  .mc-thumb{width:56px;height:72px}
}
@media(max-height:900px) and (min-width:901px){
  .shop .ctl-actions .shop-save{padding:8px 13px}
}