/*
Theme Name:  OutletFlorida OFCIP Child
Theme URI:   https://outletflorida.com
Description: OFCIP Commercial Experience Layer — child theme for WoodMart. Implements EA-1A customer experience. Do not edit parent theme files — all customizations live here.
Author:      OutletFlorida Engineering
Version:     9.7.1
Requires at least: 6.3
Requires PHP: 8.0
Template:    woodmart
Text Domain: ofcip-child
*/

/* ── Custom Properties ───────────────────────────────────────────────── */

:root {
    --ofcip-primary:        #E85D00;
    --ofcip-primary-dark:   #C04E00;
    --ofcip-primary-light:  #FF7820;
    --ofcip-trust:          #27AE60;
    --ofcip-trust-dark:     #1E8449;
    --ofcip-wa-green:       #25D366;
    --ofcip-wa-dark:        #128C7E;
    --ofcip-tg-blue:        #0088CC;
    --ofcip-tg-dark:        #006699;
    --ofcip-text:           #1A1A1A;
    --ofcip-text-muted:     #6B7280;
    --ofcip-border:         #E5E7EB;
    --ofcip-bg-light:       #F9FAFB;
    --ofcip-bg-warm:        #FFF8F3;
    --ofcip-radius:         8px;
    --ofcip-radius-lg:      12px;
    --ofcip-shadow:         0 2px 8px rgba(0,0,0,.08);
    --ofcip-shadow-md:      0 4px 16px rgba(0,0,0,.12);
    --ofcip-transition:     .2s ease;

    /* ── WCO-010.0 Design System extension (Sprint 1 — Foundation) ──── */
    --ofcip-cta:            #4C3494;
    --ofcip-cta-dark:       #3A2670;

    --ofcip-fs-xs:          11px;
    --ofcip-fs-sm:          12px;
    --ofcip-fs-base:        14px;
    --ofcip-fs-md:          16px;
    --ofcip-fs-lg:          20px;
    --ofcip-fs-xl:          28px;

    --ofcip-space-1:        4px;
    --ofcip-space-2:        8px;
    --ofcip-space-3:        12px;
    --ofcip-space-4:        16px;
    --ofcip-space-5:        24px;
    --ofcip-space-6:        32px;
}

/* ── Demand Badge (Product Cards) ────────────────────────────────────── */

.ofcip-demand-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    white-space: nowrap;
}
.ofcip-demand-badge--bestseller {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
}
.ofcip-demand-badge--trending {
    background: #FFF8E1;
    color: #F57F17;
    border: 1px solid #FFE082;
}
.ofcip-demand-badge--featured {
    background: #F3E5F5;
    color: #6A1B9A;
    border: 1px solid #CE93D8;
}
.ofcip-demand-badge--recommended {
    background: var(--ofcip-bg-light);
    color: var(--ofcip-text-muted);
    border: 1px solid var(--ofcip-border);
}

/* ── Trust Block ─────────────────────────────────────────────────────── */

.ofcip-trust-block {
    background: var(--ofcip-bg-light);
    border: 1px solid var(--ofcip-border);
    border-left: 4px solid var(--ofcip-trust);
    border-radius: var(--ofcip-radius);
    padding: 16px 20px;
    margin: 20px 0;
}
.ofcip-trust-block__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ofcip-trust-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ofcip-trust-block__title svg {
    flex-shrink: 0;
}
.ofcip-trust-signals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ofcip-trust-signals li {
    font-size: 13px;
    color: var(--ofcip-text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.ofcip-trust-signals li::before {
    content: '✓';
    color: var(--ofcip-trust);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.ofcip-trust-guarantees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ofcip-border);
}
.ofcip-trust-guarantees__item {
    font-size: 11px;
    font-weight: 600;
    color: var(--ofcip-trust-dark);
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}
.ofcip-trust-scarcity {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #C62828;
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ofcip-trust-block--compact {
    padding: 12px 16px;
    margin: 12px 0;
}
.ofcip-trust-block--compact .ofcip-trust-signals li {
    font-size: 12px;
}
.ofcip-trust-block--minimal {
    background: transparent;
    border: none;
    border-left: none;
    padding: 8px 0;
    margin: 8px 0;
}
.ofcip-trust-block--minimal .ofcip-trust-signals {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}
.ofcip-trust-block--minimal .ofcip-trust-signals li {
    font-size: 12px;
    font-weight: 500;
}

/* ── WhatsApp Entry ──────────────────────────────────────────────────── */

.ofcip-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ofcip-wa-green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: var(--ofcip-radius);
    text-decoration: none;
    transition: background var(--ofcip-transition), transform var(--ofcip-transition);
    cursor: pointer;
    border: none;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 8px;
}
.ofcip-wa-btn:hover,
.ofcip-wa-btn:focus {
    background: var(--ofcip-wa-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.ofcip-wa-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.ofcip-wa-btn--secondary {
    background: transparent;
    color: var(--ofcip-wa-dark);
    border: 2px solid var(--ofcip-wa-green);
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
}
.ofcip-wa-btn--secondary:hover {
    background: var(--ofcip-wa-green);
    color: #fff;
}
.ofcip-tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ofcip-tg-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--ofcip-radius);
    text-decoration: none;
    transition: background var(--ofcip-transition);
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
}
.ofcip-tg-btn:hover {
    background: var(--ofcip-tg-dark);
    color: #fff;
    text-decoration: none;
}
.ofcip-conversation-entry {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ofcip-conversation-entry__label {
    font-size: 12px;
    color: var(--ofcip-text-muted);
    text-align: center;
    margin-top: 4px;
}

/* WhatsApp Floating Button */
.ofcip-wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background: var(--ofcip-wa-green);
    color: #fff;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .5);
    text-decoration: none;
    transition: transform var(--ofcip-transition), box-shadow var(--ofcip-transition);
}
.ofcip-wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .7);
    color: #fff;
    text-decoration: none;
}
.ofcip-wa-float svg {
    width: 28px;
    height: 28px;
}
.ofcip-wa-float__tooltip {
    position: absolute;
    right: 64px;
    background: #fff;
    color: var(--ofcip-text);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: var(--ofcip-shadow);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ofcip-transition);
}
.ofcip-wa-float:hover .ofcip-wa-float__tooltip {
    opacity: 1;
}
@media (max-width: 767px) {
    .ofcip-wa-float {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
    }
}

/* ── Buying Guide Block ──────────────────────────────────────────────── */

.ofcip-buying-guide {
    margin: 24px 0;
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius-lg);
    overflow: hidden;
}
.ofcip-buying-guide__header {
    background: var(--ofcip-bg-warm);
    padding: 16px 20px;
    border-bottom: 1px solid var(--ofcip-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ofcip-buying-guide__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ofcip-text);
    margin: 0;
}
.ofcip-buying-guide__sections {
    padding: 0;
}
.ofcip-accordion {
    border-bottom: 1px solid var(--ofcip-border);
}
.ofcip-accordion:last-child {
    border-bottom: none;
}
.ofcip-accordion__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--ofcip-text);
    transition: background var(--ofcip-transition);
}
.ofcip-accordion__trigger:hover {
    background: var(--ofcip-bg-light);
}
.ofcip-accordion__icon {
    flex-shrink: 0;
    transition: transform var(--ofcip-transition);
    color: var(--ofcip-text-muted);
}
.ofcip-accordion__trigger[aria-expanded="true"] .ofcip-accordion__icon {
    transform: rotate(180deg);
}
.ofcip-accordion__body {
    font-size: 14px;
    color: var(--ofcip-text);
    line-height: 1.6;
    padding: 0 20px 16px;
    display: none;
}
.ofcip-accordion__body.is-open {
    display: block;
}
.ofcip-buying-guide__cta {
    padding: 16px 20px;
    background: var(--ofcip-bg-warm);
    border-top: 1px solid var(--ofcip-border);
    font-size: 13px;
    color: var(--ofcip-text-muted);
    text-align: center;
}

/* ── FAQ Block ───────────────────────────────────────────────────────── */

.ofcip-faq {
    margin: 24px 0;
}
.ofcip-faq__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ofcip-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ofcip-faq__list {
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius-lg);
    overflow: hidden;
}

/* ── Brand Block ─────────────────────────────────────────────────────── */

.ofcip-brand-block {
    margin: 24px 0;
    background: var(--ofcip-bg-light);
    border-radius: var(--ofcip-radius-lg);
    overflow: hidden;
}
.ofcip-brand-block__header {
    background: var(--ofcip-primary);
    color: #fff;
    padding: 14px 20px;
}
.ofcip-brand-block__brand-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}
.ofcip-brand-block__sections {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ofcip-brand-section__heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--ofcip-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 6px;
}
.ofcip-brand-section__body {
    font-size: 13px;
    color: var(--ofcip-text);
    line-height: 1.6;
    margin: 0;
}

/* ── Comparison Block ────────────────────────────────────────────────── */

.ofcip-comparison {
    margin: 24px 0;
    border: 2px solid var(--ofcip-primary-light);
    border-radius: var(--ofcip-radius-lg);
    overflow: hidden;
}
.ofcip-comparison__header {
    background: var(--ofcip-primary);
    color: #fff;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ofcip-price-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.ofcip-price-comparison__cell {
    padding: 16px 20px;
    text-align: center;
}
.ofcip-price-comparison__cell:first-child {
    border-right: 1px solid var(--ofcip-border);
    background: #fff;
}
.ofcip-price-comparison__cell:last-child {
    background: var(--ofcip-bg-warm);
}
.ofcip-price-comparison__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ofcip-text-muted);
    margin-bottom: 6px;
}
.ofcip-price-comparison__price {
    font-size: 24px;
    font-weight: 800;
    color: var(--ofcip-text);
    line-height: 1;
}
.ofcip-price-comparison__price--outlet {
    color: var(--ofcip-primary);
}
.ofcip-price-comparison__retail-price {
    text-decoration: line-through;
    color: var(--ofcip-text-muted);
}
.ofcip-savings-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #E8F5E9;
    color: var(--ofcip-trust-dark);
    border: 1px solid #A5D6A7;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    margin: 12px 20px;
}
.ofcip-comparison__body {
    padding: 16px 20px;
    border-top: 1px solid var(--ofcip-border);
}
.ofcip-comparison__value-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ofcip-comparison__value-list li {
    font-size: 13px;
    color: var(--ofcip-text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.ofcip-comparison__value-list li::before {
    content: '✓';
    color: var(--ofcip-trust);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Home Page: Hero ─────────────────────────────────────────────────── */

.ofcip-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1A1A2E 0%, #2D2D44 60%, #3A1A00 100%);
}
.ofcip-hero__bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse at 60% 50%, rgba(232,93,0,.18) 0%, transparent 60%);
    pointer-events: none;
}
.ofcip-hero__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 60px 40px;
}
.ofcip-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,93,0,.15);
    border: 1px solid rgba(232,93,0,.4);
    border-radius: 20px;
    color: var(--ofcip-primary-light);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 14px;
    margin-bottom: 20px;
}
.ofcip-hero__headline {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
    letter-spacing: -.02em;
}
.ofcip-hero__headline span {
    color: var(--ofcip-primary-light);
}
.ofcip-hero__subheadline {
    font-size: clamp(15px, 2.5vw, 18px);
    color: rgba(255,255,255,.75);
    line-height: 1.5;
    margin: 0 0 32px;
    max-width: 560px;
}
.ofcip-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ofcip-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ofcip-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--ofcip-radius);
    text-decoration: none;
    transition: background var(--ofcip-transition), transform var(--ofcip-transition);
}
.ofcip-hero__cta-primary:hover {
    background: var(--ofcip-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.ofcip-hero__cta-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--ofcip-wa-green);
    border: 2px solid var(--ofcip-wa-green);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--ofcip-radius);
    text-decoration: none;
    transition: background var(--ofcip-transition), color var(--ofcip-transition);
}
.ofcip-hero__cta-wa:hover {
    background: var(--ofcip-wa-green);
    color: #fff;
    text-decoration: none;
}
.ofcip-hero__trust-row {
    position: relative;
    z-index: 2;
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.ofcip-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
}
.ofcip-hero__trust-item svg {
    color: var(--ofcip-primary-light);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .ofcip-hero__content {
        padding: 40px 20px;
    }
    .ofcip-hero {
        min-height: 420px;
    }
}

/* ── Trust Strip (Horizontal Band) ──────────────────────────────────── */

.ofcip-trust-strip {
    background: var(--ofcip-bg-light);
    border-top: 1px solid var(--ofcip-border);
    border-bottom: 1px solid var(--ofcip-border);
    padding: 16px 0;
}
.ofcip-trust-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}
.ofcip-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ofcip-text);
    white-space: nowrap;
}
.ofcip-trust-strip__item-icon {
    width: 20px;
    height: 20px;
    color: var(--ofcip-trust);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .ofcip-trust-strip__item {
        font-size: 12px;
    }
    .ofcip-trust-strip__inner {
        gap: 8px 16px;
    }
}

/* ── Featured Brands ─────────────────────────────────────────────────── */

.ofcip-featured-brands {
    padding: 40px 0;
}
.ofcip-section-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--ofcip-text);
    margin: 0 0 8px;
}
.ofcip-section-subtitle {
    text-align: center;
    font-size: 14px;
    color: var(--ofcip-text-muted);
    margin: 0 0 28px;
}
.ofcip-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .ofcip-brand-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.ofcip-brand-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    padding: 14px 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ofcip-text);
    text-decoration: none;
    transition: border-color var(--ofcip-transition), box-shadow var(--ofcip-transition);
    text-align: center;
    line-height: 1.2;
}
.ofcip-brand-pill:hover {
    border-color: var(--ofcip-primary);
    box-shadow: 0 0 0 2px rgba(232,93,0,.15);
    color: var(--ofcip-primary);
    text-decoration: none;
}

/* ── Trending Products Section ───────────────────────────────────────── */

.ofcip-trending-section {
    padding: 40px 0;
}
.ofcip-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ofcip-section-header__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ofcip-section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofcip-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ofcip-section-link:hover {
    color: var(--ofcip-primary-dark);
    text-decoration: none;
}
.ofcip-trending-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 576px) {
    .ofcip-trending-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .ofcip-trending-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Product Card (Trending + Home Merchandising blocks) ─────────────
   OFCIP-HOME-MERCHANDISING-001: .ofcip-trending-grid above already
   shipped to production; these per-card rules were written for it but
   never merged, so home/trending-products.php was rendering unstyled.
   Fixed here rather than duplicated, since Nuevos ingresos/Más
   vendidos/Oportunidades Outlet/Últimas unidades share the identical
   card markup via home/merch-block.php. */

.ofcip-rec-card {
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    overflow: hidden;
    transition: box-shadow var(--ofcip-transition), transform var(--ofcip-transition);
    text-decoration: none;
    display: block;
    background: #fff;
}
.ofcip-rec-card:hover {
    box-shadow: var(--ofcip-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.ofcip-rec-card__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ofcip-bg-light);
}
.ofcip-rec-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ofcip-rec-card__body {
    padding: 10px 12px 12px;
}
.ofcip-rec-card__reason {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ofcip-primary);
    margin: 0 0 4px;
}
.ofcip-rec-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofcip-text);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.ofcip-rec-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ofcip-primary);
    margin: 0;
}
.ofcip-rec-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--ofcip-primary);
}
.ofcip-rec-card__badge--new        { background: #16A34A; }
.ofcip-rec-card__badge--bestseller { background: var(--ofcip-cta); }
.ofcip-rec-card__badge--discount   { background: #DC2626; }
.ofcip-rec-card__badge--low_stock  { background: #B45309; }

.ofcip-home-merch-section {
    margin: 32px auto;
    padding: 0 16px;
    max-width: 1280px;
}

/* ── Category Page Opportunity Banner ───────────────────────────────── */

.ofcip-category-banner {
    background: linear-gradient(90deg, var(--ofcip-primary) 0%, var(--ofcip-primary-dark) 100%);
    color: #fff;
    border-radius: var(--ofcip-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ofcip-category-banner__icon {
    font-size: 24px;
    flex-shrink: 0;
}
.ofcip-category-banner__text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}
.ofcip-category-banner__text span {
    font-size: 13px;
    opacity: .85;
}

/* ── Opportunity Block (Operator — Admin Meta Box) ───────────────────── */

.ofcip-opportunity-block {
    padding: 4px 0;
}
.ofcip-opp-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.ofcip-opp-score-gauge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.ofcip-opp-score-gauge--buy     { background: var(--ofcip-trust); }
.ofcip-opp-score-gauge--watch   { background: #F59E0B; }
.ofcip-opp-score-gauge--avoid   { background: #EF4444; }
.ofcip-opp-decision {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ofcip-opp-freshness {
    font-size: 11px;
    color: var(--ofcip-text-muted);
    margin-top: 2px;
}
.ofcip-opp-policy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 8px;
}
.ofcip-opp-policy--pass   { background: #E8F5E9; color: var(--ofcip-trust-dark); }
.ofcip-opp-policy--block  { background: #FFEBEE; color: #C62828; }
.ofcip-opp-policy--skip   { background: #FFF8E1; color: #F57F17; }
.ofcip-refresh-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ofcip-primary);
    cursor: pointer;
    background: none;
    border: 1px solid var(--ofcip-primary);
    border-radius: 4px;
    padding: 4px 10px;
    transition: background var(--ofcip-transition), color var(--ofcip-transition);
}
.ofcip-refresh-btn:hover {
    background: var(--ofcip-primary);
    color: #fff;
}

/* ── Utility ─────────────────────────────────────────────────────────── */

.ofcip-icon {
    display: inline-block;
    vertical-align: middle;
}
.ofcip-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Intelligence Freshness Notice (Operator — Admin Bar) ────────────── */

.ofcip-freshness-notice {
    background: #FFF8E1;
    border-left: 4px solid #F59E0B;
    padding: 8px 16px;
    font-size: 12px;
    color: #92400E;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EA-1B — Product Experience Excellence
   Commercial Decision Center styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Brand Header ───────────────────────────────────────────────────── */

.ofcip-brand-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ofcip-brand-header__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ofcip-primary);
    text-decoration: none;
    line-height: 1;
}

.ofcip-brand-header__name:hover {
    text-decoration: underline;
}

.ofcip-brand-header__divider {
    color: #D1D5DB;
    font-size: 11px;
}

.ofcip-brand-header__category {
    font-size: 11px;
    color: #6B7280;
    letter-spacing: 0.04em;
}

/* ── Commercial Badges ──────────────────────────────────────────────── */

.ofcip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}

.ofcip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.ofcip-badge--bestseller {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #F59E0B;
}

.ofcip-badge--trending {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #EF4444;
}

.ofcip-badge--opportunity {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #10B981;
}

.ofcip-badge--limited {
    background: #FFF7ED;
    color: #9A3412;
    border: 1px solid var(--ofcip-primary);
}

.ofcip-badge--new {
    background: #EFF6FF;
    color: #1E40AF;
    border: 1px solid #3B82F6;
}

/* ── Personal Shopper ───────────────────────────────────────────────── */

.ofcip-personal-shopper {
    margin: 16px 0;
    padding: 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
}

.ofcip-personal-shopper__label {
    font-size: 12px;
    font-weight: 700;
    color: #065F46;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}

.ofcip-shopper-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ofcip-shopper-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #065F46;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.ofcip-shopper-btn:hover {
    background: #DCFCE7;
    border-color: #4ADE80;
    color: #14532D;
    text-decoration: none;
}

.ofcip-shopper-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ofcip-wa-green);
}

.ofcip-shopper-btn__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ── Commercial Confidence Zone ─────────────────────────────────────── */

.ofcip-confidence-zone {
    margin: 24px 0;
    padding: 20px;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

.ofcip-confidence-zone__title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
    text-align: center;
}

.ofcip-confidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ofcip-confidence-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ofcip-confidence-pillar__icon {
    width: 24px;
    height: 24px;
    color: var(--ofcip-primary);
    margin-bottom: 4px;
}

.ofcip-confidence-pillar__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.ofcip-confidence-pillar__heading {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ofcip-confidence-pillar__body {
    font-size: 11px;
    color: #6B7280;
    line-height: 1.5;
}

/* ── Product Highlights ─────────────────────────────────────────────── */

.ofcip-highlights {
    margin: 0 0 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

.ofcip-highlights__title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
}

.ofcip-highlights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ofcip-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.ofcip-highlights__item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ofcip-trust);
}

.ofcip-highlights__item-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ── EA-1B Mobile Overrides ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .ofcip-confidence-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ofcip-shopper-btn {
        padding: 12px 14px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ofcip-confidence-grid {
        grid-template-columns: 1fr;
    }

    .ofcip-badges {
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   EA-1C — Category Experience Excellence
   Commercial Discovery Engine styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Category Intelligence Banner ───────────────────────────────────── */

.ofcip-cat-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #FFF8F5;
    border: 1px solid #FFD8C2;
    border-left: 4px solid var(--ofcip-primary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.ofcip-cat-banner__left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ofcip-cat-banner__signal {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    align-self: flex-start;
}

.ofcip-cat-banner__signal--high-demand {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #F59E0B;
}

.ofcip-cat-banner__signal--new-stock {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #10B981;
}

.ofcip-cat-banner__signal--seasonal {
    background: #EEF2FF;
    color: #3730A3;
    border: 1px solid #6366F1;
}

.ofcip-cat-banner__signal--opportunities,
.ofcip-cat-banner__signal--generic {
    background: #FFF7ED;
    color: #9A3412;
    border: 1px solid var(--ofcip-primary);
}

.ofcip-cat-banner__headline {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

.ofcip-cat-banner__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ofcip-cat-banner__stat {
    font-size: 12px;
    color: #6B7280;
}

.ofcip-cat-banner__stat--highlight {
    font-size: 12px;
    font-weight: 700;
    color: var(--ofcip-primary);
}

.ofcip-cat-banner__right {
    flex-shrink: 0;
}

.ofcip-cat-banner__wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ofcip-wa-green);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.ofcip-cat-banner__wa-cta:hover {
    background: #1DA851;
    color: #fff;
    text-decoration: none;
}

.ofcip-cat-banner__wa-cta svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Demand badge (used in loop items) */
.ofcip-demand-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.ofcip-demand-badge--bestseller {
    background: rgba(245, 158, 11, 0.15);
    color: #92400E;
}

.ofcip-demand-badge--trending {
    background: rgba(239, 68, 68, 0.12);
    color: #991B1B;
}

.ofcip-demand-badge--featured {
    background: rgba(99, 102, 241, 0.12);
    color: #3730A3;
}

.ofcip-demand-badge--recommended {
    background: rgba(16, 185, 129, 0.12);
    color: #065F46;
}

/* ── Buying Collections (Sort Chips) ────────────────────────────────── */

.ofcip-collections {
    margin-bottom: 16px;
}

.ofcip-collections__scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.ofcip-collections__scroll::-webkit-scrollbar {
    display: none;
}

.ofcip-collection-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    cursor: pointer;
    flex-shrink: 0;
}

.ofcip-collection-chip:hover {
    border-color: var(--ofcip-primary);
    color: var(--ofcip-primary);
    text-decoration: none;
}

.ofcip-collection-chip--active {
    border-color: var(--ofcip-primary);
    background: var(--ofcip-primary);
    color: #fff;
    font-weight: 700;
}

.ofcip-collection-chip--active:hover {
    color: #fff;
}

.ofcip-collection-chip__icon {
    font-size: 14px;
    line-height: 1;
}

/* ── Brand Collections ──────────────────────────────────────────────── */

.ofcip-brand-collections {
    margin-bottom: 24px;
}

.ofcip-brand-collections__header {
    margin-bottom: 12px;
}

.ofcip-brand-collections__title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.ofcip-brand-collections__scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.ofcip-brand-collections__scroll::-webkit-scrollbar { height: 4px; }
.ofcip-brand-collections__scroll::-webkit-scrollbar-track { background: transparent; }
.ofcip-brand-collections__scroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }

/* Brand Card */

.ofcip-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 90px;
    scroll-snap-align: start;
    text-decoration: none;
    padding: 12px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.ofcip-brand-card:hover {
    border-color: var(--ofcip-primary);
    box-shadow: 0 2px 8px rgba(232, 93, 0, 0.12);
    text-decoration: none;
}

.ofcip-brand-card__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ofcip-primary) 0%, #FF8C40 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.ofcip-brand-card__name {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.ofcip-brand-card__count {
    font-size: 10px;
    color: #9CA3AF;
    text-align: center;
}

/* ── EA-1C Mobile Overrides ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .ofcip-cat-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ofcip-cat-banner__right {
        width: 100%;
    }

    .ofcip-cat-banner__wa-cta {
        width: 100%;
        justify-content: center;
    }

    .ofcip-brand-card {
        flex: 0 0 80px;
    }
}

@media (max-width: 480px) {
    .ofcip-cat-banner {
        padding: 14px 16px;
    }

    .ofcip-collection-chip {
        padding: 8px 12px;
        font-size: 12px;
    }

    .ofcip-brand-card {
        flex: 0 0 72px;
    }

    .ofcip-brand-card__logo {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   EA-1D — Checkout Experience Optimization
   Cart, Checkout, Thank-You page styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cart Confidence Strip ──────────────────────────────────────────── */

.ofcip-cart-confidence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ofcip-cart-confidence__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.ofcip-cart-confidence__icon {
    width: 18px;
    height: 18px;
    color: var(--ofcip-trust);
    flex-shrink: 0;
}

.ofcip-cart-confidence__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

/* WA icon is fill-based */
.ofcip-cart-confidence__item:last-child .ofcip-cart-confidence__icon svg {
    fill: var(--ofcip-wa-green);
    stroke: none;
}

/* ── Cart Savings Summary ────────────────────────────────────────────── */

.ofcip-cart-savings {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #ECFDF5;
    border: 1px solid #6EE7B7;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ofcip-cart-savings__icon {
    width: 20px;
    height: 20px;
    color: #065F46;
    flex-shrink: 0;
    margin-top: 2px;
}

.ofcip-cart-savings__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.ofcip-cart-savings__body {
    flex: 1;
    min-width: 0;
}

.ofcip-cart-savings__headline {
    font-size: 14px;
    font-weight: 700;
    color: #065F46;
    margin: 0 0 3px;
}

.ofcip-cart-savings__sub {
    font-size: 12px;
    color: #059669;
    margin: 0;
}

/* ── Cart WhatsApp Help ──────────────────────────────────────────────── */

.ofcip-cart-wa-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-top: 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
}

.ofcip-cart-wa-help__text {
    font-size: 13px;
    color: #374151;
    margin: 0;
    font-weight: 500;
}

.ofcip-cart-wa-help__ctas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ofcip-cart-wa-help__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    background: var(--ofcip-wa-green);
    color: #fff;
}

.ofcip-cart-wa-help__btn:hover {
    background: #1DA851;
    color: #fff;
    text-decoration: none;
}

.ofcip-cart-wa-help__btn--tg {
    background: var(--ofcip-tg-blue);
}

.ofcip-cart-wa-help__btn--tg:hover {
    background: #006FAB;
    color: #fff;
}

.ofcip-cart-wa-help__btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ofcip-cart-wa-help__btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ── Checkout Trust Intro ────────────────────────────────────────────── */

.ofcip-checkout-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ofcip-checkout-intro__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ofcip-checkout-intro__lock {
    width: 20px;
    height: 20px;
    color: var(--ofcip-trust);
    flex-shrink: 0;
}

.ofcip-checkout-intro__lock svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.ofcip-checkout-intro__title {
    font-size: 13px;
    font-weight: 700;
    color: #065F46;
    margin: 0;
}

.ofcip-checkout-steps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ofcip-checkout-step {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ofcip-checkout-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ofcip-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ofcip-checkout-step__label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.ofcip-checkout-step__separator {
    font-size: 14px;
    color: #D1D5DB;
    font-weight: 300;
}

/* ── Shipping Process ────────────────────────────────────────────────── */

.ofcip-shipping-process {
    padding: 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
}

.ofcip-shipping-process__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
}

.ofcip-shipping-process__title svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--ofcip-primary);
    flex-shrink: 0;
}

.ofcip-shipping-process__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ofcip-shipping-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ofcip-shipping-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ofcip-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ofcip-shipping-step__body {
    flex: 1;
    min-width: 0;
}

.ofcip-shipping-step__heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.ofcip-shipping-step__text {
    font-size: 11px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

.ofcip-shipping-process__note {
    font-size: 11px;
    color: #9CA3AF;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

/* ── Checkout Assist (Payment Confidence + WA) ──────────────────────── */

.ofcip-checkout-assist {
    margin-top: 16px;
}

.ofcip-payment-confidence {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 14px;
}

.ofcip-payment-confidence__lock {
    width: 22px;
    height: 22px;
    color: var(--ofcip-trust);
    flex-shrink: 0;
    margin-top: 1px;
}

.ofcip-payment-confidence__lock svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.ofcip-payment-confidence__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ofcip-payment-confidence__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
}

.ofcip-payment-confidence__item svg {
    width: 14px;
    height: 14px;
    stroke: var(--ofcip-trust);
    flex-shrink: 0;
}

.ofcip-checkout-wa {
    padding: 14px 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
}

.ofcip-checkout-wa__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #065F46;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

.ofcip-checkout-wa__label svg {
    width: 16px;
    height: 16px;
    fill: var(--ofcip-wa-green);
    flex-shrink: 0;
}

.ofcip-checkout-wa__options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ofcip-checkout-wa__btn {
    display: block;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #065F46;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.ofcip-checkout-wa__btn:hover {
    background: #DCFCE7;
    border-color: #4ADE80;
    color: #14532D;
    text-decoration: none;
}

/* ── Thank-You Next Steps ────────────────────────────────────────────── */

.ofcip-thankyou-steps {
    padding: 24px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin: 24px 0;
}

.ofcip-thankyou-steps__header {
    margin-bottom: 20px;
    text-align: center;
}

.ofcip-thankyou-steps__greeting {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}

.ofcip-thankyou-steps__subtitle {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

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

.ofcip-thankyou-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #FAFAFA;
    border-radius: 8px;
}

.ofcip-thankyou-step__icon {
    width: 24px;
    height: 24px;
    color: var(--ofcip-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.ofcip-thankyou-step__icon svg {
    width: 100%;
    height: 100%;
}

.ofcip-thankyou-step__body {
    flex: 1;
    min-width: 0;
}

.ofcip-thankyou-step__heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ofcip-thankyou-step__text {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

/* ── Thank-You Trust + Recommendations ─────────────────────────────── */

.ofcip-thankyou-trust {
    margin: 16px 0 24px;
}

.ofcip-thankyou-trust__guarantees {
    padding: 16px 20px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    margin-bottom: 24px;
}

.ofcip-thankyou-trust__title {
    font-size: 14px;
    font-weight: 700;
    color: #065F46;
    margin: 0 0 12px;
}

.ofcip-thankyou-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ofcip-thankyou-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
}

.ofcip-thankyou-trust__item-icon {
    width: 18px;
    height: 18px;
    color: var(--ofcip-trust);
    flex-shrink: 0;
}

.ofcip-thankyou-trust__item-icon svg {
    width: 100%;
    height: 100%;
}

/* ── EA-1D Mobile Overrides ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .ofcip-cart-confidence {
        gap: 14px;
        padding: 12px 16px;
    }

    .ofcip-checkout-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ofcip-thankyou-steps__list {
        grid-template-columns: 1fr;
    }

    .ofcip-cart-wa-help {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .ofcip-cart-confidence {
        justify-content: flex-start;
        gap: 10px;
    }

    .ofcip-checkout-steps {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ofcip-thankyou-steps {
        padding: 16px;
    }

    .ofcip-thankyou-steps__greeting {
        font-size: 18px;
    }

    .ofcip-cart-wa-help__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .ofcip-cart-wa-help__btn {
        justify-content: center;
    }
}

/* ── Checkout-specific WooCommerce overrides (readability only) ─────── */

/* Emphasise order total row — no functional change */
.woocommerce-checkout .order-total td strong {
    font-size: 16px;
}

/* Ensure touch targets are large enough on mobile */
@media (max-width: 480px) {
    .woocommerce-checkout .wc_payment_method label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .woocommerce-checkout #place_order {
        min-height: 48px;
        font-size: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   EA-1F — Commerce Conversation Integration
   Context-aware WA entry points + analytics layer
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Intent CTA ──────────────────────────────────────────────────
   Context-aware WhatsApp entry for intent-specific conversations.
   Used by templates/conversation/intent-cta.php
   ────────────────────────────────────────────────────────────────── */
.ofcip-intent-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: #25D366;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.ofcip-intent-cta:hover,
.ofcip-intent-cta:focus-visible {
    background: #20bf5b;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.ofcip-intent-cta:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 2px;
}

.ofcip-intent-cta__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ofcip-intent-cta__label {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.ofcip-intent-cta__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Primary variant: subtle pulse on product page to draw attention once */
@keyframes ofcip-conv-pulse {
    0%,  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.45); }
    50%        { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

.ofcip-intent-cta--primary {
    animation: ofcip-conv-pulse 2.8s ease-in-out 1.5s 2;
}

/* ─── Conversation Session Context ───────────────────────────────
   Injected by ofcip-conversation.js; no visible style change.
   Body class ofcip-page-{type} enables page-scoped CSS targeting.
   ────────────────────────────────────────────────────────────────── */

/* Product page: tighten vertical spacing when intent-cta follows trust-block */
.ofcip-page-product .ofcip-intent-cta + .ofcip-intent-cta {
    margin-top: 8px;
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ofcip-intent-cta {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .ofcip-intent-cta {
        font-size: 14px;
        padding: 12px 14px;
        gap: 8px;
    }
    .ofcip-intent-cta__badge {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   EA-1E — SEO, Performance & Technical Optimization
   Accessibility, CLS prevention, focus indicators, skip nav
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Skip Navigation ─────────────────────────────────────────────
   Hidden until focused by keyboard users (WCAG 2.1 AA 2.4.1)
   ────────────────────────────────────────────────────────────────── */
.ofcip-skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    padding: 10px 18px;
    background: #E85D00;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top 0.15s ease;
}

.ofcip-skip-nav:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ─── Global Focus Indicators ────────────────────────────────────
   Ensures all OFCIP interactive elements have visible focus rings
   that meet WCAG 2.1 AA 1.4.11 (Non-text Contrast ratio ≥ 3:1)
   ────────────────────────────────────────────────────────────────── */

/* WA floating button */
.ofcip-wa-float:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 3px;
}

/* Section links */
.ofcip-section-link:focus-visible {
    outline: 3px solid #E85D00;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Accordion triggers (FAQ / Buying Guide) */
.ofcip-accordion__trigger:focus-visible {
    outline: 3px solid #E85D00;
    outline-offset: 2px;
}

/* Collection chips (category sort) */
.ofcip-collection-chip:focus-visible {
    outline: 3px solid #E85D00;
    outline-offset: 2px;
}

/* Checkout WA buttons */
.ofcip-checkout-wa__btn:focus-visible,
.ofcip-cart-wa__btn:focus-visible,
.ofcip-cart-wa__tg:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 2px;
}

/* Personal shopper CTAs (EA-1B) */
.ofcip-shopper__wa:focus-visible,
.ofcip-shopper__tg:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 2px;
}

/* ─── CLS Prevention: Image Containers ──────────────────────────
   Explicit aspect-ratio on image containers prevents Cumulative Layout
   Shift when images load. Values match the width/height attrs
   already set on <img> tags in our templates.
   ────────────────────────────────────────────────────────────────── */

/* ─── Performance: Reduced Motion ───────────────────────────────
   Respects prefers-reduced-motion for the pulse animation (EA-1F)
   and other transitions in the child theme.
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ofcip-intent-cta--primary {
        animation: none;
    }
    .ofcip-intent-cta,
    .ofcip-wa-float,
    .ofcip-skip-nav {
        transition: none;
    }
}

/* ─── Print: Hide commercial CTAs ───────────────────────────────
   Reduces unnecessary ink; product info remains printable.
   ────────────────────────────────────────────────────────────────── */
@media print {
    .ofcip-wa-float,
    .ofcip-personal-shopper,
    .ofcip-checkout-wa,
    .ofcip-cart-wa-help,
    .ofcip-intent-cta,
    .ofcip-skip-nav {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   P9.8 CEUX — Commercial Experience UX (CEUX v1.0.0)
   Frontend wiring: design tokens, CEUX panel, side-cart overrides.
   Rule: orange (#FF6B1A) ONLY on primary CTA buttons.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CEUX Design Tokens ─────────────────────────────────────────────── */

:root {
    --ceux-primary:      #1A3A5C;   /* navy — brand trust, labels, headings */
    --ceux-cta:          #FF6B1A;   /* orange — CTA buttons ONLY            */
    --ceux-bg:           #F8F8F8;   /* page background                      */
    --ceux-img-bg:       #FFFFFF;   /* product image container background   */
    --ceux-border:       #E8E8E8;
    --ceux-card-radius:  10px;
    --ceux-img-padding:  16px;
    --ceux-shadow:       0 2px 12px rgba(26, 58, 92, .08);
    --ceux-shadow-hover: 0 6px 24px rgba(26, 58, 92, .14);
}

/* ── CEUX Primary CTA Button (orange ONLY here) ─────────────────────── */

.ofcip-ceux-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--ceux-cta);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.ofcip-ceux-cta:hover,
.ofcip-ceux-cta:focus-visible {
    background: #E55800;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}

.ofcip-ceux-cta:focus-visible {
    outline: 3px solid var(--ceux-cta);
    outline-offset: 3px;
}

/* ── WooCommerce Side Cart / Cross-Sell Overrides ───────────────────── */
/* Targets WoodMart side cart (.woodmart-side-cart) and standard WC cart */

/* Replace any "TE PUEDE INTERESAR" heading with CEUX navy styling */
.woodmart-side-cart .cross-sells > h2,
.woodmart-side-cart .cross-sells > h3,
.widget_shopping_cart .cross-sells h2,
.widget_shopping_cart .cross-sells h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ceux-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Side cart product images: CONTAIN, white bg, uniform padding */
.woodmart-side-cart .cross-sells img,
.woodmart-side-cart .product_list_widget img,
.widget_shopping_cart .cross-sells img {
    object-fit: contain !important;
    background: var(--ceux-img-bg) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Standard WC cross-sells page heading */
.cross-sells > h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ceux-primary);
}

/* CEUX template cross-sell heading class (used in woocommerce/cart/cross-sells.php) */
.ofcip-crosssells__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ceux-primary);
    margin: 24px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ofcip-crosssells__title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--ceux-cta);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Cross-sell grid */
.ofcip-crosssells__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (min-width: 480px) {
    .ofcip-crosssells__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .ofcip-crosssells__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Cross-sell card */
.ofcip-crosssells__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ceux-border);
    border-radius: var(--ceux-card-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--ceux-shadow);
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}

.ofcip-crosssells__card:hover {
    box-shadow: var(--ceux-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.ofcip-crosssells__card__image {
    aspect-ratio: 1;
    background: var(--ceux-img-bg);
    overflow: hidden;
}

.ofcip-crosssells__card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--ceux-img-padding);
    box-sizing: border-box;
    display: block;
}

.ofcip-crosssells__card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ofcip-crosssells__card__framing {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ceux-primary);
    margin: 0;
}

.ofcip-crosssells__card__name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.ofcip-crosssells__card__price {
    font-size: 14px;
    font-weight: 800;
    color: var(--ceux-cta);
    margin: 4px 0 0;
}

/* ── CEUX Mobile ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ofcip-crosssells__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Cart Card Enhancements
   ═══════════════════════════════════════════════════════════════════════ */

/* Cart card explanation text */
.ofcip-crosssells__card__explanation {
    font-size: 11px;
    color: var(--ofcip-text-muted, #6B7280);
    margin: 2px 0 4px;
    line-height: 1.4;
}

/* Image placeholder for CEUX outfit cards without thumbnail */
.ofcip-crosssells__card__img-placeholder {
    width: 100%;
    height: 200px;
    background: var(--ofcip-bg-light, #F9FAFB);
    border-radius: var(--ofcip-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ofcip-crosssells__card__img-placeholder::after {
    content: '👔';
    font-size: 40px;
    opacity: .35;
}

/* ── P0 Cart Cross-Sell: Above-the-Fold Recommendations ──────────────── */

/*
 * Wrapper — shared by cart page (right column) and side-cart.
 * Compact, no wasted whitespace. Renders above cart totals and
 * above checkout buttons so it's visible without scrolling.
 */
.ofcip-cart-crosssell {
    margin-bottom: 16px;
}

.ofcip-cart-crosssell__heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ofcip-text-muted, #6B7280);
    margin: 0 0 10px;
}

/* ── Grid ─────────────────────────────────────────────── */

.ofcip-cart-crosssell__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Cart-page collaterals: max 2 cards (OFCIP UX Freeze, Phase 3) */
.ofcip-cart-crosssell--cart-collaterals .ofcip-cart-crosssell__grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Side-cart: 2 columns, 2 cards max — stays compact inside narrow drawer */
.ofcip-cart-crosssell--mini-cart .ofcip-cart-crosssell__grid {
    grid-template-columns: repeat(2, 1fr);
}

/* ── Individual Card ──────────────────────────────────── */

.ofcip-ccs-card {
    display: flex;
    flex-direction: column;
    background: var(--ofcip-bg-light, #F9FAFB);
    border: 1px solid var(--ofcip-border, #E5E7EB);
    border-radius: var(--ofcip-radius, 8px);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow var(--ofcip-transition, .2s ease),
                transform var(--ofcip-transition, .2s ease);
}

.ofcip-ccs-card:hover {
    box-shadow: var(--ofcip-shadow-md, 0 4px 16px rgba(0,0,0,.12));
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ── Card image ───────────────────────────────────────── */

/* Fixed 120×120 box (OFCIP UX Freeze, Phase 2) — was fluid to the grid
   column before, so the rendered size varied with viewport width. */
.ofcip-ccs-card__img {
    position: relative;
    width: 120px;
    height: 120px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    margin: 0 auto;
}

.ofcip-ccs-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
}

/* Opportunity badge (🏆 / 🔥) */
.ofcip-ccs-card__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 13px;
    line-height: 1;
    z-index: 1;
}

/* ── Card body ────────────────────────────────────────── */

.ofcip-ccs-card__body {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ofcip-ccs-card__name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ofcip-text, #1A1A1A);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ofcip-ccs-card__price {
    font-size: 12px;
    font-weight: 700;
    color: var(--ofcip-primary, #E85D00);
    margin: 0;
    line-height: 1.2;
}

.ofcip-ccs-card__price del {
    color: var(--ofcip-text-muted, #6B7280);
    font-weight: 400;
    font-size: 10px;
}

.ofcip-ccs-card__cta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ofcip-primary, #E85D00);
    margin-top: auto;
    padding-top: 4px;
}

/* ── Side-cart specific: tighter vertical rhythm ──────── */

.ofcip-cart-crosssell--mini-cart {
    padding: 12px 0 4px;
    border-top: 1px solid var(--ofcip-border, #E5E7EB);
    margin-top: 4px;
}

.ofcip-cart-crosssell--mini-cart .ofcip-cart-crosssell__heading {
    padding: 0 4px;
}

.ofcip-cart-crosssell--mini-cart .ofcip-ccs-card__body {
    padding: 4px 6px 6px;
}

.ofcip-cart-crosssell--mini-cart .ofcip-ccs-card__name {
    font-size: 10px;
    -webkit-line-clamp: 2;
}

.ofcip-cart-crosssell--mini-cart .ofcip-ccs-card__cta {
    display: none; /* space too tight in side-cart */
}

/* ── Cart-page collaterals: separator from totals ─────── */

.ofcip-cart-crosssell--cart-collaterals {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ofcip-border, #E5E7EB);
    margin-bottom: 16px;
}

/* ── Mobile: 2-col on narrow screens ─────────────────── */

@media (max-width: 480px) {
    /* Keep 2-col grid but make cards narrower */
    .ofcip-cart-crosssell--cart-collaterals .ofcip-cart-crosssell__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .ofcip-ccs-card__name {
        font-size: 10px;
    }
}

/* ── Force cart collaterals to stack: recs before totals ─ */

.cart-collaterals {
    display: flex !important;
    flex-direction: column;
}

/* Ensure the cross-sell block (.ofcip-cart-crosssell--cart-collaterals)
   visually precedes .cart_totals in the stacking order.
   Both are children of .cart-collaterals; hook priority 1 handles DOM order. */

.cart-collaterals .cart_totals {
    order: 10;
}

.cart-collaterals .ofcip-cart-crosssell--cart-collaterals {
    order: 1;
}

/* ── P0 Side Cart: Two-Panel Layout (JS-built) ────────────────────────── */
/*
 * When ofcip_side_cart_panel_js() restructures the WoodMart side cart it adds
 * .ofcip-two-panel to .widget_shopping_cart_content and inserts one new child:
 *   .ofcip-side-left-wrap  — left panel: JS-rendered recommendation cards (max 2)
 *
 * The live WooCommerce cart markup (item list, totals, buttons) is left exactly
 * where WooCommerce/WoodMart rendered it — it is never moved, wrapped, or
 * detached, so WooCommerce's own AJAX fragment refresh keeps finding and
 * replacing it normally on every add/remove/update. CSS Grid places the left
 * panel in column 1 (spanning all rows) and lets the untouched cart siblings
 * auto-flow into column 2, without needing a JS-created wrapper around them.
 *
 * (Fixed 2026-07-02: this block previously used Flexbox with a JS-created
 * .ofcip-side-right wrapper that moved the live cart DOM into it. That design
 * could freeze the visible item list at a stale count while the subtotal
 * (a separate fragment) kept updating correctly. See RC 9.7.1 QA finding.)
 */

/*
 * Two-panel layout: CSS Grid. Left panel is explicitly placed in column 1,
 * spanning every row; every other (untouched) child auto-flows into column 2,
 * stacking one per row. No overflow: hidden on the row axis — let WoodMart's
 * native scroll container handle vertical overflow.
 * Inline CSS (ofcip_side_cart_inline_css) is the authoritative source; this is
 * the static fallback for browsers that load style.css fresh.
 */
.widget_shopping_cart_content.ofcip-two-panel {
    display: grid !important;
    grid-template-columns: 122px 1fr !important;
    align-items: start !important;
    overflow-x: hidden !important;
    padding: 0 !important;
}

/* ── Left panel (recommendations) ───────────────────────────── */

.ofcip-side-left-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 122px;
    min-width: 122px;
    max-width: 122px;
    position: sticky;
    top: 0;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--ofcip-bg-light, #F9FAFB);
    border-right: 1px solid var(--ofcip-border, #E5E7EB);
    box-sizing: border-box;
    padding: 12px 8px;
    z-index: 2;
}

.ofcip-side-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ofcip-side-left__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ofcip-text-muted, #6B7280);
    margin: 0 0 6px;
    padding: 0;
}

.ofcip-side-left__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Right column (cart items + totals + buttons) ─────────────── */
/* No wrapper element — the untouched WooCommerce/WoodMart cart markup
   auto-flows into grid column 2 via .widget_shopping_cart_content.ofcip-two-panel
   above. No .ofcip-side-right rule is needed (removed 2026-07-02). */

/* Prevent WoodMart's default cross-sells from appearing inside the side cart */
.wd-side-cart .cross-sells,
.wd-mini-cart .cross-sells,
.wd-header-cart .cross-sells {
    display: none !important;
}

/* ── JS-generated recommendation cards (.ofcip-sp-card) ─────── */
/*
 * Built by buildCards() in ofcip_side_cart_panel_js().
 * Narrower than the PHP .ofcip-ccs-card — fits inside the 152px left panel.
 */

.ofcip-sp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ofcip-border, #E5E7EB);
    border-radius: var(--ofcip-radius, 8px);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.ofcip-sp-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Full-area link wraps image + name + price */
.ofcip-sp-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
}

/* Image — full width, square, contain so nothing crops */
.ofcip-sp-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.ofcip-sp-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
}

/* Opportunity badge */
.ofcip-sp__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    line-height: 1;
    z-index: 1;
}

/* Product name — 2 lines max */
.ofcip-sp-card__name {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ofcip-text, #1A1A1A);
    margin: 0;
    padding: 4px 6px 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price — clean, no screen-reader text (PHP sends <del>/<ins> only) */
.ofcip-sp-card__price {
    font-size: 11px;
    font-weight: 700;
    color: var(--ofcip-primary, #E85D00);
    margin: 0;
    padding: 0 6px 6px;
    line-height: 1.3;
}

.ofcip-sp-card__price del {
    color: var(--ofcip-text-muted, #6B7280);
    font-weight: 400;
    font-size: 9px;
    text-decoration: line-through;
    margin-right: 2px;
}

.ofcip-sp-card__price ins {
    text-decoration: none;
    font-weight: 700;
}

/* Add to cart — small full-width button below the link */
.ofcip-sp-card__atc {
    display: block;
    width: 100%;
    padding: 5px 4px;
    background: var(--ofcip-primary, #E85D00);
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background .18s ease;
}

.ofcip-sp-card__atc:hover {
    background: var(--ofcip-primary-dark, #C94F00);
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Fix: hide WooCommerce screen-reader text in full-cart PHP cross-sells ─ */
/*
 * get_price_html() wraps price parts in <span class="screen-reader-text">.
 * WC's global CSS clips them, but inside .ofcip-ccs-card that CSS doesn't
 * cascade — causing "El precio original era:" to appear as visible text.
 */
.ofcip-ccs-card__price .screen-reader-text,
.ofcip-sp-card__price .screen-reader-text {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   OFCIP UX Freeze — Phase 2: Product Grid Cleanup
   Targets the live WoodMart grid markup confirmed on outletflorida.com:
     .wd-product.product-grid-item > .product-wrapper >
       .product-element-top.wd-quick-shop > a.product-image-link > img
   Nothing in this child theme touched grid images/ATC visibility before
   this pass — these are new rules, not overrides of prior child-theme CSS.
   Revert: delete this section.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid image: consistent square box, never cropped ─────────────────
   WoodMart renders each product's native image size (e.g. 430×701,
   430×764 — inconsistent per upload) inside a 3:4 box with object-fit
   left unset, which is why grid photos looked inconsistently framed.
   Recommended source size going forward: 800×800. */
.wd-products .product-grid-item .product-element-top.wd-quick-shop .product-image-link,
.wd-products .product-grid-item .product-element-top.wd-quick-shop .product-image-link .hover-img {
    aspect-ratio: 1 / 1 !important;
    background: #fff;
}

.wd-products .product-grid-item .product-element-top.wd-quick-shop .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff;
}

/* ── Add to Cart: always visible, never covering title/price ──────────
   WoodMart's "replace" ATC style is `visibility:hidden` at rest and,
   on hover, expands to overlay the title+price rows (confirmed live:
   the button's box spans both). Forcing that same element permanently
   visible would permanently hide the title and price, so instead this
   gives the product a persistent, always-visible ATC affordance as a
   compact icon button pinned to the image's bottom-right corner —
   mirroring the existing top-right quick-view/wishlist/compare corner
   (.wd-buttons.wd-pos-r-t) already used in this same card. */
.wd-products .product-grid-item .product-element-top.wd-quick-shop .wd-add-btn.wd-add-btn-replace {
    position: absolute !important;
    inset: auto 8px 8px auto !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5;
}

.wd-products .product-grid-item .product-element-top.wd-quick-shop .wd-add-btn.wd-add-btn-replace .woodmart-add-btn {
    display: flex !important;
}

.wd-products .product-grid-item .product-element-top.wd-quick-shop .wd-add-btn.wd-add-btn-replace .add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--ofcip-primary, #E85D00) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    font-size: 0; /* hide WC's "Add to cart" text label, icon-only */
    overflow: hidden;
}

.wd-products .product-grid-item .product-element-top.wd-quick-shop .wd-add-btn.wd-add-btn-replace .add_to_cart_button:hover {
    background: var(--ofcip-primary-dark, #C94F00) !important;
}

.wd-products .product-grid-item .product-element-top.wd-quick-shop .wd-add-btn.wd-add-btn-replace .add_to_cart_button::before {
    content: '+';
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010.1 — Base Button Component (Sprint 1 — Foundation)
   New, additive component: does not replace or restyle the 6 existing
   bespoke buttons (.ofcip-wa-btn, .ofcip-shopper-btn, .ofcip-tg-btn,
   .ofcip-cart-wa-help__btn, .ofcip-checkout-wa__btn, .ofcip-refresh-btn).
   Used by new components starting Sprint 2 (Buy Now) and Sprint 4 (Chat).
   ════════════════════════════════════════════════════════════════════ */

.ofcip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ofcip-space-2);
    padding: var(--ofcip-space-3) var(--ofcip-space-5);
    border-radius: var(--ofcip-radius);
    border: none;
    font-size: var(--ofcip-fs-base);
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--ofcip-transition), transform var(--ofcip-transition), box-shadow var(--ofcip-transition);
    line-height: 1.2;
}

.ofcip-btn:disabled,
.ofcip-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.ofcip-btn--primary {
    background: var(--ofcip-cta);
    color: #fff !important;
}
.ofcip-btn--primary:hover {
    background: var(--ofcip-cta-dark);
    color: #fff !important;
}

.ofcip-btn--secondary {
    background: #fff;
    color: var(--ofcip-cta) !important;
    border: 1px solid var(--ofcip-cta);
}
.ofcip-btn--secondary:hover {
    background: var(--ofcip-bg-light);
}

.ofcip-btn--wa {
    background: var(--ofcip-wa-green);
    color: #fff !important;
}
.ofcip-btn--wa:hover {
    background: var(--ofcip-wa-dark);
    color: #fff !important;
}

.ofcip-btn--ghost {
    background: transparent;
    color: var(--ofcip-text) !important;
    border: 1px solid var(--ofcip-border);
}
.ofcip-btn--ghost:hover {
    background: var(--ofcip-bg-light);
}

.ofcip-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.ofcip-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ofcip-btn-spin .6s linear infinite;
}
.ofcip-btn--secondary.ofcip-btn--loading::after,
.ofcip-btn--ghost.ofcip-btn--loading::after {
    border-color: rgba(0,0,0,.15);
    border-top-color: var(--ofcip-text);
}

@keyframes ofcip-btn-spin {
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010.2 — Product Experience (Sprint 2)
   ════════════════════════════════════════════════════════════════════ */

/* ── CTA principal: Add to Cart usa el color CTA de la referencia ──── */
.single_add_to_cart_button.button.alt {
    background-color: var(--ofcip-cta) !important;
    border-color: var(--ofcip-cta) !important;
    color: #fff !important;
}
.single_add_to_cart_button.button.alt:hover {
    background-color: var(--ofcip-cta-dark) !important;
    border-color: var(--ofcip-cta-dark) !important;
}

/* ── Buy Now: WoodMart's own native button (buy_now_enabled, ya activo
   -- ver xts-woodmart-options), reutilizado tal cual. Estilo secundario
   (outline) para diferenciarlo del CTA principal, igual que la
   referencia -- ningún botón nuevo, ningún hook nuevo. ────────────── */
.wd-buy-now-btn.button.alt {
    background-color: #fff !important;
    border: 1px solid var(--ofcip-cta) !important;
    color: var(--ofcip-cta) !important;
}
.wd-buy-now-btn.button.alt:hover {
    background-color: var(--ofcip-bg-light) !important;
}

/* ── Commercial Confidence Compact ───────────────────────────────── */
.ofcip-confidence-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ofcip-space-4);
    align-items: center;
    justify-content: flex-start;
    padding: var(--ofcip-space-3) 0;
    margin: var(--ofcip-space-2) 0;
    border-top: 1px solid var(--ofcip-border);
    border-bottom: 1px solid var(--ofcip-border);
}
.ofcip-confidence-compact__item {
    display: flex;
    align-items: center;
    gap: var(--ofcip-space-2);
    font-size: var(--ofcip-fs-xs);
    font-weight: 600;
    color: var(--ofcip-text-muted);
    white-space: nowrap;
}
.ofcip-confidence-compact__icon {
    display: inline-flex;
    color: var(--ofcip-trust);
    flex-shrink: 0;
}
.ofcip-confidence-compact__icon svg {
    width: 16px;
    height: 16px;
}
@media (max-width: 480px) {
    .ofcip-confidence-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ofcip-space-2);
    }
}

/* ── Related Products restyle (markup nativo WooCommerce/WoodMart) ── */
.related-and-upsells .related-products.products .product {
    border-radius: var(--ofcip-radius);
    overflow: hidden;
    transition: box-shadow var(--ofcip-transition);
}
.related-and-upsells .related-products.products .product:hover {
    box-shadow: var(--ofcip-shadow-md);
}
.related-and-upsells .related-products.products .product .price {
    color: var(--ofcip-cta) !important;
    font-weight: 700;
}
.related-and-upsells .related-products.products .product .price del {
    color: var(--ofcip-text-muted) !important;
    font-weight: 400;
    opacity: .8;
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010.3 — Cart Experience (Sprint 3)
   ════════════════════════════════════════════════════════════════════ */

/* ── Cart Steps: extiende .ofcip-checkout-step con estados que antes
   no existían (activo/pendiente) -- el patrón base es 100% reutilizado
   de checkout-trust-intro.php. ─────────────────────────────────────── */
.ofcip-cart-steps {
    padding: var(--ofcip-space-3) 0;
    margin-bottom: var(--ofcip-space-2);
}
.ofcip-checkout-steps--cart {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ofcip-checkout-steps--cart::-webkit-scrollbar {
    display: none;
}
.ofcip-checkout-step--active .ofcip-checkout-step__num {
    background: var(--ofcip-cta);
    color: #fff;
}
.ofcip-checkout-step--active .ofcip-checkout-step__label {
    color: var(--ofcip-text);
    font-weight: 700;
}
.ofcip-checkout-step--pending .ofcip-checkout-step__num {
    background: #fff;
    border: 1.5px solid var(--ofcip-border);
    color: var(--ofcip-text-muted);
}
.ofcip-checkout-step--pending .ofcip-checkout-step__label {
    color: var(--ofcip-text-muted);
    font-weight: 500;
}
.ofcip-cart-steps__mobile-fallback {
    display: none;
    font-size: var(--ofcip-fs-sm);
    font-weight: 700;
    color: var(--ofcip-text);
    margin: 0;
}
@media (max-width: 480px) {
    .ofcip-checkout-steps--cart {
        display: none;
    }
    .ofcip-cart-steps__mobile-fallback {
        display: block;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .ofcip-checkout-steps--cart {
        gap: 4px;
    }
    .ofcip-checkout-steps--cart .ofcip-checkout-step__label {
        display: none;
    }
    .ofcip-checkout-step--active .ofcip-checkout-step__label {
        display: inline;
    }
}

/* ── Columna derecha: sticky en desktop, deja de serlo en tablet/mobile
   (extiende .ofcip-right-col ya existente, no lo reemplaza). ──────── */
@media (min-width: 1025px) {
    .ofcip-right-col {
        position: sticky;
        top: var(--ofcip-space-4);
        align-self: flex-start;
        max-height: calc(100vh - var(--ofcip-space-6));
        overflow-y: auto;
    }
}
@media (max-width: 1024px) {
    .ofcip-right-col {
        position: static;
        max-height: none;
    }
}
.ofcip-right-col > * {
    margin-bottom: var(--ofcip-space-3);
}

/* ── Trust Block dentro del carrito: refuerzo compacto, no duplica la
   franja superior (Cart Confidence Strip). ─────────────────────────── */
.ofcip-right-col .ofcip-trust-block--compact {
    padding: var(--ofcip-space-3);
    background: var(--ofcip-bg-light);
    border-radius: var(--ofcip-radius);
}

/* ── Cart Cross-sell cards: separar link (imagen/nombre/precio) del CTA
   real de añadir al carrito (WCO-010.3 -- antes solo "Ver →", ahora
   reutiliza woocommerce_template_loop_add_to_cart() nativo). ──────── */
.ofcip-ccs-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    flex: 1;
}
.ofcip-ccs-card__atc.button {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    padding: 8px 6px;
    background: var(--ofcip-cta) !important;
    color: #fff !important;
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    text-align: center;
    border-radius: var(--ofcip-radius);
    text-decoration: none !important;
    box-sizing: border-box;
}
.ofcip-ccs-card__atc.button:hover {
    background: var(--ofcip-cta-dark) !important;
}
.ofcip-ccs-card__atc.added::after {
    content: ' ✓';
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010.4 — Unified Commerce Chat (Sprint 4)
   ════════════════════════════════════════════════════════════════════ */

/* ── Channel selector popover (opens from the single .ofcip-wa-float) ── */
.ofcip-unified-entry {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}
.ofcip-unified-entry .ofcip-wa-float {
    /* The original .ofcip-wa-float rule (line 273) was written for an <a>
       tag; this is now a <button>. Some WoodMart core button rules carry
       enough specificity to beat a plain class selector for background/
       border/appearance, so every visual property is re-asserted here
       with !important -- position/size/shape must never depend on
       cascade order against theme button resets. */
    position: static !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    font: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
.ofcip-unified-entry .ofcip-wa-float svg {
    fill: #fff !important;
    color: #fff !important;
}
/* OFCIP-CAPA3.1-P0-SOCIAL-COMMERCE-PERSONAL-SHOPPER-UX-001: the entry
   button's own identity is now the Shopping Assistant (OutletFlorida's
   own brand accent), never WhatsApp green -- "no esconder el Asistente
   dentro del boton verde WhatsApp." */
.ofcip-unified-entry .ofcip-wa-float--assistant {
    background: var(--ofcip-primary) !important;
    box-shadow: 0 4px 20px rgba(232, 93, 0, .5) !important;
}
.ofcip-unified-entry .ofcip-wa-float__emoji {
    font-size: 26px !important;
    line-height: 1 !important;
}
.ofcip-channel-selector {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 220px;
    background: #fff;
    border-radius: var(--ofcip-radius-lg);
    box-shadow: var(--ofcip-shadow-md);
    padding: var(--ofcip-space-3);
    animation: ofcip-fade-up .18s ease;
}
@keyframes ofcip-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ofcip-channel-selector__title {
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    color: var(--ofcip-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 var(--ofcip-space-2);
}
.ofcip-channel-selector__option {
    display: flex;
    align-items: center;
    gap: var(--ofcip-space-2);
    width: 100%;
    padding: var(--ofcip-space-3);
    border: none;
    background: var(--ofcip-bg-light);
    border-radius: var(--ofcip-radius);
    font-size: var(--ofcip-fs-base);
    font-weight: 600;
    color: var(--ofcip-text) !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: var(--ofcip-space-2);
    transition: background var(--ofcip-transition);
}
.ofcip-channel-selector__option:last-child {
    margin-bottom: 0;
}
.ofcip-channel-selector__option:hover {
    background: var(--ofcip-border);
}
/* OFCIP-CAPA3.1-P0-SOCIAL-COMMERCE-PERSONAL-SHOPPER-UX-001: real visual
   hierarchy -- Assistant is the primary, bold, brand-accent option;
   WhatsApp ("Hablar con un asesor") is a smaller, muted secondary
   option. Both real, both reachable -- never equal visual weight. */
.ofcip-channel-selector__option--assistant {
    background: var(--ofcip-primary);
    color: #fff !important;
    font-size: calc(var(--ofcip-fs-base) + 1px);
    padding: calc(var(--ofcip-space-3) + 2px) var(--ofcip-space-3);
}
.ofcip-channel-selector__option--assistant:hover {
    background: var(--ofcip-primary-dark);
}
.ofcip-channel-selector__option--wa {
    background: var(--ofcip-bg-light);
    font-size: var(--ofcip-fs-sm, .85rem);
    font-weight: 500;
    color: var(--ofcip-text-muted) !important;
    padding: calc(var(--ofcip-space-3) - 2px) var(--ofcip-space-3);
}
.ofcip-channel-selector__option--wa svg {
    width: 16px;
    height: 16px;
    color: var(--ofcip-text-muted);
}

/* ── Chat window (built lazily by ofcip-web-chat-widget.php) ─────────── */
#ofcip-chat-window {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 10000;
    width: 360px;
    max-width: 92vw;
    height: 480px;
    max-height: 75vh;
    background: #fff;
    border-radius: var(--ofcip-radius-lg);
    box-shadow: var(--ofcip-shadow-md);
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
    animation: ofcip-fade-up .2s ease;
}
#ofcip-chat-window.open {
    display: flex;
}
#ofcip-chat-header {
    background: var(--ofcip-cta);
    color: #fff;
    padding: var(--ofcip-space-3) var(--ofcip-space-4);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
#ofcip-chat-close {
    cursor: pointer;
    font-size: var(--ofcip-fs-md);
    line-height: 1;
    padding: 4px;
}
.ofcip-chat-status {
    display: inline-block;
    margin-left: var(--ofcip-space-2);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.ofcip-chat-status--connected { background: rgba(255,255,255,.2); color: #fff; }
.ofcip-chat-status--typing    { background: rgba(255,255,255,.2); color: #fff; }
.ofcip-chat-status--error     { background: #EF4444; color: #fff; }
.ofcip-chat-status--offline   { background: #6B7280; color: #fff; }

#ofcip-chat-history {
    flex: 1;
    overflow-y: auto;
    padding: var(--ofcip-space-3);
    background: var(--ofcip-bg-light);
    font-size: var(--ofcip-fs-base);
}
.ofcip-msg {
    margin-bottom: var(--ofcip-space-3);
    padding: var(--ofcip-space-2) var(--ofcip-space-3);
    border-radius: var(--ofcip-radius);
    max-width: 85%;
    line-height: 1.4;
}
.ofcip-msg-user {
    background: var(--ofcip-cta);
    color: #fff;
    margin-left: auto;
}
.ofcip-msg-bot {
    background: #fff;
    border: 1px solid var(--ofcip-border);
    white-space: pre-wrap;
    color: var(--ofcip-text);
}
.ofcip-msg-typing {
    color: var(--ofcip-text-muted);
    font-style: italic;
}
.ofcip-product-card {
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    padding: var(--ofcip-space-2);
    margin-top: var(--ofcip-space-2);
    background: #fff;
    font-size: var(--ofcip-fs-sm);
}
.ofcip-product-card a {
    color: var(--ofcip-cta);
    font-weight: 700;
    text-decoration: none;
}
.ofcip-product-price {
    color: var(--ofcip-primary-dark);
    font-weight: 700;
}
.ofcip-wa-cta {
    display: inline-block;
    margin-top: var(--ofcip-space-2);
    background: var(--ofcip-wa-green);
    color: #fff !important;
    padding: var(--ofcip-space-2) var(--ofcip-space-3);
    border-radius: 20px;
    text-decoration: none !important;
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
}
/* P0-B (OFCIP-MASTER-COMMERCIAL-RESOLUTION-001): real Opportunity match
   card in the Assistant chat -- distinct from .ofcip-product-card (own
   WooCommerce stock) since it always carries a real photo + PEN price +
   a dedicated CTA to the public Opportunity page. */
.ofcip-opportunity-card {
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    padding: var(--ofcip-space-2);
    margin-top: var(--ofcip-space-2);
    background: #fff;
    font-size: var(--ofcip-fs-sm);
}
.ofcip-opportunity-image {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: calc(var(--ofcip-radius) - 4px);
    background: #f0f0f2;
    display: block;
    margin-bottom: var(--ofcip-space-2);
}
.ofcip-opportunity-title {
    font-weight: 700;
    color: var(--ofcip-text);
}
.ofcip-opportunity-price {
    color: var(--ofcip-primary-dark);
    font-weight: 700;
    margin-top: 2px;
}
.ofcip-opportunity-badge {
    display: inline-block;
    margin-top: var(--ofcip-space-2);
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    color: var(--ofcip-primary-dark);
}
.ofcip-opportunity-cta {
    display: block;
    margin-top: var(--ofcip-space-2);
    background: var(--ofcip-primary);
    color: #fff !important;
    padding: var(--ofcip-space-2) var(--ofcip-space-3);
    border-radius: 20px;
    text-decoration: none !important;
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    text-align: center;
}
.ofcip-opportunity-buy {
    background: #1a9c4a;
    margin-top: var(--ofcip-space-3);
}
.ofcip-opportunity-interested {
    background: var(--ofcip-primary);
    color: #fff !important;
    border: none;
    width: 100%;
    font: inherit;
    cursor: pointer;
}
.ofcip-opportunity-interested:disabled {
    background: var(--ofcip-border);
    color: #666 !important;
    cursor: default;
}
.ofcip-cross-sell {
    margin-top: var(--ofcip-space-3);
}
.ofcip-cross-sell-title {
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ofcip-primary-dark);
    margin-bottom: var(--ofcip-space-1);
}
.ofcip-cross-sell-reason {
    font-size: var(--ofcip-fs-xs);
    color: var(--ofcip-text-muted, #777);
    margin-top: var(--ofcip-space-1);
}
/* P0-C (OFCIP-MASTER-COMMERCIAL-RESOLUTION-001): real Shopping Request
   capture card in the Assistant chat -- phone/consent are only ever
   asked here, after a genuine no-match has already been established. */
.ofcip-shopping-request-card {
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    padding: var(--ofcip-space-2);
    margin-top: var(--ofcip-space-2);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--ofcip-space-2);
}
.ofcip-sr-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--ofcip-space-2);
    border: 1px solid var(--ofcip-border);
    border-radius: 8px;
    font-size: var(--ofcip-fs-sm);
    font-family: inherit;
}
.ofcip-sr-consent {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--ofcip-fs-xs);
    color: var(--ofcip-text-muted);
    cursor: pointer;
}
.ofcip-sr-consent input {
    margin-top: 2px;
    flex-shrink: 0;
}
.ofcip-sr-submit {
    display: block;
    width: 100%;
    background: var(--ofcip-primary);
    color: #fff;
    border: none;
    padding: var(--ofcip-space-2) var(--ofcip-space-3);
    border-radius: 20px;
    font-size: var(--ofcip-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
#ofcip-chat-input-row {
    display: flex;
    border-top: 1px solid var(--ofcip-border);
    flex-shrink: 0;
}
#ofcip-chat-input {
    flex: 1;
    border: none;
    padding: var(--ofcip-space-3);
    font-size: var(--ofcip-fs-base);
    font-family: inherit;
}
#ofcip-chat-input:disabled {
    background: var(--ofcip-bg-light);
    color: var(--ofcip-text-muted);
}
#ofcip-chat-send {
    border: none;
    background: var(--ofcip-cta);
    color: #fff;
    padding: 0 var(--ofcip-space-4);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
}
#ofcip-chat-send:disabled {
    background: var(--ofcip-border);
    color: var(--ofcip-text-muted);
    cursor: not-allowed;
}

/* ── Responsive (Fase 5 / Fase 11) ────────────────────────────────── */
@media (max-width: 480px) {
    .ofcip-unified-entry {
        bottom: 16px;
        right: 16px;
    }
    .ofcip-channel-selector {
        width: calc(100vw - 32px);
        right: -8px;
    }
    #ofcip-chat-window {
        position: fixed;
        inset: 0;
        bottom: 0;
        right: 0;
        width: 100vw;
        /* OFCIP-COMMERCE-EXECUTION-CLOSURE-001 (D8): real bug reported
           by the PO -- 100vh on a real mobile browser is calculated
           against the LARGEST possible viewport (address bar hidden),
           not what's actually visible once the browser's own chrome is
           on screen, so the header/input row could sit clipped below
           the fold. 100dvh (dynamic viewport height) tracks the real,
           currently-visible viewport; 100vh stays first as a fallback
           for a browser that doesn't understand dvh (this line is then
           simply ignored, not applied as 0). */
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    #ofcip-chat-window {
        width: 340px;
        height: 70vh;
    }
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010.5 — Visual QA vs. Reference (Sprint 5, Product page only)
   ════════════════════════════════════════════════════════════════════ */

/* #of-urgency (Code Snippet ID 9's sibling urgency banner) duplicates
   the "ÚLTIMAS X UNIDADES" badge already shown above it -- the reference
   design shows that information once, as a compact badge, not twice.
   Hidden via CSS (reversible), snippet logic untouched. */
#of-urgency {
    display: none !important;
}

/* Personal Shopper (4 stacked WhatsApp CTAs) does not appear in the
   reference layout at all -- the reference's single "Consultar
   disponibilidad" + the unified floating chat already cover this need.
   Hidden here (Product page only) to match the approved visual
   reference; the underlying component/hook is untouched and can be
   re-enabled by removing this rule. */
.ofcip-personal-shopper {
    display: none !important;
}

/* ── Duplicación real de contenido y prueba social fabricada (Página
   Producto únicamente -- body.ofcip-page-product, no afecta otras
   pantallas todavía no aprobadas). ─────────────────────────────────── */

/* La barra de anuncios superior repite textualmente "Envíos a todo el
   Perú" y el mensaje de "100% originales", ya mostrados en la fila de
   confianza real más abajo (Producto Original USA / Envío a Todo el
   Perú / Compra Segura). Duplicación real, no presente en la
   referencia. */
body.ofcip-page-product .wd-announcement-bar {
    display: none !important;
}

/* .vistas-infladas-pro -- el propio nombre de la clase real admite que
   es un contador de interés fabricado ("vistas infladas"), no un dato
   real. No está en la referencia y no es información honesta. */
body.ofcip-page-product .vistas-infladas-pro {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010 PDP-006 — Métodos de pago (tab "Métodos de pago")
   4 tarjetas de tamaño/altura/borde idénticos, sin placeholders vacíos.
   ════════════════════════════════════════════════════════════════════ */

.ofcip-payment-methods__intro {
    margin: 0 0 var(--ofcip-space-3);
    color: var(--ofcip-text-muted);
    font-size: var(--ofcip-fs-sm);
    line-height: 1.4;
}

.ofcip-pm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ofcip-space-3);
}

@media (max-width: 900px) {
    .ofcip-pm-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ofcip-pm-grid { grid-template-columns: 1fr; }
}

/* WCO-010 PDP-006 (revisión NO GO — compactación): layout cambiado de
   ícono-apilado-arriba a ícono-junto-al-título en una fila, min-height
   casi eliminado y paddings/gaps reducidos a la mitad. Mismo componente,
   mismos tokens de diseño -- solo ocupa menos alto. */
.ofcip-pm-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ofcip-space-1);
    height: 100%;
    padding: var(--ofcip-space-3);
    background: #fff;
    border: 1px solid var(--ofcip-border);
    border-radius: var(--ofcip-radius);
    transition: border-color var(--ofcip-transition), box-shadow var(--ofcip-transition);
}

.ofcip-pm-card:hover {
    border-color: var(--ofcip-cta);
    box-shadow: var(--ofcip-shadow);
}

.ofcip-pm-card--instant {
    border-color: var(--ofcip-trust);
}

.ofcip-pm-card__head {
    display: flex;
    align-items: center;
    gap: var(--ofcip-space-2);
    width: 100%;
}

.ofcip-pm-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--ofcip-radius);
    background: var(--ofcip-bg-light);
    color: var(--ofcip-cta);
}

.ofcip-pm-card__icon svg {
    width: 16px;
    height: 16px;
}

.ofcip-pm-card--instant .ofcip-pm-card__icon {
    color: var(--ofcip-trust-dark);
    background: #EAF6EE;
}

.ofcip-pm-card__title {
    font-size: var(--ofcip-fs-base);
    font-weight: 700;
    color: var(--ofcip-text);
    line-height: 1.2;
}

.ofcip-pm-card__subtitle {
    font-size: var(--ofcip-fs-xs);
    color: var(--ofcip-text-muted);
}

.ofcip-pm-card__detail {
    font-size: var(--ofcip-fs-xs);
    color: var(--ofcip-text-muted);
    line-height: 1.3;
}

.ofcip-pm-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ofcip-trust-dark);
}

.ofcip-pm-card__badge svg {
    width: 10px;
    height: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   WCO-010 PDP-006B — Espacio muerto entre CTAs y Tabs
   Causas reales medidas con getBoundingClientRect() en vivo, no supuestas:
   1) Dos <div id="of-wa-reserva"> duplicados envuelven un enlace de
      WhatsApp "Reservar 50%" que YA estaba oculto por una regla anterior
      (.summary-inner a[href*="wa.me"]{display:none}) -- pero los DOS
      wrappers seguían aportando ~44px de margen sin nada visible dentro.
   2) .ofcip-conversation-entry NO está vacío -- contiene un CTA real
      ("¿Preguntas sobre este producto?" + enlace WhatsApp con el SKU) --
      pero sus 2 hijos quedan display:none por una regla existente y más
      amplia de lo previsto (Additional CSS, "P2 - Eliminar Reservar 50%":
      `.summary-inner a[href*="wa.me"]{display:none}` + el `p:has(+ a...)`
      hermano) que fue escrita para ocultar SOLO el botón "Reservar 50%",
      pero por usar un selector genérico por atributo también apaga este
      OTRO CTA de WhatsApp que nada tiene que ver con la reserva. No lo
      restauro aquí (sería reactivar una funcionalidad, fuera del alcance
      "solo reducir espacio muerto") -- solo se le quita el margen que
      sigue ocupando estando invisible. Reportado para decisión aparte.
   3) .product-tabs-wrapper tenía 40px fijos de padding-top antes de la
      barra de tabs, sin importar cuánto contenido hubiera arriba.
   ════════════════════════════════════════════════════════════════════ */

#of-wa-reserva {
    margin: 0 !important;
}

.ofcip-conversation-entry {
    margin: 0 !important;
}

.wd-after-add-to-cart:empty {
    margin-bottom: 0 !important;
}

.product-tabs-wrapper {
    padding-top: 14px !important;
}

/* Wishlist: al quedar los divs vacíos de arriba sin margen, el corazón ya
   se pega al bloque de botones en vez de flotar aislado; solo se afina su
   propio margen para reforzar que es parte del mismo bloque de acciones. */
.single-product .wd-wishlist-btn {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

/* Compartir: redundante con el WhatsApp flotante y los CTAs ya presentes
   en toda la página (mismo número, mismo canal) -- no aporta información,
   confianza ni interacción adicional en este flujo de compra.
   Revertir: quitar "display:none" de esta regla. */
.single-product .product-share,
.single-product .wd-social-icons.social-share {
    display: none !important;
}

.ofcip-confidence-compact {
    margin-bottom: 12px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Product Page Cross-Sell (Commerce Conversion Layer V1,
   OFCIP-COMMERCE-CONVERSION-LAYER-IMPLEMENTATION-001). Same visual
   language as the cart cross-sell cards above (.ofcip-ccs-card family)
   -- new selectors, no shared classes, so neither surface's CSS can
   regress the other.
   ════════════════════════════════════════════════════════════════════ */

.ofcip-pp-crosssell {
    margin: 24px 0;
    clear: both;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.ofcip-pp-crosssell__heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--ofcip-text, #1A1A1A);
    margin: 0 0 10px;
}

/* OFCIP-PDP-RECOMMENDATIONS-DEFINITIVE-LIVE-001: this block's parent is
   .container.product-tabs-inner -- a FULL-WIDTH section below the tabs
   (~1381px on a 1440px viewport). Desktop uses auto-fit with a fixed
   minmax range so columns size to exactly the number of real cards
   (2-5) and stop -- never stretches cards to fill the wide container,
   never reserves phantom empty column tracks. Tablet/mobile use
   explicit fixed column counts per spec (3 / 2) rather than relying on
   auto-fit's own collapse behavior at those widths, which was proven
   unreliable via real device-width rendering. justify-content:center
   keeps the card group centered in the full-width section. */
.ofcip-pp-crosssell__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 190px));
    justify-content: center;
    gap: 16px;
}

@media (max-width: 1024px) and (min-width: 601px) {
    .ofcip-pp-crosssell__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .ofcip-pp-crosssell__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }
}

@media (max-width: 340px) {
    .ofcip-pp-crosssell__grid {
        grid-template-columns: 1fr;
    }
}

.ofcip-pp-card {
    display: flex;
    flex-direction: column;
    background: var(--ofcip-bg-light, #F9FAFB);
    border: 1px solid var(--ofcip-border, #E5E7EB);
    border-radius: var(--ofcip-radius, 8px);
    overflow: hidden;
    transition: box-shadow var(--ofcip-transition, .2s ease),
                transform var(--ofcip-transition, .2s ease);
}

.ofcip-pp-card:hover {
    box-shadow: var(--ofcip-shadow-md, 0 4px 16px rgba(0,0,0,.12));
    transform: translateY(-1px);
}

.ofcip-pp-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    flex: 1;
}

.ofcip-pp-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

.ofcip-pp-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
}

.ofcip-pp-card__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ofcip-pp-card__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ofcip-text, #1A1A1A);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ofcip-pp-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ofcip-primary, #E85D00);
    margin: 0;
}

.ofcip-pp-card__price del {
    color: var(--ofcip-text-muted, #6B7280);
    font-weight: 400;
    font-size: 11px;
}

/* OFCIP-PDP-RECOMMENDATIONS-DEFINITIVE-LIVE-001: the CTA is no longer
   rendered by woocommerce_template_loop_add_to_cart() at all (that
   WoodMart-overridden template was injecting a hard inline
   width:100% !important no external stylesheet could reliably beat --
   see project history). templates/components/product-page-crosssell.php
   now builds this anchor directly; it still carries WooCommerce core's
   own .add_to_cart_button/.ajax_add_to_cart classes (so wc-add-to-cart.js
   -- core, not WoodMart -- still intercepts the click for AJAX add), but
   every visual property here is asserted explicitly so this card's
   appearance never again depends on what any third-party template
   decides to inline. */
.ofcip-pp-card__cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    height: 38px !important;
    margin: 0 12px 12px !important;
    padding: 0 12px !important;
    background: #1A2B44 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.ofcip-pp-card__cta:hover {
    background: var(--ofcip-primary, #E85D00) !important;
    color: #fff !important;
}