/* =============================================================================
   Verona Organic Slipcovers — Atelier visual variation selectors
   Scope: rendered only on the slipcover product page (loader checks product id).

   Design intent: "tactile gallery cards" — refined, calm, generous negative
   space, monochrome charcoal line-art, plum (#A173B2) for selection accent.
   Cards always visible; fabric uses compact segmented pills with bidirectional
   sync against the color carousel.
   ============================================================================= */

:root {
    --srvs-bg:           #fbfafc;
    --srvs-card:         #ffffff;
    --srvs-text:         #2c2a35;
    --srvs-text-muted:   #7c7b8c;
    --srvs-border:       #e5e2ea;
    --srvs-border-hover: #c9c2d4;
    --srvs-plum:         #a173b2;
    --srvs-plum-soft:    rgba(161, 115, 178, 0.08);
    --srvs-plum-glow:    rgba(161, 115, 178, 0.18);
    --srvs-radius:       10px;
    --srvs-ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Container behavior --------------------------------------------------
   Force the WC variations table to behave like a block container so it
   respects the parent width on narrow viewports.

   `float: none` here is load-bearing: the savvy-rest child theme has a rule
   that floats odd-numbered variation rows right at 48% width (an old
   2-column attribute layout). Without this reset, every other row collapses
   into the right column and the next row overlaps at the same Y position. */
body.srvs-active .variations,
body.srvs-active .variations tbody,
body.srvs-active .variations tr,
body.srvs-active .variations > tbody > tr > td,
body.srvs-active .variations > tbody > tr > th {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    float: none;
}

/* Hide WC's native UI on rows we own */
body.srvs-active .variations tr.srvs-row .select2-container,
body.srvs-active .variations tr.srvs-row select.select2-hidden-accessible,
body.srvs-active .variations tr.srvs-row > td > select,
body.srvs-active .variations tr.srvs-row > th.label,
body.srvs-active .variations tr.srvs-row > th {
    display: none !important;
}
body.srvs-active .variations tr.srvs-row > td.value {
    padding: 0;
}
body.srvs-active .variations tr.srvs-row {
    margin-bottom: 0.7rem;
}

/* ----- Row header (label + chosen value, hairline divider) --------------- */
.srvs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--srvs-border);
}
.srvs-header__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--srvs-text);
    margin: 0;
}
.srvs-header__chosen {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--srvs-text-muted);
}

/* Note: the `.srvs-card`, `.srvs-grid`, `.srvs-fabric-pill*` and `.srvs-header*`
   rules below are intentionally NOT scoped under `body.srvs-active`. The mu-plugin
   loader (savvyrest-slipcover-product.php) only enqueues this stylesheet on the
   slipcover product page, so the rules cannot affect other pages. If we ever
   share this CSS more broadly, prefix these selectors with `body.srvs-active`. */
/* ----- Card (size / arm / option grids) --------------------------------- */
.srvs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 0.45rem 0.4rem 0.35rem;
    background: var(--srvs-card);
    border: 1px solid var(--srvs-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 180ms var(--srvs-ease),
                box-shadow   180ms var(--srvs-ease),
                background   180ms var(--srvs-ease);
    user-select: none;
    text-align: center;
    min-height: 66px;
}
.srvs-card:hover {
    border-color: var(--srvs-border-hover);
}
.srvs-card.is-selected {
    border-color: var(--srvs-plum);
    background: var(--srvs-plum-soft);
    box-shadow: 0 0 0 1px var(--srvs-plum);
}
.srvs-card.is-selected::before {
    content: '';
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--srvs-plum);
}
.srvs-card.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.6);
}
.srvs-card svg {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-height: 36px;
}
.srvs-card__name {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--srvs-text);
    line-height: 1.15;
    margin: 0;
}

.srvs-grid {
    display: grid;
    gap: 0.4rem;
}
.srvs-grid--size      { grid-template-columns: repeat(4, 1fr); }
.srvs-grid--arm       { grid-template-columns: repeat(2, 1fr); }
.srvs-grid--arm       .srvs-card { min-height: 68px; }
.srvs-grid--option    { grid-template-columns: repeat(3, 1fr); }
.srvs-grid--option    .srvs-card { min-height: 74px; }
.srvs-grid--option    .srvs-card svg { max-height: 38px; }

/* Verona furniture-only grids: cushion firmness (3 cross-sections),
 * slipcover-state (4 sofa-overlay variants), delivery (2 service tiers). */
.srvs-grid--firmness  { grid-template-columns: repeat(3, 1fr); }
.srvs-grid--firmness  .srvs-card { min-height: 74px; }
.srvs-grid--firmness  .srvs-card svg { max-height: 38px; }
.srvs-grid--slipcover { grid-template-columns: repeat(4, 1fr); }
.srvs-grid--slipcover .srvs-card { min-height: 78px; }
.srvs-grid--slipcover .srvs-card svg { max-height: 38px; }
/* Ottoman's slipcover is yes/no (2 options), not the Sofa's 4-option set */
.srvs-grid--ottoman-slipcover { grid-template-columns: repeat(2, 1fr); }
.srvs-grid--ottoman-slipcover .srvs-card { min-height: 78px; }
.srvs-grid--ottoman-slipcover .srvs-card svg { max-height: 38px; }
.srvs-grid--delivery  { grid-template-columns: repeat(2, 1fr); }
.srvs-grid--delivery  .srvs-card { min-height: 68px; }

/* ----- Fabric pills (compact segmented control) ------------------------- */
.srvs-fabric-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.srvs-fabric-pill {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    background: var(--srvs-card);
    border: 1px solid var(--srvs-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 180ms var(--srvs-ease),
                background   180ms var(--srvs-ease);
    min-height: 38px;
    user-select: none;
}
.srvs-fabric-pill:hover {
    border-color: var(--srvs-border-hover);
}
.srvs-fabric-pill.is-selected {
    border-color: var(--srvs-plum);
    background: var(--srvs-plum-soft);
    box-shadow: 0 0 0 1px var(--srvs-plum);
}
.srvs-fabric-pill__thumb {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--srvs-border);
    background: #f4eeed;
    overflow: hidden;
    flex: 0 0 auto;
}
.srvs-fabric-pill__thumb svg { display: block; width: 100%; height: 100%; }
.srvs-fabric-pill__name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--srvs-text);
    line-height: 1.1;
}
.srvs-fabric-pill__count {
    font-size: 0.68rem;
    color: var(--srvs-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ----- Color row polish (wraps the existing iconic-was carousel) -------- */
body.srvs-active .variations tr:not(.srvs-row) > th.label {
    display: block;
    padding-bottom: 0.2rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--srvs-border);
}
body.srvs-active .variations tr:not(.srvs-row) > th.label label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
body.srvs-active .variations tr:not(.srvs-row) > th.label .iconic-was-attr-label-text {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--srvs-text);
}
body.srvs-active .variations tr:not(.srvs-row) > th.label .iconic-was-attr-label-sep {
    display: none;
}
body.srvs-active .variations tr:not(.srvs-row) > th.label .iconic-was-chosen-attribute {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--srvs-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
body.srvs-active .variations tr:not(.srvs-row) > td.value {
    padding-top: 0;
    padding-bottom: 0;
}

/* ----- Ottoman: hide arm + option rows entirely when ottoman selected --- */
body.srvs-active .variations tr.srvs-row.is-hidden-ottoman {
    display: block;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
    transition: opacity 240ms var(--srvs-ease),
                max-height 240ms var(--srvs-ease),
                margin 240ms var(--srvs-ease);
}
body.srvs-active .variations tr.srvs-row {
    opacity: 1;
    max-height: 600px;
    transition: opacity 240ms var(--srvs-ease),
                max-height 240ms var(--srvs-ease);
}

/* ----- Reset link -------------------------------------------------------- */
body.srvs-active .reset_variations {
    font-size: 0.74rem;
    color: var(--srvs-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.srvs-active .reset_variations:hover {
    color: var(--srvs-plum);
}

/* ----- Breathing room below the FAQ accordion --------------------------- */
body.srvs-active .summary > .faq-wrapper {
    margin-bottom: 2.5rem;
}

/* ----- WC gallery overflow clip on narrow viewports --------------------
 * Do NOT include .woocommerce-product-gallery__wrapper. That figure is
 * FlexSlider's slide track and receives an inline width: <count*100>%
 * (here 600%) so the floated slides can sit side-by-side. Capping it
 * at 100% collapses the track to viewport width, stacks slides
 * vertically, and the translate3d carousel shifts the active slide
 * off-screen — thumbs 2/3 then render a blank main image. The outer
 * .flex-viewport already has overflow: hidden, so clipping the wrapper
 * here is also redundant. */
body.srvs-active .woocommerce-product-gallery {
    overflow: hidden;
    max-width: 100%;
}

/* ===== Responsive ====================================================== */

@media (max-width: 600px) {
    .srvs-grid--size,
    .srvs-grid--option,
    .srvs-grid--firmness,
    .srvs-grid--slipcover {
        grid-template-columns: repeat(2, 1fr);
    }
    .srvs-grid--option   .srvs-card:nth-child(3):last-child,
    .srvs-grid--firmness .srvs-card:nth-child(3):last-child {
        grid-column: 1 / -1;
    }
    .srvs-card {
        min-height: 64px;
        padding: 0.4rem 0.35rem 0.35rem;
    }
    .srvs-grid--arm      .srvs-card { min-height: 64px; }
    .srvs-grid--option   .srvs-card { min-height: 70px; }
    .srvs-grid--firmness .srvs-card { min-height: 70px; }
    .srvs-grid--slipcover .srvs-card { min-height: 74px; }
    .srvs-grid--delivery .srvs-card { min-height: 64px; }
    .srvs-fabric-pill {
        flex: 1 0 calc(50% - 0.2rem);
        justify-content: flex-start;
        padding: 0.35rem 0.6rem;
        min-height: 44px;
    }
    .srvs-fabric-pill:nth-child(3):last-child {
        flex: 1 0 100%;
    }
}

@media (max-width: 380px) {
    body.srvs-active .variations tr.srvs-row {
        margin-bottom: 0.55rem;
    }
    .srvs-card {
        padding: 0.35rem 0.3rem 0.3rem;
        min-height: 60px !important;
    }
    .srvs-grid--option .srvs-card { min-height: 66px !important; }
    .srvs-card svg {
        max-height: 32px;
    }
    .srvs-card__name {
        font-size: 0.7rem;
    }
    .srvs-header {
        flex-wrap: wrap;
        gap: 0.15rem;
        padding-bottom: 0.15rem;
        margin-bottom: 0.2rem;
    }
    .srvs-header__label {
        font-size: 0.64rem;
        letter-spacing: 0.06em;
    }
    .srvs-header__chosen {
        font-size: 0.72rem;
        flex-basis: 100%;
        margin-top: -0.1rem;
    }
    .srvs-fabric-pill__name { font-size: 0.76rem; }
    .srvs-fabric-pill__count { font-size: 0.64rem; }
}