/* ==========================================================================
   Aitrixa — single product page
   --------------------------------------------------------------------------
   Enqueued only on is_product() (see functions.php).
   Tokens come from aitrixa.css — never hardcode hex / sizes here.
   --------------------------------------------------------------------------
   Sections (top to bottom of the page):
     1. Upsell strip (also used on homepage; defined here too for safety)
     2. Breadcrumb
     3. Product container layout (two-column grid)
     4. Gallery
     5. Summary basics — eyebrow, title, formula, price, quick-specs
     6. Size selector + variations
     7. Quantity stepper + add-to-cart button
     8. Trust strip
     9. Tabs (Description + Documents/CoA)
    10. Related products carousel
    11. Sticky cart bar
    12. Responsive overrides
   ========================================================================== */


/* ==========================================================================
   1. Upsell strip
   --------------------------------------------------------------------------
   Spec uses ink-bg full-width strip with mono caps text. Same component as
   on home; if a global stylesheet ever defines this, these rules just match.
   ========================================================================== */
.upsell-strip {
    background: var(--ink);
    padding: 13px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    flex-wrap: wrap;
}
.upsell-strip strong {
    color: var(--white);
    font-weight: 500;
}
.upsell-strip .upsell-sep,
.upsell-strip .sep {
    color: rgba(255, 255, 255, .2);
}


/* ==========================================================================
   2. Breadcrumb
   --------------------------------------------------------------------------
   WC's nav.woocommerce-breadcrumb. Em-dash separator from PHP filter
   (see inc/product-render.php). Sits in the page max-width container.
   ========================================================================== */
.woocommerce-breadcrumb {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px var(--gutter);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.woocommerce-breadcrumb a {
    color: var(--mute);
    text-decoration: none;
    transition: color .12s;
}
.woocommerce-breadcrumb a:hover {
    color: var(--ink);
}
.woocommerce-breadcrumb .sep {
    color: var(--mute-2);
}


/* ==========================================================================
   3. Product container layout — two-column grid
   --------------------------------------------------------------------------
   Gallery 2fr, summary 3fr, hairline border, sharp corners, white bg.
   The .aitrixa-single-product main wrap centers and pads.
   ========================================================================== */
.aitrixa-single-product {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.woocommerce div.product {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    border: 1px solid var(--line);
    background: var(--white);
    margin: 24px 0 0;
}


/* ==========================================================================
   4. Gallery
   ========================================================================== */
.woocommerce-product-gallery {
    position: relative;
    background: var(--white);
    border-right: 1px solid var(--line-soft);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.woocommerce-product-gallery__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}
/* Striped placeholder only shown when no product image exists */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image--placeholder {
    background: repeating-linear-gradient(
        -45deg,
        var(--panel-2) 0, var(--panel-2) 6px,
        var(--panel-3) 6px, var(--panel-3) 12px
    );
}

/* Real image — let WC's <img> fill the wrapper. */
.woocommerce-product-gallery__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hatch-pattern placeholder */
.woocommerce-product-gallery__image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--mute-2);
}
.woocommerce-product-gallery__image--placeholder span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute-2);
    text-align: center;
    line-height: 2;
}

/* Gallery thumbnails */
.woocommerce-product-gallery__thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.woocommerce-product-gallery__thumbnail {
    aspect-ratio: 1 / 1;
    background: var(--panel);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-product-gallery__thumbnail:hover,
.woocommerce-product-gallery__thumbnail.active {
    background: var(--panel-3);
}
.woocommerce-product-gallery__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.woocommerce-product-gallery__thumbnail.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ink);
}

/* Badge ribbon — top-left */
.woocommerce-product-gallery .product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--ink);
    color: var(--white);
}


/* ==========================================================================
   5. Summary basics — eyebrow, title, formula, price, quick specs
   ========================================================================== */
.summary.entry-summary {
    padding: 0 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

/* Eyebrow */
.posted_in {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
    display: block;
}
.posted_in a {
    color: var(--mute);
    text-decoration: none;
}
.posted_in a:hover {
    color: var(--ink);
}

/* Title */
.woocommerce div.product h1.product_title.entry-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 6px;
}

/* Formula line */
.product-formula {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    color: var(--mute);
    margin: 0 0 20px;
}

/* Price block */
.woocommerce div.product .price {
    margin: 0 0 16px;
}
.woocommerce div.product .price .woocommerce-Price-amount.amount {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -.02em;
}
.price-from-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    display: block;
    margin-bottom: 4px;
}
.price-per-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mute);
    margin-left: 8px;
}
.price-per-unit:empty {
    display: none;
}

/* Quick specs grid */
.product-quick-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--line-soft);
    margin-bottom: 28px;
}
.product-quick-spec {
    padding: 14px 16px;
    border-right: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
.product-quick-spec:last-child {
    border-right: none;
}
.product-quick-spec strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin-bottom: 3px;
}


/* ==========================================================================
   6. Size selector + variations
   ========================================================================== */
.woocommerce div.product form.cart.variations_form {
    margin-bottom: 20px;
}

.size-selector {
    margin: 0 0 20px;
}
.size-selector__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /* The plugin renders ((span)mg(/span)(a)Clear(/a)) inside this label —
       hide both children and inject the mock’s "Select size" via ::before. */
    font-size: 12px !important;
}
.size-selector__label > span,
.size-selector__label > a.reset_variations {
    display: none !important;
}
.size-selector__label::before {
    content: "Select size";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
}
.size-selector__label span {
    color: var(--ink);
    font-weight: 500;
}
.size-selector__label .reset_variations {
    color: var(--mute);
    text-decoration: none;
    font-size: 9.5px;
    letter-spacing: .18em;
    transition: color .15s;
}
.size-selector__label .reset_variations:hover {
    color: var(--ink);
}

.size-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart .size-option,
button.size-option {
    padding: 10px 16px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 76px;
    transition: background .15s, border-color .15s, color .15s;
    border-radius: 0;
}

.woocommerce div.product form.cart .size-option:hover,
button.size-option:hover {
    border-color: var(--ink);
    background: var(--white);
    color: var(--ink);
}

.size-option:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.woocommerce div.product form.cart .size-option.active,
button.size-option.active {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

.woocommerce div.product form.cart .size-option.soldout,
.woocommerce div.product form.cart .size-option[disabled],
button.size-option.soldout,
button.size-option[disabled] {
    color: var(--mute-2);
    background: var(--white);
    border-color: var(--line-soft);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .5;
}

.size-option__label {
    font-family: var(--font-mono);
    white-space: nowrap;
}
.size-option__flag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 2px;
}


/* ==========================================================================
   7. Quantity stepper + add-to-cart button
   ========================================================================== */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: 52px;
    align-items: stretch;
    gap: 0;
    margin: 0;
    border: 0.8px solid var(--ink);
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.quantity {
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--ink);
    background: var(--white);
}

.quantity input.qty {
    flex: 0 0 47px;
    min-width: 47px;
    width: 47px;
    border: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
    border-radius: 0;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-btn {
    width: 36px;
    height: 100%;
    align-self: stretch;
    border: none;
    background: transparent;
    color: var(--mute);
    font-family: var(--font-mono);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    transition: background .12s, color .12s;
    border-radius: 0;
}
.qty-btn:hover {
    background: var(--panel-3);
    color: var(--ink);
}
.qty-btn--minus { border-right: 1px solid var(--line-soft); }
.qty-btn--plus  { border-left:  1px solid var(--line-soft); }

.qty-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

button.single_add_to_cart_button.button.alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    background: var(--ink);
    color: var(--white);
    border: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    align-self: stretch;
    box-sizing: border-box;
    border-radius: 0;
    transition: background .15s, color .15s;
}
button.single_add_to_cart_button.button.alt:hover {
    background: var(--white);
    color: var(--ink);
}
button.single_add_to_cart_button.button.alt:disabled,
button.single_add_to_cart_button.button.alt.disabled,
button.single_add_to_cart_button.button.alt.wc-variation-selection-needed {
    opacity: .5;
    cursor: not-allowed;
    background: var(--ink);
    color: var(--white);
}
button.single_add_to_cart_button.button.alt svg {
    flex-shrink: 0;
}


/* ==========================================================================
   8. Trust strip
   ========================================================================== */
.product-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 20px;
    margin-top: 4px;
}
.trust-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    border-right: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.6;
}
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child  { border-right: none; }
.trust-item strong {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}


/* ==========================================================================
   9. Tabs — Description + Documents/CoA
   ========================================================================== */
.woocommerce-tabs {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
}
.woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs li {
    border-right: 1px solid var(--line-soft);
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs li::before { content: none; }
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 16px 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    cursor: pointer;
    transition: color .15s, background .15s;
    text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce-tabs ul.tabs li.active a {
    color: var(--ink);
    background: var(--white);
    font-weight: 500;
    position: relative;
}
.woocommerce-tabs ul.tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--white);
}

.woocommerce-Tabs-panel {
    display: none;
    padding: 48px var(--gutter);
    background: var(--white);
}
.woocommerce-Tabs-panel.active { display: block; }

.woocommerce-Tabs-panel--description {
    max-width: 720px;
}
.woocommerce-Tabs-panel--description h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 20px;
}
.woocommerce-Tabs-panel--description p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--body);
    margin: 0 0 16px;
}
.tab-section-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.aitrixa-documents-list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--line-soft);
    background: var(--line-soft);
    max-width: 640px;
}
.aitrixa-document {
    background: var(--white);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}
.aitrixa-document__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    margin: 0 0 3px;
}
.aitrixa-document__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
.coa-btn {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 0;
}
.coa-btn:hover {
    background: var(--ink);
    color: var(--white);
}
.coa-btn--primary {
    background: var(--ink);
    color: var(--white);
}
.coa-btn--primary:hover {
    background: var(--white);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Plugin classname bridge — aitrixa-core emits a slightly different markup
   shape than the design mock. These rules map the plugin's actual class
   names onto the existing .aitrixa-document* / .coa-btn typography so we
   don't need to touch the plugin to get the spec-compliant visual.

   Plugin emits:                  Mock equivalent:
     ul.aitrixa-documents           .aitrixa-documents-list
     .aitrixa-document__head        .aitrixa-document__title
     .aitrixa-document__detail      .aitrixa-document__meta
     a.aitrixa-document__download   .coa-btn
     li.aitrixa-document.is-latest  → primary download button
   -------------------------------------------------------------------------- */
/* Astra entry-content underline neutraliser ----------------------------
   The WC tabs panel has class .entry-content, and Astra ships an inline
   .ast-single-post .entry-content a { text-decoration: underline } rule
   (specificity 0,2,1) which leaks underlines onto every styled link inside
   tab panels. Scope our reset to the panel + outrank Astra (0,3,1). */
.woocommerce-Tabs-panel.entry-content a,
.woocommerce-Tabs-panel.entry-content a:hover,
.woocommerce-Tabs-panel.entry-content a:focus,
.woocommerce-Tabs-panel.entry-content a:visited {
    text-decoration: none;
}

ul.aitrixa-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    border: 1px solid var(--line-soft);
    background: var(--line-soft);
    max-width: 640px;
}
ul.aitrixa-documents > li.aitrixa-document {
    list-style: none;
    margin: 0;
}
ul.aitrixa-documents > li.aitrixa-document::before { content: none; }
.aitrixa-document__head {
    /* Title row — sans 600. May contain a "Latest" tag span as child. */
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* If the plugin renders the "Latest" marker as plain text (not a child element)
   we can't style just the badge — but if it does emit a span, this catches it. */
.aitrixa-document__head .aitrixa-document__flag,
.aitrixa-document__head .is-latest-tag,
.aitrixa-document__head .aitrixa-document__tag,
.aitrixa-document__head small {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 3px 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    line-height: 1;
}
.aitrixa-document__detail {
    /* Meta row — mono caps. */
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
/* Apply .coa-btn styling to the plugin's download anchor. */
li.aitrixa-document a.aitrixa-document__download,
li.aitrixa-document button.aitrixa-document__download {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 0;
}
li.aitrixa-document a.aitrixa-document__download:hover,
li.aitrixa-document button.aitrixa-document__download:hover {
    background: var(--ink);
    color: var(--white);
}
/* Latest doc gets the filled (primary) button treatment. */
li.aitrixa-document.is-latest a.aitrixa-document__download,
li.aitrixa-document.is-latest button.aitrixa-document__download {
    background: var(--ink);
    color: var(--white);
}
li.aitrixa-document.is-latest a.aitrixa-document__download:hover,
li.aitrixa-document.is-latest button.aitrixa-document__download:hover {
    background: var(--white);
    color: var(--ink);
}
/* The plugin's LI uses the same 1fr auto grid as the .aitrixa-document spec
   block. Inherits the existing .aitrixa-document rule above (line ~660),
   which sets padding / display:grid / grid-template-columns. No override
   needed unless the plugin emits a flex layout — handle that defensively: */
ul.aitrixa-documents > li.aitrixa-document {
    background: var(--white);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}



/* ==========================================================================
   10. Related products — carousel
   ========================================================================== */
.woocommerce div.product section.related.products,
section.related.products {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
    padding: 28px 44px 32px;
    background: var(--panel);
    margin: 0;
}
.related.products > h2 {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
}
.related-carousel-nav {
    display: flex;
    gap: 4px;
}
.related-carousel-btn {
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
    border-radius: 0;
}
.related-carousel-btn:hover {
    background: var(--panel-3);
    border-color: var(--ink);
}
.related-carousel-btn:disabled {
    opacity: .3;
    cursor: default;
}

.related-carousel-track-wrap {
    overflow: hidden;
}
.related.products ul.products {
    list-style: none;
    display: flex;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    margin: 0;
    padding: 0;
}
.related.products ul.products li.product {
    display: flex;
    flex-direction: column;
    background: var(--white);
    flex: 0 0 calc(25% - .75px);
    min-width: 0;
    cursor: pointer;
    transition: background .15s;
    margin: 0;
    padding: 0;
    list-style: none;
}
.related.products ul.products li.product::before { content: none; }
.related.products ul.products li.product:hover {
    background: var(--panel-2);
}

.related.products .woocommerce-loop-product__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-product-img {
    aspect-ratio: 1 / 1;
    background: var(--white, #fff);
    display: block;
    overflow: hidden;
    border: 0;
}

/* Image fills the wrapper edge-to-edge with no Astra/WC margin pulling it. */
.related.products li.product .related-product-img img,
.woocommerce-js .related.products li.product .related-product-img img,
.woocommerce-js ul.products li.product .related-product-img a img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}
.related-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.related-product-img span {
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-2);
    text-align: center;
    line-height: 1.8;
}
.related-product-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.related-product-category {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
}
.related.products .woocommerce-loop-product__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 4px;
    padding: 0;
}
.related.products ul.products .price {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 0;
    margin-top: auto;
}
.related.products ul.products .price .woocommerce-Price-amount {
    font-size: 14px;
}

.related-product-footer {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--line-soft);
}
.related.products .add_to_cart_button,
.related.products .button.add_to_cart_button {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 10px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 0;
}
.related.products .add_to_cart_button:hover,
.related.products .button.add_to_cart_button:hover {
    background: var(--white);
    color: var(--ink);
}


/* ==========================================================================
   11. Sticky cart bar
   ========================================================================== */
.sticky-cart-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    z-index: 80;
    transform: translateY(100%);
    transition: transform .3s ease;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
}
.sticky-cart-bar.visible {
    transform: translateY(0);
}
.sticky-cart-bar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}
.sticky-cart-bar__name {
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--ink);
    flex: 1;
}
.sticky-cart-bar__size {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}
.sticky-cart-bar__price {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    white-space: nowrap;
}
.sticky-cart-bar__price .woocommerce-Price-amount {
    font-size: 18px;
}
.sticky-cart-bar__btn {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 13px 28px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    border-radius: 0;
}
.sticky-cart-bar__btn:hover {
    background: var(--white);
    color: var(--ink);
}


/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
    .woocommerce-product-gallery {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
    }
    .summary.entry-summary {
        padding: 32px 28px;
    }
    .related.products ul.products li.product {
        flex: 0 0 calc(33.333% - .67px);
    }
}

@media (max-width: 720px) {
    .summary.entry-summary { padding: 28px 24px; }
    section.related.products { padding: 28px 24px; }
    .product-quick-specs { grid-template-columns: 1fr 1fr; }
    .product-quick-spec:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid var(--line-soft);
    }
    .product-trust { grid-template-columns: 1fr; gap: 10px; }
    .trust-item {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 0 0 10px;
    }
    .trust-item:last-child { border-bottom: none; }
    .related.products ul.products li.product {
        flex: 0 0 calc(50% - .5px);
    }
    .sticky-cart-bar__inner {
        gap: 12px;
        padding: 12px 16px;
    }
    .sticky-cart-bar__size { display: none; }
}

@media (max-width: 480px) {
    .related.products ul.products li.product {
        flex: 0 0 100%;
    }
    .woocommerce-tabs ul.tabs { flex-wrap: wrap; }
    .woocommerce-Tabs-panel { padding: 32px 20px; }
    .sticky-cart-bar__name { font-size: 16px; }
    .sticky-cart-bar__btn { padding: 11px 18px; font-size: 9.5px; }
    .aitrixa-document {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ==========================================================================
   13. Clickability fixes vs design mock
   --------------------------------------------------------------------------
   The mock renders the category eyebrow as plain text and never shows a
   "Clear" reset link inside the variations form. WC by default emits both
   as live links/anchors. We neutralise them visually here without removing
   the underlying anchors (keeps category SEO + a11y intact).
   ========================================================================== */

/* Category eyebrow — disable click + underline. Anchor stays in DOM for SEO. */
.summary .posted_in a {
    pointer-events: none;
    cursor: text;
    color: inherit;
    text-decoration: none;
}

/* WC's reset_variations "Clear" link — hidden per mock. Re-selecting a size
   already replaces the active one, so this control is redundant for the user. */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

/* Out-of-stock related-card CTA: when the product is out of stock WC strips
   .add_to_cart_button from the anchor, so our existing
   .related.products .add_to_cart_button rule does not match. Style the bare
   .button anchor inside the related-card footer the same way, but muted to
   read as "Sold Out". */
.related.products li.product.outofstock .related-product-footer .button,
.related.products li.product.outofstock .related-product-footer a.button {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 10px;
    background: var(--white);
    color: var(--mute);
    border: 1px solid var(--line);
    cursor: not-allowed;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 0;
    pointer-events: none;
}


/* ==========================================================================
   14. WooCommerce layout-grid override + posted_in removal
   --------------------------------------------------------------------------
   WC ships a built-in layout file (woocommerce-layout-grid.min.css) that
   forces:
     .woocommerce div.product div.images  { width: 48%; float: left;  }
     .woocommerce div.product div.summary { width: 48%; float: right; }
   Our div.product is display:grid with two fixed columns; the float + 48%
   sizing collapses both panels to ~half their grid cells, which is why the
   gallery + summary end up tiny on desktop. Override to let the grid drive
   the sizing, drop the floats, and stretch panels to fill their cells.
   ========================================================================== */
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.woocommerce-product-gallery,
.woocommerce #content div.product div.summary {
    width: 100%;
    max-width: none;
    float: none;
}

/* The image inside the gallery — make it fill the gallery cell as a square,
   regardless of its natural pixel size (placeholder is only 150x150 right now). */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.woocommerce div.product div.images.woocommerce-product-gallery img,
.woocommerce div.product div.woocommerce-product-gallery img,
.woocommerce-product-gallery img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Hide WC default category eyebrow above the title (mock has no .posted_in). */
.summary .posted_in {
    display: none !important;
}


/* ==========================================================================
   15. Breadcrumb — mock-spec sizing + bottom rule
   --------------------------------------------------------------------------
   Mock places a hairline bottom-border across the full viewport width with
   18px vertical padding on the breadcrumb. The breadcrumb in our markup is
   rendered inside <main class="site-main"> which already supplies the
   --container-pad horizontal gutter, so we use a negative-margin trick to
   break out edge-to-edge for the line, then re-apply the gutter as padding.
   ========================================================================== */
.aitrixa-single-product > .woocommerce-breadcrumb,
main.site-main > .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    margin: 0 calc(-1 * var(--gutter)) 0;
    padding: 18px var(--gutter);
    border-bottom: 0.8px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.55;
    background: transparent;
}
.woocommerce-breadcrumb a {
    color: var(--mute);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    color: var(--ink);
}
.woocommerce-breadcrumb .sep {
    margin: 0 .9em;
    color: var(--line);
}
.woocommerce-breadcrumb [aria-current="page"],
.woocommerce-breadcrumb > span:last-child {
    color: var(--ink);
}


/* ==========================================================================
   16. Force upsell-strip on single product (override aitrixa.css :not chain).
   ========================================================================== */
body.single-product:not(.woocommerce-shop):not(.tax-product_cat):not(.tax-product_tag) .upsell-strip,
body.single-product .upsell-strip,
.upsell-strip {
    display: flex !important;
}


/* ==========================================================================
   17. Kill #primary 60px margin-top from Astra customizer.
   --------------------------------------------------------------------------
   Astra inline-emits .ast-plain-container.ast-no-sidebar #primary { margin-top: 60px }
   inside a (min-width: 1200px) media query. Mock has 0 gap between the
   upsell strip and the breadcrumb. Beat Astra’s specificity (0,3,1) by
   adding our class to the chain (0,4,1).
   ========================================================================== */
@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary.aitrixa-single-product {
        margin-top: 0;
    }
}


/* ==========================================================================
   18. Static gallery (no zoom/lightbox).
   --------------------------------------------------------------------------
   Defensive belt-and-braces: the lightbox/zoom features are unhooked at
   PHP level (theme-support removed, scripts dequeued, template emits a
   bare img). These rules hide any residual markup that some plugin or a
   future WC update might re-inject — the magnifier trigger anchor and
   the PhotoSwipe overlay container. Mock has neither.
   ========================================================================== */
.woocommerce-product-gallery__trigger,
.pswp {
    display: none !important;
    pointer-events: none !important;
}


/* ==========================================================================
   19. Cursor / clickability fix
   --------------------------------------------------------------------------
   Root cause: assets/aitrixa.css defines a global .product class used by
   the catalog grid tiles, with cursor: pointer and a panel-2 hover tint.
   WooCommerce’s single-product wrapper (div#product-{slug}) also uses
   class="product", so the entire single-product page container inherits
   that pointer cursor + hover state — making non-interactive areas
   (gallery hatched bg, whitespace around the title, etc.) appear clickable.

   Fix strategy:
   1. .woocommerce div.product overrides the catalog rule on specificity
      alone (0,2,1 vs 0,1,0) without !important and without disturbing the
      grid layout already defined further down in this file.
   2. Universal cursor reset on descendants, then opt-in only for genuinely
      interactive elements. More robust than chasing individual leaks.
   3. Hover reset stops the catalog tile’s panel-2 tint flashing across
      the entire single product page when the cursor hovers anywhere.

   Long-term: rename the catalog tile class to .catalog-product or
   .product-card so it stops colliding with WooCommerce’s .product.
   ========================================================================== */
.woocommerce div.product {
    cursor: default;
    grid-column: auto;
    border-right: none;
    border-bottom: none;
    min-height: 0;
}
.woocommerce div.product:hover {
    background: var(--white);
}

/* Reset cursor on all descendants, then opt-in only real interactive elements. */
.woocommerce div.product * {
    cursor: auto;
}
.woocommerce div.product a,
.woocommerce div.product button,
.woocommerce div.product .size-option:not(.soldout):not([disabled]),
.woocommerce div.product .qty-btn,
.woocommerce div.product label[for],
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    cursor: pointer;
}
.woocommerce div.product .size-option.soldout,
.woocommerce div.product .size-option[disabled] {
    cursor: not-allowed;
}
.woocommerce div.product input,
.woocommerce div.product textarea {
    cursor: text;
}


/* ==========================================================================
   20. Tabs panel layout & content typography
   --------------------------------------------------------------------------
   Mock spec for the tab panel under the wc-tabs:
     - padding: 48px (var(--gutter)) on all sides
     - inner content max-width ~720px so long copy reads at a comfortable
       measure; rest of the panel is empty whitespace
     - body text in IBM Plex Sans 14.5px, line-height 1.55
   ========================================================================== */
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-js div.product .woocommerce-tabs .panel,
.woocommerce-js div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 48px var(--gutter);
    margin: 0;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink, #0b0b0d);
}

/* Constrain reading column inside the description panel only.
   CoA panel keeps full width so the document rows stretch edge-to-edge. */
.woocommerce-tabs .woocommerce-Tabs-panel--description > * {
    max-width: 720px;
}

/* Description body paragraphs: comfortable spacing between paragraphs. */
.woocommerce-tabs .woocommerce-Tabs-panel--description p {
    margin: 0 0 1em;
}
.woocommerce-tabs .woocommerce-Tabs-panel--description p:last-child {
    margin-bottom: 0;
}

/* Description H2 heading: sans bold, sized to ~20px in the mock. */
.woocommerce-tabs .woocommerce-Tabs-panel--description h1,
.woocommerce-tabs .woocommerce-Tabs-panel--description h2,
.woocommerce-tabs .woocommerce-Tabs-panel--description h3 {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: var(--ink, #0b0b0d);
}

/* ==========================================================================
   21. .tab-section-label eyebrow
   --------------------------------------------------------------------------
   Mock uses an eyebrow above the heading in each tab panel:
     PRODUCT OVERVIEW (description tab)
     AVAILABLE DOCUMENTATION (CoA tab)
   Editors can opt in by wrapping a div.tab-section-label around the label
   text in the description editor. The CoA panel gets the eyebrow injected
   automatically via ::before on the panel itself (see Section 22).
   ========================================================================== */
.tab-section-label,
.woocommerce-Tabs-panel .tab-section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0 0 18px;
}

/* ==========================================================================
   22. CoA / Documents list layout (revised to match mock)
   --------------------------------------------------------------------------
   The plugin emits ul.aitrixa-documents > li.aitrixa-document with default
   styling that already matches the mock’s structural intent: a narrow
   column of self-contained bordered cards. Mock spec:
     - ul: max-width ~640px (plugin default), left-aligned
     - each li: bordered card (0.8px solid #e4e5e7), padding ~20px
     - inside: title (sans bold) + detail line (mono caps mute) stacked on
       the left, DOWNLOAD pill on the right, all vertically centered
     - first/Latest doc gets a filled-black DOWNLOAD pill
     - others get a white-bordered DOWNLOAD pill
     - LATEST chip is NOT shown in the mock
     - eyebrow "AVAILABLE DOCUMENTATION" injected via ::before on the panel
   ========================================================================== */
.woocommerce-Tabs-panel--aitrixa_documents::before {
    content: "Available documentation";
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0 0 18px;
}

/* List container: keep narrow column from plugin, but tighter borders. */
.woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents,
ul.aitrixa-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* Each document row: bordered card, two-column layout (text | download). */
.woocommerce div.product .aitrixa-documents .aitrixa-document,
.aitrixa-documents .aitrixa-document {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    margin: 0 0 -0.8px 0; /* collapse adjacent borders by overlapping 0.8px */
    border: 0.8px solid var(--line-soft, #e4e5e7);
    border-radius: 0;
    background: var(--white, #fff);
}

/* Title + detail stack (left column). Both pinned to grid column 1.
   Download is pinned to column 2 spanning all rows of the row track. */
.aitrixa-document__head {
    display: block;
    margin: 0 0 4px;
    grid-column: 1;
}
.aitrixa-document__detail {
    grid-column: 1;
}
.aitrixa-document__title {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--ink, #0b0b0d);
}

/* LATEST chip is not in the mock — hide it. */
.aitrixa-document__flag {
    display: none !important;
}

.aitrixa-document__detail {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0;
    line-height: 1.4;
}

/* Download pill: right column, vertically centered. */
.aitrixa-documents li.aitrixa-document a.aitrixa-document__download,
.aitrixa-document a.aitrixa-document__download {
    display: inline-block;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 18px;
    background: var(--white, #fff);
    color: var(--ink, #0b0b0d);
    border: 0.8px solid var(--ink, #0b0b0d);
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
.aitrixa-documents li.aitrixa-document.is-latest a.aitrixa-document__download,
.aitrixa-document.is-latest a.aitrixa-document__download {
    background: var(--ink, #0b0b0d);
    color: var(--white, #fff);
    border-color: var(--ink, #0b0b0d);
}
.aitrixa-document a.aitrixa-document__download:hover {
    background: var(--ink, #0b0b0d);
    color: var(--white, #fff);
}
.aitrixa-document.is-latest a.aitrixa-document__download:hover {
    background: var(--white, #fff);
    color: var(--ink, #0b0b0d);
}


/* ==========================================================================
   23. Tab list — mock styling + neutralise Astra active-tab bar
   --------------------------------------------------------------------------
   Astra injects a 3px black bar at the top of the active tab via ::before
   on the active li. Mock has no such indicator — active state is shown
   only via font-weight (500) and color (ink). We neutralise the ::before
   and restyle the tab list itself to match mock spec:
     - <a> padding: 16px 28px
     - <a> font: 12px IBM Plex Sans, letter-spacing .22em, uppercase
     - active: weight 500, color ink
     - inactive: weight 400, color mute
     - no underline, no border-bottom on active tab
     - no focus outline (it appears as a black flash on click)
   ========================================================================== */

/* Kill Astra’s active-tab indicator bar. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li.active::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Tab anchor: mock-spec spacing + typography. */
.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 16px 28px;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    text-decoration: none;
    border: 0;
    background: transparent;
    transition: color .15s ease;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ink, #0b0b0d);
    font-weight: 500;
    text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--ink, #0b0b0d);
    text-decoration: none;
}

/* Kill the focus-outline black flash when tabs are clicked. */
.woocommerce-tabs ul.tabs li a:focus,
.woocommerce-tabs ul.tabs li a:focus-visible,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}

/* Wrapper layout: only line BELOW the tab list (on the ul). Drop the line
   above the tabs that the wrapper currently has. */
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce div.product .woocommerce-tabs {
    border-top: 0.8px solid var(--line-soft, #e4e5e7) !important;
    padding-top: 0 !important;
}
.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-top: 0;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    overflow: visible !important;
}
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   24. Active-tab merge effect (mock parity)
   --------------------------------------------------------------------------
   Mock: the tab list sits on a light-gray strip (#f6f6f7). Inactive tabs
   show the gray; the active tab’s anchor is filled white so it
   visually merges with the white panel below — the tab “opens” into
   the content area. A vertical hairline on the right edge of the active li
   separates the white tab from the gray strip when there are more tabs.
   ========================================================================== */
.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f6f6f7;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    background: transparent;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--white, #fff) !important;
}

/* Vertical separator between every tab — mock places a hairline on the
   right edge of every li. No left borders on any tab. */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-right: 0.8px solid var(--line-soft, #e4e5e7) !important;
    border-left: 0 !important;
}

/* No separate active-tab border-bottom hack. Mock keeps the ul’s
   bottom border continuous; the white tab over the white panel below
   creates the merge effect on its own. */


/* ==========================================================================
   25. Related products card — inset image to match mock
   --------------------------------------------------------------------------
   Mock related cards have a white background with the image inset by ~28px
   on all sides (white margin around the image). Live currently has the
   image flush against the card edges. Add card padding so image is inset.
   Card body content (category, title, price) should not be double-padded —
   it already had its own internal alignment.
   ========================================================================== */
.related.products li.product,
.woocommerce div.product .related.products li.product {
    padding: 28px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Image wrapper sits at 0 padding inside the card; image fills the
   wrapper square. Mock has the image flush against the body below —
   no margin between image and body (body has its own top padding). */
.related.products li.product .related-product-img {
    margin: 0 !important;
    padding: 0 !important;
}
.related.products li.product .related-product-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Body + footer have their own internal padding to match the mock’s
   inset of category/title/price and CTA inside the card’s 28px padding. */
.related.products li.product .related-product-body {
    padding: 12px 14px 14px !important;
    margin: 0 !important;
}
.related.products li.product .related-product-footer {
    padding: 8px 14px 12px !important;
    margin-top: 0 !important;
    border-top: 0.8px solid var(--line-soft, #e4e5e7);
}


/* ==========================================================================
   26. Active-tab merge cut via ::after (per Claude-design recipe)
   --------------------------------------------------------------------------
   Mock: the active tab visually merges into the panel below by "cutting"
   the bottom border of the ul exactly where the active tab sits. We do
   this with a ::after white strip on the active li, positioned over the
   ul’s 0.8px bottom border. The active li needs position: relative
   so the ::after can be absolutely positioned against it.
   ========================================================================== */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    position: relative;
}

/* Override WC’s default 5px decorative ::after squares with our merge cut.
   WC selector specificity is (0,5,0); ours needs to match or beat that. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce-tabs ul.tabs li.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -0.8px !important;
    width: auto !important;
    height: 0.8px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 2;
}

/* Kill WC’s decorative ::before/::after on inactive tabs entirely. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li:not(.active)::after,
.woocommerce-js div.product .woocommerce-tabs ul.tabs li:not(.active)::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active)::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active)::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ==========================================================================
   27. Panel border-top replaces ul border-bottom (clean merge)
   --------------------------------------------------------------------------
   Instead of fighting WC’s tab pseudo-elements to "cut" the line under
   the active tab, we drop the line from the ul entirely (Section 24/26
   amended above) and put a single hairline on top of the active panel.
   Inactive tabs sit on the gray strip with no line beneath; active tab
   merges into the white panel cleanly. The tab strip’s left/right
   edges and the panel’s top edge form the visual frame.
   ========================================================================== */
/* Panel: NO border-top — the line lives on the ul’s border-bottom
   and the active tab covers it via -0.8px margin-bottom + z-index. */
.woocommerce-Tabs-panel.active,
.woocommerce-Tabs-panel.wc-tab,
.woocommerce div.product .woocommerce-Tabs-panel {
    border-top: 0;
}

/* Inactive tabs: bottom hairline so the gray strip area stays delineated
   along the inactive tab(s) only. The active tab has no line under it. */
/* Active tab covers the ul’s border-bottom by adding a 0.8px white
   box-shadow on its inset bottom edge — simpler than margin tricks and
   guaranteed to render. The shadow extends 0.8px below the <a> in white,
   masking the gray line underneath. */
.woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    position: relative;
    z-index: 2 !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    box-shadow: 0 0.8px 0 0 var(--white, #fff), 0 1.6px 0 0 var(--white, #fff) !important;
}

/* Disable the merge-cut ::after — no longer needed since the ul has no
   border-bottom to hide. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce-tabs ul.tabs li.active::after {
    content: none !important;
    display: none !important;
}




/* ==========================================================================
   28. Mock-replicating active-tab merge (final, copies design-mock recipe)
   --------------------------------------------------------------------------
   Mock’s exact mechanism: ul has the bottom hairline; active <a> emits a
   ::after at bottom: -1px / height: 1px / background: white that paints
   over the section of the ul border directly under the active anchor.
   No margin tricks, no inactive-li borders, no panel border-top.
   ========================================================================== */

/* Active anchor needs position: relative so the ::after can be absolutely
   positioned against it. */
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    position: relative;
    box-shadow: none !important;
}

/* The merge cut: white strip at the active anchor’s bottom edge,
   covering the ul’s border-bottom directly underneath. */
.woocommerce-tabs ul.tabs li.active a::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -1px !important;
    width: auto !important;
    height: 1px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 3;
}

/* Reset: kill any old patches from prior rounds. */
.woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs li:not(.active),
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) {
    border-bottom: 0 !important;
}
.woocommerce-Tabs-panel.active,
.woocommerce-Tabs-panel.wc-tab,
.woocommerce div.product .woocommerce-Tabs-panel {
    border-top: 0 !important;
}


/* ==========================================================================
   29. Description tab eyebrow + CoA mock-perfect rows
   --------------------------------------------------------------------------
   Description tab gets a PRODUCT OVERVIEW eyebrow injected via ::before on
   the panel — mirrors the AVAILABLE DOCUMENTATION eyebrow on the CoA tab.
   Mock spec for both eyebrows:
     - IBM Plex Mono 12px / weight 400 / letter-spacing .24em / uppercase
     - color: --mute
     - padding-bottom: 12px / margin-bottom: 20px
     - border-bottom: 0.8px solid --line-soft (the divider line below it)
   ========================================================================== */

/* Description panel eyebrow. */
.woocommerce-Tabs-panel--description::before {
    content: "Product overview";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7);
}

/* CoA panel eyebrow — align with description spec exactly (was previously
   set in Section 22 with slightly different sizes; bring it in line). */
.woocommerce-Tabs-panel--aitrixa_documents::before {
    content: "Available documentation" !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7) !important;
}

/* ==========================================================================
   30. CoA / Documents list — mock-perfect rows
   --------------------------------------------------------------------------
   Mock layout: <div> container display:grid gap:1px bg:#e4e5e7 max-width:640px,
   each row display:grid grid-template-columns:1fr auto bg:white padding:18px 20px.
   The 1px gap + gray container background creates the hairline lines BETWEEN
   rows — no per-row borders.
   Inside row: text block (title sans 15.5/600 + detail mono 11.5/.16em uppercase
   mute) + Download button (mono 11.5 caps black).
   We restyle the plugin’s ul.aitrixa-documents to match this exactly.
   ========================================================================== */

/* Container: ul styled as a grid with 1px gap on a gray bg — the gap shows
   through as the hairline lines between rows. */
.woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 640px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: var(--line-soft, #e4e5e7) !important;
    border: 0.8px solid var(--line-soft, #e4e5e7) !important;
}

/* Each row: 2-col grid (text | download), white background sits inside the
   gray container. No borders — the container’s gap creates the lines. */
.woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    gap: 0 24px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Title: sans 15.5 / 600 / ink. */
.aitrixa-document__head,
.woocommerce div.product .aitrixa-document__head {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}
.aitrixa-document__title,
.woocommerce div.product .aitrixa-document__title {
    display: block !important;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    line-height: 1.3 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the LATEST chip (mock doesn’t show one). */
.aitrixa-document__flag {
    display: none !important;
}

/* Detail: mono 11.5 / .16em / uppercase / mute. */
.aitrixa-document__detail,
.woocommerce div.product .aitrixa-document__detail {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Download button: filled-black for first/Latest, white-bordered for others.
   Mock uses a button with mono caps; our anchor is restyled to match. */
.aitrixa-document a.aitrixa-document__download,
.aitrixa-documents li.aitrixa-document a.aitrixa-document__download {
    display: inline-block !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 9px 16px !important;
    background: var(--white, #fff) !important;
    color: var(--ink, #0b0b0d) !important;
    border: 0.8px solid var(--ink, #0b0b0d) !important;
    border-radius: 0 !important;
    cursor: pointer;
}
.aitrixa-document.is-latest a.aitrixa-document__download,
.aitrixa-documents li.aitrixa-document.is-latest a.aitrixa-document__download {
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
    border-color: var(--ink, #0b0b0d) !important;
}
.aitrixa-document a.aitrixa-document__download:hover {
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
}
.aitrixa-document.is-latest a.aitrixa-document__download:hover {
    background: var(--white, #fff) !important;
    color: var(--ink, #0b0b0d) !important;
}


/* ==========================================================================
   31. Related products typography — mock match
   --------------------------------------------------------------------------
   Title size, price weight, category spacing tightened to match mock.
   ========================================================================== */
.related.products li.product .related-product-category {
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 0 6px !important;
    display: block;
}

.related.products li.product .woocommerce-loop-product__title {
    font-family: "EB Garamond", Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.related.products li.product .price {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 !important;
    display: block;
}


/* ==========================================================================
   32. Related products section header + CTA polish (mock match)
   --------------------------------------------------------------------------
   Mock specs:
     - section h2 "RELATED PRODUCTS": IBM Plex Mono 12px / 700 / .28em /
       uppercase / mute (#6b6d73)
     - card CTA "+ Add to Cart": IBM Plex Mono 10px / 400 / .2em / line-height
       1.55 → height 35px (live was 30px because weight 600 + missing
       line-height made it shrink)
   ========================================================================== */

/* Related products section header. */
.related.products > h2,
.woocommerce div.product .related.products > h2,
section.related.products > h2:first-child,
.related-products-section h2 {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Card CTA: weight 400 (not 600), line-height 1.55, mock-matching pill. */
.related.products li.product .button,
.related.products li.product .add_to_cart_button,
.related.products li.product a.button,
.woocommerce div.product .related.products li.product .button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .2em !important;
    line-height: 1.55 !important;
    text-transform: uppercase !important;
    padding: 9px 10px !important;
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
    border: 0.8px solid var(--ink, #0b0b0d) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Out-of-stock cards: keep the white-bordered "Sold Out" treatment. Higher
   specificity (li.product.outofstock + a.button) so it wins over the
   in-stock filled-black rule. */
.related.products li.product.outofstock a.button,
.related.products li.product.outofstock a.add_to_cart_button,
.woocommerce div.product .related.products li.product.outofstock a.button {
    background: var(--white, #fff) !important;
    color: var(--mute, #6b6d73) !important;
    border: 0.8px solid #c9cacd !important;
    cursor: not-allowed;
}


/* ==========================================================================
   33. Hide WC’s duplicate variation-price block
   --------------------------------------------------------------------------
   When a variation is selected, WooCommerce injects a .single_variation
   div into form.cart containing the selected variation’s price /
   description / availability. The theme renders the price separately
   in the STARTING FROM custom block, so this WC injection appears as
   a duplicate “white rectangle” between the size pills and the qty/cart
   row. The .woocommerce-variation-add-to-cart row immediately below
   (the actual qty + Add to Cart) is unaffected and stays visible.
   ========================================================================== */
.woocommerce div.product form.cart .single_variation,
form.cart .single_variation,
.single_variation_wrap > .single_variation {
    display: none !important;
}


/* ==========================================================================
   34. Cart row qty fills full row height
   --------------------------------------------------------------------------
   The .quantity div is naturally 40px tall but the cart row is 54.5px;
   without an explicit stretch, a 14px white-bordered band shows below
   the qty controls. Make .quantity stretch to fill its grid cell.
   ========================================================================== */
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity,
form.cart .quantity,
.woocommerce div.product form.cart .quantity,
.woocommerce-js div.product form.cart div.quantity {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Make qty buttons hold their 36px width even inside the flex container. */
.woocommerce div.product form.cart .quantity .qty-btn,
form.cart .quantity .qty-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   35. Qty input fills full cart-row height
   --------------------------------------------------------------------------
   Astra and WC default to height: 40px on number inputs (inline style +
   stylesheet). In the 53px-tall bordered cart frame this leaves an empty
   white band above and below the input. Force the input (and parent qty-
   controls) to fill 100% so the input stretches edge-to-edge.
   ========================================================================== */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart .quantity input.input-text,
form.cart .quantity input.qty,
form.cart .quantity input[type="number"] {
    height: 100% !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink, #0b0b0d) !important;
    width: 47px !important;
}

/* qty-controls wrappers around the +/- buttons stretch full height too. */
.woocommerce div.product form.cart .quantity .qty-controls,
form.cart .quantity .qty-controls {
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   36. Strip WC 2em margin-bottom on summary + gallery
   --------------------------------------------------------------------------
   woocommerce-grid.min.css sets:
     .woocommerce-js div.product div.summary { margin-bottom: 2em }
     .woocommerce-js div.product div.images  { margin-bottom: 2em }
   These add 29px of empty space below each column (gallery left, summary
   right) before the tabs. The mock has zero margin here — the tabs sit
   flush below the cart row. Override with matching specificity.
   ========================================================================== */
.woocommerce div.product div.summary,
.woocommerce-js div.product div.summary,
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product div.images,
.woocommerce-js div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   Desktop hide — mobile-only summary additions
   --------------------------------------------------------------------------
   .product-disclaimer and .product-overview are emitted unconditionally by
   inc/product-render.php (via single-product.php) so the same HTML can be
   cached by LiteSpeed regardless of viewport. On desktop the description
   lives in its own tab below; these inline blocks are only meant for the
   mobile layout (≤720px) where the description tab is hidden.

   The mobile sheet (mobile-product.css) re-shows them inside its own
   @media (max-width: 720px) block.
   ========================================================================== */
.product-disclaimer,
.product-overview {
    display: none;
}

/* ============================================================
   Hide the "Sold out" flag inside sold-out size-variation buttons
   ------------------------------------------------------------
   Sold-out variations render as:
       <button class="size-option soldout" disabled>
         <span class="size-option__label">60 mg</span>
         <span class="size-option__flag">Sold out</span>
         <span class="size-price">$150</span>
       </button>
   The extra "Sold out" flag stacks a 3rd line into the button,
   making it taller than its siblings and misaligning the row.
   The grey/opacity/strikethrough styling (lines 427-437 above)
   already makes "sold out" status visually unambiguous, so the
   word itself is redundant. Hide the flag and the button reads
   as size + price with strikethrough, matching the row height
   of the in-stock siblings.
   ============================================================ */
body.single-product .size-option.soldout .size-option__flag,
body.single-product .size-option[disabled] .size-option__flag {
  display: none !important;
}

/* Out-of-stock state for sticky cart bar button.
   Mirrors the .single_add_to_cart_button.disabled treatment. */
.sticky-cart-bar__btn.is-out-of-stock,
.sticky-cart-bar__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.sticky-cart-bar__btn.is-out-of-stock:hover,
.sticky-cart-bar__btn:disabled:hover {
    background: var(--ink);
}