/* ===================================================================== Blum Pharmacy — Storefront design system Aesthetic: "Warm clinical care" — emerald trust, amber warmth, cream calm. Fonts (load in ): Fraunces (display) + Plus Jakarta Sans (body). ===================================================================== */ :root { /* Brand — emerald */ --brand-900:#06402B; --brand-700:#0B5E3F; --brand-600:#0E7A52; --brand-500:#15936A; --brand-300:#7FC9AC; --brand-100:#DCF0E6; --brand-50:#EFF8F3; /* Accent — amber + coral highlight */ --amber-600:#E0951A; --amber-500:#F4A92B; --amber-100:#FCEBCB; --coral-500:#FF7A59; /* Neutrals — warm */ --cream:#FBF7EF; --cream-200:#F3ECDF; --surface:#FFFFFF; --ink-900:#102A20; --ink-700:#2E4A3E; --ink-500:#5C7268; --ink-300:#9DAEA6; --line:#E8E1D3; --line-soft:#F0EADD; /* Semantic */ --rx:#C2410C; --rx-bg:#FFF1E8; --ok:#15936A; --warn:#E0951A; /* Type */ --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* Radius */ --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; /* Shadow (green-tinted, soft) */ --sh-sm:0 1px 2px rgba(16,42,32,.06), 0 2px 6px rgba(16,42,32,.05); --sh:0 4px 14px rgba(16,42,32,.08), 0 12px 30px rgba(16,42,32,.06); --sh-lg:0 18px 50px rgba(16,42,32,.14); --container:1240px; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--cream); color:var(--ink-900); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} button{font-family:inherit; cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0;} h1{font-size:clamp(2.2rem,4.5vw,3.6rem);} h2{font-size:clamp(1.6rem,3vw,2.4rem);} h3{font-size:1.25rem;} p{margin:0 0 1rem;} .container{max-width:var(--container); margin-inline:auto; padding-inline:24px;} .btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; border-radius:var(--r-pill); border:0; transition:.18s ease; white-space:nowrap; } .btn-primary{background:var(--brand-600); color:#fff; box-shadow:var(--sh-sm);} .btn-primary:hover{background:var(--brand-700); transform:translateY(-1px); box-shadow:var(--sh);} .btn-amber{background:var(--amber-500); color:var(--brand-900);} .btn-amber:hover{background:var(--amber-600);} .btn-ghost{background:var(--surface); color:var(--brand-700); border:1.5px solid var(--brand-100);} .btn-ghost:hover{border-color:var(--brand-300); background:var(--brand-50);} .btn-block{width:100%; justify-content:center;} /* ---- Top announcement bar ---- */ .topbar{background:var(--brand-900); color:#EAF6EF; font-size:.82rem;} .topbar .container{display:flex; align-items:center; justify-content:space-between; height:40px; gap:1rem;} .topbar a{color:#fff; opacity:.9;} .topbar .tb-left{display:flex; gap:1.4rem; align-items:center;} .topbar .lic{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.1); padding:.25rem .7rem; border-radius:var(--r-pill); font-weight:600;} /* ---- Header ---- */ .header{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;} .header .container{display:flex; align-items:center; gap:1.5rem; height:84px;} .brand{display:flex; align-items:center; gap:.7rem; flex-shrink:0;} .brand .mark{width:46px; height:46px; flex-shrink:0;} .brand .name{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--brand-700); letter-spacing:-.02em;} .brand .name small{display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-500); font-weight:600;} .search{flex:1; max-width:560px; position:relative;} .search input{ width:100%; height:52px; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:0 3.2rem 0 1.3rem; font-size:.95rem; background:var(--cream); color:var(--ink-900); transition:.18s; } .search input:focus{outline:0; border-color:var(--brand-300); background:#fff; box-shadow:0 0 0 4px var(--brand-50);} .search .go{position:absolute; right:6px; top:6px; width:40px; height:40px; border-radius:50%; background:var(--brand-600); color:#fff; display:grid; place-items:center; border:0;} .header-actions{display:flex; align-items:center; gap:.4rem; margin-left:auto;} .icon-btn{display:flex; flex-direction:column; align-items:center; gap:2px; padding:.5rem .7rem; border-radius:var(--r-sm); background:none; border:0; color:var(--ink-700); font-size:.7rem; font-weight:600; position:relative;} .icon-btn:hover{background:var(--brand-50); color:var(--brand-700);} .icon-btn svg{width:24px; height:24px;} .icon-btn .badge{position:absolute; top:2px; right:8px; background:var(--coral-500); color:#fff; font-size:.62rem; min-width:18px; height:18px; border-radius:var(--r-pill); display:grid; place-items:center; padding:0 4px;} /* ---- Nav / mega-menu ---- */ .nav{background:var(--surface); border-bottom:1px solid var(--line);} .nav .container{display:flex; align-items:center; gap:.3rem; height:54px;} .nav-item{position:relative;} .nav-link{display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; font-weight:600; font-size:.92rem; color:var(--ink-700); border-radius:var(--r-sm);} .nav-link:hover{background:var(--brand-50); color:var(--brand-700);} .nav-link.is-pill{background:var(--amber-100); color:var(--amber-600);} .nav-link svg{width:18px; height:18px;} .mega{ position:absolute; top:100%; left:0; min-width:680px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:1.4rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem 1.5rem; z-index:60; } .nav-item:hover .mega{opacity:1; visibility:visible; transform:translateY(0);} .mega a{display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:var(--r-sm); font-size:.9rem; color:var(--ink-700);} .mega a:hover{background:var(--brand-50); color:var(--brand-700);} .mega .dot{width:8px; height:8px; border-radius:50%; background:var(--brand-300); flex-shrink:0;} /* ---- Hero ---- */ .hero{padding:3rem 0 1rem;} .hero-card{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--brand-700),var(--brand-500) 55%,var(--brand-600)); color:#fff; padding:clamp(2rem,5vw,4.5rem); min-height:420px; display:flex; align-items:center; } .hero-card .blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.5;} .hero-card .b1{width:320px; height:320px; background:var(--brand-500); top:-90px; right:-60px; opacity:.45;} .hero-card .b2{width:240px; height:240px; background:var(--amber-500); bottom:-120px; right:140px; opacity:.18;} .hero-content{position:relative; max-width:560px; z-index:2;} .hero .eyebrow{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14); padding:.4rem 1rem; border-radius:var(--r-pill); font-size:.8rem; font-weight:600; margin-bottom:1.3rem;} .hero h1{color:#fff; margin-bottom:1rem;} .hero h1 em{font-style:italic; color:var(--amber-500);} .hero p{color:rgba(255,255,255,.86); font-size:1.1rem; max-width:440px;} .hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem;} .hero-art{position:absolute; right:clamp(2rem,5vw,5rem); top:50%; transform:translateY(-50%); width:min(38%,360px); z-index:1;} .hero-dots{position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem;} .hero-dots span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4);} .hero-dots span.on{background:#fff; width:26px; border-radius:var(--r-pill);} /* ---- Trust strip ---- */ .trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.5rem;} .trust .t{display:flex; gap:.9rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem; box-shadow:var(--sh-sm);} .trust .t .ic{width:46px; height:46px; border-radius:14px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; flex-shrink:0;} .trust .t .ic svg{width:24px;height:24px;} .trust .t b{display:block; font-size:.95rem;} .trust .t span{font-size:.82rem; color:var(--ink-500);} /* ---- Section heading ---- */ .section{padding:3.2rem 0;} .sec-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.8rem; gap:1rem; flex-wrap:wrap;} .sec-head .kicker{color:var(--brand-600); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;} .sec-head h2{margin-top:.3rem;} .sec-head .link{color:var(--brand-700); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.3rem;} /* ---- Category tiles ---- */ .cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem;} .cat-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1rem; text-align:center; transition:.18s; box-shadow:var(--sh-sm);} .cat-tile:hover{transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--brand-100);} .cat-tile .ci{width:64px; height:64px; border-radius:20px; margin:0 auto .9rem; display:grid; place-items:center;} .cat-tile .ci svg{width:32px; height:32px;} .cat-tile b{font-size:.95rem; display:block;} .cat-tile span{font-size:.78rem; color:var(--ink-500);} .tint-green{background:var(--brand-50); color:var(--brand-600);} .tint-amber{background:var(--amber-100); color:var(--amber-600);} .tint-coral{background:#FFEFE9; color:var(--coral-500);} .tint-blue{background:#E8F1FB; color:#2A6CB5;} /* ---- Condition pills ---- */ .cond-row{display:flex; flex-wrap:wrap; gap:.7rem;} .cond{display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.7rem 1.2rem; font-weight:600; font-size:.9rem; transition:.18s;} .cond:hover{background:var(--brand-700); color:#fff; border-color:var(--brand-700);} .cond .d{width:9px; height:9px; border-radius:50%; background:var(--amber-500);} .cond.chronic .d{background:var(--coral-500);} /* ---- Product card ---- */ .prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem;} .prod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.18s; display:flex; flex-direction:column; box-shadow:var(--sh-sm);} .prod:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--brand-100);} .prod .media{position:relative; aspect-ratio:4/3; background:var(--brand-50); background:linear-gradient(160deg,var(--brand-50),var(--surface)); display:grid; place-items:center; padding:.9rem;} .prod .media svg{width:58%; height:58%; max-height:120px;} .prod .flag{position:absolute; top:.7rem; left:.7rem; font-size:.68rem; font-weight:700; padding:.3rem .65rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.04em;} .flag-rx{background:var(--rx-bg); color:var(--rx);} .flag-otc{background:var(--brand-50); color:var(--brand-600);} .flag-sale{background:var(--amber-100); color:var(--amber-600);} .prod .wish{position:absolute; top:.6rem; right:.6rem; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-500);} .prod .wish:hover{color:var(--coral-500); border-color:var(--coral-500);} .prod .body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1;} .prod .brandname{font-size:.72rem; color:var(--ink-500); font-weight:600; text-transform:uppercase; letter-spacing:.05em;} .prod .pname{font-weight:600; font-size:.98rem; margin:.25rem 0 .15rem; line-height:1.25;} .prod .strength{font-size:.8rem; color:var(--ink-500);} .prod .foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.9rem;} .prod .price{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--brand-700);} .prod .price s{font-family:var(--font-body); font-weight:500; font-size:.82rem; color:var(--ink-300); margin-right:.35rem;} .prod .add{width:42px; height:42px; border-radius:50%; background:var(--brand-600); color:#fff; border:0; display:grid; place-items:center; transition:.18s;} .prod .add:hover{background:var(--brand-700); transform:scale(1.06);} .prod .add.rx{background:var(--rx-bg); color:var(--rx);} /* ---- Promo band ---- */ .promo{background:var(--brand-900); border-radius:var(--r-xl); color:#fff; padding:clamp(2rem,4vw,3.5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden;} .promo .blob{position:absolute; width:300px; height:300px; border-radius:50%; background:var(--brand-700); right:-80px; top:-80px; opacity:.6;} .promo-text{position:relative; max-width:520px;} .promo h2{color:#fff;} .promo p{color:rgba(255,255,255,.82);} /* ---- Blog cards ---- */ .blog-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem;} .post{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); transition:.18s;} .post:hover{transform:translateY(-3px); box-shadow:var(--sh);} .post .media{aspect-ratio:16/10; display:grid; place-items:center;} .post .body{padding:1.2rem 1.3rem 1.4rem;} .post .tag{font-size:.72rem; font-weight:700; color:var(--brand-600); text-transform:uppercase; letter-spacing:.08em;} .post h3{margin:.5rem 0 .4rem; font-size:1.15rem;} .post p{font-size:.9rem; color:var(--ink-500); margin:0;} .post .shop{margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; color:var(--amber-600);} /* ---- Newsletter ---- */ .news{background:linear-gradient(135deg,var(--amber-100),var(--cream-200)); border-radius:var(--r-xl); padding:clamp(2rem,4vw,3rem); text-align:center;} .news h2{color:var(--brand-900);} .news .form{display:flex; gap:.6rem; max-width:480px; margin:1.4rem auto 0; flex-wrap:wrap;} .news input{flex:1; min-width:200px; height:52px; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:0 1.4rem; font-size:.95rem; background:#fff;} /* ---- Footer ---- */ .footer{background:var(--brand-900); color:#CFE6DB; margin-top:3.5rem; padding:3.5rem 0 1.5rem;} .footer .cols{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem;} .footer h4{color:#fff; font-family:var(--font-body); font-weight:700; font-size:.95rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.06em;} .footer a{display:block; color:#A9CFBC; padding:.3rem 0; font-size:.9rem;} .footer a:hover{color:#fff;} .footer .brand .name{color:#fff;} .footer .lic{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); padding:.5rem 1rem; border-radius:var(--r-pill); font-size:.82rem; margin-top:1rem; color:#fff;} .footer .pay{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap;} .footer .pay span{background:rgba(255,255,255,.1); padding:.4rem .7rem; border-radius:8px; font-size:.7rem; font-weight:700; letter-spacing:.03em;} .footer .bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:#8FB6A4;} /* ---- Responsive ---- */ .mobile-only{display:none;} @media(max-width:980px){ .mobile-only{display:flex;} .footer .cols{grid-template-columns:1fr 1fr;} .hero-art{display:none;} .nav{display:none;} .nav.open{display:block; border-top:1px solid var(--line);} .nav.open .container{flex-direction:column; height:auto; align-items:stretch; padding-block:.4rem;} .nav.open .nav-item, .nav.open .nav-link{width:100%;} .nav.open .nav-item[style]{margin-left:0 !important;} .nav.open .mega{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; min-width:0 !important; grid-template-columns:1fr !important; padding:.2rem .4rem 1rem;} } @media(max-width:640px){ .header .container{height:auto; flex-wrap:wrap; padding-block:.8rem; gap:.8rem;} .search{order:3; flex-basis:100%; max-width:none;} .topbar .tb-left{display:none;} .footer .cols{grid-template-columns:1fr;} } /* visually-hidden helper for a11y */ .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} /* ===================================================================== Listing pages, detail page, FAQs, indexes ===================================================================== */ /* Breadcrumbs */ .crumbs{background:var(--cream); border-bottom:1px solid var(--line-soft);} .crumbs .container{display:flex; align-items:center; gap:.5rem; padding-block:.9rem; font-size:.85rem; color:var(--ink-500); flex-wrap:wrap;} .crumbs a{color:var(--brand-700); font-weight:600;} .crumbs a:hover{text-decoration:underline;} .crumbs i{font-size:.9rem; color:var(--ink-300);} .crumbs span[aria-current]{color:var(--ink-700);} /* Page hero (category / condition landing) */ .page-hero{background:linear-gradient(135deg,var(--brand-50),var(--brand-100)); border-bottom:1px solid var(--line-soft);} .page-hero .container{padding-block:2.6rem; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap;} .page-hero .ph-ic{width:74px; height:74px; border-radius:22px; background:#fff; display:grid; place-items:center; color:var(--brand-600); box-shadow:var(--sh-sm); flex-shrink:0;} .page-hero .ph-ic i{font-size:36px;} .page-hero h1{color:var(--brand-900); margin-bottom:.4rem;} .page-hero p{color:var(--ink-700); max-width:680px; margin:0;} .page-hero .pill{display:inline-flex; align-items:center; gap:.4rem; background:var(--amber-100); color:var(--amber-600); font-weight:700; font-size:.75rem; padding:.3rem .8rem; border-radius:var(--r-pill); margin-bottom:.8rem;} .subcat-row{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem;} .subcat{background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:.5rem 1rem; font-size:.85rem; font-weight:600; color:var(--ink-700);} .subcat:hover{border-color:var(--brand-300); color:var(--brand-700);} /* Shop layout: sidebar + main */ .shop-wrap{padding:2rem 0 3rem;} .shop-grid{display:grid; grid-template-columns:268px 1fr; gap:2rem; align-items:start;} .toolbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap;} .toolbar .count{color:var(--ink-500); font-size:.9rem;} .toolbar .count b{color:var(--ink-900);} .toolbar .sort{display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink-500);} .toolbar select{height:42px; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:0 2.4rem 0 1rem; background:#fff; font-family:inherit; font-size:.88rem; font-weight:600; color:var(--ink-900); appearance:none; cursor:pointer;} .filters{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem; box-shadow:var(--sh-sm); position:sticky; top:150px;} .filters .fg{padding:1rem 0; border-bottom:1px solid var(--line-soft);} .filters .fg:first-child{padding-top:0;} .filters .fg:last-child{border-bottom:0; padding-bottom:0;} .filters h4{font-family:var(--font-body); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-500); margin-bottom:.8rem;} .filters label.opt{display:flex; align-items:center; gap:.6rem; padding:.35rem 0; font-size:.9rem; color:var(--ink-700); cursor:pointer;} .filters label.opt input{accent-color:var(--brand-600); width:16px; height:16px;} .filters .flink{display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; font-size:.9rem; color:var(--ink-700);} .filters .flink:hover{color:var(--brand-700);} .filters .flink.active{color:var(--brand-700); font-weight:700;} .filters .price-row{display:flex; gap:.5rem; align-items:center;} .filters .price-row input{width:100%; height:40px; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:0 .7rem; font-size:.85rem; background:var(--cream);} .filters .apply{margin-top:1rem;} .filters .clear{display:block; text-align:center; margin-top:.6rem; font-size:.82rem; color:var(--ink-500);} .filters .clear:hover{color:var(--rx);} .filters-toggle{display:none;} /* Pagination */ .pager{display:flex; justify-content:center; align-items:center; gap:.4rem; margin-top:2.5rem; flex-wrap:wrap;} .pager a, .pager span{min-width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; font-weight:600; font-size:.9rem; color:var(--ink-700); padding:0 .6rem;} .pager a:hover{border-color:var(--brand-300); color:var(--brand-700);} .pager .on{background:var(--brand-600); color:#fff; border-color:var(--brand-600);} .pager .disabled{opacity:.4; pointer-events:none;} /* Empty state */ .empty{text-align:center; padding:4rem 1rem; color:var(--ink-500);} .empty .ic{width:80px; height:80px; border-radius:50%; background:var(--brand-50); color:var(--brand-300); display:grid; place-items:center; margin:0 auto 1.2rem;} .empty .ic i{font-size:40px;} .empty h3{font-family:var(--font-display); color:var(--ink-900); margin-bottom:.5rem;} /* FAQ accordion */ .faq-section{padding:3rem 0;} .faq-list{max-width:820px; margin:1.6rem auto 0;} .faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:.8rem; overflow:hidden;} .faq-item summary{list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:1rem;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary i{transition:.2s; color:var(--brand-600); flex-shrink:0;} .faq-item[open] summary i{transform:rotate(180deg);} .faq-item .ans{padding:0 1.3rem 1.2rem; color:var(--ink-700); font-size:.94rem;} /* ---- Product detail (PDP) ---- */ .pdp{padding:2rem 0 3rem;} .pdp-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:start;} .gallery .main{background:var(--brand-50); border:1px solid var(--line); border-radius:var(--r-lg); aspect-ratio:1/1; display:grid; place-items:center; padding:2.5rem; position:relative; overflow:hidden;} .gallery .main img, .gallery .main svg{width:78%; height:78%; object-fit:contain;} .gallery .main .flag{position:absolute; top:1rem; left:1rem;} .gallery .thumbs{display:flex; gap:.7rem; margin-top:.9rem; flex-wrap:wrap;} .gallery .thumbs button{width:74px; height:74px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--brand-50); padding:.5rem; cursor:pointer;} .gallery .thumbs button.on{border-color:var(--brand-600);} .gallery .thumbs img, .gallery .thumbs svg{width:100%; height:100%; object-fit:contain;} .pdp-info .brandname{color:var(--brand-600); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;} .pdp-info h1{font-size:clamp(1.7rem,3vw,2.3rem); margin:.4rem 0 .3rem;} .pdp-info .sub{color:var(--ink-500); font-size:.95rem;} .pdp-badges{display:flex; gap:.5rem; margin:1rem 0; flex-wrap:wrap;} .badge-rx{background:var(--rx-bg); color:var(--rx); font-weight:700; font-size:.78rem; padding:.4rem .9rem; border-radius:var(--r-pill); display:inline-flex; gap:.4rem; align-items:center;} .badge-stock{background:var(--brand-50); color:var(--brand-700); font-weight:700; font-size:.78rem; padding:.4rem .9rem; border-radius:var(--r-pill);} .badge-out{background:#FCEBEB; color:#A32D2D;} .pdp-price{display:flex; align-items:baseline; gap:.8rem; margin:1.2rem 0;} .pdp-price .now{font-family:var(--font-display); font-weight:700; font-size:2.2rem; color:var(--brand-700);} .pdp-price .was{font-size:1.1rem; color:var(--ink-300); text-decoration:line-through;} .pdp-price .save{background:var(--amber-100); color:var(--amber-600); font-weight:700; font-size:.8rem; padding:.25rem .7rem; border-radius:var(--r-pill);} .pdp-desc{color:var(--ink-700); line-height:1.7; margin:1rem 0 1.5rem;} .buybar{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; padding:1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm);} .qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden;} .qty button{width:44px; height:48px; border:0; background:#fff; font-size:1.2rem; color:var(--brand-700);} .qty button:hover{background:var(--brand-50);} .qty input{width:48px; height:48px; border:0; text-align:center; font-weight:600; font-size:1rem; background:#fff;} .rx-callout{background:var(--rx-bg); border:1px solid #F3C9AE; border-radius:var(--r); padding:1.1rem 1.3rem; margin:1.2rem 0; display:flex; gap:.9rem; align-items:flex-start; color:#7A2E10;} .rx-callout i{color:var(--rx); font-size:24px; flex-shrink:0;} .pdp-meta{margin-top:1.5rem; font-size:.88rem; color:var(--ink-500);} .pdp-meta .row{display:flex; gap:.6rem; padding:.4rem 0; border-bottom:1px dashed var(--line-soft);} .pdp-meta .row b{color:var(--ink-700); min-width:130px;} /* PDP tabs */ .pdp-tabs{margin-top:3rem;} .tab-btns{display:flex; gap:.4rem; border-bottom:2px solid var(--line); flex-wrap:wrap;} .tab-btns button{background:none; border:0; padding:.9rem 1.3rem; font-weight:600; font-size:.95rem; color:var(--ink-500); border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer;} .tab-btns button.on{color:var(--brand-700); border-bottom-color:var(--brand-600);} .tab-panel{padding:1.6rem .2rem; color:var(--ink-700); line-height:1.75; max-width:820px;} .tab-panel[hidden]{display:none;} /* Index grids (conditions / brands) */ .idx-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem;} .idx-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; display:flex; gap:1rem; align-items:center; box-shadow:var(--sh-sm); transition:.18s;} .idx-card:hover{transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--brand-100);} .idx-card .ic{width:54px; height:54px; border-radius:16px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; flex-shrink:0;} .idx-card .ic i{font-size:26px;} .idx-card b{display:block;} .idx-card span{font-size:.8rem; color:var(--ink-500);} .idx-card .chronic-tag{display:inline-block; margin-top:.2rem; background:#FFEFE9; color:var(--coral-500); font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:var(--r-pill);} .brand-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem;} .brand-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1rem; text-align:center; font-weight:700; color:var(--brand-700); box-shadow:var(--sh-sm);} .brand-card:hover{border-color:var(--brand-300); transform:translateY(-2px);} /* ---- Blog ---- */ .blog-wrap{padding:2.5rem 0 3rem;} .article{max-width:760px; margin:0 auto;} .article .hero-img{aspect-ratio:16/8; border-radius:var(--r-lg); display:grid; place-items:center; margin-bottom:1.6rem;} .article h1{font-size:clamp(1.9rem,3.5vw,2.8rem); margin:.6rem 0 1rem;} .article .meta{color:var(--ink-500); font-size:.88rem; margin-bottom:1.6rem;} .article .content{color:var(--ink-700); line-height:1.85; font-size:1.05rem;} .article .content p{margin-bottom:1.3rem;} .endorse{background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--r-lg); padding:1.6rem; margin:2.5rem 0;} .endorse h3{color:var(--brand-900); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;} @media(max-width:980px){ .shop-grid{grid-template-columns:1fr;} .filters{position:static;} .filters-toggle{display:inline-flex;} .filters.collapsed{display:none;} .pdp-grid{grid-template-columns:1fr; gap:1.6rem;} } @media(max-width:640px){ .pdp-price .now{font-size:1.8rem;} } /* ===================================================================== Phase 2 — cart, checkout, order, flash ===================================================================== */ /* Flash */ .flash-wrap{background:transparent;} .flash-wrap .container{padding-top:1rem;} .flash{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:var(--r);font-weight:600;font-size:.92rem;margin-bottom:.6rem;} .flash i{font-size:20px;flex-shrink:0;} .flash-ok{background:var(--brand-50);color:var(--brand-800);border:1px solid var(--brand-100);} .flash-err{background:#FCEBEB;color:#A32D2D;border:1px solid #F3C9AE;} /* Shared money rows + summary card */ .summary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh-sm);margin-bottom:1.2rem;} .summary-card h3{font-family:var(--font-display);margin-bottom:1rem;} .srow{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;color:var(--ink-700);font-size:.95rem;border-bottom:1px dashed var(--line-soft);} .srow:last-of-type{border-bottom:0;} .srow.disc b{color:var(--brand-600);} .srow.total{border-top:2px solid var(--line);margin-top:.3rem;padding-top:.8rem;font-size:1.15rem;color:var(--ink-900);} .srow.total b{font-family:var(--font-display);color:var(--brand-700);} .ship-hint{margin-top:.7rem;font-size:.82rem;color:var(--amber-600);display:flex;gap:.4rem;align-items:center;} .pay-mini{margin-top:.8rem;text-align:center;font-size:.8rem;color:var(--ink-500);} /* Cart layout */ .cart-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start;} .cart-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);} .cart-row{display:grid;grid-template-columns:84px 1fr auto auto auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line-soft);} .cart-row:last-child{border-bottom:0;} .cart-row .thumb{width:84px;height:84px;border-radius:var(--r-sm);background:var(--brand-50);display:grid;place-items:center;padding:.5rem;} .cart-row .thumb img,.cart-row .thumb svg{width:100%;height:100%;object-fit:contain;} .ci-info{display:flex;flex-direction:column;gap:.15rem;} .ci-name{font-weight:600;color:var(--ink-900);} .ci-name:hover{color:var(--brand-700);} .ci-sub{font-size:.8rem;color:var(--ink-500);} .ci-unit{font-size:.8rem;color:var(--ink-500);} .ci-total{font-weight:700;color:var(--brand-700);min-width:90px;text-align:right;} .ci-remove{background:none;border:0;color:var(--ink-300);cursor:pointer;font-size:20px;} .ci-remove:hover{color:var(--rx);} .cart-actions{display:flex;justify-content:space-between;margin-top:1rem;flex-wrap:wrap;gap:.6rem;} .coupon-form{display:flex;gap:.5rem;} .coupon-form input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 1rem;background:var(--cream);text-transform:uppercase;} .coupon-applied{display:flex;justify-content:space-between;align-items:center;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-sm);padding:.7rem 1rem;color:var(--brand-800);font-weight:700;} .linkbtn{background:none;border:0;color:var(--rx);cursor:pointer;font-weight:600;font-size:.85rem;} /* Checkout */ .checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start;} .co-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh-sm);margin-bottom:1.2rem;} .co-card h3{font-family:var(--font-display);display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;} .co-card h3 .step{width:28px;height:28px;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-size:.9rem;font-family:var(--font-body);} .field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;} .field span{font-size:.82rem;font-weight:600;color:var(--ink-700);} .field input,.field textarea{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.8rem 1rem;background:var(--cream);font-family:inherit;font-size:.95rem;} .field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-400);} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .seg{display:flex;gap:.6rem;margin-bottom:1.2rem;} .seg-opt{flex:1;} .seg-opt input{position:absolute;opacity:0;} .seg-opt span{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font-weight:600;color:var(--ink-700);cursor:pointer;} .seg-opt input:checked+span{border-color:var(--brand-600);background:var(--brand-50);color:var(--brand-800);} .hint{font-size:.82rem;color:var(--ink-500);margin:.2rem 0 .6rem;} .map-box{height:280px;border-radius:var(--r-sm);border:1px solid var(--line);overflow:hidden;z-index:0;} .pickup-note{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-sm);padding:1rem;color:var(--brand-800);} .pay-opt{display:flex;align-items:center;gap:1rem;padding:1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);margin-bottom:.8rem;cursor:pointer;} .pay-opt:has(input:checked){border-color:var(--brand-600);background:var(--brand-50);} .pay-opt .pi{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand-600);font-size:22px;border:1px solid var(--line);} .pay-opt .pt b{display:block;} .pay-opt .pt small{color:var(--ink-500);font-size:.82rem;} .mpesa-field{margin:-.2rem 0 .8rem;} .checkout-summary .summary-card{position:sticky;top:150px;} .co-items{margin-bottom:1rem;} .co-item{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;padding:.4rem 0;font-size:.9rem;color:var(--ink-700);} .co-item .q{color:var(--brand-700);font-weight:700;} .secure{text-align:center;font-size:.8rem;color:var(--ink-500);margin-top:.7rem;display:flex;gap:.4rem;justify-content:center;align-items:center;} .mini-rx{background:var(--rx-bg);color:var(--rx);font-size:.65rem;font-weight:700;padding:.05rem .35rem;border-radius:var(--r-pill);} /* Order page */ .order-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.5rem;flex-wrap:wrap;} .oh-icon{width:64px;height:64px;border-radius:50%;background:var(--amber-100);color:var(--amber-600);display:grid;place-items:center;font-size:30px;flex-shrink:0;} .oh-icon.ok{background:var(--brand-50);color:var(--brand-600);} .order-head h1{font-size:1.6rem;margin-bottom:.2rem;} .order-head p{color:var(--ink-500);font-size:.9rem;} .ostatus{margin-left:auto;font-weight:700;font-size:.82rem;padding:.4rem 1rem;border-radius:var(--r-pill);} .tint-green{background:var(--brand-50);color:var(--brand-700);} .tint-amber{background:var(--amber-100);color:var(--amber-600);} .tint-red{background:#FCEBEB;color:#A32D2D;} .pay-state{display:flex;align-items:center;gap:.9rem;padding:.4rem 0;color:var(--ink-900);} .pay-state i{font-size:28px;} .pay-state.ok i{color:var(--brand-600);} .pay-state.pending i{color:var(--amber-500);} .pay-state.cash i{color:var(--brand-600);} .pay-state.failed i{color:var(--rx);} .pay-state small{color:var(--ink-500);} .spin{animation:spin 1.4s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .retry-form{display:flex;gap:.6rem;margin-top:1rem;} .retry-form input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 1rem;background:var(--cream);} .timeline{display:flex;flex-direction:column;gap:0;} .tl-item{display:flex;gap:.8rem;padding-bottom:1rem;position:relative;} .tl-item:not(:last-child)::before{content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:2px;background:var(--line);} .tl-item .dot{width:14px;height:14px;border-radius:50%;background:var(--brand-500);border:3px solid var(--brand-100);flex-shrink:0;margin-top:2px;z-index:1;} .tl-item b{display:block;font-size:.9rem;} .tl-item small{color:var(--ink-500);font-size:.78rem;} @media(max-width:980px){ .cart-grid,.checkout-grid{grid-template-columns:1fr;} .checkout-summary .summary-card{position:static;} } @media(max-width:560px){ .cart-row{grid-template-columns:64px 1fr auto;grid-template-areas:"t i r" "t q p";row-gap:.5rem;} .cart-row .thumb{grid-area:t;width:64px;height:64px;} .ci-info{grid-area:i;} .qty{grid-area:q;} .ci-total{grid-area:p;text-align:left;} .ci-remove{grid-area:r;justify-self:end;} .field-row{grid-template-columns:1fr;} } /* ============ Customer portal (account) ============ */ .account{display:grid;grid-template-columns:248px 1fr;gap:1.6rem;align-items:start;padding-top:1.6rem;padding-bottom:3rem;} .acct-nav{background:#fff;border:1px solid var(--line,#E4EAE6);border-radius:16px;overflow:hidden;position:sticky;top:1rem;} .acct-id{display:flex;align-items:center;gap:.7rem;padding:1.1rem;background:linear-gradient(135deg,#0E7A52,#0B5E3F);color:#fff;} .acct-id .acct-av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:700;font-size:1.1rem;} .acct-id b{display:block;font-size:.95rem;} .acct-id small{opacity:.85;font-size:.78rem;} .acct-nav nav{display:flex;flex-direction:column;padding:.5rem;} .acct-nav nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:10px;color:#3C4B43;font-weight:500;font-size:.92rem;} .acct-nav nav a:hover{background:#F2F7F4;color:#0B5E3F;} .acct-nav nav a.on{background:#E8F3EE;color:#0B5E3F;font-weight:700;} .acct-nav nav a i{font-size:19px;} .acct-nav nav a.signout{color:#C0392B;margin-top:.3rem;border-top:1px solid var(--line-soft,#EEF2F0);border-radius:0;} .acct-main{min-width:0;} .acard{background:#fff;border:1px solid var(--line,#E4EAE6);border-radius:16px;padding:1.4rem;margin-bottom:1.4rem;} .acard h2,.acard h3{font-family:'Fraunces',serif;margin:0 0 1rem;font-size:1.15rem;} .acard .hd-row{display:flex;align-items:center;gap:1rem;margin:-.2rem 0 1rem;} .acard .hd-row h2,.acard .hd-row h3{margin:0;} .acard .hd-row .sp{flex:1;} .acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.4rem;} .acct-stat{background:#fff;border:1px solid var(--line,#E4EAE6);border-radius:14px;padding:1.1rem;} .acct-stat .v{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;color:#0B5E3F;} .acct-stat .l{color:#6B7A72;font-size:.82rem;} .acct-table{width:100%;border-collapse:collapse;font-size:.9rem;} .acct-table th{text-align:left;padding:.6rem .7rem;color:#6B7A72;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line,#E4EAE6);} .acct-table td{padding:.75rem .7rem;border-bottom:1px solid var(--line-soft,#EEF2F0);vertical-align:middle;} .acct-table tr:last-child td{border-bottom:0;} .pill{display:inline-block;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;} .pill-green{background:#E8F3EE;color:#0B5E3F;} .pill-amber{background:#FCEFD3;color:#9a6a10;} .pill-red{background:#FCEBEB;color:#C0392B;} .pill-blue{background:#E8F1FB;color:#2D6CB5;} .pill-grey{background:#EEF2F0;color:#6B7A72;} .med-row{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line-soft,#EEF2F0);} .med-row:last-child{border-bottom:0;} .med-ic{width:42px;height:42px;border-radius:11px;background:#E8F3EE;color:#0B5E3F;display:grid;place-items:center;font-size:21px;flex-shrink:0;} .med-row .m-name{font-weight:600;} .med-row .m-meta{color:#6B7A72;font-size:.82rem;} .med-row .m-next{margin-left:auto;text-align:right;font-size:.82rem;color:#0B5E3F;} .empty-acct{text-align:center;padding:2.5rem 1rem;color:#6B7A72;} .empty-acct i{font-size:40px;color:#CDE7DB;display:block;margin-bottom:.5rem;} .auth-wrap{max-width:440px;margin:2.5rem auto;} .auth-card{background:#fff;border:1px solid var(--line,#E4EAE6);border-radius:18px;padding:2.2rem;} .auth-card h1{font-family:'Fraunces',serif;font-size:1.6rem;margin:0 0 .3rem;} .auth-card .sub{color:#6B7A72;margin:0 0 1.4rem;} .auth-card .alt{text-align:center;margin-top:1.1rem;color:#6B7A72;font-size:.9rem;} .afield{margin-bottom:1rem;} .afield label{display:block;font-size:.82rem;font-weight:600;color:#3C4B43;margin-bottom:.35rem;} .afield input,.afield select,.afield textarea{width:100%;border:1.5px solid var(--line,#E4EAE6);border-radius:10px;padding:.7rem .85rem;font-family:inherit;font-size:.95rem;} .afield input:focus,.afield select:focus,.afield textarea:focus{outline:none;border-color:#0E7A52;} .arow2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .btn-acct{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:#0E7A52;color:#fff;border:0;border-radius:10px;padding:.75rem 1.2rem;font-weight:600;font-family:inherit;cursor:pointer;font-size:.92rem;} .btn-acct:hover{background:#0B5E3F;} .btn-acct.block{width:100%;} .btn-acct.ghost{background:#fff;border:1.5px solid var(--line,#E4EAE6);color:#3C4B43;} .btn-acct.danger{background:#FCEBEB;color:#C0392B;} .btn-acct.sm{padding:.4rem .7rem;font-size:.82rem;} .prod .wish.on{color:#C0392B;} .prod .wish.on i{fill:#C0392B;} .flash-ok{display:flex;align-items:center;gap:.5rem;background:#E8F3EE;color:#0B5E3F;padding:.8rem 1.1rem;border-radius:10px;font-weight:600;margin-bottom:1rem;} .flash-err{display:flex;align-items:center;gap:.5rem;background:#FCEBEB;color:#C0392B;padding:.8rem 1.1rem;border-radius:10px;font-weight:600;margin-bottom:1rem;} @media(max-width:880px){ .account{grid-template-columns:1fr;} .acct-nav{position:static;} .acct-nav nav{flex-direction:row;flex-wrap:wrap;} .acct-nav nav a{flex:1 1 auto;} .arow2{grid-template-columns:1fr;} } /* ===================================================================== DESIGN SYSTEM v2 — depth, glass, expressive color, light/dark mode (Appended overrides — later source order wins for equal specificity.) ===================================================================== */ :root{ /* glass + elevation */ --glass:rgba(255,255,255,.86); --glass-strong:rgba(255,255,255,.96); --glass-border:rgba(16,42,32,.08); --sh-sm:0 1px 2px rgba(16,42,32,.05), 0 2px 8px rgba(16,42,32,.05); --sh:0 6px 20px rgba(16,42,32,.09), 0 16px 40px rgba(16,42,32,.07); --sh-lg:0 24px 70px rgba(16,42,32,.18); --ring:0 0 0 4px var(--brand-50); color-scheme:light; } [data-theme="dark"]{ --cream:#0C1714; --cream-200:#11201B; --surface:#162420; --ink-900:#EAF4EE; --ink-700:#C2D5CC; --ink-500:#8CA399; --ink-300:#5F756B; --line:#243A33; --line-soft:#1B2C26; --brand-50:#11281D; --brand-100:#173A2A; --brand-300:#3E7A60; --amber-100:#3A2E12; --rx-bg:#3A2113; --coral-500:#FF8A6B; --glass:rgba(18,30,26,.88); --glass-strong:rgba(18,30,26,.97); --glass-border:rgba(255,255,255,.07); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh:0 8px 28px rgba(0,0,0,.5); --sh-lg:0 28px 70px rgba(0,0,0,.6); --ring:0 0 0 4px rgba(21,147,106,.25); color-scheme:dark; } html{transition:none;} body{transition:background .3s ease,color .3s ease;} /* ---- Topbar v2 (gradient, refined) ---- */ .topbar{background:linear-gradient(90deg,var(--brand-900),var(--brand-700));} /* ---- Header v2 (dominant, glass, elevated) ---- */ .header{ background:var(--glass-strong); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid var(--glass-border); box-shadow:0 1px 0 var(--glass-border), var(--sh-sm); } .header .container{height:92px; gap:1.8rem;} .brand .mark{width:52px; height:52px; filter:drop-shadow(0 6px 14px rgba(14,122,82,.35));} .brand .name{font-size:1.62rem; background:linear-gradient(135deg,var(--brand-700),var(--brand-500)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} [data-theme="dark"] .brand .name{background:linear-gradient(135deg,#7FE3BE,var(--brand-300)); -webkit-background-clip:text; background-clip:text;} .search input{height:54px; box-shadow:var(--sh-sm); border-color:var(--glass-border);} .search input:focus{box-shadow:var(--ring), var(--sh-sm);} .search .go{box-shadow:0 6px 16px rgba(14,122,82,.4); top:7px;} .icon-btn{transition:.16s ease;} .icon-btn:hover{transform:translateY(-2px);} .icon-btn i{font-size:24px;} /* theme toggle */ .theme-toggle .ti-sun{display:none;} [data-theme="dark"] .theme-toggle .ti-moon{display:none;} [data-theme="dark"] .theme-toggle .ti-sun{display:inline;} /* ---- Nav v2 (glass, sits under sticky header) ---- */ .nav{ background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--glass-border); position:sticky; top:92px; z-index:40; } .nav .container{height:58px;} .nav-link{font-size:.94rem;} .nav-link:hover{transform:translateY(-1px);} .nav-link.is-pill{box-shadow:0 4px 12px rgba(244,169,43,.3);} /* ---- Mega-menu v2 (two-pane: rail + panels, glass) ---- */ .mega{background:var(--glass-strong); -webkit-backdrop-filter:saturate(1.6) blur(26px); backdrop-filter:saturate(1.6) blur(26px); border-color:var(--glass-border); box-shadow:var(--sh-lg);} .mega2{min-width:780px; max-width:860px; padding:0; gap:0; grid-template-columns:248px 1fr; overflow:hidden;} .mega-rail{background:var(--cream-200); padding:.6rem; display:flex; flex-direction:column; gap:3px; border-right:1px solid var(--line);} .mega-railitem{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:none; border:0; padding:.6rem .65rem; border-radius:12px; color:var(--ink-700); font:inherit; font-weight:600; font-size:.9rem; transition:.14s;} .mega-railitem .mi{width:36px; height:36px; border-radius:11px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; font-size:19px; transition:.14s;} .mega-railitem .ch{margin-left:auto; opacity:.35; font-size:16px;} .mega-railitem.on,.mega-railitem:hover{background:var(--surface); color:var(--brand-700); box-shadow:var(--sh-sm);} .mega-railitem.on .mi{background:var(--brand-600); color:#fff; transform:scale(1.05);} .mega-panels{position:relative; padding:1.4rem 1.6rem; min-height:300px;} .mega-panel{display:none;} .mega-panel.on{display:block; animation:megaIn .2s ease;} @keyframes megaIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}} .mega-phead{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line-soft);} .mega-phead h4{font-family:var(--font-display); font-size:1.15rem; color:var(--ink-900);} .mega-all{color:var(--brand-700); font-weight:700; font-size:.82rem; display:inline-flex; gap:.35rem; align-items:center;} .mega-leaf{display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem .5rem;} .mega-leaf a{display:flex; align-items:center; gap:.65rem; padding:.55rem .55rem; border-radius:11px; font-size:.86rem; font-weight:500; color:var(--ink-700); transition:.14s;} .mega-leaf a:hover{background:var(--brand-50); color:var(--brand-700); transform:translateX(2px);} .mega-leaf .li{width:32px; height:32px; border-radius:10px; background:var(--cream-200); color:var(--brand-600); display:grid; place-items:center; flex-shrink:0; font-size:17px;} .mega-leaf a:hover .li{background:var(--brand-100);} .mega-cta{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; background:var(--brand-600); color:#fff; padding:.7rem 1.2rem; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; box-shadow:var(--sh-sm);} .mega .dot{display:none;} /* ---- Expressive accents ---- */ .btn-primary{box-shadow:0 6px 16px rgba(14,122,82,.32);} .btn-primary:hover{box-shadow:0 10px 24px rgba(14,122,82,.42); transform:translateY(-2px);} .cat-tile:hover .ci{transform:scale(1.08) rotate(-3deg);} .cat-tile .ci{transition:.2s;} .prod .media svg{transition:.25s;} .prod:hover .media svg{transform:scale(1.06);} :focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px;} /* surfaces that hardcoded #fff -> follow theme */ .prod .wish{background:var(--surface); border-color:var(--line); color:var(--ink-500);} .search input{background:var(--cream);} [data-theme="dark"] .hero p{color:rgba(255,255,255,.82);} /* ---- Mobile ---- */ @media(max-width:920px){ .nav{position:static;} .mega2{min-width:auto; grid-template-columns:1fr;} .mega-rail{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line);} .mega-railitem{width:auto;} .mega-railitem .ch{display:none;} .mega-leaf{grid-template-columns:repeat(2,1fr);} } @media(prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} } /* ============ Landing hero + related + newsletter (category/condition) ============ */ .landing-hero{padding:1.5rem 0 .3rem;} .lh-card{position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--brand-700),var(--brand-600) 58%,var(--brand-500)); color:#fff; padding:clamp(1.8rem,4vw,3rem); display:flex; gap:2rem; align-items:center; justify-content:space-between; box-shadow:var(--sh);} .lh-card .blob{position:absolute; border-radius:50%; opacity:.4; filter:blur(2px);} .lh-card .b1{width:300px; height:300px; background:var(--brand-500); top:-110px; right:-50px; opacity:.45;} .lh-card .b2{width:200px; height:200px; background:var(--amber-500); bottom:-120px; right:170px; opacity:.16;} .lh-main{position:relative; z-index:2; max-width:640px;} .lh-card .pill{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:.74rem; padding:.32rem .85rem; border-radius:var(--r-pill); margin-bottom:.9rem;} .lh-card h1{color:#fff; margin-bottom:.55rem;} .lh-sub{color:rgba(255,255,255,.9); font-size:1.08rem; max-width:520px; margin:0 0 1.1rem;} .lh-points{display:flex; gap:1.3rem; flex-wrap:wrap; margin:0 0 1.2rem; padding:0; list-style:none;} .lh-points li{display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:500;} .lh-points i{color:var(--amber-500);} .lh-art{position:relative; z-index:1; flex-shrink:0; width:168px; height:168px; border-radius:36px; background:rgba(255,255,255,.12); display:grid; place-items:center; overflow:hidden;} .lh-art i{font-size:78px; color:#fff;} .lh-art img{width:100%; height:100%; object-fit:cover;} .lh-chips{display:flex; gap:.5rem; flex-wrap:wrap;} .lh-chips a{background:rgba(255,255,255,.14); color:#fff; border-radius:var(--r-pill); padding:.45rem 1rem; font-size:.84rem; font-weight:600;} .lh-chips a:hover{background:rgba(255,255,255,.28);} @media(max-width:760px){ .lh-art{display:none;} } .related{padding:3rem 0 1rem;} .post{display:flex; flex-direction:column;} .post .media img{width:100%; height:100%; object-fit:cover;} .post .body h3{font-size:1.05rem; margin-bottom:.4rem;} .newsletter{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--brand-900),var(--brand-700)); border-radius:var(--r-xl); color:#fff; padding:clamp(2rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; box-shadow:var(--sh);} .newsletter h2{color:#fff; margin-bottom:.3rem;} .newsletter p{color:rgba(255,255,255,.84); margin:0;} .nl-form{display:flex; gap:.6rem; flex-wrap:wrap; min-width:300px; position:relative; z-index:1;} .nl-form input{flex:1; min-width:210px; height:52px; border:0; border-radius:var(--r-pill); padding:0 1.3rem; font:inherit; background:#fff; color:var(--ink-900);} .edu .content h2,.edu .content h3{font-family:var(--font-display); margin:1.6rem 0 .7rem;} .edu .content ul,.edu .content ol{margin:0 0 1.3rem 1.2rem; color:var(--ink-700); line-height:1.8;} .edu .content li{margin-bottom:.4rem;} /* ============ Homepage v2 — rails, shelves, brand strip ============ */ .cat-rail{display:flex; gap:1.1rem; overflow-x:auto; padding:.5rem .2rem 1rem; scroll-snap-type:x proximity;} .cat-rail::-webkit-scrollbar{height:8px;} .cat-rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;} .cat-circle{flex:0 0 auto; width:108px; text-align:center; scroll-snap-align:start;} .cat-circle .cc{width:86px; height:86px; border-radius:50%; margin:0 auto .6rem; display:grid; place-items:center; box-shadow:var(--sh-sm); transition:.2s;} .cat-circle .cc i{font-size:35px;} .cat-circle:hover .cc{transform:translateY(-5px) scale(1.04); box-shadow:var(--sh);} .cat-circle b{font-size:.82rem; display:block; line-height:1.22; color:var(--ink-900); font-weight:600;} .prod-rail{display:flex; gap:1.1rem; overflow-x:auto; padding:.5rem .2rem 1.2rem; scroll-snap-type:x proximity; scroll-padding-left:.2rem;} .prod-rail::-webkit-scrollbar{height:8px;} .prod-rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;} .prod-rail::-webkit-scrollbar-track{background:transparent;} .prod-rail > .prod{min-width:236px; max-width:236px; scroll-snap-align:start;} .brand-strip{display:flex; flex-wrap:wrap; gap:.8rem;} .brand-chip{display:inline-flex; align-items:center; gap:.55rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.6rem 1.25rem; font-weight:600; font-size:.9rem; color:var(--ink-700); box-shadow:var(--sh-sm); transition:.16s;} .brand-chip:hover{border-color:var(--brand-300); color:var(--brand-700); transform:translateY(-2px);} .brand-chip img{height:22px; width:auto;} /* hero image-banner variant */ .hero-card.has-img{background-size:cover; background-position:center;} .hero-card.has-img::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,64,43,.92),rgba(11,94,63,.62) 60%,rgba(11,94,63,.25)); z-index:0;} .hero-card.has-img .hero-content{z-index:2;} /* offers shelf accent */ .shelf-offers .sec-head h2{color:var(--coral-500);} /* Glass readability: solid fallback when backdrop-filter is unavailable */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .header{background:var(--surface);} .nav{background:var(--surface);} .mega{background:var(--surface);} } /* ============ Long-form article (blog depth) ============ */ .read-time{display:inline-flex; align-items:center; gap:.3rem; color:var(--brand-600); font-weight:600;} .article-toc{background:var(--cream-200); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.5rem; margin:0 0 2rem;} .article-toc h4{font-family:var(--font-display); font-size:1.02rem; margin:0 0 .6rem; display:flex; align-items:center; gap:.45rem; color:var(--ink-900);} .article-toc h4 i{color:var(--brand-600);} .article-toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2rem;} .article-toc li{margin-bottom:.4rem; break-inside:avoid;} .article-toc a{color:var(--brand-700); font-weight:500; font-size:.92rem;} .article-toc a:hover{text-decoration:underline;} .article .content h2{font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem); margin:2rem 0 .8rem; scroll-margin-top:170px;} .article .content h3{font-family:var(--font-display); font-size:1.2rem; margin:1.5rem 0 .6rem;} .article .content ul,.article .content ol{margin:0 0 1.3rem 1.3rem; line-height:1.85;} .article .content li{margin-bottom:.45rem;} .article .content blockquote,.callout{background:var(--brand-50); border-left:4px solid var(--brand-600); border-radius:var(--r-sm); padding:1rem 1.3rem; margin:1.5rem 0; color:var(--ink-700);} .endorse{margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line);} .endorse h3{display:flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; font-family:var(--font-display);} .endorse h3 i{color:var(--brand-600);} @media(max-width:640px){ .article-toc ol{columns:1;} } /* ============ Landing "how it works" steps ============ */ .how-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;} .hstep{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.4rem 1.4rem; box-shadow:var(--sh-sm);} .hstep .hn{position:absolute; top:-15px; left:1.4rem; width:32px; height:32px; border-radius:50%; background:var(--brand-600); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.92rem; box-shadow:var(--sh-sm);} .hstep .hic{width:54px; height:54px; border-radius:16px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; margin:.3rem 0 .9rem;} .hstep .hic i{font-size:27px;} .hstep b{display:block; font-size:1.04rem; margin-bottom:.3rem;} .hstep p{margin:0; color:var(--ink-500); font-size:.9rem;} @media(max-width:760px){ .how-steps{grid-template-columns:1fr;} } /* ============ Ratings & reviews ============ */ .stars{display:inline-flex; align-items:center; gap:1px; color:var(--amber-500); vertical-align:middle;} .stars i{font-size:15px;} .rcount{font-size:.8rem; color:var(--ink-500); margin-left:.35rem; font-weight:600;} .prod-rating{display:flex; align-items:center; margin:.1rem 0 .15rem;} .prod-rating .stars i{font-size:13px;} .pdp-rating{display:inline-flex; align-items:center; gap:.4rem; margin:.2rem 0 .2rem; } .pdp-rating .rlink{font-size:.86rem; color:var(--ink-500); font-weight:600;} .pdp-rating:hover .rlink{color:var(--brand-700);} .reviews{padding:1rem 0 2rem;} .rev-grid{display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:start;} .rev-summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; text-align:center; box-shadow:var(--sh-sm);} .rev-big{font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1; color:var(--ink-900);} .rev-summary .stars i{font-size:18px;} .rev-bars{margin-top:1rem; text-align:left; display:flex; flex-direction:column; gap:.35rem;} .rev-bar{display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--ink-500);} .rev-bar .track{flex:1; height:7px; border-radius:99px; background:var(--cream-200); overflow:hidden;} .rev-bar .track div{height:100%; background:var(--amber-500); border-radius:99px;} .rev-bar em{font-style:normal; min-width:18px; text-align:right;} .rev-list{display:flex; flex-direction:column; gap:1rem; margin-bottom:1.4rem;} .rev-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem; box-shadow:var(--sh-sm);} .rev-head{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.9rem;} .rev-head .stars i{font-size:14px;} .rev-verified{display:inline-flex; align-items:center; gap:.25rem; color:var(--brand-600); font-size:.78rem; font-weight:600;} .rev-date{color:var(--ink-300); font-size:.8rem; margin-left:auto;} .rev-title{font-weight:700; margin:.5rem 0 .2rem;} .rev-body{margin:0; color:var(--ink-700); font-size:.94rem;} .rev-form-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.3rem; box-shadow:var(--sh-sm);} .rev-form-wrap > summary{cursor:pointer; font-weight:700; color:var(--brand-700); list-style:none; display:flex; align-items:center; gap:.5rem;} .rev-form-wrap > summary::-webkit-details-marker{display:none;} .rev-form{margin-top:1rem; display:flex; flex-direction:column; gap:.7rem;} .rev-form .fld input,.rev-form .fld textarea{width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:.7rem .9rem; font:inherit; background:var(--cream); color:var(--ink-900);} .rev-form .fld input:focus,.rev-form .fld textarea:focus{outline:0; border-color:var(--brand-300); background:var(--surface);} .rev-stars-input{display:flex; gap:.2rem;} .rev-stars-input button{background:none; border:0; cursor:pointer; color:var(--amber-500); padding:.1rem;} .rev-stars-input button i{font-size:30px;} @media(max-width:760px){ .rev-grid{grid-template-columns:1fr;} } /* ============ Clinical safety panel ============ */ .safety-panel{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:1rem 1.2rem; margin-bottom:1.4rem; box-shadow:var(--sh-sm);} .safety-panel.sev-severe{border-color:#E7B4AC; background:#FCEFEC;} .safety-panel.sev-moderate{border-color:#F1D6A8; background:#FCF7EA;} [data-theme="dark"] .safety-panel.sev-severe{background:#2C1B18;} [data-theme="dark"] .safety-panel.sev-moderate{background:#2A2413;} .sp-head{display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:.5rem;} .sp-head .ti{color:var(--brand-600);} .sp-item{display:flex; gap:.6rem; padding:.6rem 0; border-top:1px solid rgba(0,0,0,.06);} .sp-item .ti{font-size:20px; margin-top:.1rem;} .sp-item.sev-severe .ti{color:#C0392B;} .sp-item.sev-moderate .ti{color:#C77B14;} .sp-item.sev-minor .ti{color:#2D6CB5;} .sp-title{font-weight:700; font-size:.95rem;} .sp-sev{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.05rem .45rem; border-radius:99px; background:rgba(0,0,0,.07); margin-left:.35rem;} .sp-detail{font-size:.9rem; color:var(--ink-700); margin-top:.15rem;} .sp-items{font-size:.82rem; color:var(--ink-500); margin-top:.25rem; font-weight:600;} .sp-foot{font-size:.82rem; color:var(--ink-500); margin-top:.7rem; padding-top:.6rem; border-top:1px solid rgba(0,0,0,.06);} .sp-foot a{color:var(--brand-700); font-weight:600;} /* Recommendation grid: keep cards their natural size and centre when few, instead of stretching 1–2 cards across the whole row. */ .reco-grid{grid-template-columns:repeat(auto-fill,minmax(200px,230px)); justify-content:center;} @media(min-width:700px){ .reco-grid{justify-content:start;} } /* Loyalty redeem field at checkout */ .loyalty-redeem{background:linear-gradient(135deg,rgba(244,169,43,.10),rgba(14,122,82,.08)); border:1px solid var(--line); border-radius:var(--r-sm,10px); padding:.8rem 1rem; margin-bottom:.9rem;} .loyalty-redeem .field span{display:flex;align-items:center;gap:.4rem;font-weight:600;} .loyalty-redeem .ti{color:var(--amber-600,#E0951A);} /* ---- Landing explore section (fills space below short product lists) ---- */ .explore .chip-wrap{display:flex; flex-wrap:wrap; gap:.6rem;} .explore-cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem;} .ecat{display:flex; align-items:center; gap:.8rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.85rem 1rem; transition:.18s; box-shadow:var(--sh-sm);} .ecat:hover{border-color:var(--brand-200); transform:translateY(-2px); box-shadow:var(--sh);} .ecat .ec-ic{width:42px; height:42px; flex:none; border-radius:12px; background:linear-gradient(150deg,var(--brand-50),var(--surface)); display:grid; place-items:center; color:var(--brand-600); font-size:1.3rem;} .ecat .ec-name{font-weight:600; font-size:.95rem; flex:1;} .ecat .ec-go{color:var(--ink-400); transition:.18s;} .ecat:hover .ec-go{color:var(--brand-600); transform:translateX(3px);} /* ---- Auto-refill subscriptions ---- */ .sub-list{display:flex; flex-direction:column; gap:.7rem;} .sub-row{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);} .sub-info{display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:180px;} .sub-info .muted{font-size:.85rem;} .sub-next{font-size:.82rem; font-weight:600; color:var(--brand-600);} .sub-next.paused{color:var(--ink-500);} .sub-actions{display:flex; gap:.4rem; flex-wrap:wrap;} .sub-edit{flex-basis:100%;} .sub-edit summary{cursor:pointer; font-size:.83rem; color:var(--ink-500);} .sub-edit-form{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:.5rem; font-size:.85rem;} .refill-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;} @media(max-width:560px){ .refill-grid{grid-template-columns:1fr;} } .pdp-subscribe{margin-top:1rem; padding:1rem 1.1rem; border:1px dashed var(--brand-200); border-radius:var(--r); background:linear-gradient(160deg,var(--brand-50),var(--surface));} .pdp-subscribe b{display:flex; align-items:center; gap:.45rem;} .pdp-subscribe .save-badge{background:var(--amber-100); color:var(--amber-600); font-weight:700; font-size:.72rem; padding:.15rem .5rem; border-radius:var(--r-pill);} .pdp-subscribe form{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem;} /* ---- Listing help panel (fills the results column when products are few) ---- */ .shop-grid > .main{align-self:start;} .list-help{display:flex; gap:1.1rem; align-items:flex-start; margin-top:1.4rem; padding:1.5rem 1.6rem; border:1px solid var(--brand-100); border-radius:var(--r-lg,18px); background:linear-gradient(150deg,var(--brand-50),var(--surface));} .list-help .lh-ic{flex:none; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--brand-600); color:#fff; font-size:1.7rem;} .list-help h3{margin:0 0 .3rem; font-size:1.15rem;} .list-help p{margin:0 0 .9rem; color:var(--ink-600); font-size:.92rem; max-width:52ch;} .list-help .lh-actions{display:flex; gap:.6rem; flex-wrap:wrap;} /* ====================== Knowledge base / Help centre ====================== */ .kb-hero{background:linear-gradient(135deg,var(--brand-700),var(--brand-800,#0B5E3F)); color:#fff; padding:2.6rem 0 2.2rem;} .kb-hero-inner{max-width:720px; margin:0 auto; text-align:center;} .kb-hero .pill{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.16); color:#fff; padding:.35rem .9rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:600;} .kb-hero h1{color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.8rem 0 .4rem;} .kb-hero p{color:rgba(255,255,255,.9); margin:0 0 1.3rem;} .kb-search{position:relative; display:flex; align-items:center; background:#fff; border-radius:var(--r-pill); padding:.2rem .4rem .2rem 1.1rem; box-shadow:0 18px 40px rgba(0,0,0,.18);} .kb-search > .ti-search{color:var(--ink-400); font-size:1.3rem;} .kb-search input{flex:1; border:0; outline:0; background:transparent; font-size:1.02rem; padding:.95rem .7rem; color:var(--ink-900);} .kb-search .kb-spin .ti{font-size:1.3rem; color:var(--brand-500); animation:kbspin 1s linear infinite; margin-right:.6rem;} @keyframes kbspin{to{transform:rotate(360deg);}} .kb-topics{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.1rem;} .kb-topic{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill); padding:.4rem .9rem; font-size:.84rem; font-weight:600; cursor:pointer; transition:.16s;} .kb-topic:hover{background:#fff; color:var(--brand-700);} .kb-layout{display:grid; grid-template-columns:1fr 320px; gap:1.6rem; align-items:start;} @media(max-width:860px){ .kb-layout{grid-template-columns:1fr;} } .kb-resulthead{font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500); margin-bottom:.9rem;} .kb-list{display:flex; flex-direction:column; gap:.7rem;} .kb-item{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; transition:.16s;} .kb-item[open]{border-color:var(--brand-200); box-shadow:var(--sh-sm);} .kb-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; font-weight:600; color:var(--ink-800);} .kb-item summary::-webkit-details-marker{display:none;} .kb-item summary .ti{color:var(--brand-500); transition:.2s; flex:none;} .kb-item[open] summary .ti{transform:rotate(180deg);} .kb-item .kb-a{padding:0 1.15rem 1.15rem; color:var(--ink-600); line-height:1.6;} .kb-item .kb-a p{margin:.2rem 0 .7rem;} .kb-empty{padding:1.6rem; border:1px dashed var(--line); border-radius:var(--r); color:var(--ink-600); text-align:center;} .kb-talk{position:sticky; top:150px; background:linear-gradient(160deg,var(--brand-50),var(--surface)); border:1px solid var(--brand-100); border-radius:var(--r-lg,18px); padding:1.4rem; text-align:center;} .kb-talk-ic{width:56px; height:56px; margin:0 auto .6rem; border-radius:16px; background:var(--brand-600); color:#fff; display:grid; place-items:center; font-size:1.8rem;} .kb-talk h3{margin:0 0 .25rem;} .kb-talk p{margin:0 0 1rem; color:var(--ink-600); font-size:.9rem;} .kb-talk .btn{margin-bottom:.5rem;} /* ============================================================ World-class polish layer — micro-interactions, depth, a11y ============================================================ */ /* Product card: lively media, crisper lift, prominent CTA */ .prod .media{overflow:hidden;} .prod .media svg{transition:transform .35s cubic-bezier(.2,.7,.2,1);} .prod:hover .media svg{transform:scale(1.07);} .prod{transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;} .prod:hover{transform:translateY(-5px); box-shadow:0 18px 38px -18px rgba(13,60,42,.35);} .prod .add{box-shadow:0 6px 14px -6px rgba(14,122,82,.7);} .prod .add:active{transform:scale(.94);} .prod .flag{box-shadow:0 2px 8px rgba(0,0,0,.08); backdrop-filter:saturate(1.2);} .prod .wish{transition:transform .16s ease, color .16s ease, border-color .16s ease;} .prod .wish:hover{transform:scale(1.12);} .prod .wish.on{color:var(--coral-500); border-color:var(--coral-500);} /* Buttons: gentle lift + shadow for primary actions */ .btn{transition:transform .16s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;} .btn-primary,.btn-pri,.btn-amber{box-shadow:0 8px 18px -10px rgba(13,60,42,.55);} .btn-primary:hover,.btn-pri:hover,.btn-amber:hover{transform:translateY(-1px); box-shadow:0 12px 22px -10px rgba(13,60,42,.6);} .btn:active{transform:translateY(0) scale(.99);} /* Inputs & search: clear branded focus */ input:focus,select:focus,textarea:focus{outline:none;} .search:focus-within,.kb-search:focus-within{box-shadow:0 0 0 3px rgba(14,122,82,.18), var(--sh, 0 10px 30px rgba(0,0,0,.08));} /* Accessibility: visible keyboard focus everywhere (kept off mouse clicks) */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--brand-400, #3Fae84); outline-offset:2px; border-radius:6px; } /* Section headings: subtle kicker accent */ .sec-head .kicker{position:relative; display:inline-block;} /* Smoother reveal for accordions/details content */ .kb-item[open] .kb-a,.faq-item[open] .ans{animation:kbreveal .22s ease;} @keyframes kbreveal{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}} /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} .prod:hover{transform:none;} .prod:hover .media svg{transform:none;} } /* ============================ Ask-a-pharmacist chat widget ============================ */ .chatw{position:fixed; right:20px; bottom:20px; z-index:1200; font-family:var(--font-body);} .chatw-bubble{display:inline-flex; align-items:center; gap:.55rem; background:var(--brand-600); color:#fff; border:0; padding:.85rem 1.15rem; border-radius:var(--r-pill); font-weight:600; font-size:.92rem; cursor:pointer; box-shadow:0 12px 30px -8px rgba(13,60,42,.55); transition:transform .18s ease, box-shadow .18s ease, background .18s ease;} .chatw-bubble:hover{background:var(--brand-700); transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(13,60,42,.6);} .chatw-bubble .ti{font-size:1.3rem;} .chatw.is-open .chatw-bubble{opacity:0; pointer-events:none;} @media(max-width:520px){ .chatw-bubble span{display:none;} .chatw-bubble{padding:.9rem; border-radius:50%;} } .chatw-panel{position:absolute; right:0; bottom:0; width:370px; max-width:calc(100vw - 32px); height:540px; max-height:calc(100vh - 100px); background:var(--surface,#fff); border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 70px -20px rgba(13,60,42,.45); display:flex; flex-direction:column; overflow:hidden; animation:chatwin .22s cubic-bezier(.2,.8,.2,1);} @keyframes chatwin{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}} .chatw-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.9rem 1rem; background:linear-gradient(135deg,var(--brand-700),var(--brand-800,#0B5E3F)); color:#fff;} .chatw-id{display:flex; align-items:center; gap:.6rem;} .chatw-id small{display:block; opacity:.85; font-size:.72rem; font-weight:500;} .chatw-dot{width:9px; height:9px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.3); flex:none;} .chatw-x{background:rgba(255,255,255,.15); color:#fff; border:0; width:30px; height:30px; border-radius:8px; cursor:pointer; display:grid; place-items:center;} .chatw-x:hover{background:rgba(255,255,255,.28);} .chatw-body{flex:1; overflow-y:auto; padding:1rem; background:var(--cream,#FBF7EF); display:flex; flex-direction:column; gap:.7rem;} .chatw-msg{max-width:90%;} .chatw-msg p{margin:0; padding:.7rem .9rem; border-radius:14px; font-size:.9rem; line-height:1.5;} .chatw-msg.bot{align-self:flex-start;} .chatw-msg.bot > p, .chatw-msg.bot > *{background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; border-radius:14px;} .chatw-msg.bot p{background:#fff; border:1px solid var(--line); color:var(--ink-700); border-bottom-left-radius:4px;} .chatw-msg.me{align-self:flex-end;} .chatw-msg.me p{background:var(--brand-600); color:#fff; border-bottom-right-radius:4px;} .chatw-chips{display:flex; flex-wrap:wrap; gap:.4rem; align-self:flex-start;} .chatw-chip{background:#fff; border:1px solid var(--brand-200); color:var(--brand-700); border-radius:var(--r-pill); padding:.35rem .8rem; font-size:.8rem; font-weight:600; cursor:pointer;} .chatw-chip:hover{background:var(--brand-600); color:#fff; border-color:var(--brand-600);} .chatw-ans{display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem;} .chatw-acc{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;} .chatw-acc summary{cursor:pointer; padding:.6rem .75rem; font-weight:600; font-size:.85rem; color:var(--brand-800); list-style:none;} .chatw-acc summary::-webkit-details-marker{display:none;} .chatw-acc[open] summary{border-bottom:1px solid var(--line);} .chatw-acc > div{padding:.6rem .75rem; font-size:.85rem; line-height:1.55; color:var(--ink-600);} .chatw-acc > div p{margin:.1rem 0 .5rem; background:none; border:0; padding:0;} .chatw-more{font-size:.78rem !important; color:var(--ink-500); padding:.2rem 0 0 !important; background:none !important; border:0 !important;} .chatw-typing{display:inline-flex !important; gap:4px;} .chatw-typing span{width:7px; height:7px; border-radius:50%; background:var(--ink-300); animation:chatwbounce 1s infinite;} .chatw-typing span:nth-child(2){animation-delay:.15s;} .chatw-typing span:nth-child(3){animation-delay:.3s;} @keyframes chatwbounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-5px); opacity:1;}} .chatw-escalate{display:flex; gap:.5rem; padding:.6rem .8rem; border-top:1px solid var(--line); background:var(--surface);} .chatw-wa{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:#25D366; color:#fff; border-radius:10px; padding:.55rem; font-size:.84rem; font-weight:600; text-decoration:none;} .chatw-wa:hover{filter:brightness(.95);} .chatw-leave{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100); border-radius:10px; padding:.55rem; font-size:.84rem; font-weight:600; cursor:pointer;} .chatw-leave:hover{background:var(--brand-100);} .chatw-input{display:flex; gap:.5rem; padding:.7rem .8rem; border-top:1px solid var(--line); background:var(--surface);} .chatw-input input{flex:1; border:1px solid var(--line); border-radius:var(--r-pill); padding:.65rem 1rem; font-size:.9rem; outline:none;} .chatw-input input:focus{border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(14,122,82,.15);} .chatw-input button{width:42px; height:42px; flex:none; border:0; border-radius:50%; background:var(--brand-600); color:#fff; cursor:pointer; display:grid; place-items:center;} .chatw-input button:hover{background:var(--brand-700);} .chatw-leaveform{display:flex; flex-direction:column; gap:.5rem; padding:.8rem; border-top:1px solid var(--line); background:var(--surface);} .chatw-leaveform input,.chatw-leaveform textarea{border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; font-size:.88rem; font-family:inherit; outline:none;} .chatw-leaveform input:focus,.chatw-leaveform textarea:focus{border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(14,122,82,.15);} .chatw-leaveact{display:flex; gap:.5rem; justify-content:flex-end;} .chatw-cancel{background:none; border:1px solid var(--line); border-radius:10px; padding:.5rem 1rem; cursor:pointer; font-weight:600; color:var(--ink-600);} .chatw-send{background:var(--brand-600); color:#fff; border:0; border-radius:10px; padding:.5rem 1.3rem; cursor:pointer; font-weight:600;} .chatw-send:hover{background:var(--brand-700);} .chatw-send:disabled{opacity:.6; cursor:default;} @media (prefers-reduced-motion: reduce){ .chatw-panel{animation:none;} .chatw-typing span{animation:none;} } /* Chat widget — conversation mode, teaser, back button */ .chatw-back{background:rgba(255,255,255,.15); color:#fff; border:0; width:30px; height:30px; border-radius:8px; cursor:pointer; display:grid; place-items:center; margin-right:.3rem;} .chatw-back:hover{background:rgba(255,255,255,.28);} .chatw-by{display:block; margin-top:.25rem; font-size:.68rem; color:var(--ink-400);} .chatw-teaser{position:absolute; right:0; bottom:64px; max-width:250px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.7rem 2rem .7rem .9rem; box-shadow:0 14px 34px -12px rgba(13,60,42,.4); font-size:.86rem; color:var(--ink-700); cursor:pointer; animation:chatwin .25s ease;} .chatw-teaser::after{content:''; position:absolute; right:26px; bottom:-7px; width:14px; height:14px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg);} .chatw-teaser-x{position:absolute; top:4px; right:6px; background:none; border:0; font-size:1.1rem; line-height:1; color:var(--ink-400); cursor:pointer;} .chatw-teaser-x:hover{color:var(--ink-700);} /* ---- PDP sticky mobile buy bar ---- */ .pdp-sticky{position:fixed; left:0; right:0; bottom:0; z-index:1100; display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); backdrop-filter:saturate(1.2) blur(8px); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(13,60,42,.35); transform:translateY(110%); transition:transform .25s cubic-bezier(.2,.8,.2,1);} .pdp-sticky.show{transform:translateY(0);} .pdp-sticky-info{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2;} .pdp-sticky-info .nm{font-weight:600; font-size:.86rem; color:var(--ink-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pdp-sticky-info .pr{font-family:var(--font-display); font-weight:700; color:var(--brand-700);} .pdp-sticky-info .pr s{font-family:var(--font-body); font-weight:500; font-size:.78rem; color:var(--ink-300); margin-left:.3rem;} .pdp-sticky .btn{flex:none; padding:.7rem 1.2rem;} /* desktop has the in-page buy box already; only surface the sticky bar on small screens */ @media (min-width:769px){ .pdp-sticky{display:none !important;} } @media (max-width:520px){ .chatw{bottom:78px;} .chatw.is-open{bottom:0;} } /* Fix: let the [hidden] attribute win over the display rules above so the widget opens/closes and shows the right panel state (was auto-opening, couldn't close, and the message form overlapped everything). */ .chatw [hidden]{ display:none !important; } /* ============================================================================ UI fixes — Rx button, live search, location picker, mega + KB search polish ========================================================================== */ /* Conspicuous "Upload Prescription" */ .nav-link.is-rx{background:linear-gradient(135deg,#FFC04D,#F0A11E); color:#3a2706; box-shadow:0 6px 16px rgba(240,161,30,.45); font-weight:700;} .nav-link.is-rx:hover{color:#3a2706; transform:translateY(-1px); box-shadow:0 10px 22px rgba(240,161,30,.55); background:linear-gradient(135deg,#FFCE6E,#F4A92B);} .nav-link.is-rx svg,.nav-link.is-rx i{color:#3a2706;} /* Soften active mega rail item (no jarring solid-green chip) */ .mega-railitem.on .mi{background:var(--brand-100); color:var(--brand-700); transform:none;} /* KB hero search — single clean control (was reading as a double bar) */ .kb-search{box-shadow:0 14px 34px rgba(0,0,0,.16);} .kb-search input{border:0 !important; background:transparent !important; box-shadow:none !important;} .kb-search input:focus{outline:0 !important; box-shadow:none !important; border:0 !important;} .kb-search:focus-within{box-shadow:0 0 0 3px rgba(244,169,43,.5), 0 14px 34px rgba(0,0,0,.16);} /* Live search typeahead dropdown */ .search-results{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 54px rgba(0,0,0,.18); padding:.4rem; z-index:70; max-height:72vh; overflow:auto;} .search-results[hidden]{display:none;} .sr-item,.sr-cond{display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:11px; color:var(--ink-800);} .sr-item:hover,.sr-cond:hover{background:var(--brand-50);} .sr-item img,.sr-noimg{width:42px; height:42px; border-radius:10px; object-fit:contain; background:var(--cream); flex:none; display:grid; place-items:center; color:var(--ink-300); font-size:20px;} .sr-name{flex:1; font-weight:600; font-size:.9rem; line-height:1.25;} .sr-rx{font-size:.6rem; background:var(--coral-50,#FAE8E2); color:var(--coral-600,#C9573F); padding:.08rem .4rem; border-radius:99px; font-weight:700;} .sr-price{font-weight:700; color:var(--brand-700); font-size:.88rem; white-space:nowrap;} .sr-cond{font-size:.88rem; font-weight:600; border-top:1px solid var(--line-soft,#F1EADC);} .sr-cond .muted{font-weight:500; font-size:.76rem; color:var(--ink-400);} .sr-empty{padding:.85rem; color:var(--ink-500); font-size:.88rem; text-align:center;} /* Location picker modal */ .locmodal{position:fixed; inset:0; background:rgba(16,40,30,.5); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:center; justify-content:center; padding:1.2rem;} .locmodal[hidden]{display:none;} .locmodal-card{background:#fff; border-radius:22px; width:100%; max-width:460px; box-shadow:0 30px 80px rgba(0,0,0,.32); padding:1.4rem; max-height:85vh; overflow:auto;} .locmodal-head{display:flex; align-items:center; justify-content:space-between;} .locmodal-head b{display:flex; align-items:center; gap:.5rem; font-family:'Fraunces',serif; font-size:1.22rem; font-weight:600;} .locmodal-x{background:var(--cream); border:0; width:36px; height:36px; border-radius:11px; cursor:pointer; color:var(--ink-700); font-size:18px; display:grid; place-items:center;} .locmodal-x:hover{background:var(--brand-50); color:var(--brand-700);} .locmodal-sub{color:var(--ink-500); margin:.35rem 0 1rem; font-size:.9rem;} .locmodal-list{display:flex; flex-direction:column; gap:.45rem;} .loczone{display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; background:var(--cream); border:1.5px solid transparent; border-radius:14px; padding:.72rem .95rem; cursor:pointer; font:inherit; transition:.14s;} .loczone:hover{border-color:var(--brand-300); background:var(--brand-50);} .loczone-name b{display:block; font-size:.92rem;} .loczone-name small{color:var(--ink-500); font-size:.74rem;} .loczone-fee{font-weight:700; color:var(--brand-700); font-size:.84rem; white-space:nowrap;} /* ============================================================================ Conditions mega redesign · search glow · location modal polish ========================================================================== */ /* Balanced conditions menu — icon cards */ .mega-cond{display:block; min-width:640px; padding:1.1rem;} .mega-cond .mega-cond-grid{display:grid; grid-template-columns:repeat(3,minmax(184px,1fr)); gap:.5rem;} .mega-cond .condcard{display:flex; align-items:center; gap:.7rem; padding:.62rem .72rem; border-radius:13px; border:1px solid var(--line); background:var(--cream); transition:.14s;} .mega-cond .condcard:hover{border-color:var(--brand-200); background:var(--brand-50); color:var(--ink-800); transform:translateY(-1px);} .mega-cond .condcard .ci{width:38px; height:38px; border-radius:11px; background:#fff; color:var(--brand-600); display:grid; place-items:center; font-size:19px; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.07);} .mega-cond .condcard.chronic .ci{background:var(--coral-50,#FAE8E2); color:var(--coral-600,#C9573F);} .mega-cond .condcard .cn{font-weight:600; font-size:.9rem; color:var(--ink-800); line-height:1.2;} .mega-cond .condcard .cn small{display:block; font-weight:500; font-size:.72rem; color:var(--coral-600,#C9573F); margin-top:1px;} .mega-cond .mega-cond-all{display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; padding:.45rem .2rem; font-weight:700; color:var(--brand-700); font-size:.9rem;} @media(max-width:1024px){ .mega-cond{min-width:auto;} .mega-cond .mega-cond-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:640px){ .mega-cond .mega-cond-grid{grid-template-columns:1fr;} } /* Subtle animated glow on the main search bar */ @keyframes searchGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(20,148,106,0), 0 1px 3px rgba(0,0,0,.06);} 50%{box-shadow:0 0 16px 1px rgba(20,148,106,.16), 0 1px 3px rgba(0,0,0,.06);} } .search input{animation:searchGlow 3.4s ease-in-out infinite;} .search:hover input{animation-duration:2.4s;} .search:focus-within input{animation:none; box-shadow:0 0 0 4px rgba(20,148,106,.18), 0 0 24px 3px rgba(20,148,106,.22) !important;} @media (prefers-reduced-motion: reduce){ .search input{animation:none;} } /* Location modal — prevent cut-off / horizontal scroll */ .locmodal-card{overflow-x:hidden;} .loczone{flex-wrap:wrap;} .loczone .loczone-name{min-width:0; flex:1 1 200px;} .loczone .loczone-name small{white-space:normal; word-break:break-word; line-height:1.35;} .loczone .loczone-fee{flex:0 0 auto; white-space:nowrap; text-align:right;} /* "Use my location" button */ .loc-detect{width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--brand-50); color:var(--brand-700); border:1.5px dashed var(--brand-200); border-radius:13px; padding:.72rem; font:inherit; font-weight:600; cursor:pointer; margin-bottom:.8rem;} .loc-detect:hover{background:var(--brand-100);} .loc-detect[disabled]{opacity:.7; cursor:default;} .loc-detect .ti-loader-2{animation:kbspin 1s linear infinite;} /* ============================================================================ Patient account & auth — warm refresh + Rx upload progress ========================================================================== */ .auth-split{display:grid; grid-template-columns:1fr 1fr; max-width:920px; margin:2.5rem auto; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(20,40,30,.4); border:1px solid var(--line,#E4EAE6); background:#fff;} .auth-aside{background:linear-gradient(160deg,#11432F,#0A2418); color:#CFE6D9; padding:2.4rem 2rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;} .auth-aside::before{content:""; position:absolute; inset:0; background:radial-gradient(420px 240px at 90% 0%,rgba(244,169,43,.18),transparent 60%); pointer-events:none;} .auth-aside > *{position:relative;} .auth-logo{display:inline-flex; align-items:center; gap:.55rem; font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; color:#fff; margin-bottom:1.4rem;} .auth-logo span:not(.al-mark){color:var(--amber,#F4A92B);} .al-mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,#FFC65A,#F4A92B); color:#0C2B20; display:grid; place-items:center; font-size:20px;} .al-mark.sm{width:44px; height:44px; border-radius:13px; flex:none;} .auth-aside h2{font-family:'Fraunces',serif; font-size:1.55rem; color:#fff; margin:0 0 1.2rem; line-height:1.2;} .auth-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem;} .auth-points li{display:flex; align-items:center; gap:.7rem; font-size:.95rem;} .auth-points li i{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.1); color:#7FE3BE; display:grid; place-items:center; font-size:18px; flex:none;} .auth-trust{margin-top:1.6rem; font-size:.84rem; color:#9FC4B2; display:flex; align-items:center; gap:.4rem;} .auth-split .auth-card{border:0; border-radius:0; box-shadow:none; padding:2.4rem;} .auth-card-head{display:flex; align-items:center; gap:.85rem; margin-bottom:1.5rem;} .auth-card-head h1{font-family:'Fraunces',serif; font-size:1.45rem; margin:0;} .auth-card-head .sub{color:var(--ink-500,#6B7A72); margin:.12rem 0 0; font-size:.88rem;} .afield input,.afield select,.afield textarea{border-radius:12px; transition:border-color .15s, box-shadow .15s;} .afield input:focus,.afield select:focus,.afield textarea:focus{box-shadow:0 0 0 4px rgba(20,148,106,.16);} .btn-acct{border-radius:12px;} @media(max-width:760px){ .auth-split{grid-template-columns:1fr; max-width:460px;} .auth-aside{display:none;} .auth-split .auth-card{padding:2rem;} } /* Account shell — warm refresh */ .acct-nav{border-color:var(--line,#E4EAE6); border-radius:18px;} .acct-id{background:linear-gradient(150deg,var(--brand-500,#149469),var(--brand-700,#0B5E3F));} .acct-id .acct-av{background:rgba(255,255,255,.22);} .acct-nav nav a{border-radius:11px;} .acct-nav nav a.on{background:var(--brand-50,#E9F4EE); color:var(--brand-700,#0B5E3F); box-shadow:inset 3px 0 0 var(--amber,#F4A92B);} .acct-stat{border-color:var(--line,#E4EAE6); border-radius:16px; position:relative; overflow:hidden; padding-left:1.3rem;} .acct-stat::before{content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:linear-gradient(180deg,var(--brand-400,#36A77C),var(--brand-700,#0B5E3F));} .acard{background:#fff; border:1px solid var(--line,#E4EAE6); border-radius:18px; padding:1.6rem; margin-bottom:1.4rem; box-shadow:0 6px 20px -12px rgba(20,40,30,.18);} .acard h2{font-family:'Fraunces',serif;} /* Rx upload progress */ .rx-progress{margin-top:1rem;} .rx-track{height:10px; border-radius:99px; background:var(--brand-50,#E9F4EE); overflow:hidden;} .rx-track span{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#36A77C,#0E7A52); transition:width .2s ease;} .rx-progress.err .rx-track span{background:linear-gradient(90deg,#e0a08f,#C0392B);} .rx-status{margin-top:.5rem; font-size:.86rem; font-weight:600; color:var(--brand-700,#0B5E3F); display:flex; align-items:center; gap:.4rem;} .rx-progress.err .rx-status{color:#C0392B;} /* ============================================================================ Patient dashboard — hero, quick actions, icon stat tiles ========================================================================== */ .acct-hero{display:flex; align-items:center; gap:1rem; background:linear-gradient(135deg,#11432F,#0B5E3F); color:#fff; border-radius:18px; padding:1.4rem 1.5rem; margin-bottom:1.4rem; position:relative; overflow:hidden; flex-wrap:wrap;} .acct-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(380px 200px at 95% 0%,rgba(244,169,43,.2),transparent 60%); pointer-events:none;} .acct-hero > *{position:relative;} .acct-hero-av{width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg,#FFC65A,#F4A92B); color:#0C2B20; display:grid; place-items:center; font-weight:800; font-size:1.4rem; font-family:'Fraunces',serif; flex:none;} .acct-hero-txt{flex:1; min-width:160px;} .acct-hero-txt h2{font-family:'Fraunces',serif; color:#fff; margin:0; font-size:1.4rem;} .acct-hero-txt p{margin:.1rem 0 0; opacity:.9; font-size:.9rem;} .acct-hero-actions{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;} .points-pill{display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.15); color:#fff; border-radius:99px; padding:.42rem .8rem; font-weight:700; font-size:.85rem;} .btn-acct.amber{background:linear-gradient(135deg,#FFC04D,#F0A11E); color:#3a2706;} .btn-acct.amber:hover{background:linear-gradient(135deg,#FFCE6E,#F4A92B);} .btn-acct.ghost-on-dark{background:rgba(255,255,255,.12); color:#fff;} .btn-acct.ghost-on-dark:hover{background:rgba(255,255,255,.22);} .qa-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem;} .qa-card{background:#fff; border:1px solid var(--line,#E4EAE6); border-radius:16px; padding:1.1rem; display:flex; flex-direction:column; transition:.15s;} .qa-card:hover{border-color:var(--brand-200,#A7DCC6); transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(20,40,30,.4);} .qa-card b{font-size:.95rem; color:var(--ink-900,#1c2a22);} .qa-card small{color:var(--ink-500,#6B7A72); font-size:.78rem;} .qa-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:22px; margin-bottom:.6rem;} .qa-ic.k-emerald{background:var(--brand-50,#E9F4EE); color:#0E7A52;} .qa-ic.k-teal{background:#DEF3EF; color:#168476;} .qa-ic.k-amber{background:#FBEFD4; color:#D98E12;} .qa-ic.k-plum{background:#EEE8F5; color:#8A6BB1;} .acct-stat{display:flex; align-items:center; gap:.85rem; padding-left:1.1rem;} .acct-stat::before{display:none;} .acct-stat .si{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; flex:none;} .acct-stat .si.k-emerald{background:var(--brand-50,#E9F4EE); color:#0E7A52;} .acct-stat .si.k-teal{background:#DEF3EF; color:#168476;} .acct-stat .si.k-amber{background:#FBEFD4; color:#D98E12;} .acct-stat .si.k-coral{background:#FAE8E2; color:#C9573F;} @media(max-width:760px){ .qa-grid{grid-template-columns:repeat(2,1fr);} } /* Account dashboard — spend sparkline */ .acct-spark{width:100%; height:46px; display:block; margin:.5rem 0 .3rem;} .spend-labels{display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-500,#6B7A72);} /* Checkout — location-derived delivery area hint */ .zone-hint{margin:.5rem 0 0; font-size:.82rem; color:var(--brand-700,#0B5E3F); display:flex; align-items:center; gap:.35rem; background:var(--brand-50,#E9F4EE); border-radius:8px; padding:.45rem .6rem;} .zone-hint i{font-size:16px;} /* Location picker — search + countrywide list polish */ .loc-search{display:flex; align-items:center; gap:.5rem; background:#fff; border:1.5px solid var(--line,#E4EAE6); border-radius:12px; padding:.55rem .8rem; margin:.2rem 0 .8rem;} .loc-search i{color:var(--ink-500,#6B7A72); font-size:18px;} .loc-search input{border:0; outline:none; flex:1; font-family:inherit; font-size:.95rem; background:transparent; color:var(--ink-900,#1c2a22);} .locmodal-list{max-height:46vh; overflow-y:auto; padding-right:.2rem;} .loczone-name small{display:block; color:var(--ink-500,#6B7A72); font-size:.78rem; margin-top:.1rem; line-height:1.3;} .loc-empty{color:var(--ink-500,#6B7A72); font-size:.88rem; padding:.9rem .4rem; text-align:center;} .zone-need{margin:.55rem 0 0; font-size:.82rem; color:#C0392B; display:flex; align-items:center; gap:.35rem;} .muted{color:var(--ink-500,#6B7A72);} /* ============================================================================ Checkout — searchable delivery-area picker (combobox) ========================================================================== */ .zonepick-field{position:relative;} .field-row{overflow:visible;} .zonepick{position:relative;} .zonepick-trigger{width:100%; display:flex; align-items:center; gap:.6rem; background:#fff; border:1.5px solid var(--line,#E4EAE6); border-radius:12px; padding:.6rem .85rem; cursor:pointer; text-align:left; font-family:inherit; font-size:.95rem; min-height:48px;} .zonepick.open .zonepick-trigger, .zonepick-trigger:focus{border-color:var(--brand-400,#36A77C); box-shadow:0 0 0 4px rgba(20,148,106,.14); outline:none;} .zpt-text{flex:1; display:flex; flex-direction:column; line-height:1.25; min-width:0;} .zpt-text b{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .zpt-meta{font-size:.78rem; color:var(--ink-500,#6B7A72);} .zpt-saved{display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; font-weight:700; color:var(--brand-700,#0B5E3F); background:var(--brand-50,#E9F4EE); border-radius:99px; padding:.2rem .55rem; white-space:nowrap; flex:none;} .zpt-chev{color:var(--ink-500,#6B7A72); transition:transform .15s; flex:none;} .zonepick.open .zpt-chev{transform:rotate(180deg);} .zonepick-panel{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:#fff; border:1px solid var(--line,#E4EAE6); border-radius:14px; box-shadow:0 24px 60px -24px rgba(20,40,30,.5); overflow:hidden;} .zonepick-search{display:flex; align-items:center; gap:.5rem; padding:.7rem .8rem; border-bottom:1px solid var(--line,#E4EAE6);} .zonepick-search i{color:var(--ink-500,#6B7A72); font-size:18px;} .zonepick-search input{border:0; outline:none; flex:1; font-family:inherit; font-size:.95rem; background:transparent; color:var(--ink-900,#1c2a22);} .zonepick-list{max-height:340px; overflow-y:auto;} .zoneopt{width:100%; display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .85rem; background:#fff; border:0; border-bottom:1px solid var(--line-soft,#EEF2EF); cursor:pointer; text-align:left; font-family:inherit;} .zoneopt:last-of-type{border-bottom:0;} .zoneopt:hover, .zoneopt.is-active{background:var(--brand-50,#E9F4EE);} .zo-main{flex:1; min-width:0;} .zo-name{font-weight:700; font-size:.92rem; color:var(--ink-900,#1c2a22); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;} .zo-towns{display:block; font-size:.78rem; color:var(--ink-500,#6B7A72); margin-top:.15rem; line-height:1.35;} .zo-fee{text-align:right; font-weight:700; font-size:.88rem; color:var(--brand-700,#0B5E3F); white-space:nowrap; flex:none;} .zo-fee small{display:block; font-weight:500; color:var(--ink-500,#6B7A72); font-size:.72rem;} .zo-check{color:var(--brand-500,#149469); font-size:18px; flex:none; opacity:0; align-self:center;} .zoneopt.is-active .zo-check{opacity:1;} .zo-badge{display:inline-flex; align-items:center; gap:.25rem; font-size:.66rem; font-weight:700; color:var(--brand-700,#0B5E3F); background:var(--brand-100,#D4EDE0); border-radius:99px; padding:.12rem .45rem;} /* ============================================================================ Order tracking — animated delivery "journey" ========================================================================== */ .journey-card{overflow:hidden;} .journey-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap;} .journey-head h3{display:flex; align-items:center; gap:.5rem; margin:0; font-family:'Fraunces',serif;} .journey-now{display:inline-flex; align-items:center; gap:.45rem; background:var(--brand-50,#E9F4EE); color:var(--brand-700,#0B5E3F); font-weight:700; font-size:.85rem; padding:.4rem .85rem; border-radius:99px;} .jn-dot{width:8px; height:8px; border-radius:50%; background:#0E7A52; animation:jnPulse 1.6s infinite;} @keyframes jnPulse{0%{box-shadow:0 0 0 0 rgba(20,148,106,.5)}70%{box-shadow:0 0 0 7px rgba(20,148,106,0)}100%{box-shadow:0 0 0 0 rgba(20,148,106,0)}} .journey{position:relative; padding:.4rem 0 .2rem;} .journey-road{position:absolute; left:10%; right:10%; top:28px; height:6px; z-index:1;} .road-base{position:absolute; inset:0; background:var(--line,#E4EAE6); border-radius:99px;} .road-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background:linear-gradient(90deg,#36A77C,#0E7A52); background-size:200% 100%; animation:roadFill 1.3s .25s cubic-bezier(.65,0,.35,1) forwards, roadShimmer 2.4s linear 1.6s infinite;} @keyframes roadFill{to{width:var(--target);}} @keyframes roadShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .road-truck{position:absolute; top:50%; left:0; transform:translate(-50%,-50%) scale(0); width:36px; height:36px; border-radius:50%; background:#0E7A52; color:#fff; display:grid; place-items:center; font-size:19px; box-shadow:0 6px 14px rgba(14,122,82,.45); z-index:3; animation:truckDrive 1.3s .25s cubic-bezier(.65,0,.35,1) forwards, truckBob 1.4s ease-in-out 1.6s infinite;} @keyframes truckDrive{0%{left:0; transform:translate(-50%,-50%) scale(0);} 30%{transform:translate(-50%,-50%) scale(1);} 100%{left:var(--target); transform:translate(-50%,-50%) scale(1);}} @keyframes truckBob{0%,100%{margin-top:0}50%{margin-top:-3px}} .journey-steps{display:flex; justify-content:space-between; gap:.4rem; position:relative; z-index:2;} .jstep{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; min-width:0;} .jnode{position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#fff; border:3px solid var(--line,#E4EAE6); color:#aab6ae; font-size:25px; transition:.3s;} .jck{position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:50%; background:#0E7A52; color:#fff; display:none; place-items:center; font-size:14px; border:2px solid #fff;} .jstep.done .jnode{background:linear-gradient(150deg,#36A77C,#0E7A52); border-color:#0E7A52; color:#fff; animation:nodePop .55s var(--d) both;} .jstep.done .jck{display:grid; animation:ckPop .35s calc(var(--d) + .35s) both;} .jstep.active .jnode{border-color:#0E7A52; color:#0E7A52; animation:nodePulse 1.9s infinite;} .jstep.todo .jnode{opacity:.65;} .jtext{display:flex; flex-direction:column; align-items:center; gap:.1rem;} .jlbl{font-weight:700; font-size:.85rem; color:var(--ink-900,#1c2a22); line-height:1.2;} .jstep.todo .jlbl{color:var(--ink-500,#6B7A72); font-weight:600;} .jts{font-size:.72rem; color:var(--ink-500,#6B7A72); min-height:1em;} @keyframes nodePop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}} @keyframes ckPop{0%{transform:scale(0)}100%{transform:scale(1)}} @keyframes nodePulse{0%{box-shadow:0 0 0 0 rgba(20,148,106,.45)}70%{box-shadow:0 0 0 15px rgba(20,148,106,0)}100%{box-shadow:0 0 0 0 rgba(20,148,106,0)}} .jrny-cancel{display:flex; align-items:center; gap:1rem; border-left:4px solid #C0392B;} .jrny-cancel i{font-size:34px; color:#C0392B; flex:none;} .jrny-cancel b{font-size:1.05rem;} .jrny-cancel p{margin:.2rem 0 0; color:var(--ink-500,#6B7A72); font-size:.9rem;} @media(max-width:720px){ .journey-road{display:none;} .journey-steps{flex-direction:column; gap:0; align-items:stretch;} .jstep{flex-direction:row; align-items:flex-start; text-align:left; gap:1rem; padding-bottom:1.4rem; position:relative;} .jstep:not(:last-child)::before{content:""; position:absolute; left:27px; top:56px; bottom:2px; width:4px; border-radius:99px; background:var(--line,#E4EAE6);} .jstep.done:not(:last-child)::before{background:linear-gradient(180deg,#36A77C,#0E7A52);} .jnode{flex:none;} .jtext{align-items:flex-start; padding-top:.35rem;} } @media(prefers-reduced-motion:reduce){ .road-fill{animation:none; width:var(--target);} .road-truck{animation:none; left:var(--target); transform:translate(-50%,-50%) scale(1);} .jstep.done .jnode,.jstep.done .jck,.jstep.active .jnode,.jn-dot{animation:none;} .jstep.done .jck{display:grid;} } /* ============================================================================ Account orders list — cards + compact mini-journey ========================================================================== */ .ord-list{display:flex; flex-direction:column; gap:1rem;} .ord-card{border:1px solid var(--line,#E4EAE6); border-radius:16px; padding:1.1rem 1.2rem; background:#fff; box-shadow:0 4px 14px -10px rgba(20,40,30,.25); transition:.15s;} .ord-card:hover{box-shadow:0 12px 26px -16px rgba(20,40,30,.4);} .ord-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap;} .ord-no{font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem; color:var(--ink-900,#1c2a22);} .ord-date{display:block; color:var(--ink-500,#6B7A72); font-size:.8rem; margin-top:.1rem;} .ord-meta{display:flex; align-items:center; gap:.7rem;} .ord-total{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--brand-700,#0B5E3F);} .ord-mini{position:relative; margin:1.3rem 0 .3rem;} .omini-track{position:absolute; left:10%; right:10%; top:14px; height:4px; z-index:1;} .omini-base{position:absolute; inset:0; background:var(--line,#E4EAE6); border-radius:99px;} .omini-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background:linear-gradient(90deg,#36A77C,#0E7A52); animation:roadFill 1s .15s ease forwards;} .omini-steps{display:flex; justify-content:space-between; position:relative; z-index:2;} .ostep{display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:1; min-width:0;} .odot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--line,#E4EAE6); color:#aab6ae; font-size:15px; transition:.3s;} .ostep.done .odot{background:linear-gradient(150deg,#36A77C,#0E7A52); border-color:#0E7A52; color:#fff;} .ostep.active .odot{border-color:#0E7A52; color:#0E7A52; animation:nodePulse 1.9s infinite;} .ostep.todo .odot{opacity:.6;} .ostep-l{font-size:.68rem; color:var(--ink-500,#6B7A72); text-align:center; line-height:1.15; white-space:nowrap;} .ostep.done .ostep-l, .ostep.active .ostep-l{color:var(--ink-900,#1c2a22); font-weight:600;} .ord-foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line-soft,#EEF2EF);} .ord-items{color:var(--ink-500,#6B7A72); font-size:.85rem; display:inline-flex; align-items:center; gap:.35rem;} .btn-acct.sm{padding:.45rem .85rem; font-size:.85rem;} .ord-cancel{margin:1rem 0 .2rem; color:#C0392B; display:flex; align-items:center; gap:.45rem; font-weight:600; background:#FBEAE7; border-radius:10px; padding:.6rem .8rem; font-size:.9rem;} @media(max-width:560px){ .ostep-l{font-size:.58rem;} .odot{width:27px; height:27px; font-size:13px;} .omini-track{top:13px;} } @media(prefers-reduced-motion:reduce){ .omini-fill{animation:none; width:var(--target);} .ostep.active .odot{animation:none;} } /* ============================================================================ DARK MODE — buyer portal fixes (account, pickers, journey, orders) These components hardcoded light backgrounds; re-skin them for dark theme. ========================================================================== */ [data-theme="dark"] .acard, [data-theme="dark"] .auth-split, [data-theme="dark"] .auth-split .auth-card, [data-theme="dark"] .acct-stat, [data-theme="dark"] .qa-card, [data-theme="dark"] .ord-card, [data-theme="dark"] .zonepick-trigger, [data-theme="dark"] .zonepick-panel, [data-theme="dark"] .loc-search, [data-theme="dark"] .locmodal-card, [data-theme="dark"] .zoneopt{ background:var(--surface); } [data-theme="dark"] .zoneopt{ border-bottom-color:var(--line-soft); } [data-theme="dark"] .zoneopt:hover, [data-theme="dark"] .zoneopt.is-active, [data-theme="dark"] .acct-nav nav a.on{ background:var(--brand-50); } [data-theme="dark"] .afield input, [data-theme="dark"] .afield select, [data-theme="dark"] .afield textarea, [data-theme="dark"] .zonepick-search input, [data-theme="dark"] .loc-search input{ background:var(--cream-200); color:var(--ink-900); border-color:var(--line); } /* Journey + mini-tracker nodes/rails */ [data-theme="dark"] .jnode, [data-theme="dark"] .odot{ background:var(--cream-200); border-color:var(--line); color:var(--ink-300); } [data-theme="dark"] .road-base, [data-theme="dark"] .omini-base{ background:var(--line); } [data-theme="dark"] .jck{ border-color:var(--surface); } /* Brand-green TEXT that doesn't lighten in dark — make readable on dark surfaces */ [data-theme="dark"] .ord-total, [data-theme="dark"] .zo-fee, [data-theme="dark"] .rx-status, [data-theme="dark"] .acct-nav nav a.on, [data-theme="dark"] .journey-now, [data-theme="dark"] .zone-hint, [data-theme="dark"] .zone-hint b, [data-theme="dark"] .zpt-saved, [data-theme="dark"] .zo-badge{ color:#62D0A6; } /* Light accent chips → dark tints */ [data-theme="dark"] .acct-stat .si.k-teal,[data-theme="dark"] .qa-ic.k-teal{ background:#10302A; color:#5AC4B0; } [data-theme="dark"] .acct-stat .si.k-amber,[data-theme="dark"] .qa-ic.k-amber{ background:#33280F; color:#E7B24A; } [data-theme="dark"] .acct-stat .si.k-coral,[data-theme="dark"] .qa-ic.k-coral{ background:#33201A; color:#E78B72; } [data-theme="dark"] .qa-ic.k-plum{ background:#241C33; color:#B79BE0; } [data-theme="dark"] .zo-badge,[data-theme="dark"] .zpt-saved{ background:var(--brand-50); } /* Cancelled banners */ [data-theme="dark"] .ord-cancel{ background:#331F1B; color:#FF8A6B; } [data-theme="dark"] .rx-track,[data-theme="dark"] .omini-base{ background:var(--line); } /* ---- Dark mode: account sidebar, stats, pills, med rows ---- */ [data-theme="dark"] .acct-nav{ background:var(--surface); } [data-theme="dark"] .acct-nav nav a{ color:var(--ink-700); } [data-theme="dark"] .acct-nav nav a:hover{ background:var(--brand-50); color:#62D0A6; } [data-theme="dark"] .acct-nav nav a.signout{ color:#FF8A6B; border-top-color:var(--line-soft); } [data-theme="dark"] .acct-stat .v{ color:#62D0A6; } [data-theme="dark"] .acct-stat .si.k-emerald, [data-theme="dark"] .qa-ic.k-emerald{ background:var(--brand-50); color:#62D0A6; } [data-theme="dark"] .med-ic{ background:var(--brand-50); color:#62D0A6; } [data-theme="dark"] .med-row .m-next{ color:#62D0A6; } [data-theme="dark"] .pill-green{ background:#12301F; color:#62D0A6; } [data-theme="dark"] .pill-amber{ background:#33280F; color:#E7B24A; } [data-theme="dark"] .pill-red{ background:#331F1B; color:#FF8A6B; } [data-theme="dark"] .pill-blue{ background:#16263A; color:#7FB2E8; } [data-theme="dark"] .pill-grey{ background:var(--line); color:var(--ink-500); } /* ============================================================================ Storefront shopping-flow warmth (cart, product buy box, summary) ========================================================================== */ /* Free-delivery progress */ .free-ship{margin-top:1rem; background:linear-gradient(135deg,var(--amber-100,#FBEFD4),var(--cream-200,#F3ECDF)); border-radius:13px; padding:.8rem .9rem;} .free-ship.done{background:linear-gradient(135deg,var(--brand-50,#E9F4EE),var(--brand-100,#D4EDE0));} .fs-msg{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-900); margin-bottom:.55rem; line-height:1.3;} .fs-msg i{color:var(--amber-600,#C8851A); font-size:18px; flex:none;} .free-ship.done .fs-msg i{color:var(--brand-600,#0E7A52);} .fs-msg b{font-family:'Fraunces',serif;} .fs-bar{height:8px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden;} .fs-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#F4A92B,#0E7A52); transition:width .55s cubic-bezier(.65,0,.35,1);} /* Order summary card */ .summary-card{border-radius:18px; box-shadow:0 10px 30px -18px rgba(20,40,30,.3);} .summary-card h3{font-family:'Fraunces',serif;} .summary-card .srow.total b{font-family:'Fraunces',serif; font-size:1.35rem; color:var(--brand-700);} .summary-card .srow.total{border-top:1px dashed var(--line); margin-top:.3rem; padding-top:.8rem;} .pay-mini{display:flex; align-items:center; gap:.4rem; justify-content:center; color:var(--ink-500); font-size:.82rem; margin-top:.75rem;} .coupon-applied{display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:var(--brand-50); border-radius:11px; padding:.6rem .85rem; color:var(--brand-700); font-weight:600;} /* Cart rows + quantity stepper */ .cart-row{transition:.15s; border-radius:14px; padding:.6rem; margin:0 -.6rem;} .cart-row:hover{background:var(--brand-50);} .cart-row .thumb{border-radius:12px; overflow:hidden;} .ci-name{font-weight:700;} .ci-total{font-family:'Fraunces',serif; color:var(--brand-700); font-size:1.05rem;} .ci-remove{color:var(--ink-300); transition:.15s; background:none; border:0; cursor:pointer;} .ci-remove:hover{color:#C0392B;} .qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:99px; overflow:hidden; background:var(--surface);} .qty button{min-width:34px; height:38px; border:0; background:transparent; font-size:1.05rem; line-height:1; color:var(--brand-700); cursor:pointer; transition:.15s;} .qty button:hover{background:var(--brand-50);} .qty input{width:40px; height:38px; text-align:center; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); font-family:inherit; font-weight:700; background:transparent; color:var(--ink-900);} /* Empty cart */ .empty{text-align:center; padding:3rem 1rem;} .empty .ic{width:90px; height:90px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1.2rem; font-size:42px; background:linear-gradient(150deg,var(--brand-50,#E9F4EE),var(--amber-100,#FBEFD4)); color:var(--brand-600,#0E7A52);} .empty h3{font-family:'Fraunces',serif; margin:0 0 .4rem;} .empty p{color:var(--ink-500);} /* Product buy box */ .pdp-info h1{font-family:'Fraunces',serif;} .pdp-price .price, .pdp-price .amt{font-family:'Fraunces',serif; color:var(--brand-700);} .rx-callout{background:linear-gradient(135deg,var(--rx-bg,#FBEEE9),var(--cream-200,#F3ECDF)); border-radius:13px;} .buybar .btn{border-radius:12px;} /* Dark-mode safety for the warmth layer */ [data-theme="dark"] .fs-bar{background:rgba(255,255,255,.1);} [data-theme="dark"] .coupon-applied{color:#62D0A6;} [data-theme="dark"] .ci-total,[data-theme="dark"] .summary-card .srow.total b,[data-theme="dark"] .pdp-price .price,[data-theme="dark"] .pdp-price .amt{color:#62D0A6;} /* Product card: keep the add button perfectly round; stack sale price cleanly */ .prod .foot{gap:.6rem;} .prod .price{min-width:0; line-height:1.2;} .prod .price s{display:block; margin:0 0 .1rem; line-height:1;} .prod .add{flex:none; flex-shrink:0;} /* Back-in-stock alerts + reorder */ .restock-alert{margin-top:1rem;padding:1rem 1.1rem;border:1px dashed var(--amber-600,#C8881A);border-radius:var(--r-sm,12px);background:var(--amber-100,#FBEFD4);} .restock-alert b{display:flex;align-items:center;gap:.45rem;color:var(--ink-900,#1c2a22);} .restock-alert p{margin:.3rem 0 .7rem;font-size:.88rem;color:var(--ink-700);} .restock-form{display:flex;gap:.5rem;flex-wrap:wrap;} .restock-form input{flex:1;min-width:150px;border:1.5px solid var(--line);border-radius:var(--r-sm,12px);padding:.6rem .85rem;background:var(--surface);font:inherit;} .order-actions{margin:.2rem 0 1.2rem;} .sa-list{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;} .sa-row{display:flex;align-items:center;gap:.9rem;padding:.75rem .2rem;border-bottom:1px solid var(--line-soft,#F1EADC);} .sa-row:last-child{border-bottom:0;} .sa-row>div:first-child{flex:1;display:flex;flex-direction:column;} .sa-name{font-weight:600;color:var(--ink-900,#1c2a22);text-decoration:none;} .sa-name:hover{color:var(--brand-700,#0B6342);} .sa-back{font-size:.78rem;font-weight:700;color:#0E7A52;background:var(--brand-50,#E1F3EA);padding:.25rem .55rem;border-radius:var(--r-pill,999px);} [data-theme="dark"] .restock-alert{background:#33280F;border-color:#5A4718;} [data-theme="dark"] .sa-name{color:var(--ink-900);} [data-theme="dark"] .sa-name:hover{color:#62D0A6;} [data-theme="dark"] .sa-back{color:#62D0A6;background:#10301F;} /* Faceted filters — chips + counts */ .filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;} .filter-chips .chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--brand-50,#E1F3EA);color:var(--brand-700,#0B6342);border:1px solid var(--brand-100,#C6E7D6);border-radius:999px;padding:.3rem .7rem;font-size:.84rem;font-weight:600;text-decoration:none;} .filter-chips .chip:hover{background:var(--brand-100,#C6E7D6);} .filter-chips .chip i{font-size:.85rem;opacity:.7;} .filter-chips .chip-clear{background:transparent;color:var(--ink-500);border-color:var(--line);} .filters .opt .fc{float:right;font-size:.78rem;color:var(--ink-400);background:var(--cream-200,#F3ECDD);border-radius:999px;padding:.05rem .45rem;} [data-theme="dark"] .filter-chips .chip{background:#10301F;color:#62D0A6;border-color:#1C4732;} [data-theme="dark"] .filters .opt .fc{background:#2A2A24;color:var(--ink-400);} /* Chat widget — dark mode (bubbles/teaser/chips hardcode #fff in light mode) */ [data-theme="dark"] .chatw-msg.bot > p, [data-theme="dark"] .chatw-msg.bot > *, [data-theme="dark"] .chatw-msg.bot p{ background:var(--surface); border-color:var(--line); color:var(--ink-900); } [data-theme="dark"] .chatw-acc{ background:var(--surface); border-color:var(--line); } [data-theme="dark"] .chatw-acc summary{ color:#62D0A6; } [data-theme="dark"] .chatw-acc > div{ color:var(--ink-700); } [data-theme="dark"] .chatw-acc[open] summary{ border-bottom-color:var(--line); } [data-theme="dark"] .chatw-chip{ background:var(--surface); border-color:var(--brand-300); color:#62D0A6; } [data-theme="dark"] .chatw-chip:hover{ background:var(--brand-600); color:#fff; border-color:var(--brand-600); } [data-theme="dark"] .chatw-more{ color:var(--ink-500) !important; } [data-theme="dark"] .chatw-teaser{ background:var(--surface); border-color:var(--line); color:var(--ink-900); } [data-theme="dark"] .chatw-teaser::after{ background:var(--surface); border-right-color:var(--line); border-bottom-color:var(--line); } [data-theme="dark"] .chatw-input input, [data-theme="dark"] .chatw-leaveform input, [data-theme="dark"] .chatw-leaveform textarea{ background:var(--cream-200); color:var(--ink-900); border-color:var(--line); } [data-theme="dark"] .chatw-input input::placeholder, [data-theme="dark"] .chatw-leaveform input::placeholder, [data-theme="dark"] .chatw-leaveform textarea::placeholder{ color:var(--ink-500); } [data-theme="dark"] .chatw-leave{ background:var(--brand-50); color:#62D0A6; border-color:var(--brand-100); } [data-theme="dark"] .chatw-cancel{ color:var(--ink-700); border-color:var(--line); } /* Dark mode — sort select + filter inputs (were hardcoded #fff/cream) */ [data-theme="dark"] .toolbar select{ background:var(--surface); color:var(--ink-900); border-color:var(--line); } [data-theme="dark"] .filters .price-row input, [data-theme="dark"] .filters .search input, [data-theme="dark"] .filters input[type=text], [data-theme="dark"] .filters input[type=number]{ background:var(--cream-200); color:var(--ink-900); border-color:var(--line); } [data-theme="dark"] .filters .search input::placeholder, [data-theme="dark"] .filters .price-row input::placeholder{ color:var(--ink-500); } /* Rx teaser cards (POM hidden from anonymous public) */ .prod .price-rx{ font-size:.84rem;font-weight:700;color:var(--brand-600,#0E7A52); } .prod-rx-teaser .foot{ align-items:center; } /* ---- Image animation: product cards + product gallery ---- */ @media (prefers-reduced-motion: no-preference){ .prod .media{ overflow:hidden; } .prod .media img{ transition: transform .45s cubic-bezier(.2,.7,.2,1); will-change: transform; } .prod:hover .media img{ transform: scale(1.07); } .gallery .main{ overflow:hidden; } .gallery .main img{ transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .28s ease; animation: blumFadeIn .45s ease; } .gallery .main:hover img{ transform: scale(1.08); } .gallery .main img.swapping{ opacity:0; transform: scale(1.03); } .thumbs button{ transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .thumbs button:hover{ transform: translateY(-2px); box-shadow: var(--sh-sm); } @keyframes blumFadeIn{ from{ opacity:0; transform: scale(1.03); } to{ opacity:1; transform: scale(1); } } } /* ---- Delivery time picker (date pills + slot buttons) ---- */ .seg-timing{ display:flex; gap:.5rem; flex-wrap:wrap; } .seg-timing .seg-opt{ flex:1 1 170px; } .sched-dates{ display:flex; gap:.5rem; overflow-x:auto; padding:.7rem .1rem .3rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .sched-dates::-webkit-scrollbar{ height:6px; } .sched-dates::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; } .date-pill{ flex:0 0 auto; min-width:78px; padding:.55rem .7rem; border:1.5px solid var(--line); background:var(--surface); border-radius:14px; cursor:pointer; text-align:center; transition:border-color .15s, background .15s, transform .12s; font-family:inherit; } .date-pill:hover{ transform:translateY(-1px); } .date-pill .dp-top{ display:block; font-weight:700; font-size:.92rem; color:var(--ink-900); } .date-pill .dp-sub{ display:block; font-size:.74rem; color:var(--ink-500); margin-top:.1rem; } .date-pill.on{ border-color:var(--brand-600,#0E7A52); background:color-mix(in srgb, var(--brand-600,#0E7A52) 10%, transparent); } .date-pill.on .dp-top{ color:var(--brand-700,#0b5e40); } .sched-slots{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; } .slot-btn{ padding:.6rem 1rem; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--ink-700); font-family:inherit; transition:.15s; } .slot-btn:hover{ border-color:var(--brand-600,#0E7A52); } .slot-btn.on{ border-color:var(--brand-600,#0E7A52); background:var(--brand-600,#0E7A52); color:#fff; } .sched-hint{ color:var(--brand-700,#0b5e40); font-weight:600; } /* ---- Product page entrance animation ---- */ @media (prefers-reduced-motion: no-preference){ .pdp-grid > .gallery{ animation: blumUp .5s ease both; } .pdp-grid > .pdp-info{ animation: blumUp .5s ease .09s both; } .pdp-info .pdp-badges .badge, .pdp-info .pdp-price{ animation: blumFadeIn .5s ease .18s both; } @keyframes blumUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } } /* ===================================================================== Mobile experience refinements (≤640) — added for cross-board polish ===================================================================== */ @media(max-width:640px){ /* tighter gutters give real content more room */ .container{ padding-inline:16px; } /* nothing should ever scroll the page sideways */ body{ overflow-x:hidden; } /* long words / URLs wrap instead of overflowing */ p, h1, h2, h3, li{ overflow-wrap:anywhere; } /* ---- Header: compact, icon-only, no overlap ---- */ .header{ position:static; } /* stop the tall bar covering the hero mid-scroll */ .header .container{ height:auto; flex-wrap:wrap; padding-block:.6rem; gap:.5rem .15rem; align-items:center; } .brand{ margin-right:auto; } .brand .mark{ width:40px; height:40px; } .brand .name{ font-size:1.22rem; } .brand .name small{ font-size:.55rem; } .header-actions{ margin-left:0; gap:.05rem; } .icon-btn{ padding:.4rem .42rem; } .icon-btn i{ font-size:23px; } .icon-btn span:not(.badge){ display:none; } /* drop the cramped labels — icons only */ .icon-btn .badge{ right:2px; top:0; } .search{ order:3; flex-basis:100%; max-width:none; } .search input{ height:48px; } /* ---- Hero: shorter, stacked, readable ---- */ .hero{ padding:1.2rem 0 .6rem; } .hero-card{ min-height:auto; padding:1.8rem 1.4rem; } .hero h1{ font-size:1.85rem; line-height:1.18; } .hero p{ font-size:1rem; } .hero-cta{ flex-direction:column; align-items:stretch; gap:.6rem; } .hero-cta .btn{ width:100%; justify-content:center; } /* ---- Checkout payment options: wrap, never overflow ---- */ .pay-opt{ gap:.7rem; padding:.85rem; } .pay-opt .pt{ min-width:0; } .pay-opt .pt small{ white-space:normal; overflow-wrap:anywhere; } /* ---- Delivery picker stays tidy ---- */ .sched-block, .sched-slots, .seg-timing{ max-width:100%; } .seg-timing .seg-opt{ flex:1 1 100%; } /* ---- Chat: keep the round bubble, drop the proactive popup that covered the CTAs ---- */ .chatw-teaser{ display:none !important; } } @media(max-width:380px){ /* very narrow phones: move the theme toggle into the menu to avoid cramming */ .icon-btn.theme-toggle{ display:none; } } /* ---- Post-delivery Google review CTA (order page) ---- */ .review-cta{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; margin-bottom:1.2rem; border:1px solid var(--amber-200,#F6D9A6); background:linear-gradient(120deg,var(--amber-50,#FEF6E7),var(--surface)); } .review-cta:hover{ box-shadow:var(--sh-sm); } .review-cta-ic{ width:46px; height:46px; flex-shrink:0; border-radius:14px; background:var(--amber-100,#FBE7C2); color:var(--amber-600,#C77F12); display:grid; place-items:center; } .review-cta-ic i{ font-size:24px; } .review-cta-tx{ flex:1; min-width:0; } .review-cta-tx b{ display:block; color:var(--ink-800,#26302B); } .review-cta-tx small{ color:var(--ink-500); font-size:.86rem; } .review-cta-go{ flex-shrink:0; display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.92rem; color:#fff; background:var(--brand-600); padding:.6rem 1rem; border-radius:var(--r-pill); white-space:nowrap; } .review-cta:hover .review-cta-go{ background:var(--brand-700); } @media(max-width:560px){ .review-cta{ flex-wrap:wrap; } .review-cta-tx{ flex:1 1 60%; } .review-cta-go{ width:100%; justify-content:center; order:3; } } /* ---- Auth: forgot-password link + email verification banner ---- */ .auth-forgot{ text-align:right; margin:-.35rem 0 .8rem; } .auth-forgot a{ font-size:.86rem; color:var(--brand-600); } .acct-verify-banner{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--amber-50,#FEF6E7); border:1px solid var(--amber-200,#F6D9A6); color:var(--ink-700,#3A4640); padding:.7rem 1rem; border-radius:12px; margin-bottom:1rem; font-size:.92rem; } .acct-verify-banner i{ color:var(--amber-600,#C77F12); font-size:18px; } .acct-verify-banner a{ margin-left:auto; font-weight:700; color:var(--brand-600); white-space:nowrap; } /* ---- Profile completion meter (account dashboard) ---- */ .profile-meter{ background:var(--surface); border:1px solid var(--line,#E6ECE9); border-radius:16px; padding:1.1rem 1.3rem; margin-bottom:1.2rem; } .pm-head{ display:flex; align-items:center; gap:1rem; margin-bottom:.7rem; } .pm-txt b{ display:block; color:var(--ink-800,#26302B); } .pm-txt small{ color:var(--ink-500,#6B7480); font-size:.85rem; } .pm-pct{ margin-left:auto; font-weight:800; font-size:1.4rem; color:var(--brand-600,#0E7A52); } .pm-bar{ height:8px; border-radius:99px; background:var(--cream,#EEF3F0); overflow:hidden; } .pm-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand-500,#16A368),var(--brand-600,#0E7A52)); transition:width .5s ease; } .pm-todo{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; } .pm-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; font-weight:600; color:var(--brand-700,#0B5F40); background:var(--brand-50,#EAF7EF); border:1px solid var(--brand-100,#CDEBD9); padding:.35rem .7rem; border-radius:99px; } .pm-chip:hover{ background:var(--brand-100,#CDEBD9); } .pm-chip i{ font-size:14px; } /* ---- Allergy quick-add (health page) ---- */ .allergy-quick{ margin-top:1rem; } .aq-label{ display:block; font-size:.82rem; color:var(--ink-500,#6B7480); margin-bottom:.5rem; } .aq-chips{ display:flex; flex-wrap:wrap; gap:.5rem; } .aq-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.86rem; font-weight:600; cursor:pointer; color:#C0392B; background:#FCEBEB; border:1px solid #F4C9C4; padding:.4rem .8rem; border-radius:99px; font-family:inherit; } .aq-chip:hover{ background:#F9DDD9; } .aq-chip.added{ color:#1E8A3C; background:#EAF7EF; border-color:#CDEBD9; cursor:default; } .aq-chip i{ font-size:15px; } .allergy-custom{ margin-top:1.1rem; border-top:1px solid #EEF2F0; padding-top:1rem; } .allergy-custom summary{ cursor:pointer; font-weight:700; color:var(--brand-700,#0B5F40); list-style:none; display:inline-flex; align-items:center; gap:.4rem; } .allergy-custom summary::-webkit-details-marker{ display:none; } .allergy-none{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:#EAF7EF; border:1px solid #CDEBD9; color:#1E6F40; padding:.8rem 1rem; border-radius:12px; } .allergy-none i{ color:#1E8A3C; font-size:18px; } .allergy-noneset{ margin-top:1rem; } .linklike{ background:none; border:none; color:var(--brand-600,#0E7A52); font-weight:600; cursor:pointer; text-decoration:underline; padding:0; font-size:.88rem; font-family:inherit; } /* ---- Toast notifications ---- */ .toast-wrap{ position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:.5rem; width:min(92vw,420px); pointer-events:none; } .toast{ display:flex; align-items:center; gap:.6rem; background:#14201B; color:#fff; padding:.75rem .8rem .75rem 1rem; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.22); transform:translateY(16px); opacity:0; transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s; pointer-events:auto; font-size:.92rem; } .toast.in{ transform:translateY(0); opacity:1; } .toast.out{ transform:translateY(8px); opacity:0; } .toast > i{ font-size:19px; color:#7FC9AC; flex:none; } .toast-msg{ flex:1; line-height:1.3; } .toast-action{ background:none; border:0; color:#7FC9AC; font-weight:800; cursor:pointer; padding:.2rem .4rem; font-size:.9rem; font-family:inherit; } .toast-action:hover{ text-decoration:underline; } .toast-x{ background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer; padding:.2rem; display:grid; place-items:center; } .toast-x:hover{ color:#fff; } .toast-error{ background:#7A1F1F; } .toast-error > i{ color:#FFC9C4; } /* ---- Add-to-cart button states ---- */ .prod .add.loading{ opacity:.6; pointer-events:none; } .prod .add.loading i{ animation:blum-spin .7s linear infinite; } .prod .add.added{ background:#0E7A52 !important; color:#fff !important; } @keyframes blum-spin{ to{ transform:rotate(360deg); } } /* ---- Clickable product media ---- */ .prod .media-link{ display:block; width:100%; height:100%; } .prod .media .wish, .prod .media .flag{ z-index:3; } /* ---- Floating cart button (mobile) ---- */ .cart-fab{ position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:900; display:inline-flex; align-items:center; gap:.5rem; background:#0E7A52; color:#fff; padding:.8rem 1.1rem; border-radius:999px; box-shadow:0 8px 24px rgba(14,122,82,.4); font-weight:700; text-decoration:none; } .cart-fab:hover{ background:#0B5F40; color:#fff; } .cart-fab i{ font-size:20px; } .cart-fab .fab-count{ background:#fff; color:#0B5F40; min-width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; font-size:.78rem; font-weight:800; padding:0 .3rem; } @media (min-width:900px){ .cart-fab{ display:none !important; } } /* ---- Cart row loading state ---- */ .cart-row.updating{ opacity:.55; pointer-events:none; position:relative; } .cart-row.updating::after{ content:""; position:absolute; top:50%; right:1rem; width:18px; height:18px; margin-top:-9px; border:2px solid #CDEBD9; border-top-color:#0E7A52; border-radius:50%; animation:blum-spin .7s linear infinite; } /* ---- Inline form validation ---- */ .field-msg{ color:#C0392B; font-size:.8rem; margin-top:.25rem; } .invalid{ border-color:#C0392B !important; box-shadow:0 0 0 3px rgba(192,57,43,.12) !important; } /* ---- Mobile spacing polish ---- */ @media (max-width:600px){ .prod-grid{ gap:.7rem; } .page-hero{ padding:1.15rem 0; } .page-hero h1{ font-size:1.35rem; } .acard{ padding:1.05rem; } .co-card{ padding:1.05rem; } .header-actions{ gap:.15rem; } .filter-chips{ gap:.4rem; } .empty{ padding:2rem 1rem; } .toast-wrap{ bottom:calc(4.6rem + env(safe-area-inset-bottom)); } } /* ---- Rich, colorful "added to cart" toast ---- */ @keyframes ct-glow{ 0% { box-shadow:0 12px 34px rgba(11,95,64,.40), 0 0 0 0 rgba(244,169,43,.60); } 70% { box-shadow:0 16px 44px rgba(11,95,64,.50), 0 0 0 16px rgba(244,169,43,0); } 100% { box-shadow:0 16px 44px rgba(11,95,64,.50), 0 0 0 0 rgba(244,169,43,0); } } @keyframes ct-shine{ from{ left:-60%; } to{ left:130%; } } .ctoast{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#17A377 0%,#0E7A52 55%,#0A5537 100%); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:.9rem .95rem; width:min(92vw,384px); box-shadow:0 16px 44px rgba(11,95,64,.5); transform:translateY(18px) scale(.95); opacity:0; transition:transform .34s cubic-bezier(.2,.9,.25,1),opacity .34s; pointer-events:auto; } .ctoast.in{ transform:translateY(0) scale(1); opacity:1; animation:ct-glow 1.7s ease-out 2; } .ctoast.out{ transform:translateY(8px); opacity:0; } .ctoast::before{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); animation:ct-shine 1.5s ease-out .18s 1; } .ct-main{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; padding-right:1.4rem; position:relative; z-index:1; } .ct-thumb{ width:48px; height:48px; border-radius:11px; overflow:hidden; flex:none; background:#fff; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.22); } .ct-thumb img{ width:100%; height:100%; object-fit:cover; } .ct-check{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#F7B942,#E0951A); color:#fff; } .ct-check i{ font-size:23px; } .ct-text{ display:flex; flex-direction:column; min-width:0; } .ct-text b{ font-size:.92rem; font-weight:800; color:#fff; display:inline-flex; align-items:center; gap:.35rem; letter-spacing:.1px; } .ct-text b i{ font-size:17px; color:#FFDD8F; } .ct-name{ font-size:.88rem; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .ct-main:hover .ct-name{ text-decoration:underline; } .ct-actions{ display:flex; align-items:center; gap:.5rem; margin-top:.8rem; position:relative; z-index:1; } .ct-undo{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff; font-weight:700; font-size:.85rem; padding:.5rem .95rem; border-radius:999px; cursor:pointer; font-family:inherit; } .ct-undo:hover{ background:rgba(255,255,255,.26); } .ct-go{ margin-left:auto; display:inline-flex; align-items:center; gap:.25rem; background:#F7B942; color:#1B2620; font-weight:800; font-size:.88rem; padding:.55rem 1.1rem; border-radius:999px; text-decoration:none; box-shadow:0 5px 16px rgba(247,185,66,.55); } .ct-go:hover{ background:#FFC559; color:#1B2620; } .ct-go i{ font-size:16px; } .ct-x{ position:absolute; top:.55rem; right:.55rem; background:none; border:0; color:rgba(255,255,255,.72); cursor:pointer; padding:.2rem; display:grid; place-items:center; border-radius:6px; z-index:2; } .ct-x:hover{ background:rgba(255,255,255,.2); color:#fff; } @media (prefers-reduced-motion:reduce){ .ctoast.in{ animation:none; } .ctoast::before{ display:none; } } /* ---- Payment badges ---- */ .pay{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:1rem; } .pay .pay-badge{ height:24px; width:auto; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.15); } /* ---- Footer socials ---- */ .foot-social a:hover{ color:#fff !important; } /* ---- Back to top ---- */ .to-top{ position:fixed; left:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:850; width:44px; height:44px; border-radius:50%; border:0; background:#14201B; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.28); cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; } .to-top.show{ opacity:.9; transform:translateY(0); } .to-top:hover{ opacity:1; } [data-theme="dark"] .to-top{ background:#0E7A52; } /* ---- Logged-in indicator ---- */ .icon-btn.is-in span{ color:var(--brand-600,#0E7A52); font-weight:700; } [data-theme="dark"] .icon-btn.is-in span{ color:#7FC9AC; }