/* ===== 3D Pop-up Card Finland — brand system =====
   Ported pixel-for-pixel from the Claude Design React prototype
   (Project May-handoff.zip · assets/styles.css). Fonts are loaded via the
   <link> in layout.php (Poppins + Nunito only — Quicksand/Fredoka/Baloo are
   prototype-only and intentionally dropped). Tweaks panel / image-slot removed. */
:root{
  --cream-bg:#FFFBF3;     /* large surfaces */
  --cream-card:#EFDDC2;   /* card & section fills */
  --cream-soft:#F7EEDD;   /* subtle fill */
  --yellow:#FEDD59;       /* brand accent — small joyful touches */
  --yellow-deep:#F6CF2E;
  --coral:#F45956;        /* CTA */
  --coral-dark:#A63327;   /* CTA hover */
  --espresso:#2A1F19;     /* text */
  --espresso-60:#6c5d51;
  --espresso-40:#9a8c7f;
  --blue:#3E5479;         /* sparing secondary accent */
  --line:#E6D6BC;
  --white:#ffffff;

  --r:16px;
  --r-sm:11px;
  --shadow-sm:0 2px 8px rgba(42,31,25,.07);
  --shadow:0 10px 30px -12px rgba(42,31,25,.22);
  --shadow-lg:0 22px 50px -20px rgba(42,31,25,.30);
  --head:'Poppins',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --maxw:460px;
}

*{box-sizing:border-box;}
/* The `hidden` attribute must always win, even over class rules that set
   display:flex (mobile drawer, category dropdown, pickup note, summary rows…).
   Without this, those elements would show on load and the drawer overlay would
   sit on top of the page and swallow clicks. */
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--body);
  color:var(--espresso);
  background:#efe6d6;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.12;letter-spacing:-.01em;color:var(--espresso);}
button{font-family:var(--body);cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
input,textarea,select{font-family:var(--body);font-size:16px;color:var(--espresso);}

/* ---- the phone-style app shell ---- */
#root{min-height:100vh;display:flex;justify-content:center;}
.app{
  width:100%;max-width:var(--maxw);background:var(--cream-bg);
  min-height:100vh;position:relative;overflow-x:hidden;
  box-shadow:0 0 70px -20px rgba(42,31,25,.35);
  display:flex;flex-direction:column;
}
@media(min-width:600px) and (max-width:899px){
  body{padding:24px 0;background:#e7dcc9;}
  .app{min-height:calc(100vh - 48px);border-radius:30px;overflow:hidden;}
}

.screen{flex:1;padding-bottom:34px;animation:fade .32s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--head);font-weight:600;font-size:15px;border-radius:999px;
  padding:13px 22px;transition:transform .12s ease,background .18s ease,box-shadow .18s ease;
  white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-cta{background:var(--coral);color:#fff;box-shadow:0 8px 18px -8px rgba(244,89,86,.7);}
.btn-cta:hover{background:var(--coral-dark);}
.btn-full{width:100%;}
.btn-ghost{background:var(--cream-card);color:var(--espresso);}
.btn-ghost:hover{background:#e4d0b1;}
.btn-outline{background:transparent;border:1.6px solid var(--espresso);color:var(--espresso);}
.btn-outline:hover{background:var(--espresso);color:#fff;}
.btn-sm{padding:10px 16px;font-size:13.5px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ---- generic ---- */
.wrap{padding:0 18px;}
/* .wrap's shorthand would otherwise zero out .screen's padding-bottom when both
   classes share an element — keep breathing room above the footer. */
.screen.wrap{padding-bottom:20px;}
.badge-pill{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);
  color:var(--espresso);font-family:var(--head);font-weight:700;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;}
.muted{color:var(--espresso-60);}
.price{font-family:var(--head);font-weight:700;}
.icn{display:inline-flex;vertical-align:middle;}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,251,243,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hdr-row{display:flex;align-items:center;gap:11px;padding:11px 16px;}
.hdr-logo{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;
  box-shadow:var(--shadow-sm);background:var(--yellow);}
.hdr-name{font-family:var(--head);font-weight:800;font-size:14.5px;line-height:1.05;letter-spacing:-.01em;}
.hdr-name span{display:block;font-weight:600;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--espresso-40);margin-top:2px;}
.hdr-cart{margin-left:auto;position:relative;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--cream-card);flex:none;}
.hdr-cart:hover{background:#e4d0b1;}
.cart-count{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  background:var(--coral);color:#fff;border-radius:999px;font-family:var(--head);font-weight:700;
  font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream-bg);}
.cart-count[hidden]{display:none;}
.nav{display:flex;flex-wrap:wrap;gap:6px;padding:2px 14px 11px;}
.nav a{font-family:var(--head);font-weight:600;font-size:13px;color:var(--espresso-60);
  padding:7px 13px;border-radius:999px;white-space:nowrap;transition:.15s;}
.nav a.on{background:var(--espresso);color:#fff;}
.nav a:hover:not(.on){background:var(--cream-soft);color:var(--espresso);}

/* ---- footer ---- */
.ftr{background:var(--espresso);color:#f3e7d6;padding:30px 20px 26px;}
.ftr h4{color:#fff;font-size:15px;margin-bottom:4px;}
.ftr .socials{display:flex;gap:10px;margin:16px 0 18px;}
.ftr .socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;transition:.18s;}
.ftr .socials a:hover{background:var(--yellow);color:var(--espresso);}
.ftr-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:#c9b8a4;}
.ftr-links a:hover{color:#fff;}
.ftr-bottom{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;color:#9c8a76;}
.ftr-bottom a{display:block;margin-top:6px;color:#7d6c58;font-weight:600;}

/* ---- product cards ---- */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.card .ph{position:relative;aspect-ratio:1/1;background:var(--cream-soft);overflow:hidden;cursor:pointer;}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:8px;}
.card .ph .tag{position:absolute;top:8px;left:8px;}
.card .body{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1;gap:7px;}
.card h3{font-size:14px;font-weight:700;line-height:1.18;cursor:pointer;}
.card .desc{font-size:12px;color:var(--espresso-60);line-height:1.35;flex:1;}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.card .price{font-size:15.5px;}
.card .acts{display:flex;gap:7px;margin-top:3px;}
.card .acts .btn{flex:1;padding:9px 8px;font-size:12.5px;}

/* ---- quantity stepper ---- */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;}
.qty button{width:38px;height:38px;font-size:19px;font-weight:600;color:var(--espresso);display:flex;align-items:center;justify-content:center;}
.qty button:hover{background:var(--cream-soft);}
.qty span{min-width:34px;text-align:center;font-family:var(--head);font-weight:700;font-size:15px;}

/* ---- forms ---- */
.field{margin-bottom:13px;}
.field label{display:block;font-family:var(--head);font-weight:600;font-size:13px;margin-bottom:5px;}
.field label .opt{color:var(--espresso-40);font-weight:500;}
.field input,.field textarea,.field select{width:100%;padding:12px 13px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#fff;outline:none;transition:.16s;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(62,84,121,.13);}
.field textarea{resize:vertical;min-height:74px;}
.field.err input,.field.err textarea{border-color:var(--coral);box-shadow:0 0 0 3px rgba(244,89,86,.13);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.check{display:flex;gap:11px;align-items:flex-start;background:var(--cream-soft);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;cursor:pointer;}
.check input{margin-top:2px;width:18px;height:18px;accent-color:var(--coral);flex:none;}
.check .t{font-size:13px;line-height:1.4;}
.form-error{color:var(--coral-dark);font-size:13px;font-weight:600;}

/* ---- section heading ---- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin:26px 0 13px;}
.sec-head h2{font-size:20px;font-weight:700;}
.sec-head a{font-family:var(--head);font-weight:600;font-size:13px;color:var(--coral);}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--espresso);color:#fff;padding:12px 18px;border-radius:999px;font-family:var(--head);
  font-weight:600;font-size:13.5px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:.28s cubic-bezier(.2,.9,.3,1.2);z-index:200;display:flex;align-items:center;gap:9px;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .dot{width:18px;height:18px;border-radius:50%;background:var(--yellow);color:var(--espresso);
  display:flex;align-items:center;justify-content:center;font-size:12px;}

/* ---- order status stepper ---- */
.stepper{display:flex;flex-direction:column;gap:0;margin:6px 0;}
.step{display:flex;gap:14px;position:relative;}
.step .rail{display:flex;flex-direction:column;align-items:center;flex:none;width:38px;}
.step .dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--line);color:var(--espresso-40);flex:none;z-index:1;transition:.25s;}
.step .bar{width:3px;flex:1;background:var(--line);min-height:18px;transition:.25s;}
.step:last-child .bar{display:none;}
.step .txt{padding-bottom:18px;padding-top:7px;}
.step .txt .t{font-family:var(--head);font-weight:700;font-size:14.5px;}
.step .txt .h{font-size:12.5px;color:var(--espresso-60);margin-top:2px;}
.step.done .dot{background:#3a9b5c;border-color:#3a9b5c;color:#fff;}
.step.done .bar{background:#3a9b5c;}
.step.active .dot{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 0 0 5px rgba(244,89,86,.16);}
.step.active .txt .t{color:var(--coral-dark);}
.step.cancelled .dot{background:#b34842;border-color:#b34842;color:#fff;}

/* ---- status badges ---- */
.st{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-weight:700;font-size:11.5px;
  padding:4px 10px;border-radius:999px;letter-spacing:.01em;white-space:nowrap;}
.st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;}
.st-pending{background:#FCEFD2;color:#9a6b14;}
.st-paid{background:#DCE7F4;color:#2f5485;}
.st-shipped{background:#D8EFDD;color:#226b3b;}
.st-cancelled{background:#EDE3DE;color:#8a534c;}
.st-returned{background:#E7E0F0;color:#5b4b8a;}

/* ---- cart / summary helpers (server-rendered) ---- */
.sum{background:var(--cream-card);border-radius:var(--r);padding:16px 17px;margin-top:14px;}
.sum .ln{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0;}
.sum .ln .lbl{color:var(--espresso-60);}
.sum .ln.disc .lbl{color:#2f8a4e;font-weight:600;}
.sum .ln.disc .val{color:#2f8a4e;font-weight:700;}
.sum .sep{border-top:1px dashed #cdb88f;margin:10px 0;}
.sum .grand{display:flex;justify-content:space-between;align-items:baseline;}
.sum .grand .t{font-family:var(--head);font-weight:700;font-size:16px;}
.sum .grand .v{font-family:var(--head);font-weight:700;font-size:22px;}
.cart-item{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--shadow-sm);}
.cart-item img{width:76px;height:76px;border-radius:var(--r-sm);object-fit:contain;background:var(--cream-soft);flex:none;cursor:pointer;}
.cart-item .ttl{display:flex;justify-content:space-between;gap:8px;}
.cart-item h3{font-size:14px;font-family:var(--head);font-weight:700;line-height:1.2;}
.cart-item .rm{color:var(--espresso-40);flex:none;}
.cart-item .rm:hover{color:var(--coral);}
.ship-opts{display:flex;gap:10px;}
.ship-opt{flex:1;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;transition:.14s;cursor:pointer;}
.ship-opt.on{background:var(--cream-soft);border:2px solid var(--coral);box-shadow:0 0 0 3px rgba(244,89,86,.10);}
.ship-opt .top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ship-opt .nm{display:flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;font-size:14px;}
.ship-opt .rb{width:18px;height:18px;border-radius:999px;flex:none;border:2px solid var(--espresso-40);}
.ship-opt.on .rb{border:5px solid var(--coral);}
.ship-opt .ds{font-size:12px;color:var(--espresso-60);margin-top:5px;}
.ship-opt .pr{font-family:var(--head);font-weight:700;font-size:14.5px;margin-top:6px;color:var(--coral);}
.ship-opt.pickup .pr{color:#3a9b5c;}
.note-blue{display:flex;gap:11px;align-items:flex-start;background:#EAF2FB;border:1px solid #BFD2E8;
  border-radius:var(--r-sm);padding:13px 14px;margin-top:12px;}
.note-blue .ic{color:var(--blue);flex:none;margin-top:1px;}
.note-blue .t{font-family:var(--head);font-weight:700;color:var(--espresso);font-size:13px;}
.note-blue .h{margin-top:3px;color:var(--espresso-60);font-size:13px;line-height:1.45;}
.disc-row{margin-top:14px;display:flex;gap:8px;}
.disc-row input{flex:1;padding:12px 13px;border-radius:var(--r-sm);background:#fff;outline:none;
  text-transform:uppercase;border:1.5px solid var(--line);}
.disc-row input.err{border-color:var(--coral);}
.disc-applied{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#E4F3E8;border:1px solid #B6DDC1;border-radius:var(--r-sm);padding:11px 13px;font-size:13.5px;}
.disc-applied .rm{display:flex;align-items:center;gap:5px;font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--coral-dark);}
.disc-msg{color:var(--coral-dark);font-size:12.5px;font-weight:600;margin:8px 0 0;}
.label-strong{font-family:var(--head);font-weight:700;font-size:14px;margin-bottom:9px;}
.empty-ring{width:78px;height:78px;border-radius:50%;background:var(--cream-card);display:flex;
  align-items:center;justify-content:center;color:var(--espresso-40);}

/* ---- product detail ---- */
.pdp{display:block;}
.pdp-info{margin-top:16px;}
.pdp-media .frame{border-radius:var(--r);overflow:hidden;background:var(--cream-soft);box-shadow:var(--shadow);}
.pdp-media img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:16px;}
.spec{background:var(--cream-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:16px;}
.spec .r{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:13.5px;}
.spec .r .k{color:var(--espresso-60);}
.spec .r .v{font-weight:600;text-align:right;}
.gifts{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-top:16px;box-shadow:var(--shadow-sm);}
.gifts .hd{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.gifts .hd h3{font-size:15.5px;font-weight:700;}
.gifts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.gifts li{display:flex;gap:10px;align-items:flex-start;}
.gifts li .ck{flex:none;width:20px;height:20px;border-radius:999px;background:var(--yellow);color:var(--espresso);
  display:flex;align-items:center;justify-content:center;margin-top:1px;}
.gifts li span:last-child{font-size:13.5px;line-height:1.45;color:var(--espresso-60);}

/* ---- hero / value props ---- */
.hero{display:flex;flex-direction:column;gap:16px;padding:22px 18px 8px;}
.hero-h1{font-size:31px;margin-top:14px;line-height:1.08;}
.hero-p{font-size:15px;color:var(--espresso-60);margin:12px 0 18px;max-width:360px;}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;}
.hero-media .frame{border-radius:var(--r);overflow:hidden;background:var(--cream-card);box-shadow:var(--shadow);position:relative;}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.hero-cap{position:absolute;left:12px;bottom:12px;background:rgba(255,251,243,.94);border-radius:12px;padding:9px 13px;box-shadow:var(--shadow-sm);}
.hero-cap .t{font-family:var(--head);font-weight:700;font-size:13px;}
.hero-cap .h{font-size:12px;color:var(--espresso-60);}
.value-props{display:flex;gap:9px;margin-top:16px;}
.value-props .vp{flex:1;background:var(--cream-soft);border-radius:var(--r-sm);padding:12px 8px;text-align:center;border:1px solid var(--line);}
.value-props .vp .ic{color:var(--coral);display:flex;justify-content:center;}
.value-props .vp .t{font-family:var(--head);font-weight:600;font-size:12px;margin-top:6px;}
.nl-strip{background:var(--yellow);border-radius:var(--r);padding:20px 18px;position:relative;overflow:hidden;}
.nl-strip h3{font-size:18px;}
.nl-strip p{font-size:13.5px;margin:6px 0 14px;max-width:300px;}
.callout-yellow{background:var(--yellow);border-radius:var(--r);padding:20px 18px;margin:24px 0 44px;}
.callout-yellow h3{font-size:19px;margin-top:11px;}
.callout-yellow p{font-size:13.5px;line-height:1.55;margin:8px 0 14px;}
.empty-state{background:var(--cream-card);border-radius:var(--r);padding:30px 22px;text-align:center;margin-top:16px;}

/* ---- content/info pages ---- */
.info-sec{margin-top:22px;}
.info-sec .hd{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.info-sec .hd .ic{width:30px;height:30px;border-radius:9px;background:var(--cream-card);color:var(--coral-dark);
  display:flex;align-items:center;justify-content:center;flex:none;}
.info-sec .hd h2{font-size:17.5px;font-weight:700;}
.info-sec .bd{font-size:14px;line-height:1.6;color:var(--espresso-60);padding-bottom:20px;}
.info-sec .bd a{color:var(--coral-dark);font-weight:700;}
.info-sec .bd strong{color:var(--espresso);}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:4px;}
.method-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;box-shadow:var(--shadow-sm);}
.method-card .nm{font-family:var(--head);font-weight:700;font-size:14.5px;color:var(--espresso);}
.method-card .ds{font-size:12.5px;margin-top:3px;}
.method-card .pr{font-family:var(--head);font-weight:700;font-size:16px;margin-top:7px;color:var(--coral);}
.method-card.pickup .pr{color:#3a9b5c;}
.pay-marks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;}
.pay-marks .pm{height:30px;padding:0 9px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm);}
.pay-marks img.badge{height:30px;width:auto;border-radius:8px;box-shadow:var(--shadow-sm);}

/* ============ ADMIN — neutral control-panel styling ============ */
.admin{--a-bg:#eef0f3;--a-surface:#ffffff;--a-ink:#1f2933;--a-ink-60:#5c6773;--a-line:#dfe3e8;--a-accent:#3E5479;width:100%;min-width:0;}
.admin .app-admin{background:var(--a-bg);color:var(--a-ink);font-family:var(--body);min-height:100vh;display:flex;flex-direction:column;min-width:0;max-width:100%;}
.adm-hdr{background:#28323f;color:#eaeef3;padding:13px 16px;display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:40;}
.adm-hdr .logo{width:34px;height:34px;border-radius:9px;background:var(--a-accent);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.adm-hdr .ttl{font-family:var(--head);font-weight:700;font-size:14.5px;line-height:1.1;}
.adm-hdr .ttl span{display:block;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8c99a8;margin-top:2px;}
.adm-hdr .out{margin-left:auto;font-family:var(--head);font-weight:600;font-size:12.5px;color:#aab6c3;
  background:rgba(255,255,255,.08);padding:7px 13px;border-radius:8px;}
.adm-hdr .out:hover{background:rgba(255,255,255,.16);color:#fff;}
.adm-body{flex:1;padding:16px;min-width:0;overflow-x:hidden;}
.adm-card{background:var(--a-surface);border:1px solid var(--a-line);border-radius:12px;box-shadow:0 1px 3px rgba(31,41,51,.06);min-width:0;}
.adm-ink60{color:var(--a-ink-60);}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;}
.adm-table th{text-align:left;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--a-ink-60);padding:11px 13px;border-bottom:1px solid var(--a-line);}
.adm-table td{padding:12px 13px;border-bottom:1px solid var(--a-line);vertical-align:middle;}
.adm-table tbody tr{cursor:pointer;transition:background .12s;}
.adm-table tbody tr:hover{background:#f5f7f9;}
.adm-table tbody tr:last-child td{border-bottom:none;}
.adm-num{font-family:var(--head);font-weight:700;color:var(--a-accent);}
.adm-btn{font-family:var(--head);font-weight:600;font-size:14px;border-radius:9px;padding:12px 18px;
  background:var(--a-accent);color:#fff;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.adm-btn:hover{background:#33456a;}
.adm-btn.ghost{background:#eceff3;color:var(--a-ink);}
.adm-btn.ghost:hover{background:#e0e5ea;}
.adm-btn.coral{background:var(--coral);}
.adm-btn.coral:hover{background:var(--coral-dark);}
.adm-btn.full{width:100%;}
.adm-field{margin-bottom:13px;}
.adm-field label{display:block;font-family:var(--head);font-weight:600;font-size:12.5px;margin-bottom:5px;color:var(--a-ink);}
.adm-field input,.adm-field select{width:100%;min-width:0;padding:11px 12px;border:1.5px solid var(--a-line);border-radius:9px;
  background:#fff;outline:none;font-size:15px;color:var(--a-ink);transition:.15s;}
.adm-field input:focus,.adm-field select:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(62,84,121,.14);}
.st-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.st-pick button{font-family:var(--head);font-weight:600;font-size:13px;padding:11px 10px;border-radius:9px;
  border:1.5px solid var(--a-line);background:#fff;color:var(--a-ink-60);transition:.14s;display:flex;align-items:center;justify-content:center;gap:6px;}
.st-pick button:hover{border-color:#c2c9d1;background:#f7f9fa;}
.st-pick button.on{border-color:var(--a-accent);background:#eef2f8;color:var(--a-accent);box-shadow:0 0 0 2px rgba(62,84,121,.12);}
.adm-step{width:24px;height:24px;border-radius:50%;background:#e2e6ea;color:#8995a2;
  font-family:var(--head);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;}
.adm-step.on{background:#28323f;color:#fff;}
.adm-step.done{background:#3a9b5c;color:#fff;}
.adm-step-line{width:34px;height:2px;background:#dfe3e8;border-radius:2px;}
.adm-step-line.done{background:#3a9b5c;}
.otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.otp-box{width:100%;aspect-ratio:1/1.18;text-align:center;font-family:var(--head);font-weight:700;
  font-size:22px;color:#1f2933;border:1.6px solid var(--a-line,#dfe3e8);border-radius:11px;background:#fff;
  outline:none;transition:.15s;padding:0;min-width:0;}
.otp-box:focus{border-color:var(--a-accent,#3E5479);box-shadow:0 0 0 3px rgba(62,84,121,.16);}
.otp-row.err .otp-box{border-color:#cf5b54;background:#fcf1f0;}
.adm-tabs{display:flex;gap:6px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--a-line);}
.adm-tabs a{font-family:var(--head);font-weight:600;font-size:13px;color:#5c6773;padding:8px 13px;border-radius:8px;display:flex;align-items:center;gap:6px;transition:.14s;}
.adm-tabs a:hover{background:#f1f4f7;color:#1f2933;}
.adm-tabs a.on{background:#eef2f8;color:var(--a-accent);}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.adm-grid2>*{min-width:0;}
.adm-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.adm-pill.on{background:#D8EFDD;color:#226b3b;}
.adm-pill.off{background:#EDE3DE;color:#8a534c;}
.adm-mini{font-family:var(--head);font-weight:600;font-size:11.5px;color:#5c6773;background:#eef0f3;border-radius:7px;padding:6px 9px;display:inline-flex;align-items:center;gap:4px;transition:.14s;}
.adm-mini:hover{background:#e2e6ea;color:#1f2933;}
.adm-mini.danger{color:#b3433b;background:#f7e9e7;}
.adm-mini.danger:hover{background:#f0d8d4;}
.adm-err{color:#b34842;font-size:12.5px;font-weight:600;}
.adm-pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:13px;flex-wrap:wrap;}
.adm-pager .pg{font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--a-ink-60);}
.adm-pager a,.adm-pager .dis{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-weight:600;font-size:12.5px;
  padding:8px 13px;border-radius:9px;border:1.5px solid var(--a-line);background:#fff;color:var(--a-ink);transition:.14s;}
.adm-pager a:hover{border-color:#c2c9d1;background:#f7f9fa;}
.adm-pager .dis{opacity:.45;}

/* ============ NEW: header nav (base = mobile) ============ */
.hdr-burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;color:var(--espresso);flex:none;margin-right:-1px;}
.hdr-burger:hover{background:var(--cream-soft);}
.hdr-brand{min-width:0;}
.hdr-nav{display:none;}
.hdr-drop{position:relative;}
.hdr-drop-btn svg{transition:transform .2s ease;}
.hdr-drop-btn.open svg{transform:rotate(180deg);}
.hdr-drop-back{position:fixed;inset:0;z-index:50;}
.hdr-menu{position:absolute;top:calc(100% + 9px);left:0;z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:7px;
  min-width:210px;display:flex;flex-direction:column;gap:2px;}
.hdr-menu a{text-align:left;font-family:var(--head);font-weight:600;font-size:13.5px;
  color:var(--espresso);padding:9px 12px;border-radius:9px;}
.hdr-menu a:hover{background:var(--cream-soft);color:var(--coral-dark);}
.hdr-overlay{position:fixed;inset:0;background:rgba(42,31,25,.45);z-index:120;display:flex;animation:fade .2s ease;}
.hdr-drawer{width:84%;max-width:330px;height:100%;background:var(--cream-bg);box-shadow:var(--shadow-lg);
  padding:14px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;animation:slideIn .26s cubic-bezier(.2,.8,.3,1);}
@keyframes slideIn{from{transform:translateX(-100%);}to{transform:none;}}
.hdr-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:2px 4px;}
.hdr-drawer-ttl{font-family:var(--head);font-weight:800;font-size:17px;}
.hdr-drawer-x{width:38px;height:38px;border-radius:50%;background:var(--cream-card);display:flex;align-items:center;justify-content:center;flex:none;}
.hdr-drawer-x:hover{background:#e4d0b1;}
.hdr-drawer-link{text-align:left;font-family:var(--head);font-weight:600;font-size:15px;color:var(--espresso);
  padding:12px 12px;border-radius:11px;}
.hdr-drawer-link:hover{background:var(--cream-soft);}
.hdr-drawer-link.sub{font-size:14px;color:var(--espresso-60);padding:10px 12px 10px 22px;}
.hdr-drawer-link.sub:hover{color:var(--coral-dark);}
.hdr-drawer-head{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--espresso-40);padding:12px 12px 3px;}
.hdr-drawer-sep{height:1px;background:var(--line);margin:8px 6px;}

/* ============ NEW: hero / pdp / footer (base = mobile) ============ */
.ftr-inner{display:block;}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;}
.ftr-h{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:#9c8a76;margin-bottom:10px;}
.ftr-col .ftr-links{gap:10px;}

/* ============ DESKTOP ============ */
@media(min-width:900px){
  body{padding:0;background:#e7dcc9;}
  .app{max-width:1280px;min-height:100vh;border-radius:0;overflow:visible;
    box-shadow:0 0 90px -34px rgba(42,31,25,.45);}
  .wrap{padding:0 48px;}
  .hdr-burger{display:none;}
  .hdr-row{padding:14px 48px;gap:13px;}
  .hdr-nav{display:flex;align-items:center;gap:3px;margin-left:20px;}
  .hdr-nav > a,.hdr-drop-btn{font-family:var(--head);font-weight:600;font-size:14px;color:var(--espresso);
    padding:9px 13px;border-radius:10px;display:inline-flex;align-items:center;gap:5px;transition:.14s;}
  .hdr-nav > a:hover,.hdr-drop-btn:hover{background:var(--cream-soft);color:var(--coral-dark);}
  .nav{padding:2px 48px 12px;}
  .hero{flex-direction:row;align-items:center;gap:50px;padding:56px 48px 36px;}
  .hero-text{flex:1.05;}
  .hero-media{flex:1;}
  .hero-h1{font-size:46px;margin-top:16px;}
  .hero-p{font-size:17px;max-width:440px;margin:14px 0 22px;}
  .hero-img{aspect-ratio:4/3.2;}
  .value-props{gap:16px;margin-top:6px;padding-left:48px;padding-right:48px;}
  .value-props .vp{padding:20px 14px;}
  .prod-grid{grid-template-columns:repeat(4,1fr);gap:20px;}
  .sec-head h2{font-size:24px;}
  .pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
  .pdp-info{margin-top:0;}
  .pdp-media{position:sticky;top:90px;}
  .screen.narrow{max-width:720px;margin:0 auto;width:100%;}
  .screen.wide{max-width:1060px;margin:0 auto;width:100%;}
  .ftr{padding:46px 48px 30px;}
  .ftr-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;align-items:start;}
  .ftr-cols{display:contents;}
  .ftr-cols .ftr-col{margin-top:0;}
}
@media(min-width:900px){
  .admin{width:100%;}
  .admin .app-admin{max-width:980px;margin:0 auto;width:100%;}
}