:root {
  --brand: #c2185b;
  --brand-dark: #8e1244;
  --brand-soft: #fce4ec;
  --ink: #22262e;
  --muted: #6c7480;
  --line: #e8eaef;
}

* { box-sizing: border-box; }

body {
  font-family: 'Hind Siliguri', 'Segoe UI', Tahoma, sans-serif;
  color: var(--ink);
  background: #f7f8fa;
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--brand); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--ink);
  color: #cfd4dc;
  font-size: 14px;
  padding: 8px 0;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .tagline { color: #fff; }
.topbar .tagline i { color: var(--brand); }
.topbar-links a { color: #cfd4dc; margin-left: 18px; }
.topbar-links a:hover { color: #fff; }

/* ---------------------------------------------------------------- header */
.site-header { background: #fff; padding: 18px 0; border-bottom: 1px solid var(--line); }
.brand-text { font-size: 26px; font-weight: 700; color: var(--brand); letter-spacing: .5px; }
.brand img { max-height: 48px; }

.search-form { flex: 1; display: flex; border: 2px solid var(--brand); border-radius: 40px; overflow: hidden; }
.search-form input { flex: 1; border: 0; padding: 11px 18px; outline: none; font-size: 15px; }
.search-form button { border: 0; background: var(--brand); color: #fff; padding: 0 22px; font-size: 16px; }

.header-actions { display: flex; gap: 20px; }
.action-link { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--muted); }
.action-link .icon { position: relative; font-size: 21px; color: var(--ink); }
.action-link .count {
  position: absolute; top: -8px; right: -12px; background: var(--brand); color: #fff;
  font-style: normal; font-size: 11px; min-width: 19px; height: 19px; line-height: 19px;
  text-align: center; border-radius: 50%; padding: 0 3px;
}
.action-link small { color: var(--brand); font-weight: 600; }

/* -------------------------------------------------------------- main nav */
.main-nav { background: var(--brand); }
.main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a { display: block; padding: 13px 18px; color: #fff; font-size: 15px; }
.main-nav a:hover { background: var(--brand-dark); color: #fff; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------- helpers */
.flash-wrap { margin-top: 14px; }
.site-main { padding: 26px 0 40px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: 34px 0 16px; }
.section-head h4 { margin: 0; font-size: 21px; font-weight: 600; position: relative; padding-bottom: 8px; }
.section-head h4:after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; background: var(--brand); }
.view-all { color: var(--brand); font-size: 14px; }

/* ---------------------------------------------------------------- banner */
.hero-slider img { width: 100%; border-radius: 12px; display: block; }
.hero-slide { position: relative; }
.hero-slide .caption {
  position: absolute; left: 40px; bottom: 36px; background: rgba(255,255,255,.92);
  padding: 16px 24px; border-radius: 10px;
}
.hero-slide .caption h3 { margin: 0 0 8px; font-size: 22px; }
.carousel-indicators [data-bs-target] { background: var(--brand); }

/* ----------------------------------------------------------- cat tiles */
.cat-tile { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: center; transition: border-color .22s, transform .22s, box-shadow .22s; height: 100%; }
.cat-tile:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 20px 34px -28px rgba(16,24,40,.9); }
.cat-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile .label { padding: 10px 8px; font-size: 14px; font-weight: 500; }
.cat-tile .count { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

/* -------------------------------------------------------- product card */
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: .2s; }
.product-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.product-card .thumb { position: relative; overflow: hidden; }
.product-card .thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.badge-discount, .badge-new {
  position: absolute; top: 10px; font-size: 12px; color: #fff; padding: 3px 9px; border-radius: 20px; z-index: 2;
}
.badge-discount { left: 10px; background: var(--brand); }
.badge-new { right: 10px; background: #2e9e6b; }
.hover-actions {
  position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(10px); transition: .2s;
}
.product-card:hover .hover-actions { opacity: 1; transform: none; }
.hover-actions a, .hover-actions button {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); cursor: pointer;
}
.hover-actions a:hover, .hover-actions button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.product-card .body { padding: 12px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card .cat { font-size: 12px; color: var(--muted); }
.product-card .title { font-size: 15px; margin: 5px 0 8px; font-weight: 500; min-height: 43px; }
.product-card .price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.price .now { color: var(--brand); font-weight: 700; font-size: 17px; }
.price .was { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.btn-order {
  width: 100%; margin-top: 12px; border: 0; background: var(--ink); color: #fff;
  padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.btn-order:hover { background: var(--brand); }
.out-of-stock { display: block; margin-top: 12px; text-align: center; color: #b02a37; font-size: 14px; }

/* --------------------------------------------------------- product page */
.pd-gallery .main-img { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.pd-gallery .main-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs img { width: 70px; height: 88px; object-fit: cover; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; }
.pd-thumbs img.active { border-color: var(--brand); }
.pd-title { font-size: 27px; font-weight: 600; margin-bottom: 6px; }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin: 14px 0; }
.pd-price .now { font-size: 30px; font-weight: 700; color: var(--brand); }
.pd-price .was { text-decoration: line-through; color: var(--muted); }
.pd-price .save { background: var(--brand-soft); color: var(--brand); padding: 3px 10px; border-radius: 20px; font-size: 13px; }
.pd-meta { color: var(--muted); font-size: 14px; }
.option-group { margin: 16px 0; }
.option-group label { font-weight: 600; margin-bottom: 8px; display: block; font-size: 14px; }
.option-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.option-chips input { display: none; }
.option-chips label {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 16px; cursor: pointer;
  font-weight: 400; margin: 0; background: #fff; font-size: 14px;
}
.option-chips input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: fit-content; }
.qty-box button { border: 0; background: #fff; width: 40px; height: 44px; font-size: 18px; cursor: pointer; }
.qty-box input { width: 60px; height: 44px; border: 0; text-align: center; font-family: inherit; }
.pd-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.btn-primary-brand { background: var(--brand); border: 0; color: #fff; padding: 13px 30px; border-radius: 8px; font-family: inherit; font-size: 16px; cursor: pointer; }
.btn-primary-brand:hover { background: var(--brand-dark); }
.btn-outline-brand { background: #fff; border: 2px solid var(--brand); color: var(--brand); padding: 11px 26px; border-radius: 8px; font-family: inherit; font-size: 16px; cursor: pointer; }
.pd-tabs { margin-top: 36px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.nav-tabs .nav-link { color: var(--muted); font-family: inherit; }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }
.stock-in { color: #2e9e6b; } .stock-out { color: #b02a37; }

/* -------------------------------------------------------------- generic */
.card-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.table thead th { background: #fafbfc; font-weight: 600; font-size: 14px; }
.pagination { justify-content: center; margin-top: 28px; gap: 5px; }
.pagination > li > a, .pagination > li > span {
  border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; display: block; color: var(--ink);
}
.pagination > li.active > span { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-hero { background: var(--brand-soft); padding: 26px; border-radius: 12px; margin-bottom: 22px; }
.page-hero h2 { margin: 0; font-size: 24px; }
.breadcrumb-bar { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

/* --------------------------------------------------------------- trust */
.trust-row { background: #fff; border-top: 1px solid var(--line); padding: 34px 0; margin-top: 20px; }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.trust-item { text-align: center; }
.trust-item i { font-size: 30px; color: var(--brand); margin-bottom: 10px; }
.trust-item h6 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.trust-item p { margin: 0; font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------- testimoial */
.testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; height: 100%; }
.testimonial-card .stars { color: #f5a623; margin-bottom: 10px; }
.testimonial-card p { color: #4a5058; }
.testimonial-card .who { font-weight: 600; margin-top: 12px; }
.testimonial-card .where { color: var(--muted); font-size: 13px; }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: #b9c0ca; padding: 46px 0 0; margin-top: 40px; }
.site-footer h5 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: #b9c0ca; font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-contact li { margin-bottom: 10px; font-size: 14px; }
.footer-contact i { color: var(--brand); width: 20px; }
.social a {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border-radius: 50%; color: #fff; margin-right: 8px;
}
.social a:hover { background: var(--brand); }
.copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding: 18px 0; font-size: 13px; }

/* --------------------------------------------------------- responsive */
@media (max-width: 991px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .main-nav ul { display: none; }
  .main-nav ul.open { display: block; }
  .nav-toggle { display: block; background: none; border: 0; color: #fff; padding: 12px 0; font-family: inherit; font-size: 15px; }
}
@media (max-width: 575px) {
  .trust-grid { grid-template-columns: 1fr; }
  .hero-slide .caption { left: 16px; bottom: 16px; padding: 12px 16px; }
  .hero-slide .caption h3 { font-size: 17px; }
}

/* ------------------------------------------------------------- reviews */
.stars { color: #f5a623; }
.rating-line { font-size: 13px; margin-bottom: 6px; }
.review-item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-item p { color: #4a5058; }

/* ------------------------------------------------------- shop filters */
.filter-group { border-top: 1px solid var(--line); padding: 14px 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group > label.group-title { font-weight: 600; font-size: 14px; display: block; margin-bottom: 10px; }
.price-inputs { display: flex; gap: 8px; align-items: center; }
.price-inputs input { width: 100%; }
.choice-list { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-list label {
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; cursor: pointer;
  font-size: 13px; margin: 0; background: #fff;
}
.choice-list input { display: none; }
.choice-list input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.filter-actions { display: flex; gap: 8px; margin-top: 16px; }
.shop-results { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--brand-soft);
  color: var(--brand); border-radius: 20px; padding: 5px 12px; font-size: 13px;
}
.chip a { color: var(--brand); font-weight: 700; }

/* -------------------------------------------------------- order track */
.track-steps { display: flex; justify-content: space-between; margin: 26px 0 8px; position: relative; }
.track-steps:before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 17px; height: 3px; background: var(--line); z-index: 0;
}
.track-step { text-align: center; position: relative; z-index: 1; flex: 1; }
.track-step .dot {
  width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: var(--muted);
}
.track-step.done .dot { border-color: var(--brand); background: var(--brand); color: #fff; }
.track-step .step-label { font-size: 13px; color: var(--muted); }
.track-step.done .step-label { color: var(--brand); font-weight: 600; }

/* -------------------------------------------------------- address book */
.address-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; height: 100%; }
.address-card.is-default { border-color: var(--brand); }
.address-card .badge { font-size: 11px; }

/* ------------------------------------------------------ dropdown menu */
.main-nav li { position: relative; }
.main-nav .dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  min-width: 230px; padding: 6px 0; box-shadow: 0 12px 28px rgba(0,0,0,.10);
  flex-direction: column; margin: 0;
}
.main-nav li.has-dropdown:hover > .dropdown { display: flex; }
.main-nav .dropdown a { color: var(--ink); padding: 9px 16px; font-size: 14px; display: block; }
.main-nav .dropdown a:hover { background: var(--brand-soft); color: var(--brand); }
.main-nav > ul > li > a i { font-size: 11px; opacity: .8; }

/* --------------------------------------------------------- shop toolbar */
.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.result-count { font-size: 14px; color: var(--muted); }
.toolbar-right { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill {
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px;
  font-size: 13px; color: var(--ink); background: #fff; line-height: 1.6;
}
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ------------------------------------------------------- compare table */
.compare-table th { width: 150px; background: #fafbfc; font-weight: 600; font-size: 14px; }
.compare-table td { min-width: 190px; vertical-align: top; }
.compare-table img { width: 100%; max-width: 150px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; }
.compare-empty { text-align: center; padding: 50px 20px; }

/* ---------------------------------------------------------- quick view */
.quick-thumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.quick-thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.hover-actions button.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --------------------------------------------------- subcategory strip */
.subcat-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* --------------------------------------------------- mini cart drawer */
.mini-cart-overlay {
  position: fixed; inset: 0; background: rgba(20,22,26,.45); opacity: 0;
  visibility: hidden; transition: .2s; z-index: 1050;
}
.mini-cart-overlay.open { opacity: 1; visibility: visible; }
.mini-cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: #fff; z-index: 1055; transform: translateX(100%); transition: transform .25s;
  display: flex; flex-direction: column; box-shadow: -12px 0 30px rgba(0,0,0,.12);
}
.mini-cart.open { transform: none; }
.mini-cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.mini-cart-head h5 { font-size: 16px; }
.mc-count { background: var(--brand); color: #fff; font-size: 12px; border-radius: 12px; padding: 1px 9px; margin-left: 6px; }
.mini-cart-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.mini-empty { text-align: center; color: var(--muted); padding: 50px 0; }
.mini-cart-list { list-style: none; margin: 0; padding: 0; }
.mini-cart-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.mini-cart-list img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; }
.mc-info { flex: 1; min-width: 0; font-size: 14px; }
.mc-info a { display: block; }
.mc-remove { border: 0; background: none; color: #b02a37; font-size: 20px; line-height: 1; cursor: pointer; }
.mini-cart-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; }

/* ----------------------------------------------------- newsletter strip */
.newsletter-strip {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.06); border-radius: 12px; padding: 20px 24px; margin-bottom: 30px;
}
.newsletter-strip h5 { color: #fff; font-size: 17px; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.newsletter-form input {
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff;
  border-radius: 8px; padding: 10px 14px; font-family: inherit; min-width: 230px;
}
.newsletter-form input::placeholder { color: #9aa3b0; }
.newsletter-form button {
  border: 0; background: var(--brand); color: #fff; border-radius: 8px;
  padding: 10px 22px; font-family: inherit; cursor: pointer;
}
.newsletter-note { flex-basis: 100%; text-align: right; font-size: 13px; }
.newsletter-note.ok { color: #7ee2a8; }
.newsletter-note.err { color: #ff9aa5; }

/* ------------------------------------------------- search suggestions */
.search-wrap { flex: 1; position: relative; }
.suggest-box {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 0 0 10px 10px; z-index: 70;
  display: none; max-height: 380px; overflow-y: auto; box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.suggest-box.open { display: block; }
.suggest-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.suggest-item:hover { background: var(--brand-soft); }
.suggest-item img { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; }
.suggest-item span { display: flex; flex-direction: column; font-size: 14px; }
.suggest-item em { color: var(--brand); font-style: normal; font-weight: 600; }
.suggest-empty { padding: 14px; color: var(--muted); font-size: 14px; }
.suggest-all { display: block; padding: 11px 14px; text-align: center; color: var(--brand); font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------ lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(12,14,18,.9); z-index: 1060;
  display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.pd-gallery .main-img img { cursor: zoom-in; }

/* --------------------------------------------------- recently viewed */
.recent-strip { margin-top: 34px; }

/* ------------------------------------------------------ specs / notify */
.spec-table th { width: 170px; background: #fafbfc; font-weight: 600; font-size: 14px; }
.spec-table td { font-size: 14px; }
.notify-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.notify-note.ok { color: #2e9e6b; }
.notify-note.err { color: #b02a37; }

/* ------------------------------------------------- category checklist */
.cat-checks { max-height: 240px; overflow-y: auto; }
.picker-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; margin: 0; cursor: pointer; }
.picker-row.is-child { padding-left: 20px; color: var(--muted); }
.picker-row input { margin: 0; }

/* =========================================================================
   Theme v2 - layout matched to the storefront's design system.
   Navy primary, green accent; sticky header; drawer navigation.
   ========================================================================= */
:root {
  --brand: #0d1b2a;
  --brand-dark: #000a17;
  --accent: #82b735;
  --brand-soft: #f0f6e6;
  --ink: #1d232b;
  --muted: #6b7280;
  --line: #e6e8ec;
  --header-h: 64px;
}

/* ---------------------------------------------------- announcement strip */
.topbar {
  background: var(--accent);
  color: #10310a;
  padding: 0;
  overflow: hidden;
  font-size: 14px;
}
.marquee-wrap { overflow: hidden; white-space: nowrap; }
.marquee { display: inline-block; padding: 8px 0; animation: marquee 34s linear infinite; }
.marquee span { display: inline-block; margin: 0 42px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ sticky header */
.site-header {
  position: sticky; top: 0; z-index: 1040;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 0; box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
/* search on its own full-width row */
.header-search { padding: 12px 0 0; }
.header-search .search-wrap { width: 100%; }
.header-grid { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.header-grid .brand { flex: 1; min-width: 0; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 10px 16px; font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.menu-toggle:hover { border-color: var(--brand); color: var(--brand); }

.brand-text { font-size: 24px; font-weight: 700; letter-spacing: .3px; color: var(--brand); }
.search-form { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #f7f8fa; }
.search-form input { background: transparent; }
.search-form button { background: var(--brand); }
.header-actions { gap: 14px; }
.action-link .icon { font-size: 20px; color: var(--ink); }
.action-link .count { background: var(--accent); color: #10310a; }
.action-link small { color: var(--muted); }

/* the horizontal nav is replaced by the drawer */
.main-nav { display: none !important; }

/* --------------------------------------------------------- category drawer */
.cat-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transition: .2s; z-index: 1050;
}
.cat-overlay.open { opacity: 1; visibility: visible; }
.cat-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw;
  background: #fff; z-index: 1055; transform: translateX(-100%);
  transition: transform .25s; display: flex; flex-direction: column;
  box-shadow: 12px 0 30px rgba(0,0,0,.12);
}
.cat-drawer.open { transform: none; }
.cat-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.cat-tabs { display: flex; flex: 1; }
.cat-tab {
  flex: 1; padding: 15px 10px; background: transparent; border: 0;
  border-bottom: 2px solid transparent; font-family: inherit; font-size: 14px;
  font-weight: 600; color: var(--muted); cursor: pointer;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.cat-drawer-head .btn-close { margin: 0 14px; }

.cat-pane { display: none; flex: 1; overflow-y: auto; padding: 0 0 22px; }
.cat-pane.active { display: block; }
.cat-drawer nav.cat-pane > a { display: block; padding: 10px 22px; color: var(--ink); font-size: 15px; }
.cat-drawer nav.cat-pane > a:hover { background: var(--brand-soft); color: var(--brand); }
.cat-drawer nav .cat-group {
  padding: 14px 20px 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: #9aa3b0;
}

/* --------------------------------------------------- drawer: category tree */
.cat-pane .tree-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 2px; }
.cat-pane .tree-quick a {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f4f6fa; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.cat-pane .tree-quick a i { font-size: 12px; color: var(--brand); transition: color .22s; }
.cat-pane .tree-quick a:hover {
  background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px rgba(16,24,40,.55);
}
.cat-pane .tree-quick a:hover i { color: #fff; }

.tree-caption {
  display: flex; align-items: center; gap: 9px;
  padding: 20px 20px 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #9aa3b0;
}
.tree-caption::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tree-caption i { color: var(--brand); font-size: 12px; }

.cat-tree, .cat-tree ul { list-style: none; margin: 0; padding: 0; }

.tree-node { animation: treeIn .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes treeIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

.tree-row { display: flex; align-items: center; padding-right: 10px; }

.tree-toggle, .tree-bullet {
  flex: none; width: 34px; height: 36px; border: 0; background: transparent;
  display: grid; place-items: center; border-radius: 10px; color: #b7bdc8; font-size: 11px;
  transition: color .2s, background .2s;
}
.tree-toggle { cursor: pointer; }
.tree-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.tree-toggle i { transition: transform .32s cubic-bezier(.22,1,.36,1); }
.tree-node.open > .tree-row .tree-toggle i { transform: rotate(90deg); }
.tree-bullet i { font-size: 4px; color: #d5dae2; }

.tree-link {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px 9px 4px; border-radius: 12px;
  color: var(--ink); font-size: 15px; font-weight: 600;
  transition: background .24s, color .24s, padding-left .24s, box-shadow .24s;
}
.tree-link::before {
  content: ''; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--accent, var(--brand)), var(--brand));
  transform: scaleY(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.tree-link:hover {
  background: linear-gradient(90deg, var(--brand-soft), transparent);
  color: var(--brand); padding-left: 10px;
}
.tree-link:hover::before { transform: scaleY(1); }

.tree-ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 13px;
  background: #f4f6fa; color: var(--brand);
  transition: background .24s, transform .24s, box-shadow .24s;
}
.tree-link:hover .tree-ico { background: #fff; transform: scale(1.08); box-shadow: 0 6px 14px -8px rgba(16,24,40,.6); }

.tree-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tree-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--muted);
  background: #f1f3f8; border-radius: 999px; padding: 3px 9px; min-width: 26px; text-align: center;
  transition: background .24s, color .24s;
}
.tree-link:hover .tree-count { background: var(--brand); color: #fff; }

/* children — the trunk, the elbow stubs and the leaves */
.tree-sub {
  position: relative; margin-left: 17px; padding-left: 18px;
  border-left: 1px dashed #e0e4ec;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .36s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.tree-node.open > .tree-sub { max-height: 520px; opacity: 1; }

.tree-leaf { position: relative; animation: treeIn .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.tree-leaf > a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 4px; border-radius: 0 10px 10px 0;
  color: var(--muted); font-size: 14px;
  transition: background .22s, color .22s, padding-left .22s;
}
.tree-leaf > a::before {
  content: ''; position: absolute; left: -18px; top: 50%; width: 22px; height: 1px;
  background: #e0e4ec; transition: background .22s;
}
.tree-leaf > a:hover { background: var(--brand-soft); color: var(--brand); padding-left: 10px; }
.tree-leaf > a:hover::before { background: var(--brand); }

.tree-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ccd2dc;
  transition: background .22s, transform .22s, box-shadow .22s;
}
.tree-leaf > a:hover .tree-dot { background: var(--brand); transform: scale(1.4); box-shadow: 0 0 0 4px rgba(16,24,40,.10); }

/* current page */
.tree-node.is-active > .tree-row .tree-link,
.tree-leaf.is-active > a {
  background: var(--brand);
  color: #fff; box-shadow: 0 12px 24px -16px rgba(16,24,40,.9);
}
.tree-node.is-active > .tree-row .tree-link::before { transform: scaleY(0); }
.tree-node.is-active > .tree-row .tree-ico { background: rgba(255,255,255,.22); color: #fff; }
.tree-node.is-active > .tree-row .tree-count { background: rgba(255,255,255,.92); color: var(--brand); }
.tree-leaf.is-active > a::before { background: var(--brand); }
.tree-leaf.is-active > a .tree-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

@media (prefers-reduced-motion: reduce) {
  .tree-node, .tree-leaf { animation: none; }
  .tree-sub, .tree-toggle i, .tree-link, .tree-ico { transition: none; }
}

/* --------------------------------------------------------- section headers */
.section-head { margin: 36px 0 18px; }
.section-head h4 { font-size: 22px; font-weight: 700; padding-bottom: 0; margin: 0; }
.section-head h4:after { display: none; }
.view-all {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff; border-radius: 30px;
  padding: 7px 18px; font-size: 13px; font-weight: 600;
}
.view-all:hover { background: var(--brand-dark); color: #fff; }

/* ------------------------------------------------- popular category strip */
.cat-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.cat-strip .cat-tile { border: 1px solid var(--line); }
.cat-strip .cat-tile .label { padding: 9px 6px; font-size: 13px; }
.cat-strip .cat-tile .count { display: none; }
@media (max-width: 1199px) { .cat-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px)  { .cat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------- 6-across product grid */
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 991px)  { .grid-6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .grid-6 { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- product card */
.product-card { border: 0; border-radius: 0; background: transparent; }
.product-card:hover { border: 0; box-shadow: none; }
.product-card .thumb { border-radius: 6px; overflow: hidden; background: #fff; }
.product-card .body { padding: 10px 0 0; }
.badge-discount {
  left: auto; right: 10px; top: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #10310a; font-weight: 700; font-size: 12px;
  padding: 0;
}
.badge-new { display: none; }
.hover-actions a, .hover-actions button { border-radius: 6px; }
.hover-actions button:hover, .hover-actions a:hover { background: var(--brand); border-color: var(--brand); }
.product-card .cat { font-size: 12px; color: var(--muted); }
.product-card .title { font-size: 15px; min-height: 40px; margin: 6px 0; }
.price .now { color: var(--brand); }
.btn-order {
  background: #fff; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 6px; font-weight: 600;
}
.btn-order:hover { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------------ hero */
.hero-slider img { border-radius: 8px; }
.hero-slide .caption { border-radius: 8px; }

/* --------------------------------------------------------------- buttons */
.btn-primary-brand, .btn-outline-brand { border-radius: 6px; }
.btn-primary-brand { background: var(--brand); }
.btn-primary-brand:hover { background: var(--brand-dark); }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #0d1b2a; }
.newsletter-form button { background: var(--accent); color: #10310a; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 991px) {
  .header-search { padding: 10px 0 0; }
  .header-grid { flex-wrap: nowrap; gap: 10px; min-height: 56px; }
  .menu-toggle span { display: none; }
  .menu-toggle { padding: 9px 11px; }
  .search-wrap { min-width: 0; }
  .search-form input { min-width: 0; }
  .header-actions { gap: 10px; }
  .action-link small { display: none; }
  .brand img { max-height: 38px; }
  .brand-text { font-size: 18px; }
}
@media (max-width: 575px) {
  .header-grid { gap: 7px; }
  .brand img { max-height: 30px; max-width: 104px; }
  .brand-text { font-size: 16px; }
  .search-form input { padding: 9px 12px; font-size: 14px; }
}

/* ------------------------------------------------- category slider */
.cat-carousel { position: relative; padding: 0 36px; }
.cat-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.cat-track::-webkit-scrollbar { display: none; }
.cat-slide {
  flex: 0 0 calc((100% - 84px) / 8);
  scroll-snap-align: start;
}
.cat-slide .cat-tile { display: block; height: 100%; }
.cat-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  z-index: 2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.cat-nav.prev { left: 0; }
.cat-nav.next { right: 0; }
.cat-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (max-width: 1199px) { .cat-slide { flex-basis: calc((100% - 36px) / 4); } }
@media (max-width: 767px)  { .cat-slide { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 575px)  { .cat-slide { flex-basis: calc((100% - 12px) / 2); } .cat-carousel { padding: 0 30px; } }

/* ============================================================
   Storefront layout: left menu opens as a drawer at every size
   ============================================================ */
.site-layout { display: block; }
.site-content { min-width: 0; }
.page-desc { color: var(--muted); font-size: 14px; margin: 26px 0 4px; }

/* ------------------------------------------------- filter drawer */
.btn-filter {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 6px 14px; font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; margin-right: 6px;
}
.btn-filter:hover { border-color: var(--brand); color: var(--brand); }
.btn-filter .filter-count {
  background: var(--brand); color: #fff; border-radius: 10px;
  font-size: 11px; font-style: normal; padding: 1px 7px;
}

.filter-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transition: .2s; z-index: 1050;
}
.filter-overlay.open { opacity: 1; visibility: visible; }
.filter-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: #fff; z-index: 1055; transform: translateX(100%);
  transition: transform .25s; display: flex; flex-direction: column;
  box-shadow: -12px 0 30px rgba(0,0,0,.12);
}
.filter-drawer.open { transform: none; }
.filter-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.filter-drawer-head h5 { font-size: 16px; margin: 0; font-weight: 700; }
.filter-drawer-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.filter-drawer-body form { margin: 0; }
.filter-drawer-body .filter-group { padding: 12px 0; }
.filter-drawer-body .filter-actions { margin-top: 12px; }
.filter-drawer-body .filter-actions .btn-outline-brand { padding: 6px 14px; }

/* ============================================================
   Modern polish layer
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a, button, .btn, .pill, .action-link {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

/* ------------------------------------------------------------ buttons */
.btn-primary-brand,
.btn-outline-brand,
.btn-order,
.btn-dark,
.btn-outline-secondary {
  border-radius: 10px;
  font-weight: 600;
}

.btn-primary-brand:hover,
.btn-order:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.btn-primary-brand:focus-visible,
.btn-outline-brand:focus-visible,
.btn-order:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(130, 183, 53, .26);
}

/* -------------------------------------------------------------- forms */
.form-control, .form-select {
  border-radius: 10px;
  border-color: #dfe3e9;
  padding: .62rem .85rem;
  font-size: .95rem;
}
.form-control::placeholder { color: #9aa3b0; }
.form-label { font-weight: 600; font-size: .9rem; color: var(--ink); }

/* -------------------------------------------------------------- cards */
.card-panel, .panel, .address-card, .testimonial-card {
  border-radius: 16px;
  border-color: #e6e9ef;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .045);
}
.card-panel { padding: 26px; }
.panel { padding: 22px 24px; }

/* --------------------------------------------------------- page heroes */
.page-hero {
  background: linear-gradient(135deg, #f1f7e7 0%, #fbfcf8 58%, #ffffff 100%);
  border: 1px solid #e8efdc;
  border-radius: 16px;
  padding: 26px 28px;
}
.page-hero h2, .page-hero h1 { font-weight: 700; letter-spacing: -.3px; }

/* ------------------------------------------------------- category board */
.cat-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ch-text h2 { margin: 0 0 4px; }
.ch-text p { margin: 0; color: var(--muted); font-size: 14px; }
.ch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e8efdc; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--brand);
  box-shadow: 0 10px 22px -18px rgba(16,24,40,.6);
}
.ch-badge i { color: var(--accent, var(--brand)); }

.cat-board { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }

.cg-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  animation: cgIn .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: border-color .22s, box-shadow .22s;
}
@keyframes cgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cg-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent, var(--brand)), var(--brand));
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.cg-card:hover { border-color: #d9e6c4; box-shadow: 0 22px 44px -34px rgba(16,24,40,.75); }
.cg-card:hover::before { transform: scaleY(1); }

.cg-head { display: flex; align-items: center; gap: 14px; }
.cg-thumb {
  flex: none; width: 66px; height: 66px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #fafbfc;
}
.cg-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.cg-card:hover .cg-thumb img { transform: scale(1.08); }

.cg-info { flex: 1; min-width: 0; }
.cg-name { display: inline-block; font-size: 17px; font-weight: 700; color: var(--ink); transition: color .2s; }
.cg-name:hover { color: var(--brand); }
.cg-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.cg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700;
}
.cg-pill.is-soft { background: #f1f3f8; color: var(--muted); }
.cg-pill i { font-size: 10px; }

.cg-all {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font-size: 13px; font-weight: 600; color: var(--brand);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cg-all i { font-size: 11px; transition: transform .22s; }
.cg-all:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateX(2px); }
.cg-all:hover i { transform: translateX(2px); }

.cg-kids {
  list-style: none; margin: 16px 0 0; padding: 0 0 0 15px;
  border-left: 1px dashed #dfe6d2;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px;
}
.cg-kids li {
  position: relative;
  animation: cgIn .45s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--k, 0) * 40ms);
}
.cg-kids li::before {
  content: ''; position: absolute; left: -15px; top: 50%; width: 15px; height: 1px;
  background: #dfe6d2; transition: background .22s;
}
.cg-kids li:hover::before { background: var(--accent, var(--brand)); }

.cg-kid {
  display: block; height: 100%; overflow: hidden; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.cg-kid:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 18px 30px -26px rgba(16,24,40,.9); }
.cg-kid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.cg-kid:hover img { transform: scale(1.07); }
.ck-name { display: block; padding: 8px 8px 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.ck-count {
  display: inline-block; margin: 6px 0 9px; font-size: 11px; font-weight: 700;
  color: var(--muted); background: #f1f3f8; border-radius: 999px; padding: 2px 9px;
  transition: background .22s, color .22s;
}
.cg-kid:hover .ck-count { background: var(--brand); color: #fff; }

.cg-solo { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

.cat-empty { text-align: center; color: var(--muted); padding: 46px 12px; }
.cat-empty i { display: block; font-size: 34px; color: #c7cdd8; margin-bottom: 10px; }
.cat-empty p { margin: 0; }

@media (max-width: 575px) {
  .cg-head { flex-wrap: wrap; }
  .cg-all { width: 100%; justify-content: center; }
  .cg-kids { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding-left: 12px; }
  .cg-kids li::before { left: -12px; width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-card, .cg-kids li { animation: none; }
  .cg-card::before, .cg-thumb img, .cg-kid, .cg-kid img, .cg-kids li::before { transition: none; }
}

/* ------------------------------------------------------ section heads */
.section-head h4 { font-size: 23px; letter-spacing: -.3px; }
.view-all {
  border-radius: 999px;
  padding: 8px 20px;
}
.view-all:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

/* -------------------------------------------------------- product card */
.product-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .045);
}
.product-card:hover {
  border: 1px solid #dfe5ee;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .10);
  transform: translateY(-3px);
}
.product-card .thumb { border-radius: 0; }
.product-card .thumb img { transition: transform .45s ease, opacity .25s ease; }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .body { padding: 14px 15px 16px; }
.product-card .title { font-size: 15px; min-height: 42px; }
.badge-discount { box-shadow: 0 4px 12px rgba(130, 183, 53, .35); }

/* --------------------------------------------------------------- tables */
.table { --bs-table-border-color: #eaeef4; }
.table > :not(caption) > * > * { padding: .8rem .75rem; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: #f8fafc; }
.table thead th { font-size: .82rem; letter-spacing: .2px; color: #64748b; }

/* --------------------------------------------------------------- badges */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .75em; }

/* --------------------------------------------------------------- alerts */
.alert { border-radius: 12px; }

/* ----------------------------------------------------------- pagination */
.pagination { gap: 6px; flex-wrap: wrap; }
.pagination > li > a, .pagination > li > span {
  border-radius: 10px;
  min-width: 40px;
  text-align: center;
}
.pagination > li > a:hover { border-color: var(--ink); }

.shop-footer {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 18px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.shop-footer .toolbar-right { justify-content: flex-start; }
.shop-footer .pagination { margin-top: 0; }

.shop-prefs { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.shop-pref { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.shop-pref select {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  font-size: 13px; background: #fff; color: var(--ink); cursor: pointer;
}
.shop-toolbar { position: sticky; top: 0; z-index: 20; }

/* ---------------------------------------------------------- search bar */
.search-form { transition: box-shadow .18s ease, border-color .18s ease; }
.search-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(130, 183, 53, .20);
}
.action-link:hover .icon { transform: translateY(-1px); }

/* ----------------------------------------------------- toolbar & pills */
.shop-toolbar { box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.pill { border-radius: 10px; padding: 5px 12px; }
.pill:hover { border-color: var(--ink); }
.chips .chip { border-radius: 999px; }

/* ----------------------------------------------------------- hero slider */
.hero-slider { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); }
.hero-slider img { border-radius: 0; }

/* ------------------------------------------------------------ newsletter */
.newsletter-strip { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- hover image on cards */
.product-card .thumb { position: relative; }
.product-card .thumb .primary-img,
.product-card .thumb .secondary-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease;
}
.product-card .thumb .secondary-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .thumb .secondary-img { opacity: 1; }
.product-card:hover .thumb .primary-img { opacity: 0; }

/* ------------------------------------------------ clean fashion card v3 */
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; padding: 8px; height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.product-card:hover { border-color: var(--brand); box-shadow: 0 12px 28px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.product-card .thumb { border-radius: 8px; overflow: hidden; }
.product-card .thumb-link { display: block; position: relative; }
.product-card .thumb .primary-img,
.product-card .thumb .secondary-img { transition: opacity .25s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.product-card:hover .thumb .primary-img { transform: scale(1.05); }

.product-card .badge-discount {
  left: 10px; right: auto; top: 10px; width: auto; height: auto;
  border-radius: 20px; background: var(--brand); color: #fff;
  font-weight: 700; font-size: 12px; padding: 4px 10px;
  display: inline-block; line-height: 1.4;
}

/* save / mark button — always visible, top-right */
.wish-toggle { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.wish-btn {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line); cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.wish-btn:hover { transform: translateY(-1px); color: var(--brand); border-color: var(--brand); }
.wish-btn.is-on { background: #fff0f3; border-color: #f3b6c2; color: #e0245e; }

/* quick view / details — reveal as a row on hover */
.hover-actions { top: auto; bottom: 10px; right: 10px; flex-direction: row; opacity: 0; transform: translateY(8px); }
.product-card:hover .hover-actions { opacity: 1; transform: none; }

.product-card .body { padding: 10px 6px 6px; }
.product-card .rating-line { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0 8px; }
.product-card .rating-line .stars { font-size: 12px; }
.product-card .rating-line .count { color: var(--muted); }

.product-card .title {
  font-size: 14.5px; font-weight: 500; line-height: 1.35; min-height: 40px; margin: 4px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .title a { color: inherit; }

@media (max-width: 575px) {
  .wish-btn { width: 32px; height: 32px; }
  .product-card .title { font-size: 14px; }
}

/* --------------------------------------------------- sticky buy bar */
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(15,23,42,.08);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.sticky-buy.show { transform: none; }
.sticky-buy .inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.sticky-buy .sticky-thumb { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; }
.sticky-buy .sticky-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sticky-buy .sticky-price { color: var(--brand); font-weight: 700; }
.sticky-buy button {
  border: 0; background: var(--brand); color: #fff; border-radius: 6px;
  padding: 10px 22px; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sticky-buy button:hover { background: var(--brand-dark); }
@media (max-width: 575px) { .sticky-buy .sticky-name { display: none; } }

/* ------------------------------------------------- contact / chat widget */
.contact-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.contact-actions { display: flex; flex-direction: column; gap: 10px; }
.fab-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; text-decoration: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .25); transition: transform .18s ease, background .18s ease;
}
.fab-btn:hover { transform: translateY(-2px); }
.fab-btn.wa { background: #25d366; }
.fab-btn.call { background: #0d6efd; }
.fab-btn.chat { background: var(--brand); }

.contact-panel {
  width: min(330px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 50px -22px rgba(15, 23, 42, .55);
  transform: translateY(12px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.contact-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.contact-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--brand); color: #fff; }
.contact-panel-head strong { font-size: 14.5px; }
.contact-panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.quick-replies { display: flex; flex-direction: column; gap: 6px; }
.quick-reply {
  text-align: left; background: #f7f8fa; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px; color: var(--ink); cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.quick-reply:hover, .quick-reply.active { border-color: var(--brand); color: var(--brand); }
.quick-answer { background: var(--brand-soft); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; line-height: 1.55; }
.contact-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.contact-cta.wa { background: #25d366; }
.contact-cta.call { background: #0d6efd; }

/* product page WhatsApp order button */
.wa-order { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; background: #25d366; border-color: #25d366; color: #fff; }
.wa-order:hover { background: #1eb257; border-color: #1eb257; color: #fff; }

@media (max-width: 575px) {
  .fab-btn { width: 46px; height: 46px; font-size: 20px; }
  .contact-fab { right: 14px; bottom: 14px; }
}
body:has(.sticky-buy.show) .contact-fab { bottom: 84px; }

/* --------------------------------------------------------------- toast */
.sr-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 1060;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.sr-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* landing pages */
.lp-page { width: 100%; }
.lp-section { padding: 34px 0; }
.lp-heading { font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.lp-text { font-size: 15.5px; line-height: 1.75; max-width: 900px; }
.lp-hero {
  min-height: 420px; display: flex; align-items: center;
  background-size: cover; background-position: center; background-color: #0d1b2a;
  position: relative;
}
.lp-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 15, 27, .72), rgba(6, 15, 27, .25)); }
.lp-hero-inner { position: relative; color: #fff; max-width: 720px; padding: 40px 0; }
.lp-hero h1 { font-size: 38px; font-weight: 700; margin-bottom: 12px; }
.lp-hero p { font-size: 17px; opacity: .92; margin-bottom: 18px; }
.lp-image { width: 100%; border-radius: 12px; display: block; }
.lp-cta { padding: 40px 0; background: var(--brand-soft); }
.lp-cta h2 { font-size: 26px; margin-bottom: 8px; }
.lp-cta p { color: var(--muted); margin-bottom: 16px; }
.lp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }
.lp-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; }
.lp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
  .lp-hero { min-height: 300px; }
  .lp-hero h1 { font-size: 26px; }
  .lp-gallery { grid-template-columns: repeat(2, 1fr); }
  .lp-section { padding: 24px 0; }
}

/* editorial hero */
.lp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.lp-hero .lp-eyebrow { color: #fff; background: rgba(255, 255, 255, .18); }
.lp-hero-sub { font-size: 18px; opacity: .92; }
.lp-hero-split { padding: 64px 0; background: linear-gradient(180deg, #fff, #faf7f9); }
.lp-hero-split h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.15; margin-bottom: 14px; }
.lp-hero-split .lp-hero-copy p { color: var(--muted); font-size: 17px; }
.lp-hero-img { width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .4); }
@media (max-width: 991px) { .lp-hero-split { padding: 40px 0; } }

/* landing block wrappers / backgrounds */
.lp-block { position: relative; }
.lp-block.lp-pad-none { padding: 0; }
.lp-block.lp-pad-sm { padding: 14px 0; }
.lp-block.lp-pad-md { padding: 0; }
.lp-block.lp-pad-lg { padding: 28px 0; }
.lp-block.lp-tone-light,
.lp-block.lp-tone-light h1, .lp-block.lp-tone-light h2, .lp-block.lp-tone-light h3,
.lp-block.lp-tone-light p, .lp-block.lp-tone-light li, .lp-block.lp-tone-light span,
.lp-block.lp-tone-light strong { color: #fff; }
.lp-block.lp-full .container { max-width: 100%; padding-left: 24px; padding-right: 24px; }
body:has(.lp-page) .site-main { padding: 0; margin: 0; }

/* faq */
.lp-faq { max-width: 860px; }
.lp-faq details { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: #fff; }
.lp-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq details[open] summary { margin-bottom: 8px; }
.lp-faq details div { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* trust badges */
.lp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-trust-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.lp-trust-item i { color: var(--brand); font-size: 18px; }
@media (max-width: 767px) { .lp-trust { grid-template-columns: repeat(2, 1fr); } }

.lp-contact-btn { margin-top: 12px; }

/* landing conversion blocks */
.lp-features { list-style: none; padding: 0; margin: 0; max-width: 900px; }
.lp-features li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lp-features i { color: var(--brand); font-size: 18px; margin-top: 2px; }
.lp-features strong { display: block; font-size: 15px; }
.lp-features span { color: var(--muted); font-size: 14px; }

.lp-pricing { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.lp-price-was { color: var(--muted); text-decoration: line-through; font-size: 20px; }
.lp-price-now { color: var(--brand); font-weight: 800; font-size: 32px; }

.lp-order { padding: 26px; }
.lp-order-product img { width: 100%; border-radius: 10px; margin-bottom: 12px; }
.lp-order-product h4 { font-size: 18px; margin-bottom: 6px; }
.lp-order-product .lp-price-now { font-size: 24px; }

.lp-ship { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 8px 6px 0; font-size: 14px; cursor: pointer; }
.lp-ship input { margin: 0; }

.lp-summary { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fafbfc; }
.lp-summary > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.lp-summary-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px !important; font-size: 16px; }

.lp-float-cta {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1045;
  background: var(--brand); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .3); text-decoration: none; white-space: nowrap;
}
.lp-float-cta:hover { background: var(--brand-dark); color: #fff; }

.lp-call { padding: 34px 0; }
.lp-call h2 { font-size: 24px; margin-bottom: 6px; }
.lp-call p { color: var(--muted); margin-bottom: 12px; }
.lp-call-btn { display: inline-flex; align-items: center; gap: 10px; background: #0d6efd; color: #fff; font-size: 20px; font-weight: 700; padding: 12px 26px; border-radius: 999px; text-decoration: none; }
.lp-call-btn:hover { background: #0b5ed7; color: #fff; }

body:has(.lp-float-cta) .contact-fab { bottom: 84px; }

/* landing contact buttons (WhatsApp / Messenger / Call Now) */
.lp-contact-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1045; display: flex; flex-direction: column; gap: 10px; }
.lp-cbtn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; text-decoration: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .25); transition: transform .18s;
}
.lp-cbtn:hover { transform: translateY(-2px); color: #fff; }
.lp-cbtn.wa { background: #25d366; }
.lp-cbtn.msgr { background: #0084ff; }
.lp-cbtn.call { background: #0d6efd; }
@media (max-width: 767px) {
  .lp-cbtn { width: 46px; height: 46px; font-size: 20px; }
  .lp-contact-fab { right: 12px; bottom: 78px; }
}
@media (max-width: 767px) {
  .lp-price-now { font-size: 26px; }
  .lp-float-cta { bottom: 12px; width: calc(100% - 32px); text-align: center; }
}

/* combo products */
.badge-combo {
  display: inline-block; align-self: flex-start;
  background: var(--accent); color: #10310a;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  margin-bottom: 5px;
}
.combo-includes { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: #fafbfc; }
.combo-includes h6 { margin-bottom: 8px; font-size: 14px; }
.combo-includes ul { padding-left: 18px; margin: 0; }
.combo-includes li { font-size: 14px; margin-bottom: 4px; }

/* sold-out variant chips */
.option-chips label.is-soldout,
.option-chips input:disabled + label {
  opacity: .4; text-decoration: line-through; cursor: not-allowed;
}

/* =========================================================================
   Advanced landing design layer (v21)
   Animated backgrounds, colour motion, scroll reveal and premium blocks.
   Everything is scoped to .lp-page so the storefront is untouched.
   ========================================================================= */
.lp-page {
  --lp-aura: #7c3aed;
  --lp-ink: #0f172a;
  --lp-muted: #64748b;
  --lp-line: rgba(15, 23, 42, .09);
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
  --lp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -22px rgba(15, 23, 42, .35);
  --lp-shadow-lg: 0 40px 80px -48px rgba(15, 23, 42, .6);
  position: relative;
  isolation: isolate;
  background: #fff;
  color: var(--lp-ink);
  overflow-x: clip;
}
.lp-page .lp-section { padding: clamp(40px, 5.5vw, 84px) 0; }

/* ---- animated page background ------------------------------------------ */
.lp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.lp-bg span { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .5; will-change: transform; }

.lp-bg.lp-fx-aurora span:nth-child(1) { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: radial-gradient(circle at 35% 35%, var(--brand), transparent 70%); animation: lp-drift-a 20s var(--lp-ease) infinite; }
.lp-bg.lp-fx-aurora span:nth-child(2) { width: 40vw; height: 40vw; top: 6vw; right: -12vw; background: radial-gradient(circle at 60% 40%, var(--lp-aura), transparent 70%); animation: lp-drift-b 24s var(--lp-ease) infinite; }
.lp-bg.lp-fx-aurora span:nth-child(3) { width: 34vw; height: 34vw; bottom: -10vw; left: 30vw; background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 70%); animation: lp-drift-a 28s var(--lp-ease) infinite reverse; }

.lp-bg.lp-fx-mesh span:nth-child(1) { width: 40vw; height: 40vw; top: -8vw; left: 4vw; background: radial-gradient(circle at 40% 40%, var(--brand), transparent 68%); }
.lp-bg.lp-fx-mesh span:nth-child(2) { width: 36vw; height: 36vw; top: 22vw; right: -8vw; background: radial-gradient(circle at 55% 45%, var(--lp-aura), transparent 68%); animation: lp-drift-b 30s var(--lp-ease) infinite; }
.lp-bg.lp-fx-mesh span:nth-child(3) { width: 30vw; height: 30vw; bottom: -6vw; left: 28vw; background: radial-gradient(circle at 50% 50%, #f472b6, transparent 68%); animation: lp-drift-a 34s var(--lp-ease) infinite; }

.lp-bg.lp-fx-grid {
  background-image: linear-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}
.lp-bg.lp-fx-grid span:nth-child(1) { width: 34vw; height: 34vw; top: -6vw; left: 6vw; background: radial-gradient(circle at 50% 50%, var(--brand), transparent 70%); animation: lp-drift-a 26s var(--lp-ease) infinite; }
.lp-bg.lp-fx-grid span:nth-child(2) { width: 30vw; height: 30vw; top: 30vw; right: -6vw; background: radial-gradient(circle at 50% 50%, var(--lp-aura), transparent 70%); }

.lp-bg.lp-fx-dots {
  background-image: radial-gradient(rgba(15, 23, 42, .16) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  animation: lp-pan 40s linear infinite;
}
.lp-bg.lp-fx-dots span:nth-child(1) { width: 40vw; height: 40vw; top: -10vw; right: -8vw; background: radial-gradient(circle at 50% 50%, var(--brand), transparent 72%); animation: lp-drift-b 24s var(--lp-ease) infinite; }

.lp-bg.lp-fx-glow span:nth-child(1) { width: 70vw; height: 34vw; top: -16vw; left: 15vw; background: radial-gradient(ellipse at 50% 50%, var(--brand), transparent 68%); animation: lp-pulse 9s ease-in-out infinite; }
.lp-bg.lp-fx-glow span:nth-child(2) { width: 40vw; height: 26vw; top: 8vw; right: 6vw; background: radial-gradient(ellipse at 50% 50%, var(--lp-aura), transparent 70%); }

.lp-bg.lp-fx-waves span:nth-child(1) { left: -10%; right: -10%; top: auto; bottom: -30%; height: 60%; border-radius: 46%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 24%, transparent)); animation: lp-hue 18s linear infinite; }
.lp-bg.lp-fx-waves span:nth-child(2) { left: -10%; right: -10%; top: auto; bottom: -38%; height: 55%; border-radius: 42%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lp-aura) 22%, transparent)); animation: lp-hue 24s linear infinite reverse; }

.lp-bg.lp-fx-beams {
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 48px);
  animation: lp-beams 18s linear infinite;
}
.lp-bg.lp-fx-bokeh span:nth-child(1) { width: 22vw; height: 22vw; top: 8%; left: 6%; background: radial-gradient(circle, var(--brand), transparent 70%); animation: lp-drift-a 22s var(--lp-ease) infinite; }
.lp-bg.lp-fx-bokeh span:nth-child(2) { width: 16vw; height: 16vw; top: 42%; right: 10%; background: radial-gradient(circle, var(--lp-aura), transparent 70%); animation: lp-drift-b 26s var(--lp-ease) infinite; }
.lp-bg.lp-fx-spotlight span:nth-child(1) { width: 90vw; height: 64vw; top: -34vw; left: 5vw; background: radial-gradient(ellipse at 50% 50%, #ffffff, transparent 62%); opacity: .55; }

/* ---- hero --------------------------------------------------------------- */
.lp-hero { min-height: min(80vh, 680px); display: flex; align-items: center; background-size: cover; background-position: center; }
.lp-hero::before { background: linear-gradient(105deg, rgba(6, 15, 27, .9) 0%, rgba(6, 15, 27, .62) 52%, rgba(6, 15, 27, .3) 100%); }
.lp-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--brand) 48%, transparent), transparent 55%);
  animation: lp-pulse 8s ease-in-out infinite;
}
.lp-hero-inner { position: relative; z-index: 2; padding: clamp(56px, 8vw, 96px) 0; }
.lp-hero h1 { font-size: clamp(30px, 5.2vw, 58px); line-height: 1.08; letter-spacing: -.02em; }
.lp-gradient-text {
  background: linear-gradient(100deg, #fff 0%, #ffd9e8 30%, #fff 55%, #ffe6f1 80%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lp-shine 7s var(--lp-ease) infinite;
}
.lp-hero-img { animation: lp-float 8s ease-in-out infinite; }

/* ---- buttons ------------------------------------------------------------ */
.btn-primary-brand { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--lp-ease), box-shadow .3s var(--lp-ease); }
.btn-primary-brand::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: lp-sweep 4.2s var(--lp-ease) infinite; pointer-events: none;
}
.btn-primary-brand:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -20px var(--brand); }
.lp-page .btn-primary-brand { box-shadow: 0 14px 34px -20px var(--brand); }

/* ---- scroll reveal (only hides when JS is present) ---------------------- */
.lp-reveal { transition: opacity .8s var(--lp-ease), transform .8s var(--lp-ease); transition-delay: var(--lp-delay, 0ms); }
html.lp-js .lp-reveal { opacity: 0; transform: translateY(28px); }
html.lp-js .lp-reveal.is-visible { opacity: 1; transform: none; }
html.lp-js .lp-anim-fade.lp-reveal { transform: none; }
html.lp-js .lp-anim-zoom.lp-reveal { transform: scale(.93); }
html.lp-js .lp-anim-left.lp-reveal { transform: translateX(-34px); }
html.lp-js .lp-anim-right.lp-reveal { transform: translateX(34px); }

/* ---- block level effects ------------------------------------------------ */
.lp-block { position: relative; }
.lp-block.lp-has-fx { overflow: hidden; }
.lp-block > .lp-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-block > section { position: relative; z-index: 1; }
.lp-fx::before, .lp-fx::after { content: ''; position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; }
.lp-fx.lp-fx-aurora::before { width: 42%; height: 130%; top: -45%; left: -8%; background: radial-gradient(circle, var(--brand), transparent 70%); animation: lp-drift-a 22s var(--lp-ease) infinite; }
.lp-fx.lp-fx-aurora::after { width: 38%; height: 120%; top: -32%; right: -8%; background: radial-gradient(circle, var(--lp-aura), transparent 70%); animation: lp-drift-b 26s var(--lp-ease) infinite; }
.lp-fx.lp-fx-mesh::before { width: 34%; height: 90%; top: 5%; left: 6%; background: radial-gradient(circle, var(--brand), transparent 72%); }
.lp-fx.lp-fx-mesh::after { width: 30%; height: 84%; bottom: -12%; right: 8%; background: radial-gradient(circle, #22d3ee, transparent 72%); }
.lp-fx.lp-fx-glow::before { width: 62%; height: 150%; top: -55%; left: 19%; background: radial-gradient(ellipse, var(--brand), transparent 70%); animation: lp-pulse 9s ease-in-out infinite; }
.lp-fx.lp-fx-grid::before, .lp-fx.lp-fx-dots::before, .lp-fx.lp-fx-glass::before {
  width: 100%; height: 100%; top: 0; left: 0; border-radius: 0; filter: none;
}
.lp-fx.lp-fx-grid::before { opacity: .55; background-image: linear-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px); background-size: 44px 44px; }
.lp-fx.lp-fx-dots::before { opacity: .55; background-image: radial-gradient(rgba(15, 23, 42, .14) 1.3px, transparent 1.3px); background-size: 22px 22px; }
.lp-fx.lp-fx-glass::before { opacity: 1; background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12)); }
.lp-fx.lp-fx-beams::before {
  width: 100%; height: 100%; top: 0; left: 0; border-radius: 0; filter: none; opacity: .55;
  background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--brand) 14%, transparent) 0 2px, transparent 2px 44px);
  animation: lp-beams 16s linear infinite;
}
.lp-fx.lp-fx-bokeh::before, .lp-fx.lp-fx-bokeh::after { border-radius: 50%; filter: blur(2px); opacity: .4; }
.lp-fx.lp-fx-bokeh::before { width: 130px; height: 130px; top: 12%; left: 8%; background: radial-gradient(circle, var(--brand), transparent 70%); animation: lp-bokeh 12s ease-in-out infinite; }
.lp-fx.lp-fx-bokeh::after { width: 84px; height: 84px; bottom: 14%; right: 10%; background: radial-gradient(circle, var(--lp-aura), transparent 70%); animation: lp-bokeh 16s ease-in-out infinite reverse; }
.lp-fx.lp-fx-spotlight::before { width: 72%; height: 150%; top: -50%; left: 14%; background: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .7), transparent 62%); filter: blur(26px); opacity: .6; animation: lp-pulse 10s ease-in-out infinite; }

@keyframes lp-beams { from { background-position: 0 0; } to { background-position: 280px 0; } }
@keyframes lp-bokeh { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -20px) scale(1.18); } }

/* ---- distinct section rhythm -------------------------------------------- */
.lp-page > .lp-block { position: relative; }
.lp-page > .lp-block + .lp-block::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .13), transparent);
}
.lp-page > .lp-block.lp-plain.lp-alt { background: linear-gradient(180deg, #fff, #f6f8fc 55%, #fff); }

/* ---- advanced design system --------------------------------------------- */
.lp-page { font-family: var(--lp-font, 'Hind Siliguri', 'Segoe UI', sans-serif); }
.lp-page .lp-section { padding: calc(clamp(40px, 5.5vw, 84px) * var(--lp-density, 1)) 0; }

/* background image overlay (colour per type, strength per section) */
.lp-block.lp-overlay::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--lp-ov-color, #060f1b); opacity: var(--lp-ov-opacity, .65); }
.lp-block.lp-overlay > section { z-index: 2; }
.lp-block.lp-overlay-dark { --lp-ov-color: #060f1b; }
.lp-block.lp-overlay-light { --lp-ov-color: #ffffff; }
.lp-block.lp-overlay-brand { --lp-ov-color: var(--brand); }

/* page background image overlay */
.lp-page.lp-page-overlay::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--lp-ov-color, #060f1b); opacity: var(--lp-ov-opacity, .5); }
.lp-page.lp-page-overlay-dark { --lp-ov-color: #060f1b; }
.lp-page.lp-page-overlay-light { --lp-ov-color: #ffffff; }
.lp-page.lp-page-overlay-brand { --lp-ov-color: var(--brand); }

/* section min-height */
.lp-block.lp-min-md > section, .lp-block.lp-min-lg > section, .lp-block.lp-min-full > section { display: flex; align-items: center; }
.lp-block.lp-min-md > section { min-height: 380px; }
.lp-block.lp-min-lg > section { min-height: 560px; }
.lp-block.lp-min-full > section { min-height: 92vh; }
.lp-block.lp-min-md > section > .container,
.lp-block.lp-min-lg > section > .container,
.lp-block.lp-min-full > section > .container { width: 100%; }

/* rounded "card" sections */
.lp-block.lp-radius-sm, .lp-block.lp-radius-md, .lp-block.lp-radius-lg {
  margin-left: auto; margin-right: auto;
  max-width: min(1280px, calc(100% - 28px));
  overflow: hidden;
}
.lp-block.lp-radius-sm { border-radius: var(--lp-radius-theme, 10px); }
.lp-block.lp-radius-md { border-radius: calc(var(--lp-radius-theme, 14px) * 1.4); }
.lp-block.lp-radius-lg { border-radius: calc(var(--lp-radius-theme, 14px) * 2); }

/* centred sections */
.lp-block.lp-align-center > section { text-align: center; }
.lp-block.lp-align-center .lp-heading::after { left: 50%; transform: translateX(-50%); }
.lp-block.lp-align-center .lp-features, .lp-block.lp-align-center .lp-text { margin-left: auto; margin-right: auto; }

/* section dividers */
.lp-divider { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; pointer-events: none; }
.lp-divider-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .18), transparent); }
.lp-divider-wave { height: 40px; background-image: radial-gradient(circle at 50% 100%, #fff 22px, transparent 23px); background-size: 62px 40px; background-repeat: repeat-x; background-position: bottom; }
.lp-divider-slant { height: 64px; background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* ---- stats --------------------------------------------------------------- */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.lp-stat { text-align: center; padding: 22px 14px; border: 1px solid var(--lp-line); border-radius: 16px; background: rgba(255, 255, 255, .86); box-shadow: var(--lp-shadow-sm); }
.lp-stat-value { display: block; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; background: linear-gradient(110deg, var(--brand), var(--lp-aura)); -webkit-background-clip: text; background-clip: text; color: var(--brand); -webkit-text-fill-color: transparent; }
.lp-stat-label { display: block; margin-top: 8px; color: var(--lp-muted); font-size: 13.5px; }

/* ---- steps --------------------------------------------------------------- */
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lp-step { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--lp-line); border-radius: 16px; padding: 18px; background: #fff; box-shadow: var(--lp-shadow-sm); transition: transform .35s var(--lp-ease); }
.lp-step:hover { transform: translateY(-4px); }
.lp-step-no { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--lp-aura)); }
.lp-step-body strong { display: block; font-size: 15.5px; }
.lp-step-body span { color: var(--lp-muted); font-size: 14px; line-height: 1.6; }

/* ---- image / review slider ----------------------------------------------- */
.lp-slider { position: relative; }
.lp-slider-track {
  position: relative;
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px 6px;
}
.lp-slider-track::-webkit-scrollbar { display: none; }
.lp-slide { flex: 0 0 clamp(240px, 74%, 560px); scroll-snap-align: center; }
.lp-slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; display: block; box-shadow: var(--lp-shadow-sm); }
.lp-slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--lp-ink);
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .6);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--lp-ease), color .25s var(--lp-ease);
}
.lp-slider-nav:hover { background: var(--brand); color: #fff; }
.lp-slider-nav.prev { left: -8px; }
.lp-slider-nav.next { right: -8px; }
.lp-slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.lp-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .2); cursor: pointer; transition: width .25s var(--lp-ease), background .25s var(--lp-ease); }
.lp-dot.is-active { width: 26px; background: var(--brand); }
.lp-slider.is-static .lp-slider-nav, .lp-slider.is-static .lp-slider-dots { display: none; }
@media (max-width: 575px) {
  .lp-slide { flex-basis: 88%; }
  .lp-slider-nav { display: none; }
}

/* ---- marquee ------------------------------------------------------------- */
.lp-marquee { overflow: hidden; margin-top: 6px; }
.lp-marquee-track { display: inline-flex; white-space: nowrap; animation: lp-marquee 26s linear infinite; }
.lp-marquee-track span { display: inline-block; padding: 12px 30px; font-size: clamp(20px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.01em; opacity: .92; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- before / after ------------------------------------------------------ */
.lp-ba { position: relative; max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: var(--lp-shadow-lg); --ba-pos: 50%; }
.lp-ba-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.lp-ba-before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.lp-ba-before .lp-ba-img { width: 100%; height: 100%; }
.lp-ba-handle { position: absolute; top: 50%; left: var(--ba-pos, 50%); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--lp-ink); display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(15,23,42,.5); pointer-events: none; z-index: 3; }
.lp-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.lp-ba-tag { position: absolute; top: 14px; z-index: 3; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15,23,42,.62); padding: 4px 11px; border-radius: 999px; }
.lp-ba-tag.before { left: 14px; }
.lp-ba-tag.after { right: 14px; }

/* ---- bento --------------------------------------------------------------- */
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-bento-card { position: relative; border: 1px solid var(--lp-line); border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--brand-soft), #fff); box-shadow: var(--lp-shadow-sm); min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s var(--lp-ease); }
.lp-bento-card:hover { transform: translateY(-5px); }
.lp-bento-card.is-wide { grid-column: span 2; }
.lp-bento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-bento-body { position: relative; z-index: 1; padding: 18px; }
.lp-bento-body strong { display: block; font-size: 17px; }
.lp-bento-body span { font-size: 13.5px; opacity: .9; }
.lp-bento-card:has(img) .lp-bento-body { background: linear-gradient(180deg, transparent, rgba(6, 15, 27, .78)); color: #fff; }

/* ---- bundle -------------------------------------------------------------- */
.lp-bundles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: stretch; }
.lp-bundle { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1.5px solid var(--lp-line); border-radius: 20px; padding: 26px 18px 20px; background: #fff; box-shadow: var(--lp-shadow-sm); transition: transform .35s var(--lp-ease), border-color .35s; }
.lp-bundle:hover { transform: translateY(-6px); border-color: var(--brand); }
.lp-bundle.is-featured { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-soft), #fff); box-shadow: 0 24px 60px -36px var(--brand); }
.lp-bundle-label { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.lp-bundle-qty { font-size: 30px; font-weight: 800; line-height: 1; }
.lp-bundle-qty span { font-size: 14px; font-weight: 600; color: var(--lp-muted); }
.lp-bundle-price { font-size: 22px; font-weight: 800; color: var(--brand); }
.lp-bundle .btn-primary-brand { margin-top: auto; padding: 10px 22px; }

/* ---- timeline ------------------------------------------------------------ */
.lp-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.lp-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--brand), var(--lp-aura)); opacity: .35; }
.lp-tl-item { position: relative; padding: 0 0 18px 52px; }
.lp-tl-dot { position: absolute; left: 7px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.lp-tl-card { border: 1px solid var(--lp-line); border-radius: 14px; padding: 16px 18px; background: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-tl-card strong { display: block; font-size: 15.5px; }
.lp-tl-card span { color: var(--lp-muted); font-size: 14px; line-height: 1.6; }

/* ---- quote --------------------------------------------------------------- */
.lp-quote { position: relative; max-width: 820px; margin: 0 auto; text-align: center; padding: 28px 20px; }
.lp-quote > i { font-size: 34px; color: var(--brand); opacity: .35; margin-bottom: 10px; display: block; }
.lp-quote blockquote { margin: 0; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; }
.lp-quote figcaption { margin-top: 16px; color: var(--lp-muted); font-size: 15px; }

/* ---- brands -------------------------------------------------------------- */
.lp-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; align-items: center; }
.lp-brand { display: grid; place-items: center; padding: 18px; border: 1px solid var(--lp-line); border-radius: 14px; background: #fff; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s, transform .3s; }
.lp-brand:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.lp-brand img { max-width: 100%; max-height: 54px; object-fit: contain; }

/* ---- promo banner -------------------------------------------------------- */
.lp-banner { position: relative; border-radius: 20px; overflow: hidden; background: #0f172a center/cover no-repeat; box-shadow: var(--lp-shadow-lg); }
.lp-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 15, 27, .86), rgba(6, 15, 27, .42)); }
.lp-banner-inner { position: relative; z-index: 1; padding: clamp(28px, 5vw, 64px); color: #fff; max-width: 620px; }
.lp-banner h2 { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.12; margin: 0 0 10px; }
.lp-banner p { color: rgba(255, 255, 255, .82); margin-bottom: 18px; }
.lp-banner .lp-eyebrow { color: #fff; background: rgba(255, 255, 255, .18); }

/* ---- featured product ---------------------------------------------------- */
.lp-featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; border: 1px solid var(--lp-line); border-radius: 22px; padding: 22px; background: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-featured-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; display: block; }
.lp-featured-body h3 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 10px; }
.lp-featured-body p { color: var(--lp-muted); line-height: 1.7; }
.lp-featured-price { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 18px; }

@media (max-width: 860px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-bento-card.is-wide { grid-column: span 2; }
}
@media (max-width: 767px) {
  .lp-featured { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento-card.is-wide { grid-column: auto; }
}

/* ---- headings / text ---------------------------------------------------- */
.lp-heading { position: relative; padding-bottom: 12px; letter-spacing: -.01em; font-size: clamp(22px, 2.6vw, 34px); }
.lp-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 62px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--lp-aura)); }
.text-center .lp-heading::after { left: 50%; transform: translateX(-50%); }

/* ---- features ----------------------------------------------------------- */
.lp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: none; }
.lp-features li { border: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); border-radius: 16px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); padding: 18px; transition: transform .4s var(--lp-ease), box-shadow .4s var(--lp-ease); }
.lp-features li:hover { transform: translateY(-6px); box-shadow: var(--lp-shadow-sm); }
.lp-features i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 17px; margin-top: 0; background: linear-gradient(135deg, var(--brand), var(--lp-aura)); box-shadow: 0 12px 26px -14px var(--brand); }

/* ---- trust badges ------------------------------------------------------- */
.lp-trust-item { border-radius: 14px; transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease); }
.lp-trust-item:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-sm); }
.lp-trust-item i { background: linear-gradient(135deg, var(--brand), var(--lp-aura)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- gallery ------------------------------------------------------------ */
.lp-gallery { gap: 14px; }
.lp-gallery img { border-radius: 14px; transition: transform .6s var(--lp-ease), box-shadow .6s var(--lp-ease); }
.lp-gallery img:hover { transform: scale(1.05); box-shadow: var(--lp-shadow-sm); }

/* ---- pricing ------------------------------------------------------------ */
.lp-pricing { flex-direction: column; gap: 2px; }
.lp-price-now { background: linear-gradient(110deg, var(--brand), var(--lp-aura), var(--brand)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: lp-shine 6s linear infinite; }

/* ---- reviews ------------------------------------------------------------ */
.lp-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-review { position: relative; border: 1px solid var(--lp-line); border-radius: 18px; background: rgba(255, 255, 255, .88); padding: 20px; box-shadow: var(--lp-shadow-sm); transition: transform .4s var(--lp-ease); }
.lp-review:hover { transform: translateY(-6px); }
.lp-review .stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; }
.lp-review .quote { font-size: 15px; line-height: 1.7; margin: 8px 0 0; }
.lp-review .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.lp-review .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.lp-review .who strong { display: block; font-size: 14px; }
.lp-review .who span { color: var(--lp-muted); font-size: 12px; }
@media (max-width: 860px) { .lp-reviews { grid-template-columns: 1fr; } }

/* ---- countdown ---------------------------------------------------------- */
.lp-countdown { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-countdown .cell { min-width: 84px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(150deg, #111827, #1f2937); color: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-countdown .num { display: block; font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-countdown .lbl { display: block; font-size: 12px; opacity: .7; margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; }

/* ---- CTA / call --------------------------------------------------------- */
.lp-cta { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0; color: #fff; background: linear-gradient(120deg, #0f172a, color-mix(in srgb, var(--brand) 62%, #0b1220)); }
.lp-cta h2 { color: #fff; font-size: clamp(24px, 3.4vw, 40px); }
.lp-cta p { color: rgba(255, 255, 255, .78); }
.lp-cta::before { content: ''; position: absolute; left: -10%; right: -10%; top: -30%; height: 70%; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 70%); animation: lp-pulse 9s ease-in-out infinite; }
.lp-cta > .container { position: relative; z-index: 1; }
.lp-call-btn { background: linear-gradient(120deg, var(--brand), var(--lp-aura)); box-shadow: 0 18px 40px -20px var(--brand); transition: transform .3s var(--lp-ease); }
.lp-call-btn:hover { transform: translateY(-2px); }

/* ---- FAQ ---------------------------------------------------------------- */
.lp-faq details { border-radius: 14px; transition: box-shadow .3s var(--lp-ease), border-color .3s var(--lp-ease); }
.lp-faq details[open] { box-shadow: var(--lp-shadow-sm); border-color: color-mix(in srgb, var(--brand) 30%, var(--lp-line)); }
.lp-faq summary { position: relative; padding-right: 28px; }
.lp-faq summary::after { content: ''; position: absolute; right: 6px; top: 8px; width: 8px; height: 8px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .3s var(--lp-ease); }
.lp-faq details[open] summary::after { transform: rotate(-135deg); }

/* ---- premium order form ------------------------------------------------- */
.lp-order { border-radius: 24px; border: 1px solid var(--lp-line); background: #fff; box-shadow: var(--lp-shadow-lg); padding: clamp(20px, 3vw, 36px); }
.lp-order .form-control, .lp-order .form-select { border-radius: 12px; padding: 12px 14px; border-color: var(--lp-line); }
.lp-order .form-control:focus, .lp-order .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.lp-order .form-control.is-invalid, .lp-order .form-select.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.lp-ship { border-radius: 14px; padding: 12px 16px; transition: border-color .25s var(--lp-ease), background .25s var(--lp-ease), box-shadow .25s var(--lp-ease); }
.lp-ship:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.lp-summary { border-radius: 16px; background: linear-gradient(180deg, #f8fafc, #fff); }
.lp-summary-total strong { color: var(--brand); font-size: 18px; }
.lp-order .btn-primary-brand.w-100 { padding: 14px; font-size: 17px; border-radius: 14px; }
.lp-reassure { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--lp-muted); }
.lp-reassure span { display: inline-flex; align-items: center; gap: 6px; }
.lp-reassure i { color: var(--brand); }
@media (min-width: 992px) { .lp-order .col-lg-5 { position: relative; } .lp-order-product { position: sticky; top: 92px; } }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes lp-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes lp-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-7%, 6%, 0) scale(.95); } }
@keyframes lp-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes lp-sweep { 0% { left: -60%; } 55%, 100% { left: 140%; } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lp-pulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .72; transform: scale(1.06); } }
@keyframes lp-hue { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(26deg); } }
@keyframes lp-pan { 0% { background-position: 0 0; } 100% { background-position: 260px 260px; } }

/* ---- smaller screens ---------------------------------------------------- */
@media (max-width: 767px) {
  .lp-page .lp-section { padding: 38px 0; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-hero-inner { padding: 56px 0; }
  .lp-bg span, .lp-fx::before, .lp-fx::after { filter: blur(46px); opacity: .42; }
}

/* ---- respect reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-page *, .lp-page *::before, .lp-page *::after { animation: none !important; transition: none !important; }
  html.lp-js .lp-reveal { opacity: 1 !important; transform: none !important; }
  .lp-gradient-text, .lp-price-now { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
}

/* =========================================================================
   Generic scroll reveal (site-wide, opt-in via [data-reveal]).
   Safe without JS: the html.js-reveal flag is only set by a header script.
   ========================================================================= */
[data-reveal] { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; }
  html.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Product detail page - modern, organised layout.
   Scoped to .pdp so the rest of the storefront is unaffected.
   ========================================================================= */
.pdp { --pdp-line: rgba(15, 23, 42, .09); --pdp-ease: cubic-bezier(.22, 1, .36, 1); }

/* breadcrumb */
.pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.pdp-crumbs a { color: var(--muted); }
.pdp-crumbs a:hover { color: var(--brand); }
.pdp-crumbs span { opacity: .45; }
.pdp-crumbs .current { color: var(--ink); font-weight: 600; opacity: 1; }

/* gallery */
.pdp-media { position: sticky; top: 84px; }
.pdp-main { position: relative; border: 1px solid var(--pdp-line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -46px rgba(15, 23, 42, .55); }
.pdp-main img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform .6s var(--pdp-ease); }
.pdp-main:hover img { transform: scale(1.03); }
.pdp-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; color: #fff; letter-spacing: .02em; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.pdp-badge.sale { background: linear-gradient(120deg, var(--brand), #e11d48); }
.pdp-badge.combo { left: auto; right: 14px; background: linear-gradient(120deg, #0f172a, #334155); }
.pdp-badge.out { left: auto; right: 14px; top: 54px; background: #334155; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.pdp-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; border: 2px solid transparent; background: #fff; cursor: pointer; transition: border-color .25s var(--pdp-ease), transform .25s var(--pdp-ease); }
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* buy column */
.pdp-buy { display: flex; flex-direction: column; gap: 18px; }
.pdp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.pdp-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.18; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.pdp-sub { color: var(--muted); margin-bottom: 10px; }
.pdp-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.pdp-rating .stars { color: #f59e0b; letter-spacing: 1px; }
.pdp-rating a { color: var(--muted); font-size: 13px; }
.pdp-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
.pdp-stock.in { color: #166534; background: #dcfce7; }
.pdp-stock.out { color: #991b1b; background: #fee2e2; }

.pdp-price-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--pdp-line); border-radius: 16px; padding: 16px 18px; background: linear-gradient(180deg, #fff, #fafbfc); }
.pdp-price { display: flex; align-items: baseline; gap: 12px; }
.pdp-price .now { font-size: 32px; font-weight: 800; color: var(--brand); background: linear-gradient(110deg, var(--brand), #e11d48); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pdp-price .was { color: var(--muted); text-decoration: line-through; }
.pdp-save { margin-left: auto; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; }
.pdp-sku { color: var(--muted); font-size: 13px; width: 100%; }

.pdp-desc { color: #4a5058; line-height: 1.75; margin: 0; }
.pdp-combo { border: 1px dashed var(--brand); border-radius: 16px; padding: 16px 18px; background: var(--brand-soft); }
.pdp-combo h6 { margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.pdp-combo ul { list-style: none; padding: 0; margin: 0; }
.pdp-combo li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.pdp-combo li strong { margin-left: auto; }

/* options */
.pdp-form .option-group { margin-bottom: 16px; }
.pdp-form .option-group > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pdp .option-chips label { border: 1.5px solid var(--pdp-line); background: #fff; border-radius: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: border-color .2s var(--pdp-ease), background .2s var(--pdp-ease), box-shadow .2s var(--pdp-ease); }
.pdp .option-chips label:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--pdp-line)); }
.pdp .option-chips input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.pdp .qty-box { border-radius: 12px; }
.pdp .qty-box button:hover { background: var(--brand-soft); color: var(--brand); }

.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pdp-actions .btn-primary-brand { flex: 1 1 200px; }
.pdp-actions .btn-outline-brand { flex: 1 1 160px; }
.pdp .btn-outline-brand { border-radius: 12px; transition: background .25s var(--pdp-ease), color .25s var(--pdp-ease); }
.pdp .btn-primary-brand { border-radius: 12px; }
.pdp .wa-order { border-radius: 12px; }
.pdp-notify { border: 1px solid var(--pdp-line); border-radius: 16px; padding: 16px; background: #fff; }
.pdp-notify h6 { margin-bottom: 10px; }

.pdp-assure { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pdp-assure li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--pdp-line); border-radius: 14px; padding: 12px 14px; background: #fff; transition: transform .3s var(--pdp-ease), box-shadow .3s var(--pdp-ease); }
.pdp-assure li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .5); }
.pdp-assure i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--brand), #e11d48); }
.pdp-assure strong { display: block; font-size: 13.5px; }
.pdp-assure span { color: var(--muted); font-size: 12px; }

/* description / info tabs */
.pdp-panels { margin-top: 48px; background: #fff; border: 1px solid var(--pdp-line); border-radius: 20px; padding: 6px 24px 24px; }
.pdp-panels .nav-tabs { border-bottom: 1px solid var(--pdp-line); gap: 4px; }
.pdp-panels .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-weight: 600; padding: 15px 4px; margin-right: 20px; background: none; }
.pdp-panels .nav-link:hover { color: var(--ink); border-bottom-color: var(--pdp-line); }
.pdp-panels .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; }

/* reviews */
.pdp-reviews { margin-top: 32px; background: #fff; border: 1px solid var(--pdp-line); border-radius: 20px; padding: 24px; }
.pdp-rating-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, var(--brand-soft), #fff); }
.pdp-rating-big { font-size: 34px; font-weight: 800; line-height: 1; color: var(--brand); }
.pdp-reviews .review-item { border: 1px solid var(--pdp-line); border-radius: 14px; padding: 16px; margin-bottom: 12px; background: linear-gradient(180deg, #fff, #fafbfc); }
.pdp-reviews .review-item p { color: #4a5058; }
.pdp-reviews .stars { color: #f59e0b; }

@media (max-width: 991px) {
  .pdp-media { position: static; }
}
@media (max-width: 575px) {
  .pdp-assure { grid-template-columns: 1fr; }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-price .now { font-size: 27px; }
  .pdp-save { margin-left: 0; }
}

/* ============================================== landing: extra sections */
.lp-specs { --bs-table-bg: transparent; margin: 0; }
.lp-specs th { width: 40%; font-weight: 600; background: #f7f8fa; color: #4b5563; }
.lp-specs th, .lp-specs td { padding: 11px 14px; border-color: #eceef2; }

.lp-compare { --bs-table-bg: transparent; margin: 0; text-align: center; }
.lp-compare th, .lp-compare td { padding: 12px 14px; border-color: #eceef2; vertical-align: middle; }
.lp-compare thead th { background: #f7f8fa; font-weight: 700; }
.lp-compare tbody th { width: 42%; text-align: left; font-weight: 600; color: #374151; }
.lp-compare-ours { background: rgba(194, 24, 91, .06); font-weight: 700; }
.lp-cmp-ok { color: #16a34a; }
.lp-cmp-no { color: #cbd5e1; }

.lp-sizechart { --bs-table-bg: transparent; margin: 0; text-align: center; }
.lp-sizechart th, .lp-sizechart td { padding: 11px 14px; border-color: #eceef2; }
.lp-sizechart thead th { background: #f7f8fa; font-weight: 700; }

.lp-payment { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lp-pay {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid #eceef2; border-radius: 14px; background: #fff;
}
.lp-pay i { font-size: 20px; color: var(--brand); }
.lp-pay strong { display: block; font-weight: 700; }
.lp-pay span { display: block; font-size: 13px; color: var(--muted); }

.lp-scarcity {
  max-width: 560px; margin: 0 auto; padding: 22px 20px;
  border: 1px solid #fde2e4; border-radius: 18px; background: #fff5f5;
}
.lp-scarcity-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.lp-scarcity-count { font-size: 13px; font-weight: 700; color: #b91c1c; }
.lp-scarcity-bar { height: 8px; border-radius: 99px; background: #fee2e2; overflow: hidden; }
.lp-scarcity-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f97316, #dc2626); }

.lp-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  background: #25d366; color: #fff; font-weight: 700; text-decoration: none;
}
.lp-whatsapp:hover { background: #1eb457; color: #fff; }
.lp-whatsapp i { font-size: 20px; }

/* ---------------------------------------- landing: delivery / coupon / proof */
.lp-delivery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lp-delivery-card {
  padding: 16px 18px; border: 1px solid #eceef2; border-radius: 14px;
  background: #fff; text-align: center;
}
.lp-delivery-card i { font-size: 22px; color: var(--brand); display: block; margin-bottom: 8px; }
.lp-delivery-card strong { display: block; font-weight: 700; }
.lp-delivery-charge { display: block; margin-top: 4px; font-weight: 700; color: #0f172a; }
.lp-delivery-time { display: block; font-size: 13px; color: var(--muted); }

.lp-coupon {
  max-width: 520px; margin: 0 auto; padding: 22px; text-align: center;
  border: 2px dashed #f59e0b; border-radius: 16px; background: #fffbeb;
}
.lp-coupon-code {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid #fde68a;
  font-weight: 800; letter-spacing: .5px;
}
.lp-coupon-copy {
  border: 0; background: var(--brand); color: #fff; font-size: 12px;
  padding: 5px 10px; border-radius: 8px; font-weight: 600; cursor: pointer;
}

.lp-guarantee {
  max-width: 640px; margin: 0 auto; padding: 22px;
  border: 1px solid #d1fae5; border-radius: 18px; background: #f0fdf4;
}
.lp-guarantee-head { display: flex; gap: 14px; align-items: center; }
.lp-guarantee-head i { font-size: 30px; color: #10b981; }
.lp-guarantee-head strong { display: block; font-size: 18px; font-weight: 800; }
.lp-guarantee-head span { display: block; font-size: 13px; color: #4b5563; }
.lp-guarantee-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-guarantee-list li { display: flex; gap: 10px; align-items: flex-start; }
.lp-guarantee-list i { color: #10b981; margin-top: 3px; }
.lp-guarantee-list strong { display: block; font-weight: 600; }
.lp-guarantee-list span { display: block; font-size: 13px; color: var(--muted); }

.lp-proof { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 640px; }
.lp-proof li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid #eceef2; border-radius: 12px; background: #fff;
}
.lp-proof-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex: 0 0 auto;
  animation: lpPulse 1.8s infinite;
}
@keyframes lpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.lp-proof strong { display: block; font-weight: 700; }
.lp-proof-place { display: block; font-size: 12.5px; color: var(--muted); }
.lp-proof-time { margin-left: auto; font-size: 12px; color: #9aa3b0; white-space: nowrap; }

.lp-announce { background: #0f172a; color: #fff; padding: 10px 0; font-size: 14px; }
.lp-announce .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lp-announce strong { font-weight: 700; }
.lp-announce a { color: #fbbf24; text-decoration: underline; font-weight: 600; }
.lp-announce-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }

.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 0; background: #fff;
  border-top: 1px solid #e6e8ec; box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
}
.lp-sticky-inner { display: flex; align-items: center; gap: 14px; }
.lp-sticky-text { flex: 1 1 auto; min-width: 0; }
.lp-sticky-text strong { display: block; font-size: 15px; font-weight: 700; }
.lp-sticky-text span { display: block; font-size: 12.5px; color: var(--muted); }
.lp-sticky-close {
  padding: 0 4px; border: 0; background: transparent;
  font-size: 22px; line-height: 1; color: #9aa3b0; cursor: pointer;
}
body.has-lp-sticky { padding-bottom: 84px; }

@media (max-width: 575px) {
  .lp-sticky .btn-primary-brand { padding: 9px 16px; font-size: 14px; }
  .lp-sticky-text span { display: none; }
}