/* ============================================================
   cogent-product.css — Single product page only
   Scoped to .cogent-pp-* selectors. No Tailwind. No !important
   unless overriding parent theme.
   ============================================================ */

:root {
    --cg-bg: #FAFAF7;
    --cg-text: #1A1A1A;
    --cg-muted: #666666;
    --cg-border: #E5E5E0;
    --cg-accent: #2B4C7E;
    --cg-cta-bg: #1A1A1A;
    --cg-cta-text: #FAFAF7;
    --cg-soft-bg: #F4F4F0;
    --cg-orange: #FF4337;
    --cg-radius: 8px;
    --cg-font: 'Inter', system-ui, sans-serif;
}

/* ── Storefront layout resets for product page ─────────────── */

body.single-product #secondary,
body.single-product .widget-area,
body.single-product aside.secondary {
    display: none !important;
    width: 0 !important;
}

body.single-product #primary,
body.single-product #primary.content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.single-product .woocommerce-breadcrumb {
    display: none;
}

/* WooCommerce wraps content in .woocommerce — let it not interfere */
body.single-product .woocommerce {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Hide the native WC product wrapper; our template wraps its own */
body.single-product .woocommerce div.product {
    display: block !important;
    margin: 0;
    padding: 0;
}

/* ── Main wrapper ───────────────────────────────────────────── */

.cogent-pp {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: var(--cg-font);
    color: var(--cg-text);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .cogent-pp {
        padding: 0 32px;
    }
}

/* ── Panel claro sobre el lienzo oscuro ───────────────────────
   Con body.cogent-dark el lienzo pasa a #1A1A1A y las curvas
   del Logo Guide quedan detras. .cogent-pp no tiene fondo
   propio, asi que su contenido caeria directamente sobre el
   negro y ~87 reglas de color quedarian ilegibles.

   Se le da el mismo tratamiento que a .cogent-about,
   .cogent-contact y .cogent-training: panel claro redondeado
   flotando sobre el lienzo. El fondo oscuro se ve alrededor,
   igual que en esas tres paginas, y ni el texto ni los estados
   activos (que usan var(--cg-text) como FONDO) se tocan.
   ─────────────────────────────────────────────────────────── */

body.cogent-dark .cogent-pp {
    max-width: min(1280px, calc(100% - 32px));
    background: var(--cg-bg);
    border-radius: 16px;
    padding-top: 8px;
    padding-bottom: 64px;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */

.cogent-pp__breadcrumb {
    padding: 16px 0 20px;
    font-size: 13px;
    color: var(--cg-muted);
}

.cogent-pp__breadcrumb a {
    color: var(--cg-accent);
    text-decoration: none;
}

.cogent-pp__breadcrumb a:hover { text-decoration: underline; }

.cogent-pp__breadcrumb-sep {
    margin: 0 6px;
    color: var(--cg-border);
}

/* ── Two-column flex container ──────────────────────────────── */

.cogent-pp__main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 48px;
}

@media (min-width: 1024px) {
    .cogent-pp__main {
        flex-direction: row;
        gap: 56px;
        align-items: flex-start;
    }
}

/* ── Left column (gallery + tabs) ──────────────────────────── */

.cogent-pp__left {
    width: 100%;
}

@media (min-width: 1024px) {
    .cogent-pp__left {
        flex: 0 0 calc(55% - 28px);
        max-width: calc(55% - 28px);
        min-width: 0;
        position: sticky;
        top: 120px;
    }
}

/* ── Gallery ────────────────────────────────────────────────── */

.cogent-pp__gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* tabs below have margin-top: 32px — no extra margin-bottom needed */
}

.cogent-pp__gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--cg-bg, #FAFAF7);
    border-radius: var(--cg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Real product image inside main slot */
.cogent-pp__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1; /* sits above the absolute placeholder */
}

/* Fallback placeholder: hidden by default, revealed via onerror JS */
.cogent-pp__img-placeholder {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    inset: 0;
    background: var(--cg-bg, #FAFAF7);
    z-index: 0;
}

.cogent-pp__img-placeholder-text {
    font-family: var(--cg-font);
    font-size: 12px;
    font-weight: 500;
    color: #AAAAAA;
}

.cogent-pp__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* thumb count is dynamic — flex left-aligns real slots, no phantom columns */
}

.cogent-pp__thumb {
    flex: 0 0 calc(25% - 6px); /* mirrors the old 4-col grid; won't exceed 80px */
    max-width: 80px;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--cg-bg, #FAFAF7);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    color: #BBBBBB;          /* SVG currentColor for placeholder icon */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cogent-pp__thumb.is-active,
.cogent-pp__thumb:hover {
    border-color: var(--cg-text);
    color: #1A1A1A;
}

.cogent-pp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.cogent-pp__thumb.is-active img,
.cogent-pp__thumb:hover img {
    opacity: 1;
}

/* Thumbnail placeholder: hidden by default, revealed via onerror JS */
.cogent-pp__thumb-placeholder {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    background: #EDEDE9;
    z-index: 0;
}

/* Pure placeholder slots (no image at all) — visible by default */
.cogent-pp__thumb-placeholder--show {
    display: flex;
}

/* ── Tabs (inside left column) ──────────────────────────────── */

.cogent-pp__tabs {
    margin-top: 32px;
}

.cogent-pp__tab-nav {
    display: flex;
    border-bottom: 1px solid var(--cg-border);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cogent-pp__tab-nav::-webkit-scrollbar { display: none; }

.cogent-pp__tab-btn {
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--cg-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -1px;
}

.cogent-pp__tab-btn:hover { color: var(--cg-text); }

.cogent-pp__tab-btn.is-active {
    color: var(--cg-text);
    font-weight: 600;
    border-bottom-color: var(--cg-text);
}

.cogent-pp__tab-panel {
    display: none;
    padding: 24px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cg-text);
}

.cogent-pp__tab-panel.is-active { display: block; }

/* Description tab */
.cogent-pp__tab-panel h2,
.cogent-pp__tab-panel h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
}

.cogent-pp__tab-panel p { margin: 0 0 16px; }
.cogent-pp__tab-panel p:last-child { margin-bottom: 0; }

/* ---- Description tab: defensive containment --------------------------------
   Scoped to #tab-description to isolate scraped/pasted product copy from
   breaking the layout. Handles five categories found in the audit:

   1. Inline images — <img width="300"> or style="width:300px" can overflow
      narrow columns. Constrain to container, auto height, block to kill gap.

   2. Stray headings — scraped content includes <h1 style="direction:ltr">
      (product 3929) and assorted h4-h6. Cap to match the existing h2/h3 rule
      so they read as body headings, not page titles.

   3. Fixed-width blocks — <ol style="width:300px"> (product 4214), wide
      <table>, <pre>. max-width:100% + overflow handling prevents H-scroll.

   4. [caption] output — WP renders [caption] as
      <div class="wp-caption" style="width:310px">…<p class="wp-caption-text">
      Constrain the div width; style the caption text to muted small type.

   5. [embed] output — WP wraps YouTube/Vimeo in
      <figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
      and injects an <iframe>. Make the wrapper/iframe responsive via
      aspect-ratio so it scales without a JS intrinsic-ratio hack.
   --------------------------------------------------------------------------- */

/* 1 — Inline images */
#tab-description img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2 — Stray headings: cap h1 to match h2/h3; tame h4-h6 to body size */
#tab-description h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
#tab-description h4,
#tab-description h5,
#tab-description h6 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}

/* 3 — Fixed-width blocks: ol, ul, table, pre */
#tab-description ol,
#tab-description ul {
    max-width: 100%;
    padding-left: 1.4em;
    margin: 0 0 16px;
}
#tab-description li { margin-bottom: 4px; }
#tab-description table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 0 16px;
    overflow-x: auto;
    display: block;
}
#tab-description pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    background: var(--cg-soft-bg, #f4f4f0);
    padding: 12px;
    border-radius: 4px;
    margin: 0 0 16px;
}

/* 4 — [caption] → .wp-caption (inline style="width:Npx" overridden by max-width) */
#tab-description .wp-caption,
#tab-description figure {
    max-width: 100%;
    margin: 0 0 16px;
}
#tab-description .wp-caption-text,
#tab-description figcaption {
    font-size: 13px;
    color: var(--cg-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* 5 — [embed] → .wp-block-embed iframe (responsive 16:9) */
#tab-description .wp-block-embed,
#tab-description .wp-has-aspect-ratio {
    max-width: 100%;
    margin: 0 0 16px;
}
#tab-description .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
#tab-description .wp-block-embed__wrapper iframe,
#tab-description iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: none;
}

/* Technical specs tab — table */
.cogent-pp__specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cogent-pp__specs-table tr {
    border-bottom: 1px solid var(--cg-border);
}

.cogent-pp__specs-table tr:last-child { border-bottom: none; }

.cogent-pp__specs-table th,
.cogent-pp__specs-table td {
    padding: 10px 0;
    text-align: left;
}

.cogent-pp__specs-table th {
    width: 40%;
    color: var(--cg-muted);
    font-weight: 500;
    font-size: 13px;
}

.cogent-pp__specs-table td {
    font-weight: 600;
}

/* How to Use tab — numbered steps */
.cogent-pp__how-steps { list-style: none; margin: 0; padding: 0; }

.cogent-pp__how-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cg-border);
}

.cogent-pp__how-step:last-child { border-bottom: none; }

.cogent-pp__step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--cg-text);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.cogent-pp__step-body { flex: 1; }

.cogent-pp__step-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.cogent-pp__step-desc {
    font-size: 13px;
    color: var(--cg-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── Right column ───────────────────────────────────────────── */

.cogent-pp__right {
    width: 100%;
}

@media (min-width: 1024px) {
    .cogent-pp__right {
        flex: 0 0 calc(45% - 28px);
        max-width: calc(45% - 28px);
        min-width: 0;
    }
}

/* ── Title block ────────────────────────────────────────────── */

.cogent-pp__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.cogent-pp__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.cogent-pp__sku-pill {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #888;
    border: 1px solid var(--cg-border);
    background: var(--cg-soft-bg);
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    margin-top: 4px;
}

.cogent-pp__tagline {
    font-size: 14px;
    color: var(--cg-muted);
    margin: 0 0 10px;
    line-height: 1.5;
}

.cogent-pp__meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cogent-pp__stars { display: inline-flex; align-items: center; gap: 3px; }

.cogent-pp__rating-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-text);
}

.cogent-pp__review-count {
    font-size: 13px;
    color: var(--cg-muted);
}

.cogent-pp__stock-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--cg-accent);
    background: #EEF2F8;
    padding: 2px 10px;
    border-radius: 9999px;
    line-height: 1.6;
}

/* ── Price block ────────────────────────────────────────────── */

.cogent-pp__price-block {
    border-top: 1px solid var(--cg-border);
    padding: 16px 0;
}

.cogent-pp__price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cg-muted);
    margin: 0 0 4px;
}

.cogent-pp__price-current {
    font-size: 28px;
    font-weight: 700;
    color: var(--cg-orange);
    line-height: 1.2;
}

.cogent-pp__price-current .woocommerce-Price-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--cg-orange);
}

/* Sale price: active price stays orange; struck-through original goes muted */
.cogent-pp__price-current del,
.cogent-pp__price-current del .woocommerce-Price-amount {
    color: var(--cg-muted);
    font-weight: 400;
}

.cogent-pp__price-range-note {
    font-size: 12px;
    color: #999;
    margin: 4px 0 0;
}

.cogent-pp__price-range-note .woocommerce-Price-amount {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

/* ── Field label (shared: SIZE, COLOR, QUANTITY) ────────────── */

.cogent-pp__field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cg-muted);
    margin: 0 0 8px;
}

/* ── Size selector block ────────────────────────────────────── */

.cogent-pp__size {
    padding: 16px 0;
    border-top: 1px solid var(--cg-border);
}

.cogent-size-btns {
    display: inline-flex;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
}

.cogent-size-btn {
    height: 44px;
    padding: 0 24px;
    border: none;
    border-right: 1px solid var(--cg-border);
    background: #fff;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cogent-size-btn:last-child { border-right: none; }
.cogent-size-btn:hover:not(.is-active) { background-color: var(--cg-soft-bg); }
.cogent-size-btn.is-active { background: var(--cg-text); color: #fff; font-weight: 600; }

/* ── Color selector block ───────────────────────────────────── */

.cogent-pp__color {
    padding: 16px 0;
    border-top: 1px solid var(--cg-border);
}

.cogent-color-selector__current {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-text);
    margin-bottom: 10px;
    min-height: 18px;
}

.cogent-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cogent-color-btn {
    padding: 10px 14px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: #fff;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    min-height: 44px;
    line-height: 1.3;
}

.cogent-color-btn:hover { border-color: var(--cg-text); }
.cogent-color-btn.is-active { border-color: var(--cg-text); background: var(--cg-text); color: #fff; font-weight: 600; }

.cogent-color-btn--custom {
    grid-column: 1 / -1;
    text-align: center;
    border-style: dashed;
    border-color: var(--cg-accent);
    color: var(--cg-accent);
    background: transparent;
}

.cogent-color-btn--custom:hover { background-color: #EEF2F8; border-color: var(--cg-accent); }

/* ── Color search modal ─────────────────────────────────────── */

.cogent-color-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cogent-color-modal[hidden] { display: none; }

.cogent-color-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.cogent-color-modal__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    width: min(480px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 80px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cogent-color-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cg-border);
    flex-shrink: 0;
}

.cogent-color-modal__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cg-text);
    letter-spacing: -0.01em;
}

.cogent-color-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cg-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.cogent-color-modal__close:hover {
    background-color: var(--cg-soft-bg);
    color: var(--cg-text);
}

.cogent-color-modal__search {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-bottom: 1px solid var(--cg-border);
    background: var(--cg-soft-bg);
    font-family: var(--cg-font);
    font-size: 14px;
    color: var(--cg-text);
    box-sizing: border-box;
    flex-shrink: 0;
}

.cogent-color-modal__search::placeholder { color: var(--cg-muted); }

.cogent-color-modal__search:focus {
    outline: none;
    background: #fff;
    border-bottom-color: var(--cg-accent);
}

.cogent-color-modal__list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 8px;
}

.cogent-color-modal__item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
    min-height: 44px;
    box-sizing: border-box;
}

.cogent-color-modal__item:hover { background-color: var(--cg-soft-bg); }

/* ── Generic variation selectors ───────────────────────────── */

.cogent-pp__var-field {
    padding: 16px 0;
    border-top: 1px solid var(--cg-border);
}

/* Button group — ≤10 options (size, scent, …) */
.cogent-var-btns {
    display: inline-flex;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
}

.cogent-var-btn {
    height: 44px;
    padding: 0 20px;
    border: none;
    border-right: 1px solid var(--cg-border);
    background: #fff;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.cogent-var-btn:last-child { border-right: none; }
.cogent-var-btn:hover:not(.is-active) { background-color: var(--cg-soft-bg); }
.cogent-var-btn.is-active { background: var(--cg-text); color: #fff; font-weight: 600; }

/* Dropdown — >10 options (color palettes, …) */
.cogent-var-select-wrap {
    position: relative;
    display: block;
    max-width: 320px;
}

.cogent-var-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 40px 0 12px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: #fff;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cogent-var-select:hover { border-color: var(--cg-text); }
.cogent-var-select:focus {
    outline: 2px solid var(--cg-accent);
    outline-offset: 2px;
    border-color: var(--cg-accent);
}

.cogent-var-select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--cg-muted);
}

/* ── Qty + Cart block ───────────────────────────────────────── */

.cogent-pp__qty-cart {
    padding: 16px 0;
    border-top: 1px solid var(--cg-border);
}

.cogent-pp__qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cogent-pp__qty-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
    height: 48px;
}

.cogent-pp__qty-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #fff;
    color: var(--cg-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cg-font);
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.cogent-pp__qty-btn:hover { background: var(--cg-soft-bg); }

.cogent-pp__qty-input {
    width: 60px;
    height: 48px;
    border: none;
    border-left: 1px solid var(--cg-border);
    border-right: 1px solid var(--cg-border);
    text-align: center;
    font-family: var(--cg-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--cg-text);
    background: #fff;
    outline: none;
}

/* Hide native number spinners on every product-page qty field (custom stepper
   plus WC/WPC native .qty) — Firefox, then Chrome/Safari/Edge. */
.single-product .cogent-pp__qty-input,
.single-product input.qty,
.single-product input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.single-product .cogent-pp__qty-input::-webkit-outer-spin-button,
.single-product .cogent-pp__qty-input::-webkit-inner-spin-button,
.single-product input.qty::-webkit-outer-spin-button,
.single-product input.qty::-webkit-inner-spin-button,
.single-product input[type="number"]::-webkit-outer-spin-button,
.single-product input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

.cogent-pp__total-preview {
    font-size: 14px;
    color: var(--cg-muted);
}

.cogent-pp__total-preview strong {
    color: var(--cg-text);
    font-weight: 700;
}

/* Hide the native WC add-to-cart form / quantity */
.cogent-pp__right .cart,
.cogent-pp__right .woocommerce-variation-add-to-cart,
.cogent-pp__right form.cart {
    display: none !important;
}

/* Exception: composite products use the WPC native form — un-hide it.
   WPC renders its ATC as <form class="cart"> via simple.php template,
   wrapped in .cogent-pp__native-form-wrap. Must override the !important above. */
.cogent-pp__native-form-wrap .cart,
.cogent-pp__native-form-wrap form.cart,
.cogent-pp__native-form-wrap .woocommerce-variation-add-to-cart {
    display: block !important;
}

/* Composite + sold-individually: hide any qty stepper WPC may inject into
   form.cart.  woocommerce_is_sold_individually returns true for product 9694
   at runtime so WC itself skips the input, but WPC may still render one.
   The hidden input[name="quantity"] stays in the DOM so form POST still sends
   qty=1 — only the visible stepper wrapper is suppressed. */
.postid-9694 .cogent-pp__native-form-wrap .quantity {
    display: none !important;
}

.cogent-pp__atc-btn {
    display: block;
    width: 100%;
    height: 48px;
    background: var(--cg-cta-bg);
    color: var(--cg-cta-text);
    border: none;
    border-radius: var(--cg-radius);
    font-family: var(--cg-font);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    margin-bottom: 8px;
}

.cogent-pp__atc-btn:hover { opacity: 0.9; }

.cogent-pp__reorder-btn {
    display: block;
    width: 100%;
    height: 44px;
    background: transparent;
    border: 1px solid var(--cg-text);
    border-radius: var(--cg-radius);
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-bottom: 10px;
}

.cogent-pp__reorder-btn:hover { background-color: var(--cg-soft-bg); }

.cogent-pp__trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}

.cogent-pp__trust svg { flex-shrink: 0; color: var(--cg-accent); }
.cogent-pp__trust strong { font-weight: 600; color: var(--cg-text); }

/* ── Quick Specs chips ──────────────────────────────────────── */

.cogent-pp__quickspecs {
    padding: 16px 0;
    border-top: 1px solid var(--cg-border);
}

.cogent-pp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cogent-pp__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--cg-border);
    border-radius: 9999px;
    background: var(--cg-soft-bg);
    font-size: 12px;
    line-height: 1;
}

.cogent-pp__chip-label { color: var(--cg-muted); font-weight: 500; }
.cogent-pp__chip-value { color: var(--cg-text); font-weight: 700; }

/* ── Compatible Products accordion ─────────────────────────── */

.cogent-pp__compat-accordion {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
    margin-top: 16px;
}

.cogent-pp__compat-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cg-text);
    font-family: var(--cg-font);
    cursor: pointer;
    background: #fff;
    border: none;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease;
}

.cogent-pp__compat-trigger:hover { background-color: var(--cg-soft-bg); }

.cogent-pp__compat-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cogent-pp__compat-accordion.is-open .cogent-pp__compat-chevron {
    transform: rotate(180deg);
}

.cogent-pp__compat-body {
    display: none;
    border-top: 1px solid var(--cg-border);
}

.cogent-pp__compat-accordion.is-open .cogent-pp__compat-body {
    display: block;
}

.cogent-pp__compat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cg-border);
}

.cogent-pp__compat-row:last-child { border-bottom: none; }

.cogent-pp__compat-img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.cogent-pp__compat-img img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.cogent-pp__compat-info { flex: 1; min-width: 0; }

.cogent-pp__compat-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--cg-text);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cogent-pp__compat-meta {
    font-size: 11px;
    color: var(--cg-muted);
    margin: 0;
}

.cogent-pp__compat-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.cogent-pp__compat-price { font-size: 13px; font-weight: 600; color: var(--cg-orange); }
.cogent-pp__compat-price .woocommerce-Price-amount { font-size: 13px; font-weight: 600; color: var(--cg-orange); }

.cogent-pp__compat-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cg-border);
    border-radius: 4px;
    font-family: var(--cg-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--cg-accent);
    text-decoration: none;
    background: #fff;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.cogent-pp__compat-btn:hover { background: #EEF2F8; text-decoration: none; color: var(--cg-accent); }

/* ── How It's Applied section ───────────────────────────────── */

.cogent-pp__how-applied {
    border-top: 1px solid var(--cg-border);
    padding: 56px 0;
}

.cogent-pp__section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 768px) { .cogent-pp__section-inner { padding: 0 32px; } }

.cogent-pp__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cg-muted);
    margin: 0 0 4px;
}

.cogent-pp__section-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cg-text);
    margin: 0 0 32px;
}

.cogent-pp__applied-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .cogent-pp__applied-body {
        grid-template-columns: 3fr 2fr;
        gap: 48px;
        align-items: start;
    }
}

.cogent-pp__video-placeholder {
    aspect-ratio: 16 / 9;
    background: #DEDEDA;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.cogent-pp__video-play {
    width: 56px;
    height: 56px;
    background: var(--cg-text);
    border-radius: var(--cg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.cogent-pp__video-placeholder:hover .cogent-pp__video-play { transform: scale(1.06); }

.cogent-pp__video-label { font-size: 14px; font-weight: 500; color: #666; margin: 0; }
.cogent-pp__video-sub { font-size: 12px; color: #999; margin: 0; }
.cogent-pp__video-caption { font-size: 12px; color: var(--cg-muted); margin: 8px 0 0; }

.cogent-pp__apply-steps { list-style: none; margin: 0; padding: 0; }

.cogent-pp__apply-step {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}

.cogent-pp__apply-step--line::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -20px;
    width: 1px;
    background: var(--cg-border);
}

.cogent-pp__apply-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--cg-text);
    color: #FAFAF7;
    font-family: var(--cg-font);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--cg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cogent-pp__apply-content { padding-bottom: 4px; }
.cogent-pp__apply-title { font-size: 14px; font-weight: 600; color: var(--cg-text); margin: 0 0 4px; }
.cogent-pp__apply-desc { font-size: 13px; line-height: 1.6; color: #555; margin: 0; }

.cogent-pp__guide-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cg-accent);
    text-decoration: none;
    margin-top: 4px;
    transition: opacity 0.15s ease;
}

.cogent-pp__guide-dl:hover { opacity: 0.75; text-decoration: none; color: var(--cg-accent); }

/* ── Pros Also Buy section ──────────────────────────────────── */

.cogent-pp__pros-buy {
    border-top: 1px solid var(--cg-border);
    padding: 48px 0;
}

.cogent-pp__pros-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.cogent-pp__view-all {
    font-size: 14px;
    font-weight: 500;
    color: var(--cg-accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding-bottom: 2px;
}

.cogent-pp__view-all:hover { text-decoration: underline; color: var(--cg-accent); }

.cogent-pp__pros-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) { .cogent-pp__pros-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cogent-pp__pros-grid { grid-template-columns: repeat(4, 1fr); } }

.cogent-pp__pros-card {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease;
    background: #fff;
}

.cogent-pp__pros-card:hover { border-color: var(--cg-text); }

.cogent-pp__pros-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #EDEDE9;
    text-decoration: none;
}

.cogent-pp__pros-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.cogent-pp__pros-card:hover .cogent-pp__pros-img img { transform: scale(1.03); }

.cogent-pp__pros-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EDEDE9;
}

.cogent-pp__pros-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cogent-pp__pros-cat {
    font-size: 11px;
    font-weight: 500;
    color: var(--cg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.cogent-pp__pros-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-text);
    text-decoration: none;
    line-height: 1.35;
    display: block;
}

.cogent-pp__pros-name:hover { text-decoration: underline; color: var(--cg-text); }

.cogent-pp__pros-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}

.cogent-pp__pros-price { font-size: 13px; font-weight: 700; color: var(--cg-orange); }
.cogent-pp__pros-price .woocommerce-Price-amount { font-size: 13px; font-weight: 700; color: var(--cg-orange); }

.cogent-pp__pros-add {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--cg-border);
    border-radius: 4px;
    font-family: var(--cg-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--cg-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.cogent-pp__pros-add:hover { background: var(--cg-soft-bg); text-decoration: none; color: var(--cg-text); }

/* ── Reviews section ────────────────────────────────────────── */

.cogent-pp__reviews {
    border-top: 1px solid var(--cg-border);
    padding: 48px 0;
}

.cogent-pp__reviews-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .cogent-pp__reviews-layout {
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        align-items: start;
    }
}

.cogent-pp__reviews-summary-box {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 24px;
    background: #fff;
}

.cogent-pp__big-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cogent-pp__big-num {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--cg-text);
}

.cogent-pp__big-stars { display: flex; flex-direction: column; gap: 4px; }
.cogent-stars { display: inline-flex; align-items: center; gap: 2px; }

.cogent-pp__verified-count { font-size: 12px; color: var(--cg-muted); margin: 0; }

.cogent-pp__dist { display: flex; flex-direction: column; gap: 6px; }

.cogent-pp__dist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cogent-pp__dist-num { font-size: 13px; font-weight: 500; color: var(--cg-text); width: 10px; }

.cogent-pp__dist-bar {
    flex: 1;
    height: 6px;
    background: var(--cg-border);
    border-radius: 9999px;
    overflow: hidden;
}

.cogent-pp__dist-fill {
    height: 100%;
    background: var(--cg-text);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.cogent-pp__dist-count { font-size: 12px; color: var(--cg-muted); width: 24px; text-align: right; }

.cogent-pp__review-list { display: flex; flex-direction: column; gap: 16px; }

.cogent-pp__review-card {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 20px;
    background: #fff;
    transition: opacity 0.2s ease;
}

.cogent-pp__review-card.is-filtered-out { opacity: 0.2; pointer-events: none; }

.cogent-pp__review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cogent-pp__review-author { display: flex; align-items: center; gap: 10px; }

.cogent-pp__review-avatar {
    width: 36px;
    height: 36px;
    background: var(--cg-soft-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--cg-text);
    flex-shrink: 0;
}

.cogent-pp__review-name { font-size: 14px; font-weight: 600; margin: 0 0 3px; }

.cogent-pp__review-meta { display: flex; align-items: center; gap: 6px; }

.cogent-pp__review-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--cg-success, #2D6A4F);
}

.cogent-pp__review-date { font-size: 12px; color: var(--cg-muted); flex-shrink: 0; }

.cogent-pp__review-body { font-size: 14px; line-height: 1.6; color: #333; margin: 0; }

/* Real review text comes through wpautop() as <p> blocks. */
.cogent-pp__review-body p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 8px; }
.cogent-pp__review-body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   WPC COMPOSITE UI  (Pro Kit · scoped to .cogent-pp__native-form-wrap)
   Targets selector='select' layout only — list/grid layouts not used.
   ═══════════════════════════════════════════════════════════════ */

/* -- Outer wrap reset ----------------------------------------- */
.cogent-pp__native-form-wrap .wooco-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.cogent-pp__native-form-wrap .wooco-wrap .wooco_components {
    margin: 0 !important;
}

/* -- Individual component rows -------------------------------- */
.cogent-pp__native-form-wrap .wooco_components .wooco_component {
    padding: 14px 0 !important;
    border-bottom: none !important;
    border-top: 1px solid var(--cg-border) !important;
    background: transparent !important;
}

.cogent-pp__native-form-wrap .wooco_components .wooco_component:first-child {
    border-top: none !important;
    padding-top: 0 !important;
}

/* -- Component label (matches .cogent-pp__field-label) -------- */
.cogent-pp__native-form-wrap .wooco_component_name {
    font-family: var(--cg-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--cg-muted) !important;
    margin: 0 0 8px !important;
}

.cogent-pp__native-form-wrap .wooco_component_required .wooco_component_name::after {
    color: #A52828 !important;
}

/* -- Hide thumbnail placeholder ------------------------------- */
.cogent-pp__native-form-wrap .wooco_component_product_image {
    display: none !important;
}

/* -- Product row: stack vertically so select fills full width - */
.cogent-pp__native-form-wrap .wooco_component_product {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 0 !important;
}

.cogent-pp__native-form-wrap .wooco_component_product > div {
    padding: 0 !important;
}

/* -- Select wrapper ------------------------------------------- */
.cogent-pp__native-form-wrap .wooco_component_product_selection {
    display: block !important;
    width: 100% !important;
}

.cogent-pp__native-form-wrap .wooco_component_product_selection label {
    display: none !important;
}

/* -- Native <select> — matches .cogent-var-select ------------- */
.cogent-pp__native-form-wrap .wooco_component_product_selection select {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 40px 0 12px !important;
    border: 1px solid var(--cg-border) !important;
    border-radius: var(--cg-radius) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    color: var(--cg-text) !important;
    font-family: var(--cg-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease !important;
    box-shadow: none !important;
}

.cogent-pp__native-form-wrap .wooco_component_product_selection select:hover {
    border-color: var(--cg-text) !important;
}

.cogent-pp__native-form-wrap .wooco_component_product_selection select:focus {
    outline: 2px solid var(--cg-accent) !important;
    outline-offset: 2px !important;
    border-color: var(--cg-accent) !important;
}

/* -- Per-component price: hidden (Total price block below remains visible) -- */
.cogent-pp__native-form-wrap .wooco_component_product_price {
    display: none !important;
}

/* -- Availability text ---------------------------------------- */
.cogent-pp__native-form-wrap .wooco_component_product_availability {
    font-family: var(--cg-font) !important;
    font-size: 12px !important;
    color: var(--cg-muted) !important;
    margin: 0 !important;
}

.cogent-pp__native-form-wrap .wooco_component_product_availability .stock {
    color: var(--cg-success, #2D6A4F) !important;
}

.cogent-pp__native-form-wrap .wooco_component_product_availability .out-of-stock {
    color: var(--cg-error, #A52828) !important;
}

/* -- Summary / Total block ------------------------------------ */
.cogent-pp__native-form-wrap .wooco-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--cg-border) !important;
    margin: 4px 0 0 !important;
    background: transparent !important;
}

.cogent-pp__native-form-wrap .wooco-total {
    flex-grow: 1 !important;
    font-family: var(--cg-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cg-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cogent-pp__native-form-wrap .wooco-total .woocommerce-Price-amount {
    font-family: var(--cg-font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--cg-text) !important;
}

.cogent-pp__native-form-wrap .wooco-total ins {
    text-decoration: none !important;
}

.cogent-pp__native-form-wrap .wooco-total del {
    font-size: 14px !important;
    color: var(--cg-muted) !important;
    margin-right: 6px !important;
}

.cogent-pp__native-form-wrap .wooco-count {
    display: none !important;
}

/* -- Validation alert ----------------------------------------- */
.cogent-pp__native-form-wrap .wooco-alert {
    font-family: var(--cg-font) !important;
    font-size: 13px !important;
    border-left: 3px solid #A52828 !important;
    background: #FFF5F5 !important;
    color: #A52828 !important;
    border-radius: 0 var(--cg-radius) var(--cg-radius) 0 !important;
    padding: 10px 14px !important;
    margin: 8px 0 !important;
}

/* -- ATC button — identical to .cogent-pp__atc-btn ------------ */
.cogent-pp__native-form-wrap .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    background: var(--cg-cta-bg) !important;
    color: var(--cg-cta-text) !important;
    border: none !important;
    border-radius: var(--cg-radius) !important;
    font-family: var(--cg-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 48px !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.cogent-pp__native-form-wrap .single_add_to_cart_button:hover {
    opacity: 0.9 !important;
    color: var(--cg-cta-text) !important;
    text-decoration: none !important;
    background: var(--cg-cta-bg) !important;
}

.cogent-pp__native-form-wrap .single_add_to_cart_button.loading {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.cogent-pp__native-form-wrap .single_add_to_cart_button.disabled,
.cogent-pp__native-form-wrap .single_add_to_cart_button[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ── Terms & Conditions note (below add to cart, Pro Kit) ─── */

.cogent-pp__tc-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.cogent-pp__tc-link {
    color: var(--cg-muted, #666666);
    text-underline-offset: 2px;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.cogent-pp__tc-link:hover {
    color: var(--cg-text, #1A1A1A);
    text-decoration: underline;
}