:root{
  --bg:#F2F3F5;
  --surface:#FFFFFF;
  --ink:#17181A;
  --ink-soft:#6B7280;
  --primary:#17181A;
  --primary-dark:#000000;
  --accent-red:#E0201B;
  --accent-blue:#2F6FED;
  --accent-blue-soft:#E8F0FE;
  --alert:#C0392B;
  --alert-soft:#FBE4E1;
  --line:#E5E7EB;
  --radius:8px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.5;}
h1,h2,h3,.brand{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:15px;}
a{color:inherit;}

/* ---------------- Top bar & hamburger nav ---------------- */
.topbar{background:var(--surface);color:var(--ink);padding:14px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);}
.hamburger{background:none;border:1px solid var(--line);border-radius:var(--radius);width:38px;height:38px;font-size:18px;line-height:1;color:var(--ink);flex-shrink:0;}
.hamburger:hover{background:var(--bg);}
.brand{font-size:18px;font-weight:800;letter-spacing:-0.2px;margin:0;}
.brand small{display:block;font-family:inherit;font-size:12px;font-weight:400;color:var(--ink-soft);margin-top:1px;}
.topbar-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.cart-pill{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:9px 14px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;}
.icon-link{color:var(--ink-soft);font-size:13px;text-decoration:none;border-bottom:1px dotted var(--line);padding-bottom:2px;}
.icon-link:hover{color:var(--ink);}

.nav-backdrop{position:fixed;inset:0;background:rgba(15,15,15,0.45);display:none;z-index:80;}
.nav-backdrop.open{display:block;}
.nav-drawer{position:fixed;top:0;left:0;height:100%;width:min(300px,85%);background:var(--surface);z-index:81;transform:translateX(-100%);transition:transform 0.25s ease;display:flex;flex-direction:column;}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.nav-drawer-links{display:flex;flex-direction:column;padding:6px 0;}
.nav-drawer-links a{padding:14px 20px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.nav-drawer-links a:hover{background:var(--bg);}
.nav-drawer-links a.active{color:var(--accent-red);}

.wrap{max-width:1080px;margin:0 auto;padding:20px 20px 80px;}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.section-head h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-0.2px;}
.muted{color:var(--ink-soft);font-size:13px;}

/* ---------------- Search + filter/sort bar ---------------- */
.search-bar{display:flex;gap:8px;margin-bottom:14px;}
.search-bar input{flex:1;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;}
.search-btn{white-space:nowrap;}

.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.filter-bar .category-pills{margin-bottom:0;flex:1;}
.category-pills{display:flex;gap:8px;flex-wrap:wrap;}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.pill.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.sort-select{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-soft);}

/* ---------------- Product grid & cards ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow 0.15s ease, transform 0.15s ease;}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-1px);}
.swatch{width:100%;min-height:130px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden;}
.swatch img{max-width:100%;max-height:280px;width:auto;height:auto;object-fit:contain;display:block;}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card h3{margin:0;font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .desc{color:var(--ink-soft);font-size:12px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.cat-badge{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent-blue);border:1px solid var(--accent-blue);border-radius:4px;padding:2px 6px;align-self:flex-start;}
.link-btn{background:none;border:none;padding:0;text-align:left;color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;}
.link-btn:hover{text-decoration:underline;}
.price-row{display:flex;align-items:center;justify-content:space-between;}
.price{font-weight:800;font-size:16px;color:var(--ink);}
.stock-note{font-size:11px;color:var(--ink-soft);}
.discount-note{font-size:11px;font-weight:700;color:#2b7a3d;background:#eafaf0;display:inline-block;padding:3px 8px;border-radius:999px;margin-top:2px;}
.stock-note.low{color:var(--alert);font-weight:600;}
.stock-note.out{color:var(--alert);}
.qty-row{display:flex;align-items:center;gap:8px;margin-top:2px;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.stepper button{background:var(--surface);border:none;width:28px;height:28px;font-size:16px;color:var(--ink);}
.stepper span{width:28px;text-align:center;font-size:14px;}

.rec-row{margin-bottom:26px;}

/* ---------------- Modern buttons ----------------
   Solid dark for primary actions; outlined "ghost" style for secondary /
   card-level actions, similar to the reference screenshot's button. */
.btn{background:var(--btn-green);color:var(--btn-green-ink);border:1px solid var(--btn-green);border-radius:999px;padding:10px 16px;font-weight:600;font-size:14px;transition:all 0.15s ease;}
.btn:hover{background:var(--btn-green-hover);border-color:var(--btn-green-hover);}
.btn.full{width:100%;}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#fff;}
.btn.alert{background:var(--alert);border-color:var(--alert);}
.btn.small{padding:7px 12px;font-size:12.5px;border-radius:999px;}
.btn:disabled{background:#D1D5DB;border-color:#D1D5DB;color:#6B7280;cursor:not-allowed;}

.cart-fab{position:fixed;bottom:20px;right:20px;box-shadow:0 6px 18px rgba(0,0,0,0.25);border-radius:999px;padding:12px 20px;}

/* ---------------- Slide-in drawers (cart / reviews) ---------------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,15,15,0.45);display:none;z-index:50;}
.drawer-backdrop.open{display:block;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--surface);z-index:51;transform:translateX(100%);transition:transform 0.25s ease;display:flex;flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.drawer-body{padding:16px 20px;overflow-y:auto;flex:1;}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);}
.cart-line{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;}
.cart-line .name{font-weight:600;}
.close-x{background:none;border:none;font-size:20px;color:var(--ink-soft);}

.field{margin-bottom:12px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.field textarea{resize:vertical;min-height:60px;}
.total-row{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:12px;}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:90;}

.login-wrap{max-width:360px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.login-wrap h2{margin-top:0;}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.tabbar button{background:none;border:none;padding:10px 14px;font-weight:700;font-size:14px;color:var(--ink-soft);border-bottom:2px solid transparent;}
.tabbar button.active{color:var(--ink);border-color:var(--accent-red);}
table{width:100%;border-collapse:collapse;background:var(--surface);}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;}
th{color:var(--ink-soft);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;}
.badge.new{background:var(--accent-blue-soft);color:var(--accent-blue);}
.badge.contacted{background:#F3F4F6;color:var(--ink);}
.badge.delivered{background:var(--ink);color:#fff;}
.badge.cancelled{background:var(--alert-soft);color:var(--alert);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.top-admin-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.empty-state{padding:40px 20px;text-align:center;color:var(--ink-soft);}
select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
footer{max-width:1080px;margin:0 auto;padding:0 20px 40px;font-size:12px;color:var(--ink-soft);}
footer a{color:inherit;font-weight:600;}
.error-text{color:var(--alert);font-size:13px;margin-top:8px;}

.review-item{padding:10px 0;border-bottom:1px solid var(--line);}
.review-item:last-child{border-bottom:none;}
.review-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:10px;}

.contact-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .icon{font-size:20px;width:28px;text-align:center;}

/* ---------------- Desktop-friendly layout ---------------- */
@media (min-width: 720px) {
  .topbar{padding:16px 40px;}
  .wrap{padding:32px 40px 90px;}
  footer{padding:0 40px 48px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;}
  .swatch{min-height:170px;}
  .swatch img{max-height:300px;}
  .form-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .panel{padding:24px;}
  .login-wrap{max-width:420px;}
  table{font-size:15px;}
  .search-bar{max-width:480px;}
}

@media (min-width: 1200px) {
  .wrap{max-width:1280px;}
  footer{max-width:1280px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;}
}

@media (min-width: 720px) and (max-width: 1023px) {
  .drawer{width:min(420px,100%);}
}

/* ================= STOREFRONT POLISH ================= */
:root{
  --bg:#f7f7f5;
  --surface:#ffffff;
  --ink:#111315;
  --ink-soft:#687078;
  --line:#e7e8e6;
  --accent-red:#e0201b;
  --accent-blue:#2f6fed;
  --radius:14px;
  --btn-green:#A7E8BD;
  --btn-green-hover:#8ED9AA;
  --btn-green-ink:#153D27;
  --hero-green-a:#EAFBF0;
  --hero-green-b:#BDEFCB;
  --hero-green-ink:#153D27;
}
body{background:var(--bg);color:var(--ink);}
.topbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);padding:13px 20px;box-shadow:0 1px 0 rgba(17,19,21,.05);}
.hamburger{border-radius:11px;width:42px;height:42px;transition:.18s ease;}
.hamburger:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.08);}
.brand{font-size:19px;letter-spacing:-.45px;}
.wrap{max-width:1240px;padding:24px 20px 76px;}

.store-hero{position:relative;overflow:hidden;min-height:340px;margin:4px 0 24px;padding:44px 42px;border-radius:24px;background:linear-gradient(135deg,var(--hero-green-a) 0%,var(--hero-green-b) 100%);color:var(--hero-green-ink);display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:0 18px 45px rgba(21,61,39,.13);}
.store-hero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-130px;top:-170px;border:1px solid rgba(21,61,39,.08);box-shadow:0 0 0 70px rgba(21,61,39,.025),0 0 0 140px rgba(21,61,39,.018);}
.store-hero-copy{position:relative;z-index:2;max-width:650px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.13em;color:#1f7a43;}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--accent-red);border-radius:2px;}
.store-hero h1{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-2.2px;font-weight:800;}
.store-hero h1 span{color:var(--hero-green-ink);}
.store-hero p{max-width:520px;margin:17px 0 23px;color:#356449;font-size:15px;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-primary{background:#fff;color:var(--hero-green-ink);border-color:#fff;padding:12px 20px;}
.hero-primary:hover{background:#f0f1f2;border-color:#f0f1f2;}
.hero-secondary{background:transparent;color:var(--hero-green-ink);border-color:rgba(21,61,39,.35);padding:12px 20px;}
.hero-secondary:hover{background:var(--hero-green-ink);color:#fff;border-color:var(--hero-green-ink);}
.store-hero-art{position:relative;z-index:1;width:310px;height:250px;flex:0 0 310px;display:flex;align-items:center;justify-content:center;}
.hero-card{width:185px;height:215px;border-radius:20px;background:#fff;border:1px solid rgba(21,61,39,.14);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;box-shadow:0 25px 50px rgba(21,61,39,.18);transform:rotate(5deg);}
.hero-card span{font-size:10px;letter-spacing:.14em;color:#2f7a49;font-weight:800;}
.hero-card strong{font-size:24px;line-height:1.05;margin:8px 0;color:var(--hero-green-ink);}
.hero-card small{color:#4b6b57;font-size:11px;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);border:1px solid rgba(21,61,39,.12);}
.hero-orb-one{width:180px;height:180px;right:38px;top:20px;background:rgba(224,32,27,.12);}
.hero-orb-two{width:105px;height:105px;left:28px;bottom:10px;background:rgba(47,111,237,.12);}

.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:30px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 25px rgba(17,19,21,.04);}
.trust-strip>div{background:#fff;padding:17px 15px;display:flex;align-items:center;gap:11px;min-width:0;}
.trust-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1f3f4;color:#111315;font-weight:800;flex:0 0 34px;}
.trust-strip strong{display:block;font-size:12.5px;line-height:1.25;}
.trust-strip small{display:block;margin-top:3px;color:var(--ink-soft);font-size:10.5px;line-height:1.25;}

.search-bar{max-width:none;margin-bottom:12px;gap:10px;}
.search-bar input{height:46px;padding:11px 18px;border-radius:13px;border-color:#dedfdd;box-shadow:0 2px 8px rgba(17,19,21,.03);}
.search-bar input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#aeb4b9;box-shadow:0 0 0 3px rgba(47,111,237,.08);}
.search-btn{height:46px;border-radius:13px;padding:0 17px;}
.filter-bar{padding-bottom:4px;margin-bottom:24px;}
.category-pills{gap:7px;}
.pill{padding:8px 15px;border-radius:999px;background:#fff;transition:.16s ease;}
.pill:hover{border-color:#bfc3c6;transform:translateY(-1px);}
.pill.active{box-shadow:0 5px 14px rgba(17,19,21,.12);}
.sort-select{height:38px;border-radius:10px;background:#fff;color:var(--ink);}
.section-head{margin-bottom:15px;}
.section-head h2{font-size:21px;letter-spacing:-.45px;}

.grid{gap:17px;}
.card{border-color:#e4e5e3;border-radius:16px;box-shadow:0 3px 12px rgba(17,19,21,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(17,19,21,.1);border-color:#d9dbd9;}
.swatch{min-height:190px;background:linear-gradient(145deg,#f7f7f6,#eeeeec);}
.swatch img{max-height:250px;mix-blend-mode:multiply;transition:transform .25s ease;}
.card:hover .swatch img{transform:scale(1.035);}
.card-body{padding:13px 14px 15px;gap:7px;}
.cat-badge{border:none;background:#f1f4ff;color:#2b62cf;border-radius:999px;padding:4px 8px;font-size:10px;}
.card h3{font-size:14.5px;line-height:1.3;}
.card .desc{font-size:12px;line-height:1.4;}
.detail-link{font-size:11.5px;font-weight:700;color:#6b7278;}
.product-actions{border-top:1px solid #f0f0ef;}
.price{font-size:18px;letter-spacing:-.3px;}
.stock-note{font-size:10.5px;}
.btn{min-height:40px;border-radius:11px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(17,19,21,.12);}
.btn.small{min-height:34px;border-radius:9px;}
.btn.ghost{background:#fff;}
.btn.full{width:100%;}

.panel{border-radius:16px;border-color:#e3e4e2;box-shadow:0 5px 18px rgba(17,19,21,.035);}
.product-detail{padding:22px;gap:30px;}
.product-detail-media{border-radius:16px;background:linear-gradient(145deg,#f7f7f6,#eeeeec);overflow:hidden;}
.product-detail-media img{max-height:500px;}
.product-detail-info h1{font-size:clamp(28px,4vw,42px);letter-spacing:-1.1px;}
.product-detail-price{font-size:27px;font-weight:800;letter-spacing:-.6px;}
.product-detail-actions{margin-top:22px;}

.empty-state{background:#fff;border:1px dashed #d8dad8;border-radius:16px;padding:55px 20px;}
footer{max-width:1240px;padding:0 20px 42px;}
.footer-note{margin-top:8px;}
.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px;}
.social-links a{padding:7px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:#fff;}

@media (max-width:900px){
  .store-hero{min-height:300px;padding:34px 30px;}
  .store-hero-art{width:240px;flex-basis:240px;transform:scale(.88);margin-right:-18px;}
  .trust-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:719px){
  .topbar{padding:11px 14px;}
  .wrap{padding:15px 14px 62px;}
  .store-hero{min-height:0;padding:30px 23px 28px;border-radius:20px;margin-top:0;}
  .store-hero h1{font-size:38px;letter-spacing:-1.5px;}
  .store-hero p{font-size:13px;margin:13px 0 19px;}
  .store-hero-art{display:none;}
  .hero-actions .btn{flex:1;min-width:130px;}
  .trust-strip{grid-template-columns:1fr 1fr;border-radius:13px;margin-bottom:22px;}
  .trust-strip>div{padding:13px 10px;gap:8px;}
  .trust-icon{width:30px;height:30px;flex-basis:30px;border-radius:8px;font-size:12px;}
  .trust-strip strong{font-size:11px;}
  .trust-strip small{font-size:9.5px;}
  .search-bar{position:relative;}
  .search-bar input{height:44px;}
  .search-btn{height:44px;}
  .filter-bar{align-items:flex-start;}
  .category-pills{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;}
  .category-pills::-webkit-scrollbar{display:none;}
  .pill{white-space:nowrap;}
  .sort-select{width:100%;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .swatch{min-height:150px;}
  .card-body{padding:10px 10px 12px;}
  .card h3{font-size:13px;}
  .price{font-size:16px;}
  .btn{min-height:38px;padding:9px 12px;}
  .product-detail{padding:12px;}
  .product-detail-media{min-height:270px;}
  footer{padding:0 14px 30px;}
}
@media (max-width:390px){
  .grid{gap:8px;}
  .swatch{min-height:135px;}
  .store-hero h1{font-size:34px;}
}

/* ---------------- Dedicated Order Now checkout ---------------- */
.checkout-page{max-width:1080px;margin:0 auto;}
.checkout-layout{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:20px;align-items:start;margin-top:16px;}
.order-summary-card{position:sticky;top:16px;}
.checkout-product{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--line);min-width:0;}
.checkout-product-image{width:120px;height:120px;flex:0 0 120px;border-radius:14px;background:#f5f5f4;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.checkout-product-image img{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%;}
.checkout-product-image span{font-size:42px;}
.checkout-product>div:last-child{min-width:0;}
.checkout-product h3{margin:7px 0 5px;font-size:17px;line-height:1.3;overflow-wrap:anywhere;}
.checkout-total{padding-top:12px;border-top:1px solid var(--line);font-size:18px;}
.payment-note{background:#f7f8fa;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.payment-note strong{color:var(--ink);}
.qty-selector{display:flex;align-items:center;width:max-content;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;}
.qty-selector button{width:42px;height:40px;border:0;background:#fff;font-size:20px;color:var(--ink);}
.qty-selector button:hover:not(:disabled){background:#f2f3f5;}
.qty-selector button:disabled{color:#b7bbc0;cursor:not-allowed;}
.qty-selector input{width:58px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;outline:none;}
.checkout-submit{margin-top:6px;min-height:46px;font-size:15px;}
.agreement-check{display:flex;align-items:flex-start;gap:8px;margin:12px 0 14px;font-size:13px;line-height:1.45;color:var(--ink-soft);}
.agreement-check input{margin-top:3px;flex:0 0 auto;}

@media (max-width:719px){
  .checkout-layout{grid-template-columns:1fr;gap:12px;margin-top:12px;}
  .order-summary-card{position:static;}
  .checkout-product{align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;}
  .checkout-product-image{width:86px;height:86px;flex-basis:86px;border-radius:12px;}
  .checkout-product-image span{font-size:32px;}
  .checkout-product h3{font-size:15px;margin:5px 0 3px;}
  .checkout-product .price{font-size:16px;}
  .checkout-page .panel{padding:14px;}
  .checkout-page .form-grid{grid-template-columns:1fr;gap:0;}
  .checkout-page .section-head{margin-bottom:10px;}
  .checkout-page .section-head h2{font-size:20px;}
  .checkout-page .muted{font-size:12px;}
}

@media (max-width:390px){
  .checkout-product-image{width:76px;height:76px;flex-basis:76px;}
  .checkout-product h3{font-size:14px;}
  .checkout-page .panel{padding:12px;}
}

/* Product detail image: keep the dedicated order/product view inside the mobile viewport. */
@media (max-width:719px){
  .product-detail{grid-template-columns:1fr;padding:10px;gap:14px;}
  .product-detail-media{width:100%;height:min(62vw,300px);min-height:0;max-height:300px;border-radius:14px;}
  .product-detail-media img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;}
  .product-detail-emoji{font-size:70px;padding:20px;}
  .product-detail-info h1{font-size:25px;line-height:1.15;}
  .product-detail-price{font-size:22px;}
}