/* ============================================================
   Nanooil – custom layer over the Olivine template
   Brand: #816031 (bronze) · #fea444 (amber) · Poppins
   Themes: light (default) + dark · rounded + OSX shadows
   ============================================================ */
:root {
  /* Brand palette derived from the NANOOil 20.MSK logo: blue primary + red accent */
  --nano-blue: #1560b0;
  --nano-blue-dark: #0e498a;
  --nano-red: #e42d1f;
  --nano-red-soft: #ffc2bc;
  /* Backward-compatible aliases (whole codebase references bronze/amber) */
  --nano-bronze: var(--nano-blue);
  --nano-bronze-dark: var(--nano-blue-dark);
  --nano-amber: var(--nano-red);
  --nano-amber-soft: var(--nano-red-soft);
  --nano-ink: #0f2033;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 50px;
  --shadow-osx: 0 18px 40px -12px rgba(15, 32, 51, .3), 0 6px 14px -6px rgba(15, 32, 51, .22);
  --shadow-osx-lg: 0 30px 60px -18px rgba(15, 32, 51, .4), 0 10px 22px -10px rgba(15, 32, 51, .28);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Theme tokens ---- */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f4f8fc;
  --bg-soft: #e9f1fa;
  --text: #1b2733;
  --text-soft: #5a6b7b;
  --card: #ffffff;
  --border: #e0e8f1;
  --header-bg: #ffffff;
  --header-top: #0f2033;
}
:root[data-theme="dark"] {
  --bg: #0d1420;
  --bg-alt: #121b29;
  --bg-soft: #17233480;
  --text: #eaf1f9;
  --text-soft: #9fb0c2;
  --card: #131d2b;
  --border: #263445;
  --header-bg: #0f1826;
  --header-top: #0a1220;
  --shadow-osx: 0 18px 40px -12px rgba(0,0,0,.6), 0 6px 14px -6px rgba(0,0,0,.5);
  --shadow-osx-lg: 0 30px 60px -18px rgba(0,0,0,.7), 0 10px 22px -10px rgba(0,0,0,.55);
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background .3s var(--ease), color .3s var(--ease);
}
a { color: var(--nano-bronze); }
a:hover { color: var(--nano-amber); }
h1,h2,h3,h4,h5,h6 { color: var(--text); }
.section-pad { padding: 90px 0; }
img { max-width: 100%; height: auto; }

/* ---- Rounded + OSX shadow helpers ---- */
.rounded-shadow, .osx-shadow {
  border-radius: var(--radius);
  box-shadow: var(--shadow-osx);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rounded-shadow:hover, .osx-shadow:hover { transform: translateY(-6px); box-shadow: var(--shadow-osx-lg); }
.rounded-shadow img { display:block; width:100%; transition: transform .8s var(--ease); }
.rounded-shadow:hover img { transform: scale(1.06); }

/* ---- Buttons ---- */
.btn-nano {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1c76d6, var(--nano-blue-dark));
  color: #fff !important; font-weight: 600; border: 0;
  padding: 13px 30px; border-radius: var(--radius-pill); cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(21,96,176,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  text-decoration: none; line-height: 1.1;
}
.btn-nano:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(21,96,176,.6); filter: brightness(1.05); color:#fff; }
.btn-nano:active { transform: translateY(0); }
.btn-lg-nano { padding: 16px 38px; font-size: 1.05rem; }
.btn-outline-nano {
  background: transparent; color: var(--nano-bronze) !important;
  border: 2px solid var(--nano-bronze); box-shadow: none;
}
.btn-outline-nano:hover { background: var(--nano-bronze); color:#fff !important; }
.btn-link-nano { color: var(--nano-bronze); font-weight:600; text-decoration:none; }
.btn-link-nano:hover { color: var(--nano-amber); letter-spacing:.3px; }

/* ---- Section heads ---- */
.section-head { margin-bottom: 50px; }
.section-eyebrow {
  display:inline-block; color: var(--nano-amber); font-weight:600; letter-spacing:2px;
  text-transform: uppercase; font-size:.78rem; margin-bottom:8px;
}
.section-title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight:800; }
.section-head.light .section-title, .section-head.light .section-eyebrow ~ *, .light .section-title { color:#fff; }
.section-head.light .section-eyebrow { color: var(--nano-amber-soft); }

/* ---- Header ---- */
.header-top { background: var(--header-top); color:#e6edf5; padding:9px 0; font-size:.86rem; }
.header-top a { color:#e6edf5; font-weight:500; }
.header-top a:hover { color: var(--nano-amber); }
.header-top-nav ul { display:flex; gap:20px; justify-content:flex-end; align-items:center; margin:0; padding:0; list-style:none; flex-wrap:wrap; }
.header-info i { color: var(--nano-amber); }
.switcher a.active { color: var(--nano-amber); font-weight:700; }
.lang-switch .sep { opacity:.4; margin:0 2px; }
.cart-count { background: var(--nano-amber); color:#fff; border-radius:50px; padding:0 7px; font-size:.72rem; font-weight:700; margin-left:2px; }
.header-area { background: var(--header-bg); padding:14px 0; box-shadow: 0 2px 20px rgba(15,32,51,.06); transition: background .3s; }
.header-area.sticky { position:fixed; top:0; left:0; width:100%; z-index:999; animation: slideDown .5s var(--ease); box-shadow: var(--shadow-osx); }
@keyframes slideDown { from{ transform: translateY(-100%);} to{ transform:none;} }
.site-logo img { height: 68px; width:auto; max-width:100%; color: var(--text); }
.header-align { display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.header-navigation-area .main-menu { margin:0; padding:0; gap:4px; }
.main-menu > li { position:relative; }
.main-menu > li > a { color: var(--text); font-weight:600; padding:10px 14px; display:block; border-radius: var(--radius-sm); transition: color .3s, background .3s; }
.main-menu > li:hover > a, .main-menu > li.active > a { color: var(--nano-bronze); }
.main-menu .submenu-nav {
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px; background: var(--card);
  border:1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-osx);
  padding:10px; opacity:0; visibility:hidden; transform: translateY(10px); transition:.3s var(--ease); list-style:none; z-index:99;
}
.main-menu li:hover > .submenu-nav { opacity:1; visibility:visible; transform:none; }
.submenu-nav li a { padding:9px 14px; display:block; border-radius:8px; color: var(--text-soft); font-size:.92rem; }
.submenu-nav li a:hover { background: var(--bg-soft); color: var(--nano-bronze); }
.header-action-area { display:flex; align-items:center; gap:16px; }
.header-action-cart .cart-icon { font-size:1.35rem; color: var(--text); position:relative; }
.btn-menu span { background: var(--text); }

/* ---- Hero ---- */
.hero-nano { position:relative; padding:120px 0 110px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); animation: heroZoom 18s ease-in-out infinite alternate; }
@keyframes heroZoom { to { transform: scale(1.15); } }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(105deg, rgba(10,20,33,.92) 30%, rgba(10,20,33,.55) 70%, rgba(10,20,33,.25)); }
:root[data-theme="light"] .hero-overlay { background: linear-gradient(105deg, rgba(10,20,33,.9) 25%, rgba(10,20,33,.5) 65%, rgba(10,20,33,.15)); }
.hero-nano .container { position:relative; z-index:2; }
.hero-eyebrow { display:inline-flex; gap:8px; align-items:center; color: var(--nano-amber); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; font-size:.8rem; background: rgba(228,45,31,.12); padding:7px 16px; border-radius:50px; }
.hero-title { color:#fff; font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight:900; line-height:1.05; margin:18px 0 10px; }
.hero-sub { color: var(--nano-amber-soft); font-family:'Pacifico',cursive; font-size:1.2rem; margin-bottom:14px; }
.hero-lead { color:#d6e0ec; font-size:1.08rem; max-width:560px; margin-bottom:28px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.hero-badges { display:flex; gap:22px; flex-wrap:wrap; color:#d6e0ec; font-size:.9rem; }
.hero-badges i { color: var(--nano-amber); }
.hero-visual { position:relative; text-align:center; }
.hero-product { border-radius: var(--radius); max-width:360px; }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
.hero-flag { position:absolute; top:14px; right:14px; background: var(--nano-amber); color:#fff; font-weight:700; padding:8px 16px; border-radius:50px; box-shadow: var(--shadow-osx); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(228,45,31,.5);} 50%{ box-shadow:0 0 0 14px rgba(228,45,31,0);} }

/* ---- USP bar ---- */
.usp-bar { background: var(--bg-alt); padding:34px 0; border-bottom:1px solid var(--border); }
.usp-item { display:flex; gap:14px; align-items:flex-start; padding:10px; }
.usp-item i { font-size:2rem; color: var(--nano-bronze); background: var(--bg-soft); width:60px; height:60px; display:grid; place-items:center; border-radius:16px; flex:none; }
.usp-item h4 { font-size:1.02rem; margin-bottom:3px; }
.usp-item p { font-size:.85rem; color: var(--text-soft); margin:0; }

/* ---- Advantages ---- */
.advantages-area { background: var(--bg); }
.advantage-card { background: var(--card); border:1px solid var(--border); padding:34px 28px; margin-bottom:26px; height: calc(100% - 26px); }
.adv-icon i { font-size:2.4rem; color: var(--nano-amber); background: linear-gradient(135deg, rgba(228,45,31,.15), rgba(21,96,176,.12)); width:74px; height:74px; display:grid; place-items:center; border-radius:20px; margin-bottom:18px; transition: transform .5s var(--ease); }
.advantage-card:hover .adv-icon i { transform: rotate(-8deg) scale(1.08); }
.advantage-card h4 { font-size:1.15rem; }
.advantage-card p { color: var(--text-soft); margin:0; }

/* ---- How it works ---- */
.how-area { background-size:cover; background-position:center; background-attachment:fixed; }
.how-step { text-align:center; padding:26px 16px; color:#f3ece0; }
.how-num { display:inline-grid; place-items:center; width:74px; height:74px; border-radius:50%; border:2px dashed var(--nano-amber); color: var(--nano-amber); font-size:1.5rem; font-weight:800; margin-bottom:16px; transition: transform .5s var(--ease); }
.how-step:hover .how-num { transform: rotate(360deg); background: var(--nano-amber); color:#fff; }
.how-step h4 { color:#fff; }
.how-step p { color:#a9bccf; font-size:.92rem; }

/* ---- Products ---- */
.products-area { background: var(--bg-alt); }
.product-item { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; margin-bottom:26px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.product-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-osx-lg); }
.product-thumb { position:relative; overflow:hidden; }
.product-thumb img { width:100%; aspect-ratio: 4/3; object-fit:cover; transition: transform .8s var(--ease); }
.product-item:hover .product-thumb img { transform: scale(1.08); }
.ribbons { position:absolute; top:14px; left:14px; }
.ribbon { background: var(--nano-amber); color:#fff; padding:5px 14px; border-radius:50px; font-size:.78rem; font-weight:700; }
.product-action { position:absolute; top:14px; right:14px; display:flex; flex-direction:column; gap:8px; opacity:0; transform: translateX(14px); transition:.4s var(--ease); }
.product-item:hover .product-action { opacity:1; transform:none; }
.product-action a { width:42px; height:42px; border-radius:50%; background: var(--card); color: var(--text); display:grid; place-items:center; box-shadow: var(--shadow-osx); }
.product-action a:hover { background: var(--nano-bronze); color:#fff; }
.product-info { padding:22px; }
.product-rating i { color:#d8cdbb; font-size:.85rem; }
.product-rating i.on { color: var(--nano-amber); }
.product-rating span { color: var(--text-soft); font-size:.8rem; margin-left:4px; }
.product-info .title a { color: var(--text); font-size:1.12rem; }
.product-info .title a:hover { color: var(--nano-bronze); }
.product-short { color: var(--text-soft); font-size:.88rem; margin:6px 0 12px; }
.prices { margin-bottom:14px; display:inline-flex; align-items:baseline; gap:8px; }
.price { color: var(--nano-bronze); font-weight:800; font-size:1.3rem; }
/* regular price now sits to the LEFT of the current price (reference-price anchoring) */
.price-old { color: var(--text-soft); text-decoration:line-through; font-size:1rem; order:-1; }

/* ---- Results counters ---- */
.results-area { background-size:cover; background-position:center; }
.result-counter { text-align:center; color:#fff; padding:18px 8px; }
.result-value { display:block; font-size: clamp(1.8rem,4vw,2.8rem); font-weight:900; color: var(--nano-amber-soft); }
.result-label { color:#e4edf6; font-size:.85rem; }

/* ---- Calculators ---- */
.calc-area { background: var(--bg); }
.calc-card { background: var(--card); border:1px solid var(--border); padding:32px; }
.calc-card label { font-size:.82rem; color: var(--text-soft); font-weight:600; display:block; margin-bottom:6px; }
.calc-card input, .calc-card select {
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--text); font-weight:600;
}
.calc-card input:focus, .calc-card select:focus { outline:none; border-color: var(--nano-amber); box-shadow:0 0 0 3px rgba(228,45,31,.18); }
.calc-result { display:flex; gap:20px; margin:24px 0; }
.calc-result > div { flex:1; background: var(--bg-soft); border-radius: var(--radius-sm); padding:18px; text-align:center; }
.calc-big { display:block; font-size:2rem; font-weight:900; color: var(--nano-bronze); }
.calc-result small { color: var(--text-soft); }

/* ---- Testimonials ---- */
.testimonial-area { background: var(--bg-alt); }
.testimonial-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:30px; margin-bottom:26px; height:calc(100% - 26px); display:flex; flex-direction:column; }
.t-stars i { color: var(--nano-amber); }
.t-text { color: var(--text); font-style:italic; margin:14px 0 20px; }
.t-author { display:flex; align-items:center; gap:14px; margin-top:auto; }
.t-avatar { width:56px; height:56px; border-radius:50%; background: linear-gradient(135deg,var(--nano-red),var(--nano-blue)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.2rem; overflow:hidden; flex:none; box-shadow:0 4px 12px -4px rgba(15,32,51,.4); }
.t-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.t-author small { display:block; color: var(--text-soft); font-size:.8rem; }

/* ---- Blog ---- */
.blog-area { background: var(--bg); }
.blog-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; margin-bottom:26px; height:calc(100% - 26px); }
.blog-thumb { display:block; position:relative; overflow:hidden; }
.blog-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; transition: transform .8s var(--ease); }
.blog-card:hover .blog-thumb img { transform: scale(1.07); }
.blog-cat { position:absolute; bottom:14px; left:14px; background: var(--nano-amber); color:#fff; padding:5px 14px; border-radius:50px; font-size:.75rem; font-weight:700; }
.blog-body { padding:24px; }
.blog-body time { color: var(--nano-bronze); font-size:.8rem; font-weight:600; }
.blog-body h4 { margin:8px 0 10px; font-size:1.18rem; }
.blog-body h4 a { color: var(--text); }
.blog-body h4 a:hover { color: var(--nano-bronze); }
.blog-body p { color: var(--text-soft); font-size:.9rem; }

/* ---- FAQ accordion ---- */
.faq-area { background: var(--bg-alt); }
.nano-accordion .accordion-item { background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm) !important; margin-bottom:14px; overflow:hidden; }
.nano-accordion .accordion-button { background: var(--card); color: var(--text); font-weight:600; box-shadow:none; }
.nano-accordion .accordion-button:not(.collapsed) { background: var(--bg-soft); color: var(--nano-bronze); }
.nano-accordion .accordion-button:focus { box-shadow:none; }
.nano-accordion .accordion-body { color: var(--text-soft); }

/* ---- CTA band + newsletter ---- */
.cta-band { padding:90px 0; background-size:cover; background-position:center; color:#fff; }
.cta-band h2 { color:#fff; font-size: clamp(1.8rem,4vw,2.8rem); }
.cta-band p { color:#d6e0ec; max-width:640px; margin:14px auto 26px; }
.newsletter-band { background: linear-gradient(135deg,var(--nano-blue),var(--nano-blue-dark)); padding:50px 0; color:#fff; }
.newsletter-band h3 { color:#fff; }
.newsletter-band p { color: var(--nano-amber-soft); margin:0; }
.nl-input { display:flex; gap:10px; background:#fff; border-radius:50px; padding:6px; max-width:480px; margin-left:auto; }
.newsletter-band .nl-input { margin-left:auto; }
.nl-input input { border:0; flex:1; padding:10px 18px; border-radius:50px; color:#fff; }
.nl-input input:focus { outline:none; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.form-feedback { margin-top:10px; font-size:.9rem; min-height:20px; }
.form-feedback.ok { color:#c8f0c8; }
.form-feedback.err { color:#ffd2d2; }

/* ---- Page title ---- */
.page-title-area { background-size:cover; background-position:center; padding:100px 0 80px; text-align:center; color:#fff; }
.page-title-content h1 { color:#fff; font-size: clamp(1.9rem,4vw,3rem); }
.page-title-content p { color:#d6e0ec; max-width:640px; margin:12px auto 0; }
.breadcrumb-nav { display:flex; gap:10px; justify-content:center; list-style:none; padding:0; margin:16px 0 0; color:#a9bccf; }
.breadcrumb-nav li::after { content:'/'; margin-left:10px; opacity:.5; }
.breadcrumb-nav li:last-child::after { content:''; }
.breadcrumb-nav a { color: var(--nano-amber-soft); }

/* ---- Sidebar cart drawer ---- */
.sidebar-cart-modal { position:fixed; inset:0; z-index:1050; visibility:hidden; }
.sidebar-cart-modal.sidebar-cart-active { visibility:visible; }
.cart-overlay { position:absolute; inset:0; background:rgba(10,20,33,.5); opacity:0; transition:.4s; }
.sidebar-cart-active .cart-overlay { opacity:1; }
.sidebar-cart-content { position:absolute; top:0; right:0; width:min(400px,90vw); height:100%; background: var(--card); box-shadow: var(--shadow-osx-lg); transform: translateX(100%); transition:.45s var(--ease); display:flex; flex-direction:column; }
.sidebar-cart-active .sidebar-cart-content { transform:none; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:22px; border-bottom:1px solid var(--border); }
.cart-header h4 { margin:0; color: var(--text); }
.cart-close { background:none; border:0; font-size:1.3rem; color: var(--text); }
.cart-body { flex:1; overflow-y:auto; padding:22px; }
.cart-empty { color: var(--text-soft); text-align:center; margin-top:40px; }
.cart-line { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.cart-line img { width:60px; height:60px; object-fit:cover; border-radius:12px; }
.cart-line .cl-info { flex:1; }
.cart-line .cl-info strong { display:block; font-size:.92rem; color: var(--text); }
.cart-line .cl-info span { color: var(--text-soft); font-size:.82rem; }
.cart-line .cl-remove { color:#c0392b; background:none; border:0; cursor:pointer; }
.cart-footer { padding:22px; border-top:1px solid var(--border); display:grid; gap:10px; }
.cart-total-row { display:flex; justify-content:space-between; font-weight:700; color: var(--text); margin-bottom:4px; }

/* ---- Footer ---- */
.footer-wrapper { background: var(--header-top); color:#a9bccf; padding:70px 0 26px; }
.footer-logo img { height:44px; margin-bottom:18px; background:#fff; padding:8px 12px; border-radius:12px; }
.footer-about { color:#9fb0c2; font-size:.9rem; }
.footer-widget h4 { color:#fff; margin-bottom:20px; font-size:1.05rem; }
.footer-links, .footer-contact { list-style:none; padding:0; margin:0; }
.footer-links li, .footer-contact li { margin-bottom:10px; font-size:.9rem; }
.footer-links a, .footer-contact a { color:#a9bccf; }
.footer-links a:hover, .footer-contact a:hover { color: var(--nano-amber); }
.footer-contact i { color: var(--nano-amber); margin-right:8px; }
.footer-pay { display:flex; gap:8px; margin-top:14px; }
.footer-pay img { height:26px; background:#fff; border-radius:6px; padding:3px 6px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.82rem; color:#8193a5; }

/* ---- Toast ---- */
.nano-toast { position:fixed; bottom:26px; left:50%; transform: translateX(-50%) translateY(30px); background: var(--nano-ink); color:#fff; padding:14px 24px; border-radius:50px; box-shadow: var(--shadow-osx-lg); opacity:0; transition:.4s var(--ease); z-index:2000; font-weight:600; }
.nano-toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.nano-toast i { color: var(--nano-amber); margin-right:8px; }

/* ---- Contact / maps ---- */
.contact-info-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:26px; margin-bottom:20px; display:flex; gap:16px; align-items:flex-start; }
.contact-info-card i { font-size:1.6rem; color: var(--nano-amber); background: var(--bg-soft); width:56px; height:56px; border-radius:16px; display:grid; place-items:center; flex:none; }
.map-embed { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-osx); border:1px solid var(--border); }
.map-embed iframe { width:100%; height:420px; border:0; display:block; }
.nano-form input, .nano-form textarea, .nano-form select {
  width:100%; padding:13px 16px; border:1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); margin-bottom:16px;
}
.nano-form input:focus, .nano-form textarea:focus { outline:none; border-color: var(--nano-amber); box-shadow:0 0 0 3px rgba(228,45,31,.18); }
.nano-form label { font-weight:600; font-size:.85rem; color: var(--text-soft); margin-bottom:6px; display:block; }

/* ---- Slicknav mobile menu ---- */
.res-mobile-menu { display:none; }
.slicknav_menu { display:none; background: var(--card); }

/* ============================================================
   RESPONSIVE – Mac Air (1440/1280), tablet, mobile
   ============================================================ */
@media (max-width: 1280px) {
  .section-pad { padding: 72px 0; }
  .hero-title { font-size: clamp(2rem,4.5vw,3rem); }
}
@media (max-width: 991px) {
  .header-navigation-area { display:none; }
  .res-mobile-menu { display:block; }
  .slicknav_menu { display:block; }
  .header-align { justify-content:flex-end; }
  .hero-nano { padding:80px 0; text-align:center; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-badges { justify-content:center; }
  .hero-visual { margin-top:40px; }
  .calc-result { flex-direction:row; }
  .footer-bottom { justify-content:center; text-align:center; }
  .header-top .header-info { font-size:.72rem; }
}
@media (max-width: 767px) {
  .section-pad { padding: 56px 0; }
  .section-head { margin-bottom:34px; }
  .how-area { background-attachment: scroll; }
  .newsletter-band .nl-input { margin:16px auto 0; }
  .newsletter-band .col-lg-6:first-child { text-align:center; margin-bottom:10px; }
  .calc-result { flex-direction:column; gap:12px; }
  .hero-badges { gap:12px; font-size:.82rem; }
  .usp-item { padding:6px; }
  .footer-widget { margin-bottom:26px; }
}
@media (max-width: 575px) {
  .hero-title { font-size:1.9rem; }
  .btn-lg-nano { width:100%; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn-nano { width:100%; }
  .result-value { font-size:1.7rem; }
  .header-top-nav ul { gap:10px; }
  .header-top .col-6:first-child { display:none; }
  .header-top .col-6 { width:100%; }
  .map-embed iframe { height:300px; }
}

/* ---- Extra components (order, dosage, lists, blog article) ---- */
.check-list { list-style:none; padding:0; margin:0 0 24px; }
.check-list li { padding:7px 0; color:var(--text-soft); }
.check-list i { color:var(--nano-amber); margin-right:10px; }
.lead-text { font-size:1.05rem; color:var(--text); }
.order-form, .nano-form { background:var(--card); border:1px solid var(--border); padding:34px; }
.order-form .row, .nano-form .row { margin-left:-8px; margin-right:-8px; }
.order-form [class*="col-"], .nano-form [class*="col-"] { padding-left:8px; padding-right:8px; }
.pay-options { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.pay-opt { flex:1; min-width:160px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:10px; margin:0; background:var(--bg-alt); transition:.3s; }
.pay-opt:has(input:checked) { border-color:var(--nano-amber); background:var(--bg-soft); box-shadow:0 0 0 3px rgba(228,45,31,.15); }
.pay-opt i { color:var(--nano-bronze); font-size:1.2rem; }
.captcha-row { margin-bottom:18px; }
.captcha-row input { max-width:160px; }
.order-total-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; margin:8px 0 18px; border-top:1px dashed var(--border); font-size:1.1rem; }
.order-total-row strong { color:var(--nano-bronze); font-size:1.5rem; }
.order-aside { background:var(--card); border:1px solid var(--border); position:sticky; top:100px; }
.order-aside-img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.order-aside-body { padding:24px; }
.order-aside-body p { color:var(--text-soft); }
/* Dosage cards – equal height, internal rows aligned across all cards */
.dosage-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px; text-align:center; margin-bottom:26px; height:calc(100% - 26px); display:flex; flex-direction:column; align-items:center; }
.dosage-icon i { font-size:2.2rem; color:var(--nano-amber); background:var(--bg-soft); width:70px; height:70px; border-radius:20px; display:grid; place-items:center; margin:0 auto 16px; }
.dosage-card h4 { min-height:2.6em; display:flex; align-items:center; justify-content:center; margin:0; }
.dosage-dose { font-size:1.35rem; font-weight:800; color:var(--nano-bronze); margin:10px 0; min-height:2.6em; display:flex; align-items:center; justify-content:center; }
.dosage-card small { color:var(--text-soft); margin-top:auto; }
.how-num.mx-auto { margin-left:auto; margin-right:auto; display:grid; }
.product-buy { display:flex; gap:14px; flex-wrap:wrap; margin:20px 0; }
.product-trust { display:flex; gap:20px; flex-wrap:wrap; color:var(--text-soft); font-size:.86rem; padding-top:16px; border-top:1px solid var(--border); }
.product-trust i { color:var(--nano-amber); margin-right:6px; }
.product-hero-img img { aspect-ratio:4/3; object-fit:cover; }
.blog-article .lead-text { font-weight:500; }
.blog-meta { color:var(--text-soft); font-size:.88rem; margin-bottom:20px; }
.blog-cat-inline { background:var(--bg-soft); color:var(--nano-bronze); padding:3px 12px; border-radius:50px; font-weight:600; }
.blog-cta { background:linear-gradient(135deg,var(--bg-soft),var(--bg-alt)); border:1px solid var(--border); border-radius:var(--radius); padding:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; flex-wrap:wrap; }
.blog-cta h4 { margin-bottom:4px; }
.notfound-code { font-size:clamp(5rem,18vw,11rem); font-weight:900; line-height:1; background:linear-gradient(135deg,var(--nano-red),var(--nano-blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.header-order-btn { padding:10px 22px; }
/* slicknav restyle */
.slicknav_nav a { color:var(--text); }
.slicknav_nav a:hover { background:var(--bg-soft); color:var(--nano-bronze); }
.slicknav_btn { background:var(--nano-bronze); }

/* ---- Home 2 hero (split slider) ---- */
.hero2-area { background: linear-gradient(120deg, var(--bg-soft), var(--bg-alt)); position:relative; overflow:hidden; }
.hero2-area .home-slider-container { overflow:hidden; }
.hero2-item { padding:96px 0; min-height:520px; display:flex; align-items:center; }
.hero2-item .container { width:100%; }
.hero2-content { text-align:left; }
.hero2-content h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight:900; line-height:1.06; margin:16px 0 10px; min-height:2.3em; }
.hero2-content .hero-sub { color: var(--nano-red); font-family:'Pacifico',cursive; font-size:1.15rem; margin-bottom:14px; }
.hero2-lead { color: var(--text-soft); font-size:1.06rem; max-width:540px; margin-bottom:26px; min-height:3.4em; }
.hero2-content .hero-eyebrow { color: var(--nano-blue); background: rgba(21,96,176,.1); }
.hero2-thumb { position:relative; }
.hero2-thumb img { border-radius: var(--radius); width:100%; aspect-ratio: 4/3; object-fit:cover; box-shadow: var(--shadow-osx); animation: floaty 5s ease-in-out infinite; }
.hero2-area .swiper-button-next, .hero2-area .swiper-button-prev { color: var(--nano-blue); }
.hero2-area .swiper-button-next:after, .hero2-area .swiper-button-prev:after { font-size:1.4rem; }

/* ---- Story area ---- */
.story-area { background: var(--bg); }
.story-area p { color: var(--text-soft); }

/* ---- Offer banners (Home 2) ---- */
.offer-band { padding: 30px 0 90px; background: var(--bg-alt); }
.offer-card { display:flex; flex-direction:column; justify-content:flex-end; min-height:240px; padding:34px; border-radius: var(--radius); background-size:cover; background-position:center; color:#fff; box-shadow: var(--shadow-osx); transition: transform .5s var(--ease), box-shadow .5s var(--ease); position:relative; overflow:hidden; }
.offer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-osx-lg); color:#fff; }
.offer-tag { align-self:flex-start; background:#fff; color: var(--nano-blue); font-weight:700; padding:5px 14px; border-radius:50px; font-size:.8rem; margin-bottom:12px; }
.offer-card h3 { color:#fff; font-size:1.5rem; line-height:1.2; margin-bottom:10px; }
.offer-link { font-weight:700; color:#fff; }
.offer-link i { transition: transform .3s var(--ease); }
.offer-card:hover .offer-link i { transform: translateX(6px); }
.results-area .section-eyebrow, .how-area .section-eyebrow { color: var(--nano-red-soft); }

@media (max-width: 767px) {
  .hero2-item { text-align:center; min-height:auto; padding:60px 0; }
  .hero2-content { text-align:center; }
  .hero2-lead { margin-left:auto; margin-right:auto; min-height:auto; }
  .hero2-content .hero-actions { justify-content:center; }
  .hero2-thumb { margin-top:34px; }
}

/* ---- Header top bar readability ---- */
.header-info { color:#e6edf5; font-weight:500; white-space:nowrap; }
.header-top-nav .switcher a { padding:3px 8px; border-radius:50px; }
.header-top-nav .theme-switch a { background:rgba(255,255,255,.08); }
.header-top-nav .theme-switch a:hover { background:rgba(255,255,255,.16); color:#fff; }
.header-top-nav .lang-switch { display:inline-flex; align-items:center; background:rgba(255,255,255,.08); border-radius:50px; padding:2px 4px; }
.header-top-nav .lang-switch a { padding:2px 9px; }
.header-top-nav .lang-switch a.active { background:var(--nano-red); color:#fff; }
.header-top-nav a i { color:var(--nano-red-soft); }
@media (max-width: 991px){ .header-top-nav .contact-mail { display:none; } }
@media (max-width: 767px){
  .header-top .col-6:first-child { display:none; }
  .header-top .col-6 { width:100%; }
  .header-top-nav ul { justify-content:center; gap:14px; }
}

/* ---- Hero diamond (template Home 1 style) ---- */
.hero-diamond { position:relative; padding:50px 10px; min-height:430px; display:flex; flex-direction:column; justify-content:center; }
.hero-diamond > * { max-width:100%; }
.hero-diamond::before { content:''; position:absolute; left:34px; top:50%; width:330px; height:330px; max-width:80%; transform:translateY(-50%) rotate(45deg); border:2px solid var(--nano-blue); opacity:.4; border-radius:8px; z-index:0; }
.hero-diamond > * { position:relative; z-index:1; }
.hero-d-top { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--text); margin:0; line-height:1.05; }
.hero-d-big { font-size:clamp(2.2rem,5.2vw,3.7rem); font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--nano-blue); margin:6px 0 12px; line-height:1; }
.hero-diamond .hero-sub { color:var(--nano-red); font-family:'Pacifico',cursive; font-size:1.15rem; margin-bottom:22px; }
.hero2-thumb .osx-shadow { background:transparent; }

/* ---- Header search (template style) ---- */
.header-search { display:flex; align-items:center; background:var(--bg-soft); border:1px solid var(--border); border-radius:50px; padding:4px 4px 4px 18px; width:280px; max-width:32vw; }
.header-search input { border:0; background:transparent; flex:1; color:var(--text); padding:8px 6px; font-size:.9rem; }
.header-search input:focus { outline:none; }
.header-search button { border:0; background:var(--nano-blue); color:#fff; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex:none; transition:.3s; }
.header-search button:hover { background:var(--nano-blue-dark); }
@media (max-width:1199px){ .header-search { width:230px; } }
@media (max-width:991px){ .header-search { display:none; } }

@media (max-width:767px){
  .hero-diamond { min-height:auto; padding:20px 0; text-align:center; align-items:center; }
  .hero-diamond::before { left:50%; transform:translate(-50%,-50%) rotate(45deg); width:260px; height:260px; }
  .hero-diamond .hero-actions { justify-content:center; }
}

/* ============================================================
   FIXES: top-bar readability (override template), submenu hover, search spacing
   ============================================================ */
/* -- Top bar: force high-contrast light text over the navy bar -- */
.header-top { background: var(--header-top) !important; }
.header-top .header-info { color:#eaf1f9 !important; font-weight:500; font-size:.85rem; }
.header-top .header-info i { color: var(--nano-red-soft); }
.header-top .header-top-nav ul { display:flex !important; gap:18px; justify-content:flex-end; align-items:center; text-align:right; flex-wrap:wrap; }
.header-top .header-top-nav ul li { float:none !important; margin:0 !important; display:flex; align-items:center; }
.header-top .header-top-nav ul li:before { display:none !important; }
.header-top .header-top-nav ul li a { color:#eaf1f9 !important; font-size:.85rem !important; font-weight:500; }
.header-top .header-top-nav ul li a:hover { color: var(--nano-red-soft) !important; }
.header-top .header-top-nav ul li a i { color: var(--nano-red-soft); margin-right:4px; }
.header-top .lang-switch { background:rgba(255,255,255,.1); border-radius:50px; padding:2px 4px; }
.header-top .lang-switch a { padding:2px 10px; border-radius:50px; }
.header-top .lang-switch a.active { color:#fff !important; background:var(--nano-red); font-weight:700; }
.header-top .theme-switch a { background:rgba(255,255,255,.1); padding:4px 12px; border-radius:50px; }
.header-top .theme-switch a:hover { background:rgba(255,255,255,.2); color:#fff !important; }

/* -- Menu: all items centered on one horizontal line -- */
.header-navigation-area .main-menu { display:flex; align-items:center; }
.main-menu > li { display:flex; align-items:center; }
.main-menu > li > a { display:flex; align-items:center; }
/* -- Submenu: absolutely-positioned hover bridge (no layout shift, keeps items aligned) -- */
.main-menu > li.has-submenu::before { content:''; position:absolute; left:0; right:0; top:100%; height:24px; z-index:98; }
.main-menu .submenu-nav { top:100% !important; margin-top:8px; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s !important; }
.main-menu li.has-submenu:hover > .submenu-nav,
.main-menu li.has-submenu > .submenu-nav:hover { opacity:1 !important; visibility:visible !important; transform:none !important; }
.main-menu > li.has-submenu > a::after {
  content:''; display:inline-block; width:7px; height:7px; margin-left:8px;
  border-right:2.5px solid var(--nano-red); border-bottom:2.5px solid var(--nano-red);
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease);
}
.main-menu > li.has-submenu:hover > a::after { transform:translateY(1px) rotate(45deg); }

/* -- Header layout: menu centered, search left of CTA, no overlap -- */
.header-align { justify-content:space-between !important; gap:14px; flex-wrap:nowrap; }
.header-navigation-area { flex:1 1 auto; display:flex; justify-content:center; }
.header-action-area { flex:0 0 auto; gap:14px; }
.header-search { flex:0 0 auto; width:400px; max-width:34vw; order:-1; margin:0; }
@media (max-width:1299px){ .header-search { width:300px; } }

/* ============================================================
   MOBILE MENU (slicknav) – clean, branded, readable
   ============================================================ */
.btn-menu { display:none !important; }              /* dead template off-canvas trigger */
.res-mobile-menu { display:none; position:relative; }
@media (max-width:991px){
  .res-mobile-menu { display:block; }
  .header-navigation-area, .header-search, .header-order-btn { display:none !important; }
  .header-align { justify-content:flex-end; }
}
.slicknav_menu { display:none; padding:0; background:transparent; }
@media (max-width:991px){ .slicknav_menu { display:block; } }
.slicknav_btn {
  background: var(--nano-blue); border-radius:12px; padding:10px 14px; margin:0; float:none;
  box-shadow:0 6px 16px -6px rgba(21,96,176,.5); display:inline-flex; align-items:center; gap:8px;
}
.slicknav_btn .slicknav_icon-bar { background:#fff !important; margin:3px 0; }
.slicknav_menutxt { color:#fff; font-weight:600; }
/* Dropdown as an overlay panel anchored to the header hamburger */
.slicknav_nav {
  position:absolute; right:0; top:calc(100% + 12px); width:min(320px,84vw); z-index:1001;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-osx-lg); margin:0; padding:10px; overflow-y:auto; max-height:78vh;
}
.slicknav_nav, .slicknav_nav ul { list-style:none; }
.slicknav_nav a { color: var(--text) !important; border-radius:8px; padding:11px 14px; font-weight:500; margin:1px 0; }
.slicknav_nav a:hover { background: var(--bg-soft); color: var(--nano-blue) !important; }
.slicknav_nav .slicknav_row:hover { background: var(--bg-soft); border-radius:8px; }
.slicknav_nav a.active, .slicknav_nav .active > a { color: var(--nano-blue) !important; }
.slicknav_nav .slicknav_arrow { color: var(--nano-red); float:right; }
.slicknav_nav ul { margin:0 0 0 12px; padding:0; }
.slicknav_nav .slicknav_item { cursor:pointer; }

/* ============================================================
   RESPONSIVE REFINEMENTS – tablet & mobile (thorough)
   ============================================================ */
html, body { overflow-x:hidden; max-width:100%; }

/* Tablet (<=991) */
@media (max-width:991px){
  .container-fluid { padding-left:20px; padding-right:20px; }
  .order-aside { position:static; top:auto; }
  .header-top .tb-mail { display:none; }
  .header-top-nav ul { gap:14px; }
  .story-area .col-md-5, .story-area .col-md-7 { text-align:center; }
  .hero2-item { min-height:auto; padding:70px 0; }
  .product-buy { justify-content:center; }
  .contact-info-card { padding:20px; }
}

/* Mobile (<=767) */
@media (max-width:767px){
  .section-title { font-size:1.65rem; }
  .hero-diamond { min-height:auto; padding:16px 0 10px; }
  .hero-d-big { font-size:2.1rem; }
  .hero-d-top { font-size:1.4rem; }
  .hero2-thumb img { max-width:340px; margin:0 auto; }
  .page-title-area { padding:70px 0 56px; }
  .nano-form, .order-form { padding:24px 18px; }
  .order-total-row strong { font-size:1.3rem; }
  .product-buy { flex-direction:column; }
  .product-buy .btn-nano { width:100%; }
  .product-trust { justify-content:center; gap:14px; }
  .offer-card { min-height:200px; padding:26px; }
  .offer-card h3 { font-size:1.3rem; }
  .cta-band { padding:60px 0; }
  .calc-card { padding:22px; }
  .dosage-card { padding:24px; }
  .pay-options { flex-direction:column; }
  .footer-pay { justify-content:center; }
  .contact-info-card { flex-direction:row; text-align:left; }
}

/* Small mobile (<=479) */
@media (max-width:479px){
  .header-top .tb-phone { display:none; }
  .header-top-nav ul { gap:10px; justify-content:center; }
  .hero-d-big { font-size:1.8rem; }
  .hero-diamond::before { width:220px; height:220px; }
  .section-pad { padding:48px 0; }
  .result-value { font-size:1.55rem; }
  .btn-lg-nano { padding:14px 26px; font-size:1rem; }
  .logo img, .site-logo img { height:52px; }
  .map-embed iframe { height:260px; }
}

/* ============================================================
   WOW EFFECTS – shine buttons, nano particles, glow cards, counters
   ============================================================ */
/* Shine sweep on primary buttons */
.btn-nano { position:relative; overflow:hidden; z-index:0; }
.btn-nano::after {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; z-index:-1;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn-nano:hover::after { left:130%; }

/* Continuous soft glow pulse on the main hero CTA */
.hero-actions .btn-nano:first-child, .cta-band .btn-nano {
  animation: ctaGlow 2.8s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%,100% { box-shadow:0 10px 22px -8px rgba(21,96,176,.55), 0 0 0 0 rgba(21,96,176,.4); }
  50%     { box-shadow:0 14px 30px -8px rgba(21,96,176,.7), 0 0 0 10px rgba(21,96,176,0); }
}

/* Floating nano particles in hero */
.hero2-area::before, .hero2-area::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 30% 30%, rgba(21,96,176,.35), transparent 70%);
}
.hero2-area::before { width:240px; height:240px; top:-40px; right:8%; animation: floatOrb 9s ease-in-out infinite; }
.hero2-area::after  { width:160px; height:160px; bottom:-30px; left:4%; background:radial-gradient(circle at 30% 30%, rgba(228,45,31,.25), transparent 70%); animation: floatOrb 11s ease-in-out infinite reverse; }
@keyframes floatOrb { 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-26px) scale(1.08);} }
.hero2-area .container { position:relative; z-index:2; }

/* Glow border on cards on hover */
.advantage-card, .product-item, .blog-card, .testimonial-card, .dosage-card, .calc-card {
  position:relative;
}
.advantage-card::after, .dosage-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(21,96,176,0); transition:box-shadow .5s var(--ease);
}
.advantage-card:hover::after, .dosage-card:hover::after { box-shadow:0 0 0 2px rgba(21,96,176,.35); }

/* Count-up numbers pop when revealed */
.result-value, .calc-big { transition:transform .4s var(--ease); }
.result-counter.counted .result-value { animation: popIn .5s var(--ease); }
@keyframes popIn { 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.15);} 100%{ transform:scale(1); opacity:1;} }

/* Icon spin/scale on advantage hover already; add gentle float to hero flag done */
/* Underline grow on nav links */
.main-menu > li > a { position:relative; }
.main-menu > li > a::before {
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--nano-red);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); border-radius:2px;
}
.main-menu > li:hover > a::before, .main-menu > li.active > a::before { transform:scaleX(1); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---- WOW: dense nano-particle field (JS-generated) ---- */
.nano-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.nano-particle {
  position:absolute; border-radius:50%; background:currentColor;
  box-shadow:0 0 18px currentColor, 0 0 6px currentColor; opacity:.75;
  animation-name:nanoDrift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; will-change:transform,opacity;
}
@keyframes nanoDrift {
  0%   { transform:translate(0,0) scale(.85); opacity:.35; }
  50%  { transform:translate(var(--dx,10px), var(--dy,-40px)) scale(1.4); opacity:1; }
  100% { transform:translate(0,0) scale(.85); opacity:.35; }
}
@media (prefers-reduced-motion: reduce){ .nano-particles { display:none; } }

/* ============================================================
   RESPONSIVE – final polish pass
   ============================================================ */
/* Comfortable tap targets on touch devices */
@media (hover:none){
  .btn-nano, .header-top-nav a, .main-menu a, .footer-links a { min-height:44px; }
  .header-search button { width:44px; height:44px; }
}

/* Tablet portrait/landscape (768–991) */
@media (min-width:768px) and (max-width:991px){
  .hero2-thumb img { max-width:420px; }
  .advantage-card, .dosage-card { padding:26px 22px; }
  .usp-item i { width:52px; height:52px; font-size:1.6rem; }
  .section-title { font-size:1.9rem; }
  .offer-card { min-height:220px; }
  .contact-info-card i { width:50px; height:50px; }
}

/* Newsletter: keep input + button usable down to small phones */
@media (max-width:575px){
  .newsletter-band .nl-input { flex-wrap:wrap; padding:8px; background:transparent; gap:8px; }
  .newsletter-band .nl-input input { background:#fff; border-radius:50px; width:100%; }
  .newsletter-band .nl-input .btn-nano { width:100%; }
}

/* Hero on mobile: tighten & center product */
@media (max-width:767px){
  .hero2-item { padding:52px 0 40px; }
  .hero2-thumb { margin-top:26px; }
  .hero-sub { font-size:1.05rem; }
  .hero-actions { gap:12px; }
  .section-head { margin-bottom:30px; }
  .how-step { padding:18px 12px; }
  .result-counter { padding:14px 6px; }
  .newsletter-band h3 { font-size:1.35rem; }
}

/* Very small phones (<=360) */
@media (max-width:360px){
  .container, .container-fluid { padding-left:14px; padding-right:14px; }
  .hero-d-big { font-size:1.65rem; }
  .hero-diamond::before { width:190px; height:190px; }
  .btn-lg-nano { padding:13px 22px; font-size:.95rem; }
  .slicknav_nav { width:88vw; }
}

/* Prevent any wide element (iframes, pre, tables) from breaking layout */
iframe, img, video, table, pre { max-width:100%; }
.map-embed, .table-responsive { overflow-x:auto; }

/* Keep counter values on a single line (e.g. "50 000") */
.result-value { white-space:nowrap; }
.result-counter { padding-left:2px; padding-right:2px; }
@media (max-width:575px){ .result-value { font-size:1.5rem; } }

/* Visually-hidden (screen-reader only) – for a single semantic H1 */
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Product variant (pack size) picker ---- */
.variant-picker { margin:0 0 20px; }
.variant-label { font-weight:600; font-size:.85rem; color:var(--text-soft); margin-bottom:10px; display:block; }
.variant-options { display:flex; gap:12px; flex-wrap:wrap; }
.variant-opt { margin:0; cursor:pointer; }
.variant-opt input { position:absolute; opacity:0; pointer-events:none; }
.variant-box { display:flex; flex-direction:column; gap:2px; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; min-width:120px; background:var(--card); transition:.25s var(--ease); }
.variant-box strong { font-size:1.05rem; color:var(--text); }
.variant-box em { font-style:normal; font-weight:800; color:var(--nano-blue); }
.variant-box small { color:var(--text-soft); font-size:.75rem; }
.variant-opt input:checked + .variant-box { border-color:var(--nano-blue); background:var(--bg-soft); box-shadow:0 0 0 3px rgba(21,96,176,.15); }
.variant-opt:hover .variant-box { border-color:var(--nano-blue); }
@media (max-width:479px){ .variant-box { min-width:100%; flex-direction:row; align-items:center; justify-content:space-between; } .variant-box small { display:none; } }

/* ---- Neuromarketing: stock signal, popular variant, free-ship nudge ---- */
.stock-line { display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:600; color:#1a8f4c; background:rgba(26,143,76,.1); padding:6px 14px; border-radius:50px; margin-bottom:16px; }
.stock-line i { font-size:1rem; }
.stock-line.low { color:var(--nano-red); background:rgba(228,45,31,.1); }
.variant-opt.is-popular .variant-box { border-color:var(--nano-blue); }
.variant-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--nano-blue); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 10px; border-radius:50px; white-space:nowrap; box-shadow:0 4px 10px -3px rgba(21,96,176,.5); }
.variant-box { position:relative; overflow:visible; }
.variant-picker .variant-options { padding-top:12px; }
.ship-nudge { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; padding:12px 16px; border-radius:var(--radius-sm); margin:6px 0 14px; }
.ship-nudge.ok { color:#1a8f4c; background:rgba(26,143,76,.1); }
.ship-nudge.go { color:var(--nano-blue); background:var(--bg-soft); }
.ship-nudge .ship-bar { flex:1; height:6px; background:var(--border); border-radius:50px; overflow:hidden; }
.ship-nudge .ship-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--nano-blue),#1a8f4c); border-radius:50px; transition:width .4s var(--ease); }

/* ---- Free-ship nudge: hero + product cards ---- */
.hero-ship-nudge { display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.85rem; font-weight:600; color:var(--nano-blue); background:var(--bg-soft); border:1px solid var(--border); padding:8px 16px; border-radius:50px; }
.hero-ship-nudge i { color:#1a8f4c; font-size:1rem; }
.card-ship { display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; margin:0 0 12px; color:var(--nano-blue); }
.card-ship i { font-size:.95rem; }
.card-ship.ok { color:#1a8f4c; }
@media (max-width:767px){ .hero-ship-nudge { font-size:.8rem; } }

/* ============================================================
   CUSTOM OFF-CANVAS MOBILE MENU (replaces slicknav)
   ============================================================ */
.slicknav_menu, .res-mobile-menu { display:none !important; }
.nano-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; background:var(--nano-blue); border:0; border-radius:12px; cursor:pointer; padding:0 12px; box-shadow:0 6px 16px -6px rgba(21,96,176,.5); }
.nano-burger span { display:block; height:2.5px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
@media (max-width:991px){ .nano-burger { display:inline-flex; } }

.mobile-menu { position:fixed; inset:0; z-index:1200; visibility:hidden; }
.mobile-menu.open { visibility:visible; }
.mm-overlay { position:absolute; inset:0; background:rgba(10,20,33,.55); opacity:0; transition:.35s var(--ease); }
.mobile-menu.open .mm-overlay { opacity:1; }
.mm-panel { position:absolute; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--card); box-shadow:var(--shadow-osx-lg); transform:translateX(100%); transition:transform .38s var(--ease); overflow-y:auto; padding:18px; display:flex; flex-direction:column; }
.mobile-menu.open .mm-panel { transform:none; }
.mm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mm-head .site-logo img { height:40px; width:auto; }
.mm-close { background:var(--bg-soft); border:0; width:42px; height:42px; border-radius:12px; font-size:1.15rem; color:var(--text); cursor:pointer; }
.mm-search { display:flex; align-items:center; background:var(--bg-soft); border:1px solid var(--border); border-radius:50px; padding:4px 4px 4px 16px; margin-bottom:16px; }
.mm-search input { border:0; background:transparent; flex:1; color:var(--text); padding:9px 4px; }
.mm-search input:focus { outline:none; }
.mm-search button { border:0; background:var(--nano-blue); color:#fff; width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer; }
.mm-nav { list-style:none; margin:0 0 16px; padding:0; }
.mm-nav > li { border-bottom:1px solid var(--border); }
.mm-nav > li > a, .mm-sub-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 4px; font-weight:600; font-size:1.02rem; color:var(--text); background:none; border:0; text-align:left; cursor:pointer; font-family:inherit; }
.mm-nav > li > a:hover, .mm-sub-toggle:hover { color:var(--nano-blue); }
.mm-sub-toggle i { transition:transform .3s var(--ease); color:var(--nano-red); font-size:.85rem; }
.mm-has-sub.open .mm-sub-toggle i { transform:rotate(180deg); }
.mm-sub { list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .38s var(--ease); }
.mm-has-sub.open .mm-sub { max-height:420px; }
.mm-sub li a { display:block; padding:10px 4px 10px 18px; color:var(--text-soft); font-size:.95rem; }
.mm-sub li a:hover { color:var(--nano-blue); }
.mm-sub li:last-child a { padding-bottom:14px; }
.mm-order { margin-bottom:16px; }
.mm-contact { display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.mm-contact a { color:var(--text-soft); font-size:.9rem; }
.mm-contact i { color:var(--nano-red); margin-right:8px; }
body.menu-open { overflow:hidden; }
@media (min-width:992px){ .mobile-menu { display:none; } }

/* ---- Mobile fixes: top-bar overflow + hero sub/nudge wrapping ---- */
@media (max-width:991px){ .header-top .header-top-nav ul li.tb-mail { display:none !important; } }
@media (max-width:575px){
  .header-top .header-top-nav ul li.tb-phone { display:none !important; }
  .header-top .header-top-nav ul { justify-content:center; gap:12px; }
  .header-top .header-info { font-size:.72rem; }
  .hero-diamond .hero-sub { font-size:.92rem; line-height:1.5; }
  .hero-ship-nudge { font-size:.75rem; padding:7px 14px; white-space:normal; line-height:1.35; }
  .hero2-content .hero-eyebrow, .hero-diamond { max-width:100%; }
}
@media (max-width:390px){
  .hero-d-big { font-size:1.7rem; }
  .hero-d-top { font-size:1.25rem; }
}

/* Top bar: make the nav column full-width on mobile so SK/EN + theme center properly */
@media (max-width:767px){
  .header-top .col-6 { flex:0 0 100% !important; max-width:100% !important; }
  .header-top .header-top-nav ul { justify-content:center; }
}

/* ---- Mobile hero: force simple centered block (kill flex offset + row margins) ---- */
@media (max-width:767px){
  .hero2-item { display:block !important; padding:46px 0 36px !important; min-height:auto !important; }
  .hero2-item .container { width:100% !important; max-width:100% !important; padding-left:18px !important; padding-right:18px !important; margin:0 auto !important; }
  .hero2-item .row { margin-left:0 !important; margin-right:0 !important; }
  .hero2-item .row > * { padding-left:0 !important; padding-right:0 !important; width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .hero-diamond { display:block !important; text-align:center !important; padding:8px 0 !important; min-height:auto !important; }
  .hero-diamond > * { max-width:100% !important; }
  .hero-sub, .hero-ship-nudge { white-space:normal !important; }
  .hero-ship-nudge { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center !important; }
}

/* ---- Product finder (guided quiz) ---- */
.finder-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:36px; }
.finder-progress { height:6px; background:var(--bg-soft); border-radius:50px; overflow:hidden; margin-bottom:26px; }
.finder-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--nano-blue),#1a8f4c); border-radius:50px; transition:width .4s var(--ease); }
.finder-stepno { display:inline-block; color:var(--nano-red); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:.75rem; margin-bottom:8px; }
.finder-step h3 { font-size:1.4rem; margin-bottom:22px; }
.finder-options { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
.finder-options-2 { grid-template-columns:repeat(2,1fr); }
.finder-opt { cursor:pointer; margin:0; }
.finder-opt input { position:absolute; opacity:0; }
.fo-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; min-height:110px; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:18px 12px; background:var(--bg-alt); font-weight:600; transition:.25s var(--ease); }
.fo-box i { font-size:1.9rem; color:var(--nano-blue); }
.finder-opt input:checked + .fo-box { border-color:var(--nano-blue); background:var(--bg-soft); box-shadow:0 0 0 3px rgba(21,96,176,.15); }
.finder-opt:hover .fo-box { border-color:var(--nano-blue); }
.finder-num { width:100%; padding:16px 18px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-alt); color:var(--text); font-size:1.4rem; font-weight:700; text-align:center; margin-bottom:26px; }
.finder-num:focus { outline:none; border-color:var(--nano-blue); box-shadow:0 0 0 3px rgba(21,96,176,.15); }
.finder-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.finder-nav span { flex:1; }
.fr-card { display:flex; gap:24px; align-items:center; }
.fr-img { width:150px; height:150px; object-fit:cover; border-radius:var(--radius-sm); flex:0 0 150px; box-shadow:var(--shadow-osx); }
.fr-body { flex:1 1 auto; min-width:0; }
.fr-body h3 { font-size:1rem; color:var(--nano-red); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.fr-name { font-size:1.35rem; font-weight:800; color:var(--text); margin-bottom:10px; }
.fr-meta { display:flex; gap:18px; flex-wrap:wrap; color:var(--text-soft); font-size:.9rem; margin-bottom:10px; }
.fr-meta strong { color:var(--text); }
.fr-dose { background:var(--bg-soft); border-radius:var(--radius-sm); padding:10px 14px; color:var(--nano-blue); font-weight:600; margin-bottom:12px; }
.fr-dose i { margin-right:6px; }
.fr-price { font-size:1.8rem; font-weight:900; color:var(--nano-blue); margin-bottom:16px; }
.finder-restart { margin-top:22px; }
@media (max-width:575px){
  .finder-card { padding:24px 18px; }
  .finder-options { grid-template-columns:1fr; }
  .fo-box { min-height:auto; flex-direction:row; }
  .fr-card { flex-direction:column; text-align:center; }
  .fr-meta { justify-content:center; }
}

/* ---- Cookie consent (GDPR) ---- */
.cookie-bar { position:fixed; left:16px; right:16px; bottom:16px; z-index:1500; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-osx-lg); padding:18px 22px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between; animation:cookieUp .5s var(--ease); }
@keyframes cookieUp { from{ transform:translateY(30px); opacity:0;} to{ transform:none; opacity:1;} }
.cookie-bar.hide { opacity:0; transform:translateY(20px); transition:.4s var(--ease); }
.cookie-bar p { margin:0; flex:1; min-width:240px; color:var(--text-soft); font-size:.88rem; }
.cookie-bar p i { color:var(--nano-blue); margin-right:6px; }
.cookie-actions { display:flex; gap:10px; }
.cookie-actions .btn-nano { padding:10px 20px; }
@media (max-width:575px){ .cookie-bar { flex-direction:column; align-items:stretch; } .cookie-actions { } .cookie-actions .btn-nano { flex:1; } }

/* ---- Customer reviews ---- */
.reviews-area { background:var(--bg-alt); }
.rv-agg { color:var(--text-soft); margin-top:6px; }
.rv-agg-num { font-weight:900; color:var(--nano-blue); font-size:1.2rem; }
.reviews-empty { color:var(--text-soft); background:var(--card); border:1px dashed var(--border); border-radius:var(--radius-sm); padding:24px; text-align:center; }
.reviews-empty i { color:var(--nano-blue); margin-right:6px; }
.review-item { display:flex; gap:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px; margin-bottom:14px; }
.rv-avatar { width:46px; height:46px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--nano-blue),var(--nano-blue-dark)); color:#fff; display:grid; place-items:center; font-weight:800; }
.rv-body { flex:1; min-width:0; }
.rv-top { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.rv-top strong { color:var(--text); }
.rv-stars i { color:#c9d3de; font-size:.85rem; }
.rv-stars i.on { color:var(--nano-red); }
.rv-text { color:var(--text-soft); margin:0; }
.review-form-wrap { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin-top:24px; }
.review-form-wrap h3 { margin-bottom:18px; }
.star-input { display:inline-flex; flex-direction:row-reverse; gap:4px; padding:6px 0 16px; }
.star-input input { position:absolute; opacity:0; }
.star-input label { cursor:pointer; color:#c9d3de; font-size:1.6rem; transition:color .2s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color:var(--nano-red); }

/* ---- Order tracking ---- */
.track-result { margin-top:22px; }
.track-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-osx); }
.track-status { display:inline-block; font-weight:700; padding:8px 18px; border-radius:50px; margin-bottom:16px; background:var(--bg-soft); color:var(--nano-blue); }
.track-status.track-shipped, .track-status.track-delivered { background:rgba(26,143,76,.12); color:#1a8f4c; }
.track-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--border); }
.track-row span { color:var(--text-soft); }
.track-row strong { color:var(--text); text-align:right; }

/* Safety: pill badges/ribbons must never wrap per-character */
.ribbon, .ribbons, .variant-badge, .offer-tag, .hero-flag, .badge, .cart-count, .track-status { white-space:nowrap; }

/* Override template's brown 55px circular ribbon → brand pill badge (higher specificity) */
.product-item .product-thumb .ribbon {
  background: var(--nano-amber); color:#fff; border-radius:50px;
  width:auto; height:auto; line-height:1.2; padding:6px 15px;
  font-size:.78rem; font-weight:700; left:14px; top:14px; right:auto;
  white-space:nowrap; text-align:left;
}

/* Override template's brown product-action bar → brand circular hover buttons (top-right) */
.product-item .product-thumb .product-action {
  background:transparent; box-shadow:none; width:auto; height:auto;
  left:auto; right:14px; top:14px; transform:none; margin-top:0;
  flex-direction:column; gap:8px; opacity:0; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.product-item:hover .product-thumb .product-action { opacity:1; }
.product-item .product-thumb .product-action a {
  width:42px; height:42px; border-radius:50%; background:var(--card); color:var(--text) !important;
  display:grid; place-items:center; box-shadow:var(--shadow-osx); padding:0; margin:0; font-size:1rem;
}
.product-item .product-thumb .product-action a:hover { background:var(--nano-blue); color:#fff !important; }
.product-item .product-thumb .product-action a:before { display:none !important; }

/* Override template preloader bronze → brand blue */
.preloader-wrap .preloader .dot { background-color: var(--nano-blue); }
.preloader-wrap .preloader .dots span { background-color: var(--nano-red); }