/* ============================================================
   WINNY BAKES & CREAMS — DESIGN SYSTEM
   Mobile-first. Base styles target ~375px, enhanced upward.
   ============================================================ */

:root{
  --bg:#FFFDFB;
  --surface:#FFFFFF;
  --purple:#6E3FA6;
  --purple-dark:#4E2C79;
  --purple-tint:#F3ECFB;
  --lavender:#EFE6FA;
  --pink:#F8D3DC;
  --pink-deep:#E5637C;
  --ink:#241B2E;
  --ink-soft:#584D63;
  --muted:#8A7F93;
  --border:#EAE1F5;
  --border-soft:#F1ECF7;
  --success:#3E8E5A;
  --warn:#C77C1F;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-card:0 4px 18px rgba(78,44,121,0.08);
  --shadow-pop:0 18px 40px rgba(78,44,121,0.18);
  --font-serif:'Fraunces', Georgia, serif;
  --font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:var(--font-serif);font-weight:600;color:var(--ink);}
p{margin:0;}
input,select,textarea{font-family:inherit;font-size:16px;}

:focus-visible{outline:2.5px solid var(--purple);outline-offset:2px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 18px;}
.hidden{display:none !important;}
.svg-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:100px;border:1.5px solid transparent;
  font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--purple);color:#fff;}
.btn-primary:hover{background:var(--purple-dark);}
.btn-secondary{background:#fff;color:var(--purple);border-color:var(--purple);}
.btn-secondary:hover{background:var(--purple-tint);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-pink{background:var(--pink-deep);color:#fff;}
.btn-pink:hover{background:#cf4b63;}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-lg{padding:15px 30px;font-size:15.5px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-icon{width:40px;height:40px;padding:0;border-radius:50%;background:var(--purple-tint);color:var(--purple);border:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,253,251,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border-soft);
}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px;}
.logo{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--purple);letter-spacing:.2px;}
.logo small{display:block;font-family:var(--font-sans);font-size:8.5px;letter-spacing:2.5px;color:var(--ink-soft);font-weight:700;margin-top:-2px;}
.header-actions{display:flex;align-items:center;gap:6px;}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--ink);cursor:pointer;}
.icon-btn:hover{background:var(--purple-tint);}
.cart-badge{position:absolute;top:2px;right:2px;background:var(--pink-deep);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.nav-desktop{display:none;}
.nav-desktop a{font-size:14px;font-weight:600;color:var(--ink-soft);padding:8px 4px;border-bottom:2px solid transparent;}
.nav-desktop a.active,.nav-desktop a:hover{color:var(--purple);}
.hamburger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;color:var(--ink);cursor:pointer;}

.mobile-menu{position:fixed;inset:0;background:rgba(36,27,46,.4);z-index:90;display:none;}
.mobile-menu.open{display:block;}
.mobile-menu-panel{position:absolute;top:0;right:0;bottom:0;width:82%;max-width:340px;background:#fff;padding:20px;overflow-y:auto;box-shadow:var(--shadow-pop);}
.mobile-menu-panel a{display:block;padding:14px 4px;font-weight:700;font-size:16px;border-bottom:1px solid var(--border-soft);}
.mobile-menu-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--purple-tint);color:var(--purple);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}

/* ---------- Hero ---------- */
.hero{padding:28px 0 34px;}
.hero-grid{display:grid;gap:26px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--purple);background:var(--purple-tint);padding:6px 14px;border-radius:100px;margin-bottom:14px;}
.hero h1{font-size:38px;line-height:1.08;letter-spacing:-.5px;}
.hero h1 .accent{color:var(--purple);}
.hero-sub{margin-top:14px;color:var(--ink-soft);font-size:15.5px;max-width:440px;line-height:1.6;}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}
.hero-trust{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--ink-soft);font-weight:600;}
.hero-trust svg{color:var(--purple);}
.hero-media{position:relative;display:flex;justify-content:center;}
.hero-blob{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;}
.hero-blob::before{
  content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--lavender),var(--pink) 130%);
  border-radius:44% 56% 63% 37% / 45% 40% 60% 55%;
}
.hero-blob img{position:relative;width:88%;height:88%;object-fit:cover;border-radius:44% 56% 63% 37% / 45% 40% 60% 55%;margin:6% auto 0;box-shadow:0 20px 50px rgba(78,44,121,.22);}
.hero-price-tag{position:absolute;bottom:6%;right:2%;background:var(--purple);color:#fff;font-family:var(--font-serif);font-weight:700;font-size:15px;padding:10px 16px;border-radius:16px;box-shadow:var(--shadow-pop);}

/* ---------- Trust / feature strip ---------- */
.trust-strip{padding:6px 0 30px;}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:var(--purple-tint);border-radius:var(--radius-m);padding:20px;}
.trust-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.trust-item .ic-wrap{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--purple);}
.trust-item h4{font-family:var(--font-sans);font-size:13.5px;font-weight:800;}
.trust-item p{font-size:12px;color:var(--ink-soft);line-height:1.4;}

/* ---------- Section heading ---------- */
.section{padding:36px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:12px;}
.section-head h2{font-size:26px;}
.section-sub{color:var(--ink-soft);font-size:14px;margin-top:6px;max-width:480px;}
.link-all{font-weight:700;font-size:13.5px;color:var(--purple);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}

/* ---------- Promo cards ---------- */
.promo-grid{display:grid;gap:14px;}
.promo-card{border-radius:var(--radius-l);padding:26px 22px;position:relative;overflow:hidden;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;}
.promo-card.purple{background:var(--purple);color:#fff;}
.promo-card.pink{background:var(--pink);color:var(--ink);}
.promo-card .tag{font-size:12px;font-weight:800;letter-spacing:.4px;opacity:.85;}
.promo-card h3{font-family:var(--font-serif);font-size:26px;margin-top:6px;color:inherit;}
.promo-card .disc{font-family:var(--font-serif);font-size:34px;font-weight:700;margin-top:2px;}
.promo-card p{font-size:13px;margin-top:8px;max-width:210px;opacity:.9;}
.promo-card .btn{margin-top:16px;align-self:flex-start;}
.promo-card img{position:absolute;right:-12px;bottom:-12px;width:135px;height:135px;object-fit:cover;border-radius:50%;border:5px solid rgba(255,255,255,.5);}

/* ---------- Product grid / cards ---------- */
.product-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.product-scroll::-webkit-scrollbar{display:none;}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.product-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-m);
  overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start;min-width:0;
  transition:box-shadow .2s ease, transform .2s ease;
}
.product-scroll .product-card{min-width:170px;width:170px;}
.product-card:hover{box-shadow:var(--shadow-card);}
.product-card .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--lavender);}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;}
.product-card .badge{position:absolute;top:8px;left:8px;background:#fff;color:var(--purple);font-size:10px;font-weight:800;padding:4px 9px;border-radius:100px;}
.product-card .body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px;flex:1;}
.product-card .cat{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
.product-card h4{font-family:var(--font-sans);font-size:14.5px;font-weight:800;line-height:1.25;}
.product-card .desc{font-size:12px;color:var(--ink-soft);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:8px;}
.product-card .price{font-weight:800;font-size:15px;color:var(--ink);}
.product-card .price small{font-weight:600;color:var(--muted);font-size:11px;}
.add-btn{width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.add-btn:hover{background:var(--purple-dark);}
.product-card.unavailable{opacity:.55;}
.product-card.unavailable .thumb::after{content:"Currently unavailable";position:absolute;inset:0;background:rgba(36,27,46,.55);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;}

/* ---------- Category chips ---------- */
.cat-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px;-webkit-overflow-scrolling:touch;}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-chip{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.cat-chip.active{background:var(--purple);border-color:var(--purple);color:#fff;}

/* ---------- About / story ---------- */
.about-grid{display:grid;gap:22px;align-items:center;}
.about-media{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/5;background:var(--lavender);}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-copy h2{font-size:26px;margin-bottom:12px;}
.about-copy p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;}
.value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;}
.value-item{background:var(--purple-tint);border-radius:var(--radius-s);padding:14px 10px;text-align:center;}
.value-item .ic-wrap{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.value-item span{font-size:11.5px;font-weight:800;}

/* ---------- Package teaser cards ---------- */
.package-grid{display:grid;gap:16px;}
.package-card{border-radius:var(--radius-l);overflow:hidden;background:var(--surface);border:1px solid var(--border-soft);box-shadow:var(--shadow-card);}
.package-card .media{aspect-ratio:16/10;position:relative;}
.package-card .media img{width:100%;height:100%;object-fit:cover;}
.package-card .media .ribbon{position:absolute;top:12px;left:12px;background:var(--pink-deep);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:100px;}
.package-card .body{padding:18px;}
.package-card h3{font-size:21px;margin-bottom:6px;}
.package-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin-bottom:12px;}
.package-card ul{margin-bottom:14px;}
.package-card li{font-size:13px;color:var(--ink-soft);padding:4px 0;display:flex;gap:8px;align-items:flex-start;}
.package-card li svg{color:var(--purple);flex-shrink:0;margin-top:2px;}
.package-price{font-weight:800;font-size:15px;margin-bottom:12px;}

/* ---------- Testimonials ---------- */
.testi-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.testi-scroll::-webkit-scrollbar{display:none;}
.testi-card{flex-shrink:0;width:260px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:18px;}
.testi-stars{color:var(--pink-deep);font-size:13px;margin-bottom:10px;}
.testi-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
.testi-name{margin-top:12px;font-weight:800;font-size:13px;}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--purple);border-radius:var(--radius-l);padding:34px 24px;text-align:center;color:#fff;}
.final-cta h2{color:#fff;font-size:26px;}
.final-cta p{color:rgba(255,255,255,.85);font-size:14px;margin-top:8px;max-width:420px;margin-left:auto;margin-right:auto;}
.final-cta .btn{margin-top:18px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--purple-dark);color:rgba(255,255,255,.85);padding:40px 0 18px;margin-top:20px;}
.footer-grid{display:grid;gap:26px;}
.footer-logo{font-family:var(--font-serif);font-size:22px;color:#fff;font-weight:600;}
.footer-desc{font-size:13px;margin-top:10px;line-height:1.6;color:rgba(255,255,255,.7);}
.footer-col h5{color:#fff;font-size:13px;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;}
.footer-col a,.footer-col li{display:block;font-size:13.5px;color:rgba(255,255,255,.75);padding:5px 0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:26px;padding-top:16px;font-size:12px;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}
.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}

/* ---------- Mini bar (trust badges strip like footer top) ---------- */
.assure-strip{background:var(--purple-dark);}
.assure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 0;color:#fff;}
.assure-item{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;}
.assure-item svg{color:var(--pink);flex-shrink:0;}

/* ============================================================
   MENU PAGE / PAGE HEADER
   ============================================================ */
.page-header{padding:26px 0 10px;}
.page-header h1{font-size:28px;}
.page-header p{color:var(--ink-soft);font-size:14px;margin-top:8px;max-width:520px;}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.breadcrumb a{color:var(--purple);font-weight:700;}

/* ============================================================
   PRODUCT DETAIL / CUSTOMIZER
   ============================================================ */
.pd-wrap{padding:20px 0 90px;}
.pd-media{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:1/1;background:var(--lavender);margin-bottom:18px;}
.pd-media img{width:100%;height:100%;object-fit:cover;}
.pd-cat{font-size:11.5px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.6px;}
.pd-title{font-size:26px;margin-top:6px;}
.pd-desc{color:var(--ink-soft);font-size:14px;margin-top:10px;line-height:1.6;}
.pd-price{font-family:var(--font-serif);font-size:24px;font-weight:700;color:var(--purple);margin-top:14px;}

.cz-group{border-top:1px solid var(--border-soft);padding:18px 0;}
.cz-group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cz-group-head h4{font-size:14.5px;font-weight:800;}
.cz-req{font-size:10.5px;font-weight:800;color:var(--pink-deep);background:#FCE9ED;padding:3px 9px;border-radius:100px;}
.cz-opt-req{font-size:10.5px;color:var(--muted);font-weight:700;}
.cz-options{display:flex;flex-direction:column;gap:8px;}
.cz-opt{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--border);border-radius:var(--radius-s);padding:12px 14px;cursor:pointer;}
.cz-opt.selected{border-color:var(--purple);background:var(--purple-tint);}
.cz-opt-left{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;}
.cz-opt-left .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;position:relative;}
.cz-opt.selected .dot{border-color:var(--purple);}
.cz-opt.selected .dot::after{content:"";position:absolute;inset:3px;background:var(--purple);border-radius:50%;}
.cz-opt-left .box{border-radius:5px;}
.cz-opt-price{font-size:12.5px;font-weight:700;color:var(--muted);}
.cz-opt.selected .cz-opt-price{color:var(--purple);}

.cz-field{margin-bottom:14px;}
.cz-field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.cz-field input[type=text],.cz-field input[type=date],.cz-field input[type=number],.cz-field select,.cz-field textarea{
  width:100%;border:1.5px solid var(--border);border-radius:var(--radius-s);padding:12px 14px;font-size:14px;background:#fff;color:var(--ink);
}
.cz-field textarea{min-height:90px;resize:vertical;}
.cz-field input:focus,.cz-field select:focus,.cz-field textarea:focus{border-color:var(--purple);}
.cz-toggle-row{display:flex;gap:10px;}
.cz-toggle{flex:1;text-align:center;padding:11px;border:1.5px solid var(--border);border-radius:var(--radius-s);font-weight:700;font-size:13.5px;cursor:pointer;}
.cz-toggle.selected{border-color:var(--purple);background:var(--purple-tint);color:var(--purple);}
.upload-box{border:1.5px dashed var(--border);border-radius:var(--radius-s);padding:20px;text-align:center;cursor:pointer;color:var(--muted);font-size:13px;}
.upload-box img{max-height:120px;margin:0 auto 10px;border-radius:8px;}
.field-error{color:var(--pink-deep);font-size:12px;margin-top:5px;font-weight:600;}

.pd-sticky-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:12px;z-index:50;box-shadow:0 -6px 20px rgba(0,0,0,.06);}
.pd-sticky-total{flex:1;}
.pd-sticky-total .lbl{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;}
.pd-sticky-total .amt{font-family:var(--font-serif);font-size:19px;font-weight:700;color:var(--purple);}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:100px;overflow:hidden;}
.qty-stepper button{width:32px;height:32px;border:none;background:#fff;font-size:16px;font-weight:700;color:var(--purple);cursor:pointer;}
.qty-stepper span{width:26px;text-align:center;font-weight:700;font-size:14px;}

/* ============================================================
   CART & CHECKOUT
   ============================================================ */
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-soft);}
.cart-item img{width:74px;height:74px;border-radius:12px;object-fit:cover;background:var(--lavender);flex-shrink:0;}
.cart-item-body{flex:1;min-width:0;}
.cart-item-body h4{font-size:14px;font-weight:800;}
.cart-item-opts{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5;}
.cart-item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.cart-item-price{font-weight:800;font-size:13.5px;}
.cart-item-actions{display:flex;gap:8px;align-items:center;}
.link-btn{background:none;border:none;color:var(--purple);font-weight:700;font-size:12px;cursor:pointer;padding:4px;}
.link-btn.danger{color:var(--pink-deep);}
.summary-box{background:var(--purple-tint);border-radius:var(--radius-m);padding:18px;}
.summary-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--ink-soft);}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-weight:800;font-size:16px;color:var(--ink);}
.empty-state{text-align:center;padding:60px 20px;}
.empty-state .ic-wrap{width:64px;height:64px;border-radius:50%;background:var(--purple-tint);color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.empty-state h3{font-size:18px;margin-bottom:6px;}
.empty-state p{color:var(--ink-soft);font-size:13.5px;margin-bottom:18px;}

.form-grid{display:grid;gap:14px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-s);padding:12px 14px;font-size:14px;background:#fff;}
.form-field textarea{min-height:80px;resize:vertical;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--purple);}
.seg-toggle{display:flex;background:var(--purple-tint);border-radius:100px;padding:4px;gap:4px;}
.seg-toggle button{flex:1;border:none;background:transparent;padding:10px;border-radius:100px;font-weight:700;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.seg-toggle button.active{background:var(--purple);color:#fff;}
.pay-option{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:var(--radius-s);padding:13px 14px;cursor:pointer;margin-bottom:9px;}
.pay-option.selected{border-color:var(--purple);background:var(--purple-tint);}
.pay-option .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);position:relative;flex-shrink:0;}
.pay-option.selected .dot{border-color:var(--purple);}
.pay-option.selected .dot::after{content:"";position:absolute;inset:3px;background:var(--purple);border-radius:50%;}
.pay-option .info{flex:1;}
.pay-option .info strong{display:block;font-size:13.5px;}
.pay-option .info span{font-size:11.5px;color:var(--muted);}

/* ---------- Order success / tracking ---------- */
.success-wrap{text-align:center;padding:50px 20px 30px;}
.success-icon{width:78px;height:78px;border-radius:50%;background:var(--purple-tint);color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.success-wrap h2{font-size:24px;margin-bottom:8px;}
.success-wrap p{color:var(--ink-soft);font-size:14px;margin-bottom:20px;}
.order-code{display:inline-block;background:var(--purple-tint);color:var(--purple);font-weight:800;padding:10px 20px;border-radius:100px;font-size:15px;letter-spacing:.5px;margin-bottom:22px;}

.timeline{display:flex;flex-direction:column;gap:0;}
.tl-step{display:flex;gap:14px;position:relative;padding-bottom:26px;}
.tl-step:last-child{padding-bottom:0;}
.tl-step::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--border);}
.tl-step:last-child::before{display:none;}
.tl-dot{width:28px;height:28px;border-radius:50%;background:var(--border-soft);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;}
.tl-step.done .tl-dot{background:var(--purple);color:#fff;}
.tl-step.current .tl-dot{background:var(--pink-deep);color:#fff;}
.tl-content strong{display:block;font-size:14px;font-weight:800;}
.tl-content span{font-size:12px;color:var(--muted);}
.track-search{display:flex;gap:10px;margin-bottom:24px;}
.track-search input{flex:1;}

/* ---------- Reservation ---------- */
.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip-opt{border:1.5px solid var(--border);border-radius:100px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-soft);}
.chip-opt.selected{background:var(--purple);border-color:var(--purple);color:#fff;}

/* ============================================================
   GENERIC PAGE CARDS / CONTACT
   ============================================================ */
.contact-cards{display:grid;gap:12px;}
.contact-card{display:flex;align-items:center;gap:14px;border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:16px;background:#fff;}
.contact-card .ic-wrap{width:44px;height:44px;border-radius:50%;background:var(--purple-tint);color:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-card strong{display:block;font-size:14px;}
.contact-card span{font-size:12.5px;color:var(--ink-soft);}
.map-box{border-radius:var(--radius-m);overflow:hidden;height:220px;background:var(--lavender);display:flex;align-items:center;justify-content:center;color:var(--purple);margin-top:16px;}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;padding:0 16px;pointer-events:none;}
.toast{background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:12px 18px;border-radius:100px;box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:8px;animation:toastIn .25s ease;max-width:92vw;}
.toast.success{background:var(--purple);}
.toast.error{background:var(--pink-deep);}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(36,27,46,.5);z-index:150;display:flex;align-items:flex-end;justify-content:center;}
.modal-overlay.center{align-items:center;padding:16px;}
.modal-box{background:#fff;border-radius:22px 22px 0 0;width:100%;max-height:88vh;overflow-y:auto;padding:22px;}
.modal-overlay.center .modal-box{border-radius:var(--radius-l);max-width:420px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-head h3{font-size:18px;}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--border-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-app{display:flex;min-height:100vh;background:#F7F5FA;}
.admin-sidebar{display:none;}
.admin-main{flex:1;min-width:0;}
.admin-topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:58px;}
.admin-topbar .logo{font-size:18px;}
.admin-content{padding:16px;padding-bottom:80px;}
.admin-page-title{font-size:20px;margin-bottom:4px;}
.admin-page-sub{font-size:13px;color:var(--ink-soft);margin-bottom:18px;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.stat-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:14px;}
.stat-card .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.stat-card .val{font-family:var(--font-serif);font-size:24px;font-weight:700;margin-top:4px;}
.stat-card.accent{background:var(--purple);color:#fff;}
.stat-card.accent .lbl{color:rgba(255,255,255,.75);}

.admin-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:16px;margin-bottom:14px;}
.admin-card h3{font-size:15px;margin-bottom:12px;}
.admin-list-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:13px;}
.admin-list-item:last-child{border-bottom:none;}

.admin-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;z-index:60;padding:4px 2px 6px;}
.admin-bottom-nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;color:var(--muted);font-size:9.5px;font-weight:700;}
.admin-bottom-nav button.active{color:var(--purple);}
.admin-nav-more{position:fixed;inset:0;background:rgba(36,27,46,.4);z-index:95;display:none;}
.admin-nav-more.open{display:flex;align-items:flex-end;}
.admin-nav-more-panel{background:#fff;width:100%;border-radius:22px 22px 0 0;padding:16px;max-height:70vh;overflow-y:auto;}
.admin-nav-more-panel .admin-nav-link{display:flex;align-items:center;gap:12px;padding:13px 6px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border-soft);}

.tabbar{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbar button{flex-shrink:0;padding:9px 16px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.tabbar button.active{background:var(--purple);border-color:var(--purple);color:#fff;}

.data-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:14px;margin-bottom:10px;}
.data-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.data-card-head strong{font-size:14px;}
.data-card-head span.muted{font-size:11.5px;color:var(--muted);display:block;margin-top:2px;}
.status-pill{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:100px;white-space:nowrap;}
.status-pending{background:#FFF1DA;color:#A96A0A;}
.status-confirmed{background:#E3ECFF;color:#2C56C9;}
.status-preparing{background:var(--purple-tint);color:var(--purple);}
.status-ready{background:#E1F5E9;color:#237A46;}
.status-outfordelivery{background:#FDE7EE;color:#C1275A;}
.status-completed,.status-collected,.status-delivered{background:#E1F5E9;color:#237A46;}
.status-cancelled{background:#FBE4E4;color:#B4302F;}
.data-card-meta{font-size:12px;color:var(--ink-soft);margin-bottom:8px;line-height:1.6;}
.data-card-foot{display:flex;gap:8px;flex-wrap:wrap;}
.select-inline{border:1.5px solid var(--border);border-radius:var(--radius-s);padding:8px 10px;font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;}

.admin-fab{position:fixed;right:16px;bottom:74px;width:52px;height:52px;border-radius:50%;background:var(--purple);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop);z-index:55;cursor:pointer;}

.pin-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--purple-tint);padding:20px;}
.pin-box{background:#fff;border-radius:var(--radius-l);padding:32px 26px;max-width:340px;width:100%;text-align:center;box-shadow:var(--shadow-pop);}
.pin-box h2{font-size:20px;margin-bottom:6px;}
.pin-box p{font-size:13px;color:var(--ink-soft);margin-bottom:20px;}
.pin-box input{width:100%;text-align:center;letter-spacing:8px;font-size:20px;padding:14px;border-radius:var(--radius-s);border:1.5px solid var(--border);margin-bottom:14px;}

.empty-admin{text-align:center;padding:40px 16px;color:var(--muted);font-size:13.5px;}

/* ============================================================
   RESPONSIVE — TABLET / DESKTOP
   ============================================================ */
@media (min-width: 720px){
  .hero-grid{grid-template-columns:1.05fr 1fr;align-items:center;}
  .hero h1{font-size:50px;}
  .hero-sub{font-size:16.5px;}
  .trust-grid{grid-template-columns:repeat(4,1fr);}
  .promo-grid{grid-template-columns:1fr 1fr;}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .about-grid{grid-template-columns:1fr 1fr;}
  .package-grid{grid-template-columns:1fr 1fr;}
  .form-row-2{grid-template-columns:1fr 1fr;}
  .assure-grid{grid-template-columns:repeat(4,1fr);}
  .value-row{grid-template-columns:repeat(3,1fr);}
  .section-head h2{font-size:30px;}
}

@media (min-width: 900px){
  .nav-desktop{display:flex;gap:28px;}
  .hamburger{display:none;}
  .mobile-menu{display:none !important;}
  .header-row{height:76px;}
  .product-grid{grid-template-columns:repeat(4,1fr);}
  .pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .pd-sticky-bar{position:sticky;bottom:20px;border-radius:100px;border:1px solid var(--border);margin-top:20px;box-shadow:var(--shadow-pop);}
  .checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start;}
  .cart-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start;}
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .admin-sidebar{display:flex;flex-direction:column;width:230px;background:#fff;border-right:1px solid var(--border-soft);padding:20px 14px;position:sticky;top:0;height:100vh;flex-shrink:0;}
  .admin-bottom-nav{display:none;}
  .admin-nav-more{display:none !important;}
  .admin-fab{display:none;}
  .admin-sidebar .nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-s);font-weight:700;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
  .admin-sidebar .nav-link.active{background:var(--purple-tint);color:var(--purple);}
  .admin-sidebar .logo{margin-bottom:20px;padding:0 8px;}
}

@media (min-width: 1100px){
  .hero h1{font-size:56px;}
}