/* =========================================================
   KEDSUN Healthcare — Design System & Homepage Styles
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --green-dark:  #064f3f;
    --green:       #137a4c;
    --green-600:   #0f6c42;
    --green-700:   #0a5e43;
    --orange:      #ff6328;
    --orange-light:#ff7a38;
    --mint-bg:     #eef8f2;
    --mint-100:    #e6f3ec;
    --cream:       #fdf8f2;

    --text:        #16251e;
    --muted:       #60736a;
    --line:        #e8efeb;
    --star:        #f5a623;

    --white:       #ffffff;
    --shadow-sm:   0 4px 14px rgba(16,60,42,.06);
    --shadow-md:   0 10px 28px rgba(16,60,42,.10);
    --radius:      10px;
    --radius-sm:   8px;
    --container:   1320px;

    --font:        'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* The hidden attribute must always win, even over display:flex/grid classes */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: #fff;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;            /* guard against accidental horizontal scroll on phones */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    font-weight: 700; font-size: 13px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: linear-gradient(135deg, #ff6328, #ff8548); color: #fff; box-shadow: 0 4px 14px rgba(255,99,40,.25); }
.btn-orange:hover { box-shadow: 0 10px 22px rgba(255,99,40,.38); }
.btn-outline { background: #fff; color: var(--green-dark); border: 1.5px solid rgba(6,79,63,.38); }
.btn-outline:hover { border-color: var(--green); color: var(--green); box-shadow: 0 6px 16px rgba(16,60,42,.10); }
.btn-green { background: linear-gradient(135deg, #17925b, #0f6c42); color: #fff; }
.btn-green:hover { box-shadow: 0 8px 18px rgba(15,108,66,.32); }

/* ---------- Section headers ---------- */
.section { padding: 28px 0; }
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.section-head h2 { font-size: 19px; margin: 0; font-weight: 800; color: #111c17; position: relative; padding-left: 13px; }
.section-head h2::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 74%; min-height: 15px; border-radius: 4px;
    background: linear-gradient(180deg, var(--orange), var(--green));
}
.view-all { color: var(--orange); font-weight: 700; font-size: 12px; }
.view-all:hover { text-decoration: underline; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-nav button, .arrow-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    display: grid; place-items: center; transition: .15s;
}
.carousel-nav button:hover, .arrow-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* =========================================================
   Announcement bar
   ========================================================= */
.announce {
    background: var(--green-dark); color: #dff2e8;
    font-size: 11.5px;
}
.announce .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 32px; gap: 20px;
}
.announce ul { display: flex; gap: 30px; overflow: hidden; }
.announce li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.announce i { color: var(--orange-light); font-size: 13px; }
.announce .app-link { font-weight: 600; color: #fff; }
.announce .ann-mini { display: none; }   /* shorter free-shipping text used on phones */

/* =========================================================
   Header / nav
   ========================================================= */
.header { background: #fff; box-shadow: 0 3px 18px rgba(16,60,42,.055); position: sticky; top: 0; z-index: 100; }
/* Desktop grid (matches mockup): row 1 = logo + nav; row 2 = search + account actions. */
.header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 24px; row-gap: 10px;
    padding-top: 20px; padding-bottom: 20px;
}
.logo {
    grid-column: 1; grid-row: 1 / span 2;
    display: flex; align-items: flex-start; align-self: start;
    gap: 0; font-weight: 800; font-size: 21px; color: var(--green-dark);
    margin-top: 0;
}
.logo .logo-mark {
    width: 132px;
    height: 64px;
    border-radius: 0;
    background: transparent;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    overflow: hidden;
    flex-shrink: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.logo .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo > span:not(.logo-mark) { display: none; }
.logo small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 2px; }

.main-nav { grid-column: 2 / span 2; grid-row: 1; display: flex; gap: 26px; align-items: center; padding-top: 4px; }
.main-nav a {
    font-size: 13px; font-weight: 700; color: var(--text);
    padding: 4px 0; position: relative; white-space: nowrap;
}
.main-nav a.active, .main-nav a:hover { color: var(--green); }
.main-nav a.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 2px; background: var(--orange); border-radius: 3px;
}
.main-nav .has-dropdown i { font-size: 11px; }

.header-search {
    grid-column: 2; grid-row: 2; justify-self: stretch;
    max-width: 560px; width: 100%; height: 46px; display: flex;
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
    background: #fff;
}
.header-search input {
    flex: 1; border: none; background: transparent; padding: 0 16px;
    font-size: 13.5px; outline: none; color: var(--text);
}
.header-search button { background: var(--green); color: #fff; padding: 0 18px; font-size: 14px; }

.header-actions { grid-column: 3; grid-row: 2; justify-self: end; display: flex; align-items: center; gap: 28px; }
.header-actions .action { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.header-actions .action i { font-size: 23px; color: var(--green-dark); }
.header-actions .ic-wrap { position: relative; display: inline-flex; margin-right: 4px; }
.header-actions .badge {
    position: absolute; top: -9px; right: -11px;
    background: var(--orange); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff;
}
.menu-toggle { display: none; font-size: 25px; color: var(--green-dark); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
    background: linear-gradient(105deg, #eef8f2 0%, #f4faf6 60%, #fbf2e8 100%);
    position: relative; overflow: hidden;
    min-height: 560px; display: flex; align-items: center;
}
/* Full-bleed photo background: slides stack and crossfade behind everything else */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%; opacity: 0;
    transition: opacity .9s ease;
}
.hero-slide.active { opacity: 1; z-index: 1; }
/* The bundled product-shot (herosection.png) isn't a lifestyle photo — it has
   its own dark vignette background, so it gets the old "inset on the right,
   never cropped" treatment instead of a full-bleed cover crop. */
.hero-slide.hero-slide-contain {
    object-fit: contain; object-position: right center;
    filter: drop-shadow(0 28px 38px rgba(6,79,63,.18));
}
/* Soft light-green wash over the left side so the headline stays readable
   over any photo, fading out toward the right so the photo still shows through. */
.hero-fade {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg,
        rgba(238,248,242,.96) 0%, rgba(238,248,242,.92) 26%,
        rgba(238,248,242,.55) 46%, rgba(238,248,242,.12) 64%, rgba(238,248,242,0) 78%);
}
/* Left-anchored inset that stays close to the true viewport edge — a
   centered max-width container here would push the copy toward the
   middle on wide/ultra-wide screens instead of hugging the left edge. */
.hero-inner { position: relative; z-index: 3; padding: 60px 4vw 60px calc(4vw + 48px); max-width: 100%; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: 46px; line-height: 1.14; margin: 0 0 11px; font-weight: 800; color: var(--green-dark); letter-spacing: 0; }
.hero .sub { color: var(--green-700); font-weight: 600; margin-bottom: 20px; font-size: 16px; }
.hero-badges { display: flex; gap: 30px; margin-bottom: 22px; flex-wrap: wrap; }
.hero-badges .b { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.hero-badges .b i {
    width: 40px; height: 40px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; color: var(--orange); box-shadow: 0 3px 12px rgba(16,60,42,.08);
    border: 1px solid rgba(19,122,76,.18); font-size: 18px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Prev/next arrows */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; z-index: 4;
    background: #fff; color: var(--green-dark); border: 1px solid rgba(16,60,42,.08);
    display: grid; place-items: center; font-size: 15px;
    box-shadow: 0 8px 20px rgba(16,60,42,.16); transition: .18s;
}
.hero-arrow:hover { background: var(--green); color: #fff; box-shadow: 0 10px 24px rgba(19,122,76,.35); }
.hero-arrow-left { left: 18px; }
.hero-arrow-right { right: 18px; }

/* Pagination dots */
.hero-dots {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; gap: 7px; z-index: 4;
}
.hero-dots button {
    width: 8px; height: 8px; border-radius: 6px; padding: 0;
    background: rgba(6,79,63,.3); transition: background .2s ease, width .25s ease;
}
.hero-dots button.active { background: var(--green); width: 22px; }

/* Feature cards float over the photo on the right edge (per mockup) */
.hero-feature-cards {
    position: absolute; right: 28px; top: 60px; bottom: 60px; z-index: 3;
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.feature-card {
    background: #fff; border-radius: 8px; padding: 18px 20px; box-shadow: 0 8px 25px rgba(16,60,42,.11);
    display: flex; align-items: center; gap: 12px; min-width: 156px;
}
.feature-card i { color: var(--green); font-size: 22px; }
.feature-card b { font-size: 12px; display: block; }
.feature-card span { font-size: 11px; color: var(--muted); }

/* =========================================================
   Category quick-nav row
   ========================================================= */
.cat-row { padding: 14px 0 12px; }
.cat-row-wrap { position: relative; }
/* Green circular scroll arrow at the right edge (per mockup) */
.cat-arrow {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--green); color: #fff; font-size: 17px;
    display: grid; place-items: center; box-shadow: 0 4px 12px rgba(30,138,90,.35);
    z-index: 2; transition: background .15s ease, transform .15s ease;
}
.cat-arrow:hover { background: var(--green-600); transform: translateY(-50%) scale(1.08); }
.cat-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 8px 42px 8px 0; scroll-behavior: smooth; position: relative; }
.cat-scroll::-webkit-scrollbar { height: 6px; }
.cat-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.cat-item {
    flex: 1 0 132px; text-align: center; padding: 13px 8px 14px;
    border-radius: 8px; background: var(--white); border: 1px solid #edf2ef;
    box-shadow: 0 8px 22px rgba(16,60,42,.06);
    transition: .18s; cursor: pointer;
}
.cat-item:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-item .ic {
    width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%;
    background: var(--mint-bg); display: grid; place-items: center;
    color: var(--green); font-size: 24px; overflow: hidden;
    transition: transform .18s ease;
}
.cat-item:hover .ic { transform: scale(1.08); }
.cat-item .ic img {
    width: 100%; height: 100%; object-fit: contain; padding: 6px;
    display: block;
}
.cat-item span { font-size: 12px; font-weight: 800; color: #17251f; }

/* =========================================================
   Product cards / carousels
   ========================================================= */
.product-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; }
.product-scroll::-webkit-scrollbar { height: 6px; }
.product-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

.product-card {
    flex: 0 0 142px; border: 1px solid #edf2ef; border-radius: 8px;
    background: #fff; overflow: hidden; transition: .18s; position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(19,122,76,.32); }
.product-thumb {
    height: 112px; background: #fff; position: relative;
    display: grid; place-items: center; color: var(--green-600); font-size: 42px;
}
.discount-badge {
    position: absolute; top: 7px; left: 7px;
    background: linear-gradient(135deg, #ff6328, #ff8548); color: #fff; font-size: 9.5px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px; box-shadow: 0 3px 8px rgba(255,99,40,.28);
}
.product-body { padding: 8px 11px 10px; display: flex; flex-direction: column; flex: 1; }
.product-name { font-size: 11.2px; font-weight: 700; margin: 0 0 5px; min-height: 32px; line-height: 1.35; }
.rating { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.rating .stars { color: var(--star); }
.rating .val { font-weight: 600; color: var(--text); }
.price-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.price-row .now { font-size: 14px; font-weight: 800; color: #111c17; }
.price-row .was { font-size: 10px; color: var(--muted); text-decoration: line-through; }
.price-row .off {
    font-size: 9.5px; color: var(--orange); font-weight: 800;
    background: #fff0e8; padding: 2px 6px; border-radius: 5px;
}
.add-cart {
    margin-top: auto; width: 100%; justify-content: center;
    padding: 7px 10px; font-size: 11px; gap: 6px; min-height: 30px;
    border-radius: 6px;
}
.add-cart i { font-size: 12px; }

/* Featured Medicines carousel: same enlarged card size as Best Selling */
.featured-scroll .product-card { flex: 0 0 288px; border-radius: 12px; }
.featured-scroll .product-thumb { height: 220px; font-size: 64px; }
.featured-scroll .discount-badge { font-size: 11px; padding: 4px 10px; }
.featured-scroll .product-body { padding: 14px 18px 16px; }
.featured-scroll .product-name { font-size: 14px; min-height: 40px; }
.featured-scroll .rating { font-size: 12.5px; margin-bottom: 10px; }
.featured-scroll .price-row { font-size: 14px; margin-bottom: 12px; }
.featured-scroll .price-row .now { font-size: 19px; }
.featured-scroll .price-row .was { font-size: 13px; }
.featured-scroll .price-row .off { font-size: 11px; padding: 3px 8px; }
.featured-scroll .card-actions { gap: 10px; }
.featured-scroll .card-actions .add-cart { padding: 12px 8px; font-size: 13px; min-height: 44px; border-radius: 8px; }

/* Category filter pills above the Best Selling row */
.bs-filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bs-pill {
    padding: 11px 20px; border-radius: 8px; border: 1px solid var(--line);
    background: #fff; color: var(--text); font-size: 13.5px; font-weight: 700;
    transition: .16s;
}
.bs-pill:hover { border-color: var(--green); color: var(--green-dark); }
.bs-pill.active { background: var(--green); border-color: var(--green); color: #fff; }

/* ---- Best Selling item (card on desktop, list row on mobile) ---- */
.bs-item {
    flex: 0 0 288px; border: 1px solid #edf2ef; border-radius: 12px;
    background: #fff; overflow: hidden; transition: .18s; position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.bs-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.bs-thumb {
    height: 220px; background: #fff; position: relative;
    display: grid; place-items: center; color: var(--green-600); font-size: 64px;
}
.bs-thumb .discount-badge { font-size: 11px; padding: 4px 10px; }
.bs-body { padding: 14px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.bs-item .product-name { font-size: 14px; min-height: 40px; }
.bs-item .rating {
    display: inline-flex; align-self: flex-start; gap: 5px; align-items: center;
    font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 10px; margin-bottom: 10px;
}
.bs-pack {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--text);
}
.bs-pack i { font-size: 10px; color: var(--muted); }
.bs-item .price-row { font-size: 14px; }
.bs-item .price-row .now { font-size: 19px; }
.bs-item .price-row .was { font-size: 13px; }
.bs-cart {
    width: auto; margin: 0 18px 18px; align-self: stretch; justify-content: center;
    padding: 12px 10px; font-size: 13.5px; min-height: 44px; border-radius: 8px;
}

/* =========================================================
   Why Choose Kedsun strip
   ========================================================= */
.why {
    background: linear-gradient(90deg, #ecf7f0, #f6fbf7);
    position: relative; overflow: hidden;
}
/* Decorative corners (per mockup): 3rd.png bottom-left, 4th.png bottom-right. */
.why::before {
    content: ''; position: absolute; left: -32px; bottom: -42px;
    width: 210px; height: 210px;
    background: url("../../images/pattern%20folder/3rd.png") no-repeat left bottom / contain;
}
.why::after {
    content: ''; position: absolute; right: -14px; bottom: -28px;
    width: 180px; height: 156px;
    background: url("../../images/pattern%20folder/4th.png") no-repeat right bottom / contain;
}
.why .container { position: relative; z-index: 1; }
/* Extra side padding keeps the 4-column content clear of the corner artwork. */
.why .container {
    display: grid; grid-template-columns: 230px 1fr; align-items: center;
    gap: 28px; padding: 48px 110px 48px 126px;
}
.why h2 { font-size: 24px; margin: 0; font-weight: 800; color: #17251f; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.why-item { display: flex; gap: 14px; align-items: center; }
.why-item .ic {
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
    background: #fff; display: grid; place-items: center; color: var(--green); font-size: 22px;
    box-shadow: 0 4px 14px rgba(16,60,42,.08); border: 1px solid rgba(19,122,76,.18);
}
.why-item b { font-size: 14.5px; display: block; margin-bottom: 3px; }
.why-item span { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: block; }

/* =========================================================
   Shop by Concern — photo-top feature cards
   ========================================================= */
.concern-feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.concern-feature-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; transition: .18s;
}
.concern-feature-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* Per-concern colors come in via --cc / --cc-bg inline custom properties */
.concern-feature-card .cf-photo {
    aspect-ratio: 4 / 3.3; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, var(--cc-bg, var(--mint-bg)) 0%, #fff 78%);
    overflow: hidden;
}
.concern-feature-card .cf-photo img { width: 62%; height: 62%; object-fit: contain; transition: transform .25s ease; }
.concern-feature-card .cf-photo i { font-size: 46px; color: var(--cc, var(--green)); }
.concern-feature-card:hover .cf-photo img { transform: scale(1.06); }
.cf-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cf-title { font-size: 17px; font-weight: 800; color: var(--green-dark); margin: 0 0 8px; line-height: 1.3; }
.cf-desc { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin: 0 0 16px; flex: 1; }
.cf-link {
    font-size: 13px; font-weight: 700; color: var(--text);
    display: inline-flex; align-items: center; gap: 7px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.cf-link i { font-size: 11px; color: var(--green); transition: transform .18s ease; }
.concern-feature-card:hover .cf-link i { transform: translateX(4px); }

/* =========================================================
   Shop By Brand — big square logo tiles
   ========================================================= */
.sbb-head { text-align: center; flex-direction: column; align-items: center; gap: 6px; }
.sbb-head h2 { font-size: 28px; padding-left: 0; }
.sbb-head h2::before { display: none; }
.sbb-head .view-all { font-size: 13px; }
.sbb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sbb-tile {
    aspect-ratio: 1 / 0.8; background: var(--cream); border: 1px solid var(--line);
    border-radius: 14px; display: grid; place-items: center; padding: 24px;
    transition: .18s; box-shadow: 0 8px 20px rgba(16,60,42,.05);
}
.sbb-tile:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sbb-tile img { max-width: 78%; max-height: 70%; object-fit: contain; }
.sbb-word { font-size: 22px; font-weight: 800; color: var(--green-dark); text-align: center; letter-spacing: .3px; }

/* =========================================================
   WHO-GMP card
   ========================================================= */
.gmp-card {
    background: linear-gradient(135deg, #f2fbf5, #e8f4ed);
    border-radius: 12px; padding: 44px 48px; position: relative; overflow: hidden;
    min-height: 220px; width: 100%;
}
/* Orange decorative corner shapes (per mockup) */
/* Decorative corner artwork (per mockup): saved pattern image */
.gmp-card::after {
    content: ''; position: absolute; right: -10px; bottom: -20px;
    width: 220px; height: 248px;
    background: url("../../images/pattern%20folder/5th.png") no-repeat right bottom / contain;
}
.gmp-card h3, .gmp-card p, .gmp-card .gmp-seals { position: relative; z-index: 1; }
.gmp-card h3 { color: var(--orange); margin: 0 0 12px; font-size: 30px; font-weight: 800; }
.gmp-card p { font-size: 17px; color: var(--text); margin: 0 0 30px; max-width: 420px; }
.gmp-seals { display: flex; gap: 16px; }
.gmp-seals .seal {
    width: 54px; height: 54px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; color: var(--orange); font-size: 21px; box-shadow: var(--shadow-sm);
}

/* =========================================================
   Crafting Stories — Instagram Reels carousel
   ========================================================= */
.reels-scroll {
    display: flex; gap: 16px; overflow-x: auto; padding: 2px 0 6px;
    scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.reels-scroll::-webkit-scrollbar { display: none; }
.reel-card {
    flex: 0 0 260px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
    background: #111; box-shadow: 0 8px 22px rgba(16,60,42,.1); position: relative;
    padding: 0; border: 0; display: block; transition: transform .18s ease;
}
.reel-card:hover { transform: translateY(-3px); }
.reel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0,0,0,.18); transition: background .18s ease;
}
.reel-play i {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92);
    color: var(--green-dark); display: grid; place-items: center; font-size: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.reel-card:hover .reel-play { background: rgba(0,0,0,.32); }

/* Lightbox: click a card to watch just the video, full-bleed, no Instagram chrome */
.reel-lightbox {
    position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
}
.reel-lightbox video { max-width: min(92vw, 420px); max-height: 88vh; border-radius: 10px; background: #000; }
.reel-lb-close {
    position: absolute; top: 18px; right: 20px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12);
    color: #fff; display: grid; place-items: center; font-size: 18px; transition: background .15s;
}
.reel-lb-close:hover { background: rgba(255,255,255,.24); }
.reel-lb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9);
    color: var(--green-dark); display: grid; place-items: center; font-size: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: background .15s;
}
.reel-lb-arrow:hover { background: #fff; }
.reel-lb-prev { left: 18px; }
.reel-lb-next { right: 18px; }
@media (max-width: 560px) {
    .reel-lb-prev { left: 6px; }
    .reel-lb-next { right: 6px; }
    .reel-lb-arrow { width: 38px; height: 38px; font-size: 14px; }
}

/* =========================================================
   Testimonials + blog
   ========================================================= */
.two-col { display: grid; grid-template-columns: 1.2fr .95fr; gap: 32px; align-items: start; }
/* min-width:0 lets these grid cells shrink so the scrollers inside actually scroll
   instead of stretching the whole page to their content width. */
.two-col > div { min-width: 0; }
.testi-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -ms-overflow-style: none; }
.testi-scroll::-webkit-scrollbar { display: none; }
.testi-card {
    flex: 0 0 320px;   /* fixed card width so the row stays a true single-line carousel at full section width */
    background: #fff; border: 1px solid #edf2ef;
    border-radius: 8px; padding: 18px 18px 16px;
    box-shadow: 0 8px 22px rgba(16,60,42,.055);
    position: relative; transition: .18s;
}
.testi-card::before {
    content: '\201C'; position: absolute; top: 4px; right: 14px;
    font-family: Georgia, 'Times New Roman', serif; font-size: 58px; line-height: 1;
    color: var(--mint-100); pointer-events: none;
}
.testi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(19,122,76,.28); }
.testi-card .stars { color: var(--star); margin-bottom: 10px; font-size: 13px; letter-spacing: 1px; }
.testi-card p { font-size: 13.5px; margin: 0 0 18px; color: #42534a; line-height: 1.55; }
.testi-user { display: flex; align-items: center; gap: 10px; }
.testi-user .avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mint-100);
}
.testi-user b { font-size: 14px; display: block; }
.testi-user span { font-size: 12px; color: var(--muted); }

/* Pagination dots under the testimonials — hidden per request */
.testi-dots { display: none; }
.testi-dots button {
    width: 9px; height: 9px; border-radius: 6px; padding: 0;
    background: #cfe0d6; transition: background .2s ease, width .25s ease;
}
.testi-dots button.active { background: var(--orange); width: 22px; }

/* Health Tips: vertical photo-top cards, 3 across (per mockup) */
.article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.article-card {
    display: flex; flex-direction: column; padding: 0; border: 1px solid #edf2ef;
    border-radius: 8px; overflow: hidden; transition: .18s; cursor: pointer;
    box-shadow: 0 8px 22px rgba(16,60,42,.055);
}
.article-card:hover { box-shadow: var(--shadow-md); border-color: var(--green); transform: translateY(-3px); }
.article-thumb {
    width: 100%; height: 104px; flex-shrink: 0;
    background: var(--mint-bg); display: grid; place-items: center; color: #fff; font-size: 30px;
}
.article-card .article-text { padding: 10px 12px 12px; min-width: 0; }
.article-card b {
    font-size: 11.8px; display: -webkit-box; line-height: 1.35;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card span { display: none; }   /* mockup shows title only; excerpt kept for article pages later */

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter { background: transparent; position: relative; overflow: hidden; padding: 14px 0 0; }
.newsletter .container {
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(255,99,40,.24);
}
/* Dot cluster on the right (per mockup) */
.newsletter::after {
    content: ''; position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
    width: 88px; height: 64px;
    background-image: radial-gradient(circle, #fff 45%, transparent 46%);
    background-size: 17px 17px; opacity: .35;
}
.newsletter .container {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 28px 36px; flex-wrap: wrap; position: relative; z-index: 1;
}
.newsletter .nl-text { display: flex; align-items: center; gap: 16px; color: #fff; }
.newsletter .nl-badge {
    width: 58px; height: 58px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; flex-shrink: 0;
}
.newsletter .nl-badge i { font-size: 26px; color: var(--orange); }
.newsletter h3 { margin: 0; font-size: 18px; font-weight: 800; }
.newsletter p { margin: 2px 0 0; font-size: 12.5px; opacity: .95; }
.nl-form { display: flex; background: #fff; border-radius: 999px; overflow: hidden; min-width: 430px; min-height: 46px; }
.nl-form input { flex: 1; border: none; padding: 13px 20px; outline: none; font-size: 12.5px; }
.nl-form button { background: var(--green); color: #fff; padding: 0 26px; font-weight: 700; font-size: 12.5px; }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: #063d33; color: #cfe0d7; padding: 42px 0 0; font-size: 12px; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .85fr 1fr .85fr 1.25fr; gap: 34px; padding-bottom: 34px; }
.footer .logo { color: #fff; margin-bottom: 14px; }
.footer .logo small { color: #9ec2b1; }
.footer p.about { color: #a9c6ba; line-height: 1.7; font-size: 11.5px; max-width: 245px; }
.footer h4 { color: #fff; font-size: 12.5px; margin: 0 0 16px; font-weight: 800; }
.footer li { margin-bottom: 9px; }
/* Footer link columns are <details> so they collapse into an accordion on
   mobile; desktop forces them open and hides the toggle affordance. */
.footer-col summary { list-style: none; cursor: pointer; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary h4 { margin: 0; display: flex; align-items: center; justify-content: space-between; }
.footer-col summary h4::after {
    content: '\f078'; font: 13px 'Font Awesome 6 Free'; font-weight: 900;
    color: #9ec2b1; transition: transform .2s ease;
}
.footer-col[open] summary h4::after { transform: rotate(180deg); }
@media (min-width: 769px) {
    .footer-col summary { cursor: default; pointer-events: none; }
    .footer-col summary h4::after { display: none; }
}
.footer a:hover { color: #fff; }
.footer .contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer .contact i { color: var(--orange-light); margin-top: 3px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1);
    display: grid; place-items: center; transition: .18s; font-size: 16px;
}
.footer-social a:hover { background: var(--orange); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    font-size: 12.5px; color: #9ec2b1;
}
/* Agency credit — reads as part of the copyright line until hovered. */
.footer-bottom .credit-link { color: inherit; text-decoration: none; }
.footer-bottom .credit-link:hover,
.footer-bottom .credit-link:focus-visible { color: #fff; text-decoration: underline; }

/* Admin entry point: deliberately faint — the shop owner knows it is there,
   a regular visitor's eye slides past it. Full opacity only on hover. */
.admin-chip {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    margin-left: 8px; padding: 2px 7px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
    color: #9ec2b1; font-size: 10px; font-weight: 500; text-decoration: none;
    opacity: .45; transition: opacity .18s, background .18s, border-color .18s, color .18s;
}
.admin-chip i { font-size: 9px; }
.admin-chip:hover,
.admin-chip:focus-visible {
    opacity: 1; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); color: #fff;
}

.pay-methods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-methods .pm {
    background: #fff; color: #333; border-radius: 5px; padding: 4px 8px; font-size: 11px; font-weight: 700;
}

/* =========================================================
   Mobile-only components (hidden on desktop by default)
   ========================================================= */
.mobile-only { display: none; }

/* "View All" tiles inside the category / brand grids — a light outline
   circle instead of a solid fill, so it reads as minimal as its neighbors
   instead of standing out as a heavy block. */
.cat-viewall { text-decoration: none; }
.cat-viewall .ic { background: var(--mint-bg); color: var(--green); border: 1.5px solid var(--green); font-size: 18px; }

/* Fixed bottom tab bar */
.bottom-nav {
    display: none;                       /* shown at mobile widths */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(16,60,42,.08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: flex-end;
}
.bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 500; color: var(--muted);
}
.bn-item i { font-size: 22px; }
.bn-item.active, .bn-item.active i { color: var(--orange); }
.bn-fab {
    width: 50px; height: 50px; border-radius: 50%; margin-top: -24px;
    background: var(--green); color: #fff; display: grid; place-items: center;
    font-size: 18px; box-shadow: 0 6px 14px rgba(30,138,90,.4); border: 3px solid #fff;
}
.bn-search span:last-child { color: var(--green); }

/* =========================================================
   Responsive
   ========================================================= */
/* ---- Tablet (769–992px): keep desktop header, stack the big grids ---- */
@media (max-width: 992px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .concern-feature-grid { grid-template-columns: repeat(3, 1fr); }
    .sbb-grid { grid-template-columns: repeat(3, 1fr); }
    .two-col { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Hamburger header + centered logo (≤900px) ---- */
@media (max-width: 900px) {
    .menu-toggle { display: block; grid-column: 1; grid-row: 1; }
    .logo { grid-column: 2; grid-row: 1; justify-self: center; }
    .main-nav { display: none; }               /* moves into the slide-in menu */
    .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
    .header-search { grid-column: 1 / span 3; grid-row: 2; max-width: 100%; justify-self: stretch; }
    .action-label { display: none; }            /* icons only */

    /* Tighten spacing so the cart never gets pushed off the right edge on phones —
       also trims the desktop header's generous 20px/20px vertical padding, which
       otherwise makes the mobile header noticeably tall/bulky. */
    .header .container { column-gap: 10px; row-gap: 8px; padding: 12px 14px; }
    .header-actions { gap: 15px; }
    .header-actions .action i { font-size: 20px; }
    .logo { font-size: 19px; gap: 8px; }
    .logo .logo-mark { width: 78px; height: 42px; font-size: 15px; }
}

/* ---- Full mobile / app layout (≤768px) ---- */
@media (max-width: 768px) {
    /* Announcement: two short messages that fit; drop the rest + app link */
    .announce li:nth-child(n+3) { display: none; }
    .announce .app-link { display: none; }
    .announce .ann-full { display: none; }
    .announce .ann-mini { display: inline; }
    .announce { font-size: 10.5px; }
    .announce .container { justify-content: center; padding: 0 12px; }
    .announce ul { gap: 14px; }

    /* Reveal mobile-only bits, add room for the bottom bar */
    .cat-viewall.mobile-only { display: block; }
    .sbb-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .sbb-tile { padding: 10px; aspect-ratio: 1 / 0.9; }
    .sbb-word { font-size: 12.5px; }
    .bottom-nav { display: flex; }
    body { padding-bottom: 68px; }

    .section { padding: 28px 0; }
    .section-head { margin-bottom: 16px; }
    .section-head h2 { font-size: 18px; }

    .gmp-card { padding: 26px 24px; min-height: 0; }
    .gmp-card h3 { font-size: 21px; }
    .gmp-card p { font-size: 14px; max-width: 78%; margin-bottom: 22px; }
    .gmp-card::after { width: 130px; height: 146px; }
    .gmp-seals .seal { width: 44px; height: 44px; font-size: 17px; }

    /* De-bulk: smaller buttons, icons and price text across mobile */
    .btn { padding: 9px 16px; font-size: 13px; gap: 6px; }
    .add-cart { padding: 8px 10px; font-size: 12px; }
    .add-cart i { font-size: 12px; }
    .discount-badge { font-size: 9.5px; padding: 2px 7px; }
    .rating { font-size: 11px; }
    .price-row .now { font-size: 15px; }
    .price-row .was { font-size: 11.5px; }
    .price-row .off { font-size: 11px; }
    .product-name { font-size: 13px; }
    .carousel-nav button, .arrow-btn { width: 30px; height: 30px; }
    .view-all { font-size: 12.5px; }

    /* Hero on mobile: the full-bleed "photo behind text" treatment doesn't
       work on a phone-width banner — go back to a compact rounded image
       card up top (like the app), with the copy stacked in normal flow
       below it instead of overlaid on the photo. */
    .hero { display: block; min-height: 0; padding: 0; }
    .hero-bg {
        position: relative; inset: auto; height: 200px; z-index: auto;
        border-radius: 0; overflow: hidden;
    }
    .hero-slide { object-fit: cover; object-position: center; }
    /* The bundled product-shot doesn't crop well — show it in full (letterboxed
       on the section's own gradient background) instead of cover-cropping it. */
    .hero-slide.hero-slide-contain { object-fit: contain; object-position: center; filter: none; }
    .hero-fade { display: none; }
    .hero-inner { position: static; z-index: auto; padding: 18px 20px 24px; }
    .hero-copy { max-width: 100%; }
    .hero-cta { flex-direction: column; width: 100%; gap: 10px; }
    .hero-cta .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
    .hero h1 { font-size: 24px; }
    .hero .sub { font-size: 13.5px; margin-bottom: 16px; }
    .hero-feature-cards { display: none; }
    .hero-arrow { width: 32px; height: 32px; font-size: 12px; }
    .hero-arrow-left { left: 10px; }
    .hero-arrow-right { right: 10px; }

    /* Trust badges: roomy enough that icons/text never touch — wraps to a
       second row on narrow phones instead of being forced into one cramped line. */
    .hero-badges { gap: 14px 10px; margin-bottom: 16px; flex-wrap: wrap; }
    .hero-badges .b { flex: 1 1 90px; min-width: 90px; gap: 8px; font-size: 10.5px; }
    .hero-badges .b i { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }

    /* Categories: 3-col grid, hide overflow items behind the View All tile.
       minmax(0,1fr) stops min-content from pushing the 3rd column offscreen. */
    .cat-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 8px 0; }
    .cat-hide-mobile { display: none; }
    .cat-item { flex: none; }

    /* Why Choose: the desktop 210px+1fr grid breaks on phones — stack it,
       drop the corner artwork, and card-ify each trust point. */
    .why .container { display: block; padding: 26px 20px; }
    .why::before, .why::after { display: none; }
    .why h2 { text-align: center; margin-bottom: 16px; font-size: 18px; }
    .why-grid { grid-template-columns: 1fr; gap: 12px; }
    .why-item:first-child { display: none; }
    .why-item {
        background: #fff; border-radius: 10px; padding: 12px 14px;
        box-shadow: 0 6px 16px rgba(16,60,42,.06); border: 1px solid #edf2ef;
    }
    .why-item b { font-size: 13px; }
    .why-item span { font-size: 11.5px; }

    /* Health concerns: peeking horizontal scroll of photo cards */
    .concern-feature-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
    .concern-feature-card { flex: 0 0 78%; }

    /* Featured Medicines: the desktop-size card (288px/220px thumb/19px price)
       has no mobile override anywhere, so it was carrying its full bulky desktop
       size straight onto phones — shrink it to a normal carousel card here. */
    .bs-filter-pills { gap: 8px; margin-bottom: 12px; }
    .bs-pill { padding: 8px 14px; font-size: 12.5px; }
    .featured-scroll .product-card { flex: 0 0 168px; border-radius: 8px; }
    .featured-scroll .product-thumb { height: 130px; font-size: 36px; }
    .featured-scroll .discount-badge { font-size: 9.5px; padding: 2px 7px; }
    .featured-scroll .product-body { padding: 8px 11px 10px; }
    .featured-scroll .product-name { font-size: 13px; min-height: 32px; }
    .featured-scroll .rating { font-size: 11px; margin-bottom: 6px; }
    .featured-scroll .price-row { font-size: 11px; margin-bottom: 8px; }
    .featured-scroll .price-row .now { font-size: 15px; }
    .featured-scroll .price-row .was { font-size: 11.5px; }
    .featured-scroll .price-row .off { font-size: 11px; padding: 2px 6px; }
    .featured-scroll .card-actions { gap: 6px; }
    .featured-scroll .card-actions .add-cart { padding: 8px 6px; font-size: 12px; min-height: 30px; border-radius: 6px; }

    /* Best Selling: same peeking-scroll vertical card as Featured Medicines
       (2 cards visible + a peek of the 3rd), not a full-width row list. */
    .bs-item { flex: 0 0 168px; border-radius: 8px; }
    .bs-thumb { height: 130px; font-size: 36px; }
    .bs-thumb .discount-badge { font-size: 9.5px; padding: 2px 7px; }
    .bs-body { padding: 8px 11px 10px; }
    .bs-item .product-name { font-size: 13px; min-height: 32px; margin-bottom: 4px; }
    .bs-item .rating { font-size: 11px; padding: 3px 8px; margin-bottom: 6px; }
    .bs-pack { display: none; }
    .bs-item .price-row { font-size: 11px; margin-bottom: 8px; }
    .bs-item .price-row .now { font-size: 15px; }
    .bs-item .price-row .was { font-size: 11.5px; }
    .bs-cart { margin: 0 11px 10px; padding: 8px 6px; font-size: 12px; min-height: 32px; border-radius: 6px; }

    /* Bottom bar: trimmer icons and labels */
    .bn-item { font-size: 10px; }
    .bn-item i { font-size: 17px; }
    .bn-fab { width: 46px; height: 46px; font-size: 16px; margin-top: -22px; }

    /* Testimonials: peeking horizontal scroll */
    .testi-card { flex: 0 0 84%; }

    /* Crafting Stories: smaller peeking reel cards */
    .reel-card { flex: 0 0 42%; }

    /* Health Tips: horizontal scroll of vertical (image-top) cards */
    .article-list { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
    .article-card { flex: 0 0 210px; flex-direction: column; align-items: stretch; margin-bottom: 0; padding: 0; overflow: hidden; }
    .article-thumb { width: 100%; height: 120px; border-radius: 0; }
    .article-card .article-text { padding: 12px; }

    /* Newsletter — stack, and kill the fixed min-widths that overflowed narrow phones */
    .newsletter .container { flex-direction: column; text-align: center; gap: 14px; padding: 26px 18px; }
    .newsletter .nl-text { flex-direction: column; gap: 8px; }
    .newsletter h3 { font-size: 18px; }
    .newsletter p { font-size: 12.5px; }
    .nl-text i { font-size: 26px; }
    .nl-form { min-width: 0; width: 100%; }
    .nl-form input { min-width: 0; }

    /* Footer: about + social, then each link group as a full-width
       collapsible accordion row (tap to expand), like a native app footer. */
    .footer-grid { grid-template-columns: 1fr; gap: 4px; }
    .footer-col { border-top: 1px solid rgba(255,255,255,.1); padding: 14px 0; }
    .footer-col[open] { padding-bottom: 6px; }
    .footer-col ul { margin-top: 12px; }
    .footer-col:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }
    .footer .contact { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; margin-top: 4px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 20px; }
    .pay-methods { gap: 8px; }
    .pay-methods .pm { padding: 3px 7px; font-size: 10px; }
}

/* ---- Small phones (≤440px) ---- */
@media (max-width: 440px) {
    .logo { font-size: 16px; }
    .logo .logo-mark { width: 66px; height: 36px; font-size: 14px; }
    .header-actions { gap: 16px; }
    .hero h1 { font-size: 21px; }
    .hero-bg { height: 170px; }
    .hero-badges { gap: 8px; }
    .hero-badges .b { font-size: 10px; }
    .concern-feature-card { flex: 0 0 88%; }
    .product-card { flex: 0 0 168px; }
    .product-thumb { height: 130px; font-size: 36px; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* Mobile slide-in nav */
.mobile-nav {
    position: fixed; top: 0; left: -290px; width: 280px; height: 100%;
    background: #fff; z-index: 200; box-shadow: 2px 0 20px rgba(0,0,0,.15);
    transition: left .25s ease; padding: 20px; overflow-y: auto;
}
.mobile-nav.open { left: 0; }
.mobile-nav a { display: block; padding: 12px 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
.mobile-nav .close { font-size: 24px; float: right; color: var(--muted); }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; display: none; }
.overlay.show { display: block; }

/* =========================================================
   Polish: accessibility, motion, snap, header shadow, back-to-top
   ========================================================= */

/* Skip link (keyboard/screen-reader users) */
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 300;
    background: var(--green-dark); color: #fff; padding: 10px 16px;
    border-radius: 8px; font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Visible focus ring for keyboard navigation */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid rgba(30, 138, 90, .55); outline-offset: 2px; border-radius: 6px;
}

/* Sticky-header elevation once the page is scrolled */
.header { transition: box-shadow .25s ease; }
.header.scrolled { box-shadow: 0 6px 22px rgba(16, 60, 42, .13); }

/* Snap the horizontal carousels for a nicer swipe feel */
.product-scroll, .cat-scroll, .testi-scroll, .article-list { scroll-snap-type: x proximity; }
.product-card, .bs-item, .testi-card, .article-card, .cat-item { scroll-snap-align: start; }

/* Back-to-top button */
.back-to-top {
    position: fixed; right: 20px; bottom: 26px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--green); color: #fff; font-size: 16px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(30, 138, 90, .4);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--green-600); }
@media (max-width: 768px) {
    .back-to-top { display: none; }
}

/* Floating WhatsApp chat button — right side, stacked above Back to Top
   on desktop so the two never overlap. */
.whatsapp-float {
    position: fixed; right: 20px; bottom: 92px; z-index: 95;
    width: 52px; height: 52px; border-radius: 50%;
    background: #25d366; color: #fff; font-size: 28px;
    display: grid; place-items: center;
    box-shadow: 0 6px 18px rgba(37,211,102,.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(37,211,102,.55); }
@media (max-width: 768px) {
    .whatsapp-float { right: 14px; bottom: 82px; width: 46px; height: 46px; font-size: 24px; }
}

/* Scroll-reveal: containers fade their children in with a stagger.
   Gated behind .js so content is always visible when JavaScript is off. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
    .js .reveal.in { opacity: 1; transform: none; }

    .js [data-reveal] > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
    .js [data-reveal].in > * { opacity: 1; transform: none; }
    .js [data-reveal].in > *:nth-child(1) { transition-delay: .04s; }
    .js [data-reveal].in > *:nth-child(2) { transition-delay: .10s; }
    .js [data-reveal].in > *:nth-child(3) { transition-delay: .16s; }
    .js [data-reveal].in > *:nth-child(4) { transition-delay: .22s; }
    .js [data-reveal].in > *:nth-child(5) { transition-delay: .28s; }
    .js [data-reveal].in > *:nth-child(6) { transition-delay: .34s; }
    .js [data-reveal].in > *:nth-child(7) { transition-delay: .40s; }
    .js [data-reveal].in > *:nth-child(8) { transition-delay: .46s; }
}

/* =========================================================
   Real product photos (admin-uploaded later): fit their tiles.
   Icons remain the fallback when a product has no image.
   ========================================================= */
.product-thumb img, .bs-thumb img, .cart-thumb img {
    width: 100%; height: 100%; object-fit: contain; padding: 10px;
}
.pdp-image img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; padding: 24px; }
/* The SVG art carries its own tinted tile — show it on white, not on mint */
.product-thumb:has(img), .bs-thumb:has(img), .cart-thumb:has(img), .pdp-image:has(img) { background: #fff; }
.suggest-item .s-thumb { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.suggest-item .s-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* =========================================================
   Hover-zoom on product/article imagery
   (targets both the icon placeholders and future real <img>s)
   ========================================================= */
.product-thumb :is(i, img), .bs-thumb :is(i, img), .article-thumb :is(i, img) {
    transition: transform .35s ease;
}
.product-card:hover .product-thumb :is(i, img) { transform: scale(1.18); }
.bs-item:hover .bs-thumb :is(i, img) { transform: scale(1.15); }
.article-card:hover .article-thumb :is(i, img) { transform: scale(1.15); }

/* =========================================================
   Loading skeletons (shimmer)
   .sk is set server-side and removed by JS once the page loads;
   gated behind .js so no-JS visitors never see skeletons.
   ========================================================= */
@keyframes sk-slide { to { transform: translateX(100%); } }

.js .sk :is(.product-thumb, .bs-thumb) { position: relative; overflow: hidden; background: #e9efeb; }
.js .sk :is(.product-thumb, .bs-thumb) > i { visibility: hidden; }
.js .sk :is(.product-thumb, .bs-thumb)::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: sk-slide 1.1s infinite;
}
.js .sk .discount-badge { visibility: hidden; }
.js .sk :is(.product-body, .bs-body) * { color: transparent !important; }
.js .sk :is(.product-name, .rating, .price-row) { background: #e9efeb; border-radius: 6px; }
.js .sk :is(.add-cart, .bs-cart) { background: #dfe8e2 !important; box-shadow: none; }
.js .sk :is(.add-cart, .bs-cart) i { visibility: hidden; }

/* =========================================================
   Page head + breadcrumb (listing / PDP / cart / wishlist)
   ========================================================= */
.page-head {
    background: linear-gradient(100deg, var(--mint-bg) 0%, #f6fbf7 55%, #fdf2e8 100%);
    padding: 22px 0 24px; position: relative; overflow: hidden;
}
.page-head::after {
    content: ''; position: absolute; right: -26px; top: 50%; transform: translateY(-50%);
    width: 150px; height: 150px; opacity: .15; pointer-events: none;
    background: url("../../images/pattern%20folder/2ndlogo.png") no-repeat center / contain;
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { margin: 6px 0 0; font-size: 27px; font-weight: 800; color: var(--green-dark); }
.breadcrumb { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb i { font-size: 9px; }
.breadcrumb span { color: var(--text); font-weight: 500; }

/* =========================================================
   Listing page: layout, filters, toolbar, grid
   ========================================================= */
.listing-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.listing-main { min-width: 0; }

.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.filters-head h3 { font-size: 16px; margin: 0; display: flex; gap: 8px; align-items: center; }
.filters-close { display: none; font-size: 24px; color: var(--muted); line-height: 1; }
.filter-group { border-top: 1px solid var(--line); padding: 12px 0; }
.filter-group h4 { margin: 0 0 8px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--green-dark); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; cursor: pointer; color: var(--text); }
.check input { accent-color: var(--green); width: 15px; height: 15px; }

.listing-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.filters-open { display: none; padding: 8px 14px; font-size: 13px; }
.result-count { margin: 0; font-size: 13.5px; color: var(--muted); }
.active-query { display: flex; align-items: center; gap: 6px; background: var(--mint-100); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; color: var(--green-dark); font-weight: 600; }
.active-query button { font-size: 16px; color: var(--muted); line-height: 1; }
.sort-wrap { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sort-wrap select {
    font-family: inherit; font-size: 13px; padding: 8px 10px;
    border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); outline: none;
}
.sort-wrap select:focus { border-color: var(--green); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.product-card.hide { display: none; }

/* Wishlist heart on cards */
.wish-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; color: var(--muted); font-size: 14px;
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
    transition: color .15s ease, transform .15s ease;
}
.wish-btn:hover { transform: scale(1.1); color: var(--orange); }
.wish-btn.active { color: var(--orange); }

/* =========================================================
   Empty states (no results / empty cart / empty wishlist)
   ========================================================= */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 54px; color: var(--mint-100); -webkit-text-stroke: 1px var(--green); margin-bottom: 16px; }
.empty-state h3 { font-size: 20px; margin: 10px 0 6px; }
.empty-state p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* =========================================================
   Product detail page
   ========================================================= */
.pdp-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.pdp-image {
    background: radial-gradient(circle at 50% 42%, #fff 0%, var(--mint-bg) 82%);
    border: 1px solid #edf2ef; border-radius: var(--radius);
    min-height: 380px; display: grid; place-items: center; position: relative;
    color: var(--green-600); font-size: 110px;
}
.pdp-image .discount-badge { font-size: 13px; padding: 5px 12px; top: 16px; left: 16px; }
.pdp-brand { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.pdp-info h1 { font-size: 28px; margin: 0 0 10px; }
.pdp-rating { margin-bottom: 14px; font-size: 13px; }
.pdp-price .now { font-size: 30px; }
.pdp-price .was { font-size: 16px; }
.pdp-price .off { font-size: 14px; }
.tax-note { font-size: 12px; color: var(--muted); margin: 2px 0 16px; }
.pdp-desc { font-size: 14.5px; line-height: 1.7; color: #3d4a43; margin: 0 0 22px; }

.pdp-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 40px; overflow: hidden; }
.qty-stepper button { width: 38px; height: 42px; font-size: 17px; color: var(--green-dark); background: var(--mint-bg); }
.qty-stepper button:hover { background: var(--mint-100); }
.qty-stepper input { width: 44px; border: none; text-align: center; font-size: 15px; font-weight: 600; outline: none; }
.pdp-add { padding: 12px 28px; font-size: 15px; }
.pdp-wish { position: static; width: 44px; height: 44px; font-size: 17px; border: 1.5px solid var(--line); box-shadow: none; }

.pdp-trust { display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.pdp-trust div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--green-dark); }
.pdp-trust i { color: var(--green); }
.related-block { margin-top: 46px; }

/* =========================================================
   Cart page
   ========================================================= */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cart-row {
    display: flex; gap: 16px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.cart-thumb {
    width: 76px; height: 76px; border-radius: 10px; flex-shrink: 0;
    background: var(--mint-bg); display: grid; place-items: center;
    color: var(--green-600); font-size: 28px;
}
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-weight: 600; font-size: 14.5px; display: block; margin-bottom: 4px; }
.cart-name:hover { color: var(--green); }
.cart-unit { font-size: 13px; color: var(--green-dark); font-weight: 600; margin-bottom: 8px; }
.cart-unit .was { color: var(--muted); font-weight: 400; text-decoration: line-through; margin-left: 6px; }
.cart-row .qty-stepper { width: max-content; }
.cart-row .qty-stepper button { height: 32px; width: 32px; font-size: 15px; }
.cart-row .qty-stepper input { width: 36px; font-size: 13.5px; }
.cart-line { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-line b { font-size: 16px; color: var(--green-dark); }
.cart-remove { color: var(--muted); font-size: 15px; transition: color .15s; }
.cart-remove:hover { color: #d64545; }

.cart-summary {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px; position: sticky; top: 96px;
}
.cart-summary h3 { margin: 0 0 14px; font-size: 17px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; }
.sum-row.save b { color: var(--green); }
.sum-row .free { color: var(--green); font-weight: 700; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 16px; font-weight: 700; }
.ship-note { font-size: 12px; color: var(--orange); background: #fff4ee; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.checkout-btn { width: 100%; justify-content: center; margin-top: 14px; }
.continue-link { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
.continue-link:hover { color: var(--green); }

/* =========================================================
   Toast + search suggestions
   ========================================================= */
.toast {
    position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px);
    background: var(--green-dark); color: #fff; font-size: 14px; font-weight: 500;
    padding: 12px 20px; border-radius: 40px; box-shadow: 0 8px 24px rgba(14,91,63,.35);
    display: flex; align-items: center; gap: 10px; z-index: 400;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease;
    max-width: calc(100vw - 40px);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast i { color: var(--orange-light); }

.header-search { position: relative; overflow: visible; }
.header-search input { border-radius: 40px 0 0 40px; }
.header-search button { border-radius: 0 40px 40px 0; }
.search-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 250;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-md); overflow: hidden;
}
.suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13.5px; }
.suggest-item:hover { background: var(--mint-bg); }
.suggest-item i { color: var(--green); width: 18px; text-align: center; }
.suggest-item .s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item .s-price { font-weight: 700; color: var(--green-dark); font-size: 13px; }
.suggest-all { display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 600; color: var(--orange); border-top: 1px solid var(--line); }
.suggest-all:hover { background: #fff4ee; }

/* =========================================================
   Responsive: listing / PDP / cart
   ========================================================= */
@media (max-width: 900px) {
    .listing-layout { grid-template-columns: 1fr; }
    .filters {
        position: fixed; top: 0; left: -320px; width: 300px; height: 100%;
        z-index: 200; border-radius: 0; overflow-y: auto; transition: left .25s ease;
    }
    .filters.open { left: 0; }
    .filters-close { display: block; }
    .filters-open { display: inline-flex; }
    .pdp-layout { grid-template-columns: 1fr; gap: 22px; }
    .pdp-image { min-height: 260px; font-size: 80px; }
    .pdp-info h1 { font-size: 22px; }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
}
@media (max-width: 768px) {
    .page-head h1 { font-size: 20px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .sort-wrap { margin-left: 0; width: 100%; }
    .sort-wrap select { flex: 1; }
    .toast { bottom: 84px; }   /* clear the bottom tab bar */
    .cart-row { flex-wrap: wrap; }
    .cart-line { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
    .pdp-add { flex: 1; justify-content: center; }
}

/* =========================================================
   PHASE A — new components
   ========================================================= */

/* ---- Real star ratings (fractional fill via --fill %) ---- */
.stars5 { position: relative; display: inline-block; line-height: 1; color: #d9e2dc; letter-spacing: 1px; font-size: 14px; }
.stars5 .s5-fill {
    position: absolute; left: 0; top: 0; width: var(--fill, 0%);
    overflow: hidden; white-space: nowrap; color: var(--star);
}
.testi-card .stars5 { font-size: 15px; }
.pdp-rating .stars5 { font-size: 16px; }
.rating-link { font-size: inherit; color: var(--muted); padding: 0; }
.rating-link:hover { color: var(--green); text-decoration: underline; }

/* ---- Rx (prescription required) chip ---- */
.rx-badge {
    position: absolute; bottom: 8px; left: 8px; z-index: 1;
    background: #2f6fce; color: #fff; font-size: 9.5px; font-weight: 800;
    padding: 2px 7px; border-radius: 6px; letter-spacing: .5px;
}
.rx-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: #eef4fd; color: #23539b; border: 1px solid #d6e4f7;
    font-size: 13px; line-height: 1.55; border-radius: 10px;
    padding: 10px 14px; margin: 0 0 16px;
}
.rx-note i { margin-top: 2px; }

/* ---- Header: categories dropdown ---- */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-block; padding: 4px 0; font-size: 14.5px; font-weight: 500; }
.nav-drop .dropdown {
    position: absolute; top: 100%; left: -14px; z-index: 160;
    min-width: 240px; padding-top: 12px;             /* hover bridge */
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-drop .dropdown-inner,
.nav-drop .dropdown > a:first-child { margin-top: 0; }
.nav-drop .dropdown a {
    display: flex; align-items: center; gap: 10px;
    background: #fff; padding: 10px 14px; font-size: 13.5px; font-weight: 500;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.nav-drop .dropdown a:first-of-type { border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding-top: 12px; }
.nav-drop .dropdown a:last-of-type { border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-bottom: 12px; box-shadow: var(--shadow-md); }
.nav-drop .dropdown a i { width: 18px; text-align: center; }
.nav-drop .dropdown a:hover { background: var(--mint-bg); color: var(--green); }
.nav-drop:hover .dropdown, .nav-drop:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: none;
}

/* Mobile slide-in nav: categories accordion */
.mnav-drop summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 6px; border-bottom: 1px solid var(--line);
    font-weight: 500; cursor: pointer; list-style: none;
}
.mnav-drop summary::-webkit-details-marker { display: none; }
.mnav-drop summary i { font-size: 11px; color: var(--muted); transition: transform .2s ease; }
.mnav-drop[open] summary i { transform: rotate(180deg); }
.mnav-drop a { padding-left: 18px !important; font-size: 14px; }
.mnav-drop a i { width: 16px; margin-right: 6px; font-size: 13px; }

/* ---- Footer link colors for contact anchors ---- */
.footer .contact a:hover { color: #fff; }

/* ---- Info / policy pages ---- */
.info-page { max-width: 820px; }
.info-updated { font-size: 12.5px; color: var(--muted); margin: 0 0 22px; }
.info-section { margin-bottom: 28px; }
.info-section h2 { font-size: 19px; margin: 0 0 10px; color: var(--green-dark); }
.info-section p { font-size: 14.5px; line-height: 1.75; color: #3d4a43; margin: 0 0 12px; }
.info-section ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.info-section li { font-size: 14.5px; line-height: 1.75; color: #3d4a43; margin-bottom: 6px; }
.about-intro { font-size: 17px; line-height: 1.7; color: var(--green-700); font-weight: 500; margin: 0 0 26px; max-width: 820px; }

/* About: stats + values + CTA */
.about-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    background: linear-gradient(90deg, var(--mint-100), #f4faf6);
    border-radius: var(--radius); padding: 26px; margin-top: 10px;
}
.about-stats .stat { text-align: center; }
.about-stats .stat + .stat { border-left: 1px solid rgba(6,79,63,.10); }
.about-stats b {
    display: block; font-size: 30px; font-weight: 800;
    background: linear-gradient(135deg, var(--green), var(--orange));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.about-stats span { font-size: 12.5px; color: var(--muted); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value-card {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; background: #fff;
    position: relative; overflow: hidden; transition: .18s;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.value-card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--green), var(--orange));
    opacity: 0; transition: opacity .18s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card:hover::after { opacity: 1; }
.value-card .ic {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-bg), var(--mint-100));
    display: grid; place-items: center; color: var(--green); font-size: 19px; margin-bottom: 12px;
}
.value-card b { display: block; font-size: 15px; margin-bottom: 6px; }
.value-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.about-cta {
    margin-top: 40px; background: var(--green-dark); color: #fff;
    border-radius: var(--radius); padding: 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.about-cta h3 { margin: 0 0 4px; font-size: 20px; }
.about-cta p { margin: 0; font-size: 13.5px; opacity: .85; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.contact-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    padding: 22px; text-align: center; transition: .18s; display: block;
}
.contact-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.contact-card .ic {
    width: 50px; height: 50px; border-radius: 50%; background: var(--mint-bg);
    display: grid; place-items: center; color: var(--green); font-size: 19px; margin: 0 auto 12px;
}
.contact-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.contact-card span { display: block; font-size: 13px; color: var(--green-700); font-weight: 500; word-break: break-word; }
.contact-card small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.contact-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 34px; align-items: start; }
.contact-form-wrap h2 { font-size: 20px; margin: 0 0 16px; }
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-aside {
    background: linear-gradient(155deg, var(--green-dark), #0a5e43);
    border-radius: var(--radius); color: #fff; padding: 26px 24px;
    position: relative; overflow: hidden;
}
.contact-aside::after {
    content: ''; position: absolute; right: -34px; bottom: -34px;
    width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.contact-aside h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; }
.ca-points { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; position: relative; z-index: 1; }
.ca-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #dff2e8; }
.ca-points i {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,.10); color: var(--orange-light);
    display: grid; place-items: center; font-size: 13px;
}
.ca-points b { color: #fff; display: block; font-size: 13px; }
.contact-aside .btn { width: 100%; justify-content: center; position: relative; z-index: 1; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form input, .contact-form textarea {
    font-family: inherit; font-size: 14px; color: var(--text);
    border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 16px;
    outline: none; background: #fff; resize: vertical; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); }
.contact-form .btn { align-self: flex-start; }
.form-note { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; }
.form-note i { color: var(--orange); margin-top: 2px; }

/* FAQ accordion */
.faq-group { margin-bottom: 30px; }
.faq-group h2 { font-size: 18px; margin: 0 0 12px; color: var(--green-dark); }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.faq-item:hover { border-color: rgba(19,122,76,.35); box-shadow: 0 6px 16px rgba(16,60,42,.06); }
.faq-item summary {
    padding: 14px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--mint-bg); color: var(--green);
    display: grid; place-items: center; font-size: 16px; font-weight: 700;
    transition: .18s;
}
.faq-item[open] summary::after { content: '\2013'; background: var(--green); color: #fff; }
.faq-item[open] summary { color: var(--green-dark); }
.faq-item .faq-a { padding: 0 16px 14px; font-size: 14px; line-height: 1.7; color: #3d4a43; }
.faq-more { border-top: 1px solid var(--line); padding-top: 20px; font-size: 14.5px; color: var(--muted); }
.faq-more a { color: var(--orange); font-weight: 600; }
.faq-more a:hover { text-decoration: underline; }

/* ---- Blog listing + article page ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    overflow: hidden; transition: .18s; display: flex; flex-direction: column;
}
.blog-card:hover { box-shadow: var(--shadow-md); border-color: var(--green); transform: translateY(-3px); }
.blog-thumb { height: 150px; display: grid; place-items: center; color: #fff; font-size: 42px; position: relative; overflow: hidden; }
.blog-thumb i { transition: transform .3s ease; }
.blog-card:hover .blog-thumb i { transform: scale(1.16) rotate(-4deg); }
.blog-tag {
    position: absolute; top: 10px; left: 10px;
    background: rgba(255,255,255,.94); color: var(--green-dark);
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.blog-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.blog-body h3 { font-size: 15px; margin: 0; line-height: 1.45; }
.blog-body p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.blog-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: auto; }
.blog-meta i { margin-right: 4px; color: var(--green); }

.article-page { max-width: 780px; margin: 0 auto; }
.article-head h1 { font-size: 30px; line-height: 1.25; margin: 12px 0 12px; }
.article-banner {
    border-radius: var(--radius); height: 190px; margin: 22px 0 8px;
    display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 64px;
}
.article-body { font-size: 15px; line-height: 1.85; color: #33403a; }
.article-body h2 { font-size: 20px; margin: 30px 0 10px; color: var(--green-dark); }
.article-body p { margin: 0 0 14px; }
.disclaimer {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--mint-bg); border-left: 4px solid var(--green);
    border-radius: 10px; padding: 14px 16px; margin: 30px 0 0;
    font-size: 13px; color: var(--muted); line-height: 1.65;
}
.disclaimer i { color: var(--green); margin-top: 2px; }
.article-page .related-block { margin-top: 44px; }

/* ---- Brands page ---- */
.brandp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.brandp-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    padding: 24px 20px; text-align: center; transition: .18s;
}
.brandp-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.brandp-avatar {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--green), var(--green-600)); color: #fff;
    display: grid; place-items: center; font-size: 22px; font-weight: 800;
    box-shadow: 0 8px 18px rgba(15,108,66,.25);
    transition: transform .18s ease;
}
.brandp-card:hover .brandp-avatar { transform: scale(1.08) rotate(-4deg); }
.brandp-link i, .concernp-link i { transition: transform .18s ease; }
.brandp-card:hover .brandp-link i, .concernp-card:hover .concernp-link i { transform: translateX(4px); }
.brandp-card b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.brandp-count { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.brandp-link { font-size: 12.5px; color: var(--orange); font-weight: 600; }
.brandp-card:hover .brandp-link { text-decoration: underline; }

/* ---- Health concerns page ---- */
.concernp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.concernp-card {
    display: flex; gap: 18px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    padding: 20px; transition: .18s;
}
.concernp-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.concernp-card .ic {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    background: var(--cc-bg, var(--mint-bg)); color: var(--cc, var(--green));
    display: grid; place-items: center; font-size: 24px; overflow: hidden;
}
.concernp-card .ic img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.concernp-card b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.concernp-card p { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.6; }
.concernp-link { font-size: 12.5px; color: var(--orange); font-weight: 600; }
.concernp-card:hover .concernp-link { text-decoration: underline; }

/* ---- Offers page ---- */
.offer-banner {
    background: linear-gradient(100deg, #ff5a1f, var(--orange-light));
    border-radius: var(--radius); color: #fff; padding: 30px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-bottom: 26px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: 0 16px 34px rgba(255,99,40,.28);
}
.offer-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 22px, transparent 22px 44px);
}
.offer-banner > * { position: relative; z-index: 1; }
.offer-banner h2 { margin: 0 0 6px; font-size: 28px; font-weight: 800; }
.offer-banner p { margin: 0; font-size: 14px; opacity: .95; }
.offer-art { font-size: 58px; opacity: .4; transform: rotate(-8deg); }

/* ---- PDP info tabs ---- */
.pdp-tabs { margin-top: 44px; }
.tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tab-btn { padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; }
.tab-btn:hover { color: var(--green-dark); }
.tab-btn.active { color: var(--green-dark); }
.tab-btn.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px; background: var(--orange); border-radius: 3px;
}
.tab-panel { display: none; padding: 20px 2px; font-size: 14.5px; line-height: 1.75; color: #3d4a43; }
.tab-panel.active { display: block; }
.tab-panel p { margin: 0 0 12px; }
.spec-table { width: 100%; max-width: 560px; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.spec-table th { color: var(--muted); font-weight: 500; width: 42%; }
.spec-table a { color: var(--green); font-weight: 500; }
.spec-table a:hover { text-decoration: underline; }
.review-summary { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.review-avg { font-size: 46px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.review-count { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.review-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--mint-bg); border-radius: 10px; padding: 12px 14px;
    font-size: 13px; color: var(--muted);
}
.review-note i { color: var(--green); margin-top: 2px; }

/* ---- noscript message (cart / wishlist need JS) ---- */
.noscript-msg { text-align: center; padding: 60px 20px; }
.noscript-msg h3 { font-size: 20px; margin: 0 0 6px; }
.noscript-msg p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* =========================================================
   PHASE B — auth / account / checkout / prescription shells
   ========================================================= */

/* ---- Auth (login / signup) ---- */
.auth-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; max-width: 920px; margin: 0 auto;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.auth-side {
    background: linear-gradient(160deg, var(--green-dark), #0a5e43);
    color: #fff; padding: 34px 30px; display: flex; flex-direction: column; gap: 18px;
}
.auth-side .logo-mark { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; display: block; }
.auth-side .logo-mark img { width: 100%; height: 100%; }
.auth-side h2 { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 800; }
.auth-benefits { display: flex; flex-direction: column; gap: 12px; }
.auth-benefits li { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #dff2e8; }
.auth-benefits i {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,.10); color: var(--orange-light);
    display: grid; place-items: center; font-size: 13px;
}
.auth-guest { margin: auto 0 0; font-size: 12px; color: #a9c6ba; line-height: 1.6; }
.auth-guest a { color: #fff; font-weight: 700; }
.auth-guest a:hover { color: var(--orange-light); }

.auth-card { background: #fff; padding: 28px 30px; }
.auth-tabs { display: flex; gap: 6px; background: var(--mint-bg); border-radius: 999px; padding: 5px; margin-bottom: 22px; }
.auth-tab {
    flex: 1; padding: 9px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
    color: var(--muted); transition: .18s;
}
.auth-tab.active { background: #fff; color: var(--green-dark); box-shadow: 0 3px 10px rgba(16,60,42,.10); }
.auth-form { display: none; flex-direction: column; gap: 14px; }
.auth-form.active { display: flex; }
.auth-form label { font-size: 12.5px; font-weight: 600; color: var(--green-dark); display: block; }
.auth-form label input {
    display: block; width: 100%; margin-top: 6px;
    font-family: inherit; font-size: 14px; color: var(--text);
    border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px;
    outline: none; transition: border-color .15s;
}
.auth-form label input:focus { border-color: var(--green); }
.auth-row { display: flex; align-items: center; justify-content: space-between; }
.auth-row .check { font-size: 12.5px; padding: 0; }
.auth-link { font-size: 12.5px; color: var(--orange); font-weight: 600; padding: 0; }
.auth-link:hover { text-decoration: underline; }
.auth-submit { justify-content: center; width: 100%; padding: 12px; font-size: 14px; }
.auth-terms { font-size: 11.5px; color: var(--muted); margin: 0; text-align: center; }
.auth-terms a { color: var(--green); font-weight: 600; }
.auth-card .form-note { margin-top: 18px; }

/* ---- Account dashboard shell ---- */
.account-hero {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--mint-bg), #f6fbf7 60%, #fdf2e8);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 28px; margin-bottom: 26px;
}
.ah-avatar {
    width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--green), var(--green-600)); color: #fff;
    display: grid; place-items: center; font-size: 24px;
    box-shadow: 0 8px 18px rgba(15,108,66,.25);
}
.ah-text { flex: 1; min-width: 240px; }
.account-hero h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.account-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 640px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.account-tile {
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    padding: 22px 20px; transition: .18s; display: block;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.account-tile.is-live:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(19,122,76,.32); }
.account-tile .ic {
    width: 46px; height: 46px; border-radius: 12px; background: var(--mint-bg);
    display: grid; place-items: center; color: var(--green); font-size: 18px; margin-bottom: 12px;
}
.account-tile b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; margin-bottom: 6px; }
.account-tile p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.soon-chip {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    background: #fff0e8; color: var(--orange); border-radius: 20px; padding: 2px 8px;
}
.soon-chip.live { background: var(--mint-100); color: var(--green-700); }

/* ---- Checkout ---- */
.steps-bar { display: flex; gap: 8px; align-items: center; margin: 0 0 24px; flex-wrap: wrap; }
.steps-bar li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.steps-bar li span {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--line); color: var(--muted); font-size: 11.5px; font-weight: 800;
}
.steps-bar li.done, .steps-bar li.current { color: var(--green-dark); }
.steps-bar li.done span { background: var(--green); color: #fff; }
.steps-bar li.current span { background: var(--orange); color: #fff; }
.steps-bar li + li::before { content: ''; width: 34px; height: 2px; background: var(--line); border-radius: 2px; margin-right: 8px; }
.checkout-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.co-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.co-block h2 { display: flex; align-items: center; gap: 10px; font-size: 16.5px; margin: 0 0 16px; font-weight: 800; }
.co-num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); color: #fff; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800;
}
.co-hint { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 16px; }
.co-hint a { color: var(--green); font-weight: 600; }
.co-hint a:hover { text-decoration: underline; }
.co-address .check { font-size: 12.5px; }
/* keep checkboxes natural-sized — .contact-form input's width:100% must not stretch them */
.contact-form .check input { width: 15px; }
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pay-opt {
    display: flex; align-items: center; gap: 10px; cursor: not-allowed;
    border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px;
    font-size: 13.5px; font-weight: 600; color: var(--muted); background: #fafcfb;
}
.pay-opt i { color: var(--green); font-size: 16px; }
.pay-opt small { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.co-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 320px; overflow-y: auto; }
.co-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.co-thumb {
    width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
    background: var(--mint-bg); display: grid; place-items: center; color: var(--green-600);
}
.co-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.co-name { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.co-name small { display: block; color: var(--muted); font-weight: 500; margin-top: 2px; }
.co-item > b { color: var(--green-dark); }

/* ---- Prescription upload ---- */
.rx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.rx-step {
    position: relative; text-align: center; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 16px 20px;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.rx-step-num {
    position: absolute; top: 10px; left: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--mint-bg); color: var(--green-dark);
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.rx-step .ic {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--mint-bg), var(--mint-100));
    display: grid; place-items: center; color: var(--green); font-size: 20px;
}
.rx-step b { display: block; font-size: 14px; margin-bottom: 5px; }
.rx-step p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.55; }
.rx-upload-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.rx-picker { display: flex; flex-direction: column; gap: 14px; }
.rx-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 2px dashed rgba(19,122,76,.4); border-radius: var(--radius);
    background: var(--mint-bg); padding: 34px 20px; text-align: center;
    cursor: pointer; transition: .18s;
}
.rx-drop:hover { border-color: var(--green); background: var(--mint-100); }
.rx-drop i { font-size: 30px; color: var(--green); }
.rx-drop b { font-size: 14.5px; color: var(--green-dark); }
.rx-drop span { font-size: 12px; color: var(--muted); }
.rx-preview { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rx-preview img { max-height: 260px; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rx-file-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--mint-bg); border-radius: 10px; padding: 12px 16px;
    font-size: 13px; font-weight: 600; color: var(--green-dark);
}
.rx-file-chip i { color: #d64545; font-size: 18px; }
.rx-file-chip em { font-style: normal; }
.rx-remove { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.rx-remove:hover { color: #d64545; }
.rx-error { font-size: 12.5px; color: #b3261e; background: #fdecea; border-radius: 8px; padding: 9px 12px; margin: 0; }
.rx-picker [data-rx-submit] { align-self: flex-start; }
.rx-picker [data-rx-submit]:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.rx-rules {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
    box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.rx-rules h3 { display: flex; gap: 10px; align-items: center; font-size: 15.5px; margin: 0 0 14px; color: var(--green-dark); }
.rx-rules ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rx-rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #3d4a43; line-height: 1.5; }
.rx-rules li i { color: var(--green); margin-top: 2px; }
.rx-rules-note { font-size: 12px; color: var(--muted); margin: 0 0 16px; }

/* ---- Phase B responsive ---- */
@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-side { padding: 26px 22px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .rx-upload-layout { grid-template-columns: 1fr; }
    .rx-steps { grid-template-columns: repeat(2, 1fr); }
    .account-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .account-grid { grid-template-columns: 1fr; }
    .pay-options { grid-template-columns: 1fr; }
    .rx-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
    .steps-bar li + li::before { width: 16px; }
}

/* =========================================================
   POLISH ROUND 2 — Phase A + B visual upgrade
   ========================================================= */

/* ---- Policy pages: numbered section cards ---- */
.policy-page { counter-reset: psec; }
.policy-page .info-updated {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--mint-bg); color: var(--green-700); font-weight: 600;
    border-radius: 999px; padding: 7px 15px; font-size: 12px; margin: 0 0 20px;
}
.policy-page .info-updated::before {
    content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--green); font-size: 12px;
}
.policy-page .info-section {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px 14px; margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(16,60,42,.04);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.policy-page .info-section:hover { border-color: rgba(19,122,76,.30); box-shadow: 0 10px 24px rgba(16,60,42,.07); }
.policy-page .info-section h2 { display: flex; align-items: center; gap: 12px; font-size: 16.5px; margin-bottom: 12px; }
.policy-page .info-section h2::before {
    counter-increment: psec; content: counter(psec, decimal-leading-zero);
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--mint-bg), var(--mint-100));
    color: var(--green-dark); display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
}

/* ---- Blog: first article becomes a featured hero card ---- */
.blog-feat { grid-column: 1 / -1; flex-direction: row; }
.blog-feat .blog-thumb { width: 42%; height: auto; min-height: 230px; font-size: 68px; flex-shrink: 0; }
.blog-feat .blog-body { padding: 26px 30px; justify-content: center; }
.blog-feat h3 { font-size: 21px; line-height: 1.35; }
.blog-feat p { font-size: 14px; }

/* ---- Account tiles: each feature gets its own color identity ---- */
.account-grid .account-tile:nth-child(1) .ic { background: #2f6fce1a; color: #2f6fce; }
.account-grid .account-tile:nth-child(2) .ic { background: #d96aa01a; color: #d96aa0; }
.account-grid .account-tile:nth-child(3) .ic { background: #1f9e8e1a; color: #1f9e8e; }
.account-grid .account-tile:nth-child(4) .ic { background: #ef7f1a1a; color: #ef7f1a; }
.account-grid .account-tile:nth-child(5) .ic { background: #d645451a; color: #d64545; }
.account-grid .account-tile:nth-child(6) .ic { background: var(--mint-bg); color: var(--green); }
.account-hero { box-shadow: 0 10px 26px rgba(16,60,42,.06); }

/* ---- Prescription steps: chevron connectors between cards ---- */
.rx-step:not(:last-child)::after {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: -15px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #bcd6c8; z-index: 1;
}
@media (max-width: 900px) { .rx-step::after { display: none; } }

/* ---- Login: soft decorative circles on the brand panel ---- */
.auth-side { position: relative; overflow: hidden; }
.auth-side::before {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 170px; height: 170px; border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.auth-side::after {
    content: ''; position: absolute; right: -20px; top: 40px;
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(255,122,56,.14);
}
.auth-side > * { position: relative; z-index: 1; }

/* ---- Checkout: hairline under block headings ---- */
.co-block h2 { padding-bottom: 13px; border-bottom: 1px solid var(--line); }

/* ---- Empty states: icon in a friendly dashed circle ---- */
.empty-state i {
    font-size: 40px; color: var(--green); -webkit-text-stroke: 0;
    width: 108px; height: 108px; border-radius: 50%;
    background: var(--mint-bg); border: 2px dashed rgba(19,122,76,.35);
    display: inline-grid; place-items: center; margin-bottom: 18px;
}

/* ---- PDP: trust points as mint pills ---- */
.pdp-trust div {
    background: var(--mint-bg); border-radius: 999px; padding: 8px 15px;
}

/* ---- Micro-interactions ---- */
.btn i { transition: transform .18s ease; }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn:hover i.fa-upload, .btn:hover i.fa-paper-plane { transform: translateY(-2px); }
.gmp-seals .seal { transition: transform .18s ease; }
.gmp-seals .seal:hover { transform: scale(1.15) rotate(-6deg); }
.nl-form { transition: box-shadow .18s ease; }
.nl-form:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.cart-summary, .filters { box-shadow: 0 8px 22px rgba(16,60,42,.055); }

/* Hero feature cards float gently (skipped for reduced-motion users) */
@media (prefers-reduced-motion: no-preference) {
    @keyframes card-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-7px); }
    }
    .feature-card { animation: card-float 4.5s ease-in-out infinite; }
    .feature-card:nth-child(2) { animation-delay: 1.4s; }
    .feature-card:nth-child(3) { animation-delay: 2.8s; }
}

/* ---- Article page: reading progress bar ---- */
.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--green), var(--orange));
    z-index: 400; pointer-events: none;
}

/* ---- Round 2 responsive ---- */
@media (max-width: 768px) {
    .blog-feat { flex-direction: column; }
    .blog-feat .blog-thumb { width: 100%; min-height: 0; height: 160px; font-size: 46px; }
    .blog-feat .blog-body { padding: 14px 16px 16px; }
    .blog-feat h3 { font-size: 16px; }
    .policy-page .info-section { padding: 18px 16px 10px; }
}

/* ---- Customer accounts (Part A) ---- */
.shop-flash {
    display: flex; gap: 10px; align-items: center;
    background: #e8f6ee; color: #0f6c42; border: 1px solid #cdebd9;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
    font-size: 13px; font-weight: 600;
}
.shop-flash.err { background: #fdeeee; color: #c53030; border-color: #f5cccc; }
.auth-errors {
    background: #fdeeee; border: 1px solid #f5cccc; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 14px;
}
.auth-errors p { margin: 4px 0; font-size: 12.5px; color: #c53030; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.auth-errors i { margin-top: 2px; }

.account-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.account-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: 0 6px 18px rgba(16,60,42,.045);
}
.account-card h3 {
    font-size: 15px; margin: 0 0 16px; color: var(--green-dark);
    display: flex; gap: 10px; align-items: center;
}
.account-card h3 i { color: var(--green); }
.acc-label { display: block; font-size: 12px; font-weight: 700; color: var(--green-dark); margin-bottom: 2px; }
.acc-label small { font-weight: 500; color: var(--muted); }
.acc-label input { margin-top: 5px; }
.acc-label input:disabled { background: #f5f8f6; color: var(--muted); cursor: not-allowed; }
.account-card .btn { align-self: flex-start; }

@media (max-width: 768px) {
    .account-forms { grid-template-columns: 1fr; }
}

/* ---- Ordering (Part B): address book, payment, tracking ---- */
.addr-book { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.addr-card {
    display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: 10px; padding: 14px;
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.addr-card:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,122,76,.12); }
.addr-card input { accent-color: var(--green); margin-top: 3px; }
.addr-body b { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 3px; }
.addr-body span { display: block; font-size: 12px; color: #42534a; line-height: 1.5; }
.addr-body small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.addr-new .addr-body b { color: var(--green); }
.co-address-wrap.collapsed { display: none; }

.pay-opt.pay-live { border-color: rgba(19,122,76,.4); }
.pay-opt.pay-live:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(19,122,76,.12); background: #f6fbf8; }

.order-success {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, #e8f6ee, #f2fbf5);
    border: 1px solid #cdebd9; border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 18px;
}
.order-success .os-ic { font-size: 40px; color: var(--green); flex-shrink: 0; }
.order-success h2 { font-size: 19px; margin: 0 0 4px; color: var(--green-dark); }
.order-success p { margin: 0; font-size: 13px; color: #3d4a43; line-height: 1.65; }

.order-track { margin-bottom: 18px; }
.track-bar { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.track-bar li {
    flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted);
    position: relative; padding-top: 34px;
}
.track-bar li::before {
    content: ''; position: absolute; top: 13px; left: -50%; right: 50%;
    height: 3px; background: var(--line);
}
.track-bar li:first-child::before { display: none; }
.track-bar li.done::before, .track-bar li.current::before { background: var(--green); }
.tb-dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 27px; height: 27px; border-radius: 50%;
    background: #fff; border: 2px solid var(--line); color: var(--muted);
    display: grid; place-items: center; font-size: 11px; z-index: 1;
}
.track-bar li.done .tb-dot { background: var(--green); border-color: var(--green); color: #fff; }
.track-bar li.current { color: var(--green-dark); }
.track-bar li.current .tb-dot { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 4px rgba(19,122,76,.15); }
.order-cancelled { margin: 0; font-size: 14px; font-weight: 700; color: #c53030; display: flex; gap: 10px; align-items: center; }

.order-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.order-addr { font-size: 13.5px; line-height: 1.8; margin: 0 0 10px; color: #3d4a43; }

.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-row {
    display: flex; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; transition: .15s;
}
.order-row:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.or-ic {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: var(--mint-bg); color: var(--green); display: grid; place-items: center; font-size: 17px;
}
.or-main { flex: 1; min-width: 0; }
.or-main b { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 2px; }
.or-main span { font-size: 12px; color: var(--muted); }
.or-total { font-weight: 800; font-size: 15px; color: var(--green-dark); }
.or-go { color: var(--muted); font-size: 12px; }
.order-status { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.st-placed    { background: #fff0e8; color: var(--orange); }
.st-confirmed { background: #eaf1fc; color: #2f6fce; }
.st-shipped   { background: #f3effc; color: #7d5fd3; }
.st-delivered { background: #e8f6ee; color: #0f6c42; }
.st-cancelled { background: #f2f2f2; color: #888; }

@media (max-width: 768px) {
    .addr-book { grid-template-columns: 1fr; }
    .order-layout { grid-template-columns: 1fr; }
    .track-bar li { font-size: 10px; }
    .order-row { flex-wrap: wrap; }
    .or-total { margin-left: auto; }
}

/* ---- Part D: reviews, newsletter status ---- */
.review-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 4px; }
.review-item {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px;
}
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-who { font-weight: 700; font-size: 13px; color: var(--green-dark); }
.verified-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--mint-bg); color: var(--green-600);
    font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.review-date { margin-left: auto; font-size: 11px; color: var(--muted); }
.review-item p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: #3d4a43; }

.review-form-wrap { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; max-width: 560px; }
.review-form-wrap h3 { font-size: 15px; margin: 0 0 12px; color: var(--green-dark); }
.review-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.in-review {
    width: 100%; font-family: inherit; font-size: 13.5px; color: var(--text);
    border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
    outline: none; resize: vertical;
}
.in-review:focus { border-color: var(--green); }

/* Star rating input: reversed row so label:hover ~ label colors leading stars */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label {
    font-size: 26px; line-height: 1; color: #d9e2dc; cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.star-input label:hover { transform: scale(1.15); }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--star); }

/* Newsletter inline status */
.nl-form-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 430px; }
.nl-form-wrap .nl-form { min-width: 0; }
.nl-status {
    margin: 0; font-size: 12px; font-weight: 600; color: #fff;
    display: flex; gap: 7px; align-items: center;
    background: rgba(0,0,0,.14); border-radius: 999px; padding: 6px 14px;
}
.nl-status i { font-size: 13px; }
@media (max-width: 768px) {
    .nl-form-wrap { min-width: 0; width: 100%; }
}

/* ---- Part E: payment page ---- */
.pay-card {
    max-width: 460px; margin: 10px auto; text-align: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 28px; box-shadow: 0 10px 28px rgba(16,60,42,.08);
}
.pay-ic {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--mint-bg); color: var(--green);
    display: grid; place-items: center; font-size: 22px;
}
.pay-card h2 { font-size: 17px; margin: 0 0 4px; color: var(--green-dark); }
.pay-amount { font-size: 34px; font-weight: 800; color: var(--green-dark); margin: 4px 0 2px; }
.pay-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.pay-note {
    font-size: 12px; color: var(--muted); margin: 18px 0 0; line-height: 1.65;
    background: var(--mint-bg); border-radius: 10px; padding: 10px 14px; text-align: left;
    display: flex; gap: 8px; align-items: flex-start;
}
.pay-note i { color: var(--green); margin-top: 2px; }
.pay-note a { color: var(--green); font-weight: 700; }

/* =========================================================
   Uploaded-image containment: any admin-uploaded picture must
   scale to FIT its tile/card — never overflow it.
   ========================================================= */

/* Safety net: every container that can hold an uploaded image clips
   anything that would escape it, even if a specific rule is missed. */
.cat-item .ic, .concern-feature-card .cf-photo, .concernp-card .ic,
.sbb-tile, .brandp-avatar,
.product-thumb, .bs-thumb, .cart-thumb, .co-thumb,
.pdp-image, .suggest-item .s-thumb {
    overflow: hidden;
}

/* Brands page tiles: with a logo, the tile turns white so any logo
   artwork reads cleanly, and the image scales inside it. */
.brandp-avatar img {
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    object-fit: contain; padding: 6px;
}
.brandp-avatar.has-logo {
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(16,60,42,.08);
}

/* Uploaded art inside the small circular tiles keeps its aspect ratio. */
.cat-item .ic img, .concernp-card .ic img {
    max-width: 100%; max-height: 100%;
}

/* Text selection matches the brand */
::selection { background: rgba(19,122,76,.18); }

/* ---- Responsive for new components ---- */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cat-arrow { display: none; }   /* grid layout on mobile — arrow has nothing to scroll */
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
    .values-grid { grid-template-columns: 1fr; }
    .concernp-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .article-head h1 { font-size: 23px; }
    .article-banner { height: 140px; font-size: 46px; }
    .tab-nav { overflow-x: auto; flex-wrap: nowrap; }
    .tab-btn { white-space: nowrap; }
    .offer-banner h2 { font-size: 21px; }
}
@media (max-width: 440px) {
    .contact-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
}

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

/* =========================================================
   Account & checkout polish — profile header, stat pills,
   labeled address fields, richer address cards
   ========================================================= */
.account-hero { position: relative; overflow: hidden; padding: 30px; }
.account-hero::after {
    content: ''; position: absolute; right: -46px; top: -46px;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,127,26,.16), transparent 65%);
    pointer-events: none;
}
.account-hero > .btn { position: relative; z-index: 1; }
.ah-avatar {
    width: 76px; height: 76px; font-size: 30px; font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 10px 24px rgba(15,108,66,.28), 0 0 0 3px rgba(19,122,76,.14);
}
.ah-wave { font-size: 17px; }
.ah-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.ah-meta span { display: inline-flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ah-meta i { color: var(--green); font-size: 11px; }
.ah-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ah-stat {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 15px; font-size: 12px; font-weight: 700; color: var(--green-dark);
    box-shadow: 0 3px 10px rgba(16,60,42,.05); transition: .15s ease;
}
.ah-stat b { color: var(--orange); font-size: 14px; }
.ah-stat .fa-chevron-right { font-size: 9px; color: var(--muted); transition: transform .15s ease; }
a.ah-stat:hover { border-color: rgba(19,122,76,.4); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16,60,42,.1); }
a.ah-stat:hover .fa-chevron-right { transform: translateX(2px); }

/* Card headings: icon chip + dashed divider */
.account-card h3 { padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; }
.account-card h3 i {
    width: 34px; height: 34px; border-radius: 10px; background: var(--mint-bg);
    display: grid; place-items: center; font-size: 14px;
}

/* Labeled input fields (checkout address & friends) — a caption with an
   icon above each input reads far friendlier than bare placeholder boxes */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--green-dark);
}
.fld > span i { color: var(--orange); font-size: 11px; }
.fld input { width: 100%; }

/* Address cards: location chip, hidden radio, corner checkmark */
.addr-card { position: relative; padding: 16px 14px; }
.addr-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.addr-card .addr-ic {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--mint-bg); color: var(--green);
    display: grid; place-items: center; font-size: 14px; transition: .15s ease;
}
.addr-card:has(input:checked) .addr-ic { background: var(--green); color: #fff; }
.addr-card::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff;
    display: grid; place-items: center; font-size: 10px;
    opacity: 0; transform: scale(.5); transition: .15s ease;
}
.addr-card:has(input:checked)::after { opacity: 1; transform: scale(1); }
.addr-card:hover { border-color: rgba(19,122,76,.45); }
.addr-card:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.addr-new .addr-ic { background: #fff4ec; color: var(--orange); border: 1.5px dashed rgba(255,99,40,.5); }

@media (max-width: 768px) {
    .account-hero { padding: 22px 18px; }
    .ah-stats { gap: 8px; }
    .ah-stat { padding: 7px 12px; }
}

/* =========================================================
   Announcement bar — marquee mode (toggle in Admin → Announcements)
   ========================================================= */
.ann-viewport {
    flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.announce-marquee ul { overflow: visible; gap: 0; width: max-content; }
.announce-marquee li { padding: 0 24px; }
.announce-marquee ul.ann-run { animation: ann-scroll 30s linear infinite; }
.announce-marquee ul.ann-run:hover { animation-play-state: paused; }
/* Left-to-right: start pulled back half a track and slide forward. */
@keyframes ann-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .announce-marquee ul.ann-run { animation: none; }
}
@media (max-width: 768px) {
    /* marquee scrolls everything — don't hide items 3+ like the static bar */
    .announce-marquee li:nth-child(n+3) { display: flex; }
    .announce-marquee li { padding: 0 14px; }
}

/* =========================================================
   Mobile slide-in nav — slimmer panel, card-style links
   (was 280px wide with a ruled border under every row,
    which read like a notebook page)
   ========================================================= */
.mobile-nav {
    width: 240px; max-width: 72vw; left: -280px;
    padding: 14px 12px 24px;
    border-radius: 0 18px 18px 0;
}
.mobile-nav a,
.mnav-drop summary {
    border-bottom: none;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14px;
}
.mobile-nav a:hover, .mobile-nav a:active,
.mnav-drop summary:hover, .mnav-drop summary:active {
    background: var(--mint-bg); color: var(--green);
}
.mnav-drop a { padding-left: 24px !important; }
.mobile-nav .close {
    float: none; display: grid; place-items: center;
    width: 34px; height: 34px; margin: 0 0 10px auto;
    border-radius: 50%; background: #f2f5f3;
    font-size: 18px; line-height: 1; cursor: pointer;
}
.mobile-nav .close:hover { background: #e7eee9; color: var(--green-dark); }

/* Product card actions: Add to Cart (outline) + Buy Now (solid) pair on
   desktop; phones show only the classic Add to Cart (see media query) */
.card-actions { display: flex; gap: 7px; margin-top: auto; }
.card-actions .add-cart { margin-top: 0; width: auto; flex: 1; padding: 7px 4px; white-space: nowrap; }
.btn-cart-line { background: #fff; color: var(--green); border: 1.5px solid var(--green); box-shadow: none; }
.btn-cart-line:hover { background: var(--mint-bg); }

/* Product page: Buy Now (outline, Myntra-style) beside the solid Add to Cart */
.pdp-buy { padding: 12px 24px; font-size: 15px; background: #fff; color: var(--orange); border: 1.5px solid var(--orange); }
.pdp-buy:hover { background: #fff4ec; }

@media (max-width: 768px) {
    /* cards go back to a single classic Add to Cart button on phones */
    .card-actions .card-buy { display: none; }
    .card-actions .btn-cart-line { background: var(--green); color: #fff; border-color: var(--green); }
    /* product page: the two buttons split the row 50/50 like the app view */
    .pdp-buy, .pdp-add { flex: 1; justify-content: center; padding: 12px 8px; font-size: 14px; }
}

/* Wider desktop cards so the Add to Cart + Buy Now pair fits on one row
   (was 142px carousel / 165px grid — the pair needs ~200px). Phones keep
   their own smaller sizes from the mobile media queries above. */
@media (min-width: 769px) {
    .product-card { flex: 0 0 210px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
    .card-actions .add-cart { padding: 8px 6px; }
}