/* 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 [data-cmsc-done]:hover .cmsc-actions .cmsc-icon,
html body .cmsc-actions:hover .cmsc-icon,
html body .cmsc-actions .cmsc-icon:focus-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

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;
}

/* ── v1.1.7: bar normalization ─────────────────────────────
   Captured originals arrive wearing their theme's padding,
   margins and font styles. Strip everything: every icon in
   the bar is the same disc, same gap, same center. */
html body .cmsc-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;}
html body .cmsc-actions .cmsc-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    border-radius:50% !important;
    font-size:0 !important;
    letter-spacing:0 !important;
    text-indent:0 !important;}
html body .cmsc-actions .cmsc-icon > *{
    margin:0 !important;
    padding:0 !important;}
html body .cmsc-actions .cmsc-icon svg{
    width:18px !important;
    height:18px !important;
    display:block !important;
    flex:0 0 auto !important;}
@media (hover: none){
    html body .cmsc-actions{
        flex-direction:row !important;
        gap:8px !important;}
    html body .cmsc-actions .cmsc-icon{
        width:36px !important;height:36px !important;
        min-width:36px !important;min-height:36px !important;
        max-width:36px !important;max-height:36px !important;}
}


/* ── v1.1.8: child-agnostic locks ──────────────────────────
   Captured theme elements sometimes keep wrappers that dodge
   the .cmsc-icon locks; centering different widths reads as a
   diagonal stagger and can clip at the card edge. Lock every
   direct child of the bar to the disc, full stop. */
html body .cmsc-actions > *{
    width:42px !important;height:42px !important;
    min-width:42px !important;min-height:42px !important;
    max-width:42px !important;max-height:42px !important;
    margin:0 !important;padding:0 !important;
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    overflow:hidden !important;
    border-radius:50% !important;}
@media (hover: none){
    html body .cmsc-actions > *{
        width:36px !important;height:36px !important;
        min-width:36px !important;min-height:36px !important;
        max-width:36px !important;max-height:36px !important;}
}


/* ── v1.1.9: THE fix — flex children must be static ────────
   Captured theme buttons (e.g. .fnx-qv-btn) carry their own
   position:absolute card-corner rules; absolute children
   escape flex and float on their own axis. Inside the bar,
   position is the bar's business alone. */
html body .cmsc-actions > *,
html body .cmsc-actions .cmsc-icon{
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    float: none !important;}

/* ── v1.3.0: grid layout switcher ── */
html body ul.products.cmsc-cols-2,
html body ul.products.cmsc-cols-3,
html body ul.products.cmsc-cols-4,
html body ul.products.cmsc-cols-5{
    display:grid !important;
    gap:clamp(14px,2vw,26px) !important;
    width:100%;margin-left:0;margin-right:0;}
html body ul.products.cmsc-cols-2{grid-template-columns:repeat(2,1fr) !important;}
html body ul.products.cmsc-cols-3{grid-template-columns:repeat(3,1fr) !important;}
html body ul.products.cmsc-cols-4{grid-template-columns:repeat(4,1fr) !important;}
html body ul.products.cmsc-cols-5{grid-template-columns:repeat(5,1fr) !important;}
html body ul.products[class*="cmsc-cols-"] li.product{
    width:100% !important;margin:0 !important;float:none !important;}
@media (max-width:1100px){
    html body ul.products.cmsc-cols-5{grid-template-columns:repeat(4,1fr) !important;}}
@media (max-width:900px){
    html body ul.products.cmsc-cols-4,
    html body ul.products.cmsc-cols-5{grid-template-columns:repeat(3,1fr) !important;}}
@media (max-width:640px){
    html body ul.products[class*="cmsc-cols-"]{grid-template-columns:repeat(2,1fr) !important;}}
.cmsc-gridsw{display:inline-flex;align-items:stretch;gap:0;margin:0 0 18px 14px;
    vertical-align:middle;font-family:'Jost',sans-serif;
    border:1px solid #ddd6c8;background:#fff;}
.cmsc-gridsw-lbl{display:inline-flex;align-items:center;font-size:10px;font-weight:500;
    letter-spacing:.24em;text-transform:uppercase;color:#8a8578;
    padding:0 12px;border-right:1px solid #ddd6c8;background:#faf7f1;}
.cmsc-gridsw button{width:36px;height:36px;border:0;background:#fff;
    color:#6f6a60;font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
    cursor:pointer;transition:all .2s ease;padding:0;line-height:1;
    border-right:1px solid #ddd6c8;}
.cmsc-gridsw button:last-child{border-right:0;}
.cmsc-gridsw button:hover{color:var(--cmbc-accent,#C0A062);background:#faf7f1;}
.cmsc-gridsw button.is-on{background:var(--cmbc-accent,#C0A062);color:#141210;
    box-shadow:inset 0 0 0 1px var(--cmbc-accent,#C0A062);}
@media (max-width:640px){
    .cmsc-gridsw button[data-cols="4"],
    .cmsc-gridsw button[data-cols="5"]{display:none;}}