/* ===== PÜR brand layer — home page redesign =====
   Loaded after main.css/home.css so these tokens and component rules win
   without editing the base sheets. Every colour below is sampled from the
   full-resolution logo artwork: teal #03A8B9 with pink, purple and yellow dots.

   Contrast is the reason there are two teals. #03A8B9 is only 2.87:1 on white,
   so it stays decorative — large shapes, fills, rules. Anything carrying text
   uses --brand-deep (4.63:1) or --brand-deeper (6.07:1), both AA at any size. */

:root{
  /* --- brand --- */
  --brand:#03A8B9;            /* logo teal — decorative fills only, never text */
  --brand-deep:#02818E;       /* white text on this = 4.63:1  AA */
  --brand-deeper:#026D78;     /* white text on this = 6.07:1  AA */
  --brand-tint:#E1FCFF;       /* teal wash for section grounds */
  --brand-tint-2:#C3F8FE;     /* second wash for gradients/rules */

  /* --- the three dots, exactly as they appear in the mark --- */
  --dot-pink:#FBACB6;
  --dot-yellow:#FABB07;
  --dot-purple:#9492D1;
  --pink-tint:#FEECEE;
  --yellow-tint:#FFFAEB;
  --purple-tint:#F1F1F9;
  --purple-deep:#5A57B8;      /* white/dark text pair for the purple panel, 6.02:1 */

  /* --- text --- */
  --ink:#0F2B33;              /* headings — 14.85:1 on white */
  --text:#424242;             /* body — 10.05:1 */
  --text-muted:#666666;       /* secondary — 5.74:1 on white, 5.27:1 on #F5F5F5 */

  /* --- surfaces --- */
  --background:#F7FAFB;
  --card:#FFFFFF;
  --muted:#F5F5F5;
  --border:#E4EDEF;
  --border-strong:#CFDDE0;

  /* --- type: Poppins per the design system --- */
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI','Noto Sans Bengali',sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px;
  --fs-xl:16px; --fs-2xl:17px; --fs-3xl:18px; --fs-4xl:20px;
  --fs-title:clamp(20px,2.2vw,26px);
  --fs-hero:clamp(24px,3vw,34px);
  --lh-base:1.55;

  /* --- spacing ---
     The design guide's scale, with 11.9px rounded to 12: a sub-pixel step
     lands on a different physical pixel at each zoom level, so gaps built from
     it drift apart. The top of its scale stops at 13px, which is fine for gaps
     inside a control but too tight for card and section padding, so the scale
     continues on the same rhythm. */
  --sp-1:2px;  --sp-2:4px;  --sp-3:6px;  --sp-4:8px;
  --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px;
  --sp-9:20px; --sp-10:24px;

  /* --- radius --- */
  --r-xs:5px; --r-sm:10px; --r-md:17px; --r-lg:18px; --r-xl:20px;
  --r-2xl:28px; --r-pill:100px;
  --radius:var(--r-sm);

  /* --- motion --- */
  --t-instant:250ms; --t-fast:300ms; --t-normal:500ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- elevation, softened for a baby-care storefront --- */
  --shadow-sm:0 1px 2px rgba(15,43,51,.05);
  --shadow-md:0 6px 18px rgba(15,43,51,.07);
  --shadow-lg:0 16px 38px rgba(15,43,51,.10);
  --ring:0 0 0 3px #fff,0 0 0 6px var(--brand-deep);
  --page-max: 1400px;
  --page-pad: 24px;
}

body{font-family:var(--font-sans);color:var(--text);background:var(--background)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);color:var(--ink);letter-spacing:-.015em}

/* Visible focus on every interactive element — non-negotiable, and it must
   survive the theme's own :focus resets, hence the explicit outline reset. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:var(--r-xs);
  position:relative;z-index:2;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ===== Header ===== */
.site-header{border-bottom:1px solid var(--border)}
.site-header .site-logo img{max-width:132px}

/* Search: teal focus ring instead of the inherited red border. */
.hdr-search{border-radius:var(--r-pill);overflow:hidden;border:1.5px solid var(--border-strong);transition:border-color var(--t-instant) var(--ease),box-shadow var(--t-instant) var(--ease)}
.hdr-search:focus-within{border-color:var(--brand-deep);box-shadow:0 0 0 4px rgba(3,168,185,.18)}
.hdr-search-input{font-family:var(--font-sans);font-size:var(--fs-md)}
.hdr-search button[type="submit"],.hdr-search .hdr-search-btn{
  background:var(--brand-deep);color:#fff;transition:background var(--t-instant) var(--ease)}
.hdr-search button[type="submit"]:hover,.hdr-search .hdr-search-btn:hover{background:var(--brand-deeper)}

/* Department bar reads as brand teal, not the old crimson. */
.hx-dept-toggle,.dept-toggle,.all-departments{background:var(--brand-deep) !important;color:#fff !important}
.hx-dept-toggle:hover,.dept-toggle:hover,.all-departments:hover{background:var(--brand-deeper) !important}

/* ===== Section headings ===== */
.section-head h2,
.hx-cats-head h2,
.hx-dual-head h2,
.hx-dual-head h3,
.hx-bs-head h2,
.hx-deals-head h2,
.so-cat-section .section-head h2,
.home-categories .section-head h2,
.home-bestsellers .section-head h2,
.home-featured .section-head h2,
.home-deals .section-head h2,
.home-allproducts .section-head h2,
.wc-page .section-head h2,
.section-head .section-title,
.sec-title,
.ev-section-head h2,
.ab-section-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.03em;
  text-transform: uppercase !important;
}

/* ===== Categories Uppercase ===== */
.hx-cat-bloom-name,
.hx-cat-name,
.cat-card .cat-title,
.ds-cat-title,
.home-cat-name,
.ds-card-cat,
.product-card .cat,
.product-cat,
.product-info .cat,
.pc-category,
.card-cat,
.art-filter-pill,
.shop-cat-pill,
.ds-filter-cat,
.hx-cat-link-label {
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
}

.section-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-deep);
}
.section-head a{color:var(--brand-deep);font-weight:600;text-transform:uppercase}
.section-head a:hover{color:var(--brand-deeper);text-decoration:underline;text-underline-offset:3px}

/* ===== Hero ===== */
.hx-hero{padding-top:18px;width:100%}
.hx-slider{
  border-radius:20px;
  overflow:hidden;
  border:1px solid #E2E8F0;
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
  background:linear-gradient(135deg, #E0F2FE 0%, #F0FDFA 50%, #FFF1F2 100%);
}
.hx-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hx-slider:hover .hx-slide.is-active img{transform:scale(1.03)}
.hx-slide-dots button,.hx-slide-dots span{
  background:rgba(15, 23, 42, 0.2);
  border-radius:var(--r-pill);
  transition:background var(--t-instant) var(--ease),width var(--t-instant) var(--ease)
}
.hx-slide-dots .is-active,.hx-slide-dots [aria-current="true"]{background:var(--brand-deep);width:24px}

/* ===== Cards — shared shell for deals / bestsellers / categories ===== */
.hx-deals-card,.hx-bs-card,.hx-cat-card,.hx-dual-panel,.hx-br-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.hx-deals-card:hover,.hx-bs-card:hover,.hx-cat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--brand-tint-2);
}

/* Product imagery sat tiny inside oversized boxes — pin a ratio and let the
   image fill it so every tile in a row is the same height. */
.hx-bs-img,.hx-deal-thumb,.hx-dual-item-img,.hx-dual-feature-img{
  background:var(--muted);border-radius:var(--r-sm);overflow:hidden}
.hx-bs-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:10px}
.hx-deal-thumb{position:relative;width:84px;height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}
.hx-deal-thumb img{width:100%;height:100%;object-fit:contain}

.hx-bs-name,.hx-deal-name{
  font-size:var(--fs-md);font-weight:500;color:var(--ink);line-height:1.4;
  /* Long product titles clamp to two lines so card heights stay even. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hx-bs-price,.hx-deal-price{color:var(--ink);font-weight:600;font-size:var(--fs-xl)}
.price-old,.hx-bs-price del,.hx-deal-price del{color:var(--text-muted);font-weight:400;font-size:var(--fs-sm)}

/* Discount badge: yellow dot colour, dark text — 5.9:1. */
.hx-bs-off,.hx-deal-off,.hx-deals-badge{
  background:var(--dot-yellow);color:#424242;
  border-radius:var(--r-pill);padding:2px 9px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;
}

/* ===== Category cards =====
   The tinted grounds come from the theme's own --card-h hue system, now cycling
   the four logo hues (186 teal / 348 pink / 44 yellow / 243 purple), so nothing
   here should repaint the media background — only the box geometry. */
.hx-cat-card{overflow:hidden}
.hx-cat-media{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.hx-cat-media img{width:100%;height:100%;object-fit:contain;padding:12px}
.hx-cat-name{font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.hx-cat-count,.hx-cat-link-count{color:var(--text-muted);font-size:var(--fs-sm)}
.hx-cat-cta{color:var(--brand-deep);font-weight:500}

/* ===== Bestseller tabs ===== */
.hx-bs-tabs{gap:8px;flex-wrap:wrap}
.hx-bs-tab{
  border:1px solid var(--border-strong);background:var(--card);color:var(--text);
  border-radius:var(--r-pill);padding:7px 16px;
  font-size:var(--fs-md);font-weight:500;
  transition:background var(--t-instant) var(--ease),color var(--t-instant) var(--ease),border-color var(--t-instant) var(--ease);
}
.hx-bs-tab:hover{border-color:var(--brand);color:var(--brand-deeper);background:var(--brand-tint)}
.hx-bs-tab.is-active,.hx-bs-tab[aria-selected="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.hx-bs-tab:disabled{opacity:.5;cursor:not-allowed}

/* ===== Buttons — full state set ===== */
.hx-btn,.hx-btn-primary,.hx-btn-ghost,
.button,.wp-element-button,button.single_add_to_cart_button{
  font-family:var(--font-sans);font-size:var(--fs-md);font-weight:500;
  border-radius:var(--r-pill);padding:10px 20px;
  transition:background var(--t-instant) var(--ease),color var(--t-instant) var(--ease),
             border-color var(--t-instant) var(--ease),transform var(--t-instant) var(--ease);
}
.hx-btn-primary,.button.alt,button.single_add_to_cart_button{
  background:var(--brand-deep);color:#fff;border:1px solid var(--brand-deep)}
.hx-btn-primary:hover,.button.alt:hover,button.single_add_to_cart_button:hover{
  background:var(--brand-deeper);border-color:var(--brand-deeper)}
.hx-btn-primary:active,.button.alt:active{transform:translateY(1px)}
.hx-btn-primary:disabled,.button:disabled,.hx-btn-primary[aria-disabled="true"]{
  background:var(--border-strong);border-color:var(--border-strong);color:#fff;
  cursor:not-allowed;transform:none}
.hx-btn-ghost{background:transparent;color:var(--brand-deep);border:1.5px solid var(--brand)}
.hx-btn-ghost:hover{background:var(--brand-tint);color:var(--brand-deeper)}

/* Loading state — set aria-busy="true" and the label is replaced by a spinner. */
.hx-btn[aria-busy="true"],.button[aria-busy="true"]{
  color:transparent !important;pointer-events:none;position:relative}
.hx-btn[aria-busy="true"]::after,.button[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:pur-spin var(--t-normal) linear infinite}
@keyframes pur-spin{to{transform:rotate(360deg)}}

/* ===== Trust strip ===== */
.hx-usp {
  background: transparent;
  border: 0;
  margin-top: clamp(48px, 5vw, 64px) !important;
  margin-bottom: clamp(48px, 5vw, 64px) !important;
  padding: 0 !important;
}
.hx-usp-item {
  border-radius: 14px !important;
}

/* ===== Promo / banner blocks ===== */
.hx-br-item,.hx-bp-grid > *{border-radius:var(--r-lg);overflow:hidden}
.hx-br-item img,.hx-bp-grid img{transition:transform var(--t-normal) var(--ease)}
.hx-br-item:hover img,.hx-bp-grid a:hover img{transform:scale(1.03)}

/* ===== Empty states ===== */
.hx-bs-panel:empty::after,.hx-deals-grid:empty::after,.hx-cat-cards:empty::after{
  content:"Nothing to show here yet.";
  display:block;padding:28px;text-align:center;
  color:var(--text-muted);font-size:var(--fs-md);
  background:var(--muted);border-radius:var(--r-md);
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .hx-bs-img{aspect-ratio:1/1}
  .section-head h2{font-size:var(--fs-4xl)}
}
@media (max-width:640px){
  .hx-deal-thumb{width:68px;height:68px;flex-basis:68px}
  /* home.css centres this row; centring plus nowrap makes the strip overhang
     both edges and widens the page, so the scroller starts from the left. */
  .hx-bs-tabs{
    overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hx-bs-tabs::-webkit-scrollbar{display:none}
  .hx-bs-tab{white-space:nowrap}
  /* Touch targets stay at 44px minimum. */
  .hx-btn,.hx-btn-primary,.hx-btn-ghost,.hx-bs-tab{min-height:44px}
}

/* ===== Deals banners — fallback layout with copy on the left =====
   The auto variant sits a packshot on the right of a tinted ground. Left
   half was empty, so it now carries the category name, count and a CTA. */
.hx-deals-banner.is-auto{
  background:linear-gradient(110deg,var(--brand-tint) 0%,var(--brand-tint-2) 100%);
  border-radius:var(--r-lg);
}
.hx-deals-banners > *:nth-child(2).is-auto{
  background:linear-gradient(110deg,var(--pink-tint) 0%,#FDD9DE 100%);
}
.hx-deals-banner-copy{
  position:absolute;left:7%;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:5px;
  max-width:52%;line-height:1.3;z-index:1;
}
.hx-deals-banner-eyebrow{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-deep);
}
.hx-deals-banner-title{
  font-size:clamp(16px,1.6vw,21px);font-weight:600;color:var(--ink);
  /* Long category names wrap to two lines, then clip — the banner never grows. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hx-deals-banner-count{font-size:var(--fs-sm);color:var(--text-muted)}
.hx-deals-banner-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:var(--fs-md);font-weight:600;color:var(--brand-deeper);
}
.hx-deals-banner-cta svg{transition:transform var(--t-instant) var(--ease)}
.hx-deals-banner:hover .hx-deals-banner-cta svg{transform:translateX(3px)}
.hx-deals-banner.is-auto img{max-width:34%}

@media (max-width:640px){
  /* The 1000:240 ratio leaves ~94px of height at phone widths, which clips the
     copy stack — give the fallback banner a taller box and trim it to two lines. */
  .hx-deals-banner.is-auto::before{aspect-ratio:1000/420}
  .hx-deals-banner-copy{max-width:58%;left:6%;gap:3px}
  .hx-deals-banner-count,.hx-deals-banner-eyebrow{display:none}
  .hx-deals-banner-title{font-size:var(--fs-xl)}
  .hx-deals-banner.is-auto img{max-width:30%}
}

/* Hero fallback promo gets the same tinted ground as the slider. */
.hx-hero-promo.is-auto{background:linear-gradient(135deg,var(--brand-tint),var(--purple-tint))}

/* ===== Dual category panels =====
   home.css paints the headings and prices with hsl(var(--panel-h) 78% 46%).
   At the teal hue that lands on #1AB6D1 — 2.43:1 on white, which fails AA for
   the price, the one number on the card that has to be readable. The hue keeps
   driving the top border; text switches to a fixed accessible pair. */
.hx-dual-panel{--panel-accent:var(--brand-deep)}                    /* 4.63:1 */
.hx-dual-panel[style*="--panel-h:242"]{--panel-accent:var(--purple-deep)}  /* 6.02:1 */
.hx-dual-head h2,.hx-dual-head h3{color:var(--panel-accent)}
.hx-dual-head a{color:var(--text-muted)}
.hx-dual-head a:hover{color:var(--panel-accent)}
.hx-dual-price ins{color:var(--panel-accent)}
.hx-dual-item:hover .hx-dual-name{color:var(--panel-accent)}
.hx-dual-name{color:var(--ink)}

/* ===== Hero without the departments column =====
   The "All Departments" panel used to hang open over the hero on the front
   page, and home.css reserved a 270px column for it. The panel is now a normal
   click-to-open dropdown, so the slider takes that space back. */
@media (min-width:1024px){
  .hx-hero-grid{grid-template-columns:minmax(0,1fr) 280px;padding-top:18px}
  .hx-hero-grid.no-promos,
  .hx-hero-grid.no-slider{grid-template-columns:minmax(0,1fr)}
}

/* The stand-in slide is a square packshot, so max-height is what actually caps
   it — not the 62% max-width. In the wider hero that left a lot of empty ground
   either side, so lift the height cap a little — but not past ~82%, or it covers the slide dots. */
@media (min-width:1024px){
  .hx-slide.is-auto > img{max-width:56%;max-height:82%}
}

/* ===== Primary nav ===== */
.hdr-bar {
  width: 100%;
  background: var(--ink, #0F172A) !important;
  position: relative;
  z-index: 95;
}
.hdr-nav {
  padding-left: 0;
  width: 100%;
  min-width: 0;
}
.hdr-nav-list {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.hdr-nav-list > li {
  list-style: none;
  position: relative;
}
.hdr-nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.hdr-nav-list > li > a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.hdr-nav-list > li.current-menu-item > a,
.hdr-nav-list > li > a.current-menu-item {
  background: var(--brand-deep, #03A8B9) !important;
  color: #FFFFFF !important;
}
@media (min-width: 1200px) {
  .hdr-nav-list > li > a {
    padding: 0 18px;
    font-size: 13.5px;
  }
}

/* ===== Hero banner column ===== */
.hx-hero-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}
.hx-hero-promo {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  padding: 18px;
}
.hx-hero-promo:hover {
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
  border-color: #BAE6FD;
}
.hx-hero-promo.is-tall {
  background: linear-gradient(135deg, #E0F2FE 0%, #F0FDFA 100%);
}
.hx-hero-promo.is-short {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFFBEB 100%);
}

@media (min-width: 1024px) {
  .hx-hero-promos {
    grid-template-columns: 1fr;
    grid-template-rows: 1.25fr 1fr;
    height: var(--hx-hero-h, 430px);
    gap: 16px;
  }
  .hx-hero-promo { height: 100%; }
}

.hx-hero-promo-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.hx-hero-promo-badge {
  font-size: 11px;
  font-weight: 800;
  color: #02818E;
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hx-hero-promo-title {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin: 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-hero-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  background: #02818E;
  padding: 5px 12px;
  border-radius: 20px;
  width: fit-content;
  margin-top: 4px;
  box-shadow: 0 4px 10px rgba(2, 129, 142, 0.3);
  transition: all 0.2s ease;
}
.hx-hero-promo-cta svg { transition: transform 0.2s ease; }
.hx-hero-promo:hover .hx-hero-promo-cta {
  background: #026D78;
  transform: translateX(2px);
}
.hx-hero-promo:hover .hx-hero-promo-cta svg { transform: translateX(3px); }

.hx-hero-promo-imgbox {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}
.hx-hero-promo-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.hx-hero-promo:hover .hx-hero-promo-imgbox img {
  transform: scale(1.08);
}

@media (max-width: 1023px) {
  .hx-hero-promos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hx-hero-promo-imgbox {
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 560px) {
  .hx-hero-promos {
    grid-template-columns: 1fr;
  }
}

/* Petal outline for the category medallions: a union of circles (one core plus
   twelve lobes), inlined as a mask. Unioned circles stay smooth at any size,
   where hand-authored petal beziers tend to kink. Single-quoted attributes and
   no fill keep " and # out of the data URI, both of which break url(). */
:root{--bloom-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='33.0'/%3E%3Ccircle cx='50.00' cy='16.50' r='12.5'/%3E%3Ccircle cx='66.75' cy='20.99' r='12.5'/%3E%3Ccircle cx='79.01' cy='33.25' r='12.5'/%3E%3Ccircle cx='83.50' cy='50.00' r='12.5'/%3E%3Ccircle cx='79.01' cy='66.75' r='12.5'/%3E%3Ccircle cx='66.75' cy='79.01' r='12.5'/%3E%3Ccircle cx='50.00' cy='83.50' r='12.5'/%3E%3Ccircle cx='33.25' cy='79.01' r='12.5'/%3E%3Ccircle cx='20.99' cy='66.75' r='12.5'/%3E%3Ccircle cx='16.50' cy='50.00' r='12.5'/%3E%3Ccircle cx='20.99' cy='33.25' r='12.5'/%3E%3Ccircle cx='33.25' cy='20.99' r='12.5'/%3E%3C/svg%3E")}

/* ===== Modern Category Section & Cards ===== */
.so-cat-section{
  padding: 32px 0 44px;
}
.hx-cats-head{
  text-align: center;
  margin-bottom: 32px;
}
.hx-cats-eyebrow{
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary, #03A8B9);
  background: rgba(3, 168, 185, 0.08);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.hx-cats-head h2,
.hx-cats-title{
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  color: #0F172A;
  margin: 0;
}
.hx-cats-rule{
  display: block;
  width: 50px;
  height: 3.5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #03A8B9 0%, #F43F5E 100%);
  margin: 10px auto 0;
}

.hx-cats-grid-wrap{
  position: relative;
  width: 100%;
}
.hx-cat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

.hx-cat-card-modern{
  background: #FFFFFF;
  border-radius: 22px;
  border: 1.5px solid #F1F5F9;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.hx-cat-card-modern:hover{
  transform: translateY(-8px);
  border-color: hsl(var(--card-h) 65% 82%);
  box-shadow: 0 16px 36px hsla(var(--card-h), 55%, 45%, 0.16);
}

.hx-cat-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.hx-cat-card-visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  background: linear-gradient(145deg, hsl(var(--card-h) 75% 97%) 0%, hsl(var(--card-h) 60% 90%) 100%);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.hx-cat-card-backdrop{
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0.55;
  filter: blur(20px);
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hx-cat-card-modern:hover .hx-cat-card-backdrop{
  transform: scale(1.4);
  opacity: 0.8;
}

.hx-cat-card-imgbox{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.hx-cat-card-imgbox img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.06));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hx-cat-card-modern:hover .hx-cat-card-imgbox img{
  transform: scale(1.09) translateY(-2px);
}

.hx-cat-card-badge{
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  color: hsl(var(--card-h) 65% 36%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.hx-cat-card-modern:hover .hx-cat-card-badge{
  background: hsl(var(--card-h) 65% 42%);
  color: #FFFFFF;
  transform: scale(1.08) rotate(-45deg);
}

.hx-cat-card-body{
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: #FFFFFF;
  flex: 1;
  justify-content: space-between;
}
.hx-cat-card-title{
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
  color: #0F172A;
  line-height: 1.35;
  margin: 0;
  transition: color 0.25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-cat-card-modern:hover .hx-cat-card-title{
  color: hsl(var(--card-h) 70% 32%);
}
.hx-cat-card-count{
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  background: hsl(var(--card-h) 55% 94%);
  color: hsl(var(--card-h) 60% 28%);
  transition: all 0.25s ease;
}
.hx-cat-card-modern:hover .hx-cat-card-count{
  background: hsl(var(--card-h) 60% 88%);
  color: hsl(var(--card-h) 70% 20%);
}

@media (max-width: 1024px){
  .hx-cat-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
@media (max-width: 860px){
  .hx-cat-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .hx-cat-card-modern{
    border-radius: 18px;
  }
}
@media (max-width: 480px){
  .hx-cat-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hx-cat-card-visual{
    padding: 12px;
  }
  .hx-cat-card-body{
    padding: 12px 8px 14px;
    gap: 6px;
  }
  .hx-cat-card-title{
    font-size: 12.5px;
  }
  .hx-cat-card-count{
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .hx-cat-card-badge{
    width: 26px;
    height: 26px;
    bottom: 8px;
    right: 8px;
  }
  .hx-cat-card-badge svg{
    width: 11px;
    height: 11px;
  }
}

/* ===== Nav bar: boxed, not full-bleed =====
   The dark band used to run edge to edge while its contents sat in the 1280px
   container, so the bar looked wider than every other row on the page. Moving
   the background onto the wrap lines its edges up with the hero and the
   sections below. */
.hdr-bar{background:transparent}
/* The band sits on the nav itself, not on the wrap. The wrap carries the page
   padding, so painting it there pushed the bar 16px wider than the hero on
   each side; .hdr-nav spans the wrap's inner width exactly. */
.hdr-bar {
  background: var(--ink, #0F172A) !important;
  width: 100%;
}
.hdr-bar .hdr-wrap {
  background: transparent;
  width: 100%;
  max-width: var(--page-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--page-pad, 16px);
  box-sizing: border-box;
}
.hdr-nav {
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Below the nav breakpoint .hdr-nav is display:none */
@media (max-width:1023px){
  .hdr-bar{display:none !important}
}

/* Caret on anything with children. A mask keeps it in currentColor, so it
   follows the link through every state without a second rule. */
.hdr-nav-list .menu-item-has-children > a::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  background:currentColor;
  -webkit-mask:var(--caret-mask) center/contain no-repeat;
          mask:var(--caret-mask) center/contain no-repeat;
  transition:transform var(--t-instant) var(--ease);
}
.hdr-nav-list > li.menu-item-has-children:hover > a::after,
.hdr-nav-list > li.menu-item-has-children:focus-within > a::after{transform:rotate(180deg)}

/* Level 2 and 3 panels */
.hdr-nav-list .sub-menu{
  /* Wide enough that department names such as "Classic Feeding Bottle &
     Nipple" stay on one line instead of wrapping into a ragged column. */
  position:absolute;z-index:70;min-width:248px;max-width:300px;
  margin:0;padding:6px;list-style:none;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-instant) var(--ease),transform var(--t-instant) var(--ease),visibility var(--t-instant);
}
.hdr-nav-list > li > .sub-menu{top:100%;left:0}
.hdr-nav-list .sub-menu .sub-menu{top:-6px;left:100%;min-width:268px}
.hdr-nav-list li:hover > .sub-menu,
.hdr-nav-list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

.hdr-nav-list .sub-menu a{
  padding:9px 12px;border-radius:var(--r-xs);
  font-size:var(--fs-md);font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--text);white-space:normal;line-height:1.35;
  justify-content:space-between;gap:10px;
}
.hdr-nav-list .sub-menu a:hover{background:var(--brand-tint);color:var(--brand-deeper)}

/* Third level runs uppercase to match the departments above it — the terms
   themselves are mixed case ("Breast Pump"), so the casing is presentational. */
.hdr-nav-list .sub-menu .sub-menu a{
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--fs-sm);font-weight:600;
}
.hdr-nav-list .sub-menu .menu-item-has-children > a::after{transform:rotate(-90deg)}
.hdr-nav-list .sub-menu li:hover > a::after,
.hdr-nav-list .sub-menu li:focus-within > a::after{transform:rotate(-90deg)}

/* A third-level panel near the right edge would run off-screen; flip it. */
.hdr-nav-list > li:nth-last-child(-n+2) .sub-menu .sub-menu{left:auto;right:100%}

:root{--caret-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ===== Mobile drawer: primary menu =====
   Rendered flat, two levels deep, since a phone drawer has no room for
   hover flyouts. Children are indented under their parent. */
.drawer-menu{margin:0;padding:0;list-style:none}
.drawer-menu li{list-style:none}
.drawer-menu a{display:block}
.drawer-menu .sub-menu{margin:0 0 4px;padding:0 0 0 14px;list-style:none;border-left:2px solid var(--border)}
.drawer-menu .sub-menu a{font-size:var(--fs-md);color:var(--text-muted)}
.drawer-menu .sub-menu .sub-menu{display:none}   /* third level is too deep for a drawer */

/* ===== Product cards ===== */
.hx-bs-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.hx-bs-card::after{
  /* Brand-tinted wash that fades up from the bottom on hover, so the card
     lifts as one object rather than just gaining a shadow. */
  content:"";position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(to top,hsl(186 60% 96%),transparent);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease);
}
.hx-bs-card:hover::after{opacity:1}
.hx-bs-card > *{position:relative;z-index:1}
.hx-bs-card:hover .hx-bs-img img{transform:scale(1.06)}
.hx-bs-img img{transition:transform var(--t-normal) var(--ease)}

/* Discount badge pops in rather than just sitting there. */
.hx-bs-off,.hx-deal-off{
  transition:transform var(--t-instant) var(--ease),box-shadow var(--t-instant) var(--ease);
}
.hx-bs-card:hover .hx-bs-off {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 4px 10px rgba(250,187,7,.4);
}

/* Home Page Cards Wishlist Button Positioning */
.hx-bs-card .ds-card-wishlist-btn,
.hx-dual-feature .ds-card-wishlist-btn,
.hx-deal-thumb .ds-card-wishlist-btn,
.hx-dual-item-img .ds-card-wishlist-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748B;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hx-bs-card .ds-card-wishlist-btn,
.hx-dual-feature .ds-card-wishlist-btn {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
}
.hx-bs-card .ds-card-wishlist-btn:hover,
.hx-dual-feature .ds-card-wishlist-btn:hover,
.hx-deal-thumb .ds-card-wishlist-btn:hover,
.hx-dual-item-img .ds-card-wishlist-btn:hover {
  background: #FFFFFF;
  color: #EF4444;
  transform: scale(1.12);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
}
.hx-bs-card .ds-card-wishlist-btn.is-active,
.hx-dual-feature .ds-card-wishlist-btn.is-active,
.hx-deal-thumb .ds-card-wishlist-btn.is-active,
.hx-dual-item-img .ds-card-wishlist-btn.is-active {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #EF4444;
}
.hx-bs-card .ds-card-wishlist-btn.is-active svg,
.hx-dual-feature .ds-card-wishlist-btn.is-active svg,
.hx-deal-thumb .ds-card-wishlist-btn.is-active svg,
.hx-dual-item-img .ds-card-wishlist-btn.is-active svg {
  fill: #EF4444;
  stroke: #EF4444;
}

/* ===== Action buttons ===== */
.hx-full-btn {
  border-radius: 10px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hx-full-btn svg { transition: transform 0.25s ease; }
.hx-full-btn:active:not([disabled]) { transform: translateY(1px) scale(0.98); }

/* Order Now: Luxury Rounded with Glowing Gradient */
.hx-full-order,
.ds-pill-order-btn {
  background: linear-gradient(135deg, #03A8B9 0%, #02818E 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px -3px rgba(3, 168, 185, 0.5), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.hx-full-order:hover:not([disabled]),
.ds-pill-order-btn:hover:not([disabled]) {
  background: linear-gradient(135deg, #04B9CC 0%, #02717D 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -3px rgba(3, 168, 185, 0.6), 0 4px 10px rgba(15, 23, 42, 0.12);
}
.hx-full-order:hover:not([disabled]) svg,
.ds-pill-order-btn:hover:not([disabled]) svg {
  transform: translateY(-1px) scale(1.15) rotate(-10deg);
}

/* Add to Cart: Rounded with Border */
.hx-full-cart,
.ds-pill-cart-btn {
  border-radius: 10px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #1E293B !important;
}
.hx-full-cart:hover,
.ds-pill-cart-btn:hover {
  border-color: #03A8B9 !important;
  color: #02818E !important;
  background: #F0FDFA !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 168, 185, 0.15);
}
.hx-full-cart:hover svg,
.ds-pill-cart-btn:hover svg {
  transform: rotate(90deg) scale(1.1);
}

/* Variable Products / Select Options Rounded */
.hx-full-cart.is-options {
  border-color: #E9D5FF !important;
  color: #7E22CE !important;
  background: #FAF5FF !important;
  border-radius: 10px !important;
}
.hx-full-cart.is-options:hover {
  background: #7E22CE !important;
  border-color: #7E22CE !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(126, 34, 206, 0.5);
}
.hx-full-cart.is-options:hover svg {
  transform: translateX(2px) scale(1.1);
}

/* Icon-only Buttons (Compact product rows) */
.hx-ico-btn {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 !important;
}
.hx-ico-btn svg { transition: transform 0.2s ease; }
.hx-ico-primary {
  background: linear-gradient(135deg, #03A8B9 0%, #02818E 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(3, 168, 185, 0.4);
}
.hx-ico-primary:hover:not([disabled]) {
  transform: scale(1.12) translateY(-1px);
  box-shadow: 0 6px 16px rgba(3, 168, 185, 0.55);
}
.hx-ico-primary:hover:not([disabled]) svg {
  transform: rotate(-10deg) scale(1.15);
}
.hx-ico-btn.hx-ico-options {
  border: 1px solid #E9D5FF !important;
  color: #7E22CE !important;
  background: #FAF5FF !important;
}
.hx-ico-btn.hx-ico-options:hover {
  background: #7E22CE !important;
  color: #FFFFFF !important;
  transform: scale(1.1);
}

/* The compact tooltip inherits the dark ink rather than the old foreground. */
.hx-full-actions.is-compact .hx-full-cart::after{background:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .hx-full-btn,.hx-full-btn svg,.hx-ico-btn,.hx-ico-btn svg,
  .hx-bs-card::after,.hx-bs-img img,.hx-bs-off{transition:none}
  .hx-full-order:hover:not([disabled]) svg,.hx-full-cart:hover svg,
  .hx-bs-card:hover .hx-bs-off{transform:none}
}

/* Two labelled pills do not fit the narrow feature column, and "Select options"
   was spilling past the card edge. Let the row wrap so the second button drops
   onto its own line instead of overflowing; the compact variant is excluded
   because its cart button is already a 38px square. */
.hx-full-actions{flex-wrap:wrap}
.hx-full-actions:not(.is-compact) .hx-full-btn{flex:1 1 138px}
.hx-full-btn span{overflow:hidden;text-overflow:ellipsis}

/* ===== Footer spacing on the home page =====
   Home sections carry top padding only, so the last one (trust strip or banner
   pair) ran straight into the footer's brand rule with no breathing room.
   Uses the same --section-gap the sections space themselves by, so the gap
   before the footer matches the rhythm of the page above it. */
body.home footer.site-footer{margin-top:var(--section-gap)}

/* ===== Product details popup ===== */
.so-modal-panel{border-radius:var(--r-2xl);overflow:hidden}
.sd-name{font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.015em}
.sd-price{color:var(--brand-deep);font-weight:700;font-size:clamp(22px,2.4vw,28px)}
.sd-price-old{color:var(--text-muted);font-weight:400}
.sd-stock{
  border-radius:var(--r-pill);padding:5px 12px;
  background:hsl(148 55% 94%);color:hsl(148 60% 24%);
  font-size:var(--fs-xs);font-weight:600;
}
.sd-stock.is-out{background:#FDECEA;color:#B3261E}

/* ===== Product Details Modal Polish ===== */
#soDetailsModal .so-modal-panel{
  max-width: 940px !important;
  border-radius: 26px !important;
  background: #FFFFFF !important;
  box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  overflow: hidden !important;
}

.sd-body[hidden],
.sd-back-face[hidden] {
  display: none !important;
}

.sd-body:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 0 !important;
  min-height: 480px !important;
}

.sd-media{
  padding: 24px !important;
  background: #F8FAFC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid #F1F5F9 !important;
  position: relative !important;
}
.sd-carousel{
  width: 100% !important;
  max-width: 380px !important;
}

.sd-info{
  padding: 28px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  overflow-y: auto !important;
  max-height: 85vh !important;
}
.sd-info-header{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sd-name{
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding-right: 28px !important;
}
.sd-price-row{
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
.sd-price{
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--primary, #03A8B9) !important;
}
.sd-price-old{
  font-size: 15px !important;
  color: #94A3B8 !important;
  text-decoration: line-through !important;
}
.sd-save-badge{
  background: #DCFCE7 !important;
  color: #166534 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
}
.sd-stock{
  background: #ECFDF5 !important;
  color: #059669 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
}

/* Description Card & Integrated Flip Button */
.sd-flip-row{
  margin-top: 2px !important;
}
.sd-flip-btn{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
  color: var(--primary, #03A8B9) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  width: 100% !important;
}
.sd-flip-btn:hover{
  background: var(--primary, #03A8B9) !important;
  color: #FFFFFF !important;
  border-color: var(--primary, #03A8B9) !important;
  border-style: solid !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(3, 168, 185, 0.28) !important;
}
.sd-flip-btn-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(3, 168, 185, 0.1) !important;
  color: var(--primary, #03A8B9) !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}
.sd-flip-btn:hover .sd-flip-btn-icon{
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}
.sd-flip-btn-text{
  flex: 1 !important;
  text-align: left !important;
}
.sd-flip-arrow-ico{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s ease !important;
}
.sd-flip-btn:hover .sd-flip-arrow-ico{
  transform: translateX(5px) !important;
}

/* Buy controls & actions */
.sd-qty{
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #F8FAFC !important;
}
.sd-qty button{
  background: transparent !important;
  color: #0F172A !important;
  transition: background 0.2s ease !important;
}
.sd-qty button:hover{
  background: #E2E8F0 !important;
}
.sd-actions .btn{
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.sd-order,
.sd-order-back{
  background: linear-gradient(135deg, #03A8B9 0%, #02818E 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(3, 168, 185, 0.3) !important;
}
.sd-order:hover,
.sd-order-back:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(3, 168, 185, 0.4) !important;
}
.sd-cart{
  border: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
}
.sd-cart:hover{
  border-color: var(--primary, #03A8B9) !important;
  color: var(--primary, #03A8B9) !important;
  background: rgba(3, 168, 185, 0.06) !important;
  transform: translateY(-2px) !important;
}
.sd-trust{
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 12px !important;
  margin: 10px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid #F1F5F9 !important;
}
.sd-trust li{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}
.sd-trust svg{
  color: #10B981 !important;
  flex-shrink: 0 !important;
}

/* ===== Back Face: Specifications & Full Details ===== */
.sd-back-face:not([hidden]){
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px !important;
  max-height: 85vh !important;
  background: #FFFFFF !important;
}
.sd-back-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  background: #FFFFFF !important;
  gap: 14px !important;
  position: relative !important;
}
.sd-back-trigger{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #F1F5F9 !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.sd-back-trigger:hover{
  background: var(--primary, #03A8B9) !important;
  color: #FFFFFF !important;
  border-color: var(--primary, #03A8B9) !important;
  transform: translateX(-2px) !important;
  box-shadow: 0 4px 12px rgba(3, 168, 185, 0.25) !important;
}
.sd-back-center-title{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}
.sd-back-name{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  max-width: 520px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.sd-back-price{
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--primary, #03A8B9) !important;
  margin-top: 2px !important;
}
.sd-back-thumb-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 38px !important;
  flex-shrink: 0 !important;
  margin-right: 36px !important;
}
.sd-back-thumb{
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

.sd-back-scroll{
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 28px !important;
  scrollbar-width: thin !important;
}
.sd-back-title-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--primary, #03A8B9) !important;
  background: rgba(3, 168, 185, 0.08) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
}
/* ===== Back Face: Specifications & Creative Layout ===== */
.sd-specs-intro{
  background: linear-gradient(135deg, rgba(3, 168, 185, 0.04) 0%, #F8FAFC 100%) !important;
  border: 1px solid rgba(3, 168, 185, 0.15) !important;
  border-left: 3.5px solid var(--primary, #03A8B9) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  margin-bottom: 18px !important;
}
.sd-specs-intro p{
  margin: 0 0 8px !important;
}
.sd-specs-intro p:last-child{
  margin-bottom: 0 !important;
}

.sd-specs-section{
  margin-bottom: 20px !important;
}
.sd-specs-heading{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.sd-specs-icon{
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: rgba(3, 168, 185, 0.12) !important;
  color: var(--primary, #03A8B9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sd-specs-heading h4{
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #0F172A !important;
  margin: 0 !important;
}

/* Bento Features Grid */
.sd-features-bento{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.sd-feature-card{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}
.sd-feature-card:hover{
  border-color: rgba(3, 168, 185, 0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(3, 168, 185, 0.08) !important;
}
.sd-feature-dot{
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.sd-feature-text{
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.45 !important;
}

/* Specifications Matrix */
.sd-spec-matrix{
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}
.sd-spec-row{
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  border-bottom: 1px solid #F1F5F9 !important;
}
.sd-spec-row:last-child{
  border-bottom: none !important;
}
.sd-spec-label{
  background: #F8FAFC !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748B !important;
  border-right: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
}
.sd-spec-val{
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.sd-spec-pill{
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: #F1F5F9 !important;
  color: #0F172A !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Specs Tables */
.sd-full-desc table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 12px 0 16px !important;
  font-size: 12.5px !important;
}
.sd-full-desc th{
  background: #F1F5F9 !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  padding: 8px 12px !important;
  text-align: left !important;
}
.sd-full-desc td{
  padding: 8px 12px !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}
.sd-full-desc tr:nth-child(even) td{
  background: #F8FAFC !important;
}

@media (max-width: 600px){
  .sd-features-bento{
    grid-template-columns: 1fr !important;
  }
  .sd-spec-row{
    grid-template-columns: 1fr !important;
  }
  .sd-spec-label{
    border-right: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 7px 12px !important;
  }
  .sd-spec-val{
    padding: 8px 12px !important;
  }
}

.sd-back-sticky{
  padding: 16px 24px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #F1F5F9 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px){
  .sd-body{
    grid-template-columns: 1fr !important;
  }
  .sd-media{
    border-right: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 16px !important;
  }
  .sd-info{
    padding: 20px 18px !important;
  }
  .sd-back-head{
    padding: 14px 16px !important;
  }
  .sd-back-scroll{
    padding: 18px 16px !important;
  }
  .sd-back-name{
    max-width: 160px !important;
  }
}

/* ===== Single product page ===== */
.product-summary .price,.sp-price{color:var(--brand-deep)}
.product-summary h1,.product-summary .product_title{
  font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.product-gallery img{border-radius:var(--r-lg)}
.sp-trust-item svg{color:var(--brand-deep)}
.sp-badge{border-radius:var(--r-pill);background:var(--dot-yellow);color:#424242;font-weight:600}
.sp-badge-out{background:#FDECEA;color:#B3261E}
.product-summary .button,
.product-summary button.single_add_to_cart_button{
  border-radius:var(--r-pill);font-weight:600;
  transition:background var(--t-instant) var(--ease),transform var(--t-instant) var(--ease);
}
.product-summary button.single_add_to_cart_button:hover{transform:translateY(-2px)}

/* The gallery column is driven by the artwork's own ratio, so a tall image left
   the summary column with a long empty tail beside it. Cap the frame and let
   the image sit inside it. */
@media (min-width:900px){
  /* Cap the main image only. Capping .product-gallery itself clipped the
     thumbnail strip out of the box, and it spilled over the description
     below — the container has to stay free to grow around its children. */
  .product-gallery .flex-viewport,
  .product-gallery .woocommerce-product-gallery__wrapper{max-height:520px}
  .product-gallery .woocommerce-product-gallery__image img{
    max-height:500px;width:auto;margin-inline:auto;object-fit:contain;
  }
}

/* ===== Home reviews =====
   Same card component as the product page, laid out as a scroll-snapped row.
   Cards carrying a customer photo lead the list, so the row opens on its
   strongest content. */
.hx-reviews .sr-wrap{margin-top:26px}
.sr-home .sr-track{gap:18px}
.sr-home .sr-card{
  flex:0 0 clamp(260px,26vw,330px);
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.sr-home .sr-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-tint-2);
}
.sr-photo{
  margin:-20px -20px 4px;border-radius:var(--r-md) var(--r-md) 0 0;
  overflow:hidden;background:var(--muted);aspect-ratio:4/3;
}
.sr-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-normal) var(--ease)}
.sr-home .sr-card:hover .sr-photo img{transform:scale(1.05)}
.sr-home .sr-stars{color:var(--dot-yellow);font-size:var(--fs-lg);letter-spacing:.06em}
.sr-home .sr-text{
  margin:0;color:var(--text);font-size:var(--fs-md);line-height:1.6;
  /* Long reviews clamp so every card in the row stays the same height. */
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.sr-home .sr-meta{display:flex;justify-content:space-between;gap:10px;margin-top:auto}
.sr-home .sr-name{font-weight:600;color:var(--ink);font-size:var(--fs-md)}
.sr-home .sr-date{color:var(--text-muted);font-size:var(--fs-sm)}
.sr-product{
  display:inline-block;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand-deep);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-product:hover{color:var(--brand-deeper);text-decoration:underline;text-underline-offset:3px}

/* Every card in the row is the same height, so one without a photo was mostly
   dead space. A large quote glyph fills it deliberately instead. */
.sr-home .sr-card:not(.has-photo)::before{
  content:"\201C";
  font-size:76px;line-height:.7;color:var(--brand-tint-2);
  font-family:Georgia,'Times New Roman',serif;
}

.sr-home .sr-arrow{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--card);color:var(--ink);
  cursor:pointer;transition:background var(--t-instant) var(--ease),color var(--t-instant) var(--ease),border-color var(--t-instant) var(--ease);
}
.sr-home .sr-arrow:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}

@media (max-width:640px){
  .sr-home .sr-card{flex-basis:82%;padding:16px}
  .sr-photo{margin:-16px -16px 2px}
}

/* ===== Home reviews =====
   Same card component as the product page, laid out as a scroll-snapped row.
   Cards carrying a customer photo lead the list, so the row opens on its
   strongest content. */
.hx-reviews .sr-wrap{margin-top:22px;position:relative}

/* Headline rating, so the section states its case before anyone reads a card. */
.hx-rv-summary{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;margin-top:14px;
}
.hx-rv-avg{
  font-size:clamp(28px,3vw,38px);font-weight:700;color:var(--ink);
  line-height:1;letter-spacing:-.02em;
}
.hx-rv-sum-stars{color:var(--dot-yellow);font-size:var(--fs-4xl);letter-spacing:.08em;line-height:1}
.hx-rv-sum-count{color:var(--text-muted);font-size:var(--fs-md)}

.sr-home .sr-track{gap:18px}
.sr-home .sr-card{
  flex:0 0 clamp(260px,26vw,330px);
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.sr-home .sr-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-tint-2);
}

/* Photo is a button, so it needs the button chrome reset. */
.sr-photo{
  position:relative;display:block;width:auto;
  margin:-20px -20px 4px;padding:0;border:0;cursor:zoom-in;
  border-radius:var(--r-md) var(--r-md) 0 0;
  overflow:hidden;background:var(--muted);aspect-ratio:4/3;
}
.sr-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-normal) var(--ease)}
.sr-home .sr-card:hover .sr-photo img{transform:scale(1.05)}
.sr-photo-zoom{
  position:absolute;right:10px;bottom:10px;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 4px 10px rgba(15,43,51,.2);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-instant) var(--ease),transform var(--t-instant) var(--ease);
}
.sr-photo:hover .sr-photo-zoom,
.sr-photo:focus-visible .sr-photo-zoom{opacity:1;transform:none}

.sr-home .sr-stars{color:var(--dot-yellow);font-size:var(--fs-lg);letter-spacing:.06em}
.sr-home .sr-text{
  margin:0;color:var(--text);font-size:var(--fs-md);line-height:1.6;
  /* Long reviews clamp so every card in the row stays the same height. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* Every card in the row is the same height, so one without a photo was mostly
   dead space. A large quote glyph fills it deliberately instead. */
.sr-home .sr-card:not(.has-photo)::before{
  content:"\201C";
  font-size:76px;line-height:.7;color:var(--brand-tint-2);
  font-family:Georgia,'Times New Roman',serif;
}

.sr-home .sr-meta{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
}
.sr-avatar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deeper);
  font-weight:700;font-size:var(--fs-md);
}
.sr-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.sr-home .sr-name{
  font-weight:600;color:var(--ink);font-size:var(--fs-md);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-home .sr-date{color:var(--text-muted);font-size:var(--fs-xs)}
.sr-verified{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:hsl(148 55% 94%);color:hsl(148 60% 24%);
  font-size:var(--fs-xs);font-weight:600;
}
.sr-product{
  display:inline-block;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand-deep);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-product:hover{color:var(--brand-deeper);text-decoration:underline;text-underline-offset:3px}

.sr-home .sr-arrow{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--card);color:var(--ink);
  cursor:pointer;transition:background var(--t-instant) var(--ease),color var(--t-instant) var(--ease),border-color var(--t-instant) var(--ease);
}
.sr-home .sr-arrow:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}

/* ===== Photo lightbox ===== */
.sr-lightbox{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(15,43,51,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.sr-lightbox[hidden]{display:none}
.sr-lightbox img{
  max-width:min(880px,92vw);max-height:86vh;
  border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.45);
  background:var(--card);
}
.sr-lightbox-close{
  position:absolute;top:18px;right:18px;
  width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:26px;line-height:1;cursor:pointer;
  transition:background var(--t-instant) var(--ease),transform var(--t-instant) var(--ease);
}
.sr-lightbox-close:hover{background:#fff;transform:scale(1.06)}

@media (max-width:640px){
  .sr-home .sr-card{flex-basis:82%;padding:16px}
  .sr-photo{margin:-16px -16px 2px}
  .hx-rv-avg{font-size:30px}
}

/* ===== Product videos =====
   Click-to-play facades. The thumbnail is a button until it is pressed, then
   the iframe replaces its contents — so the button chrome has to be reset and
   the frame absolutely filled into the same box. */
/* A direct child of .single-product-layout, which is a two-column grid — so
   without this the section is trapped in the left column at half width. */
.sp-videos{grid-column:1/-1;margin-top:26px;padding-top:26px;border-top:1px solid var(--border)}
.sp-videos h3{
  margin:0 0 16px;font-size:var(--fs-3xl);font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.sp-videos h3::before{
  content:"";width:20px;height:20px;flex:0 0 auto;
  background:var(--brand-deep);
  -webkit-mask:var(--play-mask) center/contain no-repeat;
          mask:var(--play-mask) center/contain no-repeat;
}
:root{--play-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 6 7 4-7 4z'/%3E%3C/svg%3E")}

.sp-video-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
}
/* A lone video would stretch the full content width and tower over the copy. */
.sp-videos.is-single .sp-video-grid{grid-template-columns:minmax(0,560px)}

.sp-video{
  position:relative;display:block;width:100%;padding:0;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--muted);overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.sp-video:hover:not(.is-playing){
  transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-tint-2);
}
/* hqdefault is 4:3 with letterbox bars baked in; cover crops them back off. */
.sp-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-normal) var(--ease)}
.sp-video:hover:not(.is-playing) img{transform:scale(1.04)}

.sp-video-play{
  position:absolute;inset:0;margin:auto;
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,129,142,.92);color:#fff;
  box-shadow:0 8px 22px rgba(15,43,51,.34);
  padding-left:4px;   /* optical centring — the glyph's mass sits left */
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.sp-video:hover:not(.is-playing) .sp-video-play{transform:scale(1.1);background:var(--brand-deeper)}

.sp-video.is-playing{cursor:default;border-color:var(--border-strong)}
.sp-video.is-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:560px){
  .sp-video-grid{grid-template-columns:1fr}
  .sp-video-play{width:54px;height:54px}
}

/* ===== Product catalogue =====
   Cards, result count and empty state, all on the shared token scale. The
   base rules live in main.css; everything here is the design-system layer. */

.shop-count{
  margin:0 0 var(--sp-7);
  color:var(--text-muted);font-size:var(--fs-md);
}
.shop-count strong{color:var(--ink);font-weight:600}

/* ----- Card ----- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12), 0 0 1px 1px rgba(3, 168, 185, 0.15);
  border-color: #BAE6FD;
}
.product-card:focus-within {
  border-color: var(--brand-deep);
  box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12);
}

/* Thumbnail Wrap */
.product-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F8FAFC;
  overflow: hidden;
  border-bottom: 1px solid #F1F5F9;
}
.product-thumb-wrap .thumb {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 12px;
  cursor: pointer;
  background: transparent;
}
.product-thumb-wrap .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.product-thumb-wrap .ds-thumb-hover {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  opacity: 0;
  pointer-events: none;
}
.product-card:hover .ds-thumb-main {
  transform: scale(1.06);
}
.product-thumb-wrap.has-secondary-img:hover .ds-thumb-main {
  opacity: 0;
}
.product-thumb-wrap.has-secondary-img:hover .ds-thumb-hover {
  opacity: 1;
  transform: scale(1.06);
}

/* Floating Badges */
.ds-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.ds-badge-sale {
  background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
  letter-spacing: 0.02em;
}
.product-card .badge.out {
  background: #0F172A !important;
  color: #FFFFFF !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Wishlist Button */
.ds-card-wishlist-btn,
.ds-wishlist-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  color: #64748B;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}
.ds-card-wishlist-btn:hover,
.ds-wishlist-toggle-btn:hover {
  background: #FFFFFF;
  color: #EF4444;
  transform: scale(1.12);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
}
.ds-card-wishlist-btn.is-active,
.ds-wishlist-toggle-btn.is-active {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #EF4444;
}
.ds-card-wishlist-btn.is-active svg,
.ds-wishlist-toggle-btn.is-active svg {
  fill: #EF4444;
  stroke: #EF4444;
}
.ds-heart-pop {
  animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Header Live Wishlist Badge */
.ds-hdr-wishlist-count.is-empty {
  display: none;
}

/* Category & Title */
.product-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ds-card-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-deep);
  margin-bottom: 2px;
  display: block;
}
.product-info h3,
.product-title {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.4;
  min-height: 2.8em;
  margin: 0;
}
.product-info h3 .link-like,
.product-title .link-like {
  color: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}
.product-card:hover .product-info h3 .link-like,
.product-card:hover .product-title .link-like {
  color: var(--brand-deep);
}

/* Rating Stars */
.pc-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.pc-stars {
  color: #F59E0B;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.pc-rating-count {
  color: #94A3B8;
  font-size: 11.5px;
}

/* Pricing Row */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
  padding-bottom: 8px;
}
.product-card .price {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
}
.product-card .price-old {
  font-size: 13px;
  color: #94A3B8;
  text-decoration: line-through;
}
.price-save {
  padding: 2px 8px;
  border-radius: 20px;
  background: #ECFDF5;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #A7F3D0;
}

/* ----- Empty state ----- */
.shop-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:56px 24px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
}
.shop-empty-ico{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deep);
  margin-bottom:4px;
}
.shop-empty h3{margin:0;font-size:var(--fs-4xl);font-weight:600;color:var(--ink)}
.shop-empty p{margin:0;max-width:44ch;color:var(--text-muted);font-size:var(--fs-md);line-height:1.6}
.shop-empty .hx-btn{margin-top:8px}

/* ----- Pagination ----- */
.woocommerce-pagination ul.page-numbers{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  margin:28px 0 0;padding:0;list-style:none;border:0;
}
.woocommerce-pagination ul.page-numbers li{border:0;margin:0}
.woocommerce-pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;   /* 44px keeps the touch target legal */
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);
  font-size:var(--fs-md);font-weight:500;text-decoration:none;
  transition:background var(--t-instant) var(--ease),color var(--t-instant) var(--ease),border-color var(--t-instant) var(--ease);
}
.woocommerce-pagination a.page-numbers:hover{
  background:var(--brand-tint);border-color:var(--brand);color:var(--brand-deeper);
}
.woocommerce-pagination .page-numbers.current{
  background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;font-weight:600;
}
.woocommerce-pagination .page-numbers.dots{border-color:transparent;background:transparent}

@media (max-width:640px){
  .product-info{padding:11px}
  .product-info h3{font-size:var(--fs-sm);min-height:2.9em}
  .product-card .price{font-size:var(--fs-lg)}
  .price-save{display:none}   /* the strikethrough already carries the message */

  /* Two cards per row leaves the action bar about 148px wide. The bag icon
     costs ~23px of that and "Order Now" was being clipped to "Order N…", so
     the icon steps aside and the label — which is the actual instruction —
     stays whole. */
  .hx-full-actions.is-compact .hx-full-order svg{display:none}
  .hx-full-actions.is-compact .hx-full-order{padding:0 8px;font-size:var(--fs-sm)}

  /* WCAG 2.2 target size: both controls were 38px. */
  .hx-full-actions.is-compact .hx-full-order,
  .hx-full-actions.is-compact .hx-full-cart{height:44px}
  .hx-full-actions.is-compact .hx-full-cart{flex-basis:44px;width:44px}
}

/* Videos on the popup's back face. The facade itself is styled by the
   .sp-video rules above; this is just the block that holds them, sized for a
   scrolling panel rather than a full-width page section. */
.sd-videos{margin-top:18px}
.sd-videos[hidden]{display:none}
.sd-videos h3{
  margin:0 0 10px;font-size:var(--fs-lg);font-weight:600;color:var(--ink);
}
.sd-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sd-videos .sp-video{border-radius:var(--r-sm)}
.sd-videos .sp-video-play{width:46px;height:46px}
.sd-videos .sp-video-play svg{width:20px;height:20px}

/* ===== Event & News Page + Standard Page Design ===== */

.ev-page-wrap{
  padding-bottom: 60px;
  background: var(--background);
}

/* Breadcrumbs */
.ev-breadcrumbs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 14px;
}
.ev-breadcrumbs a{
  color: var(--brand-deep);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-instant) var(--ease);
}
.ev-breadcrumbs a:hover{
  color: var(--brand-deeper);
  text-decoration: underline;
}
.ev-sep{
  color: var(--border-strong);
  font-weight: 600;
}
.ev-current{
  color: var(--ink);
  font-weight: 500;
}

/* Hero Header */
.ev-hero{
  background: linear-gradient(135deg, #02818E 0%, #03A8B9 60%, #0093A2 100%);
  color: #fff;
  padding: 44px 0 54px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(3,168,185,.18);
}
.ev-hero::before{
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ev-hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.ev-hero .ev-breadcrumbs{
  justify-content: center;
  color: rgba(255,255,255,.8);
}
.ev-hero .ev-breadcrumbs a{
  color: #fff;
}
.ev-hero .ev-current{
  color: #fff;
}
.ev-hero .ev-sep{
  color: rgba(255,255,255,.6);
}
.ev-hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.25);
}
.ev-badge-dot{
  width: 8px;
  height: 8px;
  background: var(--dot-yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--dot-yellow);
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.3); opacity: .7; }
}
.ev-hero-title{
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 12px;
}
.ev-hero-subtitle{
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(255,255,255,.92);
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 680px;
}
.ev-quick-nav{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ev-nav-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--brand-deeper);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform var(--t-instant) var(--ease), box-shadow var(--t-instant) var(--ease), background var(--t-instant) var(--ease);
}
.ev-nav-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  background: var(--yellow-tint);
  color: var(--ink);
}

/* Sections General */
.ev-section{
  padding: 48px 0;
}
.ev-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 14px;
}
.ev-sub-tag{
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.ev-section-title{
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.ev-head-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-tint);
  color: var(--brand-deeper);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ev-counter{
  background: var(--brand-deep);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
}

/* Section 1: Masonry Grid Gallery */
.ev-masonry-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.ev-card{
  margin: 0;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ev-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}
.ev-img-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--muted);
}
.ev-card-2 .ev-img-wrap{ aspect-ratio: 1/1; }
.ev-card-4 .ev-img-wrap{ aspect-ratio: 16/11; }
.ev-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.ev-card:hover .ev-img-wrap img{
  transform: scale(1.08);
}
.ev-card-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,43,51,.85) 0%, rgba(15,43,51,.2) 50%, rgba(15,43,51,0) 100%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  transition: opacity var(--t-fast) var(--ease);
}
.ev-card:hover .ev-card-overlay{
  opacity: 1;
}
.ev-zoom-btn{
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transform: scale(.8);
  transition: transform var(--t-instant) var(--ease), background var(--t-instant) var(--ease);
}
.ev-card:hover .ev-zoom-btn{
  transform: scale(1);
}
.ev-zoom-btn:hover{
  background: #fff;
  color: var(--brand-deep);
}
.ev-caption{
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.ev-empty-box{
  background: var(--card);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Section 2: Video Card */
.ev-video-card{
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  position: relative;
}
.ev-video-header{
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.ev-video-title{
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 10px;
}
.ev-video-desc{
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.6;
}
.ev-video-frame-wrap{
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15,43,51,.15);
  border: 4px solid #fff;
  background: #000;
}
.ev-video-responsive{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.ev-video-responsive iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Section 3: CTA Banner */
.ev-cta-card{
  background: linear-gradient(135deg, var(--brand-deep) 0%, #0F2B33 100%);
  border-radius: var(--r-xl);
  padding: 44px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(15,43,51,.18);
}
.ev-cta-content{
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.ev-cta-badge{
  display: inline-block;
  background: rgba(251,187,7,.25);
  color: var(--dot-yellow);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ev-cta-title{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}
.ev-cta-desc{
  font-size: var(--fs-md);
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  margin-bottom: 24px;
}
.ev-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ev-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-instant) var(--ease), box-shadow var(--t-instant) var(--ease);
}
.ev-btn-primary{
  background: var(--dot-yellow);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(250,187,7,.4);
}
.ev-btn-primary:hover{
  background: #ffc424;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(250,187,7,.5);
}
.ev-btn-secondary{
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}
.ev-btn-secondary:hover{
  background: rgba(255,255,255,.25);
  transform: translateY(-2px);
}
.ev-cta-decor .ev-bubble{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ev-bubble-1{
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(3,168,185,.3) 0%, rgba(3,168,185,0) 70%);
  right: -50px;
  top: -50px;
}
.ev-bubble-2{
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251,172,182,.25) 0%, rgba(251,172,182,0) 70%);
  right: 180px;
  bottom: -40px;
}

/* Section 4: News Grid */
.ev-news-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.ev-news-card{
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ev-news-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.ev-news-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--muted);
  display: block;
}
.ev-news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.ev-news-card:hover .ev-news-thumb img{
  transform: scale(1.06);
}
.ev-news-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ev-news-meta{
  margin-bottom: 8px;
}
.ev-news-date{
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}
.ev-news-heading{
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.35;
}
.ev-news-heading a{
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-instant) var(--ease);
}
.ev-news-heading a:hover{
  color: var(--brand-deep);
}
.ev-news-excerpt{
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 18px;
  flex-grow: 1;
}
.ev-news-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  transition: gap var(--t-instant) var(--ease), color var(--t-instant) var(--ease);
}
.ev-news-link:hover{
  color: var(--brand-deeper);
  gap: 10px;
}
.ev-news-fallback{
  background: var(--card);
  border-radius: var(--r-md);
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Lightbox Modal */
.ev-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ev-lightbox[hidden]{
  display: none;
}
.ev-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,43,51,.88);
  backdrop-filter: blur(6px);
}
.ev-lightbox-box{
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ev-lightbox-close{
  position: absolute;
  top: -46px;
  right: 0;
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-instant) var(--ease);
}
.ev-lightbox-close:hover{
  background: rgba(255,255,255,.4);
}
.ev-lightbox-img-wrap{
  max-width: 100%;
  max-height: 80vh;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.ev-lightbox-img-wrap img{
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}
.ev-lightbox-caption{
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 500;
  margin-top: 12px;
  text-align: center;
  max-width: 600px;
}

/* ===== Standard Page & Post Styling ===== */
.page-standard-wrap{
  padding-bottom: 60px;
  background: var(--background);
}
.page-standard-hero{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  margin-bottom: 32px;
}
.page-standard-title{
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 0;
}
.page-standard-main{
  max-width: 960px;
  margin: 0 auto;
}
.page-standard-card{
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.page-standard-featured{
  margin-bottom: 24px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.page-standard-featured img{
  width: 100%;
  height: auto;
  display: block;
}
.single-post-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.single-date{
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.single-cat-badge{
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* ===== Universal .entry-content Gutenberg Formatting ===== */
.entry-content{
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
}
.entry-content > * + *{
  margin-top: 18px;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4{
  color: var(--ink);
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 12px;
  line-height: 1.3;
}
.entry-content h1{ font-size: clamp(24px, 2.5vw, 32px); }
.entry-content h2{ font-size: clamp(20px, 2.2vw, 26px); border-bottom: 2px solid var(--border); padding-bottom: 8px; }
.entry-content h3{ font-size: clamp(18px, 1.8vw, 22px); }
.entry-content h4{ font-size: var(--fs-xl); }

.entry-content p{
  margin: 0 0 16px;
  line-height: 1.7;
}
.entry-content a{
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-instant) var(--ease);
}
.entry-content a:hover{
  color: var(--brand-deeper);
}
.entry-content ul, .entry-content ol{
  padding-left: 24px;
  margin-bottom: 18px;
}
.entry-content li{
  margin-bottom: 6px;
  line-height: 1.6;
}
.entry-content blockquote{
  margin: 24px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  color: var(--ink);
}
.entry-content blockquote p{
  margin: 0;
}
.entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.entry-content figure{
  margin: 20px 0;
}
.entry-content figcaption{
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}

/* WP Blocks formatting */
.entry-content .wp-block-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.entry-content .wp-block-gallery .wp-block-image{
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.entry-content .wp-block-button__link{
  background: var(--brand-deep);
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  display: inline-block;
  transition: background var(--t-instant) var(--ease), transform var(--t-instant) var(--ease);
}
.entry-content .wp-block-button__link:hover{
  background: var(--brand-deeper);
  transform: translateY(-2px);
}
.entry-content .wp-block-embed,
.entry-content .wp-block-embed-youtube{
  margin: 28px 0;
}
.entry-content .wp-block-embed__wrapper{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.entry-content .wp-block-embed__wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.entry-content .wp-block-columns{
  display: flex;
  gap: 24px;
  margin: 24px 0;
}
@media (max-width: 768px){
  .entry-content .wp-block-columns{
    flex-direction: column;
  }
}
.entry-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.entry-content th, .entry-content td{
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
}
.entry-content th{
  background: var(--muted);
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 640px){
  .ev-section{ padding: 32px 0; }
  .ev-video-card{ padding: 24px 16px; }
  .ev-cta-card{ padding: 32px 20px; }
  .page-standard-card{ padding: 24px 16px; }
}

/* ===== Article / Blog Archive & Category Styling ===== */
.art-page-wrap{
  padding-bottom: 60px;
  background: var(--background);
}
.art-main-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 16px 60px;
}

/* Category Filter Navigation Pills */
.art-filter-nav{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.art-filter-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-instant) var(--ease);
}
.art-filter-pill:hover{
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
  transform: translateY(-1px);
}
.art-filter-pill.is-active{
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(2,129,142,.25);
}
.art-cat-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,43,51,.08);
  color: inherit;
  font-size: var(--fs-xs);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}
.art-filter-pill.is-active .art-cat-count{
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* Article Cards Grid */
.art-posts-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.art-card{
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.art-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}
.art-card-thumb-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--muted);
}
.art-card-thumb{
  display: block;
  width: 100%;
  height: 100%;
}
.art-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.art-card:hover .art-card-thumb img{
  transform: scale(1.08);
}
.art-thumb-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--yellow-tint) 100%);
  color: var(--brand-deep);
}
.art-card-cat-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  color: var(--brand-deeper);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background var(--t-instant) var(--ease), color var(--t-instant) var(--ease);
}
.art-card-cat-badge:hover{
  background: var(--brand-deep);
  color: #fff;
}
.art-card-body{
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.art-card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.art-meta-dot{
  color: var(--border-strong);
}
.art-card-title{
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.35;
}
.art-card-title a{
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-instant) var(--ease);
}
.art-card-title a:hover{
  color: var(--brand-deep);
}
.art-card-excerpt{
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}
.art-card-footer{
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: auto;
}
.art-read-more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  transition: gap var(--t-instant) var(--ease), color var(--t-instant) var(--ease);
}
.art-read-more:hover{
  color: var(--brand-deeper);
  gap: 10px;
}

/* Pagination */
.art-pagination{
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* Empty State */
.art-empty-state{
  background: var(--card);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-xl);
  padding: 60px 24px;
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
}
.art-empty-icon{
  color: var(--brand-deep);
  margin-bottom: 16px;
}
.art-empty-state h3{
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.art-empty-state p{
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin: 0;
}

/* ===== About Us Page Styling ===== */
.ab-page-wrap{
  padding-bottom: 60px;
  background: var(--background);
}
.ab-section{
  padding: 56px 0;
}

/* Story Section */
.ab-story-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.ab-story-title{
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 16px;
  line-height: 1.25;
}
.ab-story-lead{
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--brand-deep);
  line-height: 1.6;
  margin-bottom: 16px;
}
.ab-story-text{
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 24px;
}
.ab-feature-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ab-feature-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ab-feature-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ab-feature-item h4{
  margin: 0 0 4px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.ab-feature-item p{
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Promise Highlight Box */
.ab-story-card{
  position: relative;
}
.ab-highlight-box{
  background: linear-gradient(135deg, #0F2B33 0%, #026D78 100%);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.ab-highlight-box::after{
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(3,168,185,.35) 0%, rgba(3,168,185,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ab-brand-mark{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.ab-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.ab-dot-teal{ background: var(--brand); }
.ab-dot-pink{ background: var(--dot-pink); }
.ab-dot-yellow{ background: var(--dot-yellow); }
.ab-dot-purple{ background: var(--dot-purple); }

.ab-card-heading{
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.ab-card-text{
  font-size: var(--fs-md);
  color: rgba(255,255,255,.9);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 32px;
}
.ab-stats-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 24px;
}
.ab-stat{
  text-align: center;
}
.ab-stat-num{
  display: block;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--dot-yellow);
}
.ab-stat-label{
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Values Grid */
.ab-values-section{
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ab-section-head-center{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.ab-section-sub{
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-top: 8px;
}
.ab-values-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.ab-val-card{
  background: var(--background);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  border: 1px solid var(--border);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ab-val-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
  background: #fff;
}
.ab-val-icon{
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ab-val-icon-1{ background: var(--brand-tint); color: var(--brand-deep); }
.ab-val-icon-2{ background: var(--yellow-tint); color: #d97706; }
.ab-val-icon-3{ background: var(--pink-tint); color: #db2777; }
.ab-val-icon-4{ background: var(--purple-tint); color: var(--purple-deep); }

.ab-val-title{
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.ab-val-text{
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* Safety Banner */
.ab-safety-card{
  background: linear-gradient(135deg, var(--brand-deep) 0%, #03A8B9 100%);
  border-radius: var(--r-xl);
  padding: 44px 36px;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 30px rgba(3,168,185,.2);
}
.ab-safety-title{
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #fff;
  margin: 6px 0 12px;
}
.ab-safety-desc{
  font-size: var(--fs-md);
  color: rgba(255,255,255,.9);
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.ab-badge-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ab-pill-badge{
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}

/* Editor Section */
.ab-editor-card{
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin: 20px 0;
}

@media (max-width: 860px){
  .ab-story-grid{ grid-template-columns: 1fr; gap: 32px; }
  .ab-section{ padding: 36px 0; }
  .ab-highlight-box{ padding: 28px 20px; }
}

/* ===== Contact Us Page Styling ===== */
.cnt-page-wrap{
  padding-bottom: 60px;
  background: var(--background);
}

/* Channels Section */
.cnt-channels-section{
  padding: 48px 0 24px;
}
.cnt-channels-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.cnt-channel-card{
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cnt-channel-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.cnt-channel-icon{
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cnt-icon-phone{ background: var(--brand-tint); color: var(--brand-deep); }
.cnt-icon-wa{ background: #E7F9EE; color: #1EBE5D; }
.cnt-icon-mail{ background: var(--yellow-tint); color: #d97706; }
.cnt-icon-pin{ background: var(--pink-tint); color: #db2777; }

.cnt-channel-tag{
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.cnt-channel-val{
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.cnt-channel-sub{
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Main Form & Sidebar Section */
.cnt-main-section{
  padding: 32px 0 48px;
}
.cnt-layout-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
}
.cnt-form-card{
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.cnt-card-header{
  margin-bottom: 28px;
}
.cnt-card-title{
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 10px;
}
.cnt-card-desc{
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Alerts */
.cnt-alert{
  padding: 16px 20px;
  border-radius: var(--r-md);
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cnt-alert-success{
  background: #E8F8EE;
  border: 1px solid #A3E6BA;
  color: #14532D;
}
.cnt-alert-success h4{ margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; }
.cnt-alert-success p{ margin: 0; font-size: var(--fs-sm); }
.cnt-alert-icon{ color: #16A34A; flex-shrink: 0; }
.cnt-alert-error{
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.cnt-alert-error p{ margin: 0; font-size: var(--fs-sm); }

/* Form Fields & Contact Form 7 Modern Design */
.cnt-form,
.cnt-cf7-wrapper .wpcf7-form{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cnt-cf7-grid,
.cnt-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cnt-form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cnt-form-group label,
.cnt-cf7-wrapper label{
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 2px;
}
.cnt-req{ color: #E11D48; font-weight: 700; }

.cnt-form-group input,
.cnt-form-group select,
.cnt-form-group textarea,
.cnt-cf7-wrapper input[type="text"],
.cnt-cf7-wrapper input[type="email"],
.cnt-cf7-wrapper input[type="tel"],
.cnt-cf7-wrapper select,
.cnt-cf7-wrapper textarea{
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.cnt-form-group textarea,
.cnt-cf7-wrapper textarea{
  min-height: 130px;
  resize: vertical;
}
.cnt-form-group input:focus,
.cnt-form-group select:focus,
.cnt-form-group textarea:focus,
.cnt-cf7-wrapper input[type="text"]:focus,
.cnt-cf7-wrapper input[type="email"]:focus,
.cnt-cf7-wrapper input[type="tel"]:focus,
.cnt-cf7-wrapper select:focus,
.cnt-cf7-wrapper textarea:focus{
  outline: none !important;
  border-color: var(--primary, #03A8B9) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(3, 168, 185, 0.15) !important;
}

.cnt-submit-row,
.cnt-form-submit-wrap{
  margin-top: 6px;
}
.cnt-submit-btn,
.cnt-submit-row input[type="submit"],
.cnt-cf7-wrapper input[type="submit"]{
  background: linear-gradient(135deg, #03A8B9 0%, #02818E 100%) !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 34px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(3, 168, 185, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 170px;
  width: auto;
}
.cnt-submit-btn:hover,
.cnt-submit-row input[type="submit"]:hover,
.cnt-cf7-wrapper input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(3, 168, 185, 0.38) !important;
}

/* Contact Form 7 Feedback Notifications */
.wpcf7-response-output{
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 18px 0 0 !important;
  border: 1px solid transparent !important;
}
.wpcf7-mail-sent-ok{
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}
.wpcf7-validation-errors,
.wpcf7-acceptance-missing{
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}
.wpcf7-not-valid-tip{
  font-size: 12px !important;
  color: #DC2626 !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* Sidebar & Distributor Card */
.cnt-sidebar{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cnt-side-card{
  background: var(--card);
  border-radius: 18px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.cnt-distributor-card{
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.cnt-distributor-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ECFDF5;
  color: #059669;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 12px;
}
.cnt-distributor-title{
  font-size: 16.5px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 6px;
}
.cnt-distributor-sub{
  font-size: 13px;
  color: #64748B;
  line-height: 1.5;
  margin: 0 0 16px;
}
.cnt-distributor-items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cnt-dist-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.45;
}
.cnt-dist-item a{
  color: var(--primary, #03A8B9);
  text-decoration: none;
  font-weight: 600;
}
.cnt-dist-item a:hover{
  text-decoration: underline;
}
.cnt-dist-ico{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--primary, #03A8B9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.cnt-side-title{
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.cnt-side-text{
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.cnt-track-card{
  background: linear-gradient(135deg, var(--brand-tint) 0%, #fff 100%);
  border-color: var(--brand);
}
.cnt-side-icon{
  color: var(--brand-deep);
  margin-bottom: 12px;
}
.cnt-side-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  transition: gap var(--t-instant) var(--ease);
}
.cnt-side-link:hover{
  gap: 10px;
  color: var(--brand-deeper);
}

/* FAQ Details */
.cnt-faq-item{
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.cnt-faq-item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.cnt-faq-q{
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  list-style: none;
}
.cnt-faq-q::-webkit-details-marker{ display: none; }
.cnt-faq-caret{
  color: var(--text-muted);
  transition: transform var(--t-instant) var(--ease);
}
.cnt-faq-item[open] .cnt-faq-caret{
  transform: rotate(180deg);
}
.cnt-faq-a{
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text);
  line-height: 1.6;
}
.cnt-faq-a p{ margin: 0; }

/* Social Grid */
.cnt-social-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cnt-social-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--t-instant) var(--ease);
}
.cnt-social-btn:hover{
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
  transform: translateY(-2px);
}

/* Map Section */
.cnt-map-section{
  padding: 16px 0 48px;
}
.cnt-map-card{
  background: var(--card);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.cnt-map-header{
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.cnt-map-title{
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0;
}
.cnt-map-addr{
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.cnt-map-frame-wrap{
  width: 100%;
  height: 380px;
  background: var(--muted);
}
.cnt-map-frame-wrap iframe{
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 860px){
  .cnt-layout-grid{ grid-template-columns: 1fr; }
  .cnt-form-row,
  .cnt-cf7-grid{ grid-template-columns: 1fr; }
  .cnt-form-card{ padding: 28px 20px; }
  .cnt-map-header{ padding: 20px; }
  .cnt-submit-btn,
  .cnt-submit-row input[type="submit"],
  .cnt-cf7-wrapper input[type="submit"]{ width: 100% !important; }
}

/* ===== Bangladesh Order Popup: Location & Payment Methods ===== */
.so-location-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.so-division-select,
.so-district-select,
.so-field select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 12px 38px 12px 14px !important;
  line-height: normal !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  background-color: #F8FAFC !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2303A8B9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--foreground, #0F172A) !important;
  font-family: inherit !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  display: block !important;
}
.so-division-select:hover,
.so-district-select:hover,
.so-field select:hover {
  border-color: var(--primary, #03A8B9) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(3, 168, 185, 0.08) !important;
}
.so-division-select:focus,
.so-district-select:focus,
.so-field select:focus {
  outline: none !important;
  border-color: var(--primary, #03A8B9) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3.5px rgba(3, 168, 185, 0.16), 0 2px 10px rgba(3, 168, 185, 0.08) !important;
}

.so-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.so-pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}
.so-pay-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.so-pay-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--muted, #F1F5F9);
  flex-shrink: 0;
}
.so-pay-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.so-pay-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground, #0F172A);
  line-height: 1.3;
}
.so-pay-sub {
  font-size: 11.5px;
  color: var(--muted-foreground, #64748B);
  line-height: 1.2;
}
.so-pay-opt:hover {
  border-color: color-mix(in srgb, var(--primary, #03A8B9) 60%, #E2E8F0);
  background: #F8FAFC;
  transform: translateY(-1px);
}
.so-pay-opt.active {
  border-color: var(--primary, #03A8B9);
  background: color-mix(in srgb, var(--primary, #03A8B9) 5%, #FFF);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #03A8B9) 14%, transparent);
}
.so-pay-opt.active .so-radio-dot {
  border-color: var(--primary, #03A8B9);
}
.so-pay-opt.active .so-radio-inner {
  transform: scale(1);
}
.so-pay-opt.active .so-pay-title {
  color: var(--primary-deep, #02818E);
}

@media (max-width: 520px) {
  .so-location-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===== Luxury Modern Site Footer ===== */
footer.site-footer{
  margin-top: 48px;
  background: linear-gradient(180deg, #0B192C 0%, #060E18 100%) !important;
  color: #94A3B8 !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, #03A8B9 0%, #F43F5E 50%, #8B5CF6 100%) 1 !important;
  position: relative;
}

/* Trust Features Bar */
.ft-trust-bar{
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 28px 0;
}
.ft-trust-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ft-trust-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
}
.ft-trust-item:hover{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(3, 168, 185, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.ft-trust-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ft-ico-truck{
  background: rgba(3, 168, 185, 0.15);
  color: #38BDF8;
}
.ft-ico-shield{
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}
.ft-ico-award{
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
}
.ft-ico-support{
  background: rgba(244, 63, 94, 0.15);
  color: #FB7185;
}
.ft-trust-info h4{
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 3px;
  letter-spacing: 0.01em;
}
.ft-trust-info p{
  font-size: 11.5px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.35;
}

/* Footer Main Columns */
footer.site-footer .ft-main{
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 20px 40px;
}
footer.site-footer .ft-grid{
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.5fr;
  gap: 36px 28px;
}

.ft-logo-wrap img,
.ft-logo-wrap .custom-logo{
  max-height: 46px;
  width: auto;
  margin-bottom: 14px;
  display: block;
}
footer.site-footer .footer-tag{
  font-size: 13px;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0 0 16px;
  max-width: 32ch;
}
.ft-dist-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.ft-dist-badge strong{
  color: #F8FAFC;
}
.ft-dist-ico{
  color: #10B981;
}

/* Social Buttons */
footer.site-footer .ft-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
footer.site-footer .social-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
footer.site-footer .social-btn:hover{
  background: var(--primary, #03A8B9);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(3, 168, 185, 0.35);
}
footer.site-footer .ft-social-facebook:hover{
  background: #1877F2;
  border-color: #1877F2;
}
footer.site-footer .ft-social-instagram:hover{
  background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
  border-color: transparent;
}
footer.site-footer .ft-social-whatsapp:hover{
  background: #25D366;
  border-color: #25D366;
}
footer.site-footer .ft-social-youtube:hover{
  background: #FF0000;
  border-color: #FF0000;
}

/* Link Columns */
footer.site-footer .ft-col>summary,
footer.site-footer .ft-contact h4{
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer.site-footer .ft-col-body a,
footer.site-footer .link-btn{
  display: block;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
footer.site-footer .ft-col-body a:hover,
footer.site-footer .link-btn:hover{
  color: #38BDF8;
  transform: translateX(4px);
}

/* Contact Info Column */
footer.site-footer .ft-contact-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
footer.site-footer .ft-contact-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
footer.site-footer .ft-contact-ico{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(3, 168, 185, 0.15);
  color: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ft-contact-lbl{
  display: block;
  font-size: 10.5px;
  text-transform: uppercase !important;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
footer.site-footer .ft-contact-list a{
  font-size: 13px;
  color: #E2E8F0;
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site-footer .ft-contact-list a:hover{
  color: #38BDF8;
}
footer.site-footer .ft-contact-static{
  font-size: 13px;
  color: #CBD5E1;
}

/* Payment Strip */
footer.site-footer .ft-pay{
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  background: rgba(0, 0, 0, 0.2);
}
footer.site-footer .ft-pay-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer.site-footer .ft-pay-label{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  color: #64748B;
}
footer.site-footer .ft-pay-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
footer.site-footer .ft-pay-list li{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
}

/* Bottom Bar */
footer.site-footer .footer-bottom{
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  font-size: 12px;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  color: #64748B;
  background: rgba(0, 0, 0, 0.35);
}
.footer-bottom-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer.site-footer .ft-copy{
  color: #64748B;
  text-transform: uppercase !important;
}
footer.site-footer .ft-legal{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
}
footer.site-footer .ft-legal a{
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: #64748B;
  text-decoration: none;
  transition: color 0.2s ease;
}
footer.site-footer .ft-legal a:hover{
  color: #38BDF8;
}
footer.site-footer .footer-credit{
  font-size: 11.5px;
  color: #64748B;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}
footer.site-footer .footer-credit a{
  color: #38BDF8;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase !important;
}

@media (max-width: 1024px){
  footer.site-footer .ft-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  footer.site-footer .ft-brand{
    grid-column: 1 / -1;
  }
  .ft-trust-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 640px){
  footer.site-footer .ft-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ft-trust-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .footer-bottom-inner{
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ===== Responsive Deals Switcher (Desktop 3-col + Mobile Interleaved) ===== */
.hx-deals-desktop{
  display: block !important;
}
.hx-deals-mobile{
  display: none !important;
}

@media (max-width: 767px){
  .hx-deals-desktop{
    display: none !important;
  }
  .hx-deals-mobile{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .hx-deals-m-group{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .hx-deals-m-group + .hx-deals-m-group{
    padding-top: 20px !important;
    border-top: 1.5px solid var(--border) !important;
  }
  .hx-deals-m-products{
    display: flex !important;
    flex-direction: column !important;
  }
  .hx-deals-m-products .hx-deal-item{
    border-top: 1px solid var(--border) !important;
  }
  .hx-deals-m-products .hx-deal-item:first-child{
    border-top: none !important;
  }
}