@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --ink: #16302B;
    --ink-soft: #4A5F5A;
    --teal: #0E6E62;
    --teal-dark: #0A4F46;
    --teal-tint: #E7F3F0;
    --base: #FBF9F4;
    --white: #FFFFFF;
    --coral: #FF6F59;
    --coral-dark: #E85641;
    --gold: #F2A94E;
    --gold-dark: #D98F32;
    --line: #E3E1D8;
    --shadow: 0 10px 30px rgba(22,48,43,0.08);
    --radius: 14px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin:0;
    background: var(--base);
    color: var(--ink);
    font-family: 'Public Sans', sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
}
h1,h2,h3,h4{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
p{ margin: 0 0 14px; color: var(--ink-soft); }
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; margin:0; padding:0; }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px;
}
.eyebrow::before{ content:""; width: 16px; height: 2px; background: var(--coral); border-radius: 2px; }

/* buttons */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    border: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
.btn-primary{ background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(255,111,89,0.35); }
.btn-primary:hover{ background: var(--coral-dark); transform: translateY(-2px); }
.btn-outline{ background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: #fff; }
.btn-ghost{ background: var(--teal-tint); color: var(--teal-dark); }
.btn-ghost:hover{ background: var(--teal); color: #fff; }
.btn-sm{ padding: 9px 16px; font-size: 13px; }
.btn-block{ width: 100%; }

/* announcement bar */
.announce{
    background: var(--teal-dark);
    color: #EFF8F5;
    font-size: 12.5px;
    text-align: center;
    padding: 8px 12px;
    letter-spacing: 0.02em;
}
.announce strong{ color: var(--gold); }

/* header */
.site-header{
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky; top:0; z-index: 40;
}
.header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 24px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
    width: 42px; height: 42px;
    display:block;
    flex-shrink:0;
}
.logo-text{ font-family:'Fraunces',serif; font-weight:700; font-size: 19px; line-height:1.1; color: var(--ink); }
.logo-text span{ display:block; font-family:'Public Sans',sans-serif; font-weight:600; font-size: 10.5px; letter-spacing:.1em; color: var(--teal); text-transform:uppercase; }
.search-bar{
    flex:1; max-width: 460px;
    display:flex; align-items:center; gap:10px;
    background: var(--teal-tint);
    border-radius: 999px;
    padding: 11px 18px;
    color: var(--ink-soft);
    font-size: 14px;
}
.header-actions{ display:flex; align-items:center; gap: 18px; }
.icon-btn{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:600; color: var(--ink); }
.icon-btn .badge{
    position:absolute; top:-6px; right:-10px;
    background: var(--coral); color:#fff; font-size:10px; font-weight:800;
    width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.cat-nav{ background: var(--teal); }
.cat-nav .container{ display:flex; gap: 6px; overflow-x:auto; padding-top:4px; padding-bottom:4px; }
.cat-nav a{
    color: #DCEFEA; font-size: 13.5px; font-weight: 600; padding: 10px 16px;
    border-radius: 8px; white-space:nowrap; transition: background .15s ease, color .15s ease;
}
.cat-nav a:hover, .cat-nav a.active{ background: rgba(255,255,255,0.14); color:#fff; }

/* hero */
.hero{
    position: relative;
    background: linear-gradient(180deg, var(--teal-tint) 0%, var(--base) 78%);
    padding: 64px 0 40px;
    overflow: hidden;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center; }
.hero h1{ font-size: 44px; line-height: 1.08; margin-bottom: 18px; }
.hero h1 em{ font-style: normal; color: var(--teal); }
.hero p.lead{ font-size: 16.5px; max-width: 460px; }
.hero-cta{ display:flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.hero-trust{ display:flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust div{ font-size: 12.5px; font-weight: 700; color: var(--ink-soft); display:flex; align-items:center; gap:8px; }
.hero-trust svg{ color: var(--teal); flex-shrink:0; }
.hero-art{
    position: relative;
    background: var(--white);
    border-radius: 26px;
    box-shadow: var(--shadow);
    padding: 20px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.hero-art .tile{
    border-radius: 16px;
    padding: 16px;
    min-height: 108px;
    display:flex; flex-direction:column; justify-content:flex-end;
    font-weight: 700; font-size: 13px;
}
.tile-teal{ background: var(--teal); color:#fff; grid-row: span 2; min-height: 232px; }
.tile-gold{ background: var(--gold); color: var(--ink); }
.tile-coral{ background: var(--coral); color:#fff; }

/* shelf tabs / category strip */
.shelf-strip{ padding: 46px 0 10px; }
.shelf-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.shelf-card{
    background:#fff; border-radius: var(--radius); padding: 20px;
    border: 1px solid var(--line); display:flex; align-items:center; gap:14px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.shelf-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.shelf-dot{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.dot-med{ background: var(--teal-tint); color: var(--teal); }
.dot-food{ background: #FCEED9; color: var(--gold-dark); }
.dot-care{ background: #FFE4DF; color: var(--coral-dark); }
.dot-new{ background: #EFEAF7; color: #6B4FA0; }
.shelf-card h4{ font-size: 14.5px; margin:0 0 2px; }
.shelf-card span{ font-size: 12px; color: var(--ink-soft); }

/* section heading row */
.sect-head{ display:flex; align-items:flex-end; justify-content:space-between; margin: 46px 0 22px; gap: 20px; flex-wrap:wrap; }
.sect-head h2{ font-size: 27px; margin:0; }

/* product grid + card */
.prod-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-card{
    background:#fff; border-radius: var(--radius); overflow:hidden;
    border: 1px solid var(--line); position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex; flex-direction:column;
}
.prod-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.prod-tab{ height:5px; width:100%; }
.tab-med{ background: var(--teal); }
.tab-food{ background: var(--gold); }
.tab-care{ background: var(--coral); }
.prod-thumb{ background: var(--teal-tint); aspect-ratio: 1/0.85; display:flex; align-items:center; justify-content:center; font-size: 40px; position:relative; }
.prod-badge{
    position:absolute; top:10px; left:10px; background: var(--ink); color:#fff;
    font-size: 10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    padding: 5px 9px; border-radius: 999px;
}
.prod-fav{
    position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
    background: rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:14px;
    border: none; cursor: pointer; padding: 0; color: var(--ink-soft); z-index: 2;
}
.prod-fav.is-saved{ color: var(--coral); }
.prod-fav:hover{ background: #fff; }
.prod-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.prod-cat{ font-size: 10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--teal); }
.prod-name{ font-size: 14.5px; font-weight:700; color: var(--ink); line-height:1.35; min-height: 38px; }
.prod-meta{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--ink-soft); }
.stars{ color: var(--gold-dark); font-size: 12px; }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.prod-price{ font-family:'Fraunces',serif; font-weight:700; font-size: 18px; color: var(--ink); }
.prod-price small{ font-family:'Public Sans',sans-serif; font-weight:600; font-size:12px; color:#B6ADA0; text-decoration: line-through; margin-left:6px; }
.add-btn{
    width:38px; height:38px; border-radius:50%; border:none; background: var(--ink); color:#fff;
    font-size:16px; cursor:pointer; transition: background .15s ease, transform .15s ease;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.add-btn:hover{ background: var(--coral); transform: scale(1.08); }

/* trust strip */
.trust-strip{ background: var(--teal); margin-top: 60px; padding: 34px 0; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; color:#fff; }
.trust-item{ display:flex; gap:12px; align-items:flex-start; }
.trust-item svg{ flex-shrink:0; margin-top:2px; color: var(--gold); }
.trust-item h5{ margin:0 0 3px; font-size:14px; font-weight:700; }
.trust-item p{ margin:0; font-size:12.5px; color:#CDE8E1; }

/* footer */
.site-footer{ background: var(--ink); color:#CFE0DB; padding: 54px 0 22px; margin-top: 0; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.foot-grid h5{ color:#fff; font-size: 13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; }
.foot-grid li{ margin-bottom: 9px; font-size: 13.5px; }
.foot-grid a:hover{ color:#fff; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 20px; font-size:12.5px; color:#8FA79F; flex-wrap:wrap; gap:10px; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }

/* full-width "go to cart" row - shown site-wide whenever the cart has items */
.cart-bottom-bar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--ink);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 46;
    box-shadow: 0 -8px 26px rgba(0,0,0,0.25);
    text-decoration: none;
}
.cart-bottom-bar .cbb-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.cbb-count{
    background: var(--coral); color:#fff; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; flex-shrink:0;
}
.cbb-text{ font-size:13.5px; font-weight:700; color:#fff; }
.cbb-sub{ font-size:12px; color:#AFC5BF; margin-top:1px; }
.cart-bottom-bar .btn{ flex-shrink:0; }
body.has-cart-bar{ padding-bottom: 82px; }
@media (max-width: 640px){
    .cart-bottom-bar{ bottom: 62px; }
    body.has-cart-bar{ padding-bottom: 146px; }
}

/* ===== Admin ===== */
.admin-body{ background: #F3F5F2; min-height:100vh; display:flex; font-family:'Public Sans',sans-serif; color: var(--ink); }
.admin-sidebar{ width: 240px; background: var(--ink); color:#CFE0DB; padding: 22px 16px; flex-shrink:0; min-height:100vh; }
.admin-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 30px; padding: 0 6px; }
.admin-brand .logo-mark{ width:34px; height:34px; font-size:15px; }
.admin-brand strong{ color:#fff; font-family:'Fraunces',serif; font-size:15px; }
.admin-nav a{ display:flex; align-items:center; gap:11px; padding: 11px 12px; border-radius: 10px; font-size: 13.5px; font-weight:600; margin-bottom:4px; color:#AFC5BF; }
.admin-nav a.active, .admin-nav a:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.admin-main{ flex:1; padding: 26px 32px 50px; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 26px; }
.admin-topbar h1{ font-size: 22px; margin:0; }
.admin-topbar p{ margin:2px 0 0; font-size:13px; }
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 28px; }
.stat-card{ background:#fff; border-radius: var(--radius); padding:18px 20px; border:1px solid var(--line); }
.stat-card .label{ font-size:12px; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.stat-card .value{ font-family:'Fraunces',serif; font-size:28px; font-weight:700; margin: 6px 0 4px; }
.stat-card .delta{ font-size:12px; font-weight:700; color: var(--teal); }
.stat-card .delta.down{ color: var(--coral); }
.admin-card{ background:#fff; border-radius: var(--radius); border:1px solid var(--line); padding: 20px 22px; }
.admin-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; flex-wrap:wrap; gap:10px; }
.admin-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.admin-table td{ padding: 12px; border-bottom: 1px solid var(--line); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.pill{ font-size:11px; font-weight:700; padding: 4px 10px; border-radius:999px; display:inline-block; }
.pill-green{ background:#E1F3ED; color: var(--teal-dark); }
.pill-amber{ background:#FCEFDA; color: var(--gold-dark); }
.pill-red{ background:#FDE4E0; color: var(--coral-dark); }
.pill-gray{ background:#EEECE5; color:#847C6E; }
.row-thumb{ width:38px; height:38px; border-radius:8px; background: var(--teal-tint); display:flex; align-items:center; justify-content:center; font-size:16px; }
.icon-action{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; justify-content:center; margin-right:6px; cursor:pointer; font-size:13px; }
.icon-action:hover{ background: var(--teal-tint); }
.form-field{ margin-bottom: 14px; }
.form-field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
    width:100%; padding: 10px 13px; border-radius:9px; border:1px solid var(--line); font-family:inherit; font-size:13.5px; background:#FCFCFA;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: 2px solid var(--teal-tint); border-color: var(--teal); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.upload-box{ border:1.5px dashed var(--line); border-radius:12px; padding: 22px; text-align:center; color: var(--ink-soft); font-size:12.5px; background:#FCFCFA; }
.modal-backdrop{ position:fixed; inset:0; background: rgba(22,48,43,0.45); display:none; align-items:center; justify-content:center; z-index:100; padding: 20px; }
.modal-backdrop.open{ display:flex; }
.modal-box{ background:#fff; border-radius:16px; width:560px; max-width:100%; max-height: 88vh; overflow-y:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 22px; border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; font-size:16px; }
.modal-close{ width:30px; height:30px; border-radius:50%; border:none; background: var(--teal-tint); cursor:pointer; font-size:14px; }
.modal-body{ padding: 20px 22px; }
.modal-foot{ padding: 16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(160deg, var(--teal-dark), var(--teal)); padding:20px; }
.login-card{ background:#fff; border-radius:20px; padding: 38px 34px; width: 380px; max-width:100%; box-shadow: 0 30px 60px rgba(0,0,0,0.25); }

/* ===== Shop by baby's age ===== */
/* ===== homepage banner carousel ===== */
.banner-carousel{ position: relative; }
.banner-carousel-viewport{
    overflow: hidden;
    border-radius: 18px;
}
.banner-carousel-track{
    display: flex;
    gap: 16px;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.banner-card{
    flex: 0 0 auto;
    display: block;
    width: 460px;
    height: 200px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--teal-tint);
}
.banner-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.banner-nav-prev{ left: 10px; }
.banner-nav-next{ right: 10px; }
.banner-nav:hover{ background: #fff; }
.banner-dots{
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}
.banner-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--line);
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, width .2s ease;
}
.banner-dot.active{ background: var(--teal); width: 22px; border-radius: 5px; }
@media (max-width: 640px){
    .banner-card{ width: 300px; height: 150px; }
    .banner-nav{ display: none; }
}

.age-strip{ padding: 8px 0 6px; }
.age-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.age-card{
    border-radius: var(--radius);
    padding: 22px 20px;
    color:#fff;
    position: relative;
    overflow: hidden;
    min-height: 118px;
    display:flex; flex-direction:column; justify-content:flex-end;
    transition: transform .18s ease;
}
.age-card:hover{ transform: translateY(-3px); }
.age-card .age-tag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.85; margin-bottom:4px; }
.age-card h4{ color:#fff; margin:0; font-size:16px; }
.age-1{ background: linear-gradient(135deg, #0E6E62, #0A4F46); }
.age-2{ background: linear-gradient(135deg, #F2A94E, #D98F32); }
.age-3{ background: linear-gradient(135deg, #FF6F59, #E85641); }
.age-4{ background: linear-gradient(135deg, #6B4FA0, #4E3579); }

/* ===== Buy it again ===== */
.reorder-strip{ background: var(--teal-tint); padding: 40px 0; margin-top: 46px; }
.reorder-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.reorder-head h3{ margin:0; font-size:19px; }
.reorder-head span{ font-size:12.5px; color: var(--ink-soft); }
.reorder-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:4px; }
.reorder-card{
    background:#fff; border-radius:12px; padding:12px; min-width: 190px; flex-shrink:0;
    display:flex; align-items:center; gap:10px; border:1px solid var(--line);
}
.reorder-card .thumb{ width:46px; height:46px; border-radius:10px; background: var(--base); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.reorder-card .info{ flex:1; min-width:0; }
.reorder-card h5{ font-size:12.5px; margin:0 0 2px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reorder-card span{ font-size:11.5px; color: var(--ink-soft); }
.reorder-card button{ width:30px; height:30px; border-radius:50%; border:none; background: var(--ink); color:#fff; font-size:14px; cursor:pointer; flex-shrink:0; }

/* ===== Payment / trust bar ===== */
.pay-trust-bar{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 18px 0; }
.pay-trust-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.pay-trust-row .msg{ font-size:12.5px; color: var(--ink-soft); display:flex; align-items:center; gap:8px; font-weight:600; }
.pay-icons{ display:flex; gap:8px; }
.pay-icons span{ font-size:11px; font-weight:800; background: var(--base); border:1px solid var(--line); padding:6px 11px; border-radius:6px; color: var(--ink-soft); }

/* ===== Subscribe & save (product page) ===== */
.sub-save{ border:1.5px solid var(--teal); border-radius:12px; padding:14px 16px; margin-bottom:20px; background: var(--teal-tint); }
.sub-save label{ display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:600; cursor:pointer; }
.sub-save small{ display:block; font-weight:500; color: var(--ink-soft); margin-top:2px; }
.sub-save .save-pill{ background: var(--teal); color:#fff; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:6px; }

/* ===== Mobile bottom nav ===== */
.mobile-tabbar{
    display:none;
    position: fixed; bottom:0; left:0; right:0;
    background:#fff; border-top:1px solid var(--line);
    z-index: 50;
    box-shadow: 0 -6px 18px rgba(22,48,43,0.08);
}
.mobile-tabbar .tab-row{ display:flex; }
.mobile-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding: 9px 4px 10px; font-size: 10.5px; font-weight:700; color: var(--ink-soft);
    position: relative;
}
.mobile-tabbar a.active{ color: var(--teal); }
.mobile-tabbar a .mt-icon{ font-size:18px; }
.mobile-tabbar a .badge{
    position:absolute; top:4px; right: 22%;
    background: var(--coral); color:#fff; font-size:9px; font-weight:800;
    width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ===== Sticky mobile add-to-cart (product page) ===== */
.sticky-atc{
    display:none;
    position: fixed; bottom:0; left:0; right:0;
    background:#fff; border-top:1px solid var(--line);
    padding: 12px 16px; z-index: 49;
    align-items:center; gap:12px;
    box-shadow: 0 -6px 18px rgba(22,48,43,0.1);
}
.sticky-atc .price{ font-family:'Fraunces',serif; font-weight:700; font-size:18px; flex-shrink:0; }
.sticky-atc .btn{ flex:1; }

@media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .shelf-grid{ grid-template-columns: repeat(2,1fr); }
    .age-grid{ grid-template-columns: repeat(2,1fr); }
    .prod-grid{ grid-template-columns: repeat(2,1fr); }
    .trust-grid{ grid-template-columns: repeat(2,1fr); }
    .foot-grid{ grid-template-columns: repeat(2,1fr); }
    .stat-grid{ grid-template-columns: repeat(2,1fr); }
    .admin-sidebar{ display:none; }
    .form-row{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
    .mobile-tabbar{ display:block; }
    body.has-tabbar{ padding-bottom: 62px; }
    .sticky-atc{ display:flex; }
    body.has-sticky-atc{ padding-bottom: 72px; }
    .pay-trust-row{ justify-content:center; text-align:center; }
}