:root{
    --ink:#12160F;
    --ink-2:#1D231A;
    --mustard:#F0B429;
    --mustard-2:#E8951F;
    --olive:#5C6B33;
    --paper:#FFFFFF;
    --bg:#FAF8F2;
    --muted:#767C6F;
    --line:#E9E5D8;
    --danger:#C64A3D;
    --shadow-sm:0 4px 14px rgba(18,22,15,.06);
    --shadow-md:0 14px 34px rgba(18,22,15,.10);
    --shadow-lg:0 24px 60px rgba(18,22,15,.16);
}
*{ box-sizing:border-box; }
body{
    background:var(--bg);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.shelf-title,.brand,.site-logo{
    font-family:'Poppins','Inter',sans-serif;
}

/* Global pill buttons + soft depth, applied on top of Bootstrap classes */
.btn{
    border-radius:30px !important;
    font-weight:600;
    letter-spacing:.01em;
    padding:11px 24px;
    transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-warning{ background:linear-gradient(135deg,var(--mustard),var(--mustard-2)) !important; border:none !important; color:var(--ink) !important; box-shadow:0 8px 20px rgba(232,149,31,.35); }
.btn-outline-dark{ border-color:var(--ink) !important; }
.btn-outline-light{ border-color:rgba(255,255,255,.4) !important; }

/* ===== Top strip ===== */
.top-strip{
    background:var(--ink); color:#EDE9DA; text-align:center;
    font-size:.74rem; letter-spacing:.06em; padding:9px 0; font-weight:500;
}

/* ===== Site header (icon nav style) ===== */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.header-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 0; gap:16px; }
.site-logo{ font-weight:800; font-size:1.6rem; letter-spacing:.5px; color:var(--ink); text-decoration:none; justify-self:start; }
.site-logo::after{ content:'.'; color:var(--mustard-2); }
.main-menu{ display:flex; gap:32px; align-items:center; justify-self:center; }
.main-menu > a{
    color:var(--ink); text-decoration:none; font-size:.85rem; font-weight:600;
    display:flex; align-items:center; gap:4px; position:relative; padding:6px 0; white-space:nowrap;
}
.main-menu > a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--mustard-2);
    transition:width .2s ease;
}
.main-menu > a:hover::after{ width:100%; }
.header-icons{ justify-self:end; }
.header-icons a{
    color:var(--ink); font-size:1.15rem; text-decoration:none; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.header-icons a:hover{ background:var(--bg); color:var(--mustard-2); }
.search-bar{ padding:0 0 18px; }
.search-bar input{ border-radius:30px; padding:12px 20px; border:1px solid var(--line); }

/* ===== Hero (full width, light pastel) ===== */
.hero-banner{
    background:
        radial-gradient(circle at 8% 15%, rgba(200,230,190,.55) 0%, transparent 40%),
        radial-gradient(circle at 92% 10%, rgba(255,214,224,.5) 0%, transparent 38%),
        radial-gradient(circle at 85% 85%, rgba(240,180,41,.18) 0%, transparent 45%),
        #F7F5EE;
    color:var(--ink);
    padding:52px 5vw;
    margin:0 0 8px;
    width:100%;
    display:grid; grid-template-columns:.95fr 1.05fr; gap:20px; align-items:center;
    position:relative; overflow:hidden;
}
.hero-banner .eyebrow{ color:var(--mustard-2); font-weight:800; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px; }
.hero-banner h1{ font-size:2.6rem; font-weight:800; line-height:1.05; margin-bottom:14px; color:var(--ink); }
.hero-banner p.hero-sub{ color:var(--muted); margin-bottom:20px; max-width:400px; font-size:1rem; }
.hero-features{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:24px; max-width:380px; }
.hero-features .feat{ display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; color:var(--ink); }
.hero-features .feat i{ font-size:1.15rem; color:var(--olive); width:22px; }
.hero-callout{
    display:inline-flex; align-items:baseline; gap:8px; background:linear-gradient(135deg,#CFE8C2,#B9DDA6);
    padding:10px 20px; border-radius:10px; font-weight:800; font-size:1.5rem; color:var(--ink);
}
.hero-callout small{ font-size:.7rem; font-weight:700; color:#3E5A2C; text-transform:uppercase; letter-spacing:.05em; }
.hero-visual{
    position:relative; display:flex; align-items:center; justify-content:center; gap:18px; min-height:320px;
}
.hero-visual .product-slot{
    flex:1; aspect-ratio:1/1; max-width:280px; background:linear-gradient(160deg,#fff,#EEEBDF);
    border-radius:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
}
.hero-visual .product-slot i{ font-size:4.5rem; color:var(--line); }
.hero-visual .model-slot{
    flex:.85; aspect-ratio:3/4; max-width:220px; background:linear-gradient(160deg,#DCE3D2,#B9C4A9);
    border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.hero-visual .model-slot i{ font-size:4rem; color:rgba(255,255,255,.6); }
.hero-quote{
    position:absolute; top:8%; left:50%; transform:translateX(-50%); background:#fff; padding:10px 18px;
    border-radius:30px; box-shadow:var(--shadow-sm); font-family:'Poppins',sans-serif; font-weight:700;
    font-size:.85rem; font-style:italic; color:var(--ink); white-space:nowrap;
}

/* ===== Section headers ===== */
.shelf-title{ text-align:center; font-weight:800; font-size:1.75rem; margin:10px 0 32px; }
.shelf-title small{ display:block; font-size:.74rem; font-weight:700; color:var(--mustard-2); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }

/* ===== Product cards ===== */
.shop-card{
    background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    height:100%; display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s;
    position:relative; box-shadow:var(--shadow-sm);
}
.shop-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.shop-card .badge-tag{
    position:absolute; top:12px; left:12px; z-index:2;
    font-size:.66rem; font-weight:700; padding:5px 11px; border-radius:20px; color:#fff; letter-spacing:.03em;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.badge-new{ background:var(--ink); }
.badge-hot{ background:var(--olive); }
.badge-best{ background:var(--danger); }
.badge-trend{ background:var(--mustard-2); color:var(--ink); }
.shop-card .wish-toggle{
    position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.15);
    color:var(--ink); text-decoration:none; transition:all .2s;
}
.shop-card .wish-toggle:hover{ background:var(--danger); color:#fff; }
.shop-card img.card-img-top{ height:200px; object-fit:cover; background:linear-gradient(135deg,#F1EFE4,#E4E0D0); }
.shop-card .card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.shop-card h6{ font-size:.94rem; font-weight:600; margin-bottom:8px; min-height:2.4em; font-family:'Inter',sans-serif; }
.shop-card .rating-line{ font-size:.72rem; color:var(--muted); margin-bottom:8px; }
.shop-card .rating-line .stars{ color:var(--mustard); }
.shop-card .price-line{ font-weight:700; font-size:1.05rem; font-family:'Poppins',sans-serif; }
.shop-card .price-line .was{ font-weight:500; font-size:.78rem; color:var(--muted); text-decoration:line-through; margin-left:6px; }
.shop-card .buy-btn{ margin-top:auto; padding-top:14px; }
.shop-card .buy-btn a{
    display:block; text-align:center; padding:10px; border-radius:30px; font-weight:700; font-size:.8rem;
    letter-spacing:.03em; text-decoration:none; color:var(--ink);
    background:linear-gradient(135deg,var(--mustard),var(--mustard-2));
    box-shadow:0 6px 16px rgba(232,149,31,.3); transition:transform .15s;
}
.shop-card .buy-btn a:hover{ transform:translateY(-2px); }
.shop-card.badge-hot .buy-btn a{ background:linear-gradient(135deg,#6E7F3D,var(--olive)); color:#fff; box-shadow:0 6px 16px rgba(92,107,51,.35); }
.shop-card.badge-best .buy-btn a{ background:linear-gradient(135deg,#2A322380,var(--ink)); color:#fff; box-shadow:0 6px 16px rgba(18,22,15,.3); }

/* ===== Grab List (tabs + editorial mosaic) ===== */
.grab-tabs{ display:flex; gap:28px; justify-content:center; margin-bottom:26px; }
.grab-tabs button{
    background:none; border:none; font-weight:600; font-size:.85rem; color:var(--muted); padding-bottom:8px;
    border-bottom:2px solid transparent; cursor:pointer; transition:color .2s;
}
.grab-tabs button.active, .grab-tabs button:hover{ color:var(--ink); border-color:var(--mustard-2); }
.mosaic{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:440px; }
.mosaic-tile{
    border-radius:18px; overflow:hidden; position:relative; display:flex; align-items:flex-end; padding:24px;
    color:#fff; font-weight:700; background:linear-gradient(160deg,#2E3A22,#12160F); box-shadow:var(--shadow-sm);
    transition:transform .3s;
}
.mosaic-tile:hover{ transform:scale(1.015); }
.mosaic-tile::before{
    content:''; position:absolute; width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, rgba(240,180,41,.22), transparent 70%); top:-50px; right:-50px;
}
.mosaic-tile:nth-child(1){ grid-row:1 / 3; }
.mosaic-tile.light{ background:linear-gradient(160deg,#EFEAD9,#DED7C0); color:var(--ink); }
.mosaic-tile.light::before{ background:radial-gradient(circle, rgba(92,107,51,.18), transparent 70%); }
.mosaic-tile span{ font-size:1rem; line-height:1.35; position:relative; font-family:'Poppins',sans-serif; }

/* ===== Big promo banner ===== */
.big-banner{
    background:radial-gradient(circle at 80% 20%, #263118 0%, transparent 50%),
               linear-gradient(160deg,#171D12,#0B0D08);
    border-radius:22px; padding:72px 32px; text-align:center; color:#fff; margin:30px 0; position:relative; overflow:hidden;
}
.big-banner .kicker{ color:var(--mustard); letter-spacing:.22em; font-size:.75rem; font-weight:700; text-transform:uppercase; }
.big-banner h2{ font-size:2.6rem; font-weight:800; margin:12px 0 24px; font-family:'Poppins',sans-serif; }

/* ===== Lifestyle tiles ===== */
.lifestyle-tile{
    border-radius:18px; overflow:hidden; position:relative; aspect-ratio:3/4;
    display:flex; align-items:flex-end; padding:20px; color:#fff; font-weight:700;
    background:linear-gradient(165deg,#3A4530,#12160F); box-shadow:var(--shadow-sm); transition:transform .3s;
    font-family:'Poppins',sans-serif; font-size:1.02rem;
}
.lifestyle-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.lifestyle-tile:nth-child(2){ background:linear-gradient(165deg,#4E3D22,#12160F); }
.lifestyle-tile:nth-child(3){ background:linear-gradient(165deg,#2B3A3E,#12160F); }
.lifestyle-tile:nth-child(4){ background:linear-gradient(165deg,#402A34,#12160F); }

/* ===== Compare slider ===== */
.compare-wrap{ position:relative; max-width:420px; margin:0 auto; aspect-ratio:3/4; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); }
.compare-wrap .side{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; text-align:center; font-family:'Poppins',sans-serif; font-size:1.1rem; }
.compare-wrap .before{ background:linear-gradient(160deg,#3B3B3B,#161616); }
.compare-wrap .after{ background:linear-gradient(160deg,#26311A,#0F1309); clip-path:inset(0 0 0 50%); }
.compare-wrap .divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; opacity:.7; pointer-events:none; }
.compare-wrap input[type=range]{ position:absolute; bottom:18px; left:8%; width:84%; z-index:5; accent-color:var(--mustard); }

/* ===== Trust badges ===== */
.trust-row{ display:flex; justify-content:center; gap:44px; flex-wrap:wrap; padding:36px 0; }
.trust-item{ text-align:center; max-width:150px; }
.trust-item .icon-circle{
    width:52px; height:52px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.trust-item i{ font-size:1.4rem; color:var(--olive); }
.trust-item span{ font-size:.78rem; color:var(--muted); font-weight:600; }

/* ===== Blog / interest list ===== */
.blog-list{ max-width:720px; margin:0 auto; }
.blog-item{ display:flex; gap:22px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.blog-item .idx{ font-weight:800; color:var(--line); font-size:1.5rem; width:38px; font-family:'Poppins',sans-serif; }
.blog-item h6{ font-weight:700; margin-bottom:5px; }
.blog-item a{ color:var(--olive); font-size:.8rem; font-weight:600; text-decoration:none; }
.blog-item a:hover{ color:var(--mustard-2); }

/* ===== Category CTA banner ===== */
.category-banner{
    background:linear-gradient(135deg,#171D12,#0D100B); color:#fff; border-radius:22px; padding:50px 32px; text-align:center; margin:40px 0;
}
.category-banner h3{ font-weight:800; margin-bottom:8px; font-family:'Poppins',sans-serif; }
.category-banner p{ color:#A8AF9A; margin-bottom:20px; }

/* ===== Product listing (full grid + sidebar) ===== */
.product-card img{ transition:transform 0.3s ease; }
.product-card:hover img{ transform:scale(1.03); }
.thumb-select{ transition:border-color 0.2s; }
.thumb-select:hover{ border-color:var(--danger) !important; }

/* ===== Footer ===== */
footer.site-footer{ background:var(--ink); color:#AEB4A0; padding-top:56px; }
footer.site-footer h6{ color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; font-family:'Poppins',sans-serif; }
footer.site-footer a{ color:#AEB4A0; text-decoration:none; display:block; margin-bottom:10px; font-size:.85rem; transition:color .2s; }
footer.site-footer a:hover{ color:var(--mustard); }
footer.site-footer .newsletter input{ border-radius:30px 0 0 30px; border:none; padding:12px 16px; }
footer.site-footer .newsletter button{ border-radius:0 30px 30px 0; background:linear-gradient(135deg,var(--mustard),var(--mustard-2)); border:none; padding:12px 20px; font-weight:700; }
footer.site-footer .bottom-bar{ border-top:1px solid #262C20; margin-top:36px; padding:20px 0; text-align:center; font-size:.78rem; color:#767C6C; }

@media(max-width:900px){
    .hero-banner{ grid-template-columns:1fr; padding:40px 26px; }
    .mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; }
    .mosaic-tile{ height:180px; }
    .mosaic-tile:nth-child(1){ grid-column:1/3; grid-row:auto; height:220px; }
}