/*
Theme Name: Best Laptop
Theme URI: https://bestlaptopshop.com/
Author: Best Laptop Shop
Author URI: https://bestlaptopshop.com/
Description: A fast, accessible e-commerce theme for laptop retailers. Rotating 3D product ring hero, automatic light/dark mode, slide-out cart, JSON-LD product schema, and WooCommerce templates that read specs from real product attributes instead of hand-typed text. Built for Best Laptop Shop, Gulberg III, Lahore.
Version: 4.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: best-laptop
Tags: e-commerce, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
WC requires at least: 7.0
WC tested up to: 9.4
*/

/* ==========================================================================
   Best Laptop — theme stylesheet

    1. Design tokens (light + dark)   6. Deal, features, testimonials
    2. Base + layout                  7. Footer
    3. Header + navigation            8. WordPress core classes
    4. Hero + 3D ring                 9. Theme extras
    5. Products / WooCommerce        10. Single product + cart drawer

   Every colour is a token pair. Dark mode is driven entirely by the
   [data-theme="dark"] block below — no component rules are duplicated.
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  color-scheme:light;

  /* text */
  --ink:#0a0a0c;          /* 19.6:1 on --bg */
  --ink-2:#3a3a44;        /* 10.4:1 — body copy */
  --muted:#5f5f6b;        /*  6.1:1 — passes AA at all sizes */

  /* surfaces */
  --bg:#ffffff;
  --surface:#f7f7f9;
  --surface-2:#fbfbfc;
  --line:#e6e6ec;
  --line-2:#f0f0f4;

  /* brand */
  --accent:#0059e0;       /*  5.9:1 on white — AA for text and UI */
  --accent-ink:#0043ab;
  --accent-soft:#eaf1ff;
  --hot:#d93a10;          /*  4.8:1 — sale badges, still reads orange-red */
  --hot-soft:#fff1ec;
  --ok:#0f7a4d;

  /* on-accent text */
  --on-accent:#ffffff;
  --on-ink:#ffffff;

  /* elevated surfaces */
  --card:#ffffff;
  --line-strong:#cfcfd8;
  --faint:#b9b9c4;
  --star:#e08c00;

  /* panels that stay dark in both modes (top bar, footer, deal banner) */
  --panel:#0a0a0c;
  --panel-2:#15151b;
  --on-panel:rgba(255,255,255,.74);
  --on-panel-strong:#ffffff;
  --on-panel-line:rgba(255,255,255,.12);

  /* form */
  --radius:20px;
  --radius-sm:12px;
  --field-bg:#fbfbfc;

  --shadow-sm:0 1px 2px rgba(10,10,12,.04), 0 4px 14px rgba(10,10,12,.05);
  --shadow-md:0 2px 6px rgba(10,10,12,.05), 0 18px 44px rgba(10,10,12,.09);
  --shadow-lg:0 30px 80px rgba(10,10,12,.14);

  --maxw:1200px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  /* motion — set to 0s by the reduced-motion block at the end of §2 */
  --dur-fast:.2s;
  --dur:.3s;
  --dur-slow:.7s;
  --ease:cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"]{
  color-scheme:dark;

  --ink:#f4f4f7;          /* 16.8:1 on --bg */
  --ink-2:#c8c8d2;        /* 10.2:1 */
  --muted:#9a9aa8;        /*  5.6:1 — AA */

  --bg:#0b0b0f;
  --surface:#15151b;
  --surface-2:#111117;
  --line:#26262f;
  --line-2:#1c1c24;

  --accent:#5c9bff;       /*  7.2:1 on --bg */
  --accent-ink:#8ab6ff;
  --accent-soft:#16233c;
  --hot:#ff7a52;          /*  6.9:1 */
  --hot-soft:#2e1a13;
  --ok:#4ade9b;

  --on-accent:#08152c;
  --on-ink:#0b0b0f;

  --field-bg:#15151b;

  --card:#14141a;
  --line-strong:#3a3a46;
  --faint:#4a4a58;
  --star:#ffb020;
  --panel:#08080b;
  --panel-2:#101015;


  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
}

/* Follow the OS when the visitor has not chosen a mode. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#f4f4f7; --ink-2:#c8c8d2; --muted:#9a9aa8;
    --bg:#0b0b0f; --surface:#15151b; --surface-2:#111117;
    --line:#26262f; --line-2:#1c1c24;
    --accent:#5c9bff; --accent-ink:#8ab6ff; --accent-soft:#16233c;
    --hot:#ff7a52; --hot-soft:#2e1a13; --ok:#4ade9b;
    --on-accent:#08152c; --on-ink:#0b0b0f; --field-bg:#15151b;
    --card:#14141a; --line-strong:#3a3a46; --faint:#4a4a58; --star:#ffb020;
    --panel:#08080b; --panel-2:#101015;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
    --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
    --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  }
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color var(--dur) ease, color var(--dur) ease;
}

/* Visible focus for keyboard users only. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* Cross-document view transitions where supported. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0.01s;--dur:0.01s;--dur-slow:0.01s}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  @view-transition{navigation:none}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;letter-spacing:-.028em;line-height:1.06;font-weight:600}
p{margin:0}
.bl-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.bl-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.bl-sec{padding:96px 0}
.bl-sec-head{max-width:640px;margin-bottom:44px}
.bl-sec-head h2{font-size:clamp(30px,4.2vw,46px);margin:10px 0 14px}
.bl-sec-head p{color:var(--muted);font-size:17px}
.bl-center{text-align:center;margin-left:auto;margin-right:auto}

/* ============ BUTTONS ============ */
.bl-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:100px;border:1px solid transparent;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.bl-btn:hover{transform:translateY(-2px)}
.bl-btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:0 6px 20px rgba(10,10,12,.18)}
.bl-btn-primary:hover{box-shadow:0 12px 30px rgba(10,10,12,.26)}
.bl-btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 20px rgba(0,102,255,.28)}
.bl-btn-accent:hover{box-shadow:0 12px 32px rgba(0,102,255,.36)}
.bl-btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.bl-btn-ghost:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.bl-btn-sm{padding:9px 16px;font-size:13px}
.bl-arrow{transition:transform .25s}
.bl-btn:hover .bl-arrow{transform:translateX(3px)}

/* ============ TOP BAR ============ */
.bl-topbar{
  background:var(--panel);color:var(--on-panel);
  font-size:12.5px;letter-spacing:-.005em;
}
.bl-topbar .bl-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:40px}
.bl-topbar-info{display:flex;gap:24px;align-items:center;min-width:0}
.bl-topbar-info span{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-topbar a:hover{color:var(--on-panel-strong)}
.bl-socials{display:flex;gap:16px;flex:none}
.bl-socials a{opacity:.72;transition:opacity .2s}
.bl-socials a:hover{opacity:1}
.bl-socials svg{width:15px;height:15px;fill:currentColor;display:block}
@media(max-width:900px){.bl-topbar-info span:nth-child(1),.bl-topbar-info span:nth-child(2){display:none}}

/* ============ NAV ============ */
.bl-nav{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s;
}
.bl-nav.bl-stuck{border-bottom-color:var(--line);box-shadow:0 1px 30px rgba(10,10,12,.05)}
.bl-nav .bl-wrap{display:flex;align-items:center;gap:36px;height:66px}
.bl-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;letter-spacing:-.03em;flex:none}
.bl-logo-mark{
  width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--on-ink);
  display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:-.04em;
}
.bl-nav-links{display:flex;gap:4px;margin-left:6px}
.bl-nav-links a{
  padding:8px 14px;border-radius:100px;font-size:14.5px;color:var(--ink-2);
  transition:background .2s,color .2s;position:relative;
}
.bl-nav-links a:hover{background:var(--surface);color:var(--ink)}
.bl-nav-links a.active{color:var(--ink);font-weight:500}
.bl-nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.bl-icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;transition:border-color .2s, box-shadow .2s;position:relative;
}
.bl-icon-btn:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.bl-icon-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
.bl-cart-dot{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;
  background:var(--hot);color:var(--on-accent);font-size:10px;font-weight:600;display:grid;place-items:center;
}
.bl-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.bl-burger span{display:block;width:15px;height:1.5px;background:var(--ink);margin:3px auto;border-radius:2px}
@media(max-width:940px){
  .bl-nav-links{display:none}
  .bl-burger{display:block}
  .bl-nav-links.bl-open{
    display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);padding:12px 24px 20px;gap:2px;
  }
  .bl-nav-links.bl-open a{padding:12px 10px;font-size:16px}
}

/* ============ HERO ============ */
.bl-hero{position:relative;padding:70px 0 0;overflow:hidden;background:var(--card)}
.bl-hero::before{
  content:'';position:absolute;inset:-20% -10% auto -10%;height:620px;
  background:radial-gradient(60% 60% at 50% 0%, rgba(0,102,255,.09), transparent 70%);
  pointer-events:none;
}
.bl-hero-copy{position:relative;text-align:center;max-width:820px;margin:0 auto}
.bl-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);
  margin-bottom:clamp(10px,1.8vh,20px);
}
.bl-pill b{
  background:var(--ink);color:var(--on-ink);border-radius:100px;padding:3px 9px;font-size:10.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.bl-hero h1{font-size:clamp(34px,min(5.4vw,7.6vh),64px);letter-spacing:-.045em;line-height:1.03}
.bl-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.bl-hero-sub{
  margin:clamp(10px,1.6vh,18px) auto clamp(14px,2vh,24px);max-width:560px;
  font-size:17px;color:var(--muted);line-height:1.5;
}
.bl-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bl-hero-meta{
  display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:clamp(12px,2vh,22px);
  font-size:13px;color:var(--muted);
}
.bl-hero-meta span{display:flex;align-items:center;gap:7px}
.bl-dot-ok{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}

/* ============ 3D RING — the wheel ============ */
/*
   Every dimension below is driven by a custom property, so the whole wheel can
   be retuned from Customizer › Hero wheel without touching this file. The
   defaults here are only fallbacks.

   Geometry, in order:
     --r     radius            base size × your radius setting
     --arc   arc per card      2πr / n          (6.2832 = 2π)
     --cw    card width        arc × 82% × your card-size setting
     --ch    card height       cw × your aspect setting

   Because card width comes from the arc, cards can never pile up on each
   other the way they did when the width was a fixed pixel value.
*/
.bl-ring-stage{
  position:relative;margin-top:4px;

  /* --- tunable ------------------------------------------------------ */
  --tilt:-42deg;        /* how far you look down into the wheel        */
  --spin:40s;           /* seconds for one full turn                   */
  --spin-dir:normal;    /* normal | reverse                            */
  --n:22;               /* number of cards                             */
  --r-scale:1;          /* wheel size            0.55 – 1.30           */
  --card-scale:1;       /* card size             0.60 – 1.60           */
  --card-ratio:.66;     /* card height ÷ width   0.40 – 1.10           */
  --card-round:9px;     /* card corner radius                          */
  --hub-scale:1;        /* centre card size      0.60 – 1.40           */
  --persp-scale:1;      /* strength of the 3D    0.60 – 1.60           */
  --lift:0px;           /* nudge the wheel up or down                  */

  /* --- derived ------------------------------------------------------ */
  --r:min(
        calc(40vw * var(--r-scale)),
        calc(36vh * var(--r-scale)),
        calc(560px * var(--r-scale)),
        44vw
      );
  --arc:calc(var(--r) * 6.2832 / var(--n));
  --cw:calc(var(--arc) * .82 * var(--card-scale));
  --ch:calc(var(--cw) * var(--card-ratio));

  height:calc(var(--r) * 1.02 + 140px);
  perspective:calc(clamp(760px, 115vw, 1600px) * var(--persp-scale));
  perspective-origin:50% 42%;
}

/* Depth cue: overlays, never ancestors, of the 3D scene. */
.bl-ring-stage::before,
.bl-ring-stage::after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:5}
.bl-ring-stage::before{
  top:0;height:14%;
  background:linear-gradient(to bottom,var(--bg),rgba(0,0,0,0));
  opacity:.35;
}
.bl-ring-stage::after{
  bottom:0;height:clamp(56px,9vw,120px);
  background:linear-gradient(to top,var(--bg) 20%,rgba(0,0,0,0));
}

.bl-ring{
  position:absolute;left:50%;top:calc(50% + var(--lift));width:0;height:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt)) rotateY(0deg);
  animation:bl-spin var(--spin) linear infinite var(--spin-dir);
  will-change:transform;
}
.bl-ring-stage:hover .bl-ring,
.bl-ring-stage:focus-within .bl-ring{animation-play-state:paused}

@keyframes bl-spin{
  from{transform:rotateX(var(--tilt)) rotateY(0deg)}
  to{transform:rotateX(var(--tilt)) rotateY(360deg)}
}

.bl-ring-card{
  position:absolute;left:calc(var(--cw)/-2);top:calc(var(--ch)/-2);
  width:var(--cw);height:var(--ch);
  transform:rotateY(var(--i)) translateZ(var(--r));

  /* Each card carries two faces. Showing one face from both sides meant every
     image on the far half of the ring was mirrored, which is what made the
     rotation feel subtly wrong. The back face is a second, un-mirrored copy. */
  transform-style:preserve-3d;
}
.bl-ring-face{
  position:absolute;inset:0;overflow:hidden;
  border-radius:var(--card-round);
  background:var(--surface);
  box-shadow:0 6px 18px rgba(10,10,12,.16);
  border:1px solid var(--line);
  border:1px solid color-mix(in srgb,var(--bg) 70%,transparent);
  backface-visibility:hidden;
}
.bl-ring-face--back{transform:rotateY(180deg)}
.bl-ring-face img{width:100%;height:100%;object-fit:var(--card-fit,cover);opacity:.96}
.bl-ring-face::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(127,127,127,.14),transparent 45%);
  background:linear-gradient(150deg,color-mix(in srgb,var(--bg) 35%,transparent),transparent 45%);
}

/* featured card floating at the hub of the wheel */
.bl-ring-feature{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:calc(clamp(168px,20vw,252px) * var(--hub-scale));background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;text-align:center;
}
.bl-ring-feature .bl-shot{
  height:calc(clamp(84px,10vw,132px) * var(--hub-scale));background:var(--surface);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.bl-ring-feature .bl-shot img{height:100%;width:100%;object-fit:contain;padding:10px}
.bl-ring-feature .bl-body{padding:16px 18px 18px}
.bl-ring-feature .bl-body .bl-cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bl-ring-feature .bl-body h4{font-size:17px;margin:6px 0 6px;letter-spacing:-.03em}
.bl-ring-feature .price{font-size:15px;font-weight:600}
.bl-ring-feature .price s{color:var(--muted);font-weight:400;margin-right:7px;font-size:13.5px}
.bl-ring-hint{
  position:absolute;left:50%;bottom:clamp(16px,4vw,52px);transform:translateX(-50%);z-index:6;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
@media(prefers-reduced-motion:reduce){.bl-ring{animation:none}}

/* ============ MARQUEE / BRANDS ============ */
.bl-brandbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--surface-2)}
.bl-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bl-marquee-track{display:flex;gap:64px;width:max-content;animation:bl-slide 34s linear infinite}
@keyframes bl-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bl-marquee span{
  font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--faint);white-space:nowrap;
  transition:color .25s;
}
.bl-marquee span:hover{color:var(--ink)}

/* ============ CATEGORIES ============ */
.bl-cat-grid{display:grid;grid-template-columns:repeat(min(var(--bl-cols,6),6),minmax(0,1fr));gap:14px;max-width:calc(min(var(--bl-cols,6),6) * 212px);margin-inline:auto}
.bl-cat-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 16px;text-align:center;
  background:var(--card);transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.bl-cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.bl-cat-ico{
  width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:var(--surface);
  display:grid;place-items:center;transition:background .3s;
}
.bl-cat-card:hover .bl-cat-ico{background:var(--accent-soft)}
.bl-cat-ico svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bl-cat-card h3{font-size:14px;font-weight:500;letter-spacing:-.02em}
.bl-cat-card small{color:var(--muted);font-size:12px}
@media(max-width:980px){.bl-cat-grid{grid-template-columns:repeat(min(var(--bl-cols,3),3),minmax(0,1fr));max-width:calc(min(var(--bl-cols,3),3) * 212px)}}
@media(max-width:560px){.bl-cat-grid{grid-template-columns:repeat(min(var(--bl-cols,2),2),minmax(0,1fr));max-width:none}}

/* ============ SPLIT BANNERS ============ */
.bl-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl-tri-card{
  border-radius:var(--radius);padding:32px 28px 120px;position:relative;overflow:hidden;
  min-height:300px;display:flex;flex-direction:column;justify-content:flex-start;
  border:1px solid var(--line);
}
.bl-tri-card .bl-eyebrow{color:var(--accent)}
.bl-tri-card h3{font-size:26px;margin:8px 0 16px;letter-spacing:-.035em}
.bl-tri-card .bl-link{
  font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;color:var(--ink);
}
.bl-tri-card .bl-glow{
  position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;filter:blur(8px);opacity:.55;
}
.bl-tri-1{background:linear-gradient(165deg,var(--accent-soft),var(--card))}
.bl-tri-1 .bl-glow{background:radial-gradient(circle,rgba(0,102,255,.35),transparent 65%)}
.bl-tri-2{background:linear-gradient(165deg,var(--hot-soft),var(--card))}
.bl-tri-2 .bl-eyebrow{color:var(--hot)}
.bl-tri-2 .bl-glow{background:radial-gradient(circle,rgba(255,77,31,.3),transparent 65%)}
.bl-tri-3{background:var(--card);background:linear-gradient(165deg,color-mix(in srgb,var(--ok) 12%,var(--card)),var(--card))}
.bl-tri-3 .bl-eyebrow{color:#0f9b63}
.bl-tri-3 .bl-glow{background:radial-gradient(circle,rgba(18,183,106,.28),transparent 65%)}
.bl-tri-card .bl-stat{position:absolute;left:28px;bottom:28px;font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.bl-tri{grid-template-columns:1fr}.bl-tri-card{min-height:220px;padding-bottom:80px}}

/* ============ PRODUCTS ============ */
.bl-filters{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.bl-chip{
  padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:var(--card);
  font-size:13.5px;color:var(--ink-2);transition:all .2s;
}
.bl-chip:hover{border-color:var(--line-strong)}
.bl-chip.bl-on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.bl-p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bl-p-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.bl-p-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.bl-p-shot{
  height:190px;background:var(--surface);position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.bl-p-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bl-p-card:hover .bl-p-shot img{transform:scale(1.05)}
.bl-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.bl-badge{
  padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px);
}
.bl-b-sale{background:var(--hot);color:var(--on-accent)}
.bl-b-new{background:var(--ink);color:var(--on-ink)}
.bl-b-demo{background:var(--card);background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--muted);border:1px solid var(--line)}
.bl-p-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.bl-p-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bl-p-card h3{font-size:16px;letter-spacing:-.028em;font-weight:600}
.bl-p-specs{font-size:12.5px;color:var(--muted);line-height:1.5}
.bl-p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.bl-p-price{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.bl-p-price s{display:block;font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0}
.bl-p-price .bl-ask{font-size:14px;font-weight:500;color:var(--ink-2)}
.bl-add{
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--on-ink);border:none;
  display:grid;place-items:center;transition:transform .25s, background .25s;flex:none;
}
.bl-add:hover{transform:scale(1.09);background:var(--accent)}
.bl-add svg{width:16px;height:16px;stroke:var(--on-ink);fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:1040px){.bl-p-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.bl-p-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bl-p-grid{grid-template-columns:1fr}}

/* ============ DEAL / COUNTDOWN ============ */
.bl-deal{
  /* --panel, not --ink: --ink flips to near-white in dark mode, which turned
     this banner into a white card with invisible copy. */
  background:var(--panel);color:var(--on-panel-strong);
  border-radius:28px;padding:56px 48px;position:relative;overflow:hidden;
}
.bl-deal::before{
  content:'';position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,102,255,.45),transparent 62%);
}
.bl-deal::after{
  content:'';position:absolute;left:-120px;bottom:-180px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,31,.3),transparent 62%);
}
.bl-deal-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.bl-deal .bl-eyebrow{color:var(--on-panel)}
.bl-deal h2{font-size:clamp(28px,3.6vw,40px);margin:10px 0 12px;max-width:520px}
.bl-deal p{color:var(--on-panel);max-width:440px;font-size:15.5px}
.bl-deal .bl-btn-primary{background:var(--on-panel-strong);color:var(--panel);margin-top:24px}
.bl-clock{display:flex;gap:12px}
.bl-clock div{
  min-width:84px;padding:18px 10px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid var(--on-panel-line);
  backdrop-filter:blur(10px);
}
.bl-clock b{display:block;font-size:32px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.bl-clock small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-panel);margin-top:8px;display:block}
@media(max-width:560px){.bl-deal{padding:38px 24px;border-radius:22px}.bl-clock div{min-width:66px;padding:14px 6px}.bl-clock b{font-size:24px}}

/* ============ FEATURES ============ */
.bl-feat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bl-feat{
  padding:26px 22px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line-2);
  transition:background .3s, transform .3s;
}
.bl-feat:hover{background:var(--card);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.bl-feat .bl-n{font-family:var(--serif);font-size:26px;color:var(--accent);line-height:1;margin-bottom:14px;display:block}
.bl-feat h3{font-size:15.5px;margin-bottom:8px;letter-spacing:-.025em}
.bl-feat p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:1000px){.bl-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bl-feat-grid{grid-template-columns:1fr}}

/* ============ SPLIT / PROMISE ============ */
.bl-split{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.bl-split-visual{
  border-radius:26px;overflow:hidden;background:linear-gradient(160deg,var(--surface),var(--surface-2));
  aspect-ratio:4/3;position:relative;border:1px solid var(--line);
}
.bl-split-visual img{width:100%;height:100%;object-fit:cover}
.bl-check-list{display:grid;gap:14px;margin:26px 0 30px}
.bl-check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.bl-check{
  width:20px;height:20px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none;margin-top:2px;
}
.bl-check svg{width:11px;height:11px;stroke:var(--accent);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
ul{list-style:none;padding:0;margin:0}
@media(max-width:900px){.bl-split{grid-template-columns:1fr;gap:36px}}

/* ============ TESTIMONIALS ============ */
.bl-t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl-t-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:var(--card);
  display:flex;flex-direction:column;transition:box-shadow .3s, transform .3s;
}
.bl-t-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.bl-stars{display:flex;gap:3px;margin-bottom:16px}
.bl-stars svg{width:14px;height:14px;fill:var(--star)}
.bl-t-card p{font-size:15.5px;line-height:1.6;color:var(--ink-2);letter-spacing:-.01em}
.bl-t-who{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.bl-avatar{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:600;color:#fff;flex:none;letter-spacing:-.02em;
}
.bl-t-who b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.bl-t-who small{color:var(--muted);font-size:12.5px}
@media(max-width:900px){.bl-t-grid{grid-template-columns:1fr}}

/* ============ CTA STRIP ============ */
.bl-strip{
  border-radius:28px;background:linear-gradient(150deg,var(--accent-soft),var(--bg) 62%);border:1px solid var(--line);
  padding:64px 48px;text-align:center;position:relative;overflow:hidden;
}
.bl-strip h2{font-size:clamp(30px,4.4vw,48px);max-width:640px;margin:0 auto 16px}
.bl-strip h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.bl-strip p{color:var(--muted);max-width:480px;margin:0 auto 28px;font-size:16.5px}

/* ============ FOOTER ============ */
footer{background:var(--panel);color:var(--on-panel);margin-top:96px;padding:64px 0 0}
.bl-f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:48px}
footer h4{color:var(--on-panel-strong);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;font-weight:600}
footer li{margin-bottom:11px;font-size:14.5px}
footer a{transition:color .2s}
footer a:hover{color:var(--on-panel-strong)}
.bl-f-brand .bl-logo{color:var(--on-panel-strong);margin-bottom:16px}
.bl-f-brand .bl-logo-mark{background:var(--on-panel-strong);color:var(--panel)}
.bl-f-brand p{font-size:14.5px;line-height:1.65;max-width:300px}
.bl-f-perks{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.bl-perk{
  padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--on-panel-line);font-size:12.5px;
}
.bl-perk b{display:block;color:var(--on-panel-strong);font-size:13px;font-weight:600;margin-bottom:2px}
.bl-f-bot{
  border-top:1px solid var(--on-panel-line);padding:22px 0;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;
}
.bl-pay{display:flex;gap:8px;align-items:center}
.bl-pay span{
  padding:5px 11px;border-radius:7px;background:rgba(255,255,255,.08);
  font-size:11px;letter-spacing:.05em;color:var(--on-panel);
}
@media(max-width:900px){.bl-f-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.bl-f-top{grid-template-columns:1fr}}

/* ============ REVEAL ============ */
.bl-rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.bl-rv.bl-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.bl-rv{opacity:1;transform:none}}

/* toast */
.bl-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,90px);z-index:200;
  background:var(--ink);color:var(--on-ink);padding:13px 22px;border-radius:100px;font-size:14px;
  box-shadow:var(--shadow-lg);opacity:0;transition:all .35s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.bl-toast.bl-show{transform:translate(-50%,0);opacity:1}

/* ==========================================================================
   5b. WOOCOMMERCE — map Woo's default markup onto the theme's card styles
   ========================================================================== */
.woocommerce ul.products,
ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0;
}
@media(max-width:1040px){.woocommerce ul.products,ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.woocommerce ul.products,ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.woocommerce ul.products,ul.products{grid-template-columns:1fr}}

.woocommerce ul.products li.product,
ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
ul.products li.product a img{
  width:100%;height:200px;margin:0;background:var(--surface);
  /* contain, not cover: product photography is a laptop on a plain field and
     cropping it cuts the screen off. Fixed height keeps every card level. */
  object-fit:contain;padding:16px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
ul.products li.product:hover a img{transform:scale(1.05)}
ul.products li.product .woocommerce-loop-product__title{
  font-size:16px!important;font-weight:600;letter-spacing:-.028em;padding:14px 18px 0;margin:0;line-height:1.3;
}
ul.products li.product .bl-cat{
  padding:14px 18px 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
ul.products li.product .bl-cat + .woocommerce-loop-product__title{padding-top:6px}
ul.products li.product .price{
  display:block;padding:8px 18px 0;font-size:16.5px;font-weight:600;color:var(--ink)!important;letter-spacing:-.02em;
}
ul.products li.product .price del{
  display:block;font-size:12.5px;font-weight:400;color:var(--muted);opacity:1;
}
ul.products li.product .price ins{text-decoration:none;font-weight:600}
ul.products li.product .bl-specs{padding:6px 18px 0;font-size:12.5px;color:var(--muted);line-height:1.5}
ul.products li.product .button,
ul.products li.product .added_to_cart{
  margin:14px 18px 18px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;
  background:var(--ink);color:var(--on-ink);font-size:13.5px;font-weight:500;border:none;
  transition:background .25s,transform .25s;
}
ul.products li.product .button:hover{background:var(--accent);transform:translateY(-2px);color:var(--on-accent)}
ul.products li.product .onsale,
.woocommerce span.onsale{
  position:absolute;top:12px;left:12px;right:auto;z-index:2;margin:0;min-width:0;min-height:0;
  padding:4px 10px;border-radius:100px;background:var(--hot);color:var(--on-accent);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
}

/* single product */
.woocommerce div.product .product_title{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.04em}
.woocommerce div.product p.price{font-size:24px;font-weight:600;color:var(--ink)}
.woocommerce div.product p.price del{color:var(--muted);font-size:16px;font-weight:400}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--ink);color:var(--on-ink);border-radius:100px;padding:13px 26px;font-size:14.5px;font-weight:500;
  border:none;transition:background .25s,transform .25s,box-shadow .25s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,.woocommerce #respond input#submit:hover{
  background:var(--accent);color:var(--on-accent);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,102,255,.28);
}
.woocommerce .quantity .qty{
  border:1px solid var(--line);border-radius:12px;padding:11px 8px;background:var(--surface-2);font:inherit;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 24px 0 0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:14px 0;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--ink)}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-top:0;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);padding:16px 20px 16px 22px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{color:var(--accent)}
.woocommerce-result-count{color:var(--muted);font-size:13.5px}
.woocommerce .woocommerce-ordering select{
  padding:9px 14px;border-radius:100px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:13.5px;
}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:100px;padding:10px 16px;border:1px solid var(--line);background:var(--card);font-size:14px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);
  font:inherit;font-size:15px;height:auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px rgba(0,102,255,.12);
}
.woocommerce table.shop_table{border-radius:var(--radius);border-color:var(--line)}
.woocommerce-cart table.cart img{width:64px;border-radius:10px}
.bl-shop-head{padding:56px 0 32px}
.bl-shop-layout{display:grid;grid-template-columns:1fr;gap:32px}

/* ==========================================================================
   8. WORDPRESS CORE CLASSES
   ========================================================================== */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--panel);color:var(--on-panel-strong);
  padding:12px 20px;border-radius:0 0 12px 0;font-size:14px;
}
.skip-link:focus{left:0}
.alignleft{float:left;margin:6px 24px 18px 0}
.alignright{float:right;margin:6px 0 18px 24px}
.aligncenter{display:block;margin:18px auto}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-block-image figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.sticky{position:relative}
.bypostauthor{display:block}
.entry-content{max-width:760px;font-size:17px;line-height:1.75;color:var(--ink-2)}
.entry-content h2{font-size:30px;margin:40px 0 14px;color:var(--ink)}
.entry-content h3{font-size:22px;margin:32px 0 12px;color:var(--ink)}
.entry-content p{margin-bottom:20px}
.entry-content ul,.entry-content ol{margin:0 0 20px 22px;list-style:revert}
.entry-content li{margin-bottom:8px}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry-content blockquote{
  border-left:3px solid var(--accent);padding-left:22px;margin:28px 0;
  font-family:var(--serif);font-size:22px;font-style:italic;color:var(--ink);line-height:1.4;
}
.entry-content img{border-radius:16px}
.entry-content code,.entry-content pre{
  background:var(--surface);border-radius:8px;padding:2px 7px;font-size:14px;
}
.entry-content pre{padding:18px;border-radius:14px;overflow:auto}
.entry-content table{width:100%;border-collapse:collapse;margin-bottom:24px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left;font-size:15px}
.post-meta{font-size:13.5px;color:var(--muted);margin-bottom:28px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:48px}
.pagination .page-numbers{
  padding:10px 16px;border-radius:100px;border:1px solid var(--line);font-size:14px;background:var(--card);
}
.pagination .page-numbers.current{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.comment-form input,.comment-form textarea{
  width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-2);font:inherit;font-size:15px;margin-bottom:14px;
}
.widget{margin-bottom:32px}
.widget-title{font-size:15px;margin-bottom:14px}

/* ==========================================================================
   9. THEME EXTRAS — search, shop head, empty states
   ========================================================================== */
.bl-searchbar{
  flex-basis:100%;padding:0 0 16px;
}
.bl-search{display:flex;gap:10px;align-items:center}
.bl-search input[type=search]{
  flex:1;padding:12px 18px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface-2);font:inherit;font-size:15px;
}
.bl-search input[type=search]:focus{
  outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px rgba(0,102,255,.12);
}
.bl-empty{padding:60px 0;text-align:center;color:var(--muted)}
.bl-phead{padding:64px 0 32px;position:relative;overflow:hidden}
.bl-phead::before{
  content:'';position:absolute;inset:-40% -10% auto -10%;height:520px;
  background:radial-gradient(50% 55% at 50% 0%,rgba(0,102,255,.08),transparent 70%);pointer-events:none;
}
.bl-crumb{font-size:13px;color:var(--muted);margin-bottom:14px;position:relative}
.bl-crumb a:hover{color:var(--ink)}
.bl-phead h1{font-size:clamp(36px,5.4vw,58px);letter-spacing:-.045em;position:relative}
.bl-phead h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.bl-phead p{color:var(--muted);font-size:17.5px;max-width:540px;margin-top:16px;position:relative}
.custom-logo{max-height:40px;width:auto}
.bl-nav-links ul{display:contents}

/* ==========================================================================
   10. SINGLE PRODUCT, CART DRAWER, THEME TOGGLE
   ========================================================================== */

/* --- theme toggle ------------------------------------------------------ */
.bl-theme-toggle{position:relative;overflow:hidden}
.bl-theme-toggle svg{
  position:absolute;width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bl-theme-toggle .bl-i-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.bl-theme-toggle .bl-i-moon{opacity:1;transform:none}
[data-theme="dark"] .bl-theme-toggle .bl-i-sun{opacity:1;transform:none}
[data-theme="dark"] .bl-theme-toggle .bl-i-moon{opacity:0;transform:rotate(70deg) scale(.5)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bl-theme-toggle .bl-i-sun{opacity:1;transform:none}
  :root:not([data-theme="light"]) .bl-theme-toggle .bl-i-moon{opacity:0;transform:rotate(70deg) scale(.5)}
}

/* --- scroll progress --------------------------------------------------- */
.bl-scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--hot));
  transform:scaleX(var(--p,0));pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .bl-scroll-progress{
    animation:blProgress linear;
    animation-timeline:scroll(root block);
  }
  @keyframes blProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* --- back to top ------------------------------------------------------- */
.bl-to-top{
  position:fixed;right:24px;bottom:24px;z-index:70;width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:grid;place-items:center;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.bl-to-top.bl-show{opacity:1;transform:none;pointer-events:auto}
.bl-to-top svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- cart drawer ------------------------------------------------------- */
.bl-drawer-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(6,6,10,.5);
  opacity:0;pointer-events:none;transition:opacity var(--dur) ease;
  backdrop-filter:blur(2px);
}
.bl-drawer-scrim.bl-open{opacity:1;pointer-events:auto}
.bl-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(420px,100vw);
  background:var(--bg);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .34s var(--ease);
  display:flex;flex-direction:column;
}
.bl-drawer.bl-open{transform:none}
.bl-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.bl-drawer-head h2{font-size:18px}
.bl-drawer-close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;
}
.bl-drawer-close svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round}
.bl-drawer-body{flex:1;overflow-y:auto;padding:20px 24px}
.bl-drawer-body .woocommerce-mini-cart__empty-message{color:var(--muted);text-align:center;padding:40px 0}
.bl-drawer-body ul.cart_list li{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-2);list-style:none;
}
.bl-drawer-body ul.cart_list{padding:0;margin:0}
.bl-drawer-body ul.cart_list li img{width:56px;height:56px;object-fit:cover;border-radius:10px;float:none;margin:0}
.bl-drawer-body ul.cart_list li a{font-size:14.5px;font-weight:500;line-height:1.35}
.bl-drawer-body .quantity{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.bl-drawer-body a.remove{
  width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--muted)!important;
  font-size:15px;line-height:22px;text-align:center;
}
.bl-drawer-body a.remove:hover{background:var(--hot);color:var(--on-accent)!important}
.bl-drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--line);background:var(--surface-2)}
.bl-drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-size:15px}
.bl-drawer-total strong{font-size:20px;letter-spacing:-.03em}
.bl-drawer-foot .bl-btn{width:100%;justify-content:center;margin-bottom:10px}

/* --- breadcrumbs ------------------------------------------------------- */
.bl-crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--muted);margin-bottom:16px;
}
.bl-crumbs a:hover{color:var(--ink)}
.bl-crumbs span[aria-current]{color:var(--ink-2)}

/* --- single product ---------------------------------------------------- */
.bl-product{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;padding-top:32px}
@media(max-width:900px){.bl-product{grid-template-columns:1fr;gap:32px}}

.bl-gallery{position:sticky;top:96px}
@media(max-width:900px){.bl-gallery{position:static}}
.bl-gallery .woocommerce-product-gallery__image img,
.bl-gallery img{border-radius:22px;background:var(--surface);width:100%}
.bl-gallery .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 0;padding:0;list-style:none;
}
.bl-gallery .flex-control-thumbs li{margin:0;width:auto}
.bl-gallery .flex-control-thumbs img{
  border-radius:12px;border:1px solid var(--line);opacity:.6;transition:opacity var(--dur-fast),border-color var(--dur-fast);
}
.bl-gallery .flex-control-thumbs img.flex-active,
.bl-gallery .flex-control-thumbs img:hover{opacity:1;border-color:var(--accent)}

.bl-summary .product_title{font-size:clamp(28px,3.8vw,44px);letter-spacing:-.042em;margin-bottom:14px}
.bl-summary .bl-cat-line{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bl-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.bl-price-row .price{font-size:28px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.bl-price-row .price del{font-size:17px;font-weight:400;color:var(--muted);opacity:1;margin-right:8px}
.bl-price-row .price ins{text-decoration:none}
.bl-save{
  padding:5px 12px;border-radius:100px;background:var(--hot-soft);color:var(--hot);
  font-size:12.5px;font-weight:600;
}
.bl-stock{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:22px}
.bl-stock .bl-dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.bl-stock.bl-out .bl-dot-ok{background:var(--hot)}

/* spec table built from real product attributes */
.bl-specs-table{
  width:100%;border-collapse:collapse;margin:24px 0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.bl-specs-table th,.bl-specs-table td{
  padding:12px 16px;font-size:14.5px;text-align:left;border-bottom:1px solid var(--line-2);
}
.bl-specs-table tr:last-child th,.bl-specs-table tr:last-child td{border-bottom:0}
.bl-specs-table th{
  width:42%;font-weight:500;color:var(--muted);background:var(--surface-2);
  font-size:13.5px;letter-spacing:0;
}
.bl-specs-table td{color:var(--ink-2)}

.bl-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.bl-trust div{
  display:flex;gap:12px;align-items:flex-start;padding:16px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
}
.bl-trust svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none;margin-top:2px}
.bl-trust b{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em}
.bl-trust small{color:var(--muted);font-size:12.5px}
@media(max-width:520px){.bl-trust{grid-template-columns:1fr}}

.woocommerce div.product form.cart{margin:26px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{margin:0}
.bl-meta{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.bl-meta span{display:block;margin-bottom:6px}
.bl-meta b{color:var(--ink-2);font-weight:500}

.related.products,.upsells.products{margin-top:88px}
.related.products>h2,.upsells.products>h2{font-size:clamp(24px,3vw,34px);margin-bottom:28px;letter-spacing:-.035em}

/* --- notice when a product is missing data ----------------------------- */
.bl-admin-notice{
  padding:14px 18px;border-radius:14px;background:var(--hot-soft);border:1px solid var(--hot);
  color:var(--ink);font-size:13.5px;margin:16px 0;
}

/* --- image sizing ------------------------------------------------------
   No aspect-ratio override here. An earlier revision set height:auto, which
   beat the fixed height above and left every product card a different size. */
.bl-p-shot img{object-fit:contain;padding:14px;background:var(--surface)}

/* ==========================================================================
   11. CONTACT PAGE
   ========================================================================== */
.bl-c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:860px){.bl-c-grid{grid-template-columns:1fr}}
.bl-c-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:var(--card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);
}
.bl-c-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.bl-c-ico{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:18px}
.bl-c-ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-c-card h3{font-size:16px;margin-bottom:8px}
.bl-c-card p{font-size:14.5px;color:var(--muted);line-height:1.6}
.bl-c-card a{color:var(--ink);font-weight:500}
.bl-c-card a:hover{color:var(--accent)}

.bl-map{
  border-radius:26px;overflow:hidden;border:1px solid var(--line);min-height:280px;
  background:linear-gradient(160deg,var(--surface),var(--surface-2));position:relative;
}
.bl-hours{border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-top:16px;background:var(--card)}
.bl-hours h3{font-size:15px;margin-bottom:16px}
.bl-hours li{
  display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding:9px 0;
  border-bottom:1px solid var(--line-2);color:var(--ink-2);
}
.bl-hours li:last-child{border:0}
.bl-hours li b{font-weight:500;color:var(--ink)}
.bl-open-now{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ok);margin-top:14px}
.bl-open-now .bl-dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}

/* form controls inside page content (form plugins) */
.entry-content input[type=text],.entry-content input[type=email],
.entry-content input[type=tel],.entry-content textarea,.entry-content select{
  width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--field-bg);font:inherit;font-size:15px;color:var(--ink);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.entry-content input:focus,.entry-content textarea:focus,.entry-content select:focus{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 4px rgba(0,89,224,.18);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}
.entry-content input[type=submit],.entry-content button[type=submit]{
  width:auto;padding:13px 26px;border-radius:100px;border:none;
  background:var(--ink);color:var(--on-ink);font-size:14.5px;font-weight:500;cursor:pointer;
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.entry-content input[type=submit]:hover,.entry-content button[type=submit]:hover{
  background:var(--accent);color:var(--on-accent);transform:translateY(-2px);
}

/* ==========================================================================
   12. STATE HELPERS
   ========================================================================== */
/* An expired countdown collapses the timer rather than sitting at zero. */
.bl-deal[data-expired] .bl-clock{display:none}
.bl-deal[data-expired] .bl-eyebrow::after{content:' — ended'}

/* Skip the ring animation entirely for visitors who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  .bl-ring{animation:none;transform:rotateX(var(--tilt)) rotateY(20deg)}
  .bl-marquee-track{animation:none}
  .bl-ring-hint{display:none}
}

/* Larger tap targets on touch devices. */
@media (pointer:coarse){
  .bl-icon-btn,.bl-drawer-close{width:44px;height:44px}
  .bl-nav-links.bl-open a{padding:14px 10px}
  .bl-add{width:44px;height:44px}
}

/* Windows high-contrast mode. */
@media (forced-colors:active){
  .bl-btn,.bl-icon-btn,.bl-chip,.bl-p-card,.bl-c-card,.bl-drawer{border:1px solid CanvasText}
  .bl-scroll-progress{background:Highlight}
}

/* Print: drop the chrome, keep the content. */
@media print{
  .bl-topbar,.bl-nav,.bl-ring-stage,.bl-brandbar,.bl-deal,.bl-to-top,.bl-drawer,.bl-drawer-scrim,
  .bl-scroll-progress,footer,.bl-toast{display:none!important}
  body{background:#fff;color:#000}
  .bl-sec{padding:12px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* ==========================================================================
   13. COMMENTS
   ========================================================================== */
.bl-comments{max-width:760px}
.bl-comment-list li{margin-bottom:24px}
.bl-comment-list .comment-body{
  padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);
}
.bl-comment-list .comment-author img{border-radius:50%;margin-right:10px}
.bl-comment-list .comment-author .fn{font-weight:600;font-style:normal;letter-spacing:-.02em}
.bl-comment-list .comment-meta{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.bl-comment-list .comment-meta a{color:var(--muted)}
.bl-comment-list .reply{margin-top:10px;font-size:13.5px}
.bl-comment-list .reply a{color:var(--accent);font-weight:500}
.bl-comment-list .children{list-style:none;margin:20px 0 0 28px;padding:0}
.bl-comments .comment-form label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--ink-2)}
.bl-comments .comment-notes,.bl-comments .comment-form-cookies-consent label{
  font-size:13px;color:var(--muted);font-weight:400;
}

/* Promise section with no image set: single column instead of a grey gap. */
.bl-split-solo{grid-template-columns:1fr;max-width:720px}

/* ==========================================================================
   14. FAQ + POLICY PAGES
   ========================================================================== */
.bl-faq{max-width:780px;margin:0 auto}
.bl-q{border-bottom:1px solid var(--line)}
.bl-q summary{
  padding:22px 0;font-size:17px;font-weight:500;letter-spacing:-.02em;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
  color:var(--ink);
}
.bl-q summary::-webkit-details-marker{display:none}
.bl-q summary::after{
  content:'+';font-size:22px;color:var(--muted);font-weight:300;
  transition:transform var(--dur) var(--ease);flex:none;
}
.bl-q[open] summary::after{transform:rotate(45deg)}
.bl-q summary:hover{color:var(--accent)}
.bl-q p{padding:0 0 22px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:660px}

.bl-policy{max-width:760px;margin:0 auto}
.bl-policy h2{font-size:24px;margin:44px 0 12px}
.bl-policy h3{font-size:19px;margin:32px 0 10px}
.bl-policy ul,.bl-policy ol{margin-left:22px;list-style:revert}