/*
Theme Name: Black Symphony
Theme URI: https://kopibag.com
Author: Kopibag Atelier
Author URI: https://kopibag.com
Description: 黒の交響曲 — A traditional Japanese specialty-store theme for WooCommerce. White surfaces, square black framing, red prices, dark Chrome Hearts-inspired navigation. High-density EC layout tuned for fast browsing.
Version: 1.4.3
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: black-symphony
Tags: e-commerce, woocommerce, two-columns, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS — Traditional Japanese Specialty Store
   ========================================================================== */
:root {
    /* Surfaces — warm washi (生成り) base for an aged, established feel */
    --bs-bg:           #f3efe5;
    --bs-surface:      #ffffff;
    --bs-surface-2:    #ece5d6;
    --bs-head:         #e4dccb;

    /* Text — warm sumi ink, traditional */
    --bs-ink:          #231d18;
    --bs-ink-2:        #574d44;
    --bs-muted:        #897f73;
    --bs-faint:        #b0a596;

    /* Lines — warm sumi framing */
    --bs-line:         #3a322b;
    --bs-line-soft:    #d8cfbe;
    --bs-line-strong:  #231d18;

    /* Accents — deep 臙脂 (enji) crimson, used sparingly */
    --bs-red:          #9b2226;
    --bs-red-dark:     #6c1417;
    --bs-red-soft:     #f3e8e4;
    --bs-blue:         #1a1a1a;
    --bs-blue-dark:    #000000;
    --bs-ok:           #1a7a3a;
    --bs-amber:        #b8700a;

    /* Dark bands — deeper black for brand header + nav */
    --bs-dark-a:       #2a2a2a;
    --bs-dark-b:       #0a0a0a;
    --bs-brand-a:      #1a1a1a;
    --bs-brand-b:      #000000;

    /* Gold — small decorative accents only */
    --bs-gold:         #b49332;
    --bs-gold-deep:    #8a7020;

    /* Editorial dark page tokens (About / Contact) */
    --bs-black:        #0a0a0a;
    --bs-brown:        #1a1510;
    --bs-oxblood:      #3a0a0c;
    --bs-cream:        #f5f0e6;

    /* Type — Japanese gothic body, Mincho + Cinzel reserved for brand accents */
    --font-sans:  -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, "Noto Sans JP", sans-serif;
    --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    --font-display: "Cinzel", "Times New Roman", "Yu Mincho", serif;

    /* Rhythm — wider column, larger sidebar, square corners */
    --wrap:        1100px;
    --wrap-narrow: 760px;
    --side:        220px;
    --radius:      0px;
    --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Shadows — flat by default, reserved for floating UI only */
    --shadow-sm:  none;
    --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bs-bg);
    color: var(--bs-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.bs-page { position: relative; }

img, svg { max-width: 100%; height: auto; display: block; }
svg { stroke-width: 1.6; }

a { color: var(--bs-ink); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--bs-red); text-decoration: underline; }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--bs-ink);
    outline-offset: 2px;
}
::selection { background: #ffe5e5; color: var(--bs-red-dark); }

ul, ol { margin: 0; padding: 0; }
p { margin: 0 0 0.8em; }

/* ==========================================================================
   3. TYPOGRAPHY — compact, dense Japanese-EC
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--bs-ink);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
h2 { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.35rem); }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }

.bs-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--bs-gold-deep);
    margin: 0 0 0.5rem;
}

blockquote {
    margin: 1.2rem 0;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--bs-ink);
    color: var(--bs-ink-2);
    background: var(--bs-surface-2);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.bs-wrap { width: min(100% - 24px, var(--wrap)); margin-inline: auto; }
.bs-wrap--narrow { width: min(100% - 24px, var(--wrap-narrow)); margin-inline: auto; }

.bs-section { padding-block: clamp(1.2rem, 3vw, 2rem); }
.bs-section--tight { padding-block: clamp(0.8rem, 2vw, 1.2rem); }
.bs-section-head { max-width: 48rem; margin: 0 auto 1.2rem; text-align: center; }
.bs-section-head p { color: var(--bs-muted); }

.bs-main { display: block; }

/* Two-column shop layout */
.bs-shoplayout {
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-block: 12px 28px;
}
.bs-shoplayout__main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   5. BUTTONS — dark, square, traditional
   ========================================================================== */
.bs-btn,
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    padding: 0.65em 1.3em;
    color: #fff;
    background: var(--bs-ink);
    border: 1px solid #000;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s var(--ease);
}
.bs-btn:hover,
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

/* Primary / conversion actions = red */
.bs-btn--solid,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce input.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order {
    background: var(--bs-red);
    border-color: var(--bs-red-dark);
    color: #fff;
}
.bs-btn--solid:hover { opacity: 0.9; }

/* Ghost / secondary */
.bs-btn--ghost {
    background: #fff;
    color: var(--bs-ink);
    border-color: var(--bs-line-strong);
}
.bs-btn--ghost:hover { background: var(--bs-surface-2); color: var(--bs-ink); opacity: 1; }

.bs-btn--lg { padding: 0.85em 1.8em; font-size: 13px; }
.bs-btn--block { width: 100%; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
    width: 100%;
    background: #fff;
    border: 1px solid var(--bs-line-strong);
    border-radius: var(--radius);
    color: var(--bs-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 0.55em 0.7em;
    transition: border-color 0.15s var(--ease);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
    border-color: var(--bs-ink);
    box-shadow: none;
    outline: none;
}
::placeholder { color: var(--bs-faint); opacity: 1; }
label { display: inline-block; font-size: 12px; font-weight: 500; color: var(--bs-ink-2); margin-bottom: 0.3rem; }

.bs-sbox__body form, .bs-drawer__search form { display: flex; gap: 5px; }
.bs-sbox__body .search-field, .bs-drawer__search .search-field,
form.woocommerce-product-search .search-field { flex: 1 1 auto; min-width: 0; }
form.woocommerce-product-search button, .search-form .search-submit { flex: none; }

/* ==========================================================================
   7. TOP TOOLBAR — thin utility bar
   ========================================================================== */
.bs-toolbar {
    background: var(--bs-ink);
    border-bottom: 1px solid #000;
    font-size: 11px;
    color: #ccc;
}
.bs-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 30px;
}
.bs-toolbar__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bs-toolbar__est {
    flex: none;
    color: var(--bs-gold);
    font-family: var(--font-serif);
    font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.bs-toolbar__promo { margin: 0; color: #eee; font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-toolbar__links { display: flex; align-items: center; gap: 0; list-style: none; }
.bs-toolbar__links li { display: inline-flex; }
.bs-toolbar__link {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 5px 10px;
    color: #bbb;
    font-size: 11px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit;
}
.bs-toolbar__link:hover { color: #fff; text-decoration: none; }
.bs-toolbar__link svg { width: 13px; height: 13px; }
.bs-toolbar__cart { position: relative; }

.bs-cart-count {
    display: inline-grid; place-items: center;
    min-width: 15px; height: 15px; padding: 0 3px;
    margin-left: 2px;
    background: var(--bs-red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    border-radius: 0;
}

/* ==========================================================================
   8. BRAND HEADER — deep black, Chrome Hearts-inspired
   ========================================================================== */
.bs-brandhead {
    background: radial-gradient(125% 150% at 50% 0%, #221a13 0%, #0a0705 72%);
    color: #fff;
    border-top: 1px solid #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.bs-brandhead__inner {
    width: min(100% - 24px, var(--wrap));
    margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding-block: 12px;
}

/* Logo (silver chrome on black) + catch copy */
.bs-brandhead__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bs-brandhead__logo { flex: 0 0 auto; min-width: 0; }
.bs-brandhead__logolink { display: inline-block; line-height: 0; }
.bs-brandhead__logolink:hover { opacity: 0.92; }
.bs-brandhead__logoimg {
    width: auto;
    height: clamp(112px, 11vw, 152px);
    max-width: 540px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}
.bs-brandhead__logotext {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
    font-weight: 900; letter-spacing: 0.12em; color: #fff;
}

/* Catch copy beside the logo — trust points, dense JP style */
.bs-brandhead__catch {
    display: flex; flex-direction: column; gap: 4px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.bs-catch__main {
    font-family: var(--font-serif);
    font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.04em;
}
.bs-catch__list { display: flex; flex-direction: column; gap: 2px; }
.bs-catch__list > span {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #c7c7c7; white-space: nowrap;
}
.bs-catch__list > span::before {
    content: "✓"; color: var(--bs-red); font-weight: 900; font-size: 11px; flex: none;
}
.bs-catch__list b { color: #fff; font-weight: 700; }

/* Right column — pay labels stacked over the service cards */
.bs-brandhead__info {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 8px; min-width: 0;
}

/* Payment labels (銀行振込 / 代金引換) */
.bs-brandhead__paylabels { display: flex; align-items: center; gap: 6px; }
.bs-paylabel-cap { font-size: 10px; letter-spacing: 0.16em; color: #8c8c8c; }
.bs-paylabel {
    display: inline-flex; align-items: center;
    padding: 3px 13px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    color: #f3f3f3;
    background: linear-gradient(180deg, #3c3c3c, #161616);
    border: 1px solid #565656;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Service cards strip */
.bs-brandhead__cards { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.bs-infocard {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    min-width: 78px;
    padding: 5px 11px;
    background: #ffffff; color: var(--bs-ink);
    border: 1px solid #b7ad9b;
    border-radius: 2px;
    text-align: center; line-height: 1.12;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.bs-infocard__label { font-size: 10px; font-weight: 700; color: #3a3a3a; letter-spacing: 0.02em; white-space: nowrap; }
.bs-infocard__price {
    font-family: var(--font-display);
    font-size: 27px; font-weight: 900; line-height: 1; color: var(--bs-red);
}
.bs-infocard__accent { font-size: 15px; font-weight: 900; color: var(--bs-red); white-space: nowrap; }

/* ¥0 cards now use the default white card — large red numerals on white */

/* Phone / consult card — dark, stacked: cap / number / hours */
.bs-infocard--tel {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    min-width: 0; padding: 6px 15px;
    background: linear-gradient(180deg, #2a2018, #0a0705);
    border-color: #5a4a30; color: #fff; text-align: left;
}
.bs-infocard__telcap { font-size: 9.5px; letter-spacing: 0.04em; color: #e6cf95; white-space: nowrap; }
.bs-infocard__hours { font-size: 10.5px; color: #cabfb0; white-space: nowrap; }
.bs-infocard__tel {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display);
    font-size: 23px; font-weight: 900; letter-spacing: 0.01em; line-height: 1.05; color: #fff;
}
.bs-infocard__tel:hover { color: #fff; text-decoration: none; }
.bs-infocard__tel svg { width: 17px; height: 17px; color: var(--bs-gold); flex: none; }

/* SP-only tagline (hidden on desktop) */
.bs-brandhead__tagline { display: none; }

/* ==========================================================================
   9. MAIN NAV — dark with white dividers, traditional JP-EC feel
   ========================================================================== */
.bs-mainnav {
    background: linear-gradient(180deg, #2a2622, #0c0a08);
    border-bottom: 2px solid var(--bs-gold);
}
.bs-mainnav .bs-wrap { display: flex; }

.bs-menu { display: flex; flex-wrap: wrap; list-style: none; }
.bs-menu > li { position: relative; border-left: 1px solid rgba(255,255,255,0.12); }
.bs-menu > li:last-child { border-right: 1px solid rgba(255,255,255,0.12); }
.bs-menu > li > a {
    display: block;
    padding: 12px 21px;
    color: #ededed;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #343434, #111);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.bs-menu > li > a:hover { background: linear-gradient(180deg, #474747, #232323); color: #fff; text-decoration: none; }
.bs-menu > li.current-menu-item > a,
.bs-menu > li.current-menu-parent > a { background: var(--bs-red); color: #fff; }

/* Dropdowns */
.bs-menu .sub-menu {
    position: absolute; top: 100%; left: 0; z-index: 50;
    min-width: 12rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--bs-line-strong);
    box-shadow: var(--shadow-md);
    padding: 4px 0;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.bs-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bs-menu .sub-menu a { display: block; padding: 7px 14px; color: var(--bs-ink); font-size: 12px; }
.bs-menu .sub-menu a:hover { background: var(--bs-surface-2); color: var(--bs-red); text-decoration: none; }

/* ==========================================================================
   10. MOBILE BAR + DRAWER
   ========================================================================== */
.bs-mbar, .bs-spnav, .bs-spserv { display: none; }

/* Mobile top bar — silver logo left, labelled tool buttons right */
.bs-mbar {
    align-items: center; justify-content: space-between;
    gap: 6px;
    padding: 4px 10px;
    background: radial-gradient(140% 200% at 50% 0%, #201913, #070504);
    border-bottom: 1px solid #000;
}
.bs-mbar__logo { display: inline-flex; align-items: center; line-height: 0; flex: 0 1 auto; min-width: 0; }
.bs-mbar__logo:hover { opacity: 0.92; text-decoration: none; }
.bs-mbar__logoimg { height: 58px; width: auto; max-width: 240px; }
.bs-mbar__logotext { color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.bs-mbar__tools { display: flex; align-items: stretch; gap: 4px; flex: none; }
.bs-mbar__btn {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 44px; padding: 3px 3px;
    background: none; border: 0; color: #fff; cursor: pointer;
    font-family: inherit;
}
.bs-mbar__btn:hover { color: #fff; text-decoration: none; }
.bs-mbar__lbl { font-size: 9px; letter-spacing: 0.02em; color: #dcdcdc; }
.bs-mbar__btn .bs-cart-count { position: absolute; top: -2px; right: 5px; }

/* Mobile quick-nav (icon tiles) */
.bs-spnav {
    grid-template-columns: repeat(5, 1fr);
    background: #fff;
    border-bottom: 1px solid var(--bs-line-soft);
}
.bs-spnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 58px; padding: 8px 2px;
    color: var(--bs-ink); font-size: 10px; font-weight: 600; text-align: center;
    border-left: 1px solid var(--bs-line-soft);
}
.bs-spnav__item:first-child { border-left: 0; }
.bs-spnav__item svg { width: 22px; height: 22px; color: #1a1a1a; }
.bs-spnav__item:hover { color: var(--bs-red); text-decoration: none; }
.bs-spnav__item:hover svg { color: var(--bs-red); }

/* Mobile service strip — red, key offers */
.bs-spserv {
    align-items: center; justify-content: center;
    background: linear-gradient(180deg, #a52429, #76151a);
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.bs-spserv__cell { padding: 5px 11px; border-left: 1px solid rgba(255, 255, 255, 0.28); white-space: nowrap; }
.bs-spserv__cell:first-child { border-left: 0; }
.bs-spserv__cell b { font-size: 13px; font-family: var(--font-display); }

/* Drawer */
.bs-drawer-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.6); }
.bs-drawer {
    position: fixed; top: 0; left: 0; z-index: 95;
    width: min(85vw, 320px); height: 100%;
    background: #fff;
    box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bs-drawer[hidden], .bs-drawer-overlay[hidden], .bs-search[hidden], .bs-acc__panel[hidden] { display: none; }

.bs-drawer__head {
    position: sticky; top: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: #000;
    color: #fff; font-weight: 700; font-size: 14px;
}
.bs-drawer__close { background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; display: inline-flex; }
.bs-drawer__search { padding: 10px 12px; border-bottom: 1px solid var(--bs-line-soft); }
.bs-drawer__nav { border-bottom: 1px solid var(--bs-line-soft); }
.bs-drawer__nav .bs-menu { flex-direction: column; }
.bs-drawer__nav .bs-menu > li { border-left: 0; border-bottom: 1px solid var(--bs-line-soft); }
.bs-drawer__nav .bs-menu > li:last-child { border-right: 0; }
.bs-drawer__nav .bs-menu > li > a { color: var(--bs-ink); padding: 11px 14px; font-weight: 500; }
.bs-drawer__nav .bs-menu > li > a:hover,
.bs-drawer__nav .bs-menu > li.current-menu-item > a { background: var(--bs-surface-2); color: var(--bs-red); }
.bs-drawer__nav .bs-menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-top: 1px solid var(--bs-line-soft);
    padding: 0; background: var(--bs-surface-2);
}
.bs-drawer__nav .bs-menu .sub-menu a { padding: 9px 26px; }

.bs-drawer__cats { padding: 10px 0; border-bottom: 1px solid var(--bs-line-soft); }
.bs-drawer__title { padding: 0 12px; margin: 0 0 6px; font-size: 12px; color: var(--bs-muted); font-weight: 700; }

/* Accordion */
.bs-acc { list-style: none; }
.bs-acc__item { border-top: 1px solid var(--bs-line-soft); }
.bs-acc__item:first-child { border-top: 0; }
.bs-acc__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--bs-ink); text-align: left;
}
.bs-acc__link { display: block; padding: 11px 14px; color: var(--bs-ink); font-size: 13px; }
.bs-acc__plus { position: relative; width: 12px; height: 12px; flex: none; }
.bs-acc__plus::before, .bs-acc__plus::after {
    content: ""; position: absolute; background: var(--bs-ink);
    transition: transform 0.15s var(--ease);
}
.bs-acc__plus::before { top: 5px; left: 0; width: 12px; height: 2px; }
.bs-acc__plus::after { left: 5px; top: 0; width: 2px; height: 12px; }
.bs-acc__toggle[aria-expanded="true"] .bs-acc__plus::after { transform: scaleY(0); }
.bs-acc__panel { list-style: none; background: var(--bs-surface-2); }
.bs-acc__panel li a { display: block; padding: 9px 26px; color: var(--bs-ink-2); font-size: 12px; border-top: 1px solid var(--bs-line-soft); }

.bs-drawer__util { padding: 6px 0 20px; }
.bs-drawer__util a { display: flex; align-items: center; gap: 8px; padding: 11px 14px; color: var(--bs-ink); font-size: 13px; }
.bs-drawer__util a:hover { background: var(--bs-surface-2); text-decoration: none; }
.bs-drawer__util svg { color: var(--bs-muted); }

/* ==========================================================================
   11. SEARCH OVERLAY
   ========================================================================== */
.bs-search {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    display: grid; place-items: start center;
    padding-top: 16vh;
}
.bs-search form { width: min(90%, 38rem); display: flex; gap: 6px; }
.bs-search .search-field { font-size: 17px; padding: 0.7em 0.9em; }
.bs-search__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; color: #fff; cursor: pointer; padding: 5px; }

/* ==========================================================================
   12. SHOP SIDEBAR — traditional JP-EC left column
   ========================================================================== */
.bs-side { display: flex; flex-direction: column; gap: 10px; }

.bs-side__account { display: grid; gap: 5px; }
.bs-side__acc, .bs-side__cart {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--bs-line-strong);
    border-radius: var(--radius);
    font-size: 12px; font-weight: 600;
}
.bs-side__acc { background: var(--bs-ink); border-color: #000; color: #fff; }
.bs-side__acc:hover { color: #fff; text-decoration: none; opacity: 0.9; }
.bs-side__cart { background: #fff; color: var(--bs-ink); }
.bs-side__cart:hover { border-color: var(--bs-red); color: var(--bs-red); text-decoration: none; }
.bs-side__cart .bs-cart-count { margin-left: auto; }

/* Sidebar box — black header, white body, square frame */
.bs-sbox {
    background: #fff;
    border: 1px solid var(--bs-line-strong);
}
.bs-sbox__title {
    margin: 0;
    padding: 8px 10px;
    background: var(--bs-ink);
    color: #fff;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.03em;
}
.bs-sbox__body { padding: 10px; }

.bs-side__trust {
    list-style: none;
    border: 1px solid var(--bs-line-strong);
    background: #fff;
    padding: 10px;
    display: grid; gap: 8px;
}
.bs-side__trust li {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--bs-ink-2);
    padding: 4px 0;
    border-bottom: 1px dotted var(--bs-line-soft);
}
.bs-side__trust li:last-child { border-bottom: 0; }
.bs-side__trust svg { color: var(--bs-gold); flex: none; }

/* Category list — square buttons with black borders */
.bs-catlist { list-style: none; }
.bs-catlist__item { border-bottom: 1px solid var(--bs-line-soft); }
.bs-catlist__item:last-child { border-bottom: 0; }
.bs-catlist__parent {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 8px;
    color: var(--bs-ink); font-size: 12px; font-weight: 700;
    border: 1px solid transparent;
}
.bs-catlist__parent::before {
    content: "■"; flex: none;
    font-size: 7px; color: var(--bs-ink);
}
.bs-catlist__parent:hover { background: var(--bs-surface-2); color: var(--bs-red); text-decoration: none; border-color: var(--bs-line-strong); }
.bs-catlist__parent:hover::before { color: var(--bs-red); }
.bs-catlist__parent span:first-of-type { flex: 1; }
.bs-catlist__count { color: var(--bs-faint); font-size: 10px; font-weight: 400; }
.bs-catlist__sub { list-style: none; padding: 2px 0 6px 22px; }
.bs-catlist__sub a { display: block; padding: 3px 0; color: var(--bs-ink-2); font-size: 11px; }
.bs-catlist__sub a::before { content: "－"; color: var(--bs-faint); margin-right: 3px; }
.bs-catlist__sub a:hover { color: var(--bs-red); text-decoration: none; }

/* Ranking */
.bs-rank { list-style: none; }
.bs-rank__item { border-bottom: 1px solid var(--bs-line-soft); }
.bs-rank__item:last-child { border-bottom: 0; }
.bs-rank__link { display: flex; align-items: center; gap: 7px; padding: 8px 8px; color: var(--bs-ink); }
.bs-rank__link:hover { background: var(--bs-surface-2); text-decoration: none; }
.bs-rank__link:hover .bs-rank__name { color: var(--bs-red); }
.bs-rank__num {
    flex: none; display: grid; place-items: center;
    width: 16px; height: 16px;
    background: var(--bs-ink); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    font-family: var(--font-display);
}
.bs-rank__num--1 { background: #b49332; }
.bs-rank__num--2 { background: #888; }
.bs-rank__num--3 { background: #a8703a; }
.bs-rank__media { flex: none; width: 40px; height: 40px; border: 1px solid var(--bs-line-soft); background: var(--bs-surface-2); overflow: hidden; }
.bs-rank__media img { width: 100%; height: 100%; object-fit: cover; }
.bs-rank__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bs-rank__name { font-size: 11px; line-height: 1.4; color: var(--bs-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-rank__price { font-size: 12px; font-weight: 700; color: var(--bs-ink); }
.bs-rank__price .woocommerce-Price-currencySymbol { font-size: 9px; }
.bs-rank__price del { display: none; }

.bs-side__banners { display: grid; gap: 8px; }
.bs-side__banner { display: block; border: 1px solid var(--bs-line-strong); }

.bs-side__help { list-style: none; }
.bs-side__help li { border-bottom: 1px solid var(--bs-line-soft); }
.bs-side__help li:last-child { border-bottom: 0; }
.bs-side__help a { display: flex; align-items: center; gap: 5px; padding: 7px 10px; color: var(--bs-ink-2); font-size: 11.5px; }
.bs-side__help a:hover { color: var(--bs-red); background: var(--bs-surface-2); text-decoration: none; }
.bs-side__help svg { color: var(--bs-faint); flex: none; }

/* ==========================================================================
   13. MOBILE SELLING-POINTS STRIP
   ========================================================================== */
.bs-msell { display: none; }

/* ==========================================================================
   14. HOMEPAGE MODULES — square-framed, traditional EC blocks
   ========================================================================== */
.bs-mod {
    background: #fff;
    border: 1px solid var(--bs-line-strong);
}
.bs-mod__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 8px 12px;
    background: linear-gradient(180deg, #2a2420, #14100d);
    border-bottom: 2px solid var(--bs-gold);
}
.bs-mod__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
    color: #fff;
    display: flex; align-items: center; gap: 8px;
}
/* Chrome Hearts cross on section headings */
.bs-mod__title::before {
    content: "";
    flex: none;
    width: 11px; height: 11px;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M10.5 10.5L9 2.5L15 2.5L13.5 10.5L21.5 9L21.5 15L13.5 13.5L15 21.5L9 21.5L10.5 13.5L2.5 15L2.5 9Z'/%3E%3C/svg%3E");
}
.bs-mod__en {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
    color: #aaa;
}
/* "○○一覧へ ▶" */
.bs-mod__more {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #ccc; white-space: nowrap;
}
.bs-mod__more::after {
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 3.5px 0 3.5px 5px;
    border-color: transparent transparent transparent currentColor;
}
.bs-mod__more:hover { color: #fff; text-decoration: none; }
.bs-mod__empty { padding: 20px 12px; color: var(--bs-muted); text-align: center; font-size: 12px; }

/* Notice / news */
.bs-notice__list { list-style: none; }
.bs-notice__row { border-bottom: 1px dotted var(--bs-line-soft); }
.bs-notice__row:last-child { border-bottom: 0; }
.bs-notice__row a { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; color: var(--bs-ink); }
.bs-notice__row a:hover { background: var(--bs-surface-2); text-decoration: none; }
.bs-notice__row a:hover .bs-notice__text { color: var(--bs-red); }
.bs-notice__date { flex: none; color: var(--bs-muted); font-size: 11px; }
.bs-notice__badge {
    flex: none; padding: 1px 7px;
    background: var(--bs-ink); color: #fff;
    font-size: 9px; font-weight: 700; border-radius: 0;
}
.bs-notice__badge.bs-badge--sale, .bs-notice__badge.bs-badge--important { background: var(--bs-red); }
.bs-notice__badge.bs-badge--new { background: var(--bs-ok); }
.bs-notice__text { font-size: 12px; line-height: 1.5; }

/* Hero */
.bs-mod--hero { border: 0; background: transparent; }
.bs-hero__main img, .bs-hero__img { width: 100%; display: block; border: 1px solid var(--bs-line-strong); }
.bs-hero__subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.bs-hero__sub { display: block; border: 1px solid var(--bs-line-strong); }
.bs-hero__sub img { width: 100%; }
.bs-hero__placeholder {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: clamp(1.8rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 3rem);
    background:
        radial-gradient(120% 140% at 85% 10%, #333, transparent 60%),
        linear-gradient(180deg, #1a1a1a, #0a0a0a);
    border: 1px solid #000;
    color: #fff;
}
.bs-hero__placeholder:hover { text-decoration: none; color: #fff; }
.bs-hero__ph-eyebrow { font-size: 11px; letter-spacing: 0.3em; color: #aaa; }
.bs-hero__ph-title { font-family: var(--font-serif); font-size: clamp(1.3rem, 1rem + 1.8vw, 2.2rem); font-weight: 700; line-height: 1.35; }
.bs-hero__ph-lede { color: #ccc; font-size: 12.5px; max-width: 28rem; }
.bs-hero__ph-cta {
    margin-top: 6px;
    padding: 0.6em 1.4em;
    background: var(--bs-red);
    color: #fff; font-size: 12px; font-weight: 700;
}

/* Category grid — 6-up compact */
.bs-catgrid { list-style: none; padding: 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.bs-catgrid__item a {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px;
    border: 1px solid var(--bs-line-soft);
    background: #fff; color: var(--bs-ink); text-align: center;
    height: 100%;
}
.bs-catgrid__item a:hover { border-color: var(--bs-ink); text-decoration: none; }
.bs-catgrid__media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bs-surface-2); display: block; }
.bs-catgrid__media img { width: 100%; height: 100%; object-fit: cover; }
.bs-catgrid__ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--bs-faint); }
.bs-catgrid__name { font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.bs-catgrid__count { font-size: 10px; color: var(--bs-muted); }

/* Customer reviews — compact line-separated list */
.bs-reviews { list-style: none; }
.bs-review { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--bs-line-soft); }
.bs-review:last-child { border-bottom: 0; }
.bs-review__media { flex: none; width: 64px; height: 64px; border: 1px solid var(--bs-line-soft); background: var(--bs-surface-2); overflow: hidden; }
.bs-review__media img { width: 100%; height: 100%; object-fit: cover; }
.bs-review__body { min-width: 0; flex: 1; }
.bs-review__stars { display: flex; align-items: center; gap: 1px; margin-bottom: 2px; }
.bs-review__star { color: var(--bs-line-soft); display: inline-flex; }
.bs-review__star.is-on { color: #d8a72b; }
.bs-review__who { margin-left: 6px; font-size: 10.5px; color: var(--bs-muted); }
.bs-review__text { margin: 0 0 5px; font-size: 12px; line-height: 1.6; color: var(--bs-ink-2); }
.bs-review__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bs-review__name { font-size: 11px; color: var(--bs-ink); }
.bs-review__name:hover { color: var(--bs-red); }
.bs-review__price { font-size: 13px; font-weight: 700; color: var(--bs-ink); white-space: nowrap; }
.bs-review__price small { font-size: 9px; color: var(--bs-muted); font-weight: 400; }
.bs-review__price .woocommerce-Price-currencySymbol { font-size: 10px; }
.bs-review__price del { display: none; }

/* Trust band */
.bs-trust__grid { list-style: none; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bs-trust__cell { text-align: center; padding: 14px 10px; border: 1px solid var(--bs-line-soft); background: #fff; }
.bs-trust__ico {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; margin: 0 auto 6px;
    background: var(--bs-ink); color: #fff;
}
.bs-trust__h { font-size: 13px; font-weight: 700; margin: 0 0 3px; }
.bs-trust__p { font-size: 11px; color: var(--bs-muted); line-height: 1.5; margin: 0; }

/* After-sale / guidance */
.bs-aftersale__grid { padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bs-aftersale__col h3 { display: flex; align-items: center; gap: 5px; font-size: 13px; margin: 0 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--bs-line-soft); }
.bs-aftersale__col h3 svg { color: var(--bs-red); }
.bs-aftersale__col ul { list-style: none; display: grid; gap: 5px; }
.bs-aftersale__col li { font-size: 11.5px; color: var(--bs-ink-2); padding-left: 12px; position: relative; }
.bs-aftersale__col li::before { content: "・"; position: absolute; left: 0; color: var(--bs-ink); }

/* ==========================================================================
   15. PRODUCT GRID + CARD — traditional EC dense grid
   ========================================================================== */
ul.products, .woocommerce ul.products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
ul.products::before, ul.products::after { display: none; }
.bs-mod--products ul.products { padding: 12px; }

li.product.bs-card {
    list-style: none;
    margin: 0;
    width: auto;
    float: none;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--bs-line-soft);
    transition: border-color 0.15s var(--ease);
    position: relative;
}
li.product.bs-card:hover { border-color: var(--bs-ink); }

.bs-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bs-surface-2); border-bottom: 1px solid var(--bs-line-soft); }
.bs-card__link { display: block; width: 100%; height: 100%; }
.bs-card__media img { width: 100%; height: 100%; object-fit: cover; }

.onsale, .woocommerce span.onsale {
    position: absolute; top: 6px; left: 6px; z-index: 3;
    margin: 0; padding: 2px 7px;
    background: var(--bs-red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1.4;
    border-radius: 0; min-height: 0;
}

.bs-card__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bs-card__title { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.45; }
.bs-card__title a { color: var(--bs-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-card__title a:hover { color: var(--bs-red); text-decoration: none; }

.bs-card__price { margin-top: auto; color: var(--bs-ink); font-size: 15px; font-weight: 700; line-height: 1.3; }
.bs-card__price .price { color: var(--bs-ink); font-size: inherit; font-weight: 700; }
.bs-card__price del { color: var(--bs-faint); font-size: 11px; font-weight: 400; margin-right: 4px; }
.bs-card__price ins { text-decoration: none; color: var(--bs-red); }
.bs-card__price .woocommerce-Price-currencySymbol { font-size: 11px; }
.bs-card__tax { color: var(--bs-muted); font-size: 10px; font-weight: 400; margin-left: 2px; }

.bs-card__stock { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--bs-ink-2); }
.bs-card__stock .bs-dot { width: 6px; height: 6px; border-radius: 0; flex: none; background: var(--bs-faint); }
.bs-stock--in .bs-dot { background: var(--bs-ok); }
.bs-stock--low { color: var(--bs-red); font-weight: 700; }
.bs-stock--low .bs-dot { background: var(--bs-red); }
.bs-stock--back { color: var(--bs-amber); }
.bs-stock--back .bs-dot { background: var(--bs-amber); }
.bs-stock--out { color: var(--bs-muted); }
.bs-stock--out .bs-dot { background: var(--bs-muted); }

.bs-card__cta { display: flex; gap: 5px; margin-top: 3px; }
.bs-card__detail {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 7px;
    border: 1px solid var(--bs-line-strong);
    color: var(--bs-ink); font-size: 11px; font-weight: 500;
    border-radius: var(--radius); background: #fff;
}
.bs-card__detail:hover { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); text-decoration: none; }
.bs-card__add { flex: 1; display: flex; }
.bs-card__add .button {
    width: 100%; padding: 6px 7px; font-size: 11px; font-weight: 700;
    background: var(--bs-red); border-color: var(--bs-red-dark);
}
.bs-card__add .button.loading { opacity: 0.7; }
.bs-card__add .added_to_cart { display: none; }

/* ==========================================================================
   16. PAGE HERO / BREADCRUMB / EDITORIAL
   ========================================================================== */
.bs-page-hero {
    background: #fff;
    border-bottom: 1px solid var(--bs-line-soft);
    padding-block: clamp(1.2rem, 3vw, 2rem);
    text-align: center;
}
.bs-page-hero h1 { margin: 0; }
.bs-page-hero .bs-breadcrumb { justify-content: center; margin-top: 0.6rem; }

.bs-breadcrumb, .woocommerce-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
    font-size: 11px; color: var(--bs-muted);
}
.bs-breadcrumb a, .woocommerce-breadcrumb a { color: var(--bs-ink); }
.bs-breadcrumb a:hover, .woocommerce-breadcrumb a:hover { color: var(--bs-red); }

.bs-prose { max-width: 46rem; background: #fff; border: 1px solid var(--bs-line-soft); padding: clamp(1.2rem, 3vw, 2rem); }
.bs-prose :is(h2, h3) { margin-top: 1.4em; }
.bs-prose img { margin: 1.2rem 0; border: 1px solid var(--bs-line-soft); }
.bs-prose a { text-decoration: underline; }
.bs-page-hero .bs-prose { background: transparent; border: 0; padding: 0; max-width: 46rem; }

/* Editorial split (about) */
.bs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.bs-split--reverse > :first-child { order: 2; }
.bs-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--bs-line-soft); }
.bs-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; text-align: center; }
.bs-stat strong { display: block; font-size: 1.6rem; font-weight: 900; color: var(--bs-red); }
.bs-stat span { font-size: 11px; color: var(--bs-muted); }

/* Contact */
.bs-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); }
.bs-contact-info ul { list-style: none; display: grid; gap: 1rem; }
.bs-contact-info li { display: flex; gap: 0.8rem; align-items: flex-start; }
.bs-contact-info svg { width: 20px; height: 20px; color: var(--bs-red); flex: none; margin-top: 2px; }
.bs-contact-info h4 { margin: 0 0 0.15rem; }
.bs-contact-info p { margin: 0; color: var(--bs-muted); }

/* FAQ */
.bs-faq { display: grid; gap: 6px; max-width: 48rem; margin-inline: auto; }
.bs-faq details { border: 1px solid var(--bs-line-soft); background: #fff; }
.bs-faq summary {
    list-style: none; cursor: pointer; padding: 0.8rem 1rem;
    font-size: 13px; font-weight: 700; color: var(--bs-ink);
    display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
}
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq summary::after { content: "+"; color: var(--bs-red); font-weight: 700; }
.bs-faq details[open] summary::after { content: "−"; }
.bs-faq details > div { padding: 0 1rem 1rem; color: var(--bs-ink-2); }

/* ==========================================================================
   17. GENERIC GRID / BLOG / PAGINATION
   ========================================================================== */
.bs-grid { display: grid; gap: 12px; }
.bs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bs-post-card { border: 1px solid var(--bs-line-soft); background: #fff; display: flex; flex-direction: column; }
.bs-post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bs-post-card__body { padding: 0.8rem 1rem 1rem; }
.bs-post-card time, .bs-posted { font-size: 11px; color: var(--bs-faint); }

.bs-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 1.6rem; }
.bs-pagination .page-numbers {
    display: grid; place-items: center;
    min-width: 36px; height: 36px; padding: 0 5px;
    border: 1px solid var(--bs-line-soft); background: #fff;
    color: var(--bs-ink); font-size: 12px;
}
.bs-pagination .page-numbers.current { background: var(--bs-ink); border-color: var(--bs-ink); color: #fff; }
.bs-pagination a.page-numbers:hover { border-color: var(--bs-red); color: var(--bs-red); text-decoration: none; }

/* ==========================================================================
   18. FOOTER — compact, dense, traditional JP-EC
   ========================================================================== */
/* Footer — same deep palette as the brand header (silver logo, gold accents) */
.bs-foot {
    background: radial-gradient(120% 90% at 50% 0%, #221a13, #0b0805);
    border-top: 2px solid var(--bs-gold);
    color: #c2b8a8;
}

.bs-foot__strip { background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid rgba(180, 147, 50, 0.28); }
.bs-foot__strip-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; padding-block: 11px; }
.bs-foot__strip span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #e7ddcc; }
.bs-foot__strip svg { color: var(--bs-gold); }

.bs-foot__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.bs-foot__logo { display: inline-block; line-height: 0; }
.bs-foot__logo:hover { opacity: 0.9; }
.bs-foot__logoimg { height: 60px; width: auto; max-width: 290px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.bs-foot__logotext { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 0.04em; line-height: 1; }
.bs-foot__about p { font-size: 11.5px; line-height: 1.7; margin: 0.7rem 0 0; color: #b3a999; }
.bs-foot__social { display: flex; gap: 8px; margin-top: 0.9rem; }
.bs-foot__social a { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.18); color: #c2b8a8; }
.bs-foot__social a:hover { border-color: var(--bs-gold); color: var(--bs-gold); }
.bs-foot__col h4 { font-family: var(--font-serif); font-size: 12.5px; font-weight: 700; color: #fff; margin: 0 0 0.8rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(180, 147, 50, 0.4); letter-spacing: 0.06em; }
.bs-foot__col ul { list-style: none; display: grid; gap: 0.5rem; }
.bs-foot__col li { display: flex; align-items: flex-start; gap: 5px; }
.bs-foot__col a { color: #bdb3a3; font-size: 11.5px; }
.bs-foot__col a:hover { color: var(--bs-gold); }
.bs-foot__company svg { color: var(--bs-gold-deep); flex: none; margin-top: 2px; }
.bs-foot__company li { font-size: 11.5px; color: #bdb3a3; }

.bs-foot__bottom { background: #0a0705; color: #8a8175; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bs-foot__bottom-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-block: 13px; font-size: 10.5px; }
.bs-foot__pay { color: #9a9080; }

/* ==========================================================================
   19. UTILITIES
   ========================================================================== */
.bs-center { text-align: center; }
.bs-mt-lg { margin-top: clamp(1.2rem, 3vw, 2rem); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bs-skip, .skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--bs-red); color: #fff;
    padding: 0.6rem 1rem; font-weight: 700;
}
.bs-skip:focus, .skip-link:focus { left: 10px; top: 10px; }

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* Tablet / small desktop */
@media (max-width: 1024px) {
    .bs-catgrid { grid-template-columns: repeat(4, 1fr); }
    ul.products, .woocommerce ul.products,
    ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bs-foot__grid { grid-template-columns: 1fr 1fr; }
}

/* Hide header catch-copy when the brand row gets tight (logo takes priority) */
@media (max-width: 1200px) {
    .bs-brandhead__catch { display: none; }
}

/* --- Mobile breakpoint --- */
@media (max-width: 767px) {
    .bs-toolbar, .bs-mainnav, .bs-brandhead { display: none; }
    .bs-mbar { display: flex; }
    .bs-spnav { display: grid; }
    .bs-spserv { display: flex; }

    .bs-shoplayout { grid-template-columns: 1fr; gap: 12px; padding-block: 0 24px; }
    .bs-side { display: none; }
    .bs-shoplayout__main { gap: 10px; }

    .bs-msell { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bs-line-soft); border-bottom: 1px solid var(--bs-line-soft); }
    .bs-msell__cell { display: flex; align-items: center; gap: 5px; padding: 7px 8px; background: #fff; font-size: 10.5px; color: var(--bs-ink-2); }
    .bs-msell__cell svg { color: var(--bs-red); flex: none; }

    .bs-mod__title { font-size: 13px; }
    .bs-mod--products ul.products { padding: 8px; }

    ul.products, .woocommerce ul.products,
    ul.products.columns-3, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bs-card__cta { flex-direction: column; }

    .bs-catgrid { grid-template-columns: repeat(3, 1fr); padding: 8px; }
    .bs-hero__subs { grid-template-columns: repeat(2, 1fr); }

    .bs-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .bs-aftersale__grid { grid-template-columns: 1fr; }

    .bs-split, .bs-contact-grid { grid-template-columns: 1fr; }
    .bs-split--reverse > :first-child { order: 0; }
    .bs-stat-row { grid-template-columns: repeat(3, 1fr); }
    .bs-grid--3, .bs-grid--4 { grid-template-columns: 1fr 1fr; }

    .bs-foot__grid { grid-template-columns: 1fr 1fr; gap: 1rem 0.8rem; }
    .bs-foot__about { grid-column: 1 / -1; }
    .bs-foot__bottom-in { justify-content: center; text-align: center; }

    .bs-acc__toggle, .bs-acc__link, .bs-drawer__util a, .bs-acc__panel li a { min-height: 44px; }
}

/* Small phones */
@media (max-width: 400px) {
    .bs-catgrid { grid-template-columns: repeat(2, 1fr); }
    .bs-mbar__logoimg { height: 50px; max-width: 188px; }
    .bs-mbar__btn { min-width: 40px; }
    .bs-spnav__item { font-size: 9px; gap: 3px; }
    .bs-spnav__item svg { width: 20px; height: 20px; }
    .bs-spserv { font-size: 10px; }
    .bs-spserv__cell { padding: 5px 8px; }
}

/* ==========================================================================
   21. MOTION SAFETY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}