/* Codemola Shop Cards v1.1.3
   Icon actions on product cards + quick-view modal style guards.
   Palette: black · ivory #faf7f1 · gold #c9a35c */

/* ── Action bar: bottom-right over the product image ────────── */

.cmsc-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

/* ── Icon buttons ───────────────────────────────────────────── */
/* `html body` prefix + !important geometry: the theme's shop
   archive styles its .button elements aggressively (dark squares) —
   these rules guarantee the SAME white-circle look on every
   template: homepage, shop, categories, related rails. */

html body .cmsc-actions .cmsc-icon {
    position: relative;
    width: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #171412 !important;
    border: none !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .18) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
    overflow: visible !important;

    /* Hidden until the card is hovered — staggered entrance */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease,
                background .25s ease, color .25s ease;
}

/* Theme icon-font pseudo-elements must not leak into the circle
   (the tooltip is ::after and re-declared below) */
html body .cmsc-actions .cmsc-icon::before { display: none !important; }

html body .cmsc-actions .cmsc-icon:nth-child(1) { transition-delay: 0s; }
html body .cmsc-actions .cmsc-icon:nth-child(2) { transition-delay: .06s; }
html body .cmsc-actions .cmsc-icon:nth-child(3) { transition-delay: .12s; }

html body .cmsc-card:hover .cmsc-actions .cmsc-icon,
html body li.product:hover .cmsc-actions .cmsc-icon,
html body .product.type-product:hover .cmsc-actions .cmsc-icon,
html body .cmsc-actions:hover .cmsc-icon,
html body .cmsc-actions .cmsc-icon:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

html body .cmsc-actions .cmsc-icon:hover {
    background: #171412 !important;
    color: #fff !important;
}

html body .cmsc-actions .cmsc-icon:focus-visible {
    outline: 2px solid #c9a35c;
    outline-offset: 2px;
}

.cmsc-icon__glyph {
    display: inline-flex;
    line-height: 0;
}

/* ── Tooltip (from data-cmsc-label) ─────────────────────────── */

html body .cmsc-actions .cmsc-icon::after {
    content: attr(data-cmsc-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: #171412;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

html body .cmsc-actions .cmsc-icon:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.cmsc-actions.cmsc-no-tips .cmsc-icon::after { display: none; }

/* ── Busy / done states (ajax add to cart) ──────────────────── */

.cmsc-icon .cmsc-icon__done { display: none; line-height: 0; }

.cmsc-icon.cmsc-busy .cmsc-icon__glyph {
    animation: cmsc-spin .7s linear infinite;
}

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

.cmsc-icon.cmsc-done {
    background: #2e7d4f !important;
    color: #fff !important;
}

.cmsc-icon.cmsc-done .cmsc-icon__glyph { display: none; }
.cmsc-icon.cmsc-done .cmsc-icon__done  { display: inline-flex; }

/* Woo's "View cart" link that appears after adding — make it a
   small pill under the icons instead of raw text */
.cmsc-actions .added_to_cart.cmsc-viewcart {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #c9a35c;
    color: #171412;
    padding: 7px 12px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
}

/* Hide loop elements we replaced visually but couldn't move (e.g.
   theme duplicate bars) — anything matching the old text-bar look
   inside a processed card */
li.product[data-cmsc-done] .cmsc-actions ~ .button:not(.cmsc-icon) {
    display: none !important;
}

/* ── Touch devices: compact horizontal row, always visible ──── */

@media (hover: none) {
    html body .cmsc-actions {
        flex-direction: row;
        right: 8px;
        bottom: 8px;
        gap: 6px;
    }
    html body .cmsc-actions .cmsc-icon {
        opacity: 1;
        transform: none;
        width: 34px !important;
        height: 34px !important;
    }
    html body .cmsc-actions .cmsc-icon::after { display: none; }
    html body .cmsc-actions .added_to_cart.cmsc-viewcart {
        font-size: 9.5px;
        padding: 6px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Quick-view modal style guards
   The modal renders product-page blocks on pages where their
   plugins' CSS is scoped out (body.single-product) or not enqueued
   — unsized SVGs blow up to natural size (the giant truck). These
   guards size them anywhere the modal scope appears.
   ═══════════════════════════════════════════════════════════════ */

.cmqv-scope .cmpux-delivery svg,
.cmqv-scope .cmpp-pickup__check,
.cmqv-scope .cmpp-assure__icon {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex: 0 0 auto;
}

/* Blunt safety net: NO svg inside the quick-view scope may exceed
   48px — any future unsized icon degrades gracefully instead of
   dominating the modal */
.cmqv-scope svg {
    max-width: 48px;
    max-height: 48px;
}

.cmqv-scope .cmpux-delivery {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f5f2ec;
    border: 1px solid #e6e0d4;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: .9rem;
}

.cmqv-scope .cmpp-pickup {
    background: #f5f2ec;
    border: 1px solid #e6e0d4;
    padding: 12px 14px;
    margin-top: 14px;
}

.cmqv-scope .cmpp-pickup__head { display: flex; gap: 10px; }
.cmqv-scope .cmpp-pickup__lines p { margin: 0 0 4px; font-size: .88rem; }

.cmqv-scope .cmpp-size-chat { font-size: .9rem; }
.cmqv-scope .cmpp-size-chat__link { color: #8a2b3a; font-weight: 600; }

.cmqv-scope .cmpp-secure,
.cmqv-scope .cmpp-assure {
    font-size: .85rem;
    color: #6f6a60;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0 0;
}