/* ==========================================================================
BrandStore — supplemental front-end styles (matches prototype v6)
Monochrome black & white. Premium layered depth. Mobile-first verified.
Everything keyed to theme.json tokens, so a /styles tint re-skins via the
single --accent token with no layout change.
========================================================================== */
:root{
--base:var(--wp--preset--color--base);
--base-2:var(--wp--preset--color--base-2);
--ink:var(--wp--preset--color--ink);
--ink-2:var(--wp--preset--color--ink-2);
--body:var(--wp--preset--color--body);
--muted:var(--wp--preset--color--muted);
--line:var(--wp--preset--color--line);
--accent:var(--wp--preset--color--accent);
--accent-strong:var(--wp--preset--color--accent-strong);
--white:var(--wp--preset--color--white);
--ff-serif:var(--wp--preset--font-family--display);
--ff-head:var(--wp--preset--font-family--heading);
--ff-body:var(--wp--preset--font-family--body);
--r-sm:10px;
--r-md:15px; /* Glozin rounded — cards, images, inputs, banners */
--r-lg:18px;
--r-pill:30px; /* Glozin pill buttons */
--pad:var(--wp--custom--content--padding,24px);
--sh-sm:none;
--sh-md:none;
--sh-lg:none;
--sh-btn:none;
--ease:cubic-bezier(.3,1,.3,1);
--speed:.4s;
/* ===== Glozin design tokens (light, single-font look) ===== */
--color-dark:#111111;
--color-text:#444444;
--color-grey:#666666;
--color-primary:#d0473e; /* sale price, sale badge, cart bubble, hover accents */
--beige-band:#ece6dc;
--placeholder-bg:#f4f3f0;
--badge-sale:#d0473e;
--badge-limited:#14854e;
--badge-preorder:#6a33d8;
--badge-new:#3456e6;
--badge-soldout:#666666;
--btn-radius:30px;
--rounded-radius:15px;
--badge-radius:15px;
--container-width:1410px;
--section-spacing:90px;
--input-height:50px;
--heading-weight:600;
--body-weight:400;
--body-line-height:1.714;
--h1-size:40px;--h2-size:36px;--h3-size:30px;--h4-size:24px;--h5-size:18px;--h6-size:16px;
/* back-compat aliases used by woocommerce.css */
--base2:var(--base-2);
--r-btn:var(--r-pill);
--r-card:var(--r-md);
--shadow-card:none;
}
html{scroll-behavior:smooth}
/* Horizontal-overflow safety net. `overflow-x:clip` (not hidden) prevents any
full-bleed/scrollbar-width element from causing a horizontal scrollbar WITHOUT
creating a scroll container — so the sticky header keeps working. min-width:0
lets grid/flex children shrink below their content size instead of pushing the
row wider than the viewport. */
html,body{overflow-x:clip;max-width:100%}
*{min-width:0}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
.bs-wrap{max-width:var(--container-width);box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
/* ---- A11y helpers ------------------------------------------------------ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto;-webkit-clip-path:none;clip-path:none;color:var(--ink);height:auto;width:auto;padding:12px 18px;z-index:100000}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font:600 14px var(--ff-head)}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
/* ---- Icons ------------------------------------------------------------- */
.bs-ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---- Eyebrow (block style) with short underline ------------------------ */
.is-style-eyebrow,p.is-style-eyebrow,h1.is-style-eyebrow,h2.is-style-eyebrow,h3.is-style-eyebrow{
font-family:var(--ff-head)!important;font-size:12px!important;letter-spacing:2.5px;text-transform:uppercase;
color:var(--ink)!important;font-weight:700;display:inline-block;margin:0 0 12px;line-height:1.4;position:relative;padding-bottom:8px
}
.is-style-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--accent)}
.has-text-align-center.is-style-eyebrow::after,.bs-shead.center .is-style-eyebrow::after{left:50%;transform:translateX(-50%)}
/* ---- Buttons (refined; contained; never float) ------------------------ */
.wp-block-button{display:inline-flex}
.wp-block-button__link{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--ff-head);font-size:13px;font-weight:600;letter-spacing:.3px;
border-radius:var(--r-sm);padding:15px 30px;text-align:center;box-shadow:var(--sh-btn);
transition:transform .22s var(--ease),box-shadow .22s,background-color .2s,color .2s;will-change:transform
}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,20,20,.18),0 12px 26px rgba(20,20,20,.2)}
.wp-block-button__link:active{transform:translateY(0)}
.wp-block-button__link .bs-ic{width:15px;height:15px}
/* light (on dark hero/banners) */
.is-style-light .wp-block-button__link,.wp-block-button.is-style-light>.wp-block-button__link{background:#fff!important;color:var(--ink)!important;box-shadow:var(--sh-md)}
.is-style-light .wp-block-button__link:hover{background:#f0f0f0!important}
/* outline (on dark hero) */
.is-style-outline .wp-block-button__link,.wp-block-button.is-style-outline>.wp-block-button__link{
background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.55)!important;color:#fff!important;box-shadow:none;backdrop-filter:blur(2px)
}
.is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.16)!important;border-color:#fff!important;transform:translateY(-2px)}
/* ---- Social pills ------------------------------------------------------ */
.bs-socrow{display:flex;gap:8px;align-items:center}
.bs-soc{width:32px;height:32px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s}
.bs-soc:hover{transform:translateY(-2px)}
.bs-soc .bs-ic{stroke-width:0;fill:#fff;width:16px;height:16px}
.bs-soc--ig .bs-ic{fill:#fff;stroke:none}
/* ---- Editable placeholder --------------------------------------------- */
.bs-ph{background:linear-gradient(135deg,#efeeec,#e7e6e2);display:flex;align-items:center;justify-content:center;color:#a8a6a0;font-size:13px;gap:8px;font-family:var(--ff-body)}
.bs-ph .bs-ic{width:18px;height:18px}
/* ============================ TOP BAR (thin fixed dark strip) =========== */
.bs-topbar{position:fixed;top:0;left:0;right:0;z-index:81;background:var(--ink);color:#cfceca;font-size:12.5px;height:38px;display:flex;align-items:center}
.bs-topbar .bs-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;width:100%;padding-top:0;padding-bottom:0}
.bs-topbar__left{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;min-width:0}
.bs-contact{display:flex;align-items:center;gap:7px;white-space:nowrap}
.bs-topbar a{color:inherit}
.admin-bar .bs-topbar{top:32px}
/* On mobile WP makes the admin bar position:absolute (it scrolls away), so the
fixed bars must sit at the very top — offsetting by 46px leaves a white gap
above the announcement bar once you scroll. */
@media(max-width:782px){.admin-bar .bs-topbar{top:0}}
/* ===== HEADER: transparent over the hero → solid white on scroll ======= */
.bs-header{position:fixed;top:38px;left:0;right:0;z-index:80;
background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);
transition:background .4s var(--ease),box-shadow .4s,border-color .4s,padding .4s var(--ease),color .4s}
.bs-header .bs-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:15px;padding-bottom:15px;transition:padding .4s var(--ease);flex-wrap:nowrap}
.admin-bar .bs-header{top:70px}
@media(max-width:782px){.admin-bar .bs-header{top:38px}}
/* HOMEPAGE header: solid white by default (NOT transparent over the hero) so
the logo and navigation are always clearly visible. The base .bs-header
already provides the white background + dark text; we just no longer override
it to transparent/white-on-hero. The hero's own content sits lower and keeps
its white-on-image styling, so nothing is hidden behind the fixed header. */
/* push non-home page content below the fixed top bar + header */
body:not(.home) #bs-main{padding-top:104px}
@media(max-width:782px){body:not(.home) #bs-main{padding-top:96px}}
/* No gaps between the top-level sections (announcement bar, header, main,
footer). WordPress's blockGap otherwise inserts ~22px between them, which
shows as white space between the header and the hero. */
.wp-site-blocks > *{margin-block-start:0!important;margin-block-end:0!important}
.wp-block-template-part{margin:0}
.bs-topbar,.bs-header,.bs-footer,#bs-main{margin-top:0;margin-bottom:0}
/* …and no blockGap between the homepage sections themselves. Each section
carries its own internal padding, so they stack flush edge-to-edge (Shopify
style) — this removes the white strips between the dark editorial bands. */
#bs-main > *{margin-block-start:0!important;margin-block-end:0!important}
/* Logo + icons never wrap or grow — keeps the header a tight single row (~80px). */
.bs-logo{display:flex;align-items:center;gap:9px;font-family:var(--ff-head);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;flex-shrink:0}
.bs-logo .bs-ic{width:24px;height:24px;color:var(--ink)}
.bs-logo .wp-block-site-title{margin:0;line-height:1.1;white-space:nowrap;font-size:22px}
.bs-logo .wp-block-site-title a{text-decoration:none}
/* brand logo slot: core custom_logo image, or the text-wordmark fallback */
.bs-logo .bs-logo__text{margin:0;line-height:1.1;white-space:nowrap;font:inherit;color:inherit;text-decoration:none}
.bs-logo .custom-logo-link{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.bs-logo img.custom-logo{max-height:42px;width:auto;height:auto;display:block}
.bs-logo .bs-logo__img{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.bs-logo .bs-logo__img img{max-height:42px;max-width:200px;width:auto;height:auto;display:block;object-fit:contain}
.bs-nav .wp-block-navigation__container,.bs-nav ul{gap:26px}
.bs-nav a,.bs-nav .wp-block-navigation-item__content{font-family:var(--ff-head);color:var(--ink-2);font-size:14px;font-weight:600;position:relative;transition:color .2s;text-decoration:none}
.bs-nav a:hover{color:var(--ink)}
.bs-nav .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--ink);transition:width .25s}
.bs-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.bs-nav .current-menu-item .wp-block-navigation-item__content::after{width:100%}
.bs-icons{display:flex;gap:18px;align-items:center;color:var(--ink);font-size:21px;flex-shrink:0;flex-wrap:nowrap}
/* the cart shortcode can get wrapped in a by wpautop — neutralise it */
.bs-icons p{margin:0;padding:0;line-height:1;display:inline-flex;align-items:center}
/* WP injects blockGap vertical margins between flow-group children; kill them
on the header flex rows so the header stays a tight single line (~70px). */
.bs-header .bs-wrap>*,.bs-icons>*,.bs-logo>*{margin-top:0;margin-bottom:0}
.bs-icons button,.bs-icons a{background:none;border:none;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;min-width:24px;min-height:24px}
.bs-icons .bs-ic{transition:transform .15s}
.bs-icons a:hover .bs-ic,.bs-icons button:hover .bs-ic{transform:scale(1.08)}
.bs-cart{display:flex;align-items:center;gap:6px;font:600 14px var(--ff-head);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.bs-icons .bs-burger{display:none}
/* ---- Search drop ------------------------------------------------------- */
/* Search/menu/mini-cart drawers + overlay are defined in the Glozin drawer
block near the end of this file (transform-based side drawers). */
/* ============================== HERO ==================================== */
/* ===== v8 FULL-SCREEN HERO with in-hero search ===== */
.bs-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;width:100%}
.bs-hero__bg{position:absolute;inset:0;background-image:var(--bs-hero-img,linear-gradient(135deg,#33332f,#0e0e0d));background-size:cover;background-position:center}
.bs-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.6),rgba(8,8,8,.34) 42%,rgba(8,8,8,.68))}
.bs-hero__inner{position:relative;z-index:2;max-width:900px;width:100%;padding:140px 24px 60px}
/* Higher specificity (.bs-hero …) so the later base `.bs-eyebrow{color:muted}`
can't win and grey-out the hero eyebrow; shadow keeps it legible over bright
parts of the hero image. */
.bs-hero .bs-eyebrow--hero{color:#fff;margin-bottom:26px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.bs-hero .bs-eyebrow--hero .bs-eyebrow__ln{background:rgba(255,255,255,.6)}
.bs-hero .bs-eyebrow--hero::before{display:none}
.bs-hero__title{font-family:var(--ff-serif);font-weight:600;color:#fff;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance}
.bs-hero__sub{font-family:var(--ff-body);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 38px}
/* in-hero frosted search */
.bs-herosearch{display:flex;gap:10px;max-width:660px;margin:0 auto;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:8px 8px 8px 22px;transition:.3s}
.bs-herosearch:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.bs-herosearch .bs-ic{color:rgba(255,255,255,.85);width:20px;height:20px;align-self:center;flex:none}
.bs-herosearch input{flex:1;min-width:0;border:none;background:transparent;outline:none;color:#fff;font-size:16px;font-family:var(--ff-body)}
.bs-herosearch input::placeholder{color:rgba(255,255,255,.7)}
.bs-herosearch button{flex:none;background:#fff;color:var(--ink);border:none;border-radius:var(--r-pill);padding:13px 30px;font-family:var(--ff-head);font-weight:600;font-size:14px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.bs-herosearch button:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.bs-hero__quick{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bs-hero__quick a{font-family:var(--ff-head);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:8px 16px;transition:.25s}
.bs-hero__quick a:hover{background:#fff;color:var(--ink);border-color:#fff}
.bs-hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-family:var(--ff-head);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.bs-hero__scroll .bar{width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.85),transparent);animation:bsdrop 1.9s var(--ease) infinite}
@media(max-width:600px){
.bs-hero__inner{padding:120px 22px 56px}
.bs-herosearch{flex-direction:column;border-radius:var(--r-md);padding:14px;gap:12px}
.bs-herosearch button{width:100%}
}
/* ============================ TRUST BAR ================================= */
.bs-trust{background:#fff}
.bs-trust .bs-wrap{padding-top:28px;padding-bottom:28px}
.bs-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bs-trust__item{padding:22px 16px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s}
.bs-trust__item:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.bs-trust__item .bs-ic{width:26px;height:26px;color:var(--ink)}
.bs-trust__t{font:600 14px var(--ff-head);color:var(--ink);margin-top:10px}
.bs-trust__s{font-size:12px;color:var(--muted)}
/* ============================== SPLIT =================================== */
.bs-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.bs-split.alt{background:var(--base-2)}
.bs-split__text{padding:72px 56px;align-self:center}
.bs-split__text h2{font-size:33px;margin-bottom:18px}
.bs-split__text p{font-size:15px;color:var(--body);margin-bottom:30px}
.bs-split .bs-ph{min-height:440px}
/* ============================= SECTION ================================== */
.bs-section{padding-top:88px;padding-bottom:88px}
.bs-section.alt{background:var(--base-2)}
.bs-shead{margin-bottom:48px;max-width:680px}
.bs-shead.center{margin-left:auto;margin-right:auto;text-align:center}
.bs-shead .bs-eyebrow{margin-bottom:14px}
.bs-shead{margin-bottom:36px}
.bs-shead.center{text-align:center}
.bs-shead h2{font-size:33px}
.bs-shead p{font-size:15px;color:var(--muted);max-width:560px;margin-top:8px}
.bs-shead.center p{margin-left:auto;margin-right:auto}
/* ===================== BIG CATEGORY SHOWCASE ============================ */
/* Category showcase — editorial 6-col grid (matches prototype v7). Tile
heights come ONLY from grid-auto-rows so every tile aligns flush; the big
tile equals exactly two small rows + the gap. */
/* 3 tiles: a large one (left, 2 rows) + two stacked beside it — full width, flush */
.bs-showcase{display:grid;grid-template-columns:1.6fr 1fr;grid-auto-rows:236px;gap:18px}
.bs-tile{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .26s var(--ease),box-shadow .26s;display:block}
.bs-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.bs-tile .bs-ph{position:absolute;inset:0;background:linear-gradient(135deg,#d9d8d4,#c8c7c2);background-size:cover;background-position:center;transition:transform .9s var(--ease)}
.bs-tile:hover .bs-ph{transform:scale(1.07)}
.bs-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 60%);z-index:1;transition:background .4s}
.bs-tile:hover::after{background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.1) 70%)}
.bs-tile__cap{position:absolute;left:24px;bottom:22px;right:24px;color:#fff;z-index:2}
.bs-tile__cap h3{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.bs-tile__cap span{font-family:var(--ff-head);font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(4px);display:inline-flex;align-items:center;gap:8px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bs-tile:hover .bs-tile__cap span{opacity:.95;transform:none}
.bs-tile__cap .bs-ic{width:14px;height:14px}
/* big tile spans both rows on the left; t-b / t-c stack on the right */
.bs-tile.t-a{grid-column:1;grid-row:span 2}
.bs-tile.t-b{grid-column:2;grid-row:1}
.bs-tile.t-c{grid-column:2;grid-row:2}
/* tablet: big full-width on top, two equal below */
@media(max-width:860px){
.bs-showcase{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
.bs-tile.t-a{grid-column:1 / -1;grid-row:auto}
.bs-tile.t-b{grid-column:1;grid-row:auto}
.bs-tile.t-c{grid-column:2;grid-row:auto}
.bs-tile__cap span{opacity:.95;transform:none}
}
/* mobile: single column, equal heights */
@media(max-width:560px){
.bs-showcase{grid-template-columns:1fr;grid-auto-rows:200px}
.bs-tile.t-a,.bs-tile.t-b,.bs-tile.t-c{grid-column:1}
}
/* ===================== PRODUCT GRID + CARD ============================== */
.bs-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bs-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .26s var(--ease),box-shadow .26s}
.bs-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.bs-card__name{padding:16px 18px;font:600 14px var(--ff-head);color:var(--ink)}
.bs-pwrap{position:relative;overflow:hidden}
.bs-pwrap .bs-ph{height:210px;transition:transform .4s}
.bs-card:hover .bs-pwrap .bs-ph{transform:scale(1.04)}
.bs-qv{position:absolute;left:0;right:0;bottom:0;background:rgba(20,20,20,.86);color:#fff;text-align:center;padding:11px;font:600 13px var(--ff-head);letter-spacing:.3px;transform:translateY(100%);transition:transform .26s;cursor:pointer}
.bs-card:hover .bs-qv{transform:none}
.bs-pbody{padding:18px}
.bs-pcat{font:600 11px var(--ff-head);color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.bs-pname{font:600 15px var(--ff-head);color:var(--ink);margin:6px 0}
.bs-pprice{font:700 18px var(--ff-head);color:var(--ink);margin-bottom:14px}
.bs-atc,.atc{width:100%;border:1px solid var(--ink);color:var(--ink);background:#fff;border-radius:var(--r-sm);padding:13px;font:600 13px var(--ff-head);cursor:pointer;transition:.2s;display:block;text-align:center;text-decoration:none}
.bs-atc:hover,.atc:hover,.bs-atc.added,.atc.added{background:var(--ink);color:#fff;box-shadow:var(--sh-btn)}
/* ===================== 2-UP SPLIT BANNERS =============================== */
.bs-banners{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bs-banner{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:280px;display:flex;align-items:center;box-shadow:var(--sh-sm);transition:transform .26s,box-shadow .26s}
.bs-banner:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.bs-banner .bs-ph{position:absolute;inset:0;background:linear-gradient(135deg,#cfcec9,#bdbcb7)}
.bs-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.15));z-index:1}
.bs-banner__bc{position:relative;z-index:2;padding:40px;color:#fff}
.bs-banner__bc .is-style-eyebrow{color:#fff!important}
.bs-banner__bc .is-style-eyebrow::after{background:#fff}
.bs-banner__bc h3{color:#fff;font-size:24px;margin-bottom:8px}
.bs-banner__bc p{color:#e6e5e1;font-size:14px;margin-bottom:18px;max-width:300px}
/* ========================= NEWSLETTER BAND ============================== */
/* Newsletter: full-bleed dark band (takes the full width edge-to-edge) */
.bs-newsband{background:var(--beige-band);padding:72px 0;border-top:0}
.bs-news{background:transparent;color:var(--color-dark);border-radius:0;padding:0;text-align:center;box-shadow:none;max-width:680px;margin:0 auto}
.bs-news .is-style-eyebrow{color:var(--color-grey)!important;display:block}
.bs-news .is-style-eyebrow::after{display:none}
.bs-news h2{color:var(--color-dark);font-size:var(--h2-size);margin-bottom:12px}
.bs-news p{color:var(--color-text);max-width:480px;margin:0 auto 26px;font-size:15px}
@media(max-width:780px){.bs-newsband{padding:60px 0}}
.bs-news__form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap}
.bs-news__form input{flex:1;min-width:200px;padding:15px 18px;border:none;border-radius:var(--r-sm);font-size:15px;font-family:var(--ff-body)}
.bs-news__form .wp-block-button__link{background:#fff;color:var(--ink)}
.bs-news__form .wp-block-button__link:hover{background:#f0f0f0}
.bs-news__fine{font-size:11px;color:#8d8c87;margin-top:14px}
/* ============================== FAQ ===================================== */
.bs-faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.bs-fitem{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .2s}
.bs-fitem[open]{box-shadow:var(--sh-md)}
.bs-fitem>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;font:600 16px var(--ff-head);color:var(--ink);list-style:none}
.bs-fitem>summary::-webkit-details-marker{display:none}
.bs-fitem>summary .bs-ic{color:var(--muted);transition:transform .25s,color .25s;width:20px;height:20px}
.bs-fitem[open]>summary .bs-ic{transform:rotate(180deg);color:var(--ink)}
.bs-fitem__a{padding:0 22px 22px;font-size:14px;color:var(--body)}
.bs-fitem__a p{font-size:14px;color:var(--body)}
/* ============================= BRANDS =================================== */
.bs-brands{text-align:center}
.bs-brands p{font-size:13px;color:var(--muted);max-width:640px;margin:0 auto 34px}
.bs-brandrow{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.bs-brandrow span{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:18px 38px;font:600 13px var(--ff-head);color:var(--muted);transition:transform .2s,box-shadow .2s}
.bs-brandrow span:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
/* ========================= MARQUEE TICKER =============================== */
.bs-marquee{background:var(--ink);color:#fff;overflow:hidden;padding:15px 0}
.bs-marquee__track{display:flex;align-items:center;width:max-content;animation:bs-scroll 36s linear infinite;will-change:transform}
.bs-marquee:hover .bs-marquee__track{animation-play-state:paused}
.bs-marquee__item{display:inline-flex;align-items:center;gap:10px;padding:0 24px;font:600 12.5px var(--ff-head);letter-spacing:1.2px;white-space:nowrap;text-transform:uppercase}
.bs-marquee__item .bs-ic{width:16px;height:16px;color:#fff;opacity:.65}
.bs-marquee__sep{opacity:.35;font-size:11px}
@keyframes bs-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bs-marquee__track{animation:none;width:auto;justify-content:center;flex-wrap:wrap;gap:8px}}
/* ========================= TESTIMONIALS ================================ */
.bs-reviews .bs-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bs-review{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:30px 28px;transition:transform .26s var(--ease),box-shadow .26s;margin:0;display:flex;flex-direction:column}
.bs-review:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.bs-review__stars{display:flex;gap:3px;margin-bottom:16px}
.bs-review__stars .bs-ic{width:17px;height:17px;fill:var(--ink);stroke:none}
.bs-review__text{font-family:var(--ff-body);font-size:15px;line-height:1.7;color:var(--body);margin:0 0 20px;flex:1}
.bs-review__author{display:flex;align-items:center;gap:12px;margin:0}
.bs-review__avatar{width:44px;height:44px;border-radius:var(--r-pill);background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px var(--ff-head);flex:none}
.bs-review__name{font:600 14px var(--ff-head);color:var(--ink)}
.bs-review__role{font-size:12px;color:var(--muted)}
/* ============================= FOOTER =================================== */
.bs-footer{background:var(--ink);color:#9b988f;padding:72px 0 28px}
.bs-footer a{color:inherit;text-decoration:none}
.bs-fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid #2c2b27}
.bs-flogo{font:800 22px var(--ff-head);color:#fff;margin-bottom:16px;letter-spacing:-.01em}
.bs-flogo .wp-block-site-title,.bs-flogo a{color:#fff!important;font-family:var(--ff-head);font-weight:800}
.bs-footer p{font-size:13.5px;line-height:1.7;margin-bottom:18px;max-width:300px}
.bs-fnap{font-size:13px;line-height:2.1;display:flex;flex-direction:column;gap:4px}
.bs-fnap span{display:flex;align-items:center;gap:9px}
.bs-fnap .bs-ic{width:15px;height:15px;color:#fff;opacity:.55}
.bs-fcol h3,.bs-fcol h4{color:#fff;font:700 12px var(--ff-head);letter-spacing:1.6px;text-transform:uppercase;margin-bottom:18px;position:relative;padding-bottom:10px}
.bs-fcol h3::after,.bs-fcol h4::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:#54524c}
.bs-fcol a{display:block;font-size:13.5px;padding:6px 0;transition:color .2s,transform .2s}
.bs-fcol a:hover{color:#fff;transform:translateX(4px)}
.bs-fbottom{margin-top:26px;padding-top:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.bs-pay{background:#fff;color:var(--ink);border-radius:var(--r-sm);height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font:700 12px var(--ff-head);box-shadow:var(--sh-sm)}
.bs-paywrap{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bs-copy{font-size:12px;color:#a09e98}
/* ====================== FAB (chat + back-to-top) ======================== */
.bs-fab{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;align-items:flex-end}
.bs-fab button{width:56px;height:56px;border-radius:var(--r-pill);border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);transition:transform .2s}
.bs-fab button:hover{transform:translateY(-2px)}
.bs-fab button .bs-ic{width:24px;height:24px}
#bs-topBtn{background:#fff;color:var(--ink);width:46px;height:46px;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;border:1px solid var(--line)}
#bs-topBtn.is-show{opacity:1;pointer-events:auto}
/* ======================= COOKIE CONSENT (bottom bar) =================== */
.bs-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:85;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 22px;display:none;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;box-shadow:var(--sh-lg);max-width:1000px;margin:0 auto}
.bs-cookie.is-open{display:flex}
.bs-cookie p{font-size:13px;color:var(--body);max-width:600px;margin:0}
.bs-cookie__actions{display:flex;gap:10px;flex-shrink:0}
.bs-cookie__actions button{font:600 13px var(--ff-head);padding:11px 20px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--ink);transition:.2s}
.bs-cookie__actions .ghost{background:#fff;color:var(--ink)}
.bs-cookie__actions .ghost:hover{background:var(--base-2)}
.bs-cookie__actions .solid{background:var(--ink);color:#fff;box-shadow:var(--sh-btn)}
.bs-cookie__actions .solid:hover{background:#000}
/* ============================ SCROLL REVEAL ============================= */
.bs-reveal{transition:opacity .6s,transform .6s}
/* Hidden until revealed on scroll. The failsafe animation GUARANTEES the section
becomes visible even if the reveal JS is delayed or blocked (e.g. LiteSpeed
"delay JS" on mobile) — otherwise a section can stay invisible and show as a
white gap (e.g. between the value marquee and the About image). */
.bs-js .bs-reveal{opacity:0;transform:translateY(22px);animation:bsRevealSafe .5s var(--ease) 1.6s forwards}
.bs-js .bs-reveal.is-in{opacity:1;transform:none;animation:none}
@keyframes bsRevealSafe{to{opacity:1;transform:none}}
/* Full-bleed sections sit flush against their neighbours (e.g. the About image
directly under the value marquee). A translateY reveal shifts them down and
exposes a thin white strip above them, so these fade in place — no shift. */
.bs-js .bs-asplit-section.bs-reveal,
.bs-js .bs-edsplit.bs-reveal,
.bs-js .bs-circlesec.bs-reveal{transform:none}
@media(prefers-reduced-motion:reduce){
.bs-js .bs-reveal{opacity:1;transform:none;transition:none;animation:none}
html{scroll-behavior:auto}
}
/* ====================== MOBILE STICKY ADD-TO-CART ======================= */
.bs-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:75;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(20,20,20,.08);display:none;align-items:center;gap:12px;padding:10px 16px;transform:translateY(110%);transition:transform .3s var(--ease)}
.bs-sticky-atc.is-show{transform:none}
.bs-sticky-atc__info{display:flex;align-items:center;gap:10px;min-width:0}
.bs-sticky-atc__info img,.bs-sticky-atc__info .bs-ph{width:42px;height:42px;border-radius:var(--r-sm);flex:none;object-fit:cover}
.bs-sticky-atc__name{font:600 13px var(--ff-head);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.bs-sticky-atc__price{font:700 14px var(--ff-head);color:var(--ink)}
.bs-sticky-atc__btn{margin-left:auto;flex:none}
/* ============================ RESPONSIVE =============================== */
@media(max-width:900px){
.bs-nav{display:none}
.bs-icons .bs-burger{display:inline-flex}
.bs-split{grid-template-columns:1fr}
.bs-split .bs-ph{order:1;min-height:280px}
.bs-split__text{order:2;padding:44px 24px}
.bs-grid4{grid-template-columns:repeat(2,1fr);gap:16px}
.bs-fgrid{grid-template-columns:1fr 1fr}
.bs-section{padding-top:44px;padding-bottom:44px}
.bs-shead h2,.bs-split__text h2{font-size:27px}
.bs-trust__grid{grid-template-columns:repeat(2,1fr)}
.bs-banners{grid-template-columns:1fr}
.bs-news{padding:40px 24px}
.bs-news h2{font-size:25px}
.bs-reviews .bs-grid3{grid-template-columns:1fr}
.bs-marquee__item{font-size:11.5px;padding:0 16px}
}
/* ---- Mobile: trim header/top-bar chrome so content comes sooner ------- */
@media(max-width:782px){
/* keep the top bar minimal — just the free-shipping note */
.bs-topbar__left .bs-contact,.bs-topbar__left .bs-socrow{display:none}
.bs-topbar .bs-wrap{justify-content:center}
.bs-topbar__left{display:none}
/* compact header: icons tighter, cart shows count only */
.bs-header .bs-wrap{padding-top:11px;padding-bottom:11px;gap:10px}
.bs-icons{gap:15px;font-size:20px}
.bs-cart__sep{display:none}
.bs-icons .bs-icon-acct,.bs-icons .bs-icon-wish{display:none}
/* logo: shrink font so normal names fit fully; ellipsis only as a last
resort for unusually long site titles (prevents header overflow) */
.bs-logo,.bs-logo .wp-block-site-title{font-size:18px;flex-shrink:1;min-width:0}
.bs-logo .wp-block-site-title{overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:520px){
.bs-fgrid{grid-template-columns:1fr}
.bs-cookie{flex-direction:column;text-align:center}
.bs-cookie__actions{width:100%}
.bs-cookie__actions button{flex:1}
.bs-logo,.bs-logo .wp-block-site-title{font-size:16.5px}
}
/* ====================== DEMO IMAGERY (bundled, neutral) =================
Real grayscale placeholder images so a fresh install shows a complete
homepage out of the box. URLs are relative to this file (assets/css/),
so they work on any install path. Merchants replace these per brand. */
.bs-ph[class*="bs-ph--"]{background-size:cover!important;background-position:center!important;background-repeat:no-repeat;font-size:0;color:transparent}
.bs-ph[class*="bs-ph--"] .bs-ic{display:none}
.bs-ph--about{background-image:url(../img/about.svg)}
.bs-ph--editorial{background-image:url(../img/editorial.svg)}
.bs-tile .bs-ph--cat1{background-image:url(../img/cat-1.svg)}
.bs-tile .bs-ph--cat2{background-image:url(../img/cat-2.svg)}
.bs-tile .bs-ph--cat3{background-image:url(../img/cat-3.svg)}
.bs-tile .bs-ph--cat4{background-image:url(../img/cat-4.svg)}
.bs-tile .bs-ph--cat5{background-image:url(../img/cat-5.svg)}
.bs-banner .bs-ph--banner1{background-image:url(../img/banner-1.svg)}
.bs-banner .bs-ph--banner2{background-image:url(../img/banner-2.svg)}
/* ---- Native contact form (Kontakt) ------------------------------------ */
.bs-contact-heading{font-family:var(--ff-head);font-size:22px;margin:0 0 18px}
.bs-contact-form{display:flex;flex-direction:column;gap:16px}
.bs-contact-form .bs-form-row{display:flex;gap:16px}
.bs-contact-form .bs-form-row .bs-field{flex:1}
.bs-contact-form .bs-field{display:flex;flex-direction:column;gap:7px}
.bs-contact-form .bs-field>span{font-family:var(--ff-head);font-weight:600;font-size:13px;color:var(--ink)}
.bs-contact-form input,.bs-contact-form textarea{
width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
padding:13px 15px;font:400 15px var(--ff-body);color:var(--ink);transition:border-color .15s,box-shadow .15s
}
.bs-contact-form input:focus,.bs-contact-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.bs-contact-form textarea{resize:vertical;min-height:130px}
.bs-contact-form .bs-form-submit{
align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:14px 30px;
font:600 14px var(--ff-head);box-shadow:var(--sh-btn);transition:transform .2s var(--ease),background .2s
}
.bs-contact-form .bs-form-submit:hover{background:#000;transform:translateY(-2px)}
.bs-contact-form .bs-form-submit .bs-ic{width:16px;height:16px}
.bs-form-note{display:flex;align-items:center;gap:9px;border-radius:var(--r-md);padding:14px 16px;font-size:14px;font-family:var(--ff-head);font-weight:600;margin:0}
.bs-form-note .bs-ic{width:18px;height:18px;flex:none}
.bs-form-note--ok{background:#f1f6f1;color:#1f6b2e;border:1px solid #cfe6d3}
.bs-form-note--err{background:#fbf2f2;color:#a3271f;border:1px solid #ecd2cf}
@media(max-width:600px){.bs-contact-form .bs-form-row{flex-direction:column;gap:16px}.bs-contact-form .bs-form-submit{align-self:stretch;justify-content:center}}
/* ============================ PAGE: ABOUT ============================ */
/* ==========================================================================
Über uns / About page — page-about.css
Premium monochrome sections. Uses theme tokens from brandstore.css.
Classes: bs-about-hero, bs-about-stats, bs-about-stat, bs-about-split,
bs-about-ph, bs-about-values, bs-about-value, bs-about-mission,
bs-about-cta, bs-btn.
========================================================================== */
/* --- Hero --------------------------------------------------------------- */
.bs-about-hero__head {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.bs-about-hero__head .is-style-eyebrow {
display: inline-block;
}
.bs-about-hero__title {
font-family: var(--ff-head);
font-size: clamp(38px, 6vw, 60px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 18px 0 0;
color: var(--ink);
}
.bs-about-hero__lead {
font-family: var(--ff-body);
font-size: clamp(16px, 2vw, 19px);
line-height: 1.7;
color: var(--body);
margin: 22px auto 0;
max-width: 640px;
}
/* --- Stat band ---------------------------------------------------------- */
.bs-about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 56px;
padding-top: 48px;
border-top: 1px solid var(--line);
}
.bs-about-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
position: relative;
}
.bs-about-stat:not(:last-child)::after {
content: "";
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 46px;
background: var(--line);
}
.bs-about-stat__n {
font-family: var(--ff-head);
font-weight: 800;
font-size: clamp(32px, 4.5vw, 44px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.bs-about-stat__l {
font-family: var(--ff-body);
font-size: 13.5px;
line-height: 1.4;
color: var(--muted);
max-width: 160px;
}
/* --- Story split -------------------------------------------------------- */
.bs-about-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.bs-about-split__media {
position: relative;
}
.bs-about-ph {
border-radius: var(--r-lg);
overflow: hidden;
min-height: 440px;
box-shadow: var(--sh-md);
background: linear-gradient(135deg, #e7e6e2, #d3d2cd);
}
.bs-about-ph.bs-ph--banner1 {
background-image: url(../img/banner-1.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bs-about-split__text .is-style-eyebrow {
display: inline-block;
}
.bs-about-split__text h2 {
font-family: var(--ff-head);
font-size: clamp(26px, 3.4vw, 34px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 16px 0 0;
color: var(--ink);
}
.bs-about-split__text p {
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.75;
color: var(--body);
margin: 18px 0 0;
}
/* --- Values grid -------------------------------------------------------- */
.bs-about-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.bs-about-value {
background: var(--base);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 34px 30px;
transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.bs-about-value:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lg);
border-color: transparent;
}
.bs-about-value__ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: var(--ink);
color: #fff;
margin-bottom: 20px;
}
.bs-about-value__ic .bs-ic {
width: 22px;
height: 22px;
}
.bs-about-value h3 {
font-family: var(--ff-head);
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--ink);
}
.bs-about-value p {
font-family: var(--ff-body);
font-size: 15px;
line-height: 1.7;
color: var(--body);
margin: 0;
}
/* --- Mission band ------------------------------------------------------- */
.bs-about-mission__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.bs-about-mission__inner .is-style-eyebrow {
display: inline-block;
}
.bs-about-mission__quote {
font-family: var(--ff-head);
font-weight: 600;
font-size: clamp(24px, 3.6vw, 34px);
line-height: 1.32;
letter-spacing: -0.015em;
color: var(--ink);
margin: 22px 0 0;
border: 0;
padding: 0;
}
.bs-about-mission__by {
font-family: var(--ff-body);
font-size: 15px;
color: var(--muted);
margin-top: 24px;
letter-spacing: .01em;
}
/* --- CTA band ----------------------------------------------------------- */
.bs-about-cta {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.bs-about-cta .is-style-eyebrow {
display: inline-block;
}
.bs-about-cta h2 {
font-family: var(--ff-head);
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 16px 0 0;
color: var(--ink);
}
.bs-about-cta p {
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.7;
color: var(--body);
margin: 18px auto 0;
max-width: 540px;
}
.bs-about-cta__btn {
margin-top: 30px;
}
/* Standalone pill button (monochrome) */
.bs-btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--ff-body);
font-weight: 600;
font-size: 15px;
line-height: 1;
color: #fff;
background: var(--ink);
border: 1px solid var(--ink);
border-radius: var(--r-pill);
padding: 16px 30px;
text-decoration: none;
cursor: pointer;
box-shadow: var(--sh-btn);
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.bs-btn:hover {
transform: translateY(-2px);
background: var(--ink-2, #000);
box-shadow: 0 4px 10px rgba(20, 20, 20, .18), 0 12px 26px rgba(20, 20, 20, .2);
}
.bs-btn:active {
transform: translateY(0);
}
.bs-btn .bs-ic {
width: 15px;
height: 15px;
transition: transform .2s var(--ease);
}
.bs-btn:hover .bs-ic {
transform: translateX(3px);
}
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.bs-about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 32px 24px;
}
.bs-about-stat:nth-child(2)::after {
display: none;
}
.bs-about-values {
grid-template-columns: 1fr;
}
.bs-about-split {
grid-template-columns: 1fr;
gap: 32px;
}
.bs-about-ph {
min-height: 300px;
}
}
@media (max-width: 600px) {
.bs-about-stats {
grid-template-columns: 1fr 1fr;
margin-top: 40px;
padding-top: 36px;
}
.bs-about-stat::after {
display: none !important;
}
.bs-about-value {
padding: 28px 24px;
}
.bs-btn {
/* Keep the desktop pill identity on mobile: auto width (not a full-bleed
bar), just slightly tighter padding/type so it stays proportional. */
width: auto;
max-width: 100%;
font-size: 14px;
padding: 14px 26px;
justify-content: center;
}
}
/* ============================ PAGE: FAQ ============================== */
/* =========================================================================
* page-faq.css — Enrichments for the FAQ pattern (brandstore/faq-accordion).
*
* The base .bs-faq / .bs-fitem / .bs-shead styles live in brandstore.css.
* This file ONLY adds the new "Noch Fragen?" contact CTA card and keeps the
* FAQ column to a readable, centered width on both the FAQ page and the
* homepage section.
* ========================================================================= */
/* Keep the accordion + CTA on one comfortable reading column. */
#faq .bs-faq{max-width:820px}
/* ---- Contact CTA card ---------------------------------------------------- */
.bs-faq-cta{
max-width:820px;
margin:40px auto 0;
padding:40px 32px;
text-align:center;
background:var(--base-2);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-sm);
display:flex;
flex-direction:column;
align-items:center;
}
.bs-faq-cta__ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
margin-bottom:18px;
border-radius:var(--r-pill);
background:#fff;
border:1px solid var(--line);
color:var(--ink);
box-shadow:var(--sh-sm);
}
.bs-faq-cta__ic svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bs-faq-cta__title{
margin:0 0 8px;
font-family:var(--ff-head);
font-size:21px;
font-weight:700;
line-height:1.25;
color:var(--ink);
}
.bs-faq-cta__text{
margin:0 0 22px;
max-width:440px;
font-family:var(--ff-body);
font-size:15px;
line-height:1.6;
color:var(--muted);
}
.bs-faq-cta__btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 30px;
font:600 14px var(--ff-head);
letter-spacing:.3px;
text-decoration:none;
color:#fff;
background:var(--ink);
border-radius:var(--r-pill);
box-shadow:var(--sh-btn);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),opacity .2s var(--ease);
will-change:transform;
}
.bs-faq-cta__btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md,0 10px 24px rgba(0,0,0,.12));opacity:.95}
.bs-faq-cta__btn:active{transform:translateY(0)}
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:600px){
.bs-faq-cta{padding:32px 22px;margin-top:30px}
.bs-faq-cta__ic{width:50px;height:50px;margin-bottom:14px}
.bs-faq-cta__ic svg{width:23px;height:23px}
.bs-faq-cta__title{font-size:19px}
.bs-faq-cta__text{font-size:14px}
.bs-faq-cta__btn{width:100%}
}
/* ============================ PAGE: TRACK ORDER ===================== */
/* ==========================================================================
Bestellung verfolgen — 3-step status strip
Scoped styles for the track-order page. Only NEW classes live here;
.bs-track-card / .bs-track-hint are defined in woocommerce.css.
========================================================================== */
.bs-track-steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
position:relative;
margin:32px 0 8px;
padding:0;
list-style:none;
}
/* connecting line behind the circles */
.bs-track-steps::before{
content:"";
position:absolute;
top:24px;
left:16.666%;
right:16.666%;
height:1px;
background:var(--line);
z-index:0;
}
.bs-track-step{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:0 8px;
}
.bs-track-step__circle{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:var(--r-pill,999px);
background:var(--base);
border:1px solid var(--line);
color:var(--ink);
margin-bottom:14px;
box-shadow:var(--sh-sm);
transition:transform .25s var(--ease,ease),background .25s var(--ease,ease);
}
.bs-track-step__circle .bs-ic{
width:20px;
height:20px;
display:block;
}
/* "done" / active styling — filled ink circle */
.bs-track-step.is-done .bs-track-step__circle{
background:var(--ink);
border-color:var(--ink);
color:var(--base);
}
.bs-track-step__label{
font-family:var(--ff-head);
font-weight:600;
font-size:14px;
line-height:1.3;
color:var(--ink);
margin:0 0 4px;
}
.bs-track-step__sub{
font-family:var(--ff-body);
font-size:12.5px;
line-height:1.45;
color:var(--muted);
margin:0;
max-width:18ch;
}
.bs-track-form-intro{
font-family:var(--ff-head);
font-weight:600;
font-size:14px;
color:var(--ink);
margin:0 0 14px;
}
/* ---------- Mobile: stack vertically with a vertical connector ---------- */
@media(max-width:600px){
.bs-track-steps{
grid-template-columns:1fr;
gap:22px;
margin:24px 0 4px;
}
.bs-track-steps::before{
top:0;
bottom:0;
left:23px;
right:auto;
width:1px;
height:auto;
}
.bs-track-step{
flex-direction:row;
align-items:center;
text-align:left;
gap:16px;
padding:0;
}
.bs-track-step__circle{
width:48px;
height:48px;
margin-bottom:0;
flex:0 0 48px;
}
.bs-track-step__sub{
max-width:none;
}
}
/* ====================================================================== */
/* HOME — Editorial sections (full-bleed hero band, numbered splits, quote */
/* band). Premium magazine-style layout, monochrome. */
/* ====================================================================== */
/* --- Editorial hero band --- */
.bs-edhero{position:relative;width:100%;min-height:540px;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink)}
.bs-edhero__bg{position:absolute;inset:0;background-image:url(../img/editorial.svg);background-size:cover;background-position:center;opacity:.5;transition:transform 8s var(--ease)}
.bs-edhero:hover .bs-edhero__bg{transform:scale(1.04)}
.bs-edhero__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,15,15,.92) 0%,rgba(15,15,15,.6) 52%,rgba(15,15,15,.12) 100%)}
.bs-edhero__inner{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:0 clamp(24px,5vw,80px) clamp(48px,6vw,76px)}
.bs-edhero__tag{display:inline-block;font-family:var(--ff-head);font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:6px;margin-bottom:26px}
.bs-edhero__title{font-family:var(--ff-head);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 20px;max-width:13ch}
.bs-edhero__title em{font-style:italic;font-weight:500;color:rgba(255,255,255,.78)}
.bs-edhero__body{font-family:var(--ff-body);font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);margin:0 0 34px;max-width:42ch}
.bs-edhero__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;background:#fff;color:var(--ink);text-decoration:none;border-radius:var(--r-pill);font-family:var(--ff-head);font-size:13px;font-weight:600;letter-spacing:.3px;transition:transform .2s var(--ease),gap .2s,background .2s}
.bs-edhero__cta:hover{transform:translateY(-2px);gap:14px;background:#f1f1ef}
.bs-edhero__cta .bs-ic{width:15px;height:15px}
/* --- Numbered editorial split --- */
.bs-edsplit{display:grid;grid-template-columns:1fr 1fr;min-height:480px;background:#fff}
.bs-edsplit__img{position:relative;overflow:hidden;background:var(--base-2);min-height:420px;background-size:cover;background-position:center}
.bs-edsplit__img--1{background-image:url(../img/banner-1.svg)}
.bs-edsplit__img--2{background-image:url(../img/banner-2.svg)}
.bs-edsplit__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.12),rgba(20,20,20,.32))}
.bs-edsplit__numbg{position:absolute;top:26px;left:30px;z-index:2;font-family:var(--ff-head);font-weight:700;font-size:110px;line-height:1;color:rgba(255,255,255,.22);pointer-events:none}
.bs-edsplit__content{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,76px);background:#fff}
.bs-edsplit__num{font-family:var(--ff-head);font-style:italic;font-size:13px;color:var(--muted);margin-bottom:12px}
.bs-edsplit__tag{font-family:var(--ff-head);font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.bs-edsplit__title{font-family:var(--ff-head);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:0 0 20px;max-width:18ch}
.bs-edsplit__rule{width:42px;height:2px;background:var(--ink);margin-bottom:22px}
.bs-edsplit__body{font-family:var(--ff-body);font-size:16.5px;line-height:1.85;color:var(--body);margin:0 0 34px;max-width:52ch}
.bs-edsplit__content{gap:0}
.bs-edsplit__cta{display:inline-flex;align-items:center;gap:9px;width:fit-content;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:4px;transition:gap .2s var(--ease),opacity .2s}
.bs-edsplit__cta:hover{gap:14px;opacity:.7}
.bs-edsplit__cta .bs-ic{width:14px;height:14px}
/* reverse: content on the left, image on the right */
.bs-edsplit--reverse .bs-edsplit__img{order:2}
/* dark variant */
.bs-edsplit--dark{background:var(--ink)}
.bs-edsplit--dark .bs-edsplit__content{background:var(--ink)}
.bs-edsplit--dark .bs-edsplit__num{color:rgba(255,255,255,.72)}
.bs-edsplit--dark .bs-edsplit__tag{color:rgba(255,255,255,.85)}
.bs-edsplit--dark .bs-edsplit__title{color:#fff}
.bs-edsplit--dark .bs-edsplit__rule{background:#fff}
.bs-edsplit--dark .bs-edsplit__body{color:rgba(255,255,255,.82)}
.bs-edsplit--dark .bs-edsplit__cta{color:#fff;border-color:#fff}
/* --- Editorial quote band --- */
.bs-edband{position:relative;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center;min-height:300px;padding:64px 24px}
.bs-edband__bg{position:absolute;inset:0;background-image:url(../img/about.svg);background-size:cover;background-position:center;opacity:.16}
.bs-edband__inner{position:relative;z-index:2;text-align:center;max-width:920px;padding:0 24px}
.bs-edband__mark{display:block;font-family:var(--ff-head);font-weight:700;font-size:80px;line-height:.4;color:rgba(255,255,255,.32);margin-bottom:26px}
.bs-edband__quote{font-family:var(--ff-head);font-weight:500;font-style:italic;font-size:clamp(22px,3vw,34px);line-height:1.34;color:#fff;margin:0 0 22px}
.bs-edband__attr{font-family:var(--ff-head);font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0}
@media(max-width:900px){
.bs-edsplit{grid-template-columns:1fr}
.bs-edsplit__img{min-height:300px;order:0!important}
.bs-edsplit--reverse .bs-edsplit__img{order:0}
.bs-edhero{min-height:460px}
}
@media(max-width:600px){
.bs-edhero{min-height:420px}
.bs-edsplit__numbg{font-size:84px;top:18px;left:20px}
.bs-edband__quote{font-size:22px}
}
/* ---- Legal / policy pages (readable long-form typography) -------------- */
.bs-legal .bs-wrap{line-height:1.75}
.bs-legal h1{font-family:var(--ff-head);font-size:clamp(30px,4vw,40px);letter-spacing:-.01em;margin:6px 0 26px}
.bs-legal h2{font-family:var(--ff-head);font-size:21px;margin:38px 0 12px;letter-spacing:-.005em}
.bs-legal p,.bs-legal li{font-family:var(--ff-body);font-size:15.5px;color:var(--body);line-height:1.8}
.bs-legal p{margin:0 0 16px}
.bs-legal ul,.bs-legal ol{margin:0 0 18px;padding-left:22px}
.bs-legal li{margin-bottom:7px}
.bs-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.bs-legal strong{color:var(--ink)}
/* 1.15.5 — defensive: when the body content is pushed via wp:post-content as
raw HTML (the builder path), WordPress wraps it in
`
`.
The `:where(.is-layout-constrained) > *{margin-block-start:1.4rem}` core
rule has specificity 0,1,1 — same as `.bs-legal p` — so on some browsers
and through some caches the cascade can flip and the typography fails to
apply. These rules use the deeper descendant selector
`.bs-legal .entry-content` (specificity 0,2,0) so they always win, and
add `!important` to font-family as a final safety belt — the user-reported
"default font" symptom only fully resolves when font-family is locked in. */
.bs-legal .entry-content,
.bs-legal .wp-block-post-content{font-family:var(--ff-body)!important;color:var(--body);line-height:1.8;font-size:15.5px}
.bs-legal .entry-content h1,
.bs-legal .entry-content h2,
.bs-legal .entry-content h3,
.bs-legal .wp-block-post-content h1,
.bs-legal .wp-block-post-content h2,
.bs-legal .wp-block-post-content h3{font-family:var(--ff-head)!important;letter-spacing:-.005em}
.bs-legal .entry-content h1,
.bs-legal .wp-block-post-content h1{font-size:clamp(30px,4vw,40px);margin:6px 0 26px}
.bs-legal .entry-content h2,
.bs-legal .wp-block-post-content h2{font-size:21px;margin:38px 0 12px}
.bs-legal .entry-content h3,
.bs-legal .wp-block-post-content h3{font-size:17px;margin:28px 0 10px}
.bs-legal .entry-content p,
.bs-legal .entry-content li,
.bs-legal .wp-block-post-content p,
.bs-legal .wp-block-post-content li{font-family:var(--ff-body)!important;font-size:15.5px;color:var(--body);line-height:1.8}
.bs-legal .entry-content p,
.bs-legal .wp-block-post-content p{margin:0 0 16px}
.bs-legal .entry-content ul,.bs-legal .entry-content ol,
.bs-legal .wp-block-post-content ul,.bs-legal .wp-block-post-content ol{margin:0 0 18px;padding-left:22px}
.bs-legal .entry-content li,
.bs-legal .wp-block-post-content li{margin-bottom:7px}
.bs-legal .entry-content a,
.bs-legal .wp-block-post-content a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.bs-legal .entry-content strong,
.bs-legal .wp-block-post-content strong{color:var(--ink)}
.bs-legal .entry-content hr,
.bs-legal .wp-block-post-content hr{border:0;border-top:1px solid var(--line);margin:38px 0}
/* ====================================================================== */
/* v7 PROTOTYPE PARITY — numbered eyebrows, stats, about-split, editorial */
/* pull-quote, scrolling brand marquee, hero scroll cue, FAQ plus→×. */
/* ====================================================================== */
/* Numbered eyebrow: "01 — Text". Works on .is-style-eyebrow[data-n] and the
inline .bs-eyebrow span used in homepage sections. */
.is-style-eyebrow[data-n]{display:inline-flex;align-items:center;gap:10px;padding-bottom:0}
.is-style-eyebrow[data-n]::after{display:none}
.is-style-eyebrow[data-n]::before{display:none}
.bs-eyebrow{font-family:var(--ff-head);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:10px}
.bs-eyebrow::before{display:none}
.bs-eyebrow .bs-eyebrow__ln{width:30px;height:1px;background:var(--line)}
/* Hero: numbered eyebrow on dark + scroll-down cue */
@keyframes bsdrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Stats band */
.bs-stats{padding:74px 0}
.bs-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.bs-stat{background:#fff;padding:38px 24px;text-align:center}
.bs-stat__n{font-family:var(--ff-head);font-weight:800;font-size:clamp(2rem,3.4vw,3rem);color:var(--ink);letter-spacing:-.03em;line-height:1}
.bs-stat__l{font-size:12.5px;color:var(--muted);margin-top:10px;letter-spacing:.3px}
/* About split with "Seit 2014" badge */
/* ===== Full-bleed magazine about split (image edge-to-edge) ===== */
.bs-asplit-section{width:100%;overflow:clip}
/* wpautop injects a stray empty
as a direct child of the shortcode-rendered
split. As a grid item it adds a ~30px blank row that, on mobile (media order:1,
text order:2), sorts to the TOP and shows as a white strip above the image.
The only intended children are __media and __text, so drop any direct
. */
.bs-asplit>p{display:none}
.bs-asplit{display:grid;grid-template-columns:1.18fr 1fr;align-items:stretch;min-height:clamp(560px,52vw,720px);background:#fff;width:100%;position:relative}
.bs-asplit__media{position:relative;overflow:visible;background:var(--base-2)}
.bs-asplit__img{position:absolute;inset:0;overflow:hidden}
.bs-asplit__media .bs-ph{position:absolute;inset:0;background-size:cover;background-position:center;background-image:url(../img/about.svg);transition:transform 1.1s var(--ease)}
.bs-asplit:hover .bs-asplit__media .bs-ph{transform:scale(1.05)}
.bs-asplit__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,0) 55%,rgba(20,20,20,.22))}
/* clean card overlapping the inner image edge — the signature premium move */
.bs-asplit__badge{position:absolute;right:-44px;bottom:56px;z-index:4;background:#fff;border-radius:var(--r-md);padding:22px 30px;box-shadow:var(--sh-lg)}
.bs-asplit__badge .n{font-family:var(--ff-serif);font-weight:600;font-size:25px;color:var(--ink);letter-spacing:-.01em;line-height:1}
.bs-asplit__badge .t{font-family:var(--ff-head);font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.bs-asplit__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(52px,6vw,104px)}
.bs-asplit__text .bs-eyebrow{margin-bottom:20px}
.bs-asplit__text h2{font-family:var(--ff-serif);font-size:clamp(2.3rem,4.3vw,4rem);line-height:1.04;margin:0 0 26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bs-asplit__text p{font-family:var(--ff-body);font-size:17px;color:var(--body);margin-bottom:34px;line-height:1.8;max-width:46ch}
/* Editorial pull-quote band (prototype: intro + quote, side by side, dark) */
.bs-editorial{background:var(--ink);color:#fff}
.bs-editorial .bs-wrap{padding:104px 0;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.bs-editorial .bs-eyebrow{color:#9a9994}.bs-editorial .bs-eyebrow::before{color:#fff}.bs-editorial .bs-eyebrow__ln{background:#3a3a37}
.bs-editorial h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem);font-weight:800;margin:18px 0 26px;letter-spacing:-.02em}
.bs-editorial p{color:#c4c3bd;font-size:16px;line-height:1.8;margin-bottom:34px}
.bs-equote{font-family:var(--ff-head);font-weight:500;font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.35;letter-spacing:-.02em;color:#fff;border-left:2px solid #fff;padding-left:30px;margin:0}
.bs-equote .by{display:block;font-size:13px;font-weight:600;color:#9a9994;letter-spacing:.5px;margin-top:22px}
/* Scrolling brand marquee */
.bs-bmqs{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.bs-bmqs__lbl{text-align:center;font-family:var(--ff-head);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:32px}
.bs-bmq{display:flex;white-space:nowrap;animation:bsmq 32s linear infinite;width:max-content;align-items:center}
.bs-bmqs:hover .bs-bmq{animation-play-state:paused}
.bs-bmq span{font-family:var(--ff-head);font-weight:800;font-size:26px;color:#cdccc6;letter-spacing:-.02em;padding:0 90px;transition:color .3s}
.bs-bmq span:hover{color:var(--ink)}
@keyframes bsmq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bs-bmq{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:14px 0}}
/* FAQ plus icon → × rotation (theme uses ) */
.bs-fitem summary .bs-ic{transition:transform .4s var(--ease)}
.bs-fitem[open] summary .bs-ic{transform:rotate(45deg)}
@media(max-width:980px){
/* about split stacks: full-width image on top (still edge-to-edge), text below */
.bs-asplit{grid-template-columns:1fr;min-height:0}
.bs-asplit__media{min-height:clamp(300px,56vw,420px);order:1}
.bs-asplit__text{order:2;padding:clamp(40px,8vw,64px) var(--pad)}
.bs-asplit__badge{right:auto;left:20px;bottom:20px;padding:16px 20px}
.bs-asplit__badge .n{font-size:21px}
.bs-editorial .bs-wrap{grid-template-columns:1fr;gap:34px;padding:72px 0}
.bs-stats__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.bs-stats__grid{grid-template-columns:1fr}
.bs-bmq span{font-size:20px;padding:0 58px}
}
/* Editorial intro CTA (white button on dark) + about-split CTA spacing */
.bs-editorial .wp-block-button__link,.bs-editorial a.wp-block-button__link.is-light{background:#fff;color:var(--ink);box-shadow:var(--sh-md)}
.bs-editorial .wp-block-button__link:hover{background:#eee;color:var(--ink)}
.bs-asplit__text .wp-block-button__link{margin-top:0}
/* mobile rhythm */
@media(max-width:780px){.bs-section{padding-top:56px;padding-bottom:56px}.bs-stats{padding:48px 0}.bs-shead{margin-bottom:34px}}
/* ---- Pre-footer closing CTA band (site-wide, above footer) ------------- */
.bs-prefooter{background:var(--ink);color:#fff;overflow:clip}
.bs-prefooter__inner{max-width:1180px;margin:0 auto;padding:60px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bs-prefooter__title{font-family:var(--ff-head);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;color:#fff;margin:0 0 8px}
.bs-prefooter__text{font-family:var(--ff-body);font-size:16px;line-height:1.6;color:rgba(255,255,255,.78);margin:0;max-width:52ch}
.bs-prefooter__btn{flex-shrink:0;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:16px 32px;font-family:var(--ff-head);font-weight:600;font-size:14px;text-decoration:none;box-shadow:var(--sh-md);transition:transform .2s var(--ease),background .2s}
.bs-prefooter__btn:hover{transform:translateY(-2px);background:#f0f0ee}
.bs-prefooter__btn .bs-ic{width:16px;height:16px}
@media(max-width:680px){
.bs-prefooter__inner{flex-direction:column;align-items:flex-start;text-align:left;padding:48px var(--pad);gap:24px}
.bs-prefooter__btn{align-self:stretch;justify-content:center}
}
/* On the homepage the site-wide pre-footer already carries the contact CTA, so
hide the FAQ section's duplicate CTA card there (kept on the FAQ page). */
.home .bs-faq-cta{display:none}
/* ====================================================================== */
/* v8 IDENTITY — Fraunces serif on all display headings/titles. */
/* Labels, eyebrows, nav, buttons, badges, marquees stay Manrope. */
/* ====================================================================== */
h1,h2,h3,h4,h5,h6,
.bs-logo,.bs-flogo,.bs-flogo .wp-block-site-title,.bs-flogo a,
.bs-fcol h3,.bs-fcol h4,
.bs-shead h2,.bs-shead h3,
.bs-edhero__title,.bs-edsplit__title,.bs-edsplit__numbg,.bs-edband__quote,.bs-equote,
.bs-stat__n,.bs-about-stat__n,.bs-prefooter__title,.bs-asplit__badge .n,.bs-contact-heading,
.bs-about-hero__title,.bs-about-value h3,.bs-about-mission__quote,.bs-faq-cta__title,
.bs-card__name,.bs-pname,.bs-legal h1,.bs-legal h2,.bs-track-step__label,
.wc-block-product .wp-block-post-title,ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,.wc-block-components-product-title,
.woocommerce div.product .product_title,.woocommerce-Tabs-panel h2,
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading,.bs-cart-page .cart_totals h2,
.woocommerce .related>h2,.woocommerce .upsells>h2,.woocommerce .cross-sells>h2,
.woocommerce-account .woocommerce-MyAccount-content h2,.woocommerce-account h1{
font-family:var(--ff-serif)!important;letter-spacing:-.015em
}
/* serif refinements: a touch lighter weight reads better than Manrope's 700/800 */
.bs-shead h2,.bs-edsplit__title,.bs-edhero__title,.bs-prefooter__title,.woocommerce div.product .product_title{font-weight:600}
/* ====================================================================== */
/* Homepage refinements (v1.8): category rows, product cards, more-buttons */
/* ====================================================================== */
/* "Alle Produkte ansehen" — section CTA under featured / category rows */
.bs-shead__cta{margin-top:40px;display:flex;justify-content:center}
.bs-morebtn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:15px 30px;font:600 13.5px var(--ff-head);letter-spacing:.3px;text-decoration:none;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s}
.bs-morebtn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);color:#fff}
.bs-morebtn .bs-ic{width:16px;height:16px;transition:transform .2s var(--ease)}
.bs-morebtn:hover .bs-ic{transform:translateX(3px)}
/* Category product rows ([brandstore_category_rows]) */
.bs-catrow{padding-top:64px;padding-bottom:64px}
.bs-catrow.alt{background:var(--paper,#f7f6f3)}
.bs-catrow__inner{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.bs-catrow__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.bs-catrow__head .bs-eyebrow{margin-bottom:2px}
.bs-catrow__head h2{font-family:var(--ff-serif);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.015em;margin:8px 0 0;line-height:1.1}
.bs-catrow__more{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:600 13px var(--ff-head);letter-spacing:.3px;text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--line);transition:border-color .2s,gap .2s}
.bs-catrow__more:hover{border-color:var(--ink);gap:11px}
.bs-catrow__more .bs-ic{width:15px;height:15px}
/* Product grid + cards (shared by category rows) */
.bs-pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.bs-pgrid[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.bs-pgrid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.bs-pgrid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.bs-pgrid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.bs-pgrid[data-cols="1"]{grid-template-columns:minmax(0,300px)}
/* Boxed product card — image fills the top edge-to-edge, info padded inside
one bordered/shadowed container (top-website style). */
/* ----- Glozin product card: transparent, rounded image, badges, quick-add ----- */
.bs-pcard{display:flex;flex-direction:column;min-width:0;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
.bs-pcard__media{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--rounded-radius);overflow:clip;background:var(--placeholder-bg)}
.bs-pcard__imglink{position:absolute;inset:0;display:block}
.bs-pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--speed) var(--ease)}
.bs-pcard:hover .bs-pcard__media img{transform:scale(1.05)}
/* stacked badges (top-left) */
.bs-pcard__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bs-badge{display:inline-flex;align-items:center;height:29px;padding:0 13px;border-radius:var(--badge-radius);font:500 13px/1 var(--ff-head);color:#fff;letter-spacing:.2px;white-space:nowrap}
.bs-badge--sale{background:var(--badge-sale)}
.bs-badge--limited{background:var(--badge-limited)}
.bs-badge--preorder{background:var(--badge-preorder)}
.bs-badge--soldout{background:var(--badge-soldout)}
.bs-badge--new{background:var(--badge-new)}
/* circular quick-add (bottom-right), reveals on card hover */
/* quick-add: small white circular icon button, always visible, inside the image
bottom-right corner (reference layout). Soft shadow lifts it off the photo. */
.bs-pcard__qadd{position:absolute;right:12px;bottom:12px;z-index:3;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--color-dark);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.13);transition:background-color var(--speed) var(--ease),color var(--speed) var(--ease),transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.bs-pcard__qadd .bs-ic{width:18px;height:18px}
.bs-pcard__qadd:hover{background:var(--color-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.bs-pcard__qadd.added,.bs-pcard__qadd.loading{opacity:.7}
/* body */
.bs-pcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 2px 0;background:transparent}
.bs-pcard__name{font-weight:500;font-size:16px;line-height:1.35;letter-spacing:0;color:var(--color-dark);margin:0 0 6px;text-decoration:none;text-transform:capitalize;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.bs-pcard__name:hover{color:var(--color-primary)}
/* star rating */
.bs-pcard__stars{display:inline-flex;align-items:center;gap:2px;margin:0 0 7px}
.bs-pcard__stars .bs-star{width:15px;height:15px;fill:currentColor;stroke:none;color:#d9d7d2}
.bs-pcard__stars .bs-star.is-on{color:#f5a623}
.bs-pcard__rcount{margin-left:5px;font-size:12px;color:var(--color-grey)}
/* price — sale red first, compare-at grey line-through */
.bs-pcard__price{display:flex;align-items:baseline;gap:8px;font:600 16px var(--ff-head);color:var(--color-dark);margin:0}
.bs-pcard__price ins{order:1;text-decoration:none;color:var(--color-primary);font-weight:600}
.bs-pcard__price del{order:2;color:var(--color-grey);font-weight:400;text-decoration:line-through}
.bs-pcard__price del .amount,.bs-pcard__price del .woocommerce-Price-amount{color:var(--color-grey)}
@media(max-width:1024px){.bs-pgrid,.bs-pgrid[data-cols]{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(max-width:560px){.bs-pgrid,.bs-pgrid[data-cols]{grid-template-columns:repeat(2,1fr);gap:14px}.bs-pcard__name{font-size:14px}.bs-pcard__qadd{right:10px;bottom:10px;width:38px;height:38px}.bs-pcard__qadd .bs-ic{width:17px;height:17px}.bs-catrow{padding-top:48px;padding-bottom:48px}}
/* FAQ "show more" — collapse extras on the homepage only */
.bs-faq__more{display:none}
.home .bs-fitem--extra{display:none}
.home .bs-faq.is-expanded .bs-fitem--extra{display:block}
.home .bs-faq__more{display:flex;width:fit-content;align-items:center;gap:9px;margin:22px auto 0;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:13px 26px;font:600 13px var(--ff-head);letter-spacing:.3px;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.home .bs-faq__more:hover{border-color:var(--ink);transform:translateY(-2px)}
.home .bs-faq.is-expanded ~ .bs-faq__more,.home .bs-faq__more[hidden]{display:none}
.bs-faq__more .bs-ic{width:15px;height:15px}
/* Newsletter is the homepage closing section → drop the generic pre-footer there */
.home .bs-prefooter{display:none}
/* On home the dark newsletter band sits directly above the (also dark) footer —
collapse the doubled vertical padding so they read as one continuous zone. */
.home .bs-newsband{padding-bottom:40px}
.home .bs-footer{padding-top:44px}
/* ====================================================================== */
/* Minimal checkout flow (cart / checkout / order-received) */
/* Shopify-style distraction-free: static logo bar, no nav/search/cart, */
/* minimal legal footer. The full header/footer parts are not loaded. */
/* ====================================================================== */
.bs-coheader{position:static;background:#fff;border-bottom:1px solid var(--line)}
.bs-coheader__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.bs-coheader .bs-logo{color:var(--ink);flex-shrink:1;min-width:0}
.bs-coheader .bs-logo .wp-block-site-title{overflow:hidden;text-overflow:ellipsis}
.bs-coheader__secure{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--ff-head);letter-spacing:.3px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.bs-coheader__secure .bs-ic{width:16px;height:16px;color:var(--accent,var(--ink))}
/* Static header → no fixed-header offset; small comfortable top gap. */
body.woocommerce-cart #bs-main,body.woocommerce-checkout #bs-main{padding-top:46px!important}
.bs-co-main{min-height:46vh}
.bs-cofooter{background:#fff;border-top:1px solid var(--line);padding:30px 0;margin-top:56px}
.bs-cofooter__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.bs-cofooter__links{display:flex;gap:22px;flex-wrap:wrap}
.bs-cofooter__links a{font:600 13px var(--ff-head);color:var(--ink-2,var(--ink));text-decoration:none}
.bs-cofooter__links a:hover{color:var(--ink);text-decoration:underline}
.bs-cofooter__trust{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-body);font-size:13px;color:var(--muted);margin:0}
.bs-cofooter__trust .bs-ic{width:15px;height:15px;color:var(--accent,var(--ink))}
@media(max-width:600px){.bs-cofooter__inner{flex-direction:column;text-align:center;gap:14px}.bs-coheader__secure{font-size:0;gap:0}.bs-coheader__secure .bs-ic{width:18px;height:18px}}
/* ====================================================================== */
/* GLOZIN RESKIN — foundation: single sans font, light palette, pills */
/* (visual only; all data/markup/logic unchanged) */
/* ====================================================================== */
body{font-family:var(--ff-body);font-weight:var(--body-weight);font-size:15px;line-height:var(--body-line-height);color:var(--color-text);background:var(--base)}
p{line-height:var(--body-line-height)}
/* Headings — one sans family, weight 600, sentence case, no decorative tracking */
h1,h2,h3,h4,h5,h6,
.bs-shead h2,.bs-shead h3,.bs-edsplit__title,.bs-edhero__title,.bs-edband__quote,
.bs-catrow__head h2,.bs-news h2,.bs-coheader .bs-logo,.bs-logo,.bs-flogo{
font-family:var(--ff-serif)!important;font-weight:var(--heading-weight)!important;
text-transform:none!important;letter-spacing:-.01em!important;color:var(--color-dark)
}
h1{font-size:var(--h1-size)}h2{font-size:var(--h2-size)}h3{font-size:var(--h3-size)}
h4{font-size:var(--h4-size)}h5{font-size:var(--h5-size)}h6{font-size:var(--h6-size)}
/* Section title + centered muted subtitle */
.bs-shead{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:40px;max-width:720px}
.bs-shead h2{font-size:var(--h2-size);margin:0 0 10px}
.bs-shead p{color:var(--color-grey);font-size:15px;max-width:560px;margin:0 auto}
/* Eyebrows — small uppercase, no decorative number/line */
.bs-eyebrow,.is-style-eyebrow{font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--color-grey)}
.bs-eyebrow::before,.is-style-eyebrow[data-n]::before{display:none!important}
/* Buttons — Glozin dark pill */
.wp-block-button__link,.bs-morebtn,.bs-prefooter__btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button:not(.is-link){
background:var(--color-dark)!important;color:#fff!important;border:0!important;
border-radius:var(--btn-radius)!important;font-family:var(--ff-head)!important;
font-size:15px!important;font-weight:600!important;letter-spacing:.2px!important;
padding:15px 38px!important;box-shadow:none!important;
transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease),background-color var(--speed) var(--ease)!important
}
.wp-block-button__link:hover,.bs-morebtn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover{transform:scale(1.03);opacity:.94}
/* inverted (on dark/image overlays) */
.is-style-light .wp-block-button__link,.bs-hero .wp-block-button__link,.bs-banner__cta{
background:#fff!important;color:var(--color-dark)!important
}
/* Inputs */
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number],textarea,select,
.woocommerce form .form-row input.input-text,.wc-block-components-text-input input{
border-radius:var(--rounded-radius);min-height:var(--input-height);
border:1px solid var(--line);background:#fff;font-family:var(--ff-body)
}
::placeholder{color:rgba(17,17,17,.6)}
/* Product titles — capitalize, 2-line clamp */
.bs-pcard__name,.wc-block-product .wp-block-post-title,ul.products li.product .woocommerce-loop-product__title{
font-size:16px;font-weight:500;color:var(--color-dark);text-transform:capitalize
}
/* ====================================================================== */
/* GLOZIN HEADER — hamburger left · centered logo · search+cart right */
/* ====================================================================== */
.bs-header .bs-header__bar{display:grid!important;align-items:center;gap:16px;flex-wrap:nowrap}
.bs-header .bs-logo{flex-shrink:0}
.bs-header__left{display:flex;align-items:center;gap:8px;justify-self:start}
.bs-header .bs-icons{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;justify-self:end}
.bs-header .bs-iconbtn{background:none;border:0;padding:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;color:inherit;transition:opacity var(--speed) var(--ease)}
.bs-header .bs-iconbtn:hover{opacity:.65}
.bs-header .bs-iconbtn .bs-ic,.bs-header .bs-cart .bs-ic{width:22px;height:22px;stroke-width:1.6}
/* base = mobile (drawer-driven): burger left · logo center · icons right */
.bs-header .bs-header__bar{grid-template-columns:1fr auto 1fr}
.bs-header .bs-nav{display:none}
.bs-header .bs-logo{justify-self:center;text-align:center}
.bs-header__left .bs-burger{display:inline-flex}
/* desktop ≥901px = true Glozin row: logo left · nav center · icons right */
@media(min-width:901px){
.bs-header .bs-header__bar{grid-template-columns:auto 1fr auto;gap:24px}
.bs-header .bs-header__left{display:none}
.bs-header .bs-logo{justify-self:start;text-align:left}
.bs-header .bs-nav{display:flex;justify-self:center;align-items:center}
.bs-header .bs-nav .wp-block-navigation__container,.bs-header .bs-nav ul{gap:32px}
.bs-header .bs-icons .bs-icon-acct,.bs-header .bs-icons .bs-icon-wish{display:inline-flex}
}
@media(max-width:900px){
/* 3 own tracks (burger / logo / icons) so .bs-icons never overlaps the logo */
.bs-header .bs-header__bar{grid-template-columns:auto 1fr auto;align-items:center}
.bs-header .bs-header__left{display:flex;justify-self:start}
.bs-header .bs-header__left .bs-burger{display:inline-flex}
.bs-header .bs-logo{justify-self:center;text-align:center}
.bs-header .bs-nav{display:none}
.bs-header .bs-icons{justify-self:end;display:flex;align-items:center;gap:16px}
.bs-header .bs-icons .bs-icon-acct,.bs-header .bs-icons .bs-icon-wish{display:none}
}
/* cart: icon + red count bubble (hidden at 0), no price text in bar */
.bs-cart{position:relative;display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.bs-cart__sep{display:none!important}
.bs-cart__count{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--color-primary);color:#fff;font:600 11px/18px var(--ff-head);text-align:center;box-sizing:border-box}
.bs-cart__count.is-empty{display:none}
/* loading spinner shown on the cart icon while an add-to-cart is in flight */
.bs-cart.is-loading .bs-cart__count{opacity:0}
.bs-cart.is-loading::after{content:"";position:absolute;top:-7px;right:-10px;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.9;animation:bsspin .6s linear infinite}
@keyframes bsspin{to{transform:rotate(360deg)}}
/* nav links: size + hover underline (reuses existing .bs-nav base styling) */
.bs-header .bs-nav a,.bs-header .bs-nav .wp-block-navigation-item__content{font-size:15px;font-weight:500}
/* Header is solid white on every page now, so the icons stay dark (#111) —
the old white-over-hero state is removed (it made icons invisible on the
white header). */
.bs-header.is-solid .bs-nav a,
.bs-header.is-solid .bs-nav .wp-block-navigation-item__content,
.bs-header.is-solid .bs-iconbtn,
.bs-header.is-solid .bs-cart,
.bs-header.is-solid .bs-icons .bs-ic,
body:not(.home) .bs-header .bs-iconbtn,
body:not(.home) .bs-header .bs-cart,
body:not(.home) .bs-header .bs-icons .bs-ic,
body:not(.home) .bs-header .bs-nav a{color:#111}
/* solid header look (Glozin: plain white + hairline) */
.bs-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:1px solid var(--line)}
/* ====================================================================== */
/* GLOZIN FOOTER — white, 4-col, circular outline socials, hairline strip */
/* ====================================================================== */
.bs-footer{background:#fff;color:var(--color-text);padding:72px 0 26px;border-top:1px solid var(--line)}
.bs-footer a{color:var(--color-text)}
.bs-fgrid{border-bottom:1px solid var(--line)}
.bs-flogo,.bs-flogo .wp-block-site-title,.bs-flogo a{color:var(--color-dark)!important}
.bs-footer p{color:var(--color-text)}
.bs-fnap .bs-ic{color:var(--color-dark);opacity:.55}
.bs-fcol h3,.bs-fcol h4{color:var(--color-dark)}
.bs-fcol h3::after,.bs-fcol h4::after{background:var(--line)}
.bs-fcol a{color:var(--color-text)}
.bs-fcol a:hover{color:var(--color-dark)}
/* circular outline social icons */
.bs-footer .bs-soc{width:40px;height:40px;background:#fff!important;border:1px solid var(--line);color:var(--color-dark)}
.bs-footer .bs-soc .bs-ic{fill:var(--color-dark)}
.bs-footer .bs-soc:hover{background:var(--color-dark)!important;border-color:var(--color-dark);transform:translateY(-2px)}
.bs-footer .bs-soc:hover .bs-ic{fill:#fff}
/* bottom strip — hairline above, payment marks + copy */
.bs-fbottom{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.bs-footer .bs-pay{box-shadow:none;border:1px solid var(--line);color:var(--color-dark)}
.bs-copy{color:var(--color-grey)}
/* ====================================================================== */
/* GLOZIN light palette — lighten remaining dark homepage sections */
/* ====================================================================== */
.bs-edband{background:var(--beige-band)}
.bs-edband__bg{display:none}
.bs-edband__mark{color:rgba(17,17,17,.16)}
.bs-edband__quote{color:var(--color-dark)!important;font-style:normal}
.bs-edband__attr{color:var(--color-grey)}
.bs-edsplit--dark,.bs-edsplit--dark .bs-edsplit__content{background:#fff}
.bs-edsplit--dark .bs-edsplit__title{color:var(--color-dark)!important}
.bs-edsplit--dark .bs-edsplit__tag,.bs-edsplit--dark .bs-edsplit__cta{color:var(--color-dark)}
.bs-edsplit--dark .bs-edsplit__body{color:var(--color-text)}
.bs-edsplit--dark .bs-edsplit__cta{border-color:var(--color-dark)}
.bs-edsplit--dark .bs-edsplit__rule{background:var(--color-dark)}
/* editorial section titles: sans, lighter weight (no decorative numerals) */
.bs-edsplit__numbg{display:none}
.bs-edsplit__title,.bs-edband__quote{font-weight:600!important;letter-spacing:-.01em}
/* marquee: keep as a slim dark ticker accent */
.bs-marquee{background:var(--color-dark)}
/* ====================================================================== */
/* GLOZIN — new sections + drawers */
/* ====================================================================== */
.bs-section{padding-top:80px;padding-bottom:80px}
/* Hero overlay + dots */
.bs-hero__cta{margin-top:6px}
.bs-hero__dots{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;justify-content:center;gap:8px}
.bs-hero__dots span{width:26px;height:4px;border-radius:4px;background:rgba(255,255,255,.45);transition:all var(--speed) var(--ease)}
.bs-hero__dots span.is-active{background:#fff;width:34px}
/* Category circles — always ONE line; scroll if it overflows; marquee when many */
.bs-circles{display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center;padding-bottom:4px;max-width:100%}
.bs-circles::-webkit-scrollbar{display:none}
.bs-circle{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none;width:clamp(120px,28vw,180px)}
.bs-circle__img{width:100%;aspect-ratio:1/1;height:auto;border-radius:50%;overflow:clip;background:var(--placeholder-bg);display:block}
.bs-circle__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--speed) var(--ease)}
.bs-circle:hover .bs-circle__img img{transform:scale(1.06)}
/* placeholder shows a centered category icon (not a flat gradient) */
.bs-circle__ph{display:grid;place-items:center;width:100%;height:100%;background:var(--placeholder-bg)}
.bs-circle__ph svg{width:38px;height:38px;color:#9a9a9a}
.bs-circle__label{font-family:var(--ff-head);font-weight:600;font-size:18px;color:var(--color-dark);transition:color var(--speed) var(--ease);text-align:center}
.bs-circle:hover .bs-circle__label{color:var(--color-primary)}
/* MANY categories → auto-scrolling marquee (reuses the [brandstore_valuebar] technique) */
.bs-circles--marquee{overflow:hidden;justify-content:flex-start}
.bs-circles--marquee .bs-circles__track{display:flex;gap:24px;width:max-content;animation:bs-circles-scroll 30s linear infinite}
.bs-circles--marquee:hover .bs-circles__track{animation-play-state:paused}
@keyframes bs-circles-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bs-circles--marquee .bs-circles__track{animation:none}}
/* Category rail — swipeable on touch, arrow-paged on desktop. Only cheap
GPU props (transform/opacity) animate, so the effect never costs layout. */
.bs-catrail{position:relative;display:flex;align-items:center;gap:10px}
.bs-catrail .bs-circles--rail{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 2px 12px;flex:1 1 auto;margin:0;max-width:100%}
.bs-catrail .bs-circles--rail::-webkit-scrollbar{display:none}
.bs-catrail .bs-circles--rail .bs-circle{scroll-snap-align:center}
.bs-catrail__nav{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#e6e5e1);background:#fff;color:var(--color-dark,#141414);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(20,20,20,.08);transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease)}
.bs-catrail__nav:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(20,20,20,.14)}
.bs-catrail__nav:active{transform:scale(.96)}
.bs-catrail__nav:disabled{opacity:.3;cursor:default;transform:none;box-shadow:none}
.bs-catrail__nav .bs-ic{width:18px;height:18px}
.bs-catrail__prev .bs-ic{transform:rotate(180deg)}
@media(max-width:720px){.bs-catrail__nav{display:none}}
/* Promo banners */
.bs-promos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bs-promo{position:relative;display:flex;align-items:flex-end;min-height:300px;border-radius:var(--rounded-radius);overflow:clip;text-decoration:none}
.bs-promo--1{background:linear-gradient(120deg,#ece4d6,#d9cdb8)}
.bs-promo--2{background:linear-gradient(120deg,#e7eaee,#d2d9e0)}
.bs-promo__in{position:relative;z-index:2;padding:36px}
.bs-promo__eye{display:block;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--color-grey);margin-bottom:8px}
.bs-promo__title{display:block;font-family:var(--ff-head);font-weight:600;font-size:clamp(22px,2.4vw,30px);color:var(--color-dark);margin-bottom:16px}
.bs-promo__cta{display:inline-flex;align-items:center;gap:8px;background:var(--color-dark);color:#fff;border-radius:var(--btn-radius);padding:12px 26px;font:600 14px var(--ff-head);transition:transform var(--speed) var(--ease)}
.bs-promo__cta .bs-ic{width:15px;height:15px}
.bs-promo:hover .bs-promo__cta{transform:scale(1.04)}
@media(max-width:700px){.bs-promos{grid-template-columns:1fr}.bs-promo{min-height:220px}}
/* Testimonials */
.bs-testis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bs-testi{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--rounded-radius);padding:28px}
.bs-testi__stars{display:flex;gap:2px;margin-bottom:14px}
.bs-testi__stars .bs-star{width:16px;height:16px;fill:#f5a623;stroke:none;color:#f5a623}
.bs-testi__text{font-size:15px;line-height:1.7;color:var(--color-text);margin:0 0 20px}
.bs-testi__who{display:flex;align-items:center;gap:16px}
.bs-testi__avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--color-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:600 16px var(--ff-head);line-height:1;margin:0}
.bs-testi__loc{font-family:var(--ff-body);font-size:12px;color:var(--muted);display:block}
/* Round 2 — footer top + bottom padding compacted so the bottom of the page
isn't a full empty screen. Was 72/26 → 32/14 → 28/6 (final). */
.bs-footer{padding-top:28px !important;padding-bottom:6px !important}
/* Round 2 — copyright row sits IMMEDIATELY below the icons (no big stacked
margin + padding). The thin border above it is the visual separator. */
.bs-fbottom{margin-top:6px !important;padding-top:8px !important;padding-bottom:0 !important}
/* Round 2 — Payment/Shipping/Social grid bottom flush so the next row sits
directly under the social icons with only the bs-fbottom divider above it. */
.bs-paysys-grid{padding-bottom:0 !important}
/* Round 2 — trust badge row (DMCA seal) — compact horizontal strip directly
under bs-fgrid. Border tone uses a neutral var so it shows on BOTH the
dark and the white footer variants (previous rgba(255,255,255,.08) was
invisible against the light footer). */
.bs-trust-row{display:flex;justify-content:flex-start;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line,#e6e5e1);margin-top:8px}
.bs-trust-row .bs-trust-badges__img{max-height:40px;width:auto;display:block;opacity:.95}
.bs-trust-row .bs-trust-badges__link{display:inline-flex;align-items:center}
/* Round 2 — Payment / Shipping / Social 3-col panel. Tight gaps, compact
labels. Single row on desktop, stacks on mobile. */
.bs-paysys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:12px 0 6px;align-items:start;border-top:1px solid var(--line,#e6e5e1)}
.bs-paysys-col h4{font-family:var(--ff-head);font-size:13px;font-weight:700;margin:0 0 8px;letter-spacing:.2px}
.bs-paysys-imgs,.bs-paysys-imgs__strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bs-paysys-imgs__strip .bs-trust-badges__img{max-height:32px;width:auto;display:block;border-radius:4px}
.bs-paysys-imgs__strip .bs-trust-badges__link{display:inline-flex}
.bs-paysys-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:720px){.bs-paysys-grid{grid-template-columns:1fr;gap:16px}}
/* Round 2 — "Über uns" column — compact so it doesn't tower over the other
columns and force a tall grid row with empty space beneath the shorter
columns (the source of the user-reported giant whitespace). */
.bs-fcol--story{max-width:360px}
.bs-fcol--story .bs-flogo-img{display:inline-block;margin-bottom:10px}
.bs-fcol--story .bs-flogo-img img{max-width:160px;max-height:52px;width:auto;height:auto;display:block;object-fit:contain}
.bs-fstory{font-size:13px;line-height:1.55;margin:0 0 12px}
.bs-fcol--story .bs-fnap{line-height:1.7;font-size:13px}
.bs-fcol--story .bs-fnap span{display:flex;align-items:center;gap:8px}
/* Round 2 — categories column — compact line-height + smaller dividers. */
.bs-fcol--cats a{display:block;padding:4px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.06));font-size:13.5px}
.bs-fcol--cats a:last-child{border-bottom:0}
/* Round 2 — bs-fgrid compaction — smaller row gap, no extra padding-bottom,
smaller heading + link spacing so columns equal-height better. */
.bs-fgrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;padding-bottom:0 !important;align-items:start}
.bs-fcol h3{margin:0 0 10px;font-size:14px}
.bs-fcol a{padding:4px 0;font-size:13.5px;display:block}
.bs-testi__meta{display:flex;flex-direction:column}
.bs-testi__name{font-family:var(--ff-head);font-weight:600;font-size:14px;color:var(--color-dark)}
.bs-testi__verified{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--badge-limited)}
.bs-testi__verified .bs-ic{width:13px;height:13px;color:var(--badge-limited);fill:none;stroke:currentColor}
@media(max-width:900px){.bs-testis{grid-template-columns:1fr}}
/* Shop by Gram */
/* (Shop-by-Gram "Folgen Sie uns" section removed in v1.9.9) */
/* ---- Drawers (slide via transform) ---- */
.bs-drawer{position:fixed;top:0;height:100%;background:#fff;z-index:100;overflow-y:auto;padding:0;max-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.12)}
.bs-drawer.bs-searchdrawer,.bs-drawer.bs-minicart{right:0;left:auto;width:420px;max-width:92vw;transform:translateX(105%);transition:transform var(--speed) var(--ease)}
.bs-drawer.bs-searchdrawer.is-open,.bs-drawer.bs-minicart.is-open{transform:translateX(0)}
.bs-drawer.bs-menudrawer{left:0;right:auto;width:340px;max-width:88vw;transform:translateX(-105%);transition:transform var(--speed) var(--ease)}
.bs-drawer.bs-menudrawer.is-open{transform:translateX(0)}
.bs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;z-index:90;transition:opacity var(--speed) var(--ease)}
.bs-overlay.is-open{opacity:1;pointer-events:auto}
.bs-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line);margin:0}
.bs-drawer__head h3{font-family:var(--ff-head);font-weight:600;font-size:18px;margin:0;text-transform:none;color:var(--color-dark)}
.bs-drawer__head .bs-iconbtn{background:none;border:0;cursor:pointer;color:var(--color-dark);display:inline-flex}
.bs-drawer__head .bs-iconbtn .bs-ic{width:22px;height:22px}
.bs-drawer__brand{font-family:var(--ff-head);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--color-grey)}
/* menu drawer */
.bs-menudrawer__links{padding:8px 24px}
.bs-menudrawer__links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--ff-head);font-weight:600;font-size:15px;color:var(--color-dark);text-decoration:none}
.bs-menudrawer__links a:hover{color:var(--color-primary)}
.bs-menudrawer__links .bs-chev{width:15px;height:15px;color:var(--color-grey)}
.bs-menudrawer__foot{padding:20px 24px;display:flex;gap:10px}
.bs-menudrawer__foot a{flex:1;text-align:center;padding:12px;border-radius:var(--btn-radius);font:600 14px var(--ff-head);text-decoration:none;transition:transform var(--speed) var(--ease)}
.bs-menudrawer__foot a:first-child{background:var(--color-dark);color:#fff}
.bs-menudrawer__foot a:last-child{border:1px solid var(--line);color:var(--color-dark)}
.bs-menudrawer__foot a:hover{transform:scale(1.02)}
/* search drawer */
.bs-searchdrawer__form{display:flex;align-items:center;gap:10px;margin:20px 24px;padding:0 16px;border:1px solid var(--line);border-radius:var(--rounded-radius);height:50px}
.bs-searchdrawer__form .bs-ic{width:18px;height:18px;color:var(--color-grey)}
.bs-searchdrawer__form input{flex:1;border:0;background:none;height:100%;font-family:var(--ff-body);font-size:16px;min-height:auto}
.bs-searchdrawer__form input:focus{outline:none}
/* all search fields ≥16px so iOS never zooms when the search box is focused */
.wp-block-search__input,.search-field,input[type="search"]{font-size:16px}
.bs-searchdrawer__section{padding:6px 24px 18px}
.bs-searchdrawer__lbl{display:block;font-family:var(--ff-head);font-weight:600;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-grey);margin-bottom:12px}
.bs-trendpills{display:flex;flex-wrap:wrap;gap:8px}
.bs-trendpill{display:inline-flex;padding:8px 16px;border:1px solid var(--line);border-radius:var(--btn-radius);font:500 13px var(--ff-head);color:var(--color-dark);text-decoration:none;transition:all var(--speed) var(--ease)}
.bs-trendpill:hover{background:var(--color-dark);color:#fff;border-color:var(--color-dark)}
.bs-poplist{display:flex;flex-direction:column}
.bs-poprow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.bs-poprow__img{width:56px;height:56px;border-radius:10px;overflow:clip;background:var(--placeholder-bg);flex:none}
.bs-poprow__img img{width:100%;height:100%;object-fit:cover}
.bs-poprow__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.bs-poprow__name{font-family:var(--ff-head);font-weight:500;font-size:14px;color:var(--color-dark);line-height:1.3}
.bs-poprow__price{font-family:var(--ff-head);font-weight:600;font-size:14px;color:var(--color-dark);display:flex;gap:6px}
.bs-poprow__price ins{order:1;text-decoration:none;color:var(--color-primary)}
.bs-poprow__price del{order:2;color:var(--color-grey);font-weight:400}
/* mini-cart free-shipping bar + content */
.bs-shipbar{padding:16px 24px;border-bottom:1px solid var(--line)}
.bs-shipbar__row{display:flex;align-items:center;gap:8px;font:600 13px var(--ff-head);color:var(--badge-limited);margin-bottom:10px}
.bs-shipbar__row .bs-ic{width:18px;height:18px;color:var(--badge-limited)}
.bs-shipbar__track{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.bs-shipbar__track span{display:block;height:100%;background:var(--badge-limited);border-radius:6px}
.bs-minicart .widget_shopping_cart_content{padding:18px 24px}
.bs-minicart .woocommerce-mini-cart__total{display:flex;justify-content:space-between;font-family:var(--ff-head);font-weight:600;font-size:16px;color:var(--color-dark);padding:14px 0;border-top:1px solid var(--line);margin-top:8px}
.bs-minicart .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.bs-minicart .woocommerce-mini-cart__buttons a{display:flex;align-items:center;justify-content:center;width:100%;margin:0}
.bs-minicart .woocommerce-mini-cart__buttons a.checkout{background:var(--color-dark)!important;color:#fff!important}
/* footer country selector */
.bs-country{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-head);font-weight:500;font-size:13px;color:var(--color-text);cursor:pointer}
.bs-country .bs-ic{width:15px;height:15px;color:var(--color-grey)}
.bs-country .bs-chev{width:13px;height:13px}
/* ====================================================================== */
/* v1.9.5 — card hover (image-swap · eye · slide-up ATC), topbar, footer */
/* ====================================================================== */
/* image-swap on hover */
.bs-pcard__img2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;transition:opacity var(--speed) var(--ease)}
.bs-pcard.has-swap:hover .bs-pcard__img2{opacity:1}
/* quick-view eye (hidden by default; revealed on card hover, hover-capable only) */
.bs-pcard__eye{position:absolute;top:12px;right:12px;z-index:4;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--color-dark);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.12);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease),background-color var(--speed) var(--ease),color var(--speed) var(--ease)}
.bs-pcard__eye .bs-ic{width:18px;height:18px}
.bs-pcard__eye:hover{background:var(--color-dark);color:#fff}
/* slide-up add-to-cart bar (hidden by default) */
.bs-pcard__atcbar{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;opacity:0;pointer-events:none;transform:translateY(calc(100% + 14px));transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}
.bs-pcard__atc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--color-dark);color:#fff;border-radius:var(--btn-radius);padding:12px 16px;font:600 13px var(--ff-head);text-decoration:none;transition:background-color var(--speed) var(--ease),opacity var(--speed) var(--ease)}
.bs-pcard__atc .bs-ic{width:16px;height:16px}
.bs-pcard__atc:hover{background:#000;color:#fff}
.bs-pcard__atc.is-oos{background:#ececec;color:var(--color-grey);cursor:not-allowed}
.bs-pcard__atc.loading,.bs-pcard__atc.added{opacity:.8}
/* reveal overlays only on hover-capable devices (desktop) */
@media(hover:hover){
.bs-pcard:hover .bs-pcard__eye{opacity:1;pointer-events:auto;transform:none}
.bs-pcard:hover .bs-pcard__atcbar{opacity:1;pointer-events:auto;transform:none}
}
/* touch devices: quick-view eye is hover-only, so hide it. The quick-add icon
lives in the card body now and is always visible on every device. */
@media(hover:none){.bs-pcard__eye{display:none!important}}
/* ---- Announcement bar: centered rotating message ---- */
.bs-topbar__inner{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;min-height:20px;max-width:100%}
.bs-topbar__viewport{position:relative;overflow:hidden;width:min(520px,56vw);height:1.5em}
.bs-topbar__track{position:relative;height:100%}
.bs-topbar__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--ff-body);font-size:13px;letter-spacing:.2px;transition:opacity var(--speed) var(--ease)}
.bs-topbar__msg.is-active{opacity:1}
.bs-topbar__nav{background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;align-items:center;padding:4px;opacity:.65;transition:opacity var(--speed) var(--ease)}
.bs-topbar__nav:hover{opacity:1}
.bs-topbar__nav .bs-ic{width:15px;height:15px}
.bs-topbar__prev .bs-ic{transform:scaleX(-1)}
.bs-topbar__close{position:absolute;right:0;background:none;border:0;color:inherit;cursor:pointer;opacity:.6;padding:4px;display:inline-flex}
.bs-topbar__close:hover{opacity:1}
.bs-topbar__close .bs-ic{width:14px;height:14px}
@media(max-width:560px){.bs-topbar__viewport{max-width:60vw}.bs-topbar__msg{font-size:12px}}
/* ---- Footer payment row ---- */
.bs-payrow{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:22px 0 4px;margin-top:6px}
.bs-paynote{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-grey)}
.bs-paynote .bs-ic{width:18px;height:18px;color:var(--color-dark)}
.bs-paymarks{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.bs-paymark{width:44px;height:27px;flex:none}
/* Official logo images (dropped into assets/img/pay or /ship) — keep a uniform
height, let width follow each logo's aspect ratio so wordmarks aren't squashed. */
.bs-paymark--img{width:auto;height:26px;max-width:72px;object-fit:contain;border-radius:4px}
/* ---- Mobile polish: right-size buttons + keep header icons off the logo ---- */
@media(max-width:600px){
/* WooCommerce buttons (cart/checkout/add-to-cart) were towering on phones.
Scale padding + type down to a normal tap target. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button,
.single_add_to_cart_button,.bs-product-top form.cart .single_add_to_cart_button{
padding:13px 22px!important;font-size:14px!important;min-height:0!important;line-height:1.2!important
}
/* Header: shrink the logo so the search/cart icons aren't crammed against it. */
.bs-logo .bs-logo__img img{max-height:32px;max-width:148px}
.bs-header .bs-header__bar{gap:10px}
.bs-header .bs-icons{gap:16px}
}
@media(max-width:400px){
.bs-logo .bs-logo__img img{max-width:118px}
}
.bs-fbottom{justify-content:space-between}
/* ====================================================================== */
/* v1.9.9 — mobile-first (≤430px) fixes */
/* ====================================================================== */
/* 3. hero: shorter on mobile; background always covers (never distorts) */
.bs-hero__bg{background-size:cover!important;background-position:center!important}
.bs-hero img,.bs-heroslide img{width:100%;height:100%;object-fit:cover!important;object-position:center}
@media(max-width:768px){
.bs-hero{min-height:78vh}
/* 4. contain + center hero text */
.bs-hero__inner{max-width:100%;width:100%;box-sizing:border-box;margin:0 auto;padding:96px 24px 48px;text-align:center}
.bs-hero__title{font-size:clamp(26px,6.5vw,34px)}
.bs-hero__sub{max-width:100%}
}
@media(max-width:430px){.bs-hero{min-height:74vh}.bs-hero__inner{padding:90px 20px 44px}}
/* 5. kill the hero→about white gap (tight marquee) */
.bs-marquee{padding:11px 0;margin:0}
.bs-asplit-section{margin-top:0}
@media(max-width:768px){.bs-marquee{padding:10px 0}}
/* 6. newsletter field + button to standard scale */
.bs-news__form{align-items:stretch}
.bs-news__form input{flex:1;min-width:0;height:54px;min-height:54px;box-sizing:border-box;padding:0 18px;border:1px solid rgba(0,0,0,.08);border-radius:var(--btn-radius);font-size:15px;font-family:var(--ff-body)}
.bs-news__form .wp-block-button__link{height:56px;box-sizing:border-box;padding:15px 30px;border-radius:var(--btn-radius);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:560px){
.bs-news__form{flex-direction:column;gap:10px}
.bs-news__form input,.bs-news__form .wp-block-button,.bs-news__form .wp-block-button__link{width:100%}
}
/* 7a. menu-drawer chevrons (thin grey ›) + clean header */
.bs-menudrawer__links .bs-chev{width:16px;height:16px;color:var(--color-grey);flex:none}
.bs-menudrawer .bs-drawer__head,.bs-drawer__head{background:#fff;border-bottom:1px solid #e6e5e1}
.bs-menudrawer__links a{border-bottom:1px solid #e6e5e1}
/* reset filter — prominent pill at the top of the active filter panel */
.bs-filterreset--top{display:inline-flex;align-items:center;gap:7px;margin:14px 0 4px;padding:9px 16px;border:1px solid var(--line);border-radius:var(--btn-radius);background:#fff;color:var(--color-dark);font:600 13px var(--ff-head);text-decoration:none;transition:all var(--speed) var(--ease)}
.bs-filterreset--top:hover{border-color:var(--color-dark)}
.bs-filterreset--top .bs-ic{width:13px;height:13px;color:var(--color-grey)}
/* =================================================================== *
* v1.10.0 — single-product Glozin sections + full sticky add-to-cart *
* =================================================================== */
/* Beige Glozin promo marquee (product page) */
.bs-marquee--promo{background:var(--beige-band);color:var(--color-dark);padding:18px 0}
.bs-marquee--promo .bs-marquee__track{animation-duration:42s}
.bs-marquee--promo .bs-marquee__item{font:600 clamp(16px,2vw,26px) var(--ff-head);letter-spacing:0;text-transform:none;padding:0 30px;gap:14px}
.bs-marquee--promo .bs-marquee__item .bs-ic{width:22px;height:22px;color:var(--color-dark);opacity:.55}
.bs-marquee--promo .bs-marquee__sep{opacity:.4;font-size:14px;color:var(--color-primary)}
@media(max-width:768px){.bs-marquee--promo{padding:14px 0}.bs-marquee--promo .bs-marquee__item{padding:0 18px;gap:10px}.bs-marquee--promo .bs-marquee__item .bs-ic{width:18px;height:18px}}
/* Recommendation sections (also-bought / recently-viewed) */
.bs-recsec{padding-top:64px;padding-bottom:64px}
.bs-recsec .bs-shead.center{margin-bottom:36px}
.bs-recsec .bs-shead h2{font-size:clamp(26px,3vw,35px)}
.bs-recsec--viewed{padding-top:8px}
.bs-recs__grid{margin-top:0}
@media(max-width:768px){.bs-recsec{padding-top:44px;padding-bottom:44px}.bs-recsec .bs-shead.center{margin-bottom:24px}}
/* ---- Glozin sticky add-to-cart (desktop + mobile) ------------------ */
.bs-sticky-atc{display:flex;gap:16px;align-items:center;justify-content:space-between;
padding:12px clamp(16px,4vw,48px);min-height:80px}
.bs-sticky-atc__info{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.bs-sticky-atc__info img,.bs-sticky-atc__thumb{width:56px;height:56px;border-radius:12px;flex:none;object-fit:cover}
.bs-sticky-atc__thumb{display:inline-flex;align-items:center;justify-content:center;background:#f4f3f0;color:var(--color-grey)}
.bs-sticky-atc__thumb .bs-ic{width:22px;height:22px}
.bs-sticky-atc__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.bs-sticky-atc__name{font:600 15px var(--ff-head);color:var(--color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.bs-sticky-atc__rating{display:inline-flex;align-items:center;gap:2px}
.bs-sticky-atc__rating .bs-star{width:14px;height:14px;color:#d9d9d4}
.bs-sticky-atc__rating .bs-star.is-on{color:#f5a623}
.bs-sticky-atc__buy{display:flex;align-items:center;gap:14px;flex:none}
.bs-sticky-atc__price{font:700 18px var(--ff-head);color:var(--color-dark);white-space:nowrap}
.bs-sticky-atc__price del{color:var(--color-grey);font-weight:400;font-size:.8em;margin-left:6px}
.bs-sticky-atc__price ins{text-decoration:none;color:var(--color-primary)}
.bs-sticky-atc__qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--btn-radius);background:#f7f6f3;overflow:hidden;height:48px}
.bs-qtybtn{width:40px;height:46px;border:0;background:transparent;font-size:18px;line-height:1;color:var(--color-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.bs-qtybtn:hover{color:var(--color-primary)}
.bs-qtyval{min-width:30px;text-align:center;font:600 15px var(--ff-head);color:var(--color-dark)}
.bs-sticky-atc__btn{flex:none;width:auto;margin:0;height:52px;padding:15px 28px;border-radius:var(--btn-radius);background:var(--color-dark);color:#fff;font:600 15px var(--ff-head);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background var(--speed) var(--ease)}
.bs-sticky-atc__btn:hover{background:var(--color-primary)}
.bs-sticky-atc__btn.is-oos{background:#bdbdb8;cursor:not-allowed;pointer-events:none}
/* keep the footer/content clear of the fixed bar once it is showing */
body.bs-has-sticky-atc{padding-bottom:84px}
/* lift the chat / back-to-top FAB above the sticky bar so nothing overlaps */
body.bs-has-sticky-atc .bs-fab{bottom:96px}
@media(max-width:640px){
.bs-sticky-atc{gap:10px;padding:10px 14px;min-height:72px}
.bs-sticky-atc__rating,.bs-sticky-atc__qty{display:none}
.bs-sticky-atc__thumb,.bs-sticky-atc__info img{width:46px;height:46px}
.bs-sticky-atc__name{font-size:14px;max-width:none}
.bs-sticky-atc__buy{gap:10px}
.bs-sticky-atc__price{font-size:15px}
.bs-sticky-atc__price del{display:none} /* show only the sale price on mobile */
.bs-sticky-atc__btn{padding:13px 18px;height:46px;font-size:14px}
body.bs-has-sticky-atc{padding-bottom:74px}
body.bs-has-sticky-atc .bs-fab{bottom:84px}
}
@media(max-width:380px){
.bs-sticky-atc__price{display:none} /* tightest phones: button carries the CTA */
}
/* =================================================================== *
* v1.11.0 — recommendation sliders, product info accordions, *
* auto Shop-category submenu, button consistency, spacing *
* =================================================================== */
/* ---- Recommendation slider (>4 products) --------------------------- *
* Track is a full-width block scroller (overflow-x:auto self-contains it);
* arrows overlay absolutely so they never add to the row's width. */
.bs-recsec{overflow-x:clip} /* guaranteed no body-width leak from the inner scroller */
.bs-topbar{overflow:hidden} /* contain long rotating announcements (no width leak) */
.bs-recs__slider{position:relative;max-width:100%}
.bs-recs__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;scrollbar-width:none;width:100%;max-width:100%}
.bs-recs__track::-webkit-scrollbar{display:none}
.bs-recs__slide{scroll-snap-align:start;flex:0 0 calc((100% - 22px*3)/4)}
.bs-recs__arrow{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--color-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--speed) var(--ease),color var(--speed) var(--ease),opacity .2s;z-index:3;box-shadow:0 6px 18px rgba(20,20,20,.1)}
.bs-recs__arrow--prev{left:2px}
.bs-recs__arrow--next{right:2px}
.bs-recs__arrow:hover{background:var(--color-dark);color:#fff;border-color:var(--color-dark)}
.bs-recs__arrow[disabled]{opacity:0;pointer-events:none}
.bs-recs__arrow .bs-ic{width:18px;height:18px}
.bs-recs__arrow--prev .bs-ic{transform:rotate(180deg)}
@media(max-width:1024px){.bs-recs__slide{flex-basis:calc((100% - 20px*2)/3)}.bs-recs__track{gap:20px}}
@media(max-width:768px){
.bs-recs__arrow{display:none} /* touch swipe on mobile */
.bs-recs__track{gap:14px;scroll-snap-type:x proximity}
.bs-recs__slide{flex:0 0 46%}
}
/* ---- Product-page info accordions (Versand / Rückgabe / Kontakt) --- */
.bs-pacc{margin-top:26px;border-top:1px solid var(--line)}
.bs-pacc__item{border-bottom:1px solid var(--line)}
.bs-pacc__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;font:600 16px var(--ff-head);color:var(--color-dark)}
.bs-pacc__item summary::-webkit-details-marker{display:none}
.bs-pacc__plus{position:relative;width:16px;height:16px;flex:none}
.bs-pacc__plus::before,.bs-pacc__plus::after{content:"";position:absolute;background:var(--color-dark);transition:transform var(--speed) var(--ease)}
.bs-pacc__plus::before{top:7px;left:0;width:16px;height:2px}
.bs-pacc__plus::after{left:7px;top:0;width:2px;height:16px}
.bs-pacc__item[open] .bs-pacc__plus::after{transform:scaleY(0)}
.bs-pacc__body{padding:0 2px 20px;font-size:14.5px;line-height:1.7;color:var(--body)}
.bs-pacc__body p{margin:0 0 8px}
.bs-pacc__nap p{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.bs-pacc__nap .bs-ic{width:16px;height:16px;color:var(--color-grey);flex:none}
.bs-pacc__nap a{color:var(--color-dark);text-decoration:none}
.bs-pacc__nap a:hover{color:var(--color-primary)}
/* ---- Desktop auto Shop-category dropdown --------------------------- */
.bs-nav{align-items:center}
.bs-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.bs-nav__li{position:relative;display:inline-flex;align-items:center;list-style:none;margin:0}
.bs-nav__item{position:relative;display:inline-flex;align-items:center}
.bs-nav__link{display:inline-flex;align-items:center;gap:5px}
.bs-nav__sub ul{gap:0} /* dropdown column must not inherit the 26px nav gap */
.bs-nav__caret{width:13px;height:13px;opacity:.7;transition:transform .25s}
.bs-nav__has-sub:hover .bs-nav__caret{transform:rotate(180deg)}
.bs-nav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(20,20,20,.12);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:120}
.bs-nav__has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.bs-nav__has-sub:hover .bs-nav__sub,.bs-nav__has-sub:focus-within .bs-nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.bs-nav__sub ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bs-nav__sub li{margin:0}
.bs-nav__sub a{display:block;padding:10px 14px;border-radius:9px;font:600 14px var(--ff-head);color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s;white-space:nowrap}
.bs-nav__sub a:hover{background:#f6f5f2;color:var(--color-dark)}
/* keep the menu light over the transparent home hero */
body.home .bs-header:not(.is-solid) .bs-nav__sub a{color:var(--ink-2)}
/* ---- Mobile drawer: Shop category group --------------------------- */
.bs-menudrawer__group{border-bottom:1px solid #e6e5e1}
.bs-menudrawer__group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;font:600 16px var(--ff-head);color:var(--color-dark)}
.bs-menudrawer__group summary::-webkit-details-marker{display:none}
.bs-menudrawer__group .bs-chev{transition:transform .25s}
.bs-menudrawer__group[open] .bs-chev{transform:rotate(90deg)}
.bs-menudrawer__sub{display:flex;flex-direction:column;padding:0 0 10px 12px}
.bs-menudrawer__sub a{padding:11px 4px;font:500 15px var(--ff-head);color:var(--color-grey);text-decoration:none;border-bottom:0}
.bs-menudrawer__sub a:hover{color:var(--color-dark)}
/* ---- Button consistency: one pill system + Instrument Sans -------- */
.bs-recs__arrow,.bs-pacc__item summary,.bs-nav__sub a{font-family:var(--ff-head)}
.bs-no-results__btn,.bs-edsplit__cta,.bs-prefooter__btn,.bs-promo__cta,.bs-news__form .wp-block-button__link,.bs-sticky-atc__btn{font-family:var(--ff-head)!important}
/* ---- Spacing: shorter, even gaps between sections (every page) ----- */
.bs-section{padding-top:56px;padding-bottom:56px}
.bs-catrow{padding-top:50px;padding-bottom:50px}
.bs-bmqs{padding:46px 0}
.bs-edband{padding-top:52px;padding-bottom:52px}
.bs-recsec{padding-top:46px;padding-bottom:46px}
.bs-recsec--bought{padding-bottom:30px}
.bs-recsec--viewed{padding-top:6px}
.bs-newsband{padding:56px 0}
.bs-shead{margin-bottom:32px}
@media(max-width:768px){
.bs-section{padding-top:38px;padding-bottom:38px}
.bs-catrow{padding-top:36px;padding-bottom:36px}
.bs-bmqs{padding:34px 0}
.bs-recsec{padding-top:30px;padding-bottom:30px}
.bs-recsec--bought{padding-bottom:20px}
.bs-newsband{padding:40px 0}
.bs-shead{margin-bottom:20px}
}
/* =================================================================== *
* v1.12.0 — pre-launch fixes (nav/icons wpautop, topbar center, *
* compact mobile header) *
* =================================================================== */
/* #4 topbar — truly centre the rotating message (beat the .bs-wrap rule) */
.bs-topbar .bs-topbar__inner,.bs-topbar .bs-wrap.bs-topbar__inner{justify-content:center;flex-wrap:nowrap}
/* #5 compact mobile header (icons no longer inflated by stray
) */
@media(max-width:900px){
.bs-header .bs-wrap,.bs-header .bs-header__bar{padding-top:11px;padding-bottom:11px}
.bs-header .bs-icons{gap:14px}
.bs-header .bs-icons .bs-iconbtn{padding:0}
}
/* =================================================================== *
* v1.13.0 — visual fixes: submenu legibility, hero 2 CTAs, *
* collections tiles, uniform product images *
* =================================================================== */
/* #2 Shop dropdown legible on the transparent home header (was white-on-white) */
body.home .bs-header:not(.is-solid) .bs-nav__list .bs-nav__sub a{color:var(--ink-2)}
body.home .bs-header:not(.is-solid) .bs-nav__list .bs-nav__sub a:hover{color:var(--color-dark)}
/* #3 hero — two CTAs sharing ONE button style (the ghost previously had no
* padding/radius; the primary block-button ignored max-width and overflowed
* on mobile). Define both fully here so they match and stay contained. */
.bs-hero__actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px;max-width:100%}
.bs-hero__actions .bs-hero__cta,
.bs-hero .bs-hero__cta{
display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
min-height:56px;margin-top:0;padding:15px 34px;border-radius:var(--btn-radius);
font:600 15px var(--ff-head);line-height:1;text-decoration:none;white-space:nowrap;
border:1.5px solid transparent;background:#fff;color:var(--color-dark);
transition:background var(--speed) var(--ease),color var(--speed) var(--ease),border-color var(--speed) var(--ease)}
.bs-hero__actions .bs-hero__cta:not(.bs-hero__cta--ghost):hover{background:var(--color-dark);color:#fff}
.bs-hero__actions .bs-hero__cta--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85);box-shadow:none}
.bs-hero__actions .bs-hero__cta--ghost:hover{background:#fff;color:var(--color-dark);border-color:#fff}
@media(max-width:560px){
.bs-hero__actions{flex-direction:column;align-items:center;width:100%}
.bs-hero__actions .bs-hero__cta{width:100%;max-width:320px}
}
/* #5 collections → premium rounded tiles (was plain circles, labels cramped) */
.bs-circle__img{border-radius:var(--rounded-radius);box-shadow:0 8px 24px rgba(20,20,20,.07)}
.bs-circle{gap:14px;width:clamp(150px,30vw,280px)}
.bs-circles{gap:30px;flex-wrap:wrap;justify-content:center}
.bs-circle__label{font-size:17px;font-weight:600;line-height:1.3}
@media(max-width:560px){.bs-circle{width:clamp(140px,42vw,200px)}.bs-circles{gap:18px}}
/* #7 product image — uniform box (already 1:1 cover) + subtle hairline */
.bs-pcard__media{border:1px solid rgba(20,20,20,.05)}
/* #kontakt/#ueber — contain content elements so body width never exceeds 100vw */
.bs-about-cta__btn,.bs-btn{max-width:100%;box-sizing:border-box}
.bs-about-cta__btn{white-space:normal}
.bs-contact-form input,.bs-contact-form textarea,.bs-contact-form select,
.bs-field input,.bs-field textarea,.bs-field select{max-width:100%;width:100%;box-sizing:border-box}
/* =================================================================== *
* v1.14.0 — shop auto-load (infinite scroll) replaces numbered pages *
* =================================================================== */
.bs-loadmore{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:40px 0 6px;position:relative}
.bs-loadmore__btn{display:inline-flex;align-items:center;gap:8px;padding:14px 34px;border-radius:var(--btn-radius);background:var(--color-dark);color:#fff;font:600 14px var(--ff-head);text-decoration:none;cursor:pointer;border:0;transition:background var(--speed) var(--ease)}
.bs-loadmore__btn:hover{background:var(--color-primary)}
.bs-loadmore__spinner{width:28px;height:28px;border:2.5px solid var(--line);border-top-color:var(--color-dark);border-radius:50%;animation:bs-lm-spin .7s linear infinite;display:none}
.bs-loadmore__end{display:none;font:600 13px var(--ff-head);color:var(--color-grey);letter-spacing:.4px;text-transform:uppercase}
.bs-loadmore__sentinel{position:absolute;left:0;right:0;bottom:90px;height:1px;pointer-events:none}
.bs-loadmore.is-auto .bs-loadmore__btn{display:none}
.bs-loadmore.is-loading .bs-loadmore__spinner{display:block}
.bs-loadmore.is-loading .bs-loadmore__btn{display:none}
.bs-loadmore.is-end .bs-loadmore__btn,.bs-loadmore.is-end .bs-loadmore__spinner,.bs-loadmore.is-end .bs-loadmore__sentinel{display:none}
.bs-loadmore.is-end .bs-loadmore__end{display:block}
@keyframes bs-lm-spin{to{transform:rotate(360deg)}}
/* nice fade/rise as appended cards arrive */
.bs-pcard-in{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.bs-pcard-in.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.bs-pcard-in{transition:none;opacity:1;transform:none}}
/* =================================================================== *
* v1.14.2 — About-us upgrade: stats row removed, hero CTAs, process *
* =================================================================== */
.bs-about-hero__actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.bs-about-hero__btn{display:inline-flex;align-items:center;gap:9px}
.bs-about-hero__link{font:600 14px var(--ff-head);color:var(--color-dark);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:3px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.bs-about-hero__link:hover{border-color:var(--color-dark);color:var(--color-primary)}
/* value icon picks up the accent on hover */
.bs-about-value:hover .bs-about-value__ic{background:var(--color-primary)}
/* process / "so geht's" steps */
.bs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.bs-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 30px 32px;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.bs-step:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.bs-step__n{position:absolute;top:22px;right:26px;font:700 34px var(--ff-head);color:var(--line);line-height:1;letter-spacing:-.02em}
.bs-step__ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;margin-bottom:18px;transition:background .26s var(--ease)}
.bs-step:hover .bs-step__ic{background:var(--color-primary)}
.bs-step__ic .bs-ic{width:22px;height:22px}
.bs-step h3{font:700 19px var(--ff-head);letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.bs-step p{font:400 15px/1.7 var(--ff-body);color:var(--body);margin:0}
@media(max-width:768px){.bs-steps{grid-template-columns:1fr;gap:16px}.bs-about-hero__actions{gap:16px}}
/* v1.14.3 — functional newsletter (note + honeypot) */
.bs-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.bs-news__note{margin-top:14px;font:600 14px var(--ff-head)}
.bs-news__note--ok{color:#1a7f4b}
.bs-news__note--err{color:var(--color-primary)}