/* ============================================================
   Medtoolmarket — Figma canvas "medtoolmarket" (616:2398), 1440px canvas.
   Desktop = exact Figma coordinates. 768–1439px = proportional zoom.
   ≤767px = mobile reflow with hamburger menu.
   Frames: Landing 616:2570 [3330] · Products 616:2399 [2491]
           Empty-cart 616:2447 [1191] · Product-details 616:2467 [2633]
           Checkout 616:2502 [3064]
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Mona Sans';src:url('../fonts/Mona-Sans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Mona Sans';src:url('../fonts/Mona-Sans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Mona Sans';src:url('../fonts/Mona-Sans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Mona Sans';src:url('../fonts/Mona-Sans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Inter Display';src:url('../fonts/InterDisplay-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter Display';src:url('../fonts/InterDisplay-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
/* Inter — Google Fonts (variable; the whole weight range is one file per subset) */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Design tokens (read from the Figma nodes) ---------- */
:root{
  --accent:#fbccbd;                  /* every button fill + the price pill */
  --btn-ink:#464646;                 /* button labels are dark, not white */
  --ink:#464646;                     /* nav, card names, detail title, qty numeral */
  --body:#17110f;                    /* descriptions, footer block, page headings */
  --dark:#202327;                    /* "Shipping Information" / "Payment" */
  --price:#353535;                   /* product prices */
  --panel:rgba(139,207,204,.08);     /* the six product-card panels (#8BCFCC @ 8%) */
  --panel-pd:#f6fbfb;                /* detail + checkout product panel */
  --chip:rgba(255,167,77,.15);       /* card cart chip, qty box, detail cart box */
  --chip-hdr:#eceae6;                /* header cart chip */
  --rule:#eceae6;                    /* header + section hairlines */
  --rule-ftr:rgba(0,0,0,.13);        /* the footer hairline is a DIFFERENT colour */
  --field-line:#464646;
  --r-panel:31px;                    /* card + image corner radius */
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#fff;margin:0;padding:0}
body{font-family:'Inter Display','Inter',sans-serif}
img{display:block}
a{text-decoration:none;color:inherit}
p{margin:0}
button{border:none;background:none;cursor:pointer;font:inherit;padding:0}

.canvas{width:1440px;margin:0 auto;position:relative}
.pg-landing  .canvas{height:3480px;overflow:hidden}
.pg-products .canvas{height:auto;min-height:0;overflow:visible}
.pg-cart     .canvas{height:auto;min-height:0}
.pg-detail   .canvas{height:auto;min-height:0}
.pg-checkout .canvas{height:auto;min-height:0}

.el{position:absolute}
.wrap{position:static}
.band{position:absolute;left:50%;transform:translateX(-50%);width:max(1440px,100vw)}

/* ---------- Type ---------- */
.mona{font-family:'Mona Sans',sans-serif;font-weight:700}
/* the hero and banner headings are 70/80; the page headings are 80/90 */
.h-70{font-size:70px;line-height:80px;letter-spacing:.7px;color:#000}
.h-80{font-size:80px;line-height:90px;letter-spacing:.8px;color:var(--body)}
.h-40{font-size:40px;line-height:43px;letter-spacing:.4px;color:var(--ink)}
.h-40-90{font-size:40px;line-height:90px;letter-spacing:.4px;color:var(--dark)}
.body-18{font-family:'Inter Display','Inter',sans-serif;font-weight:400;font-size:18px;letter-spacing:.18px;color:var(--body);line-height:normal}
.body-16{font-family:'Inter Display','Inter',sans-serif;font-weight:400;font-size:16px;letter-spacing:.16px;color:var(--body);line-height:22px}
.label-17{font-family:'Inter Display','Inter',sans-serif;font-weight:400;font-size:17px;letter-spacing:.17px;color:var(--body);line-height:normal}
.nav-b{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;letter-spacing:.18px;color:var(--ink);line-height:normal;white-space:nowrap}
.link-sb{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:.18px;color:var(--ink);line-height:normal;white-space:nowrap}
/* prices are two leading-90 lines in Figma; the reported 74px box is a fixed box */
.price{font-family:'Mona Sans',sans-serif;font-weight:600;font-size:20px;letter-spacing:.2px;color:var(--price);line-height:90px;white-space:nowrap}
.qty-num{font-family:'Inter',sans-serif;font-weight:400;font-size:36px;letter-spacing:.36px;color:var(--ink);line-height:normal;text-align:center}

/* ---------- Buttons — Figma gives these no corner radius ---------- */
.btn-acc{background:var(--accent);display:flex;align-items:center;justify-content:center}
.btn-acc .lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;color:var(--btn-ink);text-align:center;white-space:nowrap}

/* ---------- Form fields ---------- */
.field{position:absolute;background:#fff;border:1px solid var(--field-line);border-radius:5px;
       font-family:'Inter Display','Inter',sans-serif;font-size:17px;letter-spacing:.17px;color:var(--body);padding:0 28px}
.field::placeholder{color:var(--body);opacity:1}
.field:focus{outline:none;border-color:#f0a58e}
.cbx{position:absolute;width:20px;height:20px;appearance:none;-webkit-appearance:none;background:#fff;
     border:1px solid var(--field-line);border-radius:5px;cursor:pointer}
.cbx:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
     border:solid #464646;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* hairlines — the footer's is a different colour from the rest */
.hdr-line,.ld-line19,.pr-line19,.pr-line20,.ce-line20,
.pd-line16,.pd-line20,.ck-line16,.ck-line20{background:var(--rule)}
.ftr-line{background:var(--rule-ftr)}

/* ---------- Header (identical on all five frames) ---------- */
.site-hdr{position:static}
/* Figma crops this image fill inside the 339x59 box — its exact transform */
.hdr-logo{top:50px;left:146px;width:339px;height:59px;overflow:hidden;z-index:42}
.hdr-logo img{position:absolute;width:136.83%;height:429.05%;left:-18.46%;top:-170.95%;max-width:none}
.nav-link{top:71px;z-index:42}
.nav-all{left:860px}
.nav-contact{left:1035px}
.nav-cart{left:1188px}
.hdr-cart{top:60px;left:1257px;width:54px;height:41px;background:var(--chip-hdr);border-radius:80px;z-index:42}
.cartqty{font-size:14px;margin-left:4px}
.hdr-cart img{position:absolute;top:10px;left:17px;width:27px;height:20.155px}
.hdr-line{top:145px;height:1px}
.hamburger{display:none}

/* ---------- Product card (shared by both grids) ---------- */
.pc-bg{position:absolute;width:375px;height:376px;background:var(--panel);border-radius:var(--r-panel)}
.pc-img{position:absolute;object-fit:cover}
.pc-pill{position:absolute;width:112px;height:47px;background:var(--accent);border-radius:80px}
.pc-price{position:absolute;width:95px}
/* panel-relative art, pill and price — the same six offsets on both grids */
.c1-img,.p1-img{top:44px;left:86px;width:227px;height:291px}
.c2-img,.p2-img{top:46px;left:74px;width:235px;height:301px}
.c3-img,.p3-img{top:45px;left:75px;width:226px;height:290px}
.c4-img,.p4-img{top:54px;left:61px;width:218px;height:280px}
.c5-img,.p5-img{top:70px;left:94px;width:185px;height:237px}
.c6-img,.p6-img{top:41px;left:77px;width:227px;height:291px}
.p2-img{height:302px} .p5-img{height:238px}
.c1-pill,.p1-pill{top:14px;left:249px}
.c2-pill,.p2-pill{top:18px;left:249px}
.c3-pill,.p3-pill{top:18px;left:248px}
.c4-pill,.p4-pill{top:16px;left:244px}
.c5-pill,.p5-pill{top:16px;left:242px}
.c6-pill,.p6-pill{top:16px;left:248px}
.c1-pr,.p1-pr{top:-7px;left:272px}
.c2-pr,.p2-pr{top:-3px;left:272px}
.c3-pr,.p3-pr{top:-3px;left:272px}
.c4-pr,.p4-pr{top:-5px;left:267px}
.c5-pr,.p5-pr{top:-5px;left:265px}
.c6-pr,.p6-pr{top:-5px;left:271px}
.pc-name{position:absolute;font-family:'Manrope',sans-serif;font-weight:700;font-size:30px;color:var(--ink);line-height:normal}
.pc-cart{position:absolute;width:145px;height:47px;background:var(--chip);border-radius:80px}
.pc-cart img{position:absolute;top:10.46px;left:62px;width:18px;height:23.105px}
/* cards 1, 5 and 6 are centre-aligned, 2, 3 and 4 are left — on both grids */
.c1-nm,.c5-nm,.c6-nm,.p1-nm,.p5-nm,.p6-nm{text-align:center}

/* ---------- Qty stepper ---------- */
.qty-btn{position:absolute;background:none;border:none;display:flex;align-items:center;justify-content:center}
.qty-btn img{width:100%;height:100%;object-fit:contain}
.qty-btn::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                 width:44px;height:44px}

/* ---------- Footer (page sets --ftr-top = the address row) ---------- */
.ftr{position:absolute;top:var(--ftr-top);left:0;width:1440px}
.ftr-addr{position:absolute;top:0;left:154px;width:473px}
.ftr-email{position:absolute;top:65px;left:150px;width:473px}
.ftr-email a{text-decoration:none}
.ftr-email .u{text-decoration:underline;text-underline-position:from-font}
.ftr-phone{position:absolute;top:131px;left:154px;width:473px}
.ftr-terms{position:absolute;top:221px;left:145px}
.ftr-privacy{position:absolute;top:221px;left:397px}
.ftr-contact-l{position:absolute;top:221px;left:621px}
.ftr-copy{position:absolute;top:226px;left:963px;width:358px}
.ftr-line{position:absolute;top:294px;left:116px;width:1223px;height:1px}
.ftr-cards{position:absolute;top:368px;left:1142px;width:163px;height:35px;object-fit:contain}

/* ============================================================
   LANDING
   ============================================================ */
.pg-landing{--ftr-top:2842px}
/* Figma reports this node's x as its right edge (the fill is flipped);
   1440 - 1085 = 355 is the true left. */
.ld-hero-img{top:145px;left:355px;width:1085px;height:628px;object-fit:cover}
.ld-hero-h{top:216px;left:136px;width:593px}
.ld-hero-sub{top:498px;left:137px;width:522px;color:var(--ink)}
.ld-hero-btn{top:588px;left:139px;width:310px;height:73px}
.ld-line19{top:775px;height:1px}
/* row 1 */
.c1-bg{top:920px;left:81px}
.c1-nm{top:1316px;left:71px;width:166px}  .c1-cart{top:1312px;left:307px}
.c2-bg{top:916px;left:519px}
.c2-nm{top:1316px;left:525px;width:197px} .c2-cart{top:1312px;left:747px}
.c3-bg{top:916px;left:958px}
.c3-nm{top:1320px;left:970px;width:206px} .c3-cart{top:1312px;left:1186px}
/* row 2 */
.c4-bg{top:1546px;left:93px}
.c4-nm{top:1935px;left:109px;width:221px} .c4-cart{top:1935px;left:330px}
.c5-bg{top:1546px;left:542px}
.c5-nm{top:1938px;left:542px;width:187px} .c5-cart{top:1935px;left:770px}
.c6-bg{top:1546px;left:985px}
.c6-nm{top:1938px;left:985px;width:166px} .c6-cart{top:1935px;left:1219px}
/* banner — two separate images with a 31px gap of page background between */
.ld-bn-l{top:2106px;left:116px;width:509px;height:628px;object-fit:cover}
.ld-bn-r{top:2106px;left:656px;width:719px;height:628px;object-fit:cover}
.ld-bn-h{top:2261px;left:483px;width:593px}
.ld-bn-sub{top:2440px;left:492px;width:522px;color:var(--ink)}
.ld-bn-btn{top:2530px;left:554px;width:310px;height:73px}

/* ============================================================
   PRODUCTS
   ============================================================ */
.pg-products{--ftr-top:1983px}
.pr-h{top:254px;left:412px;width:606px;text-align:center}
.pr-sub{top:461px;left:428px;width:576px}
.pr-line19{top:615px;height:1px}
.pr-line20{top:1885px;height:1px}
/* row 1 */
.p1-bg{top:709px;left:80px}
.p1-nm{top:1105px;left:70px;width:166px}  .p1-cart{top:1101px;left:306px}
.p2-bg{top:705px;left:518px}
.p2-nm{top:1105px;left:524px;width:197px} .p2-cart{top:1101px;left:746px}
.p3-bg{top:705px;left:957px}
.p3-nm{top:1109px;left:969px;width:206px} .p3-cart{top:1101px;left:1185px}
/* row 2 */
.p4-bg{top:1335px;left:92px}
.p4-nm{top:1724px;left:108px;width:221px} .p4-cart{top:1724px;left:329px}
.p5-bg{top:1335px;left:541px}
.p5-nm{top:1727px;left:541px;width:187px} .p5-cart{top:1724px;left:769px}
.p6-bg{top:1335px;left:984px}
.p6-nm{top:1727px;left:984px;width:166px} .p6-cart{top:1724px;left:1218px}

/* ============================================================
   CART (empty)
   ============================================================ */
.pg-cart{--ftr-top:714px}
.ce-h{top:262px;left:579px;width:234px;text-align:center}
.ce-sub{top:358px;left:501px;width:438px}
.ce-btn{top:418px;left:558px;width:310px;height:73px}
.ce-line20{top:615px;height:1px}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pg-detail{--ftr-top:2143px}
.pd-panel{position:absolute;top:240px;left:214px;width:375px;height:510px;background:var(--panel-pd);border-radius:var(--r-panel)}
.pd-img{position:absolute;top:87px;left:65px;width:268px;height:345px;object-fit:cover}
.pd-pill{position:absolute;top:291px;left:693px;width:112px;height:47px;background:var(--accent);border-radius:80px}
.pd-price{position:absolute;top:-21px;left:23px;width:95px}
.pd-title{top:370px;left:687px;width:447px}
.pd-desc{top:477px;left:693px;width:441px}
.pd-qty{position:absolute;top:643px;left:693px;width:219px;height:69px;background:var(--chip);border-radius:80px}
.pd-minus{top:34.5px;left:40px;width:25px;height:3px}
.pd-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pd-plus{top:22.5px;left:154px;width:25px;height:25px}
.pd-cartbox{position:absolute;top:643px;left:936px;width:219px;height:69px;background:var(--chip);border-radius:80px}
.pd-cartbox img{position:absolute;top:14.46px;left:92px;width:33px;height:36.667px}
.pd-vec{top:815.854px;left:737px;width:18px;height:21.287px}
.pd-line16{top:855px;height:1px}
.pd-about-h{top:1040px;left:215px;width:447px}
.pd-about-b{top:1119px;left:214px;width:442px}
.pd-img1{top:907px;left:710px;width:513px;height:519px;object-fit:cover;border-radius:var(--r-panel)}
.pd-img2{top:1500px;left:187px;width:1045px;height:461px;object-fit:cover;border-radius:var(--r-panel)}
.pd-line20{top:2045px;height:1px}

/* ============================================================
   CHECKOUT
   ============================================================ */
.pg-checkout{--ftr-top:2573px}
.ck-panel{position:absolute;top:240px;left:214px;width:375px;height:510px;background:var(--panel-pd);border-radius:var(--r-panel)}
.ck-img{position:absolute;top:87px;left:65px;width:268px;height:345px;object-fit:cover}
.ck-pill{position:absolute;top:291px;left:693px;width:112px;height:47px;background:var(--accent);border-radius:80px}
.ck-price{position:absolute;top:-21px;left:23px;width:95px}
.ck-title{top:370px;left:687px;width:447px}
.ck-desc{top:477px;left:693px;width:441px}
.ck-qty{position:absolute;top:643px;left:693px;width:219px;height:69px;background:var(--chip);border-radius:80px}
.ck-minus{top:34.5px;left:40px;width:25px;height:3px}
.ck-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.ck-plus{top:22.5px;left:154px;width:25px;height:25px}
.ck-remove{top:643px;left:949px;width:248px;height:73px;display:block}
.ck-remove .lbl{position:absolute;top:17px;left:30px;width:217px;height:39px;
                line-height:39px;text-align:center}
.ck-remove-icn{position:absolute;top:26px;left:37px;width:17.678px;height:19.799px}
.ck-line16{top:875px;height:1px}

.ck-ship-h{top:936px;left:51px;width:462px;text-align:center}
.ck-ship-s{top:1030px;left:75px;width:483px}
.ck-f1{top:1156px;left:65px;width:634px;height:83px}
.ck-f2{top:1156px;left:743px;width:634px;height:83px}
.ck-f3{top:1266px;left:65px;width:634px;height:83px}
.ck-f4{top:1266px;left:743px;width:634px;height:83px}
.ck-f5{top:1376px;left:61px;width:1318px;height:83px}
.ck-f6{top:1488px;left:61px;width:423px;height:83px}
.ck-f7{top:1488px;left:511px;width:418px;height:83px}
.ck-f8{top:1488px;left:956px;width:423px;height:83px}
.ck-cb1{top:1606px;left:65px;width:19px}
.ck-cb1-l{top:1606px;left:96px;width:858px}
.ck-f9{top:1658px;left:61px;width:1318px;height:83px}
.ck-f10{top:1770px;left:61px;width:423px;height:83px}
.ck-f11{top:1770px;left:511px;width:418px;height:83px}
.ck-f12{top:1770px;left:956px;width:423px;height:83px}

.ck-pay-h{top:1921px;left:38px;width:253px;text-align:center}
.ck-f13{top:2036px;left:74px;width:592px;height:83px}
/* the "+" at the end of "Select a card" is two separate 3px strokes in Figma
   and their centrelines genuinely don't intersect — reproduced as drawn */
.ck-plus-h{position:absolute;top:2075.5px;left:638px;width:16px;height:3px;background:#000}
.ck-plus-v{position:absolute;top:2087px;left:630.5px;width:3px;height:17px;background:#000}
.ck-f14{top:2154px;left:74px;width:592px;height:83px}
.ck-f15{top:2268px;left:74px;width:190px;height:83px}
.ck-f16{top:2268px;left:276px;width:188px;height:83px}
.ck-f17{top:2268px;left:476px;width:190px;height:83px}
/* Figma gives the CVV placeholder this pink — a leftover from another page of
   the file, but it is what the frame renders */
.ck-f17::placeholder{color:#dd528b}
.ck-whatis{top:2373px;left:481px;width:106px}
.ck-cb2{top:1984px;left:732px;width:20px}
.ck-agree{top:1984px;left:766px;width:396px}
.ck-agree a{text-decoration:underline;text-underline-position:from-font}
.ck-co-btn{top:2050px;left:732px;width:607px;height:73px}
.ck-terms{top:2162px;left:731px;width:643px}
.ck-secure{top:2331px;left:735px;width:265px;height:36px;object-fit:contain}
.ck-line20{top:2475px;height:1px}

/* ============================================================
   TABLET 768–1439px
   The exact 1440 desktop layout, proportionally scaled.
   js/main.js sets .canvas zoom = clientWidth / 1440, driven by the same
   matchMedia query as this block so the two can never disagree.
   ============================================================ */
@media (min-width:768px) and (max-width:1439.98px){
  html,body{overflow-x:hidden}
  .canvas{width:1440px;margin:0 auto}

  /* the two banner photos are hidden here, so the banner copy that sat on top
     of them moves up into their place and everything below is re-topped by the
     freed 286px (image block 628 tall, text block 342) */
  .ld-bn-l,.ld-bn-r{display:none}
  .ld-bn-h{top:2106px}
  .ld-bn-sub{top:2285px}
  .ld-bn-btn{top:2375px}
  .pg-landing{--ftr-top:2556px}
  .pg-landing .canvas{height:3180px}
}

/* ============================================================
   MOBILE ≤767px — hand-built single-column reflow + hamburger.
   Type is stepped DOWN from Figma rather than reused at full size:
   70/80 -> 28/34 · 80/90 -> 30/36 · 40 -> 26 · 30 -> 20 · 22 -> 16
   20 -> 15 · 18 -> 14 · 45 -> 28.  Images are capped so no card or
   product photo runs the full width.
   ============================================================ */
@media (max-width:767.98px){
  html,body{overflow-x:hidden}
  body{-webkit-text-size-adjust:100%}

  .canvas{width:100%!important;height:auto!important;zoom:1!important;
          display:flex;flex-direction:column;overflow:hidden}

  /* every element positioned by its own class goes back into flow —
     clearing top/left alone leaves them out of flow and sections collapse */
  .el,.band,.wrap,
  .pc-bg,.pc-img,.pc-pill,.pc-price,.pc-name,.pc-cart,
  .qty-btn,.qty-num,.field,.cbx,
  .ftr,.ftr-addr,.ftr-email,.ftr-phone,.ftr-terms,.ftr-privacy,
  .ftr-contact-l,.ftr-copy,.ftr-line,.ftr-cards,
  .pd-panel,.pd-img,.pd-pill,.pd-price,.pd-qty,.pd-num,.pd-cartbox,
  .ck-panel,.ck-img,.ck-pill,.ck-price,.ck-qty,.ck-num,.ck-plus-h,.ck-plus-v{
    position:static;top:auto;left:auto;right:auto;bottom:auto;
    transform:none;width:auto;height:auto}

  /* ---- stepped-down type ---- */
  .h-70{font-size:28px;line-height:34px;letter-spacing:0}
  .h-80{font-size:30px;line-height:36px;letter-spacing:0}
  .h-40{font-size:26px;line-height:30px;letter-spacing:0}
  .h-40-90{font-size:26px;line-height:34px;letter-spacing:0}
  .body-18{font-size:14px;line-height:22px}
  .body-16{font-size:14px;line-height:21px}
  .label-17,.nav-b,.link-sb{font-size:14px}
  .price{font-size:15px;line-height:24px}
  .qty-num{font-size:24px;line-height:32px}
  .btn-acc{height:52px!important}
  .btn-acc .lbl{font-size:16px}

  /* ---------- Header ---------- */
  .site-hdr{position:relative;display:flex;flex-direction:column;z-index:50}
  .hdr-logo{position:relative;width:168px;height:29px;margin:18px 0 0 20px;overflow:hidden}
  .hdr-logo img{position:absolute;width:136.83%;height:429.05%;left:-18.46%;top:-170.95%;max-width:none}
  .hdr-cart{position:absolute!important;top:18px;right:68px;width:40px!important;height:30px!important}
  .hdr-cart img{top:7px;left:13px;width:20px;height:14.9px}
  .hdr-line{width:100%!important;height:1px!important}

  .hamburger{position:absolute!important;top:11px;right:14px;width:44px;height:44px;
             display:flex;flex-direction:column;align-items:center;justify-content:center;
             gap:5px;z-index:60}
  .hamburger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);
                  transition:transform .28s ease,opacity .18s ease}
  body.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .hamburger span:nth-child(2){opacity:0}
  body.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hdr-nav{position:absolute;top:100%;left:0;width:100%;z-index:55;
           display:flex;flex-direction:column;padding:0 20px;background:#fff;
           box-shadow:0 20px 44px rgba(0,0,0,.10);
           max-height:0;opacity:0;overflow:hidden;pointer-events:none;
           transition:max-height .34s ease,opacity .22s ease,padding .34s ease}
  body.menu-open .hdr-nav{max-height:200px;opacity:1;pointer-events:auto;padding:4px 20px 14px}
  .hdr-nav .nav-link{position:static!important;width:auto!important;
                     padding:16px 2px;border-bottom:1px solid rgba(0,0,0,.10)}
  .hdr-nav .nav-link:last-child{border-bottom:none}

  /* ---------- Section shells ---------- */
  .ld-hero,.pr-intro,.ce,.pd-hero,.pd-about,.ck-hero,.ck-ship,.ck-pay{
    display:flex;flex-direction:column;padding:30px 20px 0}
  /* heading first, art after the call to action */
  .ld-hero-h{order:1}
  .ld-hero-sub{order:2;margin-top:12px}
  .ld-hero-btn{order:3}
  .ld-hero-img{order:4}

  /* hairline rules between sections */
  .hdr-line{margin:20px 0 0!important}
  .ld-line19,.pr-line19,.pr-line20,.ce-line20,
  .pd-line16,.pd-line20,.ck-line16,.ck-line20{
    width:100%!important;height:1px!important;margin:28px 0 0}

  /* ---------- Landing hero ---------- */
  .ld-hero-btn{width:100%!important;margin-top:22px}
  .ld-hero-img{width:100%!important;height:auto!important;margin:24px 0 0;
               aspect-ratio:1085/628;object-fit:cover;border-radius:12px}

  /* ---------- Landing banner ---------- */
  .ld-bn{display:flex;flex-direction:column;align-items:center;padding:30px 20px 0;margin-top:28px}
  .ld-bn-h{order:1;text-align:center;width:auto!important}
  .ld-bn-sub{order:2;margin-top:12px;text-align:center;width:auto!important}
  .ld-bn-btn{order:3;width:100%!important;max-width:300px;margin:22px auto 0}
  /* the two banner photos are hidden on phones */
  .ld-bn-l,.ld-bn-r{display:none}

  /* ---------- Products intro / Cart ---------- */
  .pr-h,.ce-h{width:auto!important;text-align:center}
  .pr-sub,.ce-sub{width:auto!important;margin-top:12px;text-align:center}
  .ce-btn{width:100%!important;max-width:300px;margin:22px auto 0}

  /* ---------- Product grid ---------- */
  .pgrid{display:flex;flex-direction:column;gap:44px;padding:30px 20px 0}
  .pcard{position:relative;display:flex;flex-direction:column;align-items:center}
  /* the panel keeps Figma's 375:376 ratio but is capped so it never runs
     the full width; the art sits inside it at Figma's own proportions */
  .pc-bg{position:relative!important;width:100%!important;max-width:262px;
         height:auto!important;aspect-ratio:375/376;margin:0 auto}
  .pc-img{position:absolute!important;top:11.7%!important;left:16.3%!important;
          width:67.5%!important;height:76.5%!important;object-fit:contain}
  .pc-pill{position:absolute!important;top:3.7%!important;left:auto!important;right:3.5%;
           width:33%!important;height:12.5%!important}
  .pc-price{position:absolute!important;top:3.7%!important;left:auto!important;right:3.5%;
            width:33%!important;height:12.5%!important;line-height:normal;
            display:flex;align-items:center;justify-content:center}
  .pc-name{position:static!important;width:auto!important;font-size:20px;
           margin-top:12px;text-align:center!important}
  .pc-cart{position:static!important;width:112px!important;height:38px!important;
           margin-top:10px;display:flex;align-items:center;justify-content:center}
  .pc-cart img{position:static;width:15px;height:19.25px}
  .pc-cart.added{transform:scale(.93);transition:transform .15s ease}

  /* ---------- Detail / checkout product block ---------- */
  .pd-panel,.ck-panel{position:relative!important;width:100%!important;max-width:280px;
    height:auto!important;aspect-ratio:375/510;margin:0 auto;order:1}
  .pd-img,.ck-img{position:absolute!important;top:17%!important;left:50%!important;
                  transform:translateX(-50%);
                  width:71.5%!important;height:67.6%!important;object-fit:contain}
  .pd-panel,.ck-panel{overflow:visible}
  .pd-pill,.ck-pill{position:relative!important;order:2;width:112px!important;height:47px!important;
                    margin:18px auto 0}
  .pd-price,.ck-price{position:absolute!important;top:0!important;left:0!important;right:0;
                      width:100%!important;height:100%!important;line-height:normal;
                      display:flex;align-items:center;justify-content:center}
  .pd-title,.ck-title{order:3;width:auto!important;margin-top:16px;text-align:center}
  .pd-desc,.ck-desc{order:4;width:auto!important;margin-top:12px}
  .pd-qty,.ck-qty{position:relative!important;order:5;width:100%!important;max-width:248px;
                  height:58px!important;margin:20px auto 0}
  .pd-minus,.ck-minus{position:absolute;top:27.5px!important;left:24px!important;width:22px!important;height:3px!important}
  .pd-num,.ck-num{position:absolute!important;top:50%!important;left:50%!important;
                  transform:translate(-50%,-50%);width:auto!important;height:auto!important}
  .pd-plus,.ck-plus{position:absolute;top:17px!important;left:auto!important;right:24px;width:22px!important;height:22px!important}
  .pd-cartbox{position:relative!important;order:6;width:100%!important;max-width:248px;
              height:58px!important;margin:14px auto 0}
  .pd-cartbox img{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:28px;height:31.1px}
  .pd-vec{display:none}
  .ck-remove{order:6;width:100%!important;max-width:248px;margin:14px auto 0;
             display:flex;align-items:center;justify-content:center;gap:10px}
  .ck-remove .lbl{position:static!important;top:auto!important;left:auto!important;
                  width:auto!important;height:auto!important;line-height:normal}
  .ck-remove-icn{position:static!important;order:-1;top:auto!important;left:auto!important;
                 width:15px!important;height:16.8px!important}

  /* ---------- Detail about ---------- */
  .pd-about-h{width:auto!important}
  .pd-about-b{width:auto!important;margin-top:12px}
  .pd-img1,.pd-img2{width:100%!important;height:auto!important;margin:22px auto 0;
                    object-fit:cover;border-radius:16px}
  .pd-img1{max-width:300px;aspect-ratio:513/519}
  .pd-img2{aspect-ratio:1045/461}

  /* ---------- Checkout form ---------- */
  .ck-ship,.ck-pay{flex-direction:row;flex-wrap:wrap;column-gap:12px;align-items:flex-start}
  .ck-ship>*,.ck-pay>*{width:100%}
  .ck-ship-h,.ck-pay-h{width:100%!important;text-align:center}
  .ck-ship-s{width:100%!important;margin-top:10px;text-align:center}
  .field{width:100%!important;height:50px!important;font-size:14px;padding:0 16px;margin-top:12px}
  .ck-f1,.ck-f2,.ck-f15,.ck-f16{width:calc(50% - 6px)!important}
  .ck-plus-h,.ck-plus-v{display:none}
  .ck-check-row,.ck-agree-row{display:flex;align-items:flex-start;gap:10px;margin-top:20px}
  .cbx{position:static!important;width:18px!important;height:18px!important;flex:0 0 18px;margin-top:2px}
  .ck-cb1-l,.ck-agree{position:static!important;width:auto!important}
  .ck-whatis{margin-top:12px;text-decoration:underline}
  .ck-terms{margin-top:20px}
  .ck-co-btn{width:100%!important;margin-top:22px}
  .ck-secure{width:210px!important;height:auto!important;margin:20px auto 0}

  /* ---------- Footer ---------- */
  .ftr{display:flex;flex-direction:column;width:100%!important;
       padding:26px 20px 30px;margin-top:0}
  /* the Landing is the one page with no rule above its footer, so it keeps a
     little more room of its own */
  .pg-landing .ftr{padding-top:34px}
  .ftr p{width:auto!important;font-size:14px;line-height:22px}
  .ftr-addr{order:1}
  .ftr-email{order:2;margin-top:10px}
  .ftr-phone{order:3;margin-top:10px}
  .ftr-links{order:4;display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:20px}
  .ftr-links a{position:static!important;width:auto!important}
  .ftr-copy{order:5;margin-top:16px}
  .ftr-line{order:6;width:100%!important;height:1px!important;margin:22px 0 0}
  .ftr-cards{order:7;width:145px!important;height:auto!important;margin:20px 0 0;object-fit:contain}

  /* section rule above the footer — kept on every page that has one */
  .pr-line20,.pd-line20,.ck-line20{margin:28px 0 0}
}

/* ---------- Small phones ---------- */
@media (max-width:389.98px){
  .h-70{font-size:26px;line-height:32px}
  .h-80{font-size:27px;line-height:33px}
  .h-40{font-size:23px;line-height:28px}
  .hdr-logo{width:150px;height:26px}
  .pc-bg{max-width:238px}
  .ck-f1,.ck-f2,.ck-f15,.ck-f16{width:100%!important}
}

/* ============================================================
   PHP / cart enhancements (dynamic catalog, checkout, legal)
   ============================================================ */

/* Home / empty-cart: absolute footer slot, flow layout inside (no overlapping text) */
.pg-landing .page-push,
.pg-cart:not(.pg-checkout) .page-push{display:none!important;height:0!important}

.pg-landing .ftr,
.pg-cart:not(.pg-checkout) .ftr{
  position:absolute!important;top:var(--ftr-top)!important;left:0!important;
  width:1440px;max-width:none;margin:0;padding:0 128px 36px;
  box-sizing:border-box;height:auto
}

/* Shared flow footer — no overlapping absolute text */
.ftr-inner{display:flex;flex-direction:column;gap:16px}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
.ftr-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;max-width:none}
.ftr-item{display:inline-flex;align-items:center}
.ftr-sep{margin:0 10px;opacity:.45}
.ftr-corp{
  position:relative;
  display:grid;
  grid-template-columns:220px 1fr;
  grid-template-areas:
    "id facts"
    "statement statement";
  gap:18px 36px;
  align-items:center;
  padding:22px 26px;
  background:var(--panel);
  border-radius:20px
}
.ftr-corp-id{grid-area:id}
.ftr-corp-name{
  font-family:'Mona Sans',sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:.2px;
  color:var(--body)
}
.ftr-corp-dba{
  margin-top:4px;
  font-size:15px;
  line-height:1.4;
  color:var(--ink)
}
.ftr-facts{
  grid-area:facts;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 20px;
  margin:0;
  padding:0
}
.ftr-facts li{min-width:0}
.ftr-fact-k{
  display:block;
  margin-bottom:4px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.55
}
.ftr-fact-v{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:var(--body);
  text-decoration:none
}
a.ftr-fact-v{text-decoration:underline;text-underline-position:from-font}
.ftr-statement{
  grid-area:statement;
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--rule-ftr);
  font-size:13px;
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--ink)
}
.ftr-disc{
  position:relative!important;top:auto!important;left:auto!important;
  width:auto!important;max-width:1180px;font-size:13px;line-height:20px;opacity:.85
}
.ftr-line{
  position:relative!important;top:auto!important;left:auto!important;
  width:100%!important;height:1px;margin:2px 0
}
.ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ftr-bottom .ftr-copy{
  position:relative!important;top:auto!important;left:auto!important;
  width:auto!important;max-width:640px;font-size:15px;line-height:1.45
}
.ftr-bottom .ftr-cards{
  position:relative!important;top:auto!important;left:auto!important;
  width:163px;height:35px;object-fit:contain
}

.pg-products .ftr,
.pg-checkout .ftr,
.pg-legal .ftr,
.pg-contact .ftr,
.pg-thanks .ftr,
.pg-detail .ftr{
  position:relative!important;top:auto!important;left:auto!important;
  width:100%;max-width:1440px;margin:0 auto;padding:28px 128px 36px;
  box-sizing:border-box;height:auto
}

.pg-products .canvas,
.pg-legal .canvas,
.pg-contact .canvas,
.pg-thanks .canvas,
.pg-detail .canvas,
.pg-checkout .canvas{
  height:auto!important;min-height:0;padding-bottom:0;overflow:visible
}

.pg-cart:not(.pg-checkout) .canvas{height:1280px;overflow:hidden}
.pg-cart:not(.pg-checkout){--ftr-top:714px}

.dyn-grid{display:grid;grid-template-columns:repeat(3,375px);column-gap:63px;row-gap:96px;
          position:relative;padding:80px 81px 40px;justify-content:center}
.pg-products .pr-line19{position:relative;left:auto;transform:none;width:100%;margin:0}
.pg-products .pr-intro{position:relative;padding:220px 128px 40px;min-height:0}
.pg-products .pr-h,.pg-products .pr-sub{position:relative;top:auto;left:auto;width:auto;max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.pg-products .pr-sub{margin-top:18px}
.pg-products .pr-line20{display:none}
.pg-products .med-disc{margin:0 auto 4px;padding:0 128px}
.dyn-grid .pcard{position:relative;display:flex;flex-direction:column;min-height:480px}
.dyn-grid .pc-bg{position:relative;top:auto;left:auto;width:375px;height:376px;display:block}
.dyn-grid .pc-img{position:absolute;top:44px;left:74px;width:227px;height:291px;object-fit:contain}
.dyn-grid .pc-pill{position:absolute;top:14px;right:14px;left:auto}
.dyn-grid .pc-price{position:absolute;top:-8px;right:22px;left:auto;width:auto}
.dyn-grid .pc-name{position:relative;top:auto;left:auto;width:auto;margin-top:16px;min-height:64px;font-size:22px;line-height:28px}
.dyn-grid .pc-meta{position:relative;margin:8px 8px 0;font-size:13px;line-height:18px;text-align:center;color:var(--body)}
.dyn-grid .pcard{min-height:540px}
.pg-landing .pc-meta{display:none}
.dyn-grid .pc-cart{position:relative;top:auto;left:auto;margin-top:12px}
.pd-meta{margin:0 0 12px;max-width:560px}
.spec-table,.sku-table{width:100%;max-width:920px;border-collapse:collapse;margin:16px 0 24px;font-size:15px;line-height:22px}
.spec-table th,.spec-table td,.sku-table th,.sku-table td{border:1px solid rgba(0,0,0,.12);padding:8px 10px;text-align:left;vertical-align:top}
.spec-table th,.sku-table th{width:28%;font-weight:700}
.ing-label{max-width:360px;height:auto;display:block;margin:8px 0 28px}

.pd-flow{
  display:grid;grid-template-columns:375px 1fr;gap:40px 72px;align-items:start;
  padding:220px 160px 70px;position:relative
}
.pd-flow .pd-panel,.pd-flow .pd-imgbg{position:relative;top:auto;left:auto;width:375px;height:510px}
.pd-flow .pd-img{position:absolute;top:78px;left:54px;width:268px;height:345px;object-fit:contain}
.pd-info{min-width:0}
.pd-flow .pd-pill{position:relative;top:auto;left:auto;margin:0 0 8px}
.pd-flow .pd-price{position:relative;top:auto;left:auto;width:auto;line-height:47px;text-align:center}
.pd-flow .pd-title{position:relative;top:auto;left:auto;width:auto;margin:0 0 12px}
.pd-flow .pd-desc{position:relative;top:auto;left:auto;width:auto;max-width:560px}
.pd-desc .pd-subh,.pd-desc strong.pd-subh{display:block;margin:14px 0 4px;color:var(--ink);font-weight:700}
.pd-points{list-style:disc;padding-left:20px;margin:16px 0 0;font-size:15px;line-height:24px;max-width:560px}
.pd-points span{font-weight:700}
.pd-flow .pd-qty{position:relative;top:auto;left:auto;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
.pd-flow .qty-btn{position:relative;top:auto;left:auto;width:25px;height:25px}
.pd-flow .pd-num{position:relative;top:auto;left:auto;transform:none}
.pd-flow .pd-cart{position:relative;top:auto;left:auto;width:257px;height:73px;margin-top:24px}
.pd-flow .med-disc{padding:0;margin:28px 0 0;max-width:560px;font-size:14px;line-height:22px}
.pd-rec-flow{display:grid;grid-template-columns:1fr 449px;gap:24px 40px;align-items:center;padding:70px 128px 80px}
.pd-rec-flow .pd-about-h,.pd-rec-flow .pd-about-b,.pd-rec-flow .pd-rec-btn,.pd-rec-flow .pd-rec-img,
.pd-rec-flow .pd-img1{position:relative;top:auto;left:auto;width:auto}
.pd-rec-flow .pd-rec-img,.pd-rec-flow .pd-img1{width:449px;max-width:100%;height:auto;object-fit:cover;border-radius:var(--r-panel)}
.pg-detail .pd-line16,.pg-detail .pd-line20{position:relative;left:auto;transform:none;width:100%;margin:0}

.pg-checkout #frmOrder{display:block}
.pg-checkout #cartBox{position:relative;padding:180px 128px 10px}
.ck-items{display:flex;flex-direction:column;gap:20px}
.ck-item{
  display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);min-height:0
}
.ck-thumb{width:140px;height:160px;background:var(--panel);border-radius:var(--r-panel);position:relative}
.ck-thumb img{width:100%;height:100%;object-fit:contain;padding:12px}
.ck-meta{min-width:0}
.ck-item .ck-title{position:relative;top:auto;left:auto;width:auto;font-size:28px;line-height:34px;margin:0 0 6px}
.ck-item .ck-price{position:relative;top:auto;left:auto;width:auto;line-height:1.2;margin:0 0 14px;font-size:22px}
.ck-item .ck-qty{position:relative;top:auto;left:auto;display:flex;align-items:center;gap:14px;width:auto;height:auto;background:transparent;border-radius:0}
.ck-item .qty-btn{position:relative;top:auto;left:auto;width:40px;height:40px}
.ck-item .qty-num{position:relative;top:auto;left:auto;width:36px;font-size:28px;line-height:40px;transform:none}
.ck-item .ck-remove{position:relative;top:auto;left:auto;width:220px;height:56px;margin-top:16px}
.ck-item .ck-remove .lbl{position:static}
.ck-summary{width:auto;max-width:1184px;margin:12px auto 28px;padding:8px 0 0;font-size:18px;line-height:32px}
.ck-summary-actions{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.ck-summary-actions .btn-acc{position:relative;width:260px;height:56px}
.cart-prd-opt{width:auto;max-width:1184px;margin:0 auto 40px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ck-upsell-h{grid-column:1/-1;font-family:'Mona Sans',sans-serif;font-size:24px;font-weight:700;color:var(--ink)}
.offerBox{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.offerBox img{width:72px;height:72px;object-fit:contain;flex:0 0 72px}
.upsel-pack{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.sec1-shopnow{color:var(--ink);font-weight:700}
.remove-from-cart{color:var(--ink);text-decoration:underline;font-size:14px}

.pg-checkout .ck-ship,
.pg-checkout .ck-pay{
  position:relative;top:auto;width:auto;max-width:1318px;margin:0 auto;
  padding:30px 61px 20px;display:grid;grid-template-columns:1fr 1fr;gap:18px 44px
}
.pg-checkout .ck-pay{grid-template-columns:minmax(240px,592px) 1fr;align-items:start}
.pg-checkout .ck-ship-h,
.pg-checkout .ck-ship-s,
.pg-checkout .ck-f5,
.pg-checkout .ck-check-row,
.pg-checkout .ck-bill,
.pg-checkout .ck-pay-h,
.pg-checkout .ck-line19{
  grid-column:1/-1;position:relative;top:auto;left:auto;width:auto;text-align:left
}
.pg-checkout .ck-ship-h,
.pg-checkout .ck-pay-h{line-height:1.2;padding:8px 0}
.pg-checkout .field,
.pg-checkout .ck-whatis,
.pg-checkout .ck-co-btn,
.pg-checkout .ck-terms,
.pg-checkout .ck-secure,
.pg-checkout .ck-plus-h,
.pg-checkout .ck-plus-v,
.pg-checkout .ck-cb1-l,
.pg-checkout .ck-agree{
  position:relative;top:auto;left:auto
}
.pg-checkout .field{width:100%;height:83px}
.pg-checkout .ck-exp-row{grid-column:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}
.pg-checkout .ck-whatis{grid-column:1/-1;margin:0;text-decoration:underline}
.pg-checkout .ck-plus-h,.pg-checkout .ck-plus-v{display:none}
.pg-checkout .ck-check-row,
.pg-checkout .ck-agree-row{display:flex;align-items:flex-start;gap:12px;width:100%}
.pg-checkout .cbx,
.pg-checkout .ck-cb1,
.pg-checkout .ck-cb2{
  position:relative!important;top:auto!important;left:auto!important;
  width:20px;height:20px;flex:0 0 20px;margin-top:2px
}
.pg-checkout .ck-cb1-l,
.pg-checkout .ck-agree{
  position:relative!important;top:auto!important;left:auto!important;
  width:auto;max-width:none;flex:1;line-height:22px;display:block
}
.pg-checkout .ck-agree a{text-decoration:underline}
.ck-agree-row.formError,.ck-check-row.formError{outline:1px solid orange;padding:8px;border-radius:6px}
.pg-checkout .ck-statement,
.pg-checkout .ck-agree-row,
.pg-checkout .ck-co-btn{grid-column:2}
.pg-checkout .ck-statement{
  position:relative;top:auto;left:auto;width:auto;max-width:420px;
  margin:12px 0 0;font-size:14px;line-height:22px
}
.pg-checkout .ck-co-btn{width:280px;height:73px;margin-top:8px;border:none;cursor:pointer}
.pg-checkout .ck-co-btn.is-disabled,
.pg-checkout .ck-co-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;filter:grayscale(.15)}
.pg-checkout .ck-terms{
  grid-column:1/-1;position:relative;top:auto;left:auto;
  width:auto;max-width:920px;font-size:14px;line-height:22px;opacity:.9;margin-top:8px
}
.pg-checkout .ck-terms:empty{display:none}
.pg-checkout .ck-secure{position:relative;top:auto;left:auto;width:265px;height:auto;grid-column:2}
.ck-bill{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 44px}
.ck-bill .ck-f9{grid-column:1/-1}
.pg-checkout .ck-line16,.pg-checkout .ck-line20{position:relative;left:auto;transform:none;width:100%;margin:20px 0}

.legal-page{padding:220px 128px 80px}
.legal-h{position:relative;top:auto;left:auto;width:auto;margin-bottom:28px}
.legal-inner{font-size:16px;line-height:1.7;color:var(--body);max-width:1180px}
.legal-inner .page-title{display:none}
.legal-inner h3{margin:28px 0 10px;font-family:'Mona Sans',sans-serif;font-size:22px;color:var(--ink)}
.legal-inner p,.legal-inner li{margin:10px 0}
.legal-inner a{text-decoration:underline}
.legal-inner h4{margin:18px 0 6px;font-size:18px;color:var(--ink)}
.ing-label{display:block;width:min(280px,100%);height:auto;margin:12px 0 28px;background:#fff}
.ty-statement{margin:-12px 0 28px;max-width:560px;line-height:22px}

.pg-contact .ct-intro{padding:220px 128px 40px}
.pg-contact .ct-h,.pg-contact .ct-sub,.pg-contact .ct-info{position:relative;top:auto;left:auto;width:auto;max-width:720px}
.pg-contact .ct-sub,.pg-contact .ct-info{margin-top:16px}
.pg-contact .ct-form{position:relative;padding:20px 128px 60px;display:flex;flex-direction:column;gap:14px;max-width:900px}
.pg-contact .ct-form-h,.pg-contact .ct-form-sub,.pg-contact .ct-note{position:relative;top:auto;left:auto;width:auto}
.pg-contact .field{position:relative;top:auto;left:auto;width:100%;height:64px}
.pg-contact textarea.field{height:160px;padding-top:18px;resize:vertical}
.pg-contact .ct-send{position:relative;width:260px;height:64px;margin-top:12px;border:none}

.ty{
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:40px 80px;
  align-items:center;
  padding:220px 137px 80px;
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  box-sizing:border-box;
}
.ty-copy{min-width:0}
.ty-h{position:relative;top:auto;left:auto;width:auto;margin:0;font-size:80px;line-height:90px}
.ty-sub{position:relative;top:auto;left:auto;width:auto;margin:20px 0 32px;max-width:560px;line-height:28px}
.ty-btn{position:relative;width:310px;height:73px}
.ty-img{width:264px;height:auto;max-width:100%;object-fit:contain;justify-self:end}

.med-disc{max-width:1184px;margin:24px auto 0;padding:0 128px;font-size:14px;line-height:22px;color:var(--body)}

#pop_overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000}
#pop_content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:28px;max-width:90vw}
#pop_content img{max-width:100%;height:auto}
#pop_content .cross{position:absolute;top:8px;right:8px;width:22px;cursor:pointer}
.popup-loading-wrapper{position:fixed;inset:0;background:rgba(255,255,255,.86);z-index:3000;display:flex;align-items:center;justify-content:center;text-align:center}
.popup-loading-wrapper .popup{padding:40px}
.popup-loading-wrapper h3{font-family:'Mona Sans',sans-serif;font-size:28px;margin:12px 0}

@media (max-width:767.98px){
  body.menu-open .hdr-nav{max-height:280px}
  .pg-products .pr-intro,.pd-flow,.pd-rec-flow,.legal-page,.ty,
  .pg-contact .ct-intro,.pg-contact .ct-form{padding:34px 20px 0}
  .pd-flow,.pd-rec-flow{display:flex;flex-direction:column;gap:0}
  .pd-flow .pd-panel{width:100%;max-width:330px;height:auto;aspect-ratio:375/510;margin:0 auto}
  .pd-flow .pd-cart,.pd-rec-flow .pd-rec-btn,.ty-btn{width:100%;max-width:300px}
  .dyn-grid{display:flex;flex-direction:column;padding:32px 20px 0;gap:26px}
  .dyn-grid .pc-bg{width:100%;height:auto;aspect-ratio:375/376}
  .dyn-grid .pc-name{min-height:0;font-size:17px}
  .pg-checkout #cartBox{padding:24px 20px 0}
  .ck-item{grid-template-columns:1fr;gap:12px}
  .ck-thumb{width:100%;max-width:220px;height:200px;margin:0 auto}
  .ck-item .ck-remove{width:100%;max-width:300px}
  .ck-summary,.cart-prd-opt,.legal-page,.med-disc{width:auto;max-width:none;padding:24px 20px}
  .med-disc{margin:20px 0 0}
  .cart-prd-opt{grid-template-columns:1fr}
  .pg-checkout .ck-ship,.pg-checkout .ck-pay,.ck-bill,.pg-checkout .ck-exp-row{
    display:flex;flex-direction:column;width:100%;max-width:none;padding:34px 20px 0;gap:0
  }
  .pg-checkout .field{height:52px!important;margin-top:14px}
  .pg-checkout .ck-co-btn,
  .pg-checkout .ck-secure{width:100%;max-width:300px;margin:24px auto 0;grid-column:auto}
  .pg-checkout .ck-statement,
  .pg-checkout .ck-agree-row{grid-column:auto;width:100%;max-width:none;margin-top:18px}
  .pg-checkout .ck-check-row{margin-top:18px}
  .pg-checkout .ck-terms{max-width:none;font-size:13px;line-height:20px;margin-top:16px}
  .ty{display:flex!important;flex-direction:column;width:100%!important;max-width:none;padding:34px 20px 0!important;gap:0}
  .ty-h{font-size:30px!important;line-height:38px!important}
  .ty-sub{margin:14px 0 0;max-width:none;font-size:14px;line-height:22px}
  .ty-btn{width:100%;max-width:300px;margin-top:24px}
  .ty-img{width:100%;max-width:260px;margin:26px auto 0;justify-self:auto}
  .page-push{height:0!important;display:none!important}
  .pg-landing .canvas,
  .pg-cart:not(.pg-checkout) .canvas{height:auto!important;overflow:visible!important}
  .pg-landing .ftr,
  .pg-cart:not(.pg-checkout) .ftr{
    position:relative!important;top:auto!important;left:auto!important;
    width:100%!important;padding:26px 20px 30px;margin-top:0
  }
  .pg-landing .ftr,
  .pg-cart:not(.pg-checkout) .ftr,
  .pg-products .ftr,.pg-legal .ftr,.pg-checkout .ftr,.pg-detail .ftr,
  .pg-thanks .ftr,.pg-contact .ftr{
    width:100%!important;padding:26px 20px 30px;margin-top:0
  }
  .ftr-top{flex-direction:column}
  .ftr-sep{display:none}
  .ftr-links{flex-direction:column;gap:12px}
  .ftr-corp{
    grid-template-columns:1fr;
    grid-template-areas:"id" "facts" "statement";
    gap:16px;
    padding:18px 16px
  }
  .ftr .ftr-corp-name{font-size:20px;line-height:1.2}
  .ftr-facts{grid-template-columns:1fr 1fr;gap:14px 16px}
}