/* ============================================================
   Promedtools — Figma canvas "Promedtools" (532:48), 1440px canvas.
   Desktop = exact Figma coordinates. 768–1439px = proportional zoom.
   ≤767px = mobile reflow with hamburger menu.
   ============================================================ */

/* ---------- 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-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; }
@font-face { font-family: 'Autography'; src: url('../fonts/Autography.otf') format('opentype'); font-weight: 400; font-display: swap; }
/* Inter — Google Fonts (variable, latin + latin-ext) */
@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; }

/* ---------- Base ---------- */
:root {
  --ts: 1;
  --ink: #202327;          /* headings */
  --green: #94da00;        /* accent word */
  --lime: #b8fe23;         /* primary button */
  --body: #17110f;         /* body copy */
  --muted: #464646;        /* nav + footer links */
  --soft: #f6f5f8;         /* section + footer bg */
  --card: #f0f0f0;         /* product card bg */
  --price: #353535;
  --teal: rgba(1, 221, 233, 0.13);
  --line: #d9d9d9;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; }
body { font-family: 'Inter Display', 'Inter', sans-serif; color: var(--body); }
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: 6093px; }
.pg-products .canvas { height: 2621px; }
.pg-cart     .canvas { height: 1373px; }
.pg-detail   .canvas { height: 2493px; }
.pg-checkout .canvas { height: 3532px; }
.pg-contact  .canvas { height: 2643px; }

.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; color: var(--ink); }
.h-80   { font-size: calc(80px * var(--ts)); line-height: calc(90px * var(--ts)); letter-spacing: 0.8px; }
.h-65   { font-size: calc(65px * var(--ts)); line-height: calc(90px * var(--ts)); letter-spacing: 0.65px; }
.h-40   { font-size: calc(40px * var(--ts)); line-height: calc(45px * var(--ts)); letter-spacing: 0.4px; }
.h-40-90{ font-size: calc(40px * var(--ts)); line-height: calc(90px * var(--ts)); letter-spacing: 0.4px; }
.accent { color: var(--green); }

.manrope { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--ink); }
.m-30    { font-size: calc(30px * var(--ts)); line-height: normal; }
.m-22    { font-size: calc(22px * var(--ts)); line-height: normal; }

.body-18 { font-family: 'Inter Display', 'Inter', sans-serif; font-weight: 400; font-size: calc(18px * var(--ts)); letter-spacing: 0.18px; color: var(--body); line-height: normal; }
.light-16 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: calc(16px * var(--ts)); letter-spacing: 0.16px; color: var(--body); line-height: normal; }
.inter-sb { font-family: 'Inter', sans-serif; font-weight: 600; font-size: calc(18px * var(--ts)); letter-spacing: 0.18px; color: var(--muted); line-height: normal; white-space: nowrap; }
.autog   { font-family: 'Autography', cursive; font-weight: 400; color: var(--price); font-size: calc(50px * var(--ts)); letter-spacing: 0.5px; line-height: calc(90px * var(--ts)); }
.center  { text-align: center; }

/* ---------- Header (shared across all pages) ---------- */
.site-hdr  { position: relative; height: 145px; z-index: 50; background: #fff; }
.hdr-logo  { top: 64px; left: 125px; width: 281px; height: 25px; z-index: 42; }
.hdr-logo img { width: 100%; height: 100%; object-fit: contain; }
.nav-link  { top: 63px; z-index: 42; }
.nav-all   { left: 852px; }
.nav-contact { left: 1054px; }
.hdr-cart  { top: 53px; left: 1247px; width: 54px; height: 41px; z-index: 42; }
.hdr-cart img { width: 100%; height: 100%; object-fit: contain; }
.hdr-line  { top: 145px; height: 1px; background: var(--line); }
.hamburger { display: none; }
.menu-only { display: none; }

/* ---------- Buttons ---------- */
.btn-lime  { background: var(--lime); border-radius: 54px; display: flex; align-items: center; justify-content: center; }
.btn-out   { border: 2px solid #000; border-radius: 54px; background: none; display: flex; align-items: center; justify-content: center; }
.btn-label { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(22px * var(--ts)); color: var(--ink); text-align: center; white-space: nowrap; }

/* ---------- Product card (shared: landing, products, detail) ---------- */
.pc-bg    { position: absolute; width: 375px; height: 376px; background: var(--card); border-radius: 20px; }
.pc-img   { position: absolute; width: 268px; height: 345px; object-fit: contain; top: 18px; left: 63px; }
.pc-name  { position: absolute; text-align: center; }
.pc-price { position: absolute; }
.pc-btn   { position: absolute; width: 354px; height: 73px; }

/* ---------- Footer (page sets --ftr-top) ---------- */
.ftr        { position: absolute; top: var(--ftr-top); left: 0; width: 1440px; height: 760px; }
.ftr-bg     { top: 0; height: 760px; background: var(--soft); }
.ftr-addr   { position: absolute; top: 105px; left: 111px; width: 473px; }
.ftr-email  { position: absolute; top: 109px; left: 718px; width: 473px; }
.ftr-phone  { position: absolute; top: 175px; left: 722px; width: 473px; }
.ftr-line   { position: absolute; top: 271px; left: 102px; width: 1223px; height: 1px; background: var(--line); }
.ftr-links  { position: absolute; top: 308px; left: 117px; width: 1000px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.ftr-link   { position: static; }
.ftr-cards  { position: absolute; top: 308px; left: 1148px; width: 163px; height: 35px; object-fit: contain; }
.ftr-copy   { position: absolute; top: 430px; left: 117px; width: 1020px; }
.ftr-descriptor { position: absolute; top: 500px; left: 117px; width: 1020px; }
.ftr-disc   { position: absolute; top: 545px; left: 117px; width: 1200px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ftr-email a { text-decoration: underline; text-underline-position: from-font; }

/* ============================================================
   LANDING
   ============================================================ */
.pg-landing { --ftr-top: 5333px; }

.ld-hero-h   { top: 226px; left: 118px; width: 859px; }
.ld-hero-sub { top: 436px; left: 119px; width: 522px; }
.ld-hero-img { top: 577px; left: 78px; width: 1267px; height: 645px; border-radius: 20px; object-fit: cover; }
.ld-hero-btn { top: 1056px; left: 570px; width: 303px; height: 69px; }

.ld-wel-h    { top: 1362px; left: 286px; width: 826px; text-align: center; }
.ld-wel-b    { top: 1472px; left: 317px; width: 728px; text-align: center; }
.ld-col-1    { top: 1658px; left: 78px;  width: 643px; height: 846px; border-radius: 20px; object-fit: cover; }
.ld-col-2    { top: 1658px; left: 788px; width: 563px; height: 375px; border-radius: 20px; object-fit: cover; }
.ld-col-3    { top: 2078px; left: 782px; width: 563px; height: 426px; border-radius: 20px; object-fit: cover; }

/* feature strip */
.ft-icon   { position: absolute; width: 108px; height: 108px; object-fit: contain; }
.ft-h      { position: absolute; }
.ft-sub    { position: absolute; }
.ft-i1 { top: 2597px; left: 79px;  height: 109px; }
.ft-h1 { top: 2619px; left: 202px; width: 272px; }
.ft-s1 { top: 2665px; left: 213px; width: 223px; }
.ft-i2 { top: 2602px; left: 547px; }
.ft-h2 { top: 2620px; left: 666px; width: 233px; }
.ft-s2 { top: 2667px; left: 681px; width: 194px; }
.ft-i3 { top: 2602px; left: 974px; }
.ft-h3 { top: 2620px; left: 1095px; width: 263px; }
.ft-s3 { top: 2667px; left: 1107px; width: 194px; }

/* best selling */
.ld-best-band { top: 2833px; height: 1803px; background: var(--soft); }
.ld-best-h    { top: 2916px; left: 281px; width: 826px; text-align: center; }
.ld-best-sub  { top: 3115px; left: 398px; width: 587px; text-align: center; }

/* row 1 */
.c1-bg { top: 3215px; left: 99px; }   .c1-img { }
.c1-nm { top: 3647px; left: 99px;  width: 166px; }  .c1-pr { top: 3631px; left: 361px; width: 129px; }
.c1-bt { top: 3737px; left: 114px; }
.c2-bg { top: 3215px; left: 529px; }  .c2-img { top: 21px; left: 61px; width: 269px; }
.c2-nm { top: 3649px; left: 541px; width: 219px; }  .c2-pr { top: 3631px; left: 793px; width: 129px; }
.c2-bt { top: 3737px; left: 546px; }
.c3-bg { top: 3215px; left: 969px; }  .c3-img { top: 21px; left: 71px; }
.c3-nm { top: 3650px; left: 981px; width: 206px; }  .c3-pr { top: 3631px; left: 1233px; width: 129px; }
.c3-bt { top: 3737px; left: 986px; }
/* row 2 */
.c4-bg { top: 3916px; left: 96px; }   .c4-img { }
.c4-nm { top: 4345px; left: 117px; width: 217px; }  .c4-pr { top: 4332px; left: 358px; width: 129px; }
.c4-bt { top: 4438px; left: 111px; }
.c5-bg { top: 3916px; left: 542px; }  .c5-img { }
.c5-nm { top: 4348px; left: 542px; width: 187px; }  .c5-pr { top: 4332px; left: 804px; width: 129px; }
.c5-bt { top: 4438px; left: 557px; }
.c6-bg { top: 3916px; left: 985px; }  .c6-img { }
.c6-nm { top: 4348px; left: 985px; width: 166px; }  .c6-pr { top: 4332px; left: 1247px; width: 129px; }
.c6-bt { top: 4438px; left: 1000px; }

/* elevate */
.ld-elev-l   { position: absolute; top: 4635px; left: 1px; width: 704px; height: 700px; background: var(--teal); }
.ld-elev-img { top: 4634px; left: 706px; width: 734px; height: 700px; object-fit: cover; }
.ld-elev-h   { top: 4792px; left: 92px; width: 511px; }
.ld-elev-b   { top: 4965px; left: 87px; width: 568px; }
.ld-elev-btn { top: 5127px; left: 217px; width: 303px; height: 69px; }

/* ---------- Shared page intro (products / cart / contact / detail) ---------- */
.pg-title { position: absolute; top: 226px; left: 118px; }
.pg-sub   { position: absolute; top: 436px; left: 119px; }

/* ---------- Form controls (checkout + contact) ---------- */
.field    { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 5px;
            font-family: 'Inter Display', 'Inter', sans-serif; font-size: calc(17px * var(--ts)); color: var(--body);
            padding: 0 28px; }
.field::placeholder { color: var(--body); opacity: 1; }
.field:focus { outline: none; border-color: var(--ink); }
textarea.field { padding-top: 24px; resize: none; line-height: 1.5; }
.cbx      { position: absolute; width: 20px; height: 20px; appearance: none; -webkit-appearance: none;
            background: #fff; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.cbx:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
            border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Qty stepper (detail + checkout) ---------- */
.qty-btn  { position: absolute; width: 49px; height: 49px; border-radius: 50%; border: 1px solid var(--ink); background: none; }
.qty-btn .bar-h { position: absolute; left: 12px; top: 23px; width: 25px; height: 1.5px; background: var(--ink); }
.qty-btn .bar-v { position: absolute; left: 23.5px; top: 12px; width: 1.5px; height: 25px; background: var(--ink); }
.qty-num  { position: absolute; font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: calc(36px * var(--ts));
            line-height: 49px; color: var(--ink); text-align: center; }

/* ---------- Tag pills (detail + checkout) — text at Figma's +17px inset ---------- */
.tag      { position: absolute; height: 37px; border: 1px solid var(--line); border-radius: 19px; background: #fff;
            display: flex; align-items: center; padding-left: 17px;
            font-family: 'Inter Display', 'Inter', sans-serif; font-size: calc(15px * var(--ts));
            color: var(--body); line-height: normal; white-space: nowrap; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.pg-products { --ftr-top: 2043px; }
.pr-h   { top: 226px; left: 118px; width: 859px; }
.pr-sub { top: 436px; left: 119px; width: 576px; }
.p1-bg { top: 585px; left: 84px; }   .p1-img { }
.p1-nm { top: 1017px; left: 84px; width: 166px; }  .p1-pr { top: 1001px; left: 346px; width: 129px; }
.p1-bt { top: 1107px; left: 99px; }
.p2-bg { top: 585px; left: 519px; }  .p2-img { }
.p2-nm { top: 1017px; left: 519px; width: 187px; } .p2-pr { top: 1001px; left: 781px; width: 129px; }
.p2-bt { top: 1107px; left: 534px; }
.p3-bg { top: 585px; left: 962px; }  .p3-img { }
.p3-nm { top: 1017px; left: 962px; width: 166px; } .p3-pr { top: 1001px; left: 1224px; width: 129px; }
.p3-bt { top: 1107px; left: 977px; }
.p4-bg { top: 1286px; left: 81px; }  .p4-img { }
.p4-nm { top: 1715px; left: 102px; width: 217px; } .p4-pr { top: 1702px; left: 343px; width: 129px; }
.p4-bt { top: 1808px; left: 96px; }
.p5-bg { top: 1285px; left: 519px; } .p5-img { }
.p5-nm { top: 1717px; left: 519px; width: 187px; } .p5-pr { top: 1701px; left: 781px; width: 129px; }
.p5-bt { top: 1807px; left: 534px; }
.p6-bg { top: 1285px; left: 962px; } .p6-img { }
.p6-nm { top: 1717px; left: 962px; width: 166px; } .p6-pr { top: 1701px; left: 1224px; width: 129px; }
.p6-bt { top: 1807px; left: 977px; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pg-detail { --ftr-top: 1914px; }
.pd-imgbg  { position: absolute; top: 240px; left: 223px; width: 375px; height: 510px; background: var(--card); border-radius: 20px; }
.pd-img    { position: absolute; top: 78px; left: 61px; width: 268px; height: 345px; object-fit: contain; }
.pd-title  { line-height: calc(48px * var(--ts)); top: 242px; left: 696px; width: 447px; }
.pd-price  { top: 335px; left: 702px; width: 129px; }
/* 16px/22px → exactly 5 lines = 110px, matching the Figma box and clearing the tags at y542 */
.pd-desc   { top: 413px; left: 702px; width: 483px; font-size: calc(16px * var(--ts)); line-height: calc(22px * var(--ts)); }
.pd-tag1 { top: 542px; left: 698px; width: 217px; }  .pd-tag1-t { top: 550px; left: 715px; }
.pd-tag2 { top: 542px; left: 929px; width: 280px; }  .pd-tag2-t { top: 550px; left: 946px; }
.pd-tag3 { top: 591px; left: 699px; width: 99px; }   .pd-tag3-t { top: 599px; left: 716px; }
.pd-tag4 { top: 591px; left: 810px; width: 171px; }  .pd-tag4-t { top: 599px; left: 827px; }
.pd-selqty { top: 660px; left: 706px; width: 106px; font-size: calc(15px * var(--ts)); white-space: nowrap; }
.pd-minus  { top: 701px; left: 706px; }
.pd-num    { top: 701px; left: 762px; width: 72px; }
.pd-plus   { top: 701px; left: 835px; }
.pd-cart   { top: 685px; left: 946px; width: 232px; height: 73px; }
.pd-line16 { top: 875px; height: 1px; background: var(--line); }
.pd-rec-h  { top: 956px; left: 281px; width: 852px; text-align: center; font-size: calc(55px * var(--ts)); letter-spacing: 0.55px; }
.pd-rec-s  { top: 1065px; left: 418px; width: 587px; text-align: center; }
.r1-bg { top: 1185px; left: 99px; }   .r1-img { }
.r1-nm { top: 1617px; left: 99px; width: 166px; }  .r1-pr { top: 1601px; left: 361px; width: 129px; }
.r1-bt { top: 1707px; left: 114px; }
.r2-bg { top: 1185px; left: 529px; }  .r2-img { top: 21px; left: 61px; width: 269px; }
.r2-nm { top: 1619px; left: 541px; width: 219px; } .r2-pr { top: 1601px; left: 793px; width: 129px; }
.r2-bt { top: 1707px; left: 546px; }
.r3-bg { top: 1185px; left: 969px; }  .r3-img { top: 21px; left: 71px; }
.r3-nm { top: 1620px; left: 981px; width: 206px; } .r3-pr { top: 1601px; left: 1233px; width: 129px; }
.r3-bt { top: 1707px; left: 986px; }

/* ============================================================
   CART (empty)
   ============================================================ */
.pg-cart { --ftr-top: 613px; }
.ce-h    { top: 216px; left: 118px; width: 332px; }
.ce-sub  { top: 329px; left: 119px; width: 438px; }
.ce-btn  { top: 399px; left: 118px; width: 354px; height: 73px; }

/* ============================================================
   CONTACT
   ============================================================ */
.pg-contact { --ftr-top: 1883px; }
.ct-h     { top: 216px; left: 118px; width: 464px; }
.ct-sub   { top: 329px; left: 119px; width: 463px; }
.ct-hero  { top: 454px; height: 469px; object-fit: cover; }
.ct-form-h { line-height: calc(90px * var(--ts)); top: 1001px; left: 293px; width: 462px; text-align: center; }
.ct-form-s { top: 1095px; left: 330px; width: 483px; }
.ct-name  { top: 1221px; left: 318px; width: 385px; height: 83px; }
.ct-email { top: 1221px; left: 730px; width: 385px; height: 83px; }
.ct-tel   { top: 1331px; left: 318px; width: 797px; height: 83px; }
.ct-msg   { top: 1441px; left: 312px; width: 803px; height: 210px; }
.ct-send  { top: 1702px; left: 765px; width: 354px; height: 73px; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.pg-checkout { --ftr-top: 2954px; }
.ck-imgbg { position: absolute; top: 240px; left: 173px; width: 375px; height: 510px; background: var(--card); border-radius: 20px; }
.ck-img   { position: absolute; top: 78px; left: 61px; width: 268px; height: 345px; object-fit: contain; }
.ck-remove { top: 685px; left: 946px; width: 232px; height: 73px; }

.ck-ship-h { line-height: calc(90px * var(--ts)); top: 926px; left: 141px; width: 462px; text-align: center; }
.ck-ship-s { top: 1020px; left: 165px; width: 483px; font-size: calc(16px * var(--ts)); line-height: calc(22px * var(--ts)); }
.ck-f1 { top: 1146px; left: 153px; width: 306px; height: 83px; }
.ck-f2 { top: 1146px; left: 480px; width: 306px; height: 83px; }
.ck-f3 { top: 1256px; left: 153px; width: 306px; height: 83px; }
.ck-f4 { top: 1256px; left: 480px; width: 306px; height: 83px; }
.ck-f5 { top: 1357px; left: 151px; width: 636px; height: 83px; }
.ck-f6 { top: 1469px; left: 151px; width: 204px; height: 83px; }
.ck-f7 { top: 1469px; left: 368px; width: 202px; height: 83px; }
.ck-f8 { top: 1469px; left: 583px; width: 204px; height: 83px; }
.ck-cb1 { top: 1587px; left: 153px; }
.ck-cb1-l { top: 1586px; left: 187px; width: 414px; }
.ck-f9  { top: 1639px; left: 151px; width: 636px; height: 83px; }
.ck-f10 { top: 1751px; left: 151px; width: 204px; height: 83px; }
.ck-f11 { top: 1751px; left: 368px; width: 202px; height: 83px; }
.ck-f12 { top: 1751px; left: 583px; width: 204px; height: 83px; }

.ck-off-h { line-height: calc(90px * var(--ts)); top: 926px; left: 864px; width: 286px; text-align: center; }
.ck-o1-bg { position: absolute; top: 1053px; left: 864px; width: 204px; height: 212px; background: var(--card); border-radius: 20px; }
.ck-o1-img { position: absolute; top: 18px; left: 43px; width: 132px; height: 170px; object-fit: contain; }
.ck-o1-pr { top: 1275px; left: 999px; width: 129px; font-size: calc(35px * var(--ts)); letter-spacing: 0.35px; }
.ck-o1-nm { top: 1300px; left: 844px; width: 166px; font-size: calc(20px * var(--ts)); }
.ck-o1-bt { top: 1351px; left: 877px; width: 195px; height: 56px; }
.ck-o2-bg { position: absolute; top: 1053px; left: 1115px; width: 204px; height: 212px; background: var(--card); border-radius: 20px; }
.ck-o2-img { position: absolute; top: 18px; left: 43px; width: 132px; height: 170px; object-fit: contain; }
.ck-o2-pr { top: 1275px; left: 1250px; width: 129px; font-size: calc(35px * var(--ts)); letter-spacing: 0.35px; }
.ck-o2-nm { top: 1300px; left: 1095px; width: 166px; font-size: calc(20px * var(--ts)); }
.ck-o2-bt { top: 1351px; left: 1128px; width: 195px; height: 56px; }
.ck-off-label { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(16px * var(--ts)); color: var(--ink); }

.ck-pay-h { line-height: calc(90px * var(--ts)); top: 1894px; left: 137px; width: 253px; text-align: center; }
.ck-f13 { top: 2009px; left: 151px; width: 636px; height: 83px; }
.ck-plus-h { position: absolute; top: 2050px; left: 757px; width: 17px; height: 1.5px; background: var(--ink); }
.ck-plus-v { position: absolute; top: 2043px; left: 764px; width: 1.5px; height: 17px; background: var(--ink); }
.ck-f14 { top: 2127px; left: 151px; width: 636px; height: 83px; }
.ck-f15 { top: 2241px; left: 151px; width: 204px; height: 83px; }
.ck-f16 { top: 2241px; left: 368px; width: 202px; height: 83px; }
.ck-f17 { top: 2241px; left: 583px; width: 204px; height: 83px; }
.ck-f17::placeholder { color: #ff5a5a; }
.ck-whatis { top: 2346px; left: 588px; width: 114px; }
.ck-line19 { position: absolute; top: 2425px; left: 137px; width: 668px; height: 1px; background: var(--line); }
.ck-cb2 { top: 2489px; left: 153px; }
.ck-agree { top: 2489px; left: 187px; width: 396px; }
.ck-agree a { text-decoration: underline; text-underline-position: from-font; }
.ck-terms { top: 2566px; left: 152px; width: 643px; font-size: calc(15px * var(--ts)); line-height: calc(22px * var(--ts)); }
.ck-complete { top: 2749px; left: 145px; width: 354px; height: 73px; }
.ck-secure { top: 2766px; left: 552px; width: 265px; height: 36px; object-fit: contain; }

/* ============================================================
   TABLET (768–1439px): proportional zoom (JS-set)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1439.98px) {
  .band, .hdr-line { width: 1440px; }

  /* Feature strip (Quality Assurance / Quick Shipping / Secure Checkout) is hidden on
     tablets. Because the canvas is absolutely positioned, hiding it would leave a ~330px
     hole, so everything below it shifts up by --shift and the canvas shortens to match.
     Covers portrait and landscape alike — the breakpoint is width-based. */
  .ld-strip { display: none; }
  .pg-landing { --shift: 200px; --ftr-top: calc(5333px - var(--shift)); }
  .pg-landing .canvas { height: calc(6093px - var(--shift)); }

  .ld-best-band { top: calc(2833px - var(--shift)); }
  .ld-best-h    { top: calc(2916px - var(--shift)); }
  .ld-best-sub  { top: calc(3115px - var(--shift)); }

  .c1-bg, .c2-bg, .c3-bg { top: calc(3215px - var(--shift)); }
  .c1-pr, .c2-pr, .c3-pr { top: calc(3631px - var(--shift)); }
  .c1-nm { top: calc(3647px - var(--shift)); }
  .c2-nm { top: calc(3649px - var(--shift)); }
  .c3-nm { top: calc(3650px - var(--shift)); }
  .c1-bt, .c2-bt, .c3-bt { top: calc(3737px - var(--shift)); }

  .c4-bg, .c5-bg, .c6-bg { top: calc(3916px - var(--shift)); }
  .c4-pr, .c5-pr, .c6-pr { top: calc(4332px - var(--shift)); }
  .c4-nm { top: calc(4345px - var(--shift)); }
  .c5-nm, .c6-nm { top: calc(4348px - var(--shift)); }
  .c4-bt, .c5-bt, .c6-bt { top: calc(4438px - var(--shift)); }

  .ld-elev-img { top: calc(4634px - var(--shift)); }
  .ld-elev-l   { top: calc(4635px - var(--shift)); }
  .ld-elev-h   { top: calc(4792px - var(--shift)); }
  .ld-elev-b   { top: calc(4965px - var(--shift)); }
  .ld-elev-btn { top: calc(5127px - var(--shift)); }
}

/* ============================================================
   MOBILE (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  body { min-width: 0; }
  .canvas { width: 100%; height: auto !important; display: flex; flex-direction: column; }
  .band { display: none; }
  .el { position: static; width: auto; height: auto; }
  /* Elements positioned by class (not .el) keep their desktop top/left, which would
     still offset them once they flow — clear the coordinates before the mobile rules. */
  .pcard, .pc-bg, .pc-name, .pc-price, .pc-btn,
  .pd-imgbg, .ck-imgbg, .ck-o1-bg, .ck-o2-bg,
  .tag, .field, .cbx, .qty-btn, .qty-num,
  .ft-icon, .ft-h, .ft-sub, .ld-elev-l,
  .ftr-line, .ftr-link, .ftr-links, .ftr-cards, .ftr-descriptor, .ftr-disc,
  .ck-plus-h, .ck-plus-v, .ck-line19 { top: auto; left: auto; }

  /* header */
  .site-hdr { order: -1; position: relative; height: auto; display: flex; align-items: center; padding: 18px 20px; background: #fff; border-bottom: 1px solid #ececec; }
  .hdr-line { display: none; }
  .hdr-logo { position: static; width: 190px; height: 18px; margin-right: auto; }
  .hdr-cart { position: static; width: 40px; height: 30px; }
  .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 24px; margin-left: 18px; }
  .hamburger span { display: block; width: 100%; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .menu-open .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-open .hamburger span:nth-child(2) { opacity: 0; }
  .menu-open .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .hdr-nav { display: none; }
  .menu-open .hdr-nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #ececec; box-shadow: 0 14px 24px rgba(32,35,39,.12); padding: 4px 20px 12px; z-index: 60; }
  .hdr-nav .nav-link { position: static; padding: 15px 0; border-bottom: 1px solid #f2f2f2; font-size: 15px; }
  .hdr-nav .nav-link:last-child { border-bottom: none; }

  /* type scale */
  .h-80 { font-size: 38px; line-height: 44px; }
  .h-65 { font-size: 32px; line-height: 40px; }
  .h-40, .h-40-90 { font-size: 26px; line-height: 32px; }
  .m-30 { font-size: 21px; }
  .m-22 { font-size: 16px; }
  .body-18 { font-size: 15px; line-height: 23px; width: auto !important; }
  .light-16 { font-size: 14px; }
  .autog { font-size: 34px; line-height: 1.05; }
  .btn-label { font-size: 16px; }

  .btn-lime, .btn-out { position: static; width: 100%; max-width: 320px; height: 60px !important; margin: 0 auto; }
  .tag { position: static; width: auto !important; height: auto; padding: 9px 16px; font-size: 13px; }

  /* ---- landing ---- */
  .ld-hero { display: flex; flex-direction: column; padding: 48px 24px; }
  .ld-hero-h, .ld-hero-sub { position: static; width: auto !important; }
  .ld-hero-sub { padding-top: 16px; }
  .ld-hero-img { position: static; width: 100%; height: auto; aspect-ratio: 1267/645; margin-top: 28px; border-radius: 14px; }
  .ld-hero-btn { margin-top: 28px; }

  .ld-welcome { display: flex; flex-direction: column; padding: 48px 24px; }
  .ld-wel-h, .ld-wel-b { position: static; width: auto !important; text-align: center; }
  .ld-wel-b { padding-top: 16px; }
  .ld-col-1, .ld-col-2, .ld-col-3 { position: static; width: 100%; height: auto; border-radius: 14px; margin-top: 16px; }
  .ld-col-1 { margin-top: 28px; }

  /* Feature strip hidden on phones too (flex flow closes the gap on its own) */
  .ld-strip { display: none; }

  .ld-best { background: var(--soft); display: flex; flex-direction: column; padding: 48px 24px; }
  .ld-best-h, .ld-best-sub { position: static; width: auto !important; }
  .ld-best-sub { padding-top: 14px; }

  /* product cards → stacked */
  .pc-grid, .pr-grid { display: flex; flex-direction: column; gap: 40px; padding-top: 36px; }
  .pcard { position: relative; display: flex; flex-direction: column; align-items: center; }
  .pc-bg { position: relative; width: 100%; max-width: 340px; height: auto; aspect-ratio: 375/376; }
  .pc-img { position: absolute; top: 4.8%; left: 16.8%; width: 71.5%; height: 91.8%; }
  .pc-name { position: static; width: auto !important; padding-top: 22px; text-align: center; }
  .pc-price { position: static; padding-top: 6px; }
  .pc-btn { position: static; width: 100%; max-width: 320px; height: 60px; margin-top: 20px; }

  /* .ld-elev-l is an EMPTY panel that only paints the teal background on desktop —
     its text is a sibling, not a child, so the padding has to live on the section. */
  .ld-elev { display: flex; flex-direction: column; background: var(--teal); }
  .ld-elev-l { display: none; }
  .ld-elev-img { position: static; width: 100%; height: auto; aspect-ratio: 734/700; order: 1; }
  .ld-elev-h { position: static; width: auto !important; order: 2; padding: 48px 24px 0; }
  .ld-elev-b { position: static; width: auto !important; order: 3; padding: 16px 24px 0; }
  .ld-elev-btn { order: 4; margin: 28px auto 48px; }

  /* ---- shared page intro ---- */
  .pr-intro, .ct-intro, .ce { display: flex; flex-direction: column; padding: 48px 24px; }
  .pr-h, .pr-sub, .ct-h, .ct-sub, .ce-h, .ce-sub { position: static; width: auto !important; }
  .pr-sub, .ct-sub, .ce-sub { padding-top: 16px; }
  .ce-btn { margin-top: 28px; }
  .pr-grid { padding: 0 24px 48px; }

  /* ---- product detail ---- */
  .pd-hero { display: flex; flex-direction: column; padding: 48px 24px; }
  .pd-hero { position: relative; }
  .pd-imgbg { position: relative; width: 100%; max-width: 340px; height: auto; aspect-ratio: 375/510; align-self: center; }
  .pd-img { position: absolute; top: 15.3%; left: 16.3%; width: 71.5%; height: 67.6%; }
  .pd-title, .pd-price, .pd-desc, .pd-selqty { position: static; width: auto !important; }
  .pd-title { padding-top: 28px; }
  .pd-price { padding-top: 4px; }
  .pd-desc { padding-top: 12px; font-size: 15px; line-height: 23px; }
  .pd-tags { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
  .pd-selqty { padding-top: 24px; font-size: 15px; }
  [data-qty-wrap] { display: flex; align-items: center; gap: 20px; padding-top: 14px; }
  .qty-btn { position: relative; top: auto; left: auto; flex: 0 0 49px; }
  .qty-num { position: static; width: 40px; }
  .pd-cart, .ck-remove { margin-top: 24px; }
  .pd-line16 { display: none; }
  .pd-rec { display: flex; flex-direction: column; padding: 16px 24px 48px; }
  .pd-rec-h, .pd-rec-s { position: static; width: auto !important; }
  .pd-rec-s { padding-top: 14px; }

  /* ---- contact ---- */
  .ct-hero { position: static; display: block !important; width: 100%; height: 220px; transform: none; left: auto; }
  .ct-form { display: flex; flex-direction: column; padding: 48px 24px; }
  .ct-form-h, .ct-form-s { position: static; width: auto !important; line-height: 1.2 !important; }
  .ct-form-s { padding-top: 14px; }
  .field { position: static; width: 100% !important; height: 60px !important; margin-top: 14px; padding: 0 18px; font-size: 15px; }
  textarea.field { height: 180px !important; padding: 18px; }
  .ct-send { margin-top: 24px; }

  /* ---- checkout ---- */
  .ck-hero { display: flex; flex-direction: column; padding: 48px 24px; }
  .ck-hero { position: relative; }
  .ck-imgbg { position: relative; width: 100%; max-width: 340px; height: auto; aspect-ratio: 375/510; align-self: center; }
  .ck-img { position: absolute; top: 15.3%; left: 16.3%; width: 71.5%; height: 67.6%; }
  .ck-ship, .ck-offers, .ck-pay { display: flex; flex-direction: column; padding: 0 24px 48px; }
  .ck-ship-h, .ck-off-h, .ck-pay-h { position: static; width: auto !important; line-height: 1.2 !important; padding-bottom: 4px; }
  .ck-ship-s { position: static; width: auto !important; padding-bottom: 8px; }
  .ck-cb1, .ck-cb2 { position: static; flex: 0 0 20px; }
  .ck-check-row { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0 4px; }
  .ck-cb1-l, .ck-agree, .ck-whatis, .ck-terms, .ck-descriptor, .ck-agree-error { position: static; width: auto !important; }
  .ck-whatis { padding-top: 12px; }
  .ck-terms { padding-top: 18px; font-size: 13px; line-height: 20px; }
  .ck-offers { gap: 0; }
  /* desktop shows name + price side-by-side; stacked they must read name → price */
  .ocard { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 24px; }
  .ocard > div { order: 1; }
  .ocard .pc-name { order: 2; padding-top: 18px; }
  .ocard .autog { order: 3; padding-top: 2px; }
  .ocard .btn-out { order: 4; }
  .ck-o1-bg, .ck-o2-bg { position: relative; width: 100%; max-width: 260px; height: auto; aspect-ratio: 204/212; }
  .ck-o1-img, .ck-o2-img { position: absolute; top: 8.5%; left: 21%; width: 64.7%; height: 80.2%; }
  .ck-o1-nm, .ck-o2-nm, .ck-o1-pr, .ck-o2-pr { position: static; width: auto !important; text-align: center; }
  .ck-o1-nm, .ck-o2-nm { padding-top: 18px; }
  .ck-o1-bt, .ck-o2-bt { position: static; width: 100%; max-width: 260px; height: 52px !important; margin-top: 16px; }
  .ck-plus-h, .ck-plus-v, .ck-line19 { display: none; }
  .ck-complete { margin-top: 24px; }
  .ck-secure { position: static; margin: 20px auto 0; }

  /* footer */
  .ftr { position: static; width: auto; height: auto; background: var(--soft); padding: 44px 24px 30px; display: flex; flex-direction: column; }
  .ftr-bg { display: none; }
  .ftr-addr, .ftr-email, .ftr-phone, .ftr-copy, .ftr-descriptor, .ftr-disc { position: static; width: auto !important; }
  .ftr-addr { padding-bottom: 14px; }
  .ftr-email { padding-bottom: 10px; }
  .ftr-phone { padding-bottom: 24px; }
  .ftr-line { position: static; width: 100%; margin-bottom: 24px; }
  .ftr-links { display: flex; flex-wrap: wrap; gap: 14px 26px; padding-bottom: 24px; position: static; width: auto; }
  .ftr-link { position: static; }
  .ftr-cards { position: static; margin-bottom: 22px; }
  .ftr-copy { padding-top: 4px; }
  .ftr-descriptor { padding-top: 10px; }
  .ftr-disc { padding-top: 12px; font-size: 13px; }

  .flow-grid { display: flex; flex-direction: column; gap: 40px; padding: 0 24px 48px; }
  .flow-card { width: 100%; }
  .legal-body { padding: 48px 24px; }
  .legal-note { padding: 8px 24px 24px; }
  .ck-lines, .ck-totals, .ck-mid { padding-left: 24px !important; padding-right: 24px !important; }
  .pg-checkout .ck-line { grid-template-columns: 1fr !important; height: auto !important; }
  .pg-checkout .ck-mid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   DYNAMIC CATALOG + CHECKOUT FLOW (PHP storefront)
   ============================================================ */
.pg-products .canvas,
.pg-legal .canvas,
.pg-checkout .canvas,
.pg-thanks .canvas {
  height: auto;
  min-height: 100vh;
}
.pg-products .pr-intro { min-height: 520px; }
.pg-products .ftr,
.pg-legal .ftr,
.pg-checkout .ftr,
.pg-thanks .ftr {
  position: relative;
  top: auto;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 375px);
  justify-content: center;
  column-gap: 42px;
  row-gap: 56px;
  padding: 0 84px 80px;
  position: relative;
}
.flow-card {
  position: relative;
  width: 375px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.flow-card .pc-bg {
  position: relative;
  top: auto;
  left: auto;
  width: 375px;
  height: 376px;
}
.flow-card .pc-img {
  position: absolute;
}
.flow-card .pc-name,
.flow-card .pc-price,
.flow-card .pc-btn {
  position: static;
  width: auto;
}
.flow-card .pc-name {
  margin-top: 22px;
  text-align: center;
  min-height: 42px;
  padding: 0 8px;
}
.flow-card .pc-price {
  text-align: center;
  line-height: 1.05;
}
.flow-card .pc-btn {
  width: 354px;
  height: 73px;
  margin: 16px auto 0;
}

.legal-body {
  padding: 200px 118px 80px;
  max-width: 1100px;
  position: relative;
}
.legal-body h1 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--ink);
}
.legal-body h3 {
  font-family: 'Mona Sans', sans-serif;
  margin: 28px 0 12px;
  font-size: 22px;
  color: var(--ink);
}
.legal-body p,
.legal-body li {
  margin-bottom: 12px;
  line-height: 1.65;
  font-size: 16px;
  color: var(--body);
}
.legal-note {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 8px 118px 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.pg-detail .pd-disc {
  position: static !important;
  grid-column: 2;
  max-width: 520px;
  margin-top: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.thank-you .btn-out { display: flex; }

.vis-check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.pg-checkout #frmOrder { position: relative; }
.pg-checkout .ck-hero,
.pg-checkout #cartBox {
  position: relative;
  padding: 40px 118px 10px;
}
.pg-checkout .ck-lines {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pg-checkout .ck-line {
  display: grid;
  grid-template-columns: 375px 1fr;
  gap: 8px 48px;
  align-items: start;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
  position: relative;
  min-height: 0;
}
.pg-checkout .ck-line .ck-imgbg {
  position: relative;
  top: auto;
  left: auto;
  grid-row: 1 / span 5;
}
.pg-checkout .ck-line .ck-img { position: absolute; }
.pg-checkout .ck-line .pd-title,
.pg-checkout .ck-line .pd-price,
.pg-checkout .ck-line .ck-qtyline,
.pg-checkout .ck-line .ck-remove {
  position: static;
  width: auto;
  top: auto;
  left: auto;
}
.pg-checkout .ck-line .pd-title { margin-top: 12px; }
.pg-checkout .ck-line .ck-remove { width: 232px; height: 73px; margin-top: 18px; }
.pg-checkout .ck-totals {
  padding: 8px 118px 32px;
}
.pg-checkout .ck-totals p { margin-bottom: 8px; }
.pg-checkout .ck-grand { font-weight: 600; }
.pg-checkout .ck-cart-actions { display: flex; gap: 28px; margin-top: 12px; }
.pg-checkout .ck-cart-actions a { text-decoration: underline; }

.pg-checkout .ck-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  padding: 20px 118px 20px;
  position: relative;
  align-items: start;
}
.pg-checkout .ck-ship,
.pg-checkout .ck-offers,
.pg-checkout .ck-pay {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.pg-checkout .ck-ship .el,
.pg-checkout .ck-offers .el,
.pg-checkout .ck-pay .el,
.pg-checkout .ck-ship .field,
.pg-checkout .ck-pay .field,
.pg-checkout .ck-ship .cbx,
.pg-checkout .ck-pay .cbx,
.pg-checkout .ck-o1-bg,
.pg-checkout .ck-o2-bg,
.pg-checkout .ck-o1-pr,
.pg-checkout .ck-o2-pr,
.pg-checkout .ck-o1-nm,
.pg-checkout .ck-o2-nm,
.pg-checkout .ck-o1-bt,
.pg-checkout .ck-o2-bt {
  position: static;
  top: auto;
  left: auto;
}
.pg-checkout .field {
  height: 83px;
}
.pg-checkout .ck-f1,
.pg-checkout .ck-f2,
.pg-checkout .ck-f3,
.pg-checkout .ck-f4 { width: calc(50% - 7px); }
.pg-checkout .ck-f5,
.pg-checkout .ck-f9,
.pg-checkout .ck-f13,
.pg-checkout .ck-f14 { width: 100%; }
.pg-checkout .ck-f6,
.pg-checkout .ck-f7,
.pg-checkout .ck-f8,
.pg-checkout .ck-f10,
.pg-checkout .ck-f11,
.pg-checkout .ck-f12,
.pg-checkout .ck-f15,
.pg-checkout .ck-f16,
.pg-checkout .ck-f17 { width: calc(33.33% - 10px); }
.pg-checkout .ck-ship-h,
.pg-checkout .ck-off-h,
.pg-checkout .ck-pay-h,
.pg-checkout .ck-ship-s,
.pg-checkout .ck-agree,
.pg-checkout .ck-cb1-l,
.pg-checkout .ck-whatis,
.pg-checkout .ck-terms,
.pg-checkout .ck-descriptor,
.pg-checkout .ck-agree-error {
  width: auto;
  max-width: 520px;
  text-align: left;
  position: static !important;
  top: auto !important;
  left: auto !important;
}
.pg-checkout .ck-check-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; }
.pg-checkout .ck-box {
  position: relative;
  top: auto !important;
  left: auto !important;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 3px;
  display: block;
  cursor: pointer;
}
.pg-checkout .ck-native {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 1;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.pg-checkout .ck-mark {
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  pointer-events: none;
}
.pg-checkout .ck-native:checked + .ck-mark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pg-checkout .ck-check-row.formError {
  background-image: none !important;
  border: none !important;
  height: auto !important;
}
.pg-checkout .ck-check-row.formError .ck-mark {
  border-color: #ff5a5a;
}
.pg-checkout .ck-descriptor {
  margin: 12px 0 8px;
  font-size: 15px;
  flex: 1 0 100%;
}
.pg-checkout .ck-agree-error {
  color: #c62828;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 14px;
  max-width: 520px;
  flex: 1 0 100%;
}
.pg-checkout .ck-agree-error[hidden] { display: none; }
.pg-checkout .ck-complete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pg-checkout .ck-billing { width: 100%; display: flex; flex-wrap: wrap; gap: 14px; }
.pg-checkout .ocard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: calc(50% - 8px);
}
.pg-checkout .ck-o1-bg,
.pg-checkout .ck-o2-bg { position: relative; }
.pg-checkout .ck-o1-img,
.pg-checkout .ck-o2-img { position: absolute; }
.pg-checkout .ck-o1-bt,
.pg-checkout .ck-o2-bt { width: 195px; height: 56px; }
.pg-checkout .ck-pay { padding: 20px 118px 60px; }
.pg-checkout .ck-complete { width: 354px; height: 73px; }
.pg-checkout .ck-secure { width: 265px; height: 36px; }
.pg-checkout .ck-plus-h,
.pg-checkout .ck-plus-v { display: none; }

select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#pop_overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
#pop_content {
  position: relative;
  max-width: 520px;
  margin: 10vh auto;
  background: #fff;
  padding: 28px;
  border-radius: 12px;
}
#pop_content .cross { cursor: pointer; margin-left: auto; margin-bottom: 12px; }
.popup-loading-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.86);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.popup-loading-wrapper .popup h3 { margin-top: 12px; font-family: 'Mona Sans', sans-serif; }
.formError { border-color: #ff5a5a !important; }

.remove-from-cart {
  font-size: 14px;
  text-decoration: underline;
  color: var(--muted);
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .pg-products .canvas,
  .pg-legal .canvas,
  .pg-checkout .canvas,
  .pg-thanks .canvas,
  .pg-detail .canvas { width: 1440px; }
}

/* Header line sits on the bar, not over page content */
.site-hdr .hdr-line { top: auto; bottom: 0; }

/* Long catalog names: wrap, do not cover SHOP NOW */
.ld-best .pc-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 72px;
  max-width: 230px !important;
  line-height: 1.2;
  font-size: 22px;
}
.flow-card .pc-name {
  font-size: 22px;
  line-height: 1.25;
  min-height: 0;
}

@media (min-width: 768px) {
  .pg-detail .canvas {
    height: auto;
    min-height: 100vh;
  }
  .pg-detail .ftr { position: relative; top: auto; }

  .pg-detail .pd-hero {
    display: grid;
    grid-template-columns: 375px minmax(0, 1fr);
    column-gap: 72px;
    row-gap: 14px;
    padding: 56px 118px 40px;
    align-items: start;
  }
  .pg-detail .pd-imgbg {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 1 / span 10;
  }
  .pg-detail .pd-title,
  .pg-detail .pd-price,
  .pg-detail .pd-desc,
  .pg-detail .pd-selqty,
  .pg-detail .pd-cart {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 520px;
  }
  .pg-detail .pd-title {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 0.2px;
  }
  .pg-detail .pd-price {
    font-size: 40px;
    line-height: 1.1;
  }
  .pg-detail .pd-desc {
    font-size: 16px;
    line-height: 1.5;
  }
  .pg-detail .pd-desc span {
    display: block;
    font-weight: 600;
    margin: 10px 0 4px;
  }
  .pg-detail .pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 520px;
  }
  .pg-detail .pd-tags .tag {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100%;
    height: auto;
    white-space: normal;
    padding: 8px 16px;
  }
  .pg-detail .pd-selqty { margin-top: 6px; font-size: 15px; }
  .pg-detail [data-qty-wrap] {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .pg-detail .qty-btn,
  .pg-detail .qty-num {
    position: relative;
    top: auto !important;
    left: auto !important;
  }
  .pg-detail .pd-cart {
    width: 232px;
    height: 73px;
    margin-top: 10px;
  }
  .pg-detail .pd-line16 { display: none; }
  .pg-detail .pd-rec { padding: 12px 0 80px; }
  .pg-detail .pd-rec-h,
  .pg-detail .pd-rec-s {
    position: static;
    width: auto !important;
    text-align: center;
    margin: 0 auto 10px;
    padding: 0 80px;
  }
  .pg-detail .pd-rec-h { font-size: 42px; line-height: 1.2; }

  .pg-checkout .ck-hero,
  .pg-checkout #cartBox {
    padding: 48px 118px 16px;
  }
  .pg-checkout .ck-line {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px 40px;
    align-items: start;
  }
  .pg-checkout .ck-line .ck-imgbg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 280px;
    height: 380px;
  }
  .pg-checkout .ck-line .ck-img {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: auto;
    max-height: 340px;
    object-fit: contain;
  }
  .pg-checkout .ck-line-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 12px;
  }
  .pg-checkout .ck-line-title {
    font-size: 28px;
    line-height: 1.25;
    max-width: 520px;
  }
  .pg-checkout .ck-line-price {
    font-size: 36px;
    line-height: 1.1;
  }
  .pg-checkout .ck-qtyline { font-size: 16px; }
  .pg-checkout .ck-line .ck-remove {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 232px;
    height: 73px;
    margin-top: 8px;
  }
}

@media (max-width: 767px) {
  .pg-detail .pd-hero {
    display: flex;
    flex-direction: column;
    padding: 48px 24px;
  }
  .pg-detail .pd-title { font-size: 26px; line-height: 1.25; }
  .pg-checkout .ck-line-info { padding-top: 16px; }
  .pg-checkout .ck-line-title { font-size: 24px; line-height: 1.25; }
  .thanks-wrap { padding: 48px 24px 80px; }
  .thanks-h { font-size: 36px; }
  .thanks-btn { width: 100%; max-width: 320px; }
}

/* Thank you */
.thanks-wrap {
  position: relative;
  padding: 72px 118px 120px;
  max-width: 760px;
}
.thanks-h {
  position: static;
  font-size: 56px;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--ink);
}
.thanks-wrap p {
  position: static;
  margin-bottom: 14px;
  max-width: 560px;
}
.thanks-btn {
  position: static;
  width: 354px;
  height: 73px;
  margin-top: 28px;
}