/* ==========================================================================
   Botiga Child — Peptide Premium
   Premium glassmorphism styles. Loaded after botiga-style so the cascade
   favors us. All scoped to .bc-* (this child) to avoid stomping on parent
   styles that we intentionally inherit (cart, checkout, account, comments).
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
    --bc-blue:        #08428C;
    --bc-blue-700:    #0A4D9F;
    --bc-blue-500:    #1E6FC0;
    --bc-blue-300:    #6FA8E0;
    --bc-blue-100:    #DCE9F7;
    --bc-blue-deep:   #052E66;
    --bc-surface:     #F8FAFF;
    --bc-surface-2:   #EEF3FB;
    --bc-ink:         #0A1A2F;
    --bc-ink-soft:    #4A5A75;
    --bc-gold:        #C5A572;
    --bc-ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --bc-glass-bg:    rgba(255, 255, 255, 0.62);
    --bc-glass-bd:    rgba(255, 255, 255, 0.50);
    --bc-shadow-sm:   0 4px 16px rgba(8, 66, 140, 0.06);
    --bc-shadow-md:   0 12px 32px rgba(8, 66, 140, 0.10);
    --bc-shadow-lg:   0 24px 60px rgba(8, 66, 140, 0.18);
    --bc-radius-sm:   12px;
    --bc-radius-md:   20px;
    --bc-radius-lg:   28px;
    --bc-h-height:    76px;
}

@media (max-width: 768px) {
    :root { --bc-h-height: 64px; }
}

/* ---------- BASE RESETS ---------- */
.bc-site {
    color: var(--bc-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bc-site-content { padding-top: var(--bc-h-height); }

.bc-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 999999;
    background: var(--bc-blue);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.bc-skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }

.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;
}

.bc-icon {
    width: 20px; height: 20px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

/* ---------- HEADER ---------- */
.bc-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(248, 250, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(8, 66, 140, 0.06);
    transition: box-shadow 0.3s, background 0.3s;
}
.bc-header.is-stuck {
    box-shadow: 0 8px 32px rgba(8, 66, 140, 0.10);
}
.admin-bar .bc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bc-header { top: 46px; } }

.bc-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: var(--bc-h-height);
    padding: 0 clamp(16px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.bc-nav { display: flex; gap: 32px; align-items: center; }
.bc-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.bc-nav-link {
    position: relative;
    font: 600 14px/1 'Inter', sans-serif;
    color: var(--bc-ink);
    padding: 6px 0;
    text-decoration: none;
    transition: color 0.25s;
}
.bc-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1.5px;
    background: var(--bc-blue);
    transform: translateX(-50%);
    transition: width 0.4s var(--bc-ease);
}
.bc-nav-link:hover, .bc-nav-link.is-active { color: var(--bc-blue); }
.bc-nav-link:hover::after, .bc-nav-link.is-active::after { width: 100%; }

.bc-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}
.bc-logo img {
    height: 54px;
    width: auto;
    display: block;
}
@media (max-width: 480px) { .bc-logo img { height: 46px; } }
.bc-logo:hover { opacity: 0.85; }

.bc-logo-light img {
    height: 64px;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    opacity: 0.95;
}

.bc-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.bc-icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border: 0; background: transparent; cursor: pointer;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bc-ink);
    text-decoration: none;
    transition: background 0.25s, color 0.25s, transform 0.25s var(--bc-ease);
}
.bc-icon-btn:hover {
    background: rgba(8, 66, 140, 0.08);
    color: var(--bc-blue);
    transform: translateY(-1px);
}
.bc-icon-btn:focus-visible { outline: 2px solid var(--bc-blue); outline-offset: 2px; }
.bc-icon-btn .bc-icon { width: 19px; height: 19px; }
.bc-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--bc-blue);
    color: #fff;
    font: 700 10px/18px 'Inter', sans-serif;
    border-radius: 999px;
    text-align: center;
}
.bc-badge[data-count="0"] { display: none; }

.bc-menu-btn { display: none; }

@media (max-width: 960px) {
    .bc-nav { display: none; }
    .bc-menu-btn { display: inline-flex; }
    /* The old "auto 1fr auto" grid only looks centered when the left
       column (menu button, ~1 icon) and right column (search+account+cart,
       3 icons) are equal width — they aren't, so the middle column's true
       center sat left of the header's actual center. Taking the logo out
       of grid flow and centering it absolutely against the header itself
       fixes that regardless of how wide either side ever gets. */
    .bc-header-inner { grid-template-columns: auto 1fr; position: relative; }
    /* Scoped to .bc-header-inner .bc-logo (not the bare .bc-logo class) —
       the footer brand link and the mobile drawer link reuse the .bc-logo
       class too, and without this scope they were also getting pulled out
       of normal flow and centered absolutely over their containers, which
       is what caused the footer logo to overlap the Shop/Company/Legal
       text on mobile. */
    .bc-header-inner .bc-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .bc-actions { gap: 0; }
}

/* ---------- DRAWER ---------- */
.bc-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 26, 47, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--bc-ease);
}
.bc-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.bc-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(420px, 90vw);
    background: rgba(248, 250, 255, 0.94);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-right: 1px solid rgba(8, 66, 140, 0.10);
    z-index: 200001;
    transform: translateX(-100%);
    transition: transform 0.5s var(--bc-ease);
    display: flex; flex-direction: column;
    box-shadow: 24px 0 60px rgba(8, 66, 140, 0.18);
}
.bc-drawer.is-open { transform: translateX(0); }

.bc-drawer-head {
    padding: 20px 24px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(8, 66, 140, 0.08);
}
.bc-drawer-close:hover { transform: rotate(90deg); }

.bc-drawer-nav { padding: 24px 24px; flex: 1; overflow-y: auto; }
.bc-drawer-list { list-style: none; margin: 0; padding: 0; }
.bc-drawer-list li { margin: 0; }
.bc-drawer-list a {
    display: block;
    font: 700 22px/1.1 'Inter', sans-serif;
    color: var(--bc-ink);
    padding: 14px 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(8, 66, 140, 0.06);
    transition: color 0.25s, padding 0.3s var(--bc-ease);
}
.bc-drawer-list a:hover { color: var(--bc-blue); padding-left: 8px; }

.bc-drawer-foot {
    padding: 20px 24px;
    border-top: 1px solid rgba(8, 66, 140, 0.08);
    display: flex; flex-direction: column; gap: 12px;
}
.bc-drawer-foot a {
    display: flex; align-items: center; gap: 12px;
    font: 500 14px/1 'Inter', sans-serif;
    color: var(--bc-ink-soft);
    text-decoration: none;
}
.bc-drawer-foot a .bc-icon { color: var(--bc-blue); }

/* ---------- SEARCH OVERLAY ---------- */
.bc-search {
    position: fixed; inset: 0;
    background: rgba(248, 250, 255, 0.90);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    z-index: 300000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--bc-ease);
}
.bc-search.is-open { opacity: 1; pointer-events: auto; }
.bc-search-inner {
    max-width: 720px; margin: 0 auto;
    padding: 14vh 24px 24px;
}
.bc-search-close {
    position: absolute;
    top: 24px; right: 24px;
    width: 48px; height: 48px;
    border: 0; background: rgba(8, 66, 140, 0.08);
    border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bc-ink);
    transition: background 0.25s, transform 0.25s var(--bc-ease);
}
.bc-search-close:hover { background: rgba(8, 66, 140, 0.16); transform: rotate(90deg); }
.bc-search-form {
    display: flex; align-items: center;
    border-bottom: 2px solid var(--bc-ink);
    padding: 8px 0 16px;
}
.bc-search-form .bc-search-icon { width: 26px; height: 26px; margin-right: 16px; }
.bc-search-form input {
    flex: 1;
    border: 0; background: transparent; outline: 0;
    font: 700 28px/1.2 'Inter', sans-serif;
    color: var(--bc-ink);
}
.bc-search-form input::placeholder { color: var(--bc-ink-soft); font-weight: 500; }
.bc-search-hint {
    margin-top: 24px;
    font: 600 12px/1 'Inter', sans-serif;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--bc-ink-soft);
}
.bc-search-suggestions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.bc-search-suggestions a {
    padding: 8px 16px;
    background: rgba(8, 66, 140, 0.08);
    color: var(--bc-blue);
    font: 500 13px/1 'Inter', sans-serif;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.bc-search-suggestions a:hover { background: var(--bc-blue); color: #fff; }

/* ---------- FOOTER (brand blue) ---------- */
.bc-footer {
    background: linear-gradient(135deg, var(--bc-blue-deep) 0%, var(--bc-blue) 60%, var(--bc-blue-700) 100%);
    color: #fff;
    position: relative;
    padding: 64px clamp(16px, 4vw, 56px) 0;
    margin-top: 64px;
}
.bc-footer::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 20% 20%, rgba(255,255,255,0.06), transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 80%, rgba(197,165,114,0.10), transparent 60%);
    pointer-events: none;
}
.bc-footer-inner {
    position: relative;
    max-width: 1400px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.bc-footer-brand img { margin-bottom: 16px; }
.bc-footer-brand p {
    font: 400 14px/1.6 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
    max-width: 280px;
}
.bc-footer-socials { display: flex; gap: 8px; }
.bc-footer-socials a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    transition: background 0.25s, transform 0.3s var(--bc-ease), border-color 0.25s;
}
.bc-footer-socials a:hover { background: #fff; color: var(--bc-blue); transform: translateY(-2px); border-color: #fff; }
.bc-footer-socials .bc-icon { width: 16px; height: 16px; }

.bc-footer h4 {
    font: 700 13px/1 'Inter', sans-serif;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
}
.bc-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bc-footer-col a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font: 500 14px/1.4 'Inter', sans-serif;
    transition: color 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
}
.bc-footer-col a:hover { color: var(--bc-gold); }
.bc-footer-col .bc-icon { color: var(--bc-gold); width: 14px; height: 14px; }
.bc-footer-contact a { color: rgba(255, 255, 255, 0.85); }
.bc-footer-contact a:hover { color: #fff; }

.bc-footer-bottom {
    position: relative;
    margin: 48px 0 0;
}
.bc-footer-bottom-inner {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.bc-footer-payments { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-footer-payments-label {
    font: 500 11px/1 'Inter', sans-serif;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.60);
    margin-right: 4px;
}
.bc-pay {
    height: 24px; padding: 0 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 10px/1 'Inter', sans-serif;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.bc-footer-legal {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    font: 500 12px/1 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.60);
}
.bc-footer-legal a { color: rgba(255, 255, 255, 0.78); }
.bc-footer-legal a:hover { color: var(--bc-gold); }

@media (max-width: 900px) {
    .bc-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 520px) {
    .bc-footer-inner { grid-template-columns: 1fr; }
    .bc-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- BACK TO TOP ---------- */
.bc-top {
    position: fixed; bottom: 24px; right: 24px;
    z-index: 90000;
    width: 48px; height: 48px;
    border: 0; cursor: pointer;
    background: var(--bc-blue); color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(8, 66, 140, 0.30);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.4s var(--bc-ease), transform 0.4s var(--bc-ease), background 0.25s;
}
.bc-top.is-visible { opacity: 1; transform: translateY(0); }
.bc-top:hover { background: var(--bc-blue-700); transform: translateY(-2px); }
.bc-top:focus-visible { outline: 3px solid var(--bc-gold); outline-offset: 2px; }
.bc-top .bc-icon { width: 18px; height: 18px; }

/* ---------- HERO (Gutenberg cover block) ---------- */
.home .entry-content > .wp-block-cover:first-child,
.bc-hero {
    margin-top: 0 !important;
    min-height: clamp(420px, 60vw, 680px) !important;
    border-radius: 0 !important;
}
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__background {
    /* Remove the gray dim the user added — the marble + 4 products image speaks for itself */
    background-color: transparent !important;
    opacity: 0 !important;
}
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
    display: none !important; /* the image already has the tagline baked in */
}
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background {
    animation: bc-hero-reveal 1.2s var(--bc-ease) both;
}
@keyframes bc-hero-reveal {
    from { opacity: 0; transform: scale(1.025); }
    to   { opacity: 1; transform: scale(1); }
}

/* Art-direction swap: the Gutenberg Cover block renders its background as a
   real <img> (not a CSS background-image), so a plain media-query background
   override does nothing here. content:url() replaces the rendered image
   itself and is supported in all evergreen browsers — no JS required. */
@media (min-width: 769px) {
    .home .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background {
        content: url('../images/hero-desktop.png') !important;
    }
}

/* MOBILE HERO FIX: content:url() swaps the image fine, but object-fit /
   object-position get silently ignored by mobile browsers on an <img> whose
   source was replaced this way — that's what was cropping the headline off
   the top of the hero on phones. Instead of fighting that, we hide the
   swapped <img> on mobile (it's already invisible-safe: cover block's own
   dim layer is already forced transparent above) and paint the mobile hero
   as a plain CSS background-image on the cover block itself. background-size
   / background-position crop predictably on every mobile browser, no
   exceptions. Desktop is untouched and keeps using content:url() as before. */
@media (max-width: 768px) {
    .home .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background {
        opacity: 0 !important;
    }
    .home .entry-content > .wp-block-cover:first-child {
        /* hero-mobile.png is 941x1672. Match the container to that exact
           aspect ratio instead of the shared 420px min-height above, so the
           full image displays with nothing cropped off the bottom. */
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 941 / 1672 !important;
        background-image: url('../images/hero-mobile.png') !important;
        background-size: cover !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }
}

/* The H1 + paragraph that follow the hero cover on the home page */
.home .entry-content > h1.wp-block-heading,
body.home h1.wp-block-heading {
    text-align: center;
    font: 800 clamp(28px, 3.6vw, 44px)/1.1 'Inter', sans-serif !important;
    letter-spacing: -0.02em !important;
    color: var(--bc-ink) !important;
    margin: 56px auto 12px !important;
    max-width: 720px;
}
.home .entry-content > p.wp-block-paragraph,
body.home .entry-content > p.wp-block-paragraph {
    text-align: center;
    font: 400 16px/1.6 'Inter', sans-serif !important;
    color: var(--bc-ink-soft) !important;
    max-width: 640px;
    margin: 0 auto 48px !important;
}

/* ---------- PRODUCT CARDS (glassmorphism) ---------- */
/* Targets both the gutenberg product-collection blocks on the home page,
   the botiga product card markup, and the default WC shop card. */
ul.products li.product,
.wc-block-grid__products .wc-block-grid__product,
.wp-block-woocommerce-product-collection,
.related.products ul.products li.product {
    background: var(--bc-glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(8, 66, 140, 0.10) !important;
    border-radius: var(--bc-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--bc-shadow-sm) !important;
    transition: transform 0.4s var(--bc-ease), box-shadow 0.4s var(--bc-ease), border-color 0.3s !important;
    position: relative;
    padding: 0 !important;
}
ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--bc-shadow-lg) !important;
    border-color: rgba(8, 66, 140, 0.22) !important;
}
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    padding: 16px;
}
ul.products li.product img,
.wc-block-grid__product img {
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px;
    transition: transform 0.6s var(--bc-ease) !important;
    background: linear-gradient(180deg, #fff 0%, var(--bc-surface-2) 100%) !important;
    border-radius: var(--bc-radius-sm) !important;
}
ul.products li.product:hover img { transform: scale(1.05) !important; }
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__product .wp-block-post-title {
    font: 700 16px/1.3 'Inter', sans-serif !important;
    color: var(--bc-ink) !important;
    padding: 12px 16px 4px !important;
    margin: 0 !important;
}
ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price {
    display: flex !important;
    align-items: baseline !important;
    padding: 0 16px !important;
    margin: 4px 0 12px !important;
    color: var(--bc-blue) !important;
    font: 800 20px/1 'Inter', sans-serif !important;
}
ul.products li.product .price del,
.wc-block-grid__product .price del {
    color: var(--bc-ink-soft) !important;
    opacity: 0.6 !important;
    margin-right: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
ul.products li.product .price ins,
.wc-block-grid__product .price ins {
    background: transparent !important;
    text-decoration: none !important;
}
ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 16px 16px !important;
    padding: 10px 18px !important;
    background: var(--bc-blue) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: 600 13px/1 'Inter', sans-serif !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.25s, transform 0.2s var(--bc-ease) !important;
    width: calc(100% - 32px) !important;
}
ul.products li.product .button:hover,
.wc-block-grid__product .wp-block-button__link:hover {
    background: var(--bc-blue-700) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
ul.products li.product .button.added { display: none !important; }
ul.products li.product .added_to_cart {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 16px 16px !important;
    padding: 10px 18px !important;
    background: transparent !important;
    color: var(--bc-blue) !important;
    border: 1px solid var(--bc-blue) !important;
    border-radius: 999px !important;
    font: 600 13px/1 'Inter', sans-serif !important;
    text-decoration: none !important;
    text-align: center !important;
    width: calc(100% - 32px) !important;
}

/* Sale flash on product cards */
ul.products li.product .onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
    position: absolute !important;
    top: 12px; right: 12px;
    z-index: 5;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #d63638 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font: 700 11px/1 'Inter', sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ---------- STAR RATINGS ---------- */
/* WooCommerce renders .star-rating as a font-icon block (an empty state
   layer + a width-clipped filled layer). We restyle the color to the brand
   gold and size/space it consistently in both the shop-grid card and the
   single-product summary. */
.star-rating {
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 2px;
    color: var(--bc-blue-100) !important; /* empty stars */
    margin: 4px 0 !important;
}
.star-rating::before { color: var(--bc-blue-100) !important; }
.star-rating span { color: var(--bc-gold) !important; } /* filled stars */
.star-rating span::before { color: var(--bc-gold) !important; }

ul.products li.product .bc-product-body .star-rating {
    margin: 2px 16px 0 !important;
    width: auto !important;
}

.single-product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
}
.single-product .woocommerce-product-rating .star-rating {
    font-size: 16px !important;
    letter-spacing: 3px;
    margin: 0 !important;
}
.single-product .woocommerce-product-rating .woocommerce-review-link {
    font: 600 13px/1 'Inter', sans-serif;
    color: var(--bc-ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed rgba(8, 66, 140, 0.30);
}
.single-product .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--bc-blue); }

/* Reviews tab content — keep it legible against the glass tab panel */
.single-product #reviews .comment-text { background: #fff; border-radius: var(--bc-radius-sm); }
.single-product #reviews .star-rating { font-size: 14px !important; }
.single-product #reviews .commentlist { padding: 0; margin: 0; list-style: none; }
.single-product #reviews .comment_container {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(8, 66, 140, 0.08);
    border-radius: var(--bc-radius-sm);
    margin-bottom: 12px;
}
.single-product #reviews .comment_container img { border-radius: 50%; flex-shrink: 0; }

/* ---------- SINGLE PRODUCT PAGE ---------- */
.single-product .product {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
    background: var(--bc-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(8, 66, 140, 0.10);
    border-radius: var(--bc-radius-lg);
    padding: 32px;
    box-shadow: var(--bc-shadow-sm);
}
@media (max-width: 900px) {
    .single-product .product { grid-template-columns: 1fr; padding: 20px; }
}
.single-product .woocommerce-product-gallery {
    border-radius: var(--bc-radius-md);
    overflow: hidden;
    background: #fff;
    padding: 16px;
    border: 1px solid rgba(8, 66, 140, 0.06);
}
.single-product .woocommerce-product-gallery .flex-viewport {
    border-radius: var(--bc-radius-sm);
    overflow: hidden;
}
.single-product .product_title {
    font: 800 clamp(28px, 3vw, 38px)/1.1 'Inter', sans-serif !important;
    color: var(--bc-ink);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.single-product .woocommerce-product-details__short-description {
    font: 400 15px/1.6 'Inter', sans-serif;
    color: var(--bc-ink-soft);
    margin: 0 0 20px;
    padding: 16px;
    background: var(--bc-surface-2);
    border-left: 3px solid var(--bc-blue);
    border-radius: 8px;
}
.single-product .price {
    font: 800 32px/1 'Inter', sans-serif;
    color: var(--bc-blue);
    margin: 0 0 24px;
}
.single-product .price del {
    color: var(--bc-ink-soft);
    opacity: 0.6;
    margin-right: 8px;
    font-size: 20px;
    font-weight: 500;
}
.single-product .price ins { background: transparent; text-decoration: none; }
.single-product .cart {
    background: var(--bc-surface-2);
    border-radius: var(--bc-radius-md);
    padding: 20px;
    margin-bottom: 20px;
}
.single-product .quantity .qty {
    width: 80px;
    height: 48px;
    text-align: center;
    border: 1px solid rgba(8, 66, 140, 0.20);
    border-radius: 12px;
    font: 600 16px/1 'Inter', sans-serif;
    color: var(--bc-ink);
    background: #fff;
}
.single-product .single_add_to_cart_button {
    background: var(--bc-blue) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font: 700 15px/1 'Inter', sans-serif !important;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(8, 66, 140, 0.30);
    transition: background 0.25s, transform 0.2s var(--bc-ease), box-shadow 0.25s !important;
}
.single-product .single_add_to_cart_button:hover {
    background: var(--bc-blue-700) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(8, 66, 140, 0.40);
}
.single-product .product_meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--bc-line, rgba(8,66,140,0.10)); }
.single-product .product_meta > span { display: block; margin: 4px 0; font-size: 13px; color: var(--bc-ink-soft); }
.single-product .product_meta a { color: var(--bc-blue); }
.single-product .woocommerce-tabs {
    margin-top: 32px;
    background: var(--bc-glass-bg);
    border: 1px solid rgba(8, 66, 140, 0.10);
    border-radius: var(--bc-radius-md);
    padding: 20px;
}
.single-product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(8, 66, 140, 0.10);
}
.single-product .woocommerce-tabs ul.tabs li {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 10px 18px !important;
    font: 600 14px/1 'Inter', sans-serif !important;
    color: var(--bc-ink-soft) !important;
    text-decoration: none !important;
    border-radius: 8px 8px 0 0;
    transition: color 0.2s, background 0.2s;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--bc-blue) !important;
    background: rgba(8, 66, 140, 0.06);
}
.single-product .related.products {
    margin-top: 64px;
}
.single-product .related.products h2 {
    font: 700 24px/1.2 'Inter', sans-serif;
    color: var(--bc-ink);
    text-align: center;
    margin-bottom: 24px;
}

/* ---------- CART ---------- */
.woocommerce-cart .site-main > .woocommerce,
.woocommerce-cart .entry-content > .woocommerce {
    background: var(--bc-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(8, 66, 140, 0.10);
    border-radius: var(--bc-radius-lg);
    padding: 32px;
    box-shadow: var(--bc-shadow-sm);
}
.woocommerce-cart table.shop_table {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.woocommerce-cart table.shop_table th {
    background: transparent;
    color: var(--bc-ink-soft);
    font: 700 12px/1 'Inter', sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(8, 66, 140, 0.12) !important;
    padding: 12px !important;
}
.woocommerce-cart table.shop_table td {
    border-top: 1px solid rgba(8, 66, 140, 0.08) !important;
    padding: 16px 12px !important;
    vertical-align: middle !important;
}
.woocommerce-cart table.shop_table .product-name a {
    color: var(--bc-ink);
    font: 600 14px/1.3 'Inter', sans-serif;
    text-decoration: none;
}
.woocommerce-cart table.shop_table .product-name a:hover { color: var(--bc-blue); }
.woocommerce-cart table.shop_table .product-quantity input.qty {
    width: 70px;
    height: 40px;
    text-align: center;
    border: 1px solid rgba(8, 66, 140, 0.20);
    border-radius: 8px;
}
.woocommerce-cart .button,
.woocommerce-cart .checkout-button,
.woocommerce-cart button[name="update_cart"] {
    background: var(--bc-blue) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font: 600 14px/1 'Inter', sans-serif !important;
    transition: background 0.25s, transform 0.2s var(--bc-ease) !important;
    text-decoration: none !important;
}
.woocommerce-cart .button:hover,
.woocommerce-cart .checkout-button:hover {
    background: var(--bc-blue-700) !important;
    transform: translateY(-1px);
    color: #fff !important;
}
.woocommerce-cart .cart_totals {
    background: var(--bc-surface-2);
    border-radius: var(--bc-radius-md);
    padding: 24px;
    border: 1px solid rgba(8, 66, 140, 0.08);
}
.woocommerce-cart .cart_totals h2 {
    font: 700 18px/1 'Inter', sans-serif;
    color: var(--bc-ink);
    margin: 0 0 16px;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 18px !important;
    color: var(--bc-ink) !important;
    font-weight: 700 !important;
}

/* ---------- CART / CHECKOUT COUPON FORM ----------
   Always stacked, full-width rows — input on top, button below. Simpler
   and more robust than a side-by-side flex layout, and guarantees neither
   element is ever squeezed narrower than its own text needs. `float:none`
   and explicit `box-sizing` neutralize WooCommerce core's legacy
   `.form-row-first` / `.form-row-last` two-column float layout, which is
   what was quietly capping this whole form at roughly half width before. */
.woocommerce-cart .coupon,
.woocommerce-checkout .checkout_coupon {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}
.woocommerce-cart .coupon .input-text,
.woocommerce-checkout .checkout_coupon .input-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 0 10px !important;
}
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-checkout .checkout_coupon button[type="submit"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* ---------- CART / CHECKOUT TABLES — MOBILE (stacked cards) ----------
   Below 600px the shop_table columns (thumbnail / name / price / qty /
   subtotal) no longer have room and the browser force-wraps numbers
   mid-character (e.g. "$64.95" breaking into "$6" / "4.9" / "5"). Botiga's
   core markup already ships a data-title attribute on every <td> for
   exactly this situation — we just weren't using it. This turns each row
   into a labeled stacked card instead of a squeezed table row, and keeps
   the price column on one line. */
@media (max-width: 600px) {
    .woocommerce-cart table.shop_table thead,
    .woocommerce-checkout table.shop_table thead {
        display: none;
    }
    .woocommerce-cart table.shop_table tr,
    .woocommerce-checkout table.shop_table tr {
        display: block;
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid rgba(8, 66, 140, 0.08);
    }
    .woocommerce-cart table.shop_table td,
    .woocommerce-checkout table.shop_table td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        border-top: 0 !important;
        padding: 6px 4px !important;
        white-space: normal;
    }
    .woocommerce-cart table.shop_table td::before,
    .woocommerce-checkout table.shop_table td::before {
        content: attr(data-title);
        font: 600 12px/1 'Inter', sans-serif;
        letter-spacing: 0.04em;
        color: var(--bc-ink-soft);
        text-align: left;
        flex-shrink: 0;
    }
    /* The "actions" cell is special: it holds the coupon form AND the
       Update Cart button as block-level children, not a single label/value
       pair. Forcing it into the same flex row as every other cell was what
       squeezed the coupon input + button down to roughly half width and
       clipped their text. Reset it back to a plain stacked block. */
    .woocommerce-cart table.shop_table td.actions {
        display: block !important;
        text-align: left;
        padding: 12px 4px !important;
    }
    .woocommerce-cart table.shop_table td.actions::before {
        content: none !important;
    }
    .woocommerce-cart table.shop_table td.actions .button[name="update_cart"] {
        display: block;
        width: 100%;
        margin: 0 0 16px;
        text-align: center;
    }
    .woocommerce-cart table.shop_table td.product-thumbnail::before,
    .woocommerce-cart table.shop_table td.product-remove::before {
        content: none;
    }
    .woocommerce-cart table.shop_table td.product-thumbnail,
    .woocommerce-cart table.shop_table td.product-remove {
        justify-content: flex-start;
    }
    .woocommerce-cart table.shop_table td.product-price,
    .woocommerce-cart table.shop_table td.product-subtotal,
    .woocommerce-checkout table.shop_table td.product-total,
    .woocommerce-cart table.shop_table td.product-price .woocommerce-Price-amount,
    .woocommerce-cart table.shop_table td.product-subtotal .woocommerce-Price-amount {
        white-space: nowrap; /* the actual fix for the "$6 / 4.9 / 5" wrap */
    }
}

/* ---------- CHECKOUT ----------
   Mirrors the glass-card treatment .woocommerce-cart already gets — the
   checkout page had none at all, which combined with the full-bleed
   gutter fix below is why fields sat flush against the screen edge. */
.woocommerce-checkout .site-main > .woocommerce,
.woocommerce-checkout .entry-content > .woocommerce {
    background: var(--bc-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(8, 66, 140, 0.10);
    border-radius: var(--bc-radius-lg);
    padding: 32px;
    box-shadow: var(--bc-shadow-sm);
}
@media (max-width: 600px) {
    .woocommerce-checkout .site-main > .woocommerce,
    .woocommerce-checkout .entry-content > .woocommerce {
        padding: 20px 16px;
        border-radius: var(--bc-radius-md);
    }
}
.woocommerce-checkout form .form-row {
    padding: 0 !important; /* Botiga's default 0 5px was part of the crowding */
    margin: 0 0 16px !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    padding: 0 !important;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: 12px !important;
}

/* ---------- GLOBAL BUTTONS / FORMS ---------- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
    background: var(--bc-blue) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font: 600 14px/1 'Inter', sans-serif !important;
    transition: background 0.25s, transform 0.2s var(--bc-ease), box-shadow 0.25s !important;
    box-shadow: 0 6px 18px rgba(8, 66, 140, 0.25);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
    background: var(--bc-blue-700) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(8, 66, 140, 0.35) !important;
    color: #fff !important;
}

input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea {
    border-radius: 8px !important;
    border-color: rgba(8, 66, 140, 0.20) !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--bc-blue) !important;
    box-shadow: 0 0 0 3px rgba(8, 66, 140, 0.12) !important;
    outline: 0 !important;
}

/* ---------- A11Y: focus visible across the site ---------- */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--bc-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- PRINT ---------- */
@media print {
    .bc-header, .bc-footer, .bc-drawer, .bc-search, .bc-top, .bc-drawer-overlay { display: none !important; }
    .bc-site-content { padding-top: 0 !important; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   FULL-BLEED — fix white space on left/right.
   Botiga wraps page content in a constrained container (.site-main /
   .entry-content) that creates white space on the sides of wide
   screens. We strip the max-width + padding from those wrappers so the
   hero, products grid, results section, and every other gutenberg block
   span the full viewport. Inner text blocks (h1 / paragraph) keep their
   own readability constraints from the rules above.
   ========================================================================== */

/* Page-level wrappers */
.site-main,
.site-content,
.entry-content,
#primary {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Botiga's own container class if it exists */
.botiga-page .container,
.botiga-site-layout-default .container,
.woocommerce .container,
.woocommerce-page .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- GUTTERS FOR CART / CHECKOUT / ACCOUNT ----------
   The full-bleed rules above were written for the homepage hero and
   product grid, but `.woocommerce .container` / `.woocommerce-page
   .container` also match the cart, checkout, and account pages, so those
   were losing their side padding too — that's what was pushing checkout
   form fields flush against the edge of the screen on mobile. These
   selectors are more specific than the ones above (an extra body class),
   so they win the cascade and restore normal gutters just on those pages
   without touching the homepage full-bleed behavior. */
.woocommerce-cart.woocommerce-page .container,
.woocommerce-checkout.woocommerce-page .container,
.woocommerce-account.woocommerce-page .container,
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary {
    padding-left: clamp(16px, 5vw, 48px) !important;
    padding-right: clamp(16px, 5vw, 48px) !important;
}
@media (max-width: 480px) {
    .woocommerce-cart.woocommerce-page .container,
    .woocommerce-checkout.woocommerce-page .container,
    .woocommerce-account.woocommerce-page .container,
    .woocommerce-cart #primary,
    .woocommerce-checkout #primary,
    .woocommerce-account #primary {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* The hero cover — explicit full-width so it can't be miscomputed */
.home .entry-content > .wp-block-cover:first-child {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Every gutenberg block takes the full content width */
.home .entry-content > * {
    max-width: 100% !important;
    width: 100% !important;
}

/* Re-add some breathing room for inner containers that already had max-width
   in the rules above. Products grid stays at 1280, footer stays at 1400,
   header inner stays at 1400. Their rules above already do this — we just
   confirm here so nothing downstream collapses. */
@media (max-width: 1400px) {
    .pgh-product-grid,
    .bc-footer-inner,
    .bc-header-inner {
        max-width: 100% !important;
        padding-left: clamp(16px, 4vw, 48px) !important;
        padding-right: clamp(16px, 4vw, 48px) !important;
    }
}


/* ==========================================================================
   MOBILE HEADER / HERO SPACING
   The header is 64px tall on mobile and .bc-site-content's padding-top
   already matches that exactly (see var(--bc-h-height) rule near the top
   of this file) — that's correct and is what makes the hero touch the
   header with zero gap. An extra +32px used to be added here on top of
   that, plus an 8px margin-top on every cover block below, which together
   were the white gap between the header and the hero. Both are removed;
   the hero's own image (now shown via background-image, see MOBILE HERO
   FIX above) already has clean breathing room baked into its artwork, so
   no extra CSS spacing is needed here. */
@media (max-width: 768px) {
    .home .entry-content > .wp-block-cover:first-child {
        margin-top: 0 !important;
    }
}