/* =====================================================================
   Studio Nafay — Full-site Phase 2 CSS
   Cart page (/cart/) + cart drawer
   ---------------------------------------------------------------------
   Extracted from studio-nafay-site_0_v7if.html (full-site.css) and
   re-scoped: the cart page under #sn-fs2, the drawer under
   #sn-fs2-drawer — so NOTHING leaks into the live theme header, the
   old black footer, the v8 product template or the pages v9.
   The drawer itself is NEW (the file has no drawer): it is designed
   in the same language as the file's cart page (cream #faf9f7, ink
   #151515, red #e5322d, Bodoni Moda headings, Hanken Grotesk body).
   NO @font-face, NO base64 images, NO embedded fonts — Bodoni Moda +
   Hanken Grotesk are already loaded by the live site; only the family
   names are referenced here. NO Syne / IBM Plex Mono anywhere.
   Uploads as wp-content/uploads/full-site-phase2.css (version ?v=1).
   ===================================================================== */

/* ---- scoped design tokens (the file's :root vars, renamed) ---- */
#sn-fs2{
  --fs-ink:#151515; --fs-paper:#faf9f7; --fs-soft:#f2f0ed;
  --fs-line:rgba(20,20,20,.18);
  --fs-font:'Hanken Grotesk',Arial,sans-serif;
  --fs-serif:'Bodoni Moda','Didot',serif;
  --fs-red:#e5322d;
  color:var(--fs-ink); background:var(--fs-paper);
  font-family:var(--fs-font); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
#sn-fs2 *,#sn-fs2 *::before,#sn-fs2 *::after{box-sizing:border-box}
#sn-fs2 h1,#sn-fs2 h2,#sn-fs2 h3,#sn-fs2 p{margin:0}
#sn-fs2 a{color:inherit;text-decoration:none}
#sn-fs2 button,#sn-fs2 input,#sn-fs2 select{font:inherit}
#sn-fs2 button{cursor:pointer}
#sn-fs2 button:focus-visible,#sn-fs2 a:focus-visible,#sn-fs2 input:focus-visible{outline:2px solid #3459a6;outline-offset:4px}
#sn-fs2 img{max-width:100%;display:block}

/* ---- page header (.ph) ---- */
#sn-fs2 .ph{text-align:center;padding:clamp(70px,9vw,130px) 20px clamp(40px,5vw,70px);max-width:900px;margin:0 auto}
#sn-fs2 .ey{font-size:10.5px;letter-spacing:.26em;font-weight:600;text-transform:uppercase;color:#6a6864}
#sn-fs2 .ph h1{font-family:var(--fs-serif);font-weight:400;letter-spacing:-.035em;text-wrap:balance;font-size:clamp(42px,6.4vw,86px);line-height:1;margin:18px 0 16px}
#sn-fs2 .ph h1 i{font-style:italic}

/* ---- content wrap ---- */
/* FIX2 (minor): the floating WhatsApp "Personal Shopper" pill sits at
   bottom:96px (see the FIX1 rule below) and is ~50px tall, so its top
   edge is ~146px above the viewport bottom. The old 110px bottom
   padding let the last rows (gift box, "Continue shopping") scroll
   only to 110px above the page bottom — inside the pill's band — so
   the pill covered them at some scroll positions on mobile. 170px
   lets every row scroll fully clear of the pill. */
#sn-fs2 .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,60px) 170px}
#sn-fs2 .wrap.two{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}

/* ---- cart line item (file's .ci2) ---- */
#sn-fs2 .ci2{display:grid;grid-template-columns:110px 1fr auto;gap:20px;padding:22px 0;border-top:1px solid var(--fs-line);align-items:center}
#sn-fs2 .ci2:first-child{border-top:0}
#sn-fs2 .ti{aspect-ratio:4/5;background:#ece8e1;overflow:hidden}
#sn-fs2 .ti img{width:100%;height:100%;object-fit:cover}
#sn-fs2 .tt b{font-family:var(--fs-serif);font-weight:400;font-size:24px;display:block}
#sn-fs2 .tt b a:hover{text-decoration:underline}
#sn-fs2 .tt small{color:#777;display:block;margin-bottom:12px}
/* WooCommerce variation data (wc_get_formatted_cart_item_data) */
#sn-fs2 .tt dl.variation{margin:0 0 12px;font-size:13px;color:#777}
#sn-fs2 .tt dl.variation dt,#sn-fs2 .tt dl.variation dd{display:inline;margin:0}
#sn-fs2 .tt dl.variation dt{font-weight:600}
#sn-fs2 .tt dl.variation dd::after{content:"";display:block}
#sn-fs2 .tt dl.variation p{margin:0}
/* qty stepper (file's .q, with a real number input in place of the span) */
#sn-fs2 .q{display:inline-flex;border:1px solid #cfcbc4}
#sn-fs2 .q button{width:36px;height:36px;font-size:16px;background:transparent;border:0;color:inherit}
#sn-fs2 .q button:hover{background:#ece8e1}
#sn-fs2 .q input{width:36px;height:36px;border:0;text-align:center;font-size:14px;background:transparent;color:inherit;-moz-appearance:textfield;appearance:textfield}
#sn-fs2 .q input::-webkit-outer-spin-button,#sn-fs2 .q input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#sn-fs2 .tp{text-align:right;display:grid;gap:10px}
#sn-fs2 .lp{font-size:16px}
#sn-fs2 .rm{font-size:11px;text-decoration:underline;color:#777;background:none;border:0;padding:0;cursor:pointer}
#sn-fs2 .rm:hover{color:#151515}

/* ---- gift box (file's .gift — display-only, see build-notes) ---- */
#sn-fs2 .gift{display:flex!important;align-items:center;gap:12px;padding:18px;border:1px solid var(--fs-line);margin-top:10px;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:400!important;cursor:pointer}
#sn-fs2 .gift b{margin-left:auto;color:#151515}
#sn-fs2 .gift [data-sn-fs2-gift-state]{font-size:12px;color:#777}

/* ---- update button (small, in the file's language) ---- */
#sn-fs2 .upd{display:block;margin:18px 0 0 auto;background:none;border:0;padding:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;color:#777;cursor:pointer}
#sn-fs2 .upd:hover{color:#151515}

/* ---- order summary (file's .sm) ---- */
#sn-fs2 .sm{background:#f2f0ed;padding:30px;position:sticky;top:100px}
#sn-fs2 .sm h3{font-family:var(--fs-serif);font-weight:400;font-size:26px;margin:0 0 16px}
#sn-fs2 .ln2{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}
#sn-fs2 .ln2.tot{border-top:1px solid var(--fs-line);margin-top:8px;padding-top:16px;font-size:18px}
#sn-fs2 .tiny{font-size:11.5px;color:#777;line-height:1.6;margin:8px 0 18px}
#sn-fs2 .vbt{display:inline-flex;gap:14px;align-items:center;justify-content:center;background:#151515;color:#fff;padding:16px 30px;font-size:10.5px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;border:1px solid #151515;transition:.3s;cursor:pointer;font-family:inherit}
#sn-fs2 .vbt:hover{background:transparent;color:#151515}
#sn-fs2 .vbt.wide{width:100%}
#sn-fs2 .cont{display:block;text-align:center;margin-top:16px;font-size:12px;text-decoration:underline;cursor:pointer}

/* ---- empty state ---- */
#sn-fs2 .empty{text-align:center;padding:40px 0 170px}
#sn-fs2 .empty h2{font-family:var(--fs-serif);font-weight:400;font-size:42px;margin-bottom:10px}
#sn-fs2 .empty p{margin-bottom:26px;color:#5d5b57;line-height:1.7}

/* =====================================================================
   CART DRAWER — new in the file's language (the file has no drawer).
   Scoped under #sn-fs2-drawer (the <dialog> element itself).
   The theme already ships its own drawer (#snCartDrawer); this one
   REPLACES it while the Phase 2 snippet is active (see build-notes).
   ===================================================================== */
#sn-fs2-drawer{
  --fs-ink:#151515; --fs-paper:#faf9f7; --fs-soft:#f2f0ed;
  --fs-line:rgba(20,20,20,.18);
  --fs-font:'Hanken Grotesk',Arial,sans-serif;
  --fs-serif:'Bodoni Moda','Didot',serif;
  --fs-red:#e5322d;
  position:fixed;inset:0 0 0 auto;margin:0;border:0;padding:0;
  width:min(100%,440px);max-width:none;height:100dvh;max-height:none;
  background:var(--fs-paper);color:var(--fs-ink);
  font-family:var(--fs-font);font-weight:400;
  box-shadow:-12px 0 48px rgba(0,0,0,.18);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#sn-fs2-drawer *,#sn-fs2-drawer *::before,#sn-fs2-drawer *::after{box-sizing:border-box}
#sn-fs2-drawer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:sn-fs2-slide .25s ease-out}
#sn-fs2-drawer::backdrop{background:rgba(0,0,0,.45)}
@keyframes sn-fs2-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
body.sn-fs2-drawer-open{overflow:hidden}
html.sn-fs2-drawer-open{overflow:hidden}
/* FIX1-DEFECT-4: the scrolling element on this site is <html>, so the
   body-only rule above did nothing. Both rules are kept. */
/* FIX1-DEFECT-7 (minor): the floating WhatsApp "Personal Shopper" pill
   (position:fixed bottom:20px) overlaps the cart summary on mobile.
   The product-page fix (bottom:96px) lives in v8-sitewide.css, which
   does not load on the cart page. This rule only applies on pages
   loading this stylesheet (cart + drawer pages). */
#sn-personal-shopper{bottom:96px!important}
#sn-fs2-drawer h2,#sn-fs2-drawer p{margin:0}
#sn-fs2-drawer a{color:inherit;text-decoration:none}
#sn-fs2-drawer button{font:inherit;cursor:pointer}
#sn-fs2-drawer button:focus-visible,#sn-fs2-drawer a:focus-visible,#sn-fs2-drawer input:focus-visible{outline:2px solid #3459a6;outline-offset:4px}
#sn-fs2-drawer img{max-width:100%;display:block}

/* drawer header */
#sn-fs2-drawer .sn-fs2-dtop{padding:22px 24px 0}
#sn-fs2-drawer .sn-fs2-dhead{display:flex;align-items:center;justify-content:space-between}
#sn-fs2-drawer .sn-fs2-dhead h2{font-family:var(--fs-serif);font-weight:400;font-size:26px}
#sn-fs2-drawer .sn-fs2-dclose{background:none;border:0;font-size:26px;line-height:1;padding:4px 8px;color:inherit}
#sn-fs2-drawer .sn-fs2-dstatus{font-size:12px;color:#777;padding:10px 0 12px;min-height:14px}

/* drawer items (compact version of the cart page rows) */
#sn-fs2-drawer .sn-fs2-ditems{list-style:none;margin:0;padding:0 24px;overflow-y:auto;overscroll-behavior:contain}
#sn-fs2-drawer .sn-fs2-ditem{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:16px 0;border-top:1px solid var(--fs-line);align-items:center}
#sn-fs2-drawer .sn-fs2-ditem:first-child{border-top:0}
#sn-fs2-drawer .sn-fs2-dthumb{aspect-ratio:4/5;background:#ece8e1;overflow:hidden}
#sn-fs2-drawer .sn-fs2-dthumb img{width:100%;height:100%;object-fit:cover}
#sn-fs2-drawer .sn-fs2-dname{font-family:var(--fs-serif);font-weight:400;font-size:20px;display:block;line-height:1.25}
#sn-fs2-drawer .sn-fs2-dname:hover{text-decoration:underline}
#sn-fs2-drawer .sn-fs2-ddetails{font-size:12px;color:#777;margin:4px 0 10px}
#sn-fs2-drawer .sn-fs2-dq{display:inline-flex;border:1px solid #cfcbc4}
#sn-fs2-drawer .sn-fs2-dq button{width:32px;height:32px;font-size:15px;background:transparent;border:0;color:inherit}
#sn-fs2-drawer .sn-fs2-dq button:hover{background:#ece8e1}
#sn-fs2-drawer .sn-fs2-dq button:disabled{opacity:.35;cursor:default}
#sn-fs2-drawer .sn-fs2-dq span{width:32px;display:grid;place-items:center;font-size:13px}
#sn-fs2-drawer .sn-fs2-dprice{text-align:right;display:grid;gap:8px}
#sn-fs2-drawer .sn-fs2-dprice b{font-size:14px;font-weight:600}
#sn-fs2-drawer .sn-fs2-dremove{font-size:11px;text-decoration:underline;color:#777;background:none;border:0;padding:0}
#sn-fs2-drawer .sn-fs2-dremove:hover{color:#151515}
#sn-fs2-drawer .sn-fs2-dempty{padding:28px 0;text-align:center}
#sn-fs2-drawer .sn-fs2-dempty p{color:#5d5b57;margin-bottom:18px;line-height:1.7}
#sn-fs2-drawer .sn-fs2-derror{display:block;margin-top:8px;color:#9a2424;font-size:13px}

/* drawer footer */
#sn-fs2-drawer .sn-fs2-dbottom{padding:16px 24px 24px;border-top:1px solid var(--fs-line)}
#sn-fs2-drawer .sn-fs2-dgift{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--fs-line);margin-bottom:16px;font-size:13px;cursor:pointer}
#sn-fs2-drawer .sn-fs2-dgift b{margin-left:auto;color:#151515}
#sn-fs2-drawer .sn-fs2-dgift [data-sn-fs2-dgift-state]{font-size:11px;color:#777}
#sn-fs2-drawer .sn-fs2-dtotal{display:flex;justify-content:space-between;font-size:18px;padding:4px 0 12px}
#sn-fs2-drawer .sn-fs2-dnote{font-size:11.5px;color:#777;line-height:1.6;margin-bottom:16px}
#sn-fs2-drawer .sn-fs2-dactions{display:grid;gap:10px}
#sn-fs2-drawer .sn-fs2-dactions a{display:flex;gap:14px;align-items:center;justify-content:center;padding:16px 30px;font-size:10.5px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;border:1px solid #151515;transition:.3s}
#sn-fs2-drawer .sn-fs2-dactions a.sn-fs2-dcheckout{background:#151515;color:#fff}
#sn-fs2-drawer .sn-fs2-dactions a.sn-fs2-dcheckout:hover{background:transparent;color:#151515}
#sn-fs2-drawer .sn-fs2-dactions a.sn-fs2-dviewbag{background:#fff;color:#151515}
#sn-fs2-drawer .sn-fs2-dactions a.sn-fs2-dviewbag:hover{background:var(--fs-red);border-color:var(--fs-red);color:#fff}

/* ---- responsive ---- */
@media(max-width:900px){
  #sn-fs2 .wrap.two{grid-template-columns:1fr}
  #sn-fs2 .sm{position:static}
  #sn-fs2 .ci2{grid-template-columns:84px 1fr auto;gap:14px}
  #sn-fs2 .tt b{font-size:20px}
}
@media(max-width:620px){
  #sn-fs2 .ph{padding:56px 20px 34px}
  #sn-fs2 .empty h2{font-size:32px}
  #sn-fs2-drawer{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #sn-fs2-drawer[open]{animation:none}
}