/* ============================================================================
   Structural theme presets (v1.4). A theme may set a `preset` token which
   lands as a body class (vd-preset-*). Each preset re-architects the page —
   header anatomy, hero layout, product-card shape, section rhythm, buttons —
   so switching themes changes the DESIGN, not just the colours (colours stay
   in the --vd-* tokens, still customizable per store).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ATELIER — B2C editorial boutique.
   Centered masthead over a hairline nav bar, serif display type, single-column
   editorial hero (no floating cards), borderless image-first product cards,
   uppercase ghost buttons, hairline-ruled sections.
--------------------------------------------------------------------------- */
.vd-preset-atelier .site-header { position:static; border-bottom:none; backdrop-filter:none; background:var(--vd-color-bg); }
.vd-preset-atelier .site-header .bar { height:auto; flex-direction:column; gap:10px; padding:26px 0 0; justify-content:center; }
.vd-preset-atelier .site-header .logo { font-size:34px; letter-spacing:.02em; }
.vd-preset-atelier .site-header nav { border-top:1px solid var(--vd-color-border); border-bottom:1px solid var(--vd-color-border); width:100%; justify-content:center; padding:12px 0; gap:34px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.vd-preset-atelier .header-actions { position:absolute; right:24px; top:30px; }
.vd-preset-atelier .site-header { position:relative; }

.vd-preset-atelier .hp-hero { border-bottom:1px solid var(--vd-color-border); }
.vd-preset-atelier .hp-hero-bg { background:var(--vd-color-bg); }
.vd-preset-atelier .hp-hero-inner { grid-template-columns:1fr; padding:110px 0 120px; text-align:center; }
.vd-preset-atelier .hp-visual, .vd-preset-atelier .hp-blob { display:none; }
.vd-preset-atelier .hp-copy { max-width:820px; margin:0 auto; }
.vd-preset-atelier .hp-hero h1 { font-size:clamp(44px, 6.5vw, 92px); font-weight:500; line-height:1.02; letter-spacing:-.01em; }
.vd-preset-atelier .hp-hero h1 .grad { background:none; color:var(--vd-color-primary); font-style:italic; }
.vd-preset-atelier .hp-hero p.lead { margin:22px auto 34px; }
.vd-preset-atelier .hp-eyebrow { background:none; border:none; color:var(--vd-color-muted); letter-spacing:.22em; text-transform:uppercase; font-size:11.5px; padding:0; }
.vd-preset-atelier .hp-cta { justify-content:center; }
.vd-preset-atelier .hp-trust { justify-content:center; }

.vd-preset-atelier .btn, .vd-preset-atelier .btn-hero, .vd-preset-atelier .btn-hero-ghost { border-radius:0; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; font-weight:600; box-shadow:none; }
.vd-preset-atelier .btn-hero-ghost { border:1px solid var(--vd-color-fg); color:var(--vd-color-fg); }

.vd-preset-atelier .product-card { border:none; border-radius:0; background:transparent; }
.vd-preset-atelier .product-card:hover { transform:none; box-shadow:none; }
.vd-preset-atelier .product-card .thumb { border-radius:0; }
.vd-preset-atelier .product-card .thumb img { transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.vd-preset-atelier .product-card:hover .thumb img { transform:scale(1.05); }
.vd-preset-atelier .product-card .body { padding:14px 2px; text-align:center; }
.vd-preset-atelier .product-grid { gap:34px 26px; }

.vd-preset-atelier .section { padding:88px 0; border-bottom:1px solid var(--vd-color-border); }
.vd-preset-atelier .section > .container > h2, .vd-preset-atelier .hp-head h2 { font-weight:500; font-size:clamp(26px, 3vw, 38px); letter-spacing:0; }
.vd-preset-atelier .hp-head .eye { letter-spacing:.22em; }
.vd-preset-atelier .site-footer { border-top:1px solid var(--vd-color-border); }

/* ---------------------------------------------------------------------------
   BAZAAR — B2C vibrant market. High energy: chunky outlined cards with hard
   offset shadows, thick rounded buttons, tilted badges, fat compact hero with
   the product cluster kept, marquee-feel USP strip.
--------------------------------------------------------------------------- */
.vd-preset-bazaar .site-header { border-bottom:3px solid var(--vd-color-fg); background:var(--vd-color-bg); }
.vd-preset-bazaar .site-header .logo { font-size:26px; font-weight:900; letter-spacing:-.02em; }
.vd-preset-bazaar .site-header nav { font-weight:700; }

.vd-preset-bazaar .hp-hero-inner { padding:52px 0 62px; }
.vd-preset-bazaar .hp-hero h1 { font-weight:900; letter-spacing:-.04em; }
.vd-preset-bazaar .hp-eyebrow { border:2px solid var(--vd-color-fg); background:var(--vd-color-accent); color:var(--vd-color-fg); font-weight:800; box-shadow:3px 3px 0 var(--vd-color-fg); border-radius:8px; }
.vd-preset-bazaar .hp-card { border:2.5px solid var(--vd-color-fg); box-shadow:6px 6px 0 var(--vd-color-fg); border-radius:14px; animation:none; }
.vd-preset-bazaar .hp-blob { display:none; }

.vd-preset-bazaar .btn, .vd-preset-bazaar .btn-hero { border-radius:12px; border:2.5px solid var(--vd-color-fg); box-shadow:4px 4px 0 var(--vd-color-fg); font-weight:800; transition:.12s; }
.vd-preset-bazaar .btn:hover, .vd-preset-bazaar .btn-hero:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--vd-color-fg); }
.vd-preset-bazaar .btn-hero-ghost { border-radius:12px; border:2.5px solid var(--vd-color-fg); font-weight:800; color:var(--vd-color-fg); }

.vd-preset-bazaar .product-card { border:2.5px solid var(--vd-color-fg); border-radius:14px; box-shadow:5px 5px 0 var(--vd-color-fg); }
.vd-preset-bazaar .product-card:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--vd-color-fg); }
.vd-preset-bazaar .product-card .title { font-weight:800; }
.vd-preset-bazaar .hp-badge { border:2px solid var(--vd-color-fg); box-shadow:2px 2px 0 var(--vd-color-fg); transform:rotate(-3deg); font-weight:800; }

.vd-preset-bazaar .hp-usp { border-top:3px solid var(--vd-color-fg); border-bottom:3px solid var(--vd-color-fg); background:var(--vd-color-accent); }
.vd-preset-bazaar .hp-usp .row { font-weight:800; color:var(--vd-color-fg); }
.vd-preset-bazaar .section > .container > h2, .vd-preset-bazaar .hp-head h2 { font-weight:900; letter-spacing:-.03em; }
.vd-preset-bazaar .vd-slider-arrow { border:2.5px solid var(--vd-color-fg); box-shadow:3px 3px 0 var(--vd-color-fg); }

/* ---------------------------------------------------------------------------
   FOUNDRY — B2B industrial datasheet. Dense and utilitarian: zero radius, an
   info topbar feel, split hero with a spec-sheet edge, product cards as
   horizontal data rows (small thumb + facts), squared uppercase buttons.
--------------------------------------------------------------------------- */
.vd-preset-foundry .site-header { border-bottom:2px solid var(--vd-color-fg); background:var(--vd-color-bg); }
.vd-preset-foundry .site-header .bar { height:60px; }
.vd-preset-foundry .site-header .logo { text-transform:uppercase; letter-spacing:.08em; font-size:19px; }
.vd-preset-foundry .site-header nav { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

.vd-preset-foundry .hp-hero { border-bottom:2px solid var(--vd-color-fg); }
.vd-preset-foundry .hp-hero-bg { background:
    linear-gradient(90deg, color-mix(in srgb, var(--vd-color-fg) 4%, var(--vd-color-bg)) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--vd-color-fg) 4%, var(--vd-color-bg)) 1px, var(--vd-color-bg) 1px);
    background-size:32px 32px; }
.vd-preset-foundry .hp-hero-inner { padding:56px 0 64px; gap:28px; }
.vd-preset-foundry .hp-hero h1 { font-size:clamp(32px, 4.4vw, 54px); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.06; }
.vd-preset-foundry .hp-hero h1 .grad { background:none; color:var(--vd-color-primary); }
.vd-preset-foundry .hp-eyebrow { border-radius:0; border:1px solid var(--vd-color-fg); background:var(--vd-color-fg); color:var(--vd-color-bg); text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
.vd-preset-foundry .hp-card { border-radius:0; border:1.5px solid var(--vd-color-fg); box-shadow:none; animation:none; }
.vd-preset-foundry .hp-card .ph { border-radius:0; }
.vd-preset-foundry .hp-blob { display:none; }

.vd-preset-foundry .btn, .vd-preset-foundry .btn-hero, .vd-preset-foundry .btn-hero-ghost { border-radius:0; text-transform:uppercase; letter-spacing:.08em; font-size:13px; font-weight:700; box-shadow:none; }
.vd-preset-foundry .btn-hero-ghost { border:1.5px solid var(--vd-color-fg); color:var(--vd-color-fg); }

/* Product cards become spec rows: thumb left, facts right. */
.vd-preset-foundry .product-grid { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; }
.vd-preset-foundry .product-card { flex-direction:row; border:1.5px solid var(--vd-color-border); border-left:4px solid var(--vd-color-primary); border-radius:0; }
.vd-preset-foundry .product-card:hover { transform:none; box-shadow:none; border-color:var(--vd-color-fg); border-left-color:var(--vd-color-primary); }
.vd-preset-foundry .product-card .thumb { width:118px; min-width:118px; aspect-ratio:auto; }
.vd-preset-foundry .product-card .body { padding:12px 14px; justify-content:center; }
.vd-preset-foundry .product-card .title { font-size:14px; font-weight:700; }

.vd-preset-foundry .section { padding:48px 0; }
.vd-preset-foundry .section > .container > h2, .vd-preset-foundry .hp-head h2 { text-align:left; text-transform:uppercase; font-size:22px; letter-spacing:.04em; border-bottom:2px solid var(--vd-color-fg); padding-bottom:10px; }
.vd-preset-foundry .section .sub, .vd-preset-foundry .hp-head p { text-align:left; }
.vd-preset-foundry .hp-usp { background:var(--vd-color-fg); border:none; }
.vd-preset-foundry .hp-usp .row { color:var(--vd-color-bg); font-weight:600; padding:14px 0; }
.vd-preset-foundry .vd-slider-dots button.on { border-radius:0; }
.vd-preset-foundry .vd-slide-caption { border-radius:0; border-left:4px solid var(--vd-color-primary); }

/* ---------------------------------------------------------------------------
   LEDGER — B2B corporate clean. Airy SaaS-like calm: soft gray canvas, white
   cards with feather shadows, pill buttons, centered concise hero with a
   stats/trust strip, generous whitespace, quiet typography.
--------------------------------------------------------------------------- */
.vd-preset-ledger body, .vd-preset-ledger { background:color-mix(in srgb, var(--vd-color-fg) 3%, var(--vd-color-bg)); }
.vd-preset-ledger .site-header { background:color-mix(in srgb, var(--vd-color-bg) 88%, transparent); }
.vd-preset-ledger .site-header .bar { height:64px; }
.vd-preset-ledger .site-header nav { font-size:14px; }

.vd-preset-ledger .hp-hero-bg { background:radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--vd-color-primary) 8%, var(--vd-color-bg)), var(--vd-color-bg) 70%); }
.vd-preset-ledger .hp-hero-inner { grid-template-columns:1fr; padding:84px 0 72px; text-align:center; }
.vd-preset-ledger .hp-visual, .vd-preset-ledger .hp-blob { display:none; }
.vd-preset-ledger .hp-copy { max-width:720px; margin:0 auto; }
.vd-preset-ledger .hp-hero h1 { font-size:clamp(34px, 4.6vw, 58px); font-weight:700; letter-spacing:-.025em; }
.vd-preset-ledger .hp-hero p.lead { margin-left:auto; margin-right:auto; }
.vd-preset-ledger .hp-eyebrow { background:var(--vd-color-bg); box-shadow:0 1px 3px rgba(15,23,42,.08); border:1px solid var(--vd-color-border); }
.vd-preset-ledger .hp-cta, .vd-preset-ledger .hp-trust { justify-content:center; }
.vd-preset-ledger .hp-trust { border-top:1px solid var(--vd-color-border); padding-top:22px; margin-top:34px; }

.vd-preset-ledger .btn, .vd-preset-ledger .btn-hero { border-radius:10px; box-shadow:0 1px 2px rgba(15,23,42,.12); }
.vd-preset-ledger .btn-hero-ghost { border-radius:10px; background:var(--vd-color-bg); border:1px solid var(--vd-color-border); box-shadow:0 1px 2px rgba(15,23,42,.06); color:var(--vd-color-fg); }

.vd-preset-ledger .product-card { border:1px solid color-mix(in srgb, var(--vd-color-border) 70%, transparent); border-radius:14px; background:var(--vd-color-bg); box-shadow:0 1px 3px rgba(15,23,42,.06); }
.vd-preset-ledger .product-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.09); }
.vd-preset-ledger .product-card .thumb { background:color-mix(in srgb, var(--vd-color-fg) 3%, var(--vd-color-bg)); }

.vd-preset-ledger .section { padding:72px 0; }
.vd-preset-ledger .section > .container > h2, .vd-preset-ledger .hp-head h2 { font-weight:700; letter-spacing:-.02em; }
.vd-preset-ledger .hp-usp { background:var(--vd-color-bg); }
.vd-preset-ledger .site-footer { background:var(--vd-color-bg); border-top:1px solid var(--vd-color-border); }

/* Responsive touch-ups shared by presets */
@media (max-width:820px) {
    .vd-preset-atelier .header-actions { position:static; }
    .vd-preset-atelier .hp-hero-inner { padding:70px 0 80px; }
    .vd-preset-foundry .product-grid { grid-template-columns:1fr; }
}