/* --------------------------------------------------------------
   Tramadol.shop — Verdant / Porcelain SPA visual system
   Frontend only. Works with the untouched Express API contracts.
   -------------------------------------------------------------- */
:root {
  --pharmacy-bg:#f8f6f1; --pharmacy-surface:#f0f4ee; --pharmacy-surface-mint:#e8f4ed;
  --ink:#19332d; --ink-soft:#50665f; --ink-light:#71827b;
  --teal-primary:#147a65; --teal-dark:#115847; --teal-light:#e0f3e9;
  --blue-medical:#147a65; --blue-medical-light:#e0f3e9;
  --rx-amber:#b16a35; --rx-amber-bg:#fff1df;
  --line:#e2e8df; --white:#fff;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Manrope','DM Sans',system-ui,sans-serif;
  --radius-lg:22px; --radius-md:13px; --radius-sm:9px;
  --shadow-sm:0 8px 25px rgba(13,52,42,.05);
  --shadow-md:0 15px 38px rgba(13,52,42,.08);
  --shadow-lg:0 22px 70px rgba(13,52,42,.13);
  --spa-dark:#173d33; --spa-coral:#f0a074;
}
html {scroll-padding-top:100px;}
body.spa-app {background:var(--pharmacy-bg); color:var(--ink); font-size:15px; line-height:1.65;}
body.spa-app:before {content:'';position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 95% 15%,#e6efe4 0,transparent 30%),radial-gradient(circle at 0 65%,#f9eddd 0,transparent 30%);}
body.spa-app h1,body.spa-app h2,body.spa-app h3,body.spa-app h4 {font-family:var(--font-display);color:var(--ink);letter-spacing:-.035em;}
body.spa-app p {line-height:1.72;}
body.spa-app .container {max-width:1230px;padding-left:28px;padding-right:28px;}
body.spa-app .section {padding-top:72px;padding-bottom:65px;}
body.spa-app .section-tight {padding-top:42px;padding-bottom:35px;}
body.spa-app .spa-view {display:none;animation:spaFadeIn .28s ease-out both;min-height:52vh;}
body.spa-app .spa-view[hidden] {display:none !important;}
body.spa-app .spa-view.is-active {display:block;}
@keyframes spaFadeIn {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.spa-app .spa-view{animation:none}body.spa-app *{scroll-behavior:auto!important}}
.spa-loading {height:3px;width:100%;position:fixed;left:0;top:0;background:linear-gradient(90deg,#147a65,#f0a074);z-index:2000;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.spa-loading.is-loading {transform:scaleX(.74)}
/* Top strip */
.announcement-bar {background:#153c33;color:#e3eee7;font-size:12.5px;letter-spacing:.01em;}
.announcement-inner{min-height:37px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.announcement-inner a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.35)}
.announcement-left{display:inline-flex;align-items:center;gap:9px}
.announcement-pulse{width:7px;height:7px;background:#b7dfb0;border-radius:50%;box-shadow:0 0 0 4px #b7dfb025}
/* New nav */
body.spa-app .site-header.spa-header{background:rgba(255,255,255,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #e8ebe5;top:0;box-shadow:0 10px 35px rgba(25,51,45,.045);z-index:500;}
body.spa-app .spa-header .navbar{max-width:1230px;padding:15px 28px;gap:25px;min-height:82px;}
.spa-brand{display:inline-flex;align-items:center;gap:10px;min-width:215px;flex-shrink:0;}
.spa-brand-mark{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--spa-dark);color:#f5c5a1;flex-shrink:0;}
.spa-brand-text{color:#163b30;font-size:21px;font-weight:800;letter-spacing:-.07em;line-height:1;display:flex;flex-wrap:wrap;}
.spa-brand-text>span{color:#15876e;}
.spa-brand-text small{display:block;width:100%;font-size:8px;letter-spacing:.23em;color:#879c90;font-weight:800;margin-top:7px;}
body.spa-app .spa-header .nav-links{display:flex;align-items:center;gap:4px;margin:0 auto;}
body.spa-app .spa-header .nav-links a{display:block;color:#5b7068;font-weight:700;font-size:13.4px;padding:10px 13px;border-radius:12px;white-space:nowrap;transition:all .2s ease;}
body.spa-app .spa-header .nav-links a:hover,body.spa-app .spa-header .nav-links a.active{background:#eaf4ec;color:#146f59;}
body.spa-app .spa-header .nav-actions{display:flex;align-items:center;gap:12px;}
body.spa-app .spa-header .cart-btn,body.spa-app .spa-header .nav-search{border:1px solid #e0eae2;background:#f5f8f3;color:#204c3e;border-radius:13px;width:43px;height:43px;display:flex;align-items:center;justify-content:center;position:relative;padding:0;transition:transform .2s ease,background .2s ease;flex-shrink:0;}
body.spa-app .spa-header .cart-btn:hover,body.spa-app .spa-header .nav-search:hover{background:#e6f3eb;transform:translateY(-1px);}
body.spa-app .spa-header .cart-count{top:-6px;right:-5px;color:#fff;background:#e97b56;border-radius:50%;font-size:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.nav-contact{display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:12px 16px;background:#193f34;color:#fff;border-radius:12px;white-space:nowrap;font-size:13px;font-weight:700;}
.nav-contact:hover{background:#126950;color:#fff;}
body.spa-app .spa-header .nav-toggle{display:none;border:0;background:none;width:40px;height:40px;padding:9px;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
body.spa-app .spa-header .nav-toggle span{height:2px;width:22px;background:#174235;border-radius:8px;display:block;}
/* Core buttons / accents */
body.spa-app .btn{border-radius:13px;padding:13px 22px;min-height:45px;box-shadow:none;font-family:var(--font-body);font-weight:800;letter-spacing:-.01em;}
body.spa-app .btn-sm{padding:8px 16px;min-height:35px;}
body.spa-app .btn-primary{background:#185d4d;border:1px solid #185d4d;color:#fff;}
body.spa-app .btn-primary:hover{background:#0f4337;border-color:#0f4337;color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(15,67,55,.17)}
body.spa-app .btn-outline{background:#fff;border:1.5px solid #c6d9c9;color:#135744;}
body.spa-app .btn-outline:hover{background:#e9f4eb;}
body.spa-app .btn-amber{background:#ed9772;color:#263b31;border:0;}
body.spa-app .eyebrow{color:#15775c;font-size:11px;letter-spacing:.16em;background:#edf5e8;border-radius:999px;padding:8px 14px;font-family:var(--font-body);}
body.spa-app .eyebrow:before{background:#ef9d75;width:6px;height:6px;border-radius:50%;}
body.spa-app .rx-tag.otc{background:#e4f3e8;color:#176b55;border-color:#c5e5d1;border-radius:100px;padding:6px 11px;}
/* Hero reinterpretation, keeps source text/assets */
body.spa-app [data-view="home"]{overflow:hidden;}
body.spa-app [data-view="home"] .hero{position:relative;max-width:none!important;min-height:575px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:64px;margin:22px auto 0;padding:65px max(28px,calc((100vw - 1174px)/2)) 68px!important;background:radial-gradient(ellipse at 80% 35%,#336453 0%,transparent 42%),linear-gradient(112deg,#153b31 12%,#225a4a 100%);border-radius:0 0 44px 44px;}
body.spa-app [data-view="home"] .hero:before{position:absolute;content:'';height:340px;width:340px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-115px;top:-150px;box-shadow:0 0 0 52px rgba(255,255,255,.028),0 0 0 105px rgba(255,255,255,.022);pointer-events:none;}
body.spa-app [data-view="home"] .hero .eyebrow{color:#ddf7dc;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);}
body.spa-app [data-view="home"] .hero h1{color:#fff;font-size:clamp(38px,4.2vw,61px);line-height:1.115;letter-spacing:-.058em;max-width:660px;margin:17px 0 22px;}
body.spa-app [data-view="home"] .hero .lead{font-size:16px;max-width:605px;color:#e3efe8;line-height:1.8;margin-bottom:18px;}
body.spa-app [data-view="home"] .hero p[style]{color:#c3d9cf!important;max-width:560px;line-height:1.75;}
body.spa-app [data-view="home"] .hero .hero-actions{margin-top:25px;margin-bottom:28px;display:flex;gap:12px;flex-wrap:wrap;}
body.spa-app [data-view="home"] .hero .btn-primary{background:#f5b18b;border-color:#f5b18b;color:#183c31;}
body.spa-app [data-view="home"] .hero .btn-primary:hover{background:#ffcca9;border-color:#ffcca9;}
body.spa-app [data-view="home"] .hero .btn-outline{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.27);color:#fff;}
body.spa-app [data-view="home"] .hero .hero-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;margin-top:32px;max-width:620px;}
body.spa-app [data-view="home"] .hero-trust>div{border:1px solid rgba(255,255,255,.15);border-radius:13px;padding:13px 15px;background:rgba(255,255,255,.065);backdrop-filter:blur(6px);min-width:0;}
body.spa-app [data-view="home"] .hero-trust b{color:#fff;display:block;font-weight:800;font-size:12px;}
body.spa-app [data-view="home"] .hero-trust span{color:#b7d4c8;display:block;font-size:11.4px;line-height:1.45;margin-top:4px;}
body.spa-app [data-view="home"] .hero .hero-visual{background:linear-gradient(152deg,#fcfbf6,#dbe8de);border-radius:36px;padding:22px;position:relative;box-shadow:0 25px 70px rgba(4,32,24,.27);transform:rotate(2deg);margin:0;min-width:0;}
body.spa-app [data-view="home"] .hero .hero-visual>img{width:100%;height:385px;object-fit:cover;border-radius:24px;transform:rotate(-2deg);}
body.spa-app [data-view="home"] .hero .sticker{position:absolute;box-shadow:0 12px 30px #143f3522;border:1px solid #f1f3e8;background:#fff;border-radius:13px;padding:12px 15px;}
body.spa-app [data-view="home"] .hero .sticker.s1{left:-23px;top:24px;right:auto;bottom:auto;}
body.spa-app [data-view="home"] .hero .sticker.s2{right:-23px;bottom:25px;left:auto;top:auto;}
/* General section cards, catalogue and grids */
body.spa-app .section-head{margin-bottom:30px;}
body.spa-app .section-head h2{font-size:clamp(25px,3vw,39px);margin:4px 0 11px;line-height:1.18;}
body.spa-app .section-head p{max-width:700px;color:var(--ink-soft);}
body.spa-app .grid-4{gap:20px;}
body.spa-app .card,body.spa-app .card-category,body.spa-app .product-card,body.spa-app .blog-card{background:#fff;border:1px solid #e7ebe2;box-shadow:0 10px 32px rgba(25,64,44,.04);border-radius:20px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
body.spa-app .card:hover,body.spa-app .card-category:hover,body.spa-app .product-card:hover,body.spa-app .blog-card:hover{border-color:#b6d5c1;transform:translateY(-4px);box-shadow:0 21px 43px rgba(25,64,44,.09);}
body.spa-app .card-category{padding:27px;min-height:220px;}
body.spa-app .icon-box{background:#eaf4e8;border-radius:16px;width:57px;height:57px;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:22px;}
body.spa-app .medication-img-wrap,body.spa-app .product-thumb{background:radial-gradient(circle,#ffffff 0%,#f0f5ef 90%);border-radius:16px;overflow:hidden;}
body.spa-app .home-medication-card{padding:14px 15px 20px;}
body.spa-app .medication-img-wrap{height:185px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
body.spa-app .medication-img-wrap img{max-height:168px;width:100%;object-fit:contain;}
body.spa-app .home-medication-heading{font-size:23px;border-left:4px solid #e7a37e;padding-left:13px;}
body.spa-app .home-medication-section{margin-bottom:35px;}
body.spa-app .home-medication-category,body.spa-app .product-category{color:#22806a;letter-spacing:.09em;font-size:10.5px;font-weight:800;text-transform:uppercase;}
body.spa-app .card-action{font-weight:800;color:#166c54;}
body.spa-app .home-medication-price{font-family:var(--font-display);font-size:21px;font-weight:800;color:#19392f;}
body.spa-app .home-medication-size{font-size:12px;font-weight:500;color:#75847d;}
body.spa-app #catalogue{border-radius:26px;padding-top:26px;}
body.spa-app #safety,body.spa-app [data-view="home"] #faq{background:transparent!important;}
body.spa-app details.accordion-item,body.spa-app .accordion-item{border:1px solid #e0e8df;background:#fff;border-radius:15px;padding:10px 18px;margin:9px 0;box-shadow:0 8px 18px #14382608;}
body.spa-app details.accordion-item summary{cursor:pointer;color:#204c3c;font-weight:750;}
/* Interior page header and layout */
body.spa-app .spa-view:not([data-view="home"])>main{padding-top:58px;padding-bottom:76px;}
body.spa-app .spa-view:not([data-view="home"])>main>h1{font-size:clamp(33px,3.8vw,49px);line-height:1.15;margin:12px 0 15px;}
body.spa-app .spa-view:not([data-view="home"])>main>.eyebrow{margin-bottom:6px;}
body.spa-app .spa-view:not([data-view="home"])>.container,body.spa-app .spa-view:not([data-view="home"])>main{max-width:1230px;}
body.spa-app input,body.spa-app select,body.spa-app textarea{font-family:var(--font-body);border-radius:12px;border-color:#d8e3da;color:#233e35;background-color:#fff;}
body.spa-app input:focus,body.spa-app select:focus,body.spa-app textarea:focus{outline:2px solid #8fc5af;outline-offset:1px;}
body.spa-app .shop-layout{gap:28px;align-items:start;}
body.spa-app .filter-box{background:#fff;border:1px solid #e1e9df;border-radius:22px;padding:27px;box-shadow:var(--shadow-sm);position:sticky;top:115px;}
body.spa-app .filter-box h2{font-size:15px;font-weight:800;color:#1e4a3a;}
body.spa-app .filter-opt{padding:6px 0;display:flex;gap:10px;align-items:center;color:#566d60;}
body.spa-app .product-grid{gap:19px;}
body.spa-app .product-card .product-thumb{margin:12px 12px 0;height:210px;display:flex;align-items:center;justify-content:center;}
body.spa-app .product-card .product-thumb img{max-height:185px;max-width:85%;object-fit:contain;}
body.spa-app .product-card .product-body{padding:19px 19px 20px;}
body.spa-app .product-card h3{font-size:18px;line-height:1.4;}
body.spa-app .product-rating{color:#bd844f;}
body.spa-app .product-footer{gap:10px;}
body.spa-app .product-footer .price{font-weight:800;color:#1a4637;}
body.spa-app .product-footer .btn{pointer-events:none;}
/* Product details */
body.spa-app .breadcrumb{color:#6c7d72;font-size:12.5px;}
body.spa-app .breadcrumb a{color:#1c7a60;}
body.spa-app .product-detail{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:54px;align-items:start;margin-top:35px;}
body.spa-app .product-detail-visual{background:linear-gradient(135deg,#edf5ee,#fff9ee);border:1px solid #e4eadf;border-radius:28px;min-height:450px;display:flex;align-items:center;justify-content:center;padding:45px;}
body.spa-app .product-detail-visual img{max-height:380px!important;filter:drop-shadow(0 17px 26px #183b3320)!important;}
body.spa-app .product-detail h1{font-size:clamp(30px,3vw,43px);line-height:1.18;}
body.spa-app .big-price{font-family:var(--font-display);color:#165947;font-weight:800;}
body.spa-app .pill-selection{background:#fff;border:1px solid #e3e9de;border-radius:19px;padding:21px;}
body.spa-app .pill-options{gap:10px;}
body.spa-app .pill-option{background:#fbfcf8;border:1.5px solid #dfe6dc;border-radius:13px;transition:all .2s;}
body.spa-app .pill-option.active,body.spa-app .pill-option[aria-pressed="true"]{background:#e9f5ed;border-color:#2c9b79;box-shadow:inset 0 0 0 1px #2c9b79;}
body.spa-app #relatedStrip{margin-top:20px;}
/* Blog / articles */
body.spa-app .blog-card{height:100%;}
body.spa-app .blog-cover{height:195px!important;background:#dce9da!important;}
body.spa-app .blog-cover img{object-fit:cover;}
body.spa-app .blog-card-body{padding:23px;}
body.spa-app .blog-post-content{max-width:800px;line-height:1.9;margin:30px auto;}
body.spa-app .blog-post-content h2{margin-top:35px;font-size:26px;}
body.spa-app .blog-post-content p{color:#485e53;}
body.spa-app .blog-post-hero{padding:28px 32px;border-radius:22px;background:#ecf3e8;}
/* About page preserved content, new surface system */
body.spa-app [data-view="about"] .card{border-color:#e6ebe2;}
body.spa-app [data-view="about"] section[style*="background"]{background:#eef3e8!important;border-radius:30px!important;}
/* Contact page */
body.spa-app .contact-hero-banner{background:linear-gradient(118deg,#e6f1e9,#f5eddf);padding:42px 48px;border-radius:28px;margin-bottom:34px;border:1px solid #e1ebe0;}
body.spa-app .contact-hero-banner h1{font-size:clamp(31px,3.5vw,48px);line-height:1.2;}
body.spa-app .contact-grid-wrapper{gap:25px;}
body.spa-app .pharmacy-info-card{background:linear-gradient(160deg,#164536,#24614d);border-radius:25px;padding:36px;box-shadow:var(--shadow-md);}
body.spa-app .pharmacy-info-card h2,body.spa-app .pharmacy-info-card .contact-feature-text strong{color:#fff;}
body.spa-app .modern-contact-form-card{background:#fff;border:1px solid #e6ece4;border-radius:25px;padding:32px;box-shadow:var(--shadow-md);}
body.spa-app .status-badge-live{background:#315e45;border-radius:100px;}
/* Checkout and confirmation */
body.spa-app #checkoutForm,body.spa-app .checkout-summary,body.spa-app #orderSummaryCard{border-radius:23px;}
body.spa-app [data-view="checkout"] .checkout-layout>*,body.spa-app [data-view="success"] .card{background:#fff;border:1px solid #e3ece2;border-radius:23px;}
body.spa-app [data-view="success"]>main{max-width:900px;}
/* Cart overlay, footer, floating links, gate */
body.spa-app .cart-drawer{background:#fff;box-shadow:-18px 0 60px #0c3c2a23;z-index:1200;}
body.spa-app .cart-overlay{z-index:1190;}
body.spa-app .cart-drawer .cart-head{background:#f3f8f1;}
body.spa-app .cart-drawer .cart-head h2{color:#1d4b3c;font-size:20px;}
body.spa-app .cart-drawer .cart-foot{background:#f1f5ee!important;}
body.spa-app .floating-chat-container{z-index:250;}
body.spa-app .gate-overlay{z-index:2000;}
body.spa-app .gate-modal{background:#fffdf9;border-radius:24px;box-shadow:0 30px 75px rgba(13,40,32,.23);}
body.spa-app .gate-badge-top{background:#e8f3e8;color:#1c7157;}
body.spa-app .gate-icon-circle{background:#ecf5e9;color:#16765d;}
body.spa-app .gate-header h3{color:#1f4c3e;}
body.spa-app .site-footer.spa-footer{background:#112f27!important;border:0;color:#b7cdc2;margin-top:45px;padding:65px 0 0;position:relative;}
.spa-footer-grid{display:grid;grid-template-columns:1.75fr 1fr 1fr 1fr;gap:45px;}
.spa-footer .footer-brand .spa-brand-mark{background:#32574b;color:#f6b78f;}
.spa-footer .footer-brand .spa-brand-text{color:#f5fbf6;}
.spa-footer .footer-brand .spa-brand-text>span{color:#9cdfb3;}
.spa-footer .footer-brand .spa-brand-text small{color:#b4c8bd;}
.spa-footer-intro p{max-width:300px;font-size:13.5px;color:#c0d4c9;margin:24px 0;}
.spa-footer .footer-support{font-size:13px;color:#c3d9cd;}
.spa-footer .footer-support a{color:#fff;text-decoration:underline;text-decoration-color:#729d85;text-underline-offset:3px;}
.spa-footer-grid h3{font-family:var(--font-body)!important;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#f6f7e9!important;margin:9px 0 22px;}
.spa-footer-grid>div:not(:first-child)>a,.spa-footer-grid>div:not(:first-child)>span{font-size:13px;color:#b8ccc0;display:block;margin:0 0 13px;transition:color .2s;}
.spa-footer-grid>div:not(:first-child)>a:hover{color:#fff;}
.spa-footer-bottom{margin-top:45px;border-top:1px solid #315349;padding-top:24px;padding-bottom:25px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#a4bcb0;}
.spa-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:#173f32;color:white;border-radius:14px;padding:13px 24px;box-shadow:0 15px 42px #04291f40;z-index:1750;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;font-weight:700;max-width:calc(100vw - 30px);text-align:center;}
.spa-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Responsive layouts */
@media (max-width:1100px){
 body.spa-app .spa-header .navbar{gap:12px;}
 .spa-brand{min-width:190px;}
 .spa-brand-text{font-size:19px;}
 body.spa-app .spa-header .nav-links a{padding:9px 8px;font-size:12px;}
 .nav-contact{display:none;}
 body.spa-app [data-view="home"] .hero{gap:32px;padding-left:35px!important;padding-right:35px!important;}
 body.spa-app [data-view="home"] .hero h1{font-size:clamp(38px,4.5vw,51px);}
 .spa-footer-grid{gap:25px;}
}
@media (max-width:860px){
 body.spa-app .container{padding-left:20px;padding-right:20px;}
 body.spa-app .spa-header .navbar{padding:10px 20px;min-height:70px;}
 body.spa-app .spa-header .nav-toggle{display:flex;}
 body.spa-app .spa-header .nav-links{position:absolute;top:100%;left:0;right:0;padding:14px 18px 20px;background:#fff;box-shadow:0 16px 25px #143a3026;border-bottom:1px solid #e2ebe2;display:none;flex-direction:column;align-items:stretch;gap:1px;max-height:70vh;overflow-y:auto;}
 body.spa-app .spa-header .nav-links.open{display:flex;}
 body.spa-app .spa-header .nav-links a{padding:14px 18px;font-size:14px;}
 body.spa-app [data-view="home"] .hero{grid-template-columns:1fr;padding:50px 28px 55px!important;gap:45px;}
 body.spa-app [data-view="home"] .hero .hero-visual{max-width:650px;margin:0 auto;width:100%;transform:none;}
 body.spa-app [data-view="home"] .hero .hero-visual>img{transform:none;height:315px;}
 body.spa-app .product-detail{gap:25px;}
 body.spa-app .product-detail-visual{min-height:380px;padding:24px;}
 .spa-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;}
}
@media (max-width:620px){
 .announcement-inner{min-height:31px;justify-content:center;}
 .announcement-right{display:none;}
 body.spa-app .spa-header .navbar{padding:9px 16px;}
 .spa-brand{min-width:0;gap:8px;}
 .spa-brand-mark{width:36px;height:36px;border-radius:10px;}
 .spa-brand-text{font-size:17px;}
 .spa-brand-text small{font-size:6px;letter-spacing:.21em;margin-top:5px;}
 body.spa-app .spa-header .nav-actions{gap:7px;}
 body.spa-app .spa-header .nav-search{display:none;}
 body.spa-app .spa-header .cart-btn{width:37px;height:37px;}
 body.spa-app .spa-header .nav-toggle{width:34px;}
 body.spa-app .container{padding-left:18px;padding-right:18px;}
 body.spa-app .section{padding-top:42px;padding-bottom:39px;}
 body.spa-app [data-view="home"] .hero{margin-top:0;border-radius:0 0 25px 25px;padding:47px 21px 40px!important;}
 body.spa-app [data-view="home"] .hero h1{font-size:clamp(34px,10vw,44px);}
 body.spa-app [data-view="home"] .hero .lead{font-size:14.5px;}
 body.spa-app [data-view="home"] .hero .hero-trust{grid-template-columns:1fr 1fr;gap:8px;}
 body.spa-app [data-view="home"] .hero-trust>div{padding:11px;}
 body.spa-app [data-view="home"] .hero-trust b{font-size:11px;}
 body.spa-app [data-view="home"] .hero-trust span{font-size:10px;}
 body.spa-app [data-view="home"] .hero .hero-visual{padding:11px;border-radius:19px;}
 body.spa-app [data-view="home"] .hero .hero-visual>img{height:230px;border-radius:13px;}
 body.spa-app [data-view="home"] .hero .sticker{font-size:10px;padding:7px 9px;border-radius:7px;}
 body.spa-app [data-view="home"] .hero .sticker.s1{left:-9px;top:0;}
 body.spa-app [data-view="home"] .hero .sticker.s2{right:-8px;bottom:0;}
 body.spa-app .section-head h2{font-size:28px;}
 body.spa-app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 body.spa-app .card-category{padding:16px;min-height:0;}
 body.spa-app .card-category h3{font-size:15px!important;}
 body.spa-app .card-category p{font-size:12px!important;}
 body.spa-app .icon-box{width:46px;height:46px;font-size:21px;margin-bottom:12px;}
 body.spa-app .home-medication-card{padding:10px;}
 body.spa-app .medication-img-wrap{height:130px;}
 body.spa-app .medication-img-wrap img{max-height:120px;}
 body.spa-app .home-medication-card h3{font-size:14px;}
 body.spa-app .home-medication-price{font-size:17px;}
 body.spa-app .spa-view:not([data-view="home"])>main{padding-top:32px;padding-bottom:45px;}
 body.spa-app .spa-view:not([data-view="home"])>main>h1{font-size:32px;}
 body.spa-app .shop-layout{display:block;}
 body.spa-app .filter-box{position:static;margin-bottom:22px;padding:20px;}
 body.spa-app .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 body.spa-app .product-card .product-thumb{height:140px;margin:7px 7px 0;}
 body.spa-app .product-card .product-thumb img{max-height:130px;}
 body.spa-app .product-card .product-body{padding:12px;}
 body.spa-app .product-card h3{font-size:14px;line-height:1.3;}
 body.spa-app .product-card .product-ingredient{font-size:11px;}
 body.spa-app .product-card .price{font-size:15px;}
 body.spa-app .product-card .product-rating{font-size:11px;}
 body.spa-app .product-footer .btn{display:none;}
 body.spa-app .product-detail{display:block;}
 body.spa-app .product-detail-visual{min-height:290px;margin-bottom:25px;}
 body.spa-app .product-detail-visual img{max-height:260px!important;}
 body.spa-app .pill-selection{padding:14px;}
 body.spa-app .pill-options{grid-template-columns:repeat(2,1fr);}
 body.spa-app .contact-hero-banner{padding:25px;border-radius:20px;}
 body.spa-app .contact-grid-wrapper{display:block;}
 body.spa-app .pharmacy-info-card{padding:25px;margin-bottom:18px;}
 body.spa-app .modern-contact-form-card{padding:20px;}
 body.spa-app .modern-form-row{display:block;}
 body.spa-app .blog-post-hero{padding:23px 18px;}
 .spa-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;}
 .spa-footer-intro{grid-column:1/-1;}
 .spa-footer-bottom{flex-direction:column;}
}
/* Remove the old multi-page lazy section placeholders: all views are already
   hidden by the SPA router and should never reserve phantom 800px blocks. */
body.spa-app .section, body.spa-app .section-tight {content-visibility:visible!important;contain-intrinsic-size:auto!important;}

/* === About page alignment and fluid responsive layout (2026-10-20) ===
   Its <main> contains .container sections but is not itself a .container.
   The former max-width without auto margins left the entire page stuck to
   the left edge on wide screens. Keep all sections in a centered column. */
body.spa-app [data-view="about"] > main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1230px;
  min-width: 0;
  margin-inline: auto;
  padding-top: 0;
}
body.spa-app [data-view="about"] > main > section.container {
  width: 100%;
  max-width: 1230px;
  margin-inline: auto;
  min-width: 0;
}
body.spa-app [data-view="about"] .grid-3,
body.spa-app [data-view="about"] .grid-4 {
  min-width: 0;
}
body.spa-app [data-view="about"] .grid-3 > *,
body.spa-app [data-view="about"] .grid-4 > * {
  min-width: 0;
}
@media (max-width: 860px) {
  body.spa-app [data-view="about"] > main > section.container {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.spa-app [data-view="about"] .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  body.spa-app [data-view="about"] > main {
    padding-top: 0;
    padding-bottom: 30px;
  }
  body.spa-app [data-view="about"] > main > section.container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.spa-app [data-view="about"] > main > section.container:first-child {
    padding-top: 30px !important;
  }
  body.spa-app [data-view="about"] h1 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }
  body.spa-app [data-view="about"] h2 {
    font-size: clamp(21px, 6vw, 27px) !important;
    line-height: 1.28;
  }
  body.spa-app [data-view="about"] .grid-3,
  body.spa-app [data-view="about"] .grid-4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.spa-app [data-view="about"] .grid-3 > [style*="grid-column"] {
    grid-column: auto !important;
  }
  body.spa-app [data-view="about"] .card {
    padding: 19px;
  }
  body.spa-app [data-view="about"] section.container > div[style*="padding:32px"],
  body.spa-app [data-view="about"] section.container > div[style*="padding:36px"],
  body.spa-app [data-view="about"] section.container > div[style*="padding:44px"] {
    padding: 22px !important;
  }
  body.spa-app [data-view="about"] .btn {
    white-space: normal;
    text-align: center;
  }
}

/* Brand consistency: footer uses the exact same vector mark as the header. */
.spa-footer .footer-brand .spa-brand-mark {background:#173c31;color:#f5c5a1;}
.spa-footer .footer-brand .spa-brand-mark svg {width:28px;height:28px;}

.blog-post-content figure {max-width:100%;margin:30px 0;text-align:center;}
.blog-post-content figure img {max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;}
.blog-post-content figcaption {font-size:13px;color:#557367;margin-top:9px;line-height:1.5;}
.blog-post-content a {overflow-wrap:anywhere;}