/* ==========================================================================
   11-interactions.css

   Interaction states added after the coverage audit against the captured
   reference storefront:
     - newsletter / promotional popup (first-visit, time-delayed)
     - predictive search suggestion dropdown
     - mobile footer accordions
     - explicit out-of-stock / unavailable-variation presentation
     - hover / focus / expanded / error states worth documenting

   The reference storefront has a .newsletter-popup, a .quick-search dropdown
   and a .compare-widget. It has NO age gate and NO cookie-consent banner, so
   neither is reproduced here.
   ========================================================================== */

/* ------------------------------------------------- newsletter popup ------ */
.scs-popup {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--scs-4);
    background: rgba(12, 17, 29, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--scs-t), visibility var(--scs-t);
}
.scs-popup.is-open { opacity: 1; visibility: visible; }

.scs-popup__panel {
    position: relative;
    width: min(100%, 660px);
    background: var(--scs-surface);
    border-radius: var(--scs-radius-lg);
    box-shadow: var(--scs-shadow-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    transform: translateY(12px) scale(.98);
    transition: transform var(--scs-t);
}
.scs-popup.is-open .scs-popup__panel { transform: none; }
@media (min-width: 700px) {
    .scs-popup__panel { grid-template-columns: 220px minmax(0, 1fr); }
}

.scs-popup__media { display: none; background: linear-gradient(150deg, #2b1a4a, var(--scs-accent)); }
@media (min-width: 700px) { .scs-popup__media { display: block; } }

.scs-popup__body { padding: var(--scs-8) var(--scs-6); }
.scs-popup__eyebrow {
    font-size: var(--scs-fs-xs); font-weight: var(--scs-fw-bold);
    letter-spacing: .12em; text-transform: uppercase; color: var(--scs-accent);
    display: block; margin-bottom: var(--scs-2);
}
.scs-popup__title { font-size: var(--scs-fs-lg); margin: 0 0 var(--scs-2); }
.scs-popup__text { font-size: var(--scs-fs-sm); color: var(--scs-ink-2); margin: 0 0 var(--scs-5); }
.scs-popup__form { display: grid; gap: var(--scs-2); }
@media (min-width: 480px) { .scs-popup__form { grid-template-columns: minmax(0, 1fr) auto; } }
.scs-popup__decline {
    margin-top: var(--scs-3);
    background: none; border: 0; padding: 0;
    font-size: var(--scs-fs-xs); color: var(--scs-ink-3);
    text-decoration: underline; cursor: pointer;
}
.scs-popup__close {
    position: absolute; top: var(--scs-2); right: var(--scs-2);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--scs-ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.scs-popup__close:hover { background: var(--scs-surface-3); }

/* --------------------------------------------- predictive search --------- */
.scs-search { position: relative; }

.scs-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: var(--scs-z-mega);
    background: var(--scs-surface);
    border: 1px solid var(--scs-line);
    border-radius: var(--scs-radius);
    box-shadow: var(--scs-shadow-lg);
    overflow: hidden;
    display: none;
    max-height: min(70vh, 460px);
    overflow-y: auto;
}
.scs-suggest.is-open { display: block; }

.scs-suggest__status {
    padding: var(--scs-3) var(--scs-4);
    font-size: var(--scs-fs-xs);
    color: var(--scs-ink-3);
    border-bottom: 1px solid var(--scs-line);
}
.scs-suggest__list { list-style: none; margin: 0; padding: 0; }
.scs-suggest__item a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--scs-3);
    align-items: center;
    padding: var(--scs-2) var(--scs-4);
    border-bottom: 1px solid var(--scs-line);
}
.scs-suggest__item a:hover,
.scs-suggest__item.is-active a { background: var(--scs-accent-soft); }
.scs-suggest__thumb { width: 48px; height: 48px; border-radius: var(--scs-radius-sm); object-fit: cover; background: var(--scs-surface-3); }
.scs-suggest__name { font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-medium); line-height: 1.35; }
.scs-suggest__price { font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-bold); white-space: nowrap; }
.scs-suggest__all {
    display: block; padding: var(--scs-3) var(--scs-4);
    text-align: center; font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-bold); color: var(--scs-accent);
}
.scs-suggest__all:hover { background: var(--scs-surface-3); }

/* Loading shimmer, mirroring the reference's .quick-search-loader. */
.scs-suggest__loader { display: flex; gap: var(--scs-2); padding: var(--scs-4); }
.scs-suggest__loader span {
    height: 10px; flex: 1 1 auto; border-radius: var(--scs-radius-pill);
    background: linear-gradient(90deg, var(--scs-surface-3), var(--scs-line), var(--scs-surface-3));
    background-size: 200% 100%;
    animation: scs-shimmer 1.1s linear infinite;
}
@keyframes scs-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scs-suggest__loader span { animation: none; } }

/* --------------------------------------------- footer accordions --------- */
.scs-footer__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--scs-3);
    background: none;
    border: 0;
    padding: var(--scs-3) 0;
    color: #fff;
    font: var(--scs-fw-bold) var(--scs-fs-xs)/1.4 var(--scs-font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.scs-footer__toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--scs-t); }
.scs-footer__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

@media (max-width: 899px) {
    /* Below the desktop breakpoint the footer columns collapse. */
    .scs-footer__cols { grid-template-columns: 1fr; gap: 0; }
    .scs-footer__col { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .scs-footer__col .scs-footer__title { display: none; }
    .scs-footer__toggle { display: flex; }
    .scs-footer__col .scs-footer__list {
        overflow: hidden;
        max-height: 0;
        transition: max-height var(--scs-t), padding var(--scs-t);
        padding-bottom: 0;
    }
    .scs-footer__col.is-open .scs-footer__list {
        max-height: 520px;
        padding-bottom: var(--scs-4);
    }
    /* The brand column is never collapsed. */
    .scs-footer__col--brand .scs-footer__list { max-height: none; }
}

/* --------------------------------- stock / unavailable variation --------- */
.scs-stock {
    display: inline-flex; align-items: center; gap: var(--scs-2);
    font-size: var(--scs-fs-sm); font-weight: var(--scs-fw-medium);
}
.scs-stock::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.scs-stock--in { color: var(--scs-success); }
.scs-stock--low { color: var(--scs-warning); }
.scs-stock--out { color: var(--scs-ink-3); }

/* Sold-out card treatment. */
li.product.outofstock .scs-card__media { position: relative; }
li.product.outofstock .scs-card__media::after {
    content: "Sold out";
    position: absolute; inset: auto 0 0 0;
    padding: var(--scs-2);
    background: rgba(16, 24, 40, .78);
    color: #fff;
    font-size: var(--scs-fs-xs);
    font-weight: var(--scs-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
li.product.outofstock .scs-card__media img { filter: grayscale(.55); opacity: .8; }

.scs-badge--out { background: var(--scs-surface-3); color: var(--scs-ink-3); }

/* WooCommerce disables the variation add-to-cart button when a combination is
   unavailable; make that unmistakable rather than a subtly greyed control. */
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled,
.scs-buy__add:disabled {
    background: var(--scs-surface-3);
    color: var(--scs-ink-3);
    cursor: not-allowed;
    border: 1px solid var(--scs-line-strong);
}
.woocommerce div.product .stock.out-of-stock {
    display: inline-flex; align-items: center; gap: var(--scs-2);
    padding: var(--scs-2) var(--scs-3);
    border: 1px solid var(--scs-line-strong);
    border-radius: var(--scs-radius);
    background: var(--scs-surface-3);
    color: var(--scs-ink-2);
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-medium);
}
/* Woo's "unavailable combination" message. */
.woocommerce div.product .woocommerce-variation-availability .stock {
    font-size: var(--scs-fs-sm);
}

/* ------------------------------------------- documented focus states ----- */
.scs-nav__link:focus-visible,
.scs-suggest__item a:focus-visible,
.scs-footer__toggle:focus-visible {
    outline: 2px solid var(--scs-accent);
    outline-offset: -2px;
}
/* Keyboard users get the mega panel on focus, not only on hover. */
.scs-nav__item:focus-within > .scs-mega {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* ------------------------------------------------------ error states ----- */
.scs-field-error {
    display: block;
    margin-top: var(--scs-1);
    font-size: var(--scs-fs-xs);
    color: var(--scs-sale);
}
.scs-input[aria-invalid="true"],
.woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: var(--scs-sale);
    box-shadow: 0 0 0 3px var(--scs-sale-soft);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
    border-color: var(--scs-success);
}