/* ============================================================
   PresoShop — presoshop.com
   Palette follows the presentationdepot.com blue system.
   ============================================================ */

:root{
  --ink:#023047;            /* deep navy (palette) */
  --ink-soft:#3c5a6e;
  --blue:#219ebc;           /* teal primary (palette) */
  --blue-deep:#023047;      /* navy gradient partner (palette) */
  --blue-sky:#8ecae6;       /* sky tint (palette) */
  --gold:#ffb703;           /* amber CTA (palette) */
  --orange:#fb8500;         /* orange CTA partner (palette) */
  --teal-text:#146f88;      /* WCAG AA teal for text on light backgrounds (5.7:1) */
  --bg:#f3f9fc;
  --card:#ffffff;
  --line:#d7e7ef;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,48,71,.10);
  --font-display:Georgia,'Iowan Old Style','Times New Roman',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-text)}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.15rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:8px 14px;z-index:100}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--blue-sky);outline-offset:2px}

/* ---------- header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand img{height:38px;width:auto}
.site-nav{display:flex;gap:22px;align-items:center}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.site-nav a:hover{color:var(--blue)}
/* Header search. A store with thousands of slides is navigated by searching
   more than by browsing, so the box travels with the visitor on every page. */
.nav-search{display:flex;align-items:center;flex:1;max-width:330px;margin-left:auto;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease}
.nav-search:focus-within{border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(33,158,188,.16)}
.nav-search input{flex:1;min-width:0;border:0;background:none;padding:10px 6px 10px 16px;
  font:inherit;font-size:.9rem;color:var(--ink)}
.nav-search input:focus{outline:none}
.nav-search button{display:flex;align-items:center;justify-content:center;width:40px;height:38px;
  border:0;background:none;cursor:pointer;color:var(--blue-deep)}
.nav-search button:hover{color:var(--orange)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer;color:var(--ink)}
.nav-toggle .bars{display:block;width:22px;height:16px;position:relative}
.nav-toggle .bars span{position:absolute;left:0;right:0;height:2.5px;border-radius:3px;background:linear-gradient(90deg,var(--blue-deep),var(--blue));transition:transform .28s ease,opacity .2s ease,top .28s ease}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6.75px}
.nav-toggle .bars span:nth-child(3){top:13.5px}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){top:6.75px;transform:rotate(45deg);background:linear-gradient(90deg,var(--gold),var(--orange))}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){top:6.75px;transform:rotate(-45deg);background:linear-gradient(90deg,var(--gold),var(--orange))}

/* ---------- hero ---------- */
.hero{background:
  radial-gradient(1100px 500px at 85% -10%,rgba(46,134,245,.14),transparent 60%),
  linear-gradient(180deg,#ffffff 0%,var(--bg) 100%)}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(142,202,230,.45) 0%,rgba(142,202,230,0) 65%)}
.hero::after{content:"";position:absolute;bottom:-220px;left:-160px;width:480px;height:480px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(33,158,188,.20) 0%,rgba(33,158,188,0) 65%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-top:64px;padding-bottom:56px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);background:linear-gradient(90deg,rgba(142,202,230,.35),rgba(33,158,188,.14));border:1px solid rgba(33,158,188,.35);padding:5px 14px;border-radius:999px;margin-bottom:18px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));box-shadow:0 0 0 3px rgba(255,183,3,.25)}
/* signature: gradient text + gradient underline on the hero mark */
.hero-mark{
  background:linear-gradient(90deg,var(--blue-deep) 0%,var(--blue) 55%,#5ab8d6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;white-space:nowrap}
.hero-mark::after{
  content:"";position:absolute;left:.02em;right:.02em;bottom:-.12em;height:.13em;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--orange) 100%);opacity:.95}
.hero p.lede{font-size:1.13rem;color:var(--ink-soft);max-width:34em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;border:0;cursor:pointer;font-weight:700;font-size:1rem;border-radius:10px;padding:14px 28px;text-decoration:none;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 8px 22px rgba(33,158,188,.40)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--orange));color:#3a2500;box-shadow:0 8px 22px rgba(251,133,0,.38)}
.btn-danger{color:#a4321a!important;border-color:rgba(164,50,26,.4)!important}
.btn-danger:hover{background:rgba(164,50,26,.08)!important}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.hero-fig{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-meta{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.hero-meta .stat{flex:1 1 190px;padding:16px 18px}
.hero-meta .stat .k{font-family:var(--font-display);font-size:1.7rem;line-height:1.1;
  text-transform:none;letter-spacing:0;color:var(--blue-deep)}
.hero-meta .stat .v{font-family:var(--font-body);font-size:.9rem;margin-top:4px;
  color:var(--ink-soft);background:none;-webkit-text-fill-color:currentColor}
/* the three-step promise is the thing worth clicking, so it is styled as a card
   apart: gold rule, warm tint, and three dots that stand for the three steps */
.hero-meta .stat-steps{display:block;text-decoration:none;position:relative;overflow:hidden;
  border-color:rgba(255,183,3,.55);
  background:linear-gradient(135deg,rgba(255,183,3,.16),rgba(251,133,0,.07))}
.hero-meta .stat-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold),var(--orange))}
.hero-meta .stat-steps .k{color:var(--ink)}
.hero-meta .stat-steps .v{color:#7a5200}
.hero-meta .stat-steps:hover{border-color:var(--orange);
  box-shadow:0 12px 26px rgba(251,133,0,.22);transform:translateY(-3px)}
.stat-steps-dots{position:absolute;right:14px;top:16px;display:flex;gap:5px}
.stat-steps-dots i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:block}
.stat-steps-dots i:nth-child(2){background:var(--orange)}
.stat-steps-dots i:nth-child(3){background:var(--blue)}
.paypal-note{margin-top:14px;font-size:.85rem;color:var(--ink-soft)}

/* ---------- breadcrumb ---------- */
.breadcrumb{padding:14px 0 0;font-size:.88rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.breadcrumb li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-sky);flex:0 0 5px}
.breadcrumb a{color:var(--teal-text);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- slide store ---------- */

.slide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.slide-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 3px 12px rgba(2,48,71,.05);
  transition:transform .18s ease,box-shadow .18s ease}
.slide-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(2,48,71,.14)}
.slide-thumb{display:block;background:linear-gradient(160deg,#f3f9fc,#e6f3f8);line-height:0}
.slide-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.slide-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.slide-title{font-size:1rem;margin:0;line-height:1.35}
.slide-title a{color:var(--ink);text-decoration:none}
.slide-title a:hover{color:var(--teal-text)}
.slide-cat{margin:0;color:var(--ink-soft);font-size:.84rem;text-transform:uppercase;letter-spacing:.06em}
.slide-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.slide-price{font-family:var(--font-display);font-size:1.22rem;color:var(--ink)}


.catalog-search{display:flex;gap:10px;margin:0 0 26px;flex-wrap:wrap}
.catalog-search input{flex:1;min-width:220px;max-width:420px}

.slide-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start;padding-top:8px}
.slide-detail-media{background:linear-gradient(160deg,#f3f9fc,#e6f3f8);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px}
.slide-detail-media img{width:100%;height:auto;display:block}
.slide-detail-body h1{margin:.1em 0 .3em}
.slide-purchase{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:22px 0;padding:20px 22px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(142,202,230,.20),rgba(33,158,188,.10))}
.slide-purchase-price{display:flex;flex-direction:column;gap:2px}
.slide-purchase .price-line{font-size:2rem}
.slide-purchase .price-note{color:var(--ink-soft);font-size:.86rem}
.slide-description{margin-top:18px;color:var(--ink-soft);line-height:1.7}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:820px){
  .slide-detail{grid-template-columns:1fr;gap:24px}
  .slide-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:520px){
  .slide-grid{grid-template-columns:1fr 1fr;gap:12px}
  .slide-card-body{padding:12px 12px 14px}
  .slide-title{font-size:.9rem}
  .slide-price{font-size:1.05rem}
  .slide-buy{flex-direction:column;align-items:stretch}
}

.row-remove{margin:6px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.remove-btn{cursor:pointer;font-size:.72rem;font-weight:600;line-height:1.3;
  padding:3px 9px;border-radius:999px;color:#a4321a;
  background:rgba(164,50,26,.07);border:1px solid rgba(164,50,26,.32);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.remove-btn:hover{background:#a4321a;border-color:#a4321a;color:#fff}

/* ---------- admin: catalogue to-do bar, featured star, artwork warning ---------- */
.todo-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.todo-pill{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);text-decoration:none;font-size:.85rem;font-weight:600;transition:all .15s ease}
.todo-pill:hover{border-color:var(--blue);color:var(--blue-deep)}
.todo-pill.current{background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-color:transparent;color:#fff}
.todo-pill.warn{border-color:rgba(251,133,0,.55);color:#8a4b00;background:rgba(255,183,3,.14)}
.todo-pill.warn.current{background:linear-gradient(135deg,var(--gold),var(--orange));color:#3a2500;border-color:transparent}

.star-btn{display:inline-flex;align-items:center;gap:5px}
.star-btn span{font-size:1rem;line-height:1;color:var(--ink-soft)}
.star-btn.on{border-color:rgba(255,183,3,.65)!important;background:rgba(255,183,3,.14)!important;color:#8a4b00!important}
.star-btn.on span{color:var(--orange)}
.star-btn:hover span{color:var(--gold)}

/* rows still on placeholder artwork stand out without shouting */
tr.row-needs-art > td{background:rgba(255,183,3,.09)}
tr.row-needs-art > td:first-child{box-shadow:inset 4px 0 0 var(--orange)}
tr.row-needs-art:hover > td{background:rgba(255,183,3,.16)}

/* ---------- admin: per-row upload ---------- */
.row-upload{margin:0}
.upload-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:700;
  color:#3a2500;background:linear-gradient(135deg,var(--gold),var(--orange));
  box-shadow:0 4px 12px rgba(251,133,0,.32);
  transition:transform .15s ease,box-shadow .15s ease}
.upload-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(251,133,0,.45)}
.upload-btn:focus-within{outline:3px solid rgba(33,158,188,.55);outline-offset:2px}
.upload-btn input[type="file"]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.upload-btn.busy{opacity:.6;pointer-events:none}

/* ---------- search tag bubbles ---------- */
.tag-block{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.tag-heading{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
/* Tag bubbles are labels, not controls: nothing here is clickable, so there is
   no hover lift and no pointer cursor to promise an interaction that is not
   there. They exist to describe the slide in the buyer's own search words. */
.tag-bubbles{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.tag-bubbles li{
  margin:0;display:inline-block;padding:5px 12px;border-radius:999px;font-size:.76rem;
  font-weight:600;line-height:1.35;color:var(--teal-text);
  background:linear-gradient(135deg,rgba(142,202,230,.30),rgba(33,158,188,.12));
  border:1px solid rgba(33,158,188,.28)}

/* ---------- slide card + detail polish ---------- */
.slide-card{position:relative}
.slide-card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .18s ease}
.slide-card:hover::after{box-shadow:inset 0 0 0 1px rgba(33,158,188,.45)}
.slide-thumb{position:relative;overflow:hidden}
.slide-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 58%);
  transform:translateX(-130%);transition:transform .7s ease}
.slide-card:hover .slide-thumb::before{transform:translateX(130%)}
.slide-thumb img{transition:transform .45s ease}
.slide-card:hover .slide-thumb img{transform:scale(1.045)}

.slide-detail-media{position:relative;overflow:hidden}
.slide-detail-media::before{content:"";position:absolute;top:-90px;right:-70px;width:260px;height:260px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(33,158,188,.28),rgba(33,158,188,0) 70%)}
.slide-detail-media img{position:relative;z-index:1;border-radius:10px}
.slide-purchase{position:relative;overflow:hidden}
.slide-purchase::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-sky) 55%,var(--gold))}

@media (prefers-reduced-motion:reduce){
  .slide-thumb::before,.slide-thumb img,.slide-card:hover .slide-thumb img{transition:none;transform:none}
}

/* ---------- at-a-glance facts ---------- */
.facts-section{padding-top:48px}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0}
.fact{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;box-shadow:0 3px 12px rgba(2,48,71,.05);
  transition:transform .18s ease,box-shadow .18s ease}
.fact::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--blue),var(--blue-sky) 60%,var(--gold))}
.fact:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(2,48,71,.12)}
.fact dt{font-family:var(--font-display);font-size:1.02rem;color:var(--ink);margin-bottom:6px}
.fact dd{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
@media (max-width:820px){ .facts-grid{grid-template-columns:1fr} }

/* ---------- framework marquee band (dark) ---------- */
.fw-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#01222f 0%,#023047 45%,#04425f 100%);
  padding:38px 0}
.fw-band::before{                       /* teal glow, top-right */
  content:"";position:absolute;top:-140px;right:-100px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(33,158,188,.34),rgba(33,158,188,0) 70%);pointer-events:none}
.fw-band::after{                        /* amber glow, bottom-left */
  content:"";position:absolute;bottom:-160px;left:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,183,3,.16),rgba(255,183,3,0) 70%);pointer-events:none}
.fw-band-inner{position:relative;z-index:1}

.fw-row{position:relative;overflow:hidden}
.fw-row + .fw-row{margin-top:12px}
.fw-row::before,.fw-row::after{          /* fade the ends into the band */
  content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.fw-row::before{left:0;background:linear-gradient(90deg,#022a3c,rgba(2,42,60,0))}
.fw-row::after{right:0;background:linear-gradient(270deg,#043d57,rgba(4,61,87,0))}

.fw-track{display:flex;gap:12px;width:max-content;animation:fw-scroll 90s linear infinite}
.fw-track.slow{animation-duration:120s}
.fw-band:hover .fw-track{animation-play-state:paused}
@keyframes fw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fw-chip{
  flex:0 0 auto;white-space:nowrap;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;color:#d6ecf5;
  padding:10px 18px;border-radius:999px;
  background:linear-gradient(180deg,rgba(142,202,230,.14),rgba(33,158,188,.10));
  border:1px solid rgba(142,202,230,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.fw-chip.accent{
  color:#ffe6ad;
  background:linear-gradient(180deg,rgba(255,183,3,.20),rgba(251,133,0,.12));
  border-color:rgba(255,183,3,.42)}

@media (max-width:720px){
  .fw-band{padding:28px 0}
  .fw-chip{font-size:.84rem;padding:8px 14px}
  .fw-row::before,.fw-row::after{width:60px}
}
@media (prefers-reduced-motion:reduce){
  .fw-track{animation:none;transform:translateX(0)}
  .fw-row{overflow-x:auto}
}

/* ---------- marquee ---------- */
.marquee-section{padding:44px 0 10px;overflow:hidden}
.marquee-row{position:relative}
.marquee-row::before,.marquee-row::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee-row::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(243,249,252,0))}
.marquee-row::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(243,249,252,0))}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scrollx 240s linear infinite}
.marquee-track.reverse{animation-direction:reverse;animation-duration:280s}
.marquee-track:hover{animation-play-state:paused}
.marquee-track img{width:240px;height:135px;border-radius:8px;border:1px solid var(--line);background:#fff}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-row{margin-bottom:14px}

/* ---------- sections ---------- */
.section{padding:72px 0}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:46em;margin-bottom:38px}
.section-head p{color:var(--ink-soft)}

/* features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 3px 12px rgba(2,48,71,.05);transition:transform .18s ease,box-shadow .18s ease}
.feature::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-sky),var(--gold));opacity:0;transition:opacity .18s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(2,48,71,.14)}
.feature:hover::before{opacity:1}
.feature h3{display:flex;align-items:center;gap:10px}
.feature .fic{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 5px 14px rgba(33,158,188,.35)}
.feature .fic svg{display:block}
.feature p{color:var(--ink-soft);font-size:.95rem;margin:0}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-grid img{border-radius:10px;border:1px solid var(--line);background:#fff;width:100%;box-shadow:0 3px 10px rgba(11,28,56,.06)}

/* seo prose */
.seo-prose{max-width:860px}
.seo-prose h3{margin-top:1.6em;font-size:1.2rem}
.seo-prose h3:first-child{margin-top:0}
.seo-prose p{color:var(--ink-soft)}
.seo-close{border-left:4px solid var(--gold);padding-left:16px;font-weight:600;color:var(--ink)}

/* pricing */
.pricing-card{position:relative;overflow:hidden;max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:38px;text-align:center}
.pricing-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--blue),var(--blue-sky) 45%,var(--gold) 80%,var(--orange))}
.price-line{font-family:var(--font-display);font-size:3rem;background:linear-gradient(100deg,var(--blue-deep) 20%,var(--blue) 70%,#5ab8d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-line small{font-size:1rem;color:var(--ink-soft);font-family:var(--font-body)}
.pricing-card ul{list-style:none;padding:0;margin:22px 0;text-align:left}
.pricing-card li{padding:7px 0 7px 30px;position:relative;color:var(--ink-soft)}
.pricing-card li::before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,rgba(33,158,188,.18),rgba(142,202,230,.35));color:var(--blue-deep);display:grid;place-items:center;font-size:.8rem;font-weight:800}
.secure-note{font-size:.85rem;color:var(--ink-soft);margin-top:16px}

/* buy modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,28,56,.55);display:none;z-index:90;align-items:center;justify-content:center;padding:18px}
.modal-backdrop.open{display:flex}
.modal{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:30px;box-shadow:var(--shadow);max-height:92vh;overflow:auto}
.modal h3{margin-top:0}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
.form-row input:focus,.form-row textarea:focus{border-color:var(--blue);outline:none}
.modal-close{float:right;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink-soft)}
.err{color:#b3261e;font-size:.88rem;margin:8px 0}
.ok-msg{color:#0d6b34;font-size:.95rem;margin:8px 0}
#paypal-button-container{margin-top:16px;min-height:44px}

/* how it works */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:0;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;box-shadow:0 3px 12px rgba(11,28,56,.05)}
.step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff;font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:14px;box-shadow:0 6px 16px rgba(33,158,188,.4)}
.step h3{margin-bottom:.35em}
.step p{color:var(--ink-soft);font-size:.95rem;margin:0}
.how-help{margin-top:24px;color:var(--ink-soft)}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1}

/* case studies */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.case .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);background:rgba(33,158,188,.14);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.case p{color:var(--ink-soft);font-size:.95rem}
.case .result{font-weight:700;color:var(--ink)}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
.testi{margin:0}
.testi blockquote{margin:0}
.testi p{color:var(--ink-soft);font-size:.95rem}
.testi figcaption{font-weight:700;font-size:.9rem}

/* faq */
.faq-list{max-width:760px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-item summary{cursor:pointer;font-weight:700;padding:17px 20px;list-style:none;position:relative;padding-right:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.35rem;color:var(--blue)}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 20px 18px;color:var(--ink-soft)}

/* content pages */
.page-prose{max-width:820px;padding-top:56px;padding-bottom:56px}
.page-prose h1{margin-bottom:.4em}
.page-prose h2{margin-top:1.6em}
.page-prose p,.page-prose li{color:var(--ink-soft)}

.license-box{margin:22px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 3px 12px rgba(2,48,71,.06);position:relative;overflow:hidden}
.license-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-sky) 45%,var(--gold) 80%,var(--orange))}
.license-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0;cursor:pointer}
.license-check input{margin-top:4px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--blue)}
.license-form button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.req{color:#c62828;font-weight:800}
.req-note{color:var(--ink-soft);font-size:.85rem;margin:10px 0 0}
.terms-row{margin-top:14px}
.pp-locked{opacity:.45;pointer-events:none;filter:grayscale(.4)}

/* contact */
.field-err{color:#a4321a;font-size:.85rem;margin:6px 0 0}
[aria-invalid="true"]{border-color:#a4321a!important}

.chead{display:flex;align-items:center;gap:9px;font-size:1.1rem}
.cic{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 4px 10px rgba(33,158,188,.30)}
.cic svg{display:block}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:start;padding-top:56px;padding-bottom:56px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 3px 12px rgba(11,28,56,.05)}
.hp-field{position:absolute;left:-6000px;top:auto;width:1px;height:1px;overflow:hidden}

/* checkout page */
@keyframes navItemIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes connecting-pulse{0%,100%{opacity:1}50%{opacity:.55}}
#buy-continue.connecting{animation:connecting-pulse 1.2s ease-in-out infinite;cursor:progress}

.checkout-wrap{padding-top:52px;padding-bottom:52px}
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start;max-width:960px;margin:0 auto}
.checkout-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 3px 12px rgba(11,28,56,.05)}
.checkout-summary{background:#fbfcfe}
.summary-list{list-style:none;padding:0;margin:16px 0}
.summary-list li{padding:6px 0 6px 28px;position:relative;color:var(--ink-soft);font-size:.92rem}
.summary-list li::before{content:"\2713";position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,rgba(33,158,188,.18),rgba(142,202,230,.35));color:var(--blue-deep);display:grid;place-items:center;font-size:.75rem;font-weight:800}
.total-line{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin:18px 0;padding-top:16px;font-size:1.05rem}
.total-line strong{font-family:var(--font-display);font-size:1.5rem}

/* floating buttons */
.floaters{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;z-index:60}
.floating-buy{background:linear-gradient(135deg,var(--gold),var(--orange));color:#3a2500;text-decoration:none;font-weight:800;padding:13px 24px;border-radius:999px;box-shadow:0 10px 26px rgba(251,133,0,.45)}
.to-top{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:1.15rem;cursor:pointer;box-shadow:0 4px 14px rgba(11,28,56,.14);opacity:0;pointer-events:none;transition:opacity .25s}
.to-top.show{opacity:1;pointer-events:auto}

body.gdpr-open .floaters{opacity:0;pointer-events:none}

/* GDPR */
.gdpr{position:fixed;left:18px;right:18px;bottom:18px;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;z-index:80}
.gdpr p{margin:0 0 12px;font-size:.9rem;color:var(--ink-soft)}
.gdpr-actions{display:flex;gap:10px;justify-content:flex-end}
.gdpr .btn{padding:9px 20px;font-size:.9rem}

/* footer */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(160deg,#023047 0%,#04425f 60%,#065575 100%);color:#cfe4ef;margin-top:60px}
.site-footer::before{content:"";position:absolute;top:-160px;right:-120px;width:440px;height:440px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(33,158,188,.35) 0%,rgba(33,158,188,0) 70%)}
.site-footer > *{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding:52px 20px 30px}
.footer-h{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:#8fa3c6;font-family:var(--font-body);margin:0 0 14px}
.site-footer nav a{display:block;color:#c7d2e6;text-decoration:none;padding:4px 0;font-size:.93rem}
.site-footer nav a:hover{color:#fff}
.footer-note{font-size:.85rem;color:#8fa3c6;max-width:34em}
.social-row a{color:#c7d2e6;text-decoration:none;margin-right:14px;font-size:.93rem}
.social-soon{display:block;font-size:.78rem;color:#5f7398;margin-top:8px}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;font-size:.82rem;color:#8fa3c6}
.footer-bottom p{margin:0}

/* ---------- admin ---------- */
.admin-body{background:#eef2f9}
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin-side{background:var(--ink);color:#c7d2e6;padding:24px 0}
.admin-side .brand{padding:0 22px 20px;display:block}
.admin-side a.nav-item{display:block;color:#c7d2e6;text-decoration:none;padding:11px 22px;font-size:.94rem;border-left:3px solid transparent}
.admin-side a.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-side a.nav-item.active{background:rgba(46,134,245,.16);border-left-color:var(--blue-sky);color:#fff}
.admin-main{padding:30px 34px}
.admin-main h1{font-size:1.6rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.stat .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.stat{transition:transform .18s ease,box-shadow .18s ease}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(2,48,71,.12)}
.stat .v{font-family:var(--font-display);font-size:1.7rem;margin-top:4px;background:linear-gradient(90deg,var(--blue-deep),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .v small{font-size:.9rem;color:var(--ink-soft)}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:22px}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th,.admin-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pill{display:inline-block;padding:2px 11px;border-radius:99px;font-size:.76rem;font-weight:700}
.pill-ok{background:#e2f4e8;color:#0d6b34}
.pill-warn{background:#fdf1dc;color:#8a5a00}
.pill-bad{background:#fbe4e2;color:#b3261e}
.btn-sm{padding:7px 14px;font-size:.83rem;border-radius:8px}
.flash{padding:13px 17px;border-radius:10px;margin-bottom:18px;font-size:.93rem}
.flash-ok{background:#e2f4e8;color:#0d6b34;border:1px solid #bfe5cd}
.flash-err{background:#fbe4e2;color:#b3261e;border:1px solid #f2c4c0}
.login-wrap{max-width:400px;margin:9vh auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px;box-shadow:var(--shadow)}
.form-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-search{max-width:none;order:3;flex:0 0 100%;margin:0 0 12px}
  .header-row{flex-wrap:wrap;padding-bottom:4px}
  .site-nav{display:none;position:absolute;top:68px;left:0;right:0;background:linear-gradient(180deg,#ffffff 0%,#f6fbfd 100%);border-bottom:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 22px 40px rgba(2,48,71,.16);flex-direction:column;padding:16px 22px 22px;gap:6px;align-items:center}
  .site-nav::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--blue-sky) 45%,var(--gold) 80%,var(--orange))}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 0;width:100%;max-width:340px;text-align:center;font-weight:600;border-radius:12px;transition:background .18s ease,color .18s ease,transform .18s ease}
  .site-nav a:hover,.site-nav a:focus-visible{background:linear-gradient(90deg,rgba(142,202,230,.28),rgba(33,158,188,.16));color:var(--blue-deep);transform:translateY(-1px)}
  .site-nav a:not(:last-child){border-bottom:1px solid rgba(2,48,71,.06)}
  .site-nav .btn{display:block;width:100%;max-width:340px;margin:10px auto 0;text-align:center;border-bottom:none}
  .site-nav.open a{animation:navItemIn .32s ease both}
  .site-nav.open a:nth-child(1){animation-delay:.03s}
  .site-nav.open a:nth-child(2){animation-delay:.07s}
  .site-nav.open a:nth-child(3){animation-delay:.11s}
  .site-nav.open a:nth-child(4){animation-delay:.15s}
  .site-nav.open a:nth-child(5){animation-delay:.19s}
  .site-nav.open a:nth-child(6){animation-delay:.23s}
  .nav-toggle{display:block}
}
@media (max-width:1024px){
  .feature-grid,.case-grid,.testi-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-shell{grid-template-columns:200px 1fr}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:30px;padding-top:44px;padding-bottom:44px}
  .feature-grid,.case-grid,.testi-grid,.contact-grid,.steps-grid,.checkout-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{display:flex;overflow-x:auto;padding:8px}
  .admin-side .brand{display:none}
  .admin-side a.nav-item{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .admin-side a.nav-item.active{border-bottom-color:var(--blue-sky)}
  .admin-main{padding:20px 16px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .floating-buy{padding:11px 18px;font-size:.9rem}
  .marquee-track img{width:190px;height:107px}
}
@media (max-width:400px){
  .hero-mark{white-space:normal}
  .gallery-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
}


/* ============================================================
   Catalogue layout: sticky category rail + slide grid
   ============================================================ */
.catalog-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:34px;align-items:start;
  padding:26px 0 10px}
.catalog-main{min-width:0}

.cat-rail{position:sticky;top:88px}
.cat-rail-inner{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 14px 14px;max-height:calc(100vh - 116px);
  display:flex;flex-direction:column;overflow:hidden}
.cat-rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 10px}
.cat-rail-title{font-family:var(--font-display);font-size:1.02rem;margin:0;color:var(--ink)}
.cat-rail-total{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--teal-text);
  background:rgba(33,158,188,.12);border-radius:999px;padding:3px 9px}
.cat-filter{padding:0 2px 10px;border-bottom:1px solid var(--line)}
.cat-filter input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.88rem;background:var(--bg);color:var(--ink)}
.cat-filter input:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(33,158,188,.16)}

.cat-groups{overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;flex:1}
.cat-groups::-webkit-scrollbar{width:8px}
.cat-groups::-webkit-scrollbar-thumb{background:#cfe2ec;border-radius:8px}
.cat-groups::-webkit-scrollbar-thumb:hover{background:#b3d3e2}
.cat-groups{scrollbar-width:thin;scrollbar-color:#cfe2ec transparent}

.cat-group{border-bottom:1px solid var(--line)}
.cat-group:last-child{border-bottom:0}
.cat-group > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:11px 8px 11px 24px;position:relative;font-weight:700;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);border-radius:9px}
.cat-group > summary::-webkit-details-marker{display:none}
.cat-group > summary::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(-45deg);transition:transform .2s ease}
.cat-group[open] > summary::before{transform:translateY(-30%) rotate(45deg)}
.cat-group > summary:hover{background:rgba(33,158,188,.07);color:var(--ink)}
.cat-group-name{flex:1}
.cat-group-n{font-size:.76rem;font-weight:600;color:var(--ink-soft);letter-spacing:0}

.cat-list{list-style:none;margin:0;padding:0 0 8px}
.cat-link{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 24px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.3;position:relative;
  transition:background .15s ease,color .15s ease}
.cat-link .cat-name{flex:1;min-width:0}
.cat-link .cat-count{font-size:.76rem;color:var(--ink-soft);background:var(--bg);
  border-radius:999px;padding:2px 8px;flex-shrink:0}
.cat-link:hover{background:rgba(33,158,188,.1);color:var(--blue-deep)}
.cat-link.current{background:linear-gradient(90deg,rgba(33,158,188,.16),rgba(33,158,188,.04));
  font-weight:700;color:var(--blue-deep)}
.cat-link.current::before{content:"";position:absolute;left:8px;top:7px;bottom:7px;width:4px;
  border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--orange))}
.cat-link.current .cat-count{background:var(--gold);color:#3a2500;font-weight:700}
.cat-all{margin:10px 0 4px;padding-left:24px;font-weight:700}
.cat-none{margin:10px 6px 2px;font-size:.86rem;color:var(--ink-soft)}

.catalog-head{margin-bottom:18px}
.catalog-head h1{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:.1em 0 .25em}
.catalog-head .lede{margin:0;color:var(--ink-soft);font-size:1rem;max-width:62ch}
.catalog-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.catalog-search{display:flex;gap:8px;flex:1;min-width:260px}
.catalog-search input{flex:1;min-width:0}
.catalog-sort select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);font:inherit;font-size:.9rem;color:var(--ink)}
.catalog-count{color:var(--ink-soft);font-size:.9rem;margin:0 0 18px}
.catalog-count a{margin-left:6px}
.slide-summary{margin:0;color:var(--ink-soft);font-size:.86rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related{margin-top:46px;padding-top:8px;border-top:1px solid var(--line)}
.buy-steps{color:var(--ink-soft);font-size:.9rem;margin:.6em 0 1.2em}

/* homepage category directory */
.cat-directory{columns:4 230px;column-gap:26px}
.cat-dir-group{break-inside:avoid;margin:0 0 22px}
.cat-dir-head{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text);
  font-family:var(--font-body);font-weight:800;margin:0 0 8px;padding-bottom:6px;
  border-bottom:2px solid rgba(33,158,188,.22)}
.cat-dir-group ul{list-style:none;margin:0;padding:0}
.cat-dir-group li{margin:0}
.cat-dir-group a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem}
.cat-dir-group a:hover{background:rgba(33,158,188,.1);color:var(--blue-deep)}
.cat-dir-group .cat-count{font-size:.76rem;color:var(--ink-soft)}

/* three-step marker on checkout */
.checkout-steps{display:flex;flex-wrap:wrap;gap:8px;margin:.4em 0 1em;padding:0;font-size:.8rem}
.checkout-steps span{padding:5px 12px;border-radius:999px;background:var(--bg);
  border:1px solid var(--line);color:var(--ink-soft)}
.checkout-steps span.done{background:rgba(33,158,188,.12);border-color:transparent;color:var(--teal-text)}
.checkout-steps span.on{background:linear-gradient(135deg,var(--gold),var(--orange));
  border-color:transparent;color:#3a2500;font-weight:700}

/* admin bulk actions */
.bulk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);position:sticky;bottom:0}
.bulk-bar select,.bulk-bar input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.9rem;background:var(--card);color:var(--ink)}
.bulk-bar [data-bulk-when]{display:none}
.bulk-bar [data-bulk-when].on{display:inline-block}
.bulk-count{font-weight:700;font-size:.88rem;color:var(--ink-soft);min-width:120px}
.cell-upload{white-space:nowrap}
.cell-actions{white-space:nowrap}

@media (max-width:1080px){
  .catalog-layout{grid-template-columns:1fr;gap:20px}
  .cat-rail{position:static}
  .cat-rail-inner{max-height:none}
  .cat-groups{max-height:320px}
  .cat-directory{columns:2 200px}
}
@media (max-width:560px){
  .cat-directory{columns:1}
  .catalog-tools{flex-direction:column;align-items:stretch}
  .bulk-bar{position:static}
}

/* ---------- catalogue pager ---------- */
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.pager-num,.pager-step{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.pager-num:hover,.pager-step:hover{background:rgba(33,158,188,.1);border-color:var(--blue);
  color:var(--blue-deep)}
.pager-num.current{background:linear-gradient(135deg,var(--gold),var(--orange));
  border-color:transparent;color:#3a2500}
.pager-gap{color:var(--ink-soft);padding:0 2px}
@media (max-width:560px){.pager-step{width:100%}}

/* ---------- category rail at scale, group cards and the directory ---------- */
.cat-group-link{display:flex;align-items:center;gap:8px;padding:11px 8px 11px 24px;position:relative;
  border-radius:9px;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.cat-group-link:last-child{border-bottom:0}
.cat-group-link::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-50%) rotate(-45deg)}
.cat-group-link:hover{background:rgba(33,158,188,.07);color:var(--ink)}
.cat-group-link .cat-group-name{flex:1}
.cat-browse-all{display:block;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.85rem;font-weight:600;color:var(--blue-deep);text-decoration:none}
.cat-browse-all:hover{text-decoration:underline}
.cat-results{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:52vh}
.cat-results .cat-group-tag{display:block;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:2px}

.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.group-card{display:block;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);text-decoration:none;color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.group-card:hover{transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 12px 26px rgba(2,48,71,.12)}
.group-card h3{font-size:1rem;margin:0 0 6px}
.group-card-n{margin:0;font-size:.78rem;font-weight:700;color:var(--teal-text)}
.group-card-eg{margin:8px 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.45}

.group-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.group-jump a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:.82rem;font-weight:600;
  color:var(--ink);text-decoration:none}
.group-jump a:hover{border-color:var(--blue);color:var(--blue-deep)}
.group-jump span{font-size:.72rem;color:var(--ink-soft)}
.dir-group{margin:0 0 34px;scroll-margin-top:90px}
.dir-head{font-size:1.08rem;margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid rgba(33,158,188,.22);display:flex;justify-content:space-between;
  align-items:baseline;gap:12px}
.dir-head span{font-size:.76rem;font-weight:600;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.dir-list{list-style:none;margin:0;padding:0;columns:4 220px;column-gap:22px}
.dir-list li{break-inside:avoid}
.dir-list a{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:.9rem}
.dir-list a:hover{background:rgba(33,158,188,.1);color:var(--blue-deep)}
@media (max-width:900px){.dir-list{columns:2 180px}}
@media (max-width:560px){.dir-list{columns:1}}


/* ---------- storefront: search, chips, trust bar, lanes ---------- */
.hero-search{display:flex;gap:10px;margin:26px 0 10px;max-width:620px}
.hero-search input{flex:1;min-width:0;padding:15px 20px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);font:inherit;font-size:1rem;color:var(--ink);
  box-shadow:0 8px 20px rgba(2,48,71,.07)}
.hero-search input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(33,158,188,.18)}
.hero-search .btn{padding-left:26px;padding-right:26px;white-space:nowrap}
.hero-eg{margin:0 0 20px;font-size:.86rem;color:var(--ink-soft)}
.hero-eg a{color:var(--teal-text);text-decoration:none;font-weight:600}
.hero-eg a:hover{text-decoration:underline}

.trust-bar{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-bar ul{list-style:none;margin:0;padding:16px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.trust-bar li{padding:0 4px;border-left:3px solid rgba(33,158,188,.28);padding-left:12px}
.trust-bar strong{display:block;font-size:.92rem;color:var(--ink)}
.trust-bar span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:2px}

.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;justify-content:center}
.chip-list a{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
.chip-list a:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue-deep);
  box-shadow:0 8px 18px rgba(2,48,71,.12)}

.lane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lane-card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.lane-card::before{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--blue),var(--blue-sky))}
.lane-card:nth-child(2)::before{background:linear-gradient(90deg,var(--gold),var(--orange))}
.lane-card:nth-child(3)::before{background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.lane-card:nth-child(4)::before{background:linear-gradient(90deg,var(--orange),var(--gold))}
.lane-card:hover{transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 14px 30px rgba(2,48,71,.14)}
.lane-card h3{margin:0 0 8px;font-size:1.05rem}
.lane-card p{margin:0 0 14px;font-size:.88rem;color:var(--ink-soft);line-height:1.55;flex:1}
.lane-go{font-size:.85rem;font-weight:700;color:var(--teal-text)}

@media (max-width:560px){
  .hero-search{flex-direction:column}
  .hero-search .btn{width:100%}
}

/* the wider "apply to all matching" option in the admin bulk bars */
.bulk-all{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--ink-soft);
  padding:6px 10px;border-radius:8px;border:1px dashed var(--line);cursor:pointer}
.bulk-all:hover{color:var(--ink);border-color:var(--blue)}
.bulk-all.on{border-style:solid;border-color:var(--gold);background:rgba(255,183,3,.12);color:var(--ink)}
.bulk-all input{margin:0}

/* ============================================================
   Storefront craft: hero steps, card hover, buy panel, zoom
   ============================================================ */

/* ---- hero: the three steps, above the fold ---- */
.hero h1{line-height:1.08}
.hero-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 22px;
  padding:0;position:relative;max-width:620px}
.hero-steps::before{content:"";position:absolute;left:17px;right:17px;top:17px;height:2px;
  background:repeating-linear-gradient(90deg,var(--blue-sky) 0 7px,transparent 7px 14px)}
.hero-steps li{position:relative;padding-right:14px;display:flex;flex-direction:column;gap:2px}
.hero-step-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-weight:800;font-size:.95rem;margin-bottom:8px;
  background:linear-gradient(135deg,var(--gold),var(--orange));color:#3a2500;
  box-shadow:0 0 0 5px var(--bg)}
.hero-steps strong{font-size:.95rem;color:var(--ink)}
.hero-steps span:not(.hero-step-n){font-size:.82rem;color:var(--ink-soft);line-height:1.4}

/* ---- cards: bigger preview, clearer price, one hover affordance ---- */
.slide-card{display:flex;flex-direction:column;height:100%}
.slide-card-body{display:flex;flex-direction:column;flex:1}
.slide-thumb{position:relative;display:block;overflow:hidden}
.slide-thumb-cta{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font-size:.82rem;
  font-weight:700;color:#fff;text-align:center;background:linear-gradient(0deg,rgba(2,48,71,.92),rgba(2,48,71,0));
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.slide-card:hover .slide-thumb-cta,.slide-card:focus-within .slide-thumb-cta{opacity:1;transform:none}
.slide-flag{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;font-size:.68rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a2500;
  background:linear-gradient(135deg,var(--gold),var(--orange));box-shadow:0 4px 10px rgba(251,133,0,.35)}
.slide-cat{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-text);margin:0 0 4px}
.slide-title{margin:0 0 6px;font-size:1rem;line-height:1.35}
.slide-buy{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;border-top:1px solid var(--line)}
.slide-price{font-family:var(--font-display);font-size:1.25rem;color:var(--ink);line-height:1}
.slide-price small{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}

/* ---- slide page: a buy panel that stays put ---- */
.buy-panel{position:sticky;top:88px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);box-shadow:0 14px 34px rgba(2,48,71,.10);padding:20px;margin:0 0 22px}
/* sticky is already a positioned context, so the accent rule can hang off it
   without overriding the position the panel needs */
.buy-panel{overflow:hidden}
.buy-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-sky) 55%,var(--gold))}
.buy-panel .slide-purchase{background:none;border:0;padding:0;margin:0;box-shadow:none;
  display:block;overflow:visible}
.buy-panel .slide-purchase::before{display:none}
.buy-panel .slide-purchase-price{margin-bottom:16px}
.buy-panel .price-line{font-size:2.6rem;line-height:1.1;display:block}
.buy-panel .price-note{display:block;margin-top:6px;line-height:1.5}
.btn-buy{font-size:1.05rem;padding:14px 30px}
.buy-steps-mini{list-style:none;display:flex;gap:6px;margin:16px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line);flex-wrap:wrap}
.buy-steps-mini li{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft);
  background:var(--bg);border-radius:999px;padding:5px 11px 5px 5px}
.buy-steps-mini span{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--blue);color:#fff;font-size:.7rem;font-weight:800}
.buy-assure{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.buy-assure li{position:relative;padding-left:24px;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.buy-assure li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;
  border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0 0 22px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-grid > div{background:var(--card);padding:12px 14px}
.spec-grid dt{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 3px}
.spec-grid dd{margin:0;font-size:.88rem;color:var(--ink);line-height:1.4}

/* ---- preview zoom ---- */
.slide-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.slide-zoom img{display:block;width:100%;height:auto}
.slide-zoom-hint{position:absolute;right:12px;bottom:12px;padding:5px 12px;border-radius:999px;
  font-size:.76rem;font-weight:700;color:#fff;background:rgba(2,48,71,.82);opacity:0;
  transition:opacity .18s ease}
.slide-zoom:hover .slide-zoom-hint,.slide-zoom:focus-visible .slide-zoom-hint{opacity:1}
.zoom-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(2,26,38,.88);cursor:zoom-out}
.zoom-overlay img{max-width:min(1400px,96vw);max-height:92vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.zoom-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.zoom-close:hover{background:rgba(255,255,255,.28)}

/* ---- sticky buy bar on phones ---- */
.buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;
  justify-content:space-between;gap:14px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(2,48,71,.14)}
.buy-bar-price{font-family:var(--font-display);font-size:1.2rem;color:var(--ink);line-height:1}
.buy-bar-price small{display:block;font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.buy-bar .btn{flex:1;max-width:230px;text-align:center}

@media (max-width:1080px){
  .buy-panel{position:relative}
}
@media (max-width:760px){
  .hero-steps{grid-template-columns:1fr;gap:14px;max-width:none}
  .hero-steps::before{left:17px;right:auto;top:17px;bottom:17px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--blue-sky) 0 7px,transparent 7px 14px)}
  .hero-steps li{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap;padding-right:0}
  .hero-step-n{margin-bottom:0;flex:0 0 36px}
  .spec-grid{grid-template-columns:1fr}
  .buy-bar[data-buy-bar]:not([hidden]){display:flex}
  body.has-buy-bar{padding-bottom:78px}
}

/* ---- rail groups that open in place ---- */
.cat-group{border-bottom:1px solid var(--line)}
.cat-group:last-child{border-bottom:0}
.cat-group-link{cursor:pointer}
.cat-group-link::before{transition:transform .2s ease}
.cat-group.open > .cat-group-link::before{transform:translateY(-50%) rotate(45deg)}
.cat-group.open > .cat-group-link{color:var(--blue-deep);background:rgba(33,158,188,.07)}
.cat-group-link.current .cat-group-name{color:var(--blue-deep)}
.cat-group.open > .cat-list{padding-bottom:8px}
.catalog-main.is-loading{opacity:.45;transition:opacity .12s ease;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cat-group-link::before,.catalog-main.is-loading{transition:none}
}


/* ---- slide page: preview and purchase share the left column ---- */
.slide-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.slide-detail-media{background:none;border:0;padding:0}
.slide-detail-media::before{display:none}
.slide-zoom{background:linear-gradient(160deg,#f3f9fc,#e6f3f8);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:20px;line-height:0}
.slide-zoom img{border-radius:10px;box-shadow:0 10px 26px rgba(2,48,71,.12)}
.slide-detail-media .buy-panel{margin-bottom:20px}
.slide-detail-media .spec-grid{margin-bottom:0}
@media (max-width:1080px){
  .slide-detail{grid-template-columns:1fr}
}