/**
 * Compos Elementor Widgets — shared styles
 *
 * Brand-token-aware defaults that operators can override per-widget
 * via Elementor's Style controls. Loaded on every page where Elementor
 * widgets render + inside the editor preview.
 */

/* ─── Zero-margin enforcement — MANDATORY ──────────────────────────
   Operator-flagged 2026-05-11: every Compos widget kept needing
   manual margin override in Elementor because the inner wrapper had
   inherited / browser-default margin. Force margin:0 on the immediate
   child of every Elementor widget container whose Elementor wrapper
   class starts with `elementor-widget-compos-`. Targets only the
   widget root — inner spacing controlled by the widget's own CSS. */
[class*="elementor-widget-compos-"] > .elementor-widget-container > *,
[class*="elementor-widget-compos-"] > .elementor-widget-container > section,
[class*="elementor-widget-compos-"] > .elementor-widget-container > div {
    margin: 0 !important;
}

/* ─── Sitewide theme post-meta hide ──────────────────────────────────
   Operator-flagged 2026-05-09 (escalated): theme-level .user-info /
   .post-meta / .author-info / .post-date were rendering above ALL
   Compos pages (pages, posts, products, WC pages). Hide sitewide —
   Compos widgets render their own meta when they need it; the theme
   wrapper meta is always noise on top of designed Compos pages. */
.user-info,
.user-info-meta,
.author-info,
.post-meta,
.posted-on,
.post-date,
.byline,
.post-categories,
.post-tags-meta,
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-terms {
    display: none !important;
}

/* Page-template wrapper variants — when WC body class isn't set but
   the page IS a WC page (rare) — also catch the .page wrapper for
   Compos-template-rendered pages. */
.compos-template-context-cart .post-meta,
.compos-template-context-cart .author-info,
.compos-template-context-cart .user-info,
.compos-template-context-cart .post-date,
.compos-template-context-checkout .post-meta,
.compos-template-context-checkout .author-info,
.compos-template-context-checkout .user-info,
.compos-template-context-checkout .post-date,
.compos-template-context-thankyou .post-meta,
.compos-template-context-thankyou .author-info,
.compos-template-context-thankyou .user-info,
.compos-template-context-thankyou .post-date,
.compos-template-context-shop_archive .post-meta,
.compos-template-context-shop_archive .author-info,
.compos-template-context-shop_archive .user-info,
.compos-template-context-shop_archive .post-date,
.compos-template-context-account_wrapper .post-meta,
.compos-template-context-account_wrapper .author-info,
.compos-template-context-account_wrapper .user-info,
.compos-template-context-account_wrapper .post-date {
    display: none !important;
}

/* ─── Canonical Compos Layout Utilities ───────────────────────────────
   New widgets adopt these classes instead of hardcoding pixel paddings
   and gaps. Operators changing spacing_density in Brand admin shifts
   every widget proportionally without touching widget code.
   ──────────────────────────────────────────────────────────────────── */

/* Widget section wrapper — vertical breathing room owned by Compos,
   horizontal owned by Elementor's container width control. */
.cp-section {
    padding: var(--cp-widget-pad-y, 30px) var(--cp-widget-pad-x, 0);
}
.cp-section--snug   { padding-top: var(--cp-space-md, 18px); padding-bottom: var(--cp-space-md, 18px); }
.cp-section--hero   { padding-top: var(--cp-space-xl, 44px); padding-bottom: var(--cp-space-xl, 44px); }
.cp-section--bleed  { padding-top: var(--cp-space-2xl, 64px); padding-bottom: var(--cp-space-2xl, 64px); }

/* Card surface — solid panel with token padding + radius + border. */
.cp-card {
    background: var(--cp-surface, #fff);
    border: 1px solid var(--cp-border, rgba(0,0,0,0.08));
    border-radius: var(--cp-card-radius, var(--cp-radius-md, 12px));
    padding: var(--cp-card-pad, 20px);
}
.cp-card--soft     { background: var(--cp-elevated, #f8f9fa); }
.cp-card--dashed   { border-style: dashed; border-width: 1px; }
.cp-card--flush    { padding: 0; }

/* Vertical stack — items with consistent gap between them. */
.cp-stack { display: flex; flex-direction: column; gap: var(--cp-stack-gap, 12px); }
.cp-stack--snug { gap: var(--cp-space-xs, 8px); }
.cp-stack--loose { gap: var(--cp-space-md, 18px); }

/* Horizontal row with token gap. */
.cp-row { display: flex; align-items: center; gap: var(--cp-item-gap, 8px); flex-wrap: wrap; }
.cp-row--between { justify-content: space-between; }
.cp-row--center { justify-content: center; }

/* Auto-fit grid — minmax(min(W,100%),1fr) per V4 micro-rule #14. */
.cp-grid { display: grid; gap: var(--cp-card-gap, 18px); }
.cp-grid--cards   { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cp-grid--tight   { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.cp-grid--wide    { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cp-grid > * { min-width: 0; }

/* Section heading group — eyebrow + title + intro with consistent spacing. */
.cp-heading-block { margin-bottom: var(--cp-section-gap, 28px); }
.cp-heading-block > * + * { margin-top: var(--cp-space-xs, 8px); }
.cp-eyebrow {
    display: inline-block;
    font-size: var(--cp-font-size-caption, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-text-muted, rgba(14,22,40,0.65));
    margin: 0;
}
.cp-title {
    margin: 0;
    font-family: var(--cp-font-heading, inherit);
    font-size: var(--cp-font-size-h2, 1.625rem);
    font-weight: 800;
    color: var(--cp-text-heading, var(--cp-text));
    line-height: 1.2;
}
.cp-intro {
    margin: 0;
    color: var(--cp-text-muted, rgba(14,22,40,0.65));
    font-size: var(--cp-font-size-body, 15px);
}

/* ─── Generic ─────────────────────────────────────────────────────── */
.compos-el-empty {
    padding: 24px 16px;
    border: 2px dashed var(--cp-border, rgba(0,0,0,0.10));
    border-radius: var(--cp-radius-md, 12px);
    color: var(--cp-text-muted, #64748b);
    text-align: center;
    font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.compos-el-empty .ti { font-size: 24px; opacity: 0.6; }

.compos-el-locked {
    padding: 14px 16px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: var(--cp-radius-md, 12px);
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.compos-el-locked .ti { color: #d97706; font-size: 18px; }
.compos-el-locked a {
    margin-left: auto;
    padding: 5px 12px;
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}

/* ─── Product Title ───────────────────────────────────────────────── */
.compos-el-product-title {
    font-family: var(--cp-font-heading, inherit);
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.compos-el-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}
.compos-el-product-title a:hover { color: var(--cp-accent, #ff650e); }

/* ─── Product Price ───────────────────────────────────────────────── */
.compos-el-price-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.compos-el-price {
    font-family: var(--cp-font-heading, inherit);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.compos-el-price del {
    color: var(--cp-text-muted, #64748b);
    font-size: 0.7em;
    font-weight: 500;
    text-decoration: line-through;
}
.compos-el-price ins {
    text-decoration: none;
    color: var(--cp-accent, #ff650e);
}
.compos-el-save-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    background: rgba(220,38,38,0.10);
    color: #b91c1c;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.compos-el-save-badge .ti { font-size: 13px; }

/* ─── Product Image ───────────────────────────────────────────────── */
.compos-el-product-image {
    background: var(--cp-elevated, #f8f9fa);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.compos-el-product-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Add to Cart ─────────────────────────────────────────────────── */
.compos-el-atc-form { margin: 0; }
.compos-el-atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
    border: 0;
    border-radius: var(--cp-radius-sm, 8px);
    font-family: var(--cp-font-body, inherit);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.compos-el-atc:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.compos-el-atc.is-full { width: 100%; }
.compos-el-atc.is-disabled,
.compos-el-atc:disabled {
    background: var(--cp-elevated, #e5e7eb);
    color: var(--cp-text-muted, #6b7280);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.compos-el-atc .ti { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .compos-el-atc, .compos-el-product-title a {
        transition: none !important;
        transform: none !important;
    }
}

/* ─── Short Description ──────────────────────────────────────────── */
.compos-el-short-desc {
    font-family: var(--cp-font-body, inherit);
    font-size: 16px;
    color: var(--cp-text-muted, #475569);
    line-height: 1.65;
}
.compos-el-short-desc p:last-child { margin-bottom: 0; }
.compos-el-short-desc--empty,
.compos-el-desc--empty {
    color: var(--cp-text-muted, #94a3b8);
    font-size: 13px;
}

/* ─── Description ────────────────────────────────────────────────── */
.compos-el-desc {
    font-family: var(--cp-font-body, inherit);
    font-size: 15px;
    color: var(--cp-text, #0e1628);
    line-height: 1.7;
}
.compos-el-desc h1, .compos-el-desc h2, .compos-el-desc h3,
.compos-el-desc h4, .compos-el-desc h5, .compos-el-desc h6 {
    font-family: var(--cp-font-heading, inherit);
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

/* ─── Categories ─────────────────────────────────────────────────── */
.compos-el-cats {
    font-family: var(--cp-font-body, inherit);
    color: var(--cp-text-muted, #64748b);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.compos-el-cats a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}
.compos-el-cats a:hover { color: var(--cp-accent, #ff650e); }
.compos-el-cats--chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    text-transform: none; letter-spacing: normal; font-weight: 500;
    font-size: 12px;
}
.compos-el-cat-chip {
    padding: 4px 10px;
    background: var(--cp-elevated, #f3f4f6);
    color: var(--cp-text, #0e1628);
    border-radius: 999px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.compos-el-cat-chip:hover {
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
}

/* ─── Stock ─────────────────────────────────────────────────────── */
.compos-el-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.compos-el-stock-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.compos-el-stock.is-ok  { background: rgba(34,197,94,0.10);  color: #15803d; }
.compos-el-stock.is-low { background: rgba(245,158,11,0.10); color: #92400e; }
.compos-el-stock.is-oos { background: rgba(239,68,68,0.10);  color: #b91c1c; }

/* ─── Product Meta ──────────────────────────────────────────────── */
.compos-el-meta {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 8px 18px;
    font-size: 13px;
    margin: 0;
}
.compos-el-meta dt {
    color: var(--cp-text-muted, #64748b);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    margin: 0;
}
.compos-el-meta dd { margin: 0; color: var(--cp-text, #0e1628); }
.compos-el-meta dd code {
    display: inline-block;
    padding: 2px 8px;
    background: var(--cp-elevated, #f3f4f6);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* ─── Cart Total ────────────────────────────────────────────────── */
.compos-el-cart-total {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.compos-el-cart-total-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cp-text-muted, #64748b);
}
.compos-el-cart-total-amount {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
}
.compos-el-cart-total-count {
    font-size: 12px;
    color: var(--cp-text-muted, #64748b);
}

/* ─── Checkout Button ───────────────────────────────────────────── */
.compos-el-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
    border: 0;
    border-radius: var(--cp-radius-sm, 8px);
    font-family: var(--cp-font-body, inherit);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.compos-el-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    text-decoration: none;
}
.compos-el-checkout-btn.is-full { display: flex; width: 100%; }
.compos-el-checkout-btn .ti { font-size: 18px; }

/* ─── Customer Greeting ─────────────────────────────────────────── */
.compos-el-greeting {
    font-family: var(--cp-font-heading, inherit);
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.compos-el-greeting strong {
    color: var(--cp-accent, #ff650e);
    font-weight: inherit;
}
.compos-el-greeting-actions {
    margin-top: 6px;
    font-size: 13px;
}
.compos-el-greeting-actions a {
    color: var(--cp-text-muted, #64748b);
    text-decoration: none;
    font-weight: 600;
    transition: color 150ms ease;
}
.compos-el-greeting-actions a:hover { color: var(--cp-accent, #ff650e); }

@media (prefers-reduced-motion: reduce) {
    .compos-el-checkout-btn,
    .compos-el-cat-chip {
        transition: none !important;
        transform: none !important;
    }
}

/* ─── Add to Cart Pro ───────────────────────────────────────────── */
.compos-el-atc-pro-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cp-stack-gap, 12px);
}
.compos-el-atc-pro-qty {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    height: var(--cp-btn-min-h, 44px);
    border: 1px solid var(--cp-border, rgba(0,0,0,0.12));
    border-radius: var(--cp-input-radius, var(--cp-radius-sm, 8px));
    overflow: hidden;
    background: var(--cp-surface, #fff);
}
.compos-el-atc-pro-step {
    width: var(--cp-btn-min-h, 44px);
    background: var(--cp-elevated, #fafbfc);
    border: 0;
    color: var(--cp-text, #0e1628);
    font-size: var(--cp-font-size-body, 16px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease;
    padding: 0;
}
.compos-el-atc-pro-step:hover {
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
}
.compos-el-atc-pro-qty-input {
    width: 56px;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--cp-border, rgba(0,0,0,0.10));
    border-right: 1px solid var(--cp-border, rgba(0,0,0,0.10));
    text-align: center;
    background: transparent;
    font-family: var(--cp-font-body, inherit);
    font-size: var(--cp-font-size-body, 14px);
    font-weight: 600;
    color: var(--cp-text);
    -moz-appearance: textfield;
}
.compos-el-atc-pro-qty-input::-webkit-outer-spin-button,
.compos-el-atc-pro-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.compos-el-atc-pro {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-item-gap, 10px);
    min-height: var(--cp-btn-min-h, 50px);
    padding: var(--cp-btn-padding-y, 14px) var(--cp-btn-padding-x, 26px);
    background: var(--cp-btn-primary-bg, var(--cp-accent, #ff650e));
    color: var(--cp-btn-primary-text, var(--cp-text-on-accent, #fff));
    border: 0;
    border-radius: var(--cp-btn-radius, var(--cp-radius-sm, 8px));
    font-family: var(--cp-font-body, inherit);
    font-size: var(--cp-font-size-button, 14px);
    font-weight: var(--cp-btn-font-weight, 700);
    letter-spacing: var(--cp-btn-letter-spacing, 0.06em);
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.compos-el-atc-pro:hover { transform: translateY(-2px); box-shadow: var(--cp-shadow-md, 0 10px 24px rgba(0,0,0,0.18)); background: var(--cp-btn-primary-hover-bg, var(--cp-accent-hover, var(--cp-accent))); }
.compos-el-atc-pro.is-full { width: 100%; }
.compos-el-atc-pro.is-disabled, .compos-el-atc-pro:disabled {
    background: var(--cp-elevated, #e5e7eb) !important;
    color: var(--cp-text-muted, #6b7280) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.compos-el-atc-pro .ti { font-size: calc(var(--cp-font-size-button, 14px) + 4px); }

.compos-el-atc-pro-default,
.compos-el-atc-pro-loading,
.compos-el-atc-pro-success {
    display: inline-flex; align-items: center; gap: var(--cp-item-gap, 8px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.compos-el-atc-pro-loading,
.compos-el-atc-pro-success {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}
.compos-el-atc-pro.is-loading .compos-el-atc-pro-default { opacity: 0; transform: translateY(-8px); }
.compos-el-atc-pro.is-loading .compos-el-atc-pro-loading { opacity: 1; transform: translateY(0); }
.compos-el-atc-pro.is-loading .compos-el-atc-pro-loading .ti { animation: compos-el-spin 1s linear infinite; }
.compos-el-atc-pro.is-success .compos-el-atc-pro-default { opacity: 0; }
.compos-el-atc-pro.is-success .compos-el-atc-pro-success { opacity: 1; transform: translateY(0); }
@keyframes compos-el-spin { to { transform: rotate(360deg); } }

.compos-el-atc-pro-status:not(:empty) {
    margin-top: var(--cp-space-xs, 6px);
    padding: var(--cp-space-xs, 8px) var(--cp-space-sm, 12px);
    background: rgba(var(--cp-status-error-rgb, 239,68,68), 0.10);
    border: 1px solid rgba(var(--cp-status-error-rgb, 239,68,68), 0.30);
    border-radius: var(--cp-radius-sm, 8px);
    font-size: var(--cp-font-size-small, 13px);
    color: var(--cp-status-error, #b91c1c);
}

@media (prefers-reduced-motion: reduce) {
    .compos-el-atc-pro,
    .compos-el-atc-pro-default,
    .compos-el-atc-pro-loading,
    .compos-el-atc-pro-success,
    .compos-el-atc-pro-step { transition: none !important; transform: none !important; animation: none !important; }
}

/* ─── Stock Pro ─────────────────────────────────────────────────── */
.compos-el-stock-pro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.compos-el-stock-pro-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.compos-el-stock-pro.is-ok  { background: rgba(34,197,94,0.10);  color: #15803d; }
.compos-el-stock-pro.is-low { background: rgba(245,158,11,0.10); color: #92400e; }
.compos-el-stock-pro.is-oos { background: rgba(239,68,68,0.10);  color: #b91c1c; }
.compos-el-stock-pro.has-pulse .compos-el-stock-pro-dot {
    animation: compos-el-stock-pulse 1.6s ease-in-out infinite;
}
@keyframes compos-el-stock-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.4; }
}

.compos-el-stock-pro-block {
    display: flex; flex-direction: column; gap: 10px;
}
.compos-el-stock-pro-notify {
    padding: 14px;
    background: var(--cp-elevated, #fafbfc);
    border: 1px solid var(--cp-border, rgba(0,0,0,0.08));
    border-radius: var(--cp-radius-md, 12px);
}
.compos-el-stock-pro-notify label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text);
    margin-bottom: 8px;
}
.compos-el-stock-pro-notify-row {
    display: flex; gap: 6px;
}
.compos-el-stock-pro-notify input[type="email"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--cp-border, rgba(0,0,0,0.12));
    border-radius: var(--cp-radius-sm, 8px);
    font-size: 13px;
    background: var(--cp-surface, #fff);
    color: var(--cp-text);
}
.compos-el-stock-pro-notify input[type="email"]:focus {
    outline: none;
    border-color: var(--cp-accent, #ff650e);
    box-shadow: 0 0 0 3px rgba(255,101,14,0.15);
}
.compos-el-stock-pro-notify button {
    padding: 10px 16px;
    background: var(--cp-accent, #ff650e);
    color: var(--cp-text-on-accent, #fff);
    border: 0;
    border-radius: var(--cp-radius-sm, 8px);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.compos-el-stock-pro-notify button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }

/* ─── Sale Badge Pro ────────────────────────────────────────────── */
.compos-el-sale-badge-pro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.compos-el-sale-badge-pro .ti { font-size: 13px; }
.compos-el-sale-badge-pro.is-pill {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
}
.compos-el-sale-badge-pro.is-corner {
    padding: 8px 16px;
    border-radius: 0 var(--cp-radius-sm, 8px) 0 var(--cp-radius-sm, 8px);
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(220,38,38,0.30);
}
.compos-el-sale-badge-pro.is-banner {
    width: 100%;
    padding: 12px 18px;
    border-radius: var(--cp-radius-md, 12px);
    font-size: 14px;
    justify-content: center;
}

/* ─── Related Products ─────────────────────────────────────────── */
.compos-el-related-heading {
    font-family: var(--cp-font-heading, inherit);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--cp-text-heading, var(--cp-text, #0e1628));
    margin: 0 0 18px;
}
.compos-el-related-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) { .compos-el-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .compos-el-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .compos-el-related-grid { grid-template-columns: 1fr; } }

.compos-el-related-card {
    background: var(--cp-surface, #fff);
    border: 1px solid var(--cp-border, rgba(0,0,0,0.08));
    border-radius: var(--cp-radius-md, 12px);
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease;
}
.compos-el-related-card:hover {
    border-color: var(--cp-border-strong, rgba(0,0,0,0.15));
    transform: translateY(-3px);
}
.compos-el-related-card a { color: inherit; text-decoration: none; display: block; }
.compos-el-related-card img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    background: var(--cp-elevated, #f8f9fa);
}
/* Engine button overlay — wishlist + compare + quickview on hover */
.compos-el-related-media { position: relative; }
.compos-el-related-actions {
    position: absolute; top: 8px; right: 8px;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}
.compos-el-related-card:hover .compos-el-related-actions,
.compos-el-related-card:focus-within .compos-el-related-actions { opacity: 1; transform: none; pointer-events: auto; }
.compos-el-related-actions > * {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; /* intentional — engine button chip */
    border: 1px solid var(--cp-border, rgba(0,0,0,0.08));
    color: var(--cp-text, #0e1628);
    cursor: pointer; padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}
.compos-el-related-actions > *:hover { transform: translateY(-2px); color: var(--cp-accent, #ff650e); }
.compos-el-related-card-link { display: block; }
.compos-el-related-card-body { padding: 14px 16px; }
.compos-el-related-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text-heading, var(--cp-text));
    margin: 0 0 6px;
    line-height: 1.4;
}
.compos-el-related-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--cp-accent, #ff650e);
}

@media (prefers-reduced-motion: reduce) {
    .compos-el-stock-pro.has-pulse .compos-el-stock-pro-dot,
    .compos-el-related-card,
    .compos-el-stock-pro-notify button {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ─── Full-bleed widget container resets ─────────────────────────────
   Operator-flagged 2026-05-09: "the column padding needs to be 0 0 0 0
   explicitly to take properly on these shop widgets (I noticed a
   little gap unless I set it manually in the widget)".

   The Compos Cart / Checkout / Shop / Account / Hero mega-widgets are
   designed to be the WHOLE PAGE — they manage their own internal
   spacing via per-section padding tokens. Default Elementor column /
   container padding (10px/20px) gives operators a small gap on the
   left/right that breaks the full-bleed feel of the hero sections.

   Reset that padding when one of these widgets is the only/first
   child of its column. Uses :has() (Chrome 105+, Safari 15.4+,
   Firefox 121+) — older browsers fall back to operator-set padding=0.
   ──────────────────────────────────────────────────────────────── */
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-shop"]),
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-cart"]),
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-checkout"]),
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-account"]),
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-hero"]),
.elementor-element.elementor-column:has(> .elementor-widget-wrap > .elementor-element.elementor-widget[data-widget_type^="compos-login"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-shop"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-cart"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-checkout"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-account"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-hero"]),
.e-con-inner:has(> .elementor-element.elementor-widget[data-widget_type^="compos-login"]) {
    padding: 0 !important;
}
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-cart"])),
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-checkout"])),
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-shop"])),
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-account"])),
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-hero"])),
.elementor-section:has(> .elementor-container > .elementor-column:has(.elementor-widget[data-widget_type^="compos-login"])) {
    padding: 0 !important;
}