/* ==========================================================================
   FEWSET — Product modal (theme-owned quick variation picker)
   Markup built by js/product-modal.js. Tokens from style.css :root.
   Image left + picker right on desktop; stacked on mobile.
   ========================================================================== */

html.fewset-pm-open { overflow: hidden; }

.fewset-pm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 26, 26, .55);
    animation: fewsetPmFade .18s ease both;
}
@keyframes fewsetPmFade { from { opacity: 0; } to { opacity: 1; } }

.fewset-pm {
    position: relative;
    width: min(880px, 100%);
    max-height: calc(100dvh - 48px);
    background: var(--surface, #fff);
    color: var(--on-surface, #1a1a1a);
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
    animation: fewsetPmRise .22s var(--ease-luxe, cubic-bezier(.25,.1,.25,1)) both;
}
@keyframes fewsetPmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.fewset-pm__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: calc(100dvh - 48px);
}

/* media */
.fewset-pm__media {
    position: relative;
    background: var(--surface-dim, #f0f0ed);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.fewset-pm__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease;
}

/* info column */
.fewset-pm__info {
    display: flex;
    flex-direction: column;
    padding: 26px 28px 24px;
    overflow-y: auto;
    min-width: 0;
}
.fewset-pm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.fewset-pm__eyebrow {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-surface-variant, #777);
}
/* floating close — always visible, top-right of the modal. No background:
   just the glyph, with a soft light halo so it stays legible over the photo
   on mobile (where it sits over the image). */
.fewset-pm__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    appearance: none;
    border: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #1a1a1a;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s ease, transform .15s ease;
}
/* Never let the GeneratePress button hover/focus styling paint a gray box —
   the modal auto-focuses this button on open, which is why it showed on mobile. */
.fewset-pm__close:hover,
.fewset-pm__close:focus { opacity: 1; background: none; color: #1a1a1a; }
.fewset-pm__close:hover { transform: scale(1.06); }
.fewset-pm__close:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

.fewset-pm__name {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.fewset-pm__price {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 600;
}
.fewset-pm__price del { opacity: .45; font-weight: 400; margin-right: 6px; }
.fewset-pm__price ins { text-decoration: none; color: #D0021B; }

/* gift-with-purchase band (inc/product-gifts.php payload) — compact pair:
   small photo with the black present tag + name + struck price */
.fewset-pm__gift {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px 9px 9px;
    border: 1px solid var(--neutral-200, #e3e3de);
}
.fewset-pm__gift[hidden] { display: none; }
.fewset-pm__gift-media {
    position: relative;
    flex: 0 0 38px;
    height: 48px;
    overflow: hidden;
    background: var(--surface-dim, #f0f0ed);
}
.fewset-pm__gift-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fewset-pm__gift-badge {
    position: absolute;
    right: 0; bottom: 0;
    width: 15px; height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #fff;
    font-style: normal;
}
.fewset-pm__gift-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fewset-pm__gift-eyebrow {
    font-size: 8.5px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--on-surface-variant, #777);
}
.fewset-pm__gift-name { font-size: 12px; font-weight: 600; line-height: 1.3; color: #1a1a1a; }
.fewset-pm__gift-price { font-size: 11px; color: #1a1a1a; }
.fewset-pm__gift-price del { opacity: .5; margin-right: 3px; font-weight: 400; }
.fewset-pm__gift-price strong { font-weight: 600; color: #D0021B; }

/* attributes — each group separated by a hairline rule (matches the mockup) */
.fewset-pm__attrs { margin-top: 18px; display: flex; flex-direction: column; }
.fewset-pm__attr {
    padding: 18px 0;
    border-top: 1px solid var(--neutral-200, #e3e3de);
}
.fewset-pm__attr:last-child { padding-bottom: 4px; }
.fewset-pm__attr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-surface-variant, #777);
    margin-bottom: 8px;
}
.fewset-pm__opts { display: flex; flex-wrap: wrap; gap: 8px; }

.fewset-pm__opt {
    appearance: none;
    cursor: pointer;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(26, 26, 26, .18);
    background: var(--surface, #fff);
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface, #1a1a1a);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fewset-pm__opt:hover { border-color: var(--on-surface, #1a1a1a); }
.fewset-pm__opt.is-selected { background: var(--primary, #1a1a1a); border-color: var(--primary, #1a1a1a); color: var(--on-primary, #fff); }
.fewset-pm__opt[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* unavailable for the current selection (no in-stock variation) — shown,
   marked, but not selectable so a customer can't pick a dead combo. */
.fewset-pm__opt--out {
    cursor: not-allowed;
    color: var(--neutral-400, #999);
    border-color: rgba(26, 26, 26, .10);
    text-decoration: line-through;
    background:
        linear-gradient(to top left, transparent calc(50% - 1px), rgba(26,26,26,.18) 50%, transparent calc(50% + 1px)),
        var(--surface, #fff);
}
.fewset-pm__opt--out:hover { border-color: rgba(26, 26, 26, .10); }
.fewset-pm__opt--out.is-color {
    text-decoration: none;
    opacity: .5;
    background: none;
}
.fewset-pm__opt--out.is-color .fewset-pm__swatch {
    position: relative;
}
.fewset-pm__opt--out.is-color .fewset-pm__swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(26,26,26,.55) 50%, transparent calc(50% + 1px));
}

/* colour swatches */
.fewset-pm__opt.is-color {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 50%;
    border: 2px solid transparent;
}
.fewset-pm__opt.is-color:hover { border-color: rgba(26, 26, 26, .28); }
.fewset-pm__opt.is-color.is-selected { background: transparent; border-color: var(--primary, #1a1a1a); }
.fewset-pm__swatch {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* footer */
.fewset-pm__msg {
    margin-top: 14px;
    font-size: 12px;
    color: #9b3b3b;
}
/* Both actions sit on ONE line: "Įdėti į krepšelį" (filled) + "Eiti į produktą"
   (outline), equal width. */
.fewset-pm__foot {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-200, #e3e3de);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}
.fewset-pm__cta,
.fewset-pm__full {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 12px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
}
.fewset-pm__cta {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--primary, #1a1a1a);
    background: var(--primary, #1a1a1a);
    color: var(--on-primary, #fff);
    transition: background .18s ease, opacity .18s ease;
}
/* Hold the solid fill + white label on hover (the global plain-button reset in
   style.css would otherwise strip the background and hide the text). */
.fewset-pm__cta:hover { background: var(--primary, #1a1a1a); color: var(--on-primary, #fff); }
.fewset-pm__cta:hover:not([disabled]) { background: var(--primary-hover, #000); }
.fewset-pm__cta[disabled] { opacity: .35; cursor: default; }
.fewset-pm__cta[hidden] { display: none; }
.fewset-pm__cta.is-added { background: var(--success, #4a6741); border-color: var(--success, #4a6741); }

/* "Eiti į produktą" — secondary outline button, paired on the same row. */
.fewset-pm__full {
    gap: 6px;
    border: 1px solid var(--primary, #1a1a1a);
    background: transparent;
    color: var(--on-surface, #1a1a1a);
    transition: background .15s ease, color .15s ease, gap .15s ease;
}
.fewset-pm__full:hover { background: var(--primary, #1a1a1a); color: var(--on-primary, #fff); gap: 9px; }
.fewset-pm__full-arr { font-weight: 400; transition: transform .15s ease; }
.fewset-pm__full:hover .fewset-pm__full-arr { transform: translateX(2px); }

/* Loading state — placeholders shaped like the real swatches/sizes, shimmering
   in a staggered wave so the wait feels intentional, not broken. */
.fewset-pm__skel { display: flex; flex-direction: column; margin-top: 18px; }
.fewset-pm__skel-label,
.fewset-pm__skel-pill,
.fewset-pm__skel-dot {
    background: linear-gradient(90deg, var(--surface-dim,#f0f0ed) 25%, var(--surface-container,#ededea) 37%, var(--surface-dim,#f0f0ed) 63%);
    background-size: 400% 100%;
    animation: fewsetPmShimmer 1.25s ease infinite;
}
.fewset-pm__skel-row { display: flex; gap: 8px; }
.fewset-pm__skel-row:first-of-type { margin-bottom: 22px; }
.fewset-pm__skel-label { width: 32%; height: 10px; border-radius: 2px; margin-bottom: 12px; }
.fewset-pm__skel-pill  { width: 48px; height: 42px; border-radius: 2px; }
.fewset-pm__skel-dot   { width: 34px; height: 34px; border-radius: 50%; }
.fewset-pm__skel-row > :nth-child(1) { animation-delay: 0s; }
.fewset-pm__skel-row > :nth-child(2) { animation-delay: .08s; }
.fewset-pm__skel-row > :nth-child(3) { animation-delay: .16s; }
.fewset-pm__skel-row > :nth-child(4) { animation-delay: .24s; }
.fewset-pm__skel-row > :nth-child(5) { animation-delay: .32s; }
@keyframes fewsetPmShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- mobile: bottom sheet, image on top ---- */
@media (max-width: 768px) {
    .fewset-pm-overlay { padding: 0; align-items: flex-end; }
    .fewset-pm {
        width: 100%;
        max-height: 90dvh;
        display: flex;            /* close (absolute) + body; body owns the scroll */
        flex-direction: column;
        animation: fewsetPmSheet .24s var(--ease-luxe, ease) both;
    }
    @keyframes fewsetPmSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
    /* Single scrolling column. The old `grid-template-rows: auto 1fr` pinned the
       grid to the sheet height and let the tall image swallow it, so the size /
       colour selectors were unreachable — nothing could scroll. */
    .fewset-pm__body {
        display: block;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;            /* lets the flex child shrink so it can scroll */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Full photo, no crop — the catalogue shots are 3:4, so a 3:4 box shows the
       whole frame; the column scrolls down to the (now compact) controls. */
    .fewset-pm__media { aspect-ratio: 3 / 4; height: auto; }
    .fewset-pm__media .fewset-pm__img { object-position: center top; }
    /* Everything below the (untouched 3:4) photo compressed so the whole
       sheet fits a phone screen without scrolling. */
    .fewset-pm__info { padding: 11px 14px 14px; overflow: visible; }
    .fewset-pm__name { font-size: .875rem; line-height: 1.3; }
    .fewset-pm__price { margin-top: 3px; font-size: .8125rem; }

    /* Compact buttons + variations on phones — close button especially. */
    .fewset-pm__close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 22px; }
    .fewset-pm__gift { margin-top: 8px; padding: 7px 10px 7px 7px; gap: 9px; }
    .fewset-pm__gift-media { flex-basis: 30px; height: 38px; }
    .fewset-pm__gift-name { font-size: 11px; }
    .fewset-pm__gift-price { font-size: 10px; }
    .fewset-pm__attrs { margin-top: 8px; }
    .fewset-pm__attr { padding: 9px 0; }
    .fewset-pm__attr-label { margin-bottom: 4px; font-size: 9px; }
    .fewset-pm__opt { min-width: 32px; height: 32px; padding: 0 8px; font-size: 11px; }
    .fewset-pm__opt.is-color { width: 26px; min-width: 26px; height: 26px; }
    /* keep both footer buttons on the same line, just smaller */
    .fewset-pm__foot { gap: 8px; padding-top: 10px; }
    .fewset-pm__cta,
    .fewset-pm__full { padding: 11px 8px; font-size: 9.5px; letter-spacing: .05em; }
    .fewset-pm__full { gap: 4px; }
}