/*
Theme Name: Blank Peptides
Description: Custom theme for blank. — Premium Research-Grade Peptides
Version: 2.7.8
Author: blank.
Text Domain: blank-peptides
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --font-sans: 'Inter', sans-serif;
    --font-display: 'Montserrat', sans-serif;
    --color-orange: #FF9500;
    --shadow: 6px 6px 0px 0px rgba(0,0,0,1);
    --shadow-sm: 4px 4px 0px 0px rgba(0,0,0,1);
    --shadow-hover: 10px 10px 0px 0px rgba(0,0,0,1);
    --shadow-lg: 12px 12px 0px 0px rgba(0,0,0,1);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: #ffffff;
    color: #000000;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

.font-display {
    font-family: var(--font-display);
}

.stark-border {
    border: 1px solid #000000;
}

/* ── Accordion (FAQ) ── */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item:hover .accordion-content {
    max-height: 200px;
}

/* ── Vial float animation ── */
.vial-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}

/* ── Letter spacing ── */
.letter-tight {
    letter-spacing: -0.05em;
}

/* ── Mobile menu ── */
#mobile-menu {
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
#mobile-menu.open {
    transform: translateX(0);
}
#mobile-menu-open,
#mobile-menu-close {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* ── WooCommerce price reset ── */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* ── Empty cart: suppress auto-focus ring ──────────────────
   WooCommerce JS calls focus() on [role="alert"] after page
   load, causing the browser's blue focus ring to appear until
   the user clicks elsewhere. ── */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
[role="alert"] {
    outline: none;
}

/* ── WooCommerce notices ── */
.woocommerce-notices-wrapper {
    max-width: 1440px;
    margin: 1rem auto;
    padding: 0 3rem;
    font-family: var(--font-sans);
}
/* ── Account content section: hard-reset any WP.com padding injection ──
   #blank-account-content is the section in my-account.php.
   The !important ensures WP.com's own stylesheet cannot override it. */
#blank-account-content {
    padding-top: 0 !important;
    margin-top:  0 !important;
}
/* On account pages, any .woocommerce-notices-wrapper rendered directly
   inside our section must contribute zero top space. */
.woocommerce-account main > section > .woocommerce-notices-wrapper,
#blank-account-content > .woocommerce-notices-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Completely suppress empty variants. */
.woocommerce-account .woocommerce-notices-wrapper:empty,
#blank-account-content > .woocommerce-notices-wrapper:empty,
#blank-account-content > p:empty,
#blank-account-content > div:empty,
.woocommerce-account .woocommerce-MyAccount-content > p:empty,
.woocommerce-account .woocommerce-MyAccount-content > div:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: #fff;
    border: 1px solid #000;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    list-style: none;
    margin: 0 0 1rem;
}
.woocommerce-error { border-color: #c00; }

/* ── Nav links ── */
.nav-link { font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; transition:all 0.3s ease; }
.nav-link:hover { text-decoration:line-through; }
.nav-link-active { text-decoration:line-through; }

/* ── Public landing: rolling banner ── */
.orange-banner { background-color: var(--color-orange); }
.animate-roll-1 { animation: roll-left 8s cubic-bezier(0.7,0,0.3,1) infinite; }
.animate-roll-2 { animation: roll-right 8s cubic-bezier(0.7,0,0.3,1) infinite; }
@keyframes roll-left {
    0%,44%  { transform:translateX(0) scale(1); opacity:1; clip-path:inset(0); }
    48%     { transform:translateX(-40px) scale(.96); opacity:0; clip-path:inset(0 100% 0 0); }
    50%,94% { transform:translateX(40px) scale(.96); opacity:0; clip-path:inset(0 0 0 100%); }
    98%,100%{ transform:translateX(0) scale(1); opacity:1; clip-path:inset(0); }
}
@keyframes roll-right {
    0%,44% { transform:translateX(40px) scale(.96); opacity:0; clip-path:inset(0 0 0 100%); }
    48%,94%{ transform:translateX(0) scale(1); opacity:1; clip-path:inset(0); }
    98%,100%{ transform:translateX(-40px) scale(.96); opacity:0; clip-path:inset(0 100% 0 0); }
}

/* ── Public landing: card hover ── */
.card-shadow:hover { box-shadow:rgb(0,0,0) 10px 10px 0 0; transform:translate(-4px,-4px); }
.transition-standard { transition:all 0.2s cubic-bezier(0.4,0,0.2,1); }

/* ── Brutalist shadow cards (v1.9.5) ── */
.brutal-card {
    border: 2px solid #000;
    box-shadow: var(--shadow);
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    background: #fff;
}
@media (hover: hover) {
    .brutal-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: var(--shadow-hover);
    }
    .brutal-card:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
    }
}

/* ── Brutalist buttons ── */
.brutal-btn {
    display: inline-block;
    border: 2px solid #000;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (hover: hover) {
    .brutal-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: var(--shadow);
    }
    .brutal-btn:active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    }
}

/* ── Section label badge ── */
.section-label {
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 5px 14px;
    border: 2px solid #000;
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
    display: inline-block;
    background: #fff;
}

/* ── Icon circle with shadow ── */
.icon-circle {
    width: 64px; height: 64px;
    border: 2px solid #000;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    transition: all 0.2s;
}
@media (min-width: 768px) {
    .icon-circle { width: 72px; height: 72px; }
}
@media (hover: hover) {
    .group:hover .icon-circle {
        background: #000; color: #fff;
        transform: translate(-2px, -2px);
        box-shadow: var(--shadow);
    }
}

/* ── Size / stock badges ── */
.badge-shadow {
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
    border: 1.5px solid #000;
}
.float-badge {
    position: absolute;
    font-family: var(--font-display);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    background: #000; color: #fff;
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.35);
}

/* ── Testimonial quote mark ── */
.quote-mark {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    position: absolute;
    top: -6px; left: 14px;
    color: #000; opacity: 0.06;
}

/* ── Brutal divider ── */
.brutal-divider {
    height: 3px;
    background: #000;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.2);
}

/* ── Marquee banner ── */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    animation: marquee 25s linear infinite;
    width: max-content;
}

/* ── FAQ click-to-toggle (v1.9.5) ── */
.accordion-item.open .accordion-content { max-height: 300px; }
.accordion-item.open .acc-icon { transform: rotate(45deg); }

/* ── Product detail: HPLC chart ── */
.hplc-line { stroke-dasharray:1000; stroke-dashoffset:1000; animation:dash 3s linear forwards; }
@keyframes dash { to { stroke-dashoffset:0; } }

/* ── Order confirmation: check ── */
.success-check { animation:scaleIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes scaleIn { from{transform:scale(0.8);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ── Cart: vial icon ── */
.vial-icon { border:1px solid #000; height:60px; width:36px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; position:relative; background:white; }
.vial-icon-cap { width:14px; height:4px; background:black; margin-top:-4px; }
.vial-icon-label { width:80%; height:16px; background:black; margin-top:8px; }

/* ── Forms ── */
.input-focus:focus { outline:none; border-color:#000; box-shadow:0 0 0 1px #000; }
.input-field { width:100%; border:1px solid #000; padding:0.75rem 1rem; font-size:0.875rem; transition:background-color 0.2s; background:white; }
.input-field:focus { outline:none; background-color:#f9f9f9; }
.uppercase-label { font-family:var(--font-display); font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; display:block; }
input[type="checkbox"] { accent-color:#000; }
input[type="radio"]    { accent-color:#000; }
::placeholder { color:rgb(161,161,170); text-transform:uppercase; font-size:10px; letter-spacing:0.1em; }

/* ── Remove not-allowed cursor from all disabled / readonly form elements ──
   WooCommerce's own stylesheet and some browsers render cursor:not-allowed
   on [disabled] inputs. This override ensures a normal pointer site-wide. ── */
input:disabled, input[disabled], input[readonly],
select:disabled, select[disabled], select[readonly],
textarea:disabled, textarea[disabled], textarea[readonly],
button:disabled, button[disabled],
[disabled] {
    cursor: default !important;
}

/* ── Catalog: rotated vial image ── */
.catalog-vial-img {
    transform: rotate(90deg) scale(2.0);
    transform-origin: center center;
    object-fit: cover;
}
.group:hover .catalog-vial-img {
    transform: rotate(90deg) scale(2.1);
}
@media (min-width: 768px) {
    .catalog-vial-img {
        transform: rotate(90deg) scale(1.7);
    }
    .group:hover .catalog-vial-img {
        transform: rotate(90deg) scale(1.82);
    }
}

/* ── Spec pill buttons — evenly spaced across full width ── */
p:has(> span[style*="border-radius: 16px"]) {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
p:has(> span[style*="border-radius: 16px"]) > span {
    flex: 1 1 0 !important;
    text-align: center !important;
}

/* ── Homepage: align pill rows across cards ── */
.hp-desc-col {
    display: flex;
    flex-direction: column;
}
.hp-desc-col > p:has(> span[style*="border-radius: 16px"]) {
    margin-top: auto !important;
}

/* ── Catalog: filters ── */
.filter-checkbox:checked + label { text-decoration:line-through; font-weight:600; }
.custom-scrollbar::-webkit-scrollbar { width:4px; }
.custom-scrollbar::-webkit-scrollbar-track { background:#f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#000; }

/* ── Quantity ── */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ── Admin bar compensation ──────────────────────────────────
   When WordPress shows the admin bar (logged-in admins), it adds
   margin-top:32px (desktop) / 46px (mobile) to <html>, but fixed
   elements stay at top:0 — leaving a gap below our header.
   Push the header and search drawer down to close that gap. ── */
@media screen and (min-width: 783px) {
    body.admin-bar header { top: 32px !important; }
    body.admin-bar #search-drawer { top: calc(5rem + 32px) !important; }
}
@media screen and (max-width: 782px) {
    body.admin-bar header { top: 46px !important; }
    body.admin-bar #search-drawer { top: calc(5rem + 46px) !important; }
}

/* ── WooCommerce payment gateway styling ── */
.woocommerce-checkout #payment { background:transparent; }
.woocommerce-checkout #payment ul.payment_methods { padding:0; margin:0; list-style:none; border:none; }
.woocommerce-checkout #payment ul.payment_methods li { padding:1rem 0; border-bottom:1px solid #e4e4e7; }
.woocommerce-checkout #payment ul.payment_methods li label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; }
.woocommerce-checkout #payment .payment_box { background:#f9f9f9; border:1px solid #000; padding:1.5rem; margin-top:0.5rem; }
.woocommerce-checkout #payment .place-order { padding:0; margin-top:0; background:transparent; border:none; }

/* ── Blog post content typography ── */
.blog-content { font-size:1rem; line-height:1.8; color:#1a1a1a; }
.blog-content p { margin-bottom:1.5rem; }
.blog-content h2 {
    font-family:var(--font-display); font-size:1.75rem; font-weight:800;
    text-transform:uppercase; letter-spacing:-0.02em; margin:3rem 0 1rem;
    padding-bottom:0.5rem; border-bottom:2px solid #000;
}
.blog-content h3 {
    font-family:var(--font-display); font-size:1.2rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.02em; margin:2rem 0 0.75rem;
}
.blog-content h4 {
    font-family:var(--font-display); font-size:1rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.05em; margin:1.5rem 0 0.5rem;
}
.blog-content ul, .blog-content ol { margin:1rem 0 1.5rem 1.5rem; }
.blog-content li { margin-bottom:0.5rem; }
.blog-content ul li { list-style:disc; }
.blog-content ol li { list-style:decimal; }
.blog-content a { color:#000; text-decoration:underline; text-underline-offset:3px; transition:color 0.2s; }
.blog-content a:hover { color:#666; }
.blog-content strong { font-weight:600; }
.blog-content hr { border:none; border-top:1px solid #e4e4e7; margin:2.5rem 0; }
.blog-content blockquote { border-left:3px solid #000; padding-left:1.5rem; margin:1.5rem 0; font-style:italic; color:#444; }
.blog-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.875rem; }
.blog-content th { background:#000; color:#fff; padding:0.75rem 1rem; text-align:left; font-family:var(--font-display); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; }
.blog-content td { padding:0.6rem 1rem; border-bottom:1px solid #e4e4e7; }
.blog-content tr:hover td { background:#f9f9f9; }
.blog-content .wp-block-separator { border:none; border-top:1px solid #e4e4e7; margin:2.5rem 0; }

/* ── CLS Prevention: reserve space for dynamic elements ── */
/* Product card image containers: fixed aspect ratio prevents layout shift */
.product-card-image { aspect-ratio: 16/9; contain: layout; }
/* Backorder/OOS badges: positioned absolutely so they don't push content */
.product-card-image .absolute { contain: layout style; }
/* Cookie banner: reserve bottom space so footer doesn't jump when banner appears */
#cookie-banner { contain: layout; }
/* Vial animation: explicit dimensions prevent CLS during animation load */
.vial-float { width: 6rem; height: 10rem; contain: layout size; }
/* Font swap stability: ensure text doesn't reflow when web fonts load */
h1, h2, h3, h4, h5, h6, .font-display, [style*="font-display"] {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}
/* Prevent iconify icons from causing layout shift by reserving space */
iconify-icon { display: inline-block; width: 1em; height: 1em; contain: layout; }
iconify-icon[class*="text-2xl"] { width: 1.5rem; height: 1.5rem; }
iconify-icon[class*="text-3xl"] { width: 1.875rem; height: 1.875rem; }
iconify-icon[class*="text-4xl"] { width: 2.25rem; height: 2.25rem; }
iconify-icon[class*="text-xl"] { width: 1.25rem; height: 1.25rem; }
iconify-icon[class*="text-lg"] { width: 1.125rem; height: 1.125rem; }