/**
 * Printify Integration — storefront swatch styles.
 *
 * Originally ported verbatim from printful-swatch-mapper 1.8.3; reworked since
 * for layout and hierarchy. Element ids and class names are unchanged because
 * they are a contract — AR/assets/css/ar-style.css styles #pfm-add-to-cart and
 * the whole pfm-ui-tweaks plugin targets .pfm-price / .pfm-qty / #pfm-add-to-cart.
 *
 * Colours come from CSS custom properties so the Customizer can override them
 * (see Frontend\Customizer). Every var keeps its original 1.8.3 literal as the
 * var() fallback, and those fallbacks must stay in step with
 * Customizer::SETTINGS defaults — the emitter suppresses any value equal to its
 * default, so changing one without the other desyncs them.
 * `--pfm-accent-rgb` is a bare "r,g,b" triplet: several rules need an alpha
 * channel, and a triplet avoids depending on color-mix().
 *
 * Layout is intrinsic — no @media, no @container. This component lives in the
 * product summary column, whose width does NOT track the viewport (measured:
 * ~626px column at a 768px viewport vs ~480px at 1024px, i.e. the relationship
 * inverts). Viewport breakpoints would style the wider case as the narrower
 * one, so sizing is driven by auto-fill/minmax and percentage padding instead.
 */

/* ------------------------------------------------------------------ *
 *  Container
 * ------------------------------------------------------------------ */

.pfm-container{
    margin:16px 0;
    /* % padding resolves against the parent column, which is the signal that
       actually matters here. The old fixed 50px ate 29% of a 348px column. */
    padding:clamp(16px, 5%, 28px) clamp(16px, 6%, 32px);
    border:1px solid var(--pfm-divider,#eee);
    border-radius:12px;
    position:relative;
    overflow:hidden;
}
.pfm-container::before{content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border-radius:12px; opacity:0; pointer-events:none; z-index:0;}
.pfm-container.animate-highlight::before{animation:pfm-highlight 3s ease-out;}
@keyframes pfm-highlight{
    0%{opacity:0; box-shadow:0 0 0 0 rgba(var(--pfm-accent-rgb,0,103,255),0), inset 0 0 0 0 rgba(var(--pfm-accent-rgb,0,103,255),0);}
    30%{opacity:1; box-shadow:0 0 20px 2px rgba(var(--pfm-accent-rgb,0,103,255),0.3), inset 0 0 20px 2px rgba(var(--pfm-accent-rgb,0,103,255),0.1);}
    50%{box-shadow:0 0 15px 1px rgba(var(--pfm-accent-rgb,0,103,255),0.2), inset 0 0 15px 1px rgba(var(--pfm-accent-rgb,0,103,255),0.08);}
    100%{opacity:0; box-shadow:0 0 0 0 rgba(var(--pfm-accent-rgb,0,103,255),0), inset 0 0 0 0 rgba(var(--pfm-accent-rgb,0,103,255),0);}
}
.pfm-container > *{position:relative; z-index:1;}

/* ------------------------------------------------------------------ *
 *  Group labels — one treatment for all three axes
 * ------------------------------------------------------------------ */

.pfm-title-wrap{text-align:left; margin:0 0 10px;}
.pfm-a-title,
.pfm-b-label,
.pfm-c-label{
    display:block;
    margin:0 0 10px;
    font-size:0.8125rem;
    font-weight:600;
    line-height:1.3;
    letter-spacing:0.04em;
    color:var(--pfm-text,#000);
    opacity:0.65;
}

/* ------------------------------------------------------------------ *
 *  Type chips (axis A) — image-led tiles
 * ------------------------------------------------------------------ */

.pfm-a-line{display:block; margin-bottom:18px;}
.pfm-a-chips{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
    gap:8px;
}
.pfm-a-chip{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:100%;
    margin:0;
    padding:10px 8px;
    border:1px solid var(--pfm-border,#ccc);
    border-radius:10px;
    background:var(--pfm-surface,#fff);
    cursor:pointer;
    transition:border-color .18s ease, background-color .18s ease;
}
.pfm-a-chip-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.pfm-a-chip .pfm-a-thumb{
    width:100%;
    max-width:56px;
    aspect-ratio:1;
    height:auto;
    border-radius:6px;
    /* contain, not cover: these are print-on-demand mockups of whole objects
       (mug, tote, phone case) — cropping them loses the object. */
    object-fit:contain;
    display:block;
}
.pfm-a-chip-text{
    font-size:0.8125rem;
    line-height:1.25;
    color:var(--pfm-text,#000);
    text-align:center;
    overflow-wrap:anywhere;
}

/* ------------------------------------------------------------------ *
 *  Option chips (axes B and C) — compact, numeric, comparative
 * ------------------------------------------------------------------ */

.pfm-b-wrap,.pfm-c-wrap{display:block; margin:0 0 18px;}
.pfm-b-chips,.pfm-c-chips{
    display:grid;
    /* An explicit px floor is what stops the overflow: the old repeat(4, 1fr)
       resolved 1fr to minmax(auto, 1fr), and `auto` never shrinks below
       min-content — four 72px chips overflowed a 248px column by 73px.
       84px is sized for the widest vocabulary in the catalogue, Printify's
       U+2033 sizes ("18″ x 24″"), so they stay on one line. */
    grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
    gap:8px;
}
.pfm-b-chips:has(.pfm-b-select-dropdown),
.pfm-c-chips:has(.pfm-c-select-dropdown){display:block; grid-template-columns:none; gap:0;}

.pfm-b-chip,.pfm-c-chip{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    margin:0;
    padding:8px 10px;
    border:1px solid var(--pfm-border,#ccc);
    border-radius:8px;
    background:var(--pfm-surface,#fff);
    color:var(--pfm-text,#000);
    font-size:0.875rem;
    line-height:1.2;
    /* These values are a scale — align the digits like one. */
    font-variant-numeric:tabular-nums;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    box-sizing:border-box;
    cursor:pointer;
    transition:border-color .18s ease, background-color .18s ease;
}

.pfm-b-select-dropdown,.pfm-c-select-dropdown{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--pfm-border,#ccc);
    border-radius:8px;
    background:var(--pfm-surface,#fff);
    color:var(--pfm-text,#000);
    font-size:0.9375rem;
    font-variant-numeric:tabular-nums;
    box-sizing:border-box;
}

/* ------------------------------------------------------------------ *
 *  Shared chip states — hover, selection mark, focus
 * ------------------------------------------------------------------ */

/* :focus is claimed alongside :hover because Astra paints button:focus with its
   own brand background — a focused-but-unselected chip would otherwise turn
   solid blue. :not(.active) keeps a selected chip's accent tint from being
   overwritten when it holds focus, which it does after every click. */
.pfm-a-chip:hover,
.pfm-b-chip:hover,
.pfm-c-chip:hover,
.pfm-a-chip:focus:not(.active),
.pfm-b-chip:focus:not(.active),
.pfm-c-chip:focus:not(.active){
    background:var(--pfm-surface-hover,#f5f5f5);
    border-color:var(--pfm-border-hover,#999);
}
/* Astra styles `button:hover` and `button:focus` with color:var(--ast-global-color-5),
   which is #fff — on an option chip, whose label is a direct text node, that puts
   white text on the light hover surface and the label disappears. Restating the
   colour here is load-bearing, not decorative. Type chips keep their label in
   .pfm-a-chip-text, which sets its own colour and is unaffected. */
.pfm-b-chip:hover,
.pfm-c-chip:hover,
.pfm-b-chip:focus,
.pfm-c-chip:focus{color:var(--pfm-text,#000);}

/* Selection reads as a mark, not a flood fill: the artwork is the product on
   this page, so the control must not out-shout it. A tinted surface keeps the
   label legible at any accent, including a saturated one. */
.pfm-a-chip.active,
.pfm-b-chip.active,
.pfm-c-chip.active{
    border-color:var(--pfm-accent,#0067FF);
    box-shadow:inset 0 0 0 1px var(--pfm-accent,#0067FF);
    background:rgba(var(--pfm-accent-rgb,0,103,255),0.06);
}
.pfm-a-chip.active .pfm-a-chip-text,
.pfm-b-chip.active,
.pfm-c-chip.active{color:var(--pfm-text,#000);}

/* The folded corner — the one signature element, same mark on both axes so the
   pattern is learned once. */
.pfm-a-chip.active::after,
.pfm-b-chip.active::after,
.pfm-c-chip.active::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:18px;
    height:18px;
    background:var(--pfm-accent,#0067FF);
    clip-path:polygon(100% 0, 0 0, 100% 100%);
    pointer-events:none;
}

.pfm-a-chip:focus-visible,
.pfm-b-chip:focus-visible,
.pfm-c-chip:focus-visible,
.pfm-b-select-dropdown:focus-visible,
.pfm-c-select-dropdown:focus-visible,
.pfm-thumb-btn:focus-visible,
#pfm-add-to-cart:focus-visible{
    outline:2px solid var(--pfm-accent,#0067FF);
    outline-offset:2px;
}

/* ------------------------------------------------------------------ *
 *  Dividers — one rule, between choosing and committing
 * ------------------------------------------------------------------ */

.pfm-divider{height:1px; background:var(--pfm-divider,#eee); margin:18px 0;}
/* Kept in the DOM (front.js toggles their display) but reduced to spacing:
   the group labels already separate the sections, and three hairlines in a
   component this short is noise. */
#pfm-divider-options,
#pfm-price-divider{height:0; background:none; margin:6px 0;}

/* ------------------------------------------------------------------ *
 *  Price
 * ------------------------------------------------------------------ */

.pfm-price{
    margin-top:4px;
    font-size:1.7em;
    font-weight:600;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
    color:var(--pfm-accent,#0067FF);
    padding:4px 0;
}
.pfm-price-divider{height:1px; background:var(--pfm-divider,#eee); margin:18px 0;}

/* ------------------------------------------------------------------ *
 *  Quantity + add to cart
 * ------------------------------------------------------------------ */

.pfm-qty-wrap{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    /* wrap is what stops the button being crushed to ~70px on a narrow column */
    flex-wrap:wrap;
    gap:12px;
}
.pfm-qty{display:flex; align-items:center; gap:8px;}
.pfm-qty label{font-size:0.8125rem; opacity:0.75;}
.pfm-qty input[type="number"]{
    width:68px;
    min-height:44px;
    padding:6px 8px;
    border:1px solid var(--pfm-border,#ccc);
    border-radius:8px;
    background:var(--pfm-surface,#fff);
    color:var(--pfm-text,#000);
    font-size:0.9375rem;
    box-sizing:border-box;
}
/* An ID selector so this lands on top of the theme's button colours without
   !important. AR only forces margin-top, which is left alone deliberately. */
#pfm-add-to-cart{
    flex:1 1 160px;
    min-height:44px;
    border-radius:8px;
    border:1px solid var(--pfm-accent,#0067FF);
    background:var(--pfm-accent,#0067FF);
    color:var(--pfm-accent-text,#fff);
    font-size:0.9375rem;
    line-height:1.2;
    transition:opacity .18s ease;
}
/* AR's ar-style.css forces margin-top on #pfm-add-to-cart with !important at
   four breakpoints (20/20/16/14px) to space it from WooCommerce's own variation
   form. In this row the button sits beside the quantity input, and since
   align-items centres the MARGIN box that margin pushed the button 6px below
   the input at every width. Scoped to .pfm-qty-wrap, so AR's rule still applies
   wherever else the button appears; the selector matches AR's own shape because
   it has to outrank it. */
.pfm-qty-wrap button#pfm-add-to-cart.single_add_to_cart_button{margin-top:0 !important;}
#pfm-add-to-cart:hover{opacity:0.9;}
#pfm-add-to-cart:disabled{cursor:not-allowed; opacity:0.45;}

/* ------------------------------------------------------------------ *
 *  Feedback, loader, variant thumbnails
 * ------------------------------------------------------------------ */

.pfm-feedback{margin-top:10px; font-size:0.875rem; opacity:0.8;}

.pfm-loader{display:inline-block; width:20px; height:20px; border:3px solid rgba(var(--pfm-accent-rgb,0,103,255),0.3); border-top-color:var(--pfm-accent,#0067FF); border-radius:50%; animation:pfm-spin 0.8s linear infinite; margin-left:8px; vertical-align:middle;}
@keyframes pfm-spin{to{transform:rotate(360deg);}}

.pfm-external-thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.pfm-external-thumbs .pfm-thumb-btn{
    border:1px solid var(--pfm-thumb-border,#ddd);
    background:var(--pfm-surface,#fff);
    padding:2px;
    border-radius:8px;
    cursor:pointer;
    transition:border-color .18s ease;
}
.pfm-external-thumbs .pfm-thumb-btn:hover{border-color:var(--pfm-border-hover,#999);}
.pfm-external-thumbs .pfm-thumb-btn img{width:64px; height:64px; object-fit:cover; border-radius:6px; display:block;}

/* ------------------------------------------------------------------ *
 *  Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
    .pfm-a-chip,
    .pfm-b-chip,
    .pfm-c-chip,
    #pfm-add-to-cart,
    .pfm-external-thumbs .pfm-thumb-btn{transition:none;}
    .pfm-container.animate-highlight::before{animation:none;}
    .pfm-loader{animation-duration:1.6s;}
}