/**
 * ECP PDP Variation A — styles
 * Scoped under body.ecp-pdp-va-active so nothing leaks to other pages.
 */

/* Font loading (assumes site loads Merriweather + Lato via theme; falls back to system) */
body.ecp-pdp-va-active .ecp-pdp-va { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; font-size: 14px; }
body.ecp-pdp-va-active .ecp-pdp-va *, body.ecp-pdp-va-active .ecp-pdp-va *::before, body.ecp-pdp-va-active .ecp-pdp-va *::after { box-sizing: border-box; }

/* Layout: two columns */
body.ecp-pdp-va-active .ecp-pdp-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 30px 60px;
    align-items: start;
}
body.ecp-pdp-va-active .ecp-pdp-info-col { padding-top: 0 !important; }

/* Gallery — sticky left. Custom simple gallery: main image + thumb rail below. */
body.ecp-pdp-va-active .ecp-pdp-gallery-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Main image — edge-to-edge, square aspect. */
body.ecp-pdp-va-active .ecp-pdp-main-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f6f4;
    overflow: hidden;
    position: relative;
}
body.ecp-pdp-va-active .ecp-pdp-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
    cursor: zoom-in;
}

/* Gallery arrows — overlay left/right on main image */
body.ecp-pdp-va-active .ecp-pdp-gallery-arrow {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #2a3a52;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
body.ecp-pdp-va-active .ecp-pdp-gallery-arrow:hover { background: rgba(255,255,255,1); }
body.ecp-pdp-va-active .ecp-pdp-gallery-arrow--prev { left: 12px; }
body.ecp-pdp-va-active .ecp-pdp-gallery-arrow--next { right: 12px; }

/* Zoom button — bottom-right corner */
body.ecp-pdp-va-active .ecp-pdp-gallery-zoom {
    all: unset;
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.85);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a3a52;
    cursor: zoom-in;
    z-index: 2;
    transition: background 0.2s ease;
}
body.ecp-pdp-va-active .ecp-pdp-gallery-zoom:hover { background: rgba(255,255,255,1); }

/* Lightbox */
body.ecp-pdp-va-active .ecp-pdp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
body.ecp-pdp-va-active .ecp-pdp-lightbox.is-open { display: flex; }
body.ecp-pdp-va-active .ecp-pdp-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}
body.ecp-pdp-va-active .ecp-pdp-lightbox-close {
    all: unset;
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 8px 12px;
}
body.ecp-pdp-va-active .ecp-pdp-lightbox-arrow {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 48px;
    cursor: pointer;
    padding: 12px 20px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
body.ecp-pdp-va-active .ecp-pdp-lightbox-arrow:hover { opacity: 1; }
body.ecp-pdp-va-active .ecp-pdp-lightbox-arrow--prev { left: 20px; }
body.ecp-pdp-va-active .ecp-pdp-lightbox-arrow--next { right: 20px; }

/* Thumbnail rail — horizontal on mobile, wraps on desktop. Dim non-active, full opacity on hover/active. */
body.ecp-pdp-va-active .ecp-pdp-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.ecp-pdp-va-active .ecp-pdp-thumb {
    all: unset;
    width: 64px;
    height: 64px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
    overflow: hidden;
    background: #f7f6f4;
    flex-shrink: 0;
}
body.ecp-pdp-va-active .ecp-pdp-thumb:hover,
body.ecp-pdp-va-active .ecp-pdp-thumb--active { opacity: 1; }
body.ecp-pdp-va-active .ecp-pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Edge-to-edge main image — kill any WooThumbs padding/margin on the image wrap */
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-all-images-wrap,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-images,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-images__slide { padding: 0 !important; margin: 0 !important; }
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-images__image { width: 100% !important; display: block !important; }

/* Thumbnails: dim non-selected, full opacity when active or hovered. Real WooThumbs class names. */
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide {
    opacity: 0.45;
    border: none !important;
    outline: none !important;
    transition: opacity 0.2s ease;
    cursor: pointer;
    position: relative;
}
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide:hover,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide--active { opacity: 1; }
/* Kill any border/outline WooThumbs draws around the active thumb */
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide::before,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide::after,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide--active::before,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__slide--active::after { display: none !important; content: none !important; }
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__image-wrapper,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails__image { border: none !important; outline: none !important; box-shadow: none !important; }

/* Nuclear border removal — kill every border/outline on every element inside the thumbnails wrap.
   WooThumbs' active-thumb border may live on any of: __slide, __image-wrapper, figure, a, img.
   The scoped body class keeps this from touching anything outside our PDP. */
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails-wrap,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails *,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails *::before,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-thumbnails *::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Disable WooThumbs' hover-magnify zoom (real class names, verified from DOM) */
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap { cursor: default !important; }
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__image,
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap .iconic-woothumbs-images__slide,
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap [class*="zoom"] { cursor: default !important; transform: none !important; }
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap [class*="zoomed"],
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap [class*="zoom-container"],
body.ecp-pdp-va-active .iconic-woothumbs-all-images-wrap [class*="magnifier"] { display: none !important; }

/* Hide any wishlist heart overlay YITH or WooThumbs may inject into the gallery. */
body.ecp-pdp-va-active .ecp-pdp-gallery-col .yith-wcwl-add-to-wishlist,
body.ecp-pdp-va-active .ecp-pdp-gallery-col .yith-add-to-wishlist-button-block,
body.ecp-pdp-va-active .ecp-pdp-gallery-col [class*="wishlist"],
body.ecp-pdp-va-active .ecp-pdp-gallery-col [class*="heart"],
body.ecp-pdp-va-active .ecp-pdp-gallery-col a[href*="wishlist"],
body.ecp-pdp-va-active .ecp-pdp-gallery-col .iconic-woothumbs-icons,
body.ecp-pdp-va-active .ecp-pdp-gallery-col [class*="hover-action"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* SVG icons — sized inline via helper span wrapper */
body.ecp-pdp-va-active .ecp-pdp-svg { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 0; }
body.ecp-pdp-va-active .ecp-pdp-svg svg { width: 1em; height: 1em; display: block; }
body.ecp-pdp-va-active .ecp-pdp-svg--truck { color: #31856c; font-size: 15px; margin-right: 6px; }
body.ecp-pdp-va-active .ecp-pdp-svg--clock { color: #999; font-size: 13px; margin-right: 6px; }

/* Info column */
body.ecp-pdp-va-active .ecp-pdp-info-col { padding-top: 4px; }
body.ecp-pdp-va-active .ecp-pdp-title { font-family: 'Merriweather', Georgia, serif; font-size: 30px; font-weight: 400; color: #2a3a52; line-height: 1.25; margin: 0 0 4px; }
body.ecp-pdp-va-active .ecp-pdp-color-in { font-family: 'Merriweather', Georgia, serif; font-size: 17px; font-style: italic; font-weight: 300; color: #666; margin: 0 0 4px; }
body.ecp-pdp-va-active .ecp-pdp-low-stock { font-size: 12.5px; color: #6b6b6b; margin: 0 0 14px; }
/* 1.4.5: low-stock note lives under the Qty label, above the stepper (~6px gaps). Label mb 9px + -3px = 6px above; collapses with qty-row mt 6px below. */
body.ecp-pdp-va-active .ecp-pdp-info-col .ecp-pdp-low-stock--qty { margin: -3px 0 6px; line-height: 1.4; }
body.ecp-pdp-va-active .ecp-pdp-price { font-size: 22px; font-weight: 700; color: #2a3a52; margin: 0 0 8px; }
body.ecp-pdp-va-active .ecp-pdp-price .woocommerce-Price-amount, body.ecp-pdp-va-active .ecp-pdp-price ins, body.ecp-pdp-va-active .ecp-pdp-price del { font-size: inherit; color: inherit; }
body.ecp-pdp-va-active .ecp-pdp-price del { opacity: 0.55; margin-right: 6px; }
body.ecp-pdp-va-active .ecp-pdp-rating-row { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; }
body.ecp-pdp-va-active .ecp-pdp-stars { color: #e8a020; font-size: 14px; letter-spacing: 1px; }
body.ecp-pdp-va-active .ecp-pdp-rating-link { font-size: 13px; color: #2a3a52; text-decoration: underline; cursor: pointer; }

/* Swatches */
body.ecp-pdp-va-active .ecp-pdp-swatch-group { margin-bottom: 16px; }
body.ecp-pdp-va-active .ecp-pdp-swatch-label { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.9px; color: #888; margin-bottom: 9px; }
body.ecp-pdp-va-active .ecp-pdp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
body.ecp-pdp-va-active .ecp-pdp-swatch { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 1.5px solid #ddd; transition: border-color 0.15s, outline 0.15s, outline-offset 0.15s; position: relative; padding: 0; background: #f7f6f4; transform: none; }
body.ecp-pdp-va-active .ecp-pdp-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
body.ecp-pdp-va-active .ecp-pdp-swatch.selected:not(.ecp-pdp-swatch--chip) { border-color: transparent; box-shadow: none; outline: 2px solid #2a3a52; outline-offset: 1px; transform: none; }
body.ecp-pdp-va-active .ecp-pdp-swatch:hover:not(.selected) { border-color: #888; transform: none; }

/* Size / Design text chips (universal PDP modes) */
body.ecp-pdp-va-active .ecp-pdp-swatches--chips { gap: 10px; }
body.ecp-pdp-va-active .ecp-pdp-swatch--chip {
    width: auto;
    min-width: 44px;
    height: auto;
    min-height: 40px;
    border-radius: 6px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #ccc;
    box-shadow: none;
}
body.ecp-pdp-va-active .ecp-pdp-swatch--chip img { display: none; }
body.ecp-pdp-va-active .ecp-pdp-swatch--chip .ecp-pdp-chip-label {
    font-size: 13px;
    font-weight: 700;
    color: #2a3a52;
    line-height: 1.2;
    white-space: nowrap;
}
body.ecp-pdp-va-active .ecp-pdp-swatch--chip.selected {
    border-color: #2a3a52;
    background: #2a3a52;
    box-shadow: none;
    outline: none;
}
body.ecp-pdp-va-active .ecp-pdp-swatch--chip.selected .ecp-pdp-chip-label { color: #fff; }
body.ecp-pdp-va-active .ecp-pdp-swatch--chip:hover:not(.selected) {
    border-color: #2a3a52;
    transform: none;
}
body.ecp-pdp-va-active .ecp-pdp-swatch--chip[data-in-stock="0"] {
    opacity: 0.45;
    text-decoration: line-through;
}


/* Qty */
body.ecp-pdp-va-active .ecp-pdp-qty-row { margin: 6px 0 12px; }
body.ecp-pdp-va-active .ecp-pdp-qty-input { display: flex; align-items: center; gap: 10px; width: fit-content; }
body.ecp-pdp-va-active .ecp-pdp-qty-btn { background: #f5f3ef; border: none; width: 44px; height: 44px; border-radius: 8px; font-size: 22px; font-weight: 300; cursor: pointer; color: #2a3a52; display: flex; align-items: center; justify-content: center; padding: 0; }
body.ecp-pdp-va-active .ecp-pdp-qty-btn:hover:not(:disabled) { background: #ede9e2; }
body.ecp-pdp-va-active .ecp-pdp-qty-btn:disabled,
body.ecp-pdp-va-active .ecp-pdp-qty-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  color: #9a9a9a;
  outline: none;
  box-shadow: none;
}
body.ecp-pdp-va-active .ecp-pdp-qty-btn:focus-visible:not(:disabled) {
  outline: 2px solid #2a3a52;
  outline-offset: 2px;
}
body.ecp-pdp-va-active .ecp-pdp-qty-val { width: 30px !important; text-align: center !important; border: none !important; outline: none !important; font-size: 18px !important; font-family: 'Merriweather', Georgia, serif !important; font-style: italic !important; color: #2a3a52 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; opacity: 1 !important; }

/* Shipping line (sits above the ATC row) + Affirm (sits under the ATC row, 1.5.3) */
body.ecp-pdp-va-active .ecp-pdp-shipping-line { font-size: 12.5px; color: #555; margin: 8px 0 16px; }
/* Affirm: wrapper holds the Affirm plugin's #learn-more element (content rendered by Affirm's script). */
body.ecp-pdp-va-active .ecp-pdp-affirm-line { font-size: 12.5px; color: #666; margin: -2px 0 14px; }
body.ecp-pdp-va-active .ecp-pdp-affirm-line .affirm-as-low-as { margin: 0; font-size: inherit; color: inherit; line-height: 1.5; }
/* 1.7.4 CLS: Affirm's script fills this <p> ~1-3s after load (always one line, e.g. "Pay within 30 days… with Affirm").
   Collapsing the empty line made the badges row below jump ~30px. Hold one line + its margin from first paint. */
body.ecp-pdp-va-active .ecp-pdp-affirm-line { min-height: 20px; }
body.ecp-pdp-va-active .ecp-pdp-affirm-line .affirm-as-low-as:empty { min-height: 20px; }
@media (max-width: 430px) { /* phones: Affirm's message always wraps to two lines here */
    body.ecp-pdp-va-active .ecp-pdp-affirm-line,
    body.ecp-pdp-va-active .ecp-pdp-affirm-line .affirm-as-low-as:empty { min-height: 39px; }
}
body.ecp-pdp-va-active .ecp-pdp-affirm-line a { color: #2a3a52; }

/* ATC + Wishlist */
body.ecp-pdp-va-active .ecp-pdp-atc-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
body.ecp-pdp-va-active .ecp-pdp-atc-btn { flex: 1; background: #2a3a52; color: #fff; border: none; border-radius: 6px; padding: 14px 28px; font-size: 14px; font-weight: 700; font-family: 'Lato', sans-serif; letter-spacing: 0.3px; cursor: pointer; transition: background 0.15s; }
body.ecp-pdp-va-active .ecp-pdp-atc-btn:hover { background: #1e2c3d; }
body.ecp-pdp-va-active .ecp-pdp-atc-btn.is-adding { opacity: 0.6; cursor: wait; }
body.ecp-pdp-va-active .ecp-pdp-atc-btn.is-added { background: #31856c; }
body.ecp-pdp-va-active .ecp-pdp-atc-btn:disabled,
body.ecp-pdp-va-active .ecp-pdp-atc-btn[aria-disabled="true"] {
  background: #c5bcb0;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}
body.ecp-pdp-va-active .ecp-pdp-atc-btn:disabled:hover,
body.ecp-pdp-va-active .ecp-pdp-atc-btn[aria-disabled="true"]:hover {
  background: #c5bcb0;
}
body.ecp-pdp-va-active .ecp-pdp-unavailable-note {
  margin: 12px 0 8px;
  font-size: 13.5px;
  color: #6b7280;
  font-weight: 600;
}
/* Wishlist — YITH v4 renders an async block. Style the wrapper as our button
   and paint our own heart via ::before (inline SVG data URI). Hide YITH's own DOM. */
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border: 1.5px solid #ccc; border-radius: 6px; background: #fff;
    position: relative; overflow: hidden; cursor: pointer;
    transition: border-color 0.18s;
}
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap:hover { border-color: #2a3a52; }
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none; z-index: 1;
    transition: background 0.15s;
}
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3a52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Added state: navy filled heart */
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap.is-wishlisted { border-color: #2a3a52; }
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap.is-wishlisted::before,
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap.is-wishlisted:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a3a52'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Hide YITH's own rendered content (text, icons, tooltips) — our ::before is the visual */
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap > *,
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap > * > * {
    width: 100% !important; height: 100% !important;
    display: block !important;
    color: transparent !important; font-size: 0 !important;
    background: transparent !important; border: none !important;
    margin: 0 !important; padding: 0 !important;
    text-indent: -9999px; overflow: hidden;
    position: relative; z-index: 2;
}
body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap a { cursor: pointer; text-decoration: none !important; }

body.ecp-pdp-va-active .ecp-pdp-wishlist-wrap.is-busy {
    opacity: 0.7;
    pointer-events: none;
}


/* Back In Stock notify (under ATC, above badges) — East Fork–style */
body.ecp-pdp-va-active .ecp-pdp-bis {
  margin: 0 0 4px;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-hidden,
body.ecp-pdp-va-active .ecp-pdp-bis[hidden] {
  display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-title,
body.ecp-pdp-va-active #wc_bis_product_form .wc_bis_form_title {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #4a5568;
  font-family: 'Lato', sans-serif;
}
body.ecp-pdp-va-active .ecp-pdp-bis-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
body.ecp-pdp-va-active .ecp-pdp-bis-email,
body.ecp-pdp-va-active #wc_bis_product_form #wc_bis_email {
  flex: 1 1 180px;
  min-width: 0;
  height: 48px;
  border: 1.5px solid #d5d0c8 !important;
  border-radius: 6px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-family: 'Lato', sans-serif !important;
  color: #2a3a52 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-email:focus,
body.ecp-pdp-va-active #wc_bis_product_form #wc_bis_email:focus {
  outline: none !important;
  border-color: #2a3a52 !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-btn,
body.ecp-pdp-va-active #wc_bis_product_form #wc_bis_send_form {
  flex: 0 0 auto;
  min-width: 128px;
  height: 48px;
  margin: 0 !important;
  padding: 0 22px !important;
  border: none !important;
  border-radius: 6px !important;
  background: #2a3a52 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Lato', sans-serif !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  float: none !important;
  transition: background 0.15s;
}
body.ecp-pdp-va-active .ecp-pdp-bis-btn:hover,
body.ecp-pdp-va-active #wc_bis_product_form #wc_bis_send_form:hover {
  background: #1e2c3d !important;
  color: #fff !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-success .ecp-pdp-bis-row {
  display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-success .ecp-pdp-bis-title {
  display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-success-msg {
  margin: 4px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #2a3a52;
  font-family: 'Lato', sans-serif;
}
body.ecp-pdp-va-active .ecp-pdp-bis-support-msg {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}
body.ecp-pdp-va-active .ecp-pdp-bis-success-msg[hidden],
body.ecp-pdp-va-active .ecp-pdp-bis-support-msg[hidden],
body.ecp-pdp-va-active .ecp-pdp-bis-success-btn[hidden] {
  display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-success .ecp-pdp-bis-success-msg,
body.ecp-pdp-va-active .ecp-pdp-bis.is-success .ecp-pdp-bis-support-msg {
  display: block !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-success-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: 6px;
  background: #31856c;
  color: #fff;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-success .ecp-pdp-bis-success-btn {
  display: flex !important;
}
body.ecp-pdp-va-active .ecp-pdp-bis-success-btn .ecp-pdp-bis-check {
  display: block;
}
body.ecp-pdp-va-active .ecp-pdp-bis.is-submitting .ecp-pdp-bis-btn {
  opacity: 0.65;
  cursor: wait;
}
/* Override global Elementor cream hover on BIS button inside PDP */
body.ecp-pdp-va-active.logged-in #wc_bis_send_form {
  margin-top: 0 !important;
}

/* Badges (v1.5.4) — collision-proof row.
   Equal-width columns via flex-basis (no content-based sizing), real column gap, labels wrap only
   inside their own column. Label size scales with the column width (container query units) so the
   longest word ("CUSTOMIZATION") fits on one line; overflow-wrap is a last-resort guard only. */
body.ecp-pdp-va-active .ecp-pdp-badges-row {
    --ecp-badge-cols: 3;
    --ecp-badge-gap: 12px;
    --ecp-badge-fit: 9.05; /* label px = column px / fit (longest word + letter-spacing + ~3% slack) */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: var(--ecp-badge-gap);
    row-gap: 14px;
    margin: 20px 0 8px;
    container: ecp-badges / inline-size;
}
body.ecp-pdp-va-active .ecp-pdp-badges-row[data-count="4"] { --ecp-badge-cols: 4; --ecp-badge-gap: 8px; --ecp-badge-fit: 8.8; }
body.ecp-pdp-va-active .ecp-pdp-badge {
    flex: 0 0 calc((100% - (var(--ecp-badge-cols) - 1) * var(--ecp-badge-gap)) / var(--ecp-badge-cols));
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    container: ecp-badge / inline-size;
}
/* Very narrow rows (e.g. 2-col desktop at ~900–1000px, 360px phones): 4 badges go 2×2 instead of shrinking text below 8px. */
@container ecp-badges (max-width: 305px) {
    body.ecp-pdp-va-active .ecp-pdp-badges-row[data-count="4"] > .ecp-pdp-badge { --ecp-badge-cols: 2; }
}
/* Badge icons: no circular box — icon fills the slot (navy via currentColor on SVG). */
body.ecp-pdp-va-active .ecp-pdp-badge-icon { width: auto; min-width: 48px; max-width: 100%; height: 48px; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: #2a3a52; }
body.ecp-pdp-va-active .ecp-pdp-badge-icon .ecp-pdp-svg { font-size: 40px; }
body.ecp-pdp-va-active .ecp-pdp-badge-icon .ecp-pdp-badge-svg { font-size: 40px; color: inherit; max-width: 100%; }
/* Height-led sizing: square icons stay 40×40; wide artwork (e.g. Customization Available, 2.4:1) may use up to 66px width (never wider than its column) so its ink reads as large as the square icons. */
body.ecp-pdp-va-active .ecp-pdp-badge-icon .ecp-pdp-badge-svg svg { height: 1em; width: auto; min-width: 1em; max-width: 1.65em; max-width: min(1.65em, 100cqi); display: block; overflow: visible; }
body.ecp-pdp-va-active .ecp-pdp-badge-icon img.ecp-pdp-badge-img { width: 40px !important; height: 40px !important; max-width: none !important; object-fit: contain; display: block; margin: 0 !important; border-radius: 0 !important; }
body.ecp-pdp-va-active .ecp-pdp-badge-label {
    display: block;
    width: 100%;
    font-size: 10.5px;
    font-size: clamp(8px, calc(100cqi / var(--ecp-badge-fit)), 10.5px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2a3a52;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere; /* only if a word is wider than its own column */
    -webkit-hyphens: manual;
    hyphens: manual;
}
body.ecp-pdp-va-active .ecp-pdp-badges-row[data-count="4"] .ecp-pdp-badge-label { letter-spacing: 0.02em; }
/* Fallback for browsers without container query units. */
@supports not (font-size: 1cqi) {
    @media (max-width: 480px) {
        body.ecp-pdp-va-active .ecp-pdp-badges-row[data-count="4"] .ecp-pdp-badge-label { font-size: 8.5px; }
    }
    @media (min-width: 901px) and (max-width: 1100px) {
        body.ecp-pdp-va-active .ecp-pdp-badges-row[data-count="4"] .ecp-pdp-badge-label { font-size: 8px; }
    }
}

/* Accordions */
body.ecp-pdp-va-active .ecp-pdp-accordions { margin-top: 4px; }
body.ecp-pdp-va-active .ecp-pdp-acc-item { border-top: 1px solid #e8e8e8; }
body.ecp-pdp-va-active .ecp-pdp-acc-item:last-child { border-bottom: 1px solid #e8e8e8; }
body.ecp-pdp-va-active .ecp-pdp-acc-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; color: #2a3a52; cursor: pointer; user-select: none; gap: 12px; }
body.ecp-pdp-va-active .ecp-pdp-acc-head-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
body.ecp-pdp-va-active .ecp-pdp-acc-head-chip { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ddd; background-size: cover; background-position: center; flex-shrink: 0; }

/* Story accordion header: keep chip + name as an inseparable unit so long names don't split. */
body.ecp-pdp-va-active .ecp-pdp-story-name-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
body.ecp-pdp-va-active .ecp-pdp-story-label { color: #888; font-weight: 500; font-size: 13px; letter-spacing: 0.04em; }
body.ecp-pdp-va-active .ecp-pdp-story-name { font-weight: 700; }

/* Mobile: stack "The Story of" above the chip+name so long collection names get their own line. */
@media (max-width: 640px) {
    body.ecp-pdp-va-active .ecp-pdp-story-acc .ecp-pdp-acc-head-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    body.ecp-pdp-va-active .ecp-pdp-story-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
}

/* Mobile: edge-to-edge main image — kill horizontal padding on the layout, only for the gallery column. */
@media (max-width: 900px) {
    body.ecp-pdp-va-active .ecp-pdp-layout {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 20px !important;
    }
    body.ecp-pdp-va-active .ecp-pdp-info-col {
        padding-left: 20px;
        padding-right: 20px;
    }
    body.ecp-pdp-va-active .ecp-pdp-main-image-wrap {
        border-radius: 0;
    }
    body.ecp-pdp-va-active .ecp-pdp-thumbs {
        padding-left: 20px;
        padding-right: 20px;
    }
}
body.ecp-pdp-va-active .ecp-pdp-chev { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 12px; height: 12px; color: #2a3a52; transition: transform 0.25s; }
body.ecp-pdp-va-active .ecp-pdp-chev svg { display: block; width: 12px; height: 12px; }
body.ecp-pdp-va-active .ecp-pdp-acc-head.open .ecp-pdp-chev { transform: rotate(180deg); }
body.ecp-pdp-va-active .ecp-pdp-acc-body { font-size: 13.5px; color: #555; line-height: 1.75; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner { overflow: hidden; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner > * { visibility: hidden; opacity: 0; transition: opacity 0.22s ease 0.08s, visibility 0s linear 0.32s; }
body.ecp-pdp-va-active .ecp-pdp-acc-body.open { grid-template-rows: 1fr; }
body.ecp-pdp-va-active .ecp-pdp-acc-body.open .ecp-pdp-acc-inner > * { visibility: visible; opacity: 1; transition: opacity 0.28s ease 0.08s, visibility 0s; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner > *:last-child { padding-bottom: 20px; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner p { margin-bottom: 10px; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner h4 { font-family: 'Merriweather', Georgia, serif; font-size: 14px; font-weight: 700; color: #2a3a52; margin: 14px 0 6px; }
/* Sans subheads inside accordion (Care etc.) — avoid Elementor/kit serif h4 */
body.ecp-pdp-va-active .ecp-pdp-acc-inner .ecp-pdp-acc-subhead { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13.5px; font-weight: 700; color: inherit; margin: 14px 0 6px; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner .ecp-pdp-acc-subhead strong { font-family: inherit; font-weight: 700; color: inherit; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner ul { padding-left: 18px; margin: 6px 0 10px; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner ul li { margin-bottom: 4px; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner > .ecp-pdp-acc-subhead:first-child { margin-top: 0; }
body.ecp-pdp-va-active .ecp-pdp-acc-inner .ecp-pdp-policy-link a { color: #2a3a52; text-decoration: underline; text-underline-offset: 2px; }


/* YITH WAPO personalize (moved into visible info column) — white, no grey cards.
   1.7.0: sits directly under the swatches (above Qty / shipping / Add to Cart), larger type for 100% zoom,
   height morphs smoothly (JS ecpMorph) when YITH shows/hides it for the selected glaze. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot {
    display: none;
    position: relative;
    margin: 2px 0 0;
    background: transparent;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot.ecp-pdp-wapo-slot--active,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot:not([hidden]) {
    display: flow-root; /* own formatting context: inner margins never collapse out, so measured height = painted height */
}
/* 1.6.0: the section follows YITH's answer for the selected variation; dimmed while a switch is re-checked. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot[hidden] { display: none !important; }
/* 1.7.0: first paint — the server already knows the default glaze is customizable: reserve the row so nothing jumps. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot[hidden][data-wapo-expect] {
    display: flow-root !important;
    visibility: hidden;
    height: 36px;
}
/* 1.7.0: while morphing, stay displayed (even when already [hidden]) and clip the moving edge. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot.is-morphing,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot.is-morphing[hidden] {
    display: flow-root !important;
    overflow: hidden;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot.has-ghost #yith-wapo-container { visibility: hidden; }
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}
/* 1.7.2: no loading dim while YITH checks the next glaze — the row stays at full strength (input is paused only) */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot.is-pending { pointer-events: none; }
body.ecp-pdp-va-active .ecp-pdp-wapo-slot #yith-wapo-container,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-ghost {
    margin: 0;
    padding: 0;
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    overflow: visible;
    background: transparent !important;
}
/* 1.7.2: YITH sets an inline opacity 0.5 on its container while reloading; keep it solid (fades run on the slot / ghost) */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot #yith-wapo-container { opacity: 1 !important; }
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-ghost { position: absolute; pointer-events: none; }
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-block,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-addon,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .options-container,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .option-container,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-option {
    margin: 0;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-addon {
    padding: 0 0 16px;
    margin: 0 0 4px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-addon:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
/* Add-on heading ("PERSONALIZE YOUR MUG"): same uppercase language as the swatch labels, but navy + readable size */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .wapo-addon-title {
    margin: 0 0 10px;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #2a3a52;
    cursor: default;
    background: transparent !important;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .wapo-addon-title.ecp-pdp-wapo-title-empty { display: none; }
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .wapo-addon-title span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
/* 1.7.3: do not force raw YITH fields visible. The slot is visibility:hidden until the
   checkbox UI exists, but this rule used to set visibility:visible on .options-container,
   which punches through and paints the open "Name or Message" block (then JS hides it).
   Only fields we have placed in the customize panel, or required add-ons we keep open, are forced open. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-customize-panel .options-container,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-addon.ecp-pdp-wapo-keep .options-container {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
/* Raw add-ons (still direct YITH markup, not yet wrapped, or replaced by a live_print_blocks redraw)
   must not paint. The checkbox row is not an add-on, so the reserved / settled row is unaffected.
   Ghost clones are not #yith-wapo-container, so the collapse fade still shows the outgoing block. */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot > #yith-wapo-container .yith-wapo-addon:not(.ecp-pdp-wapo-keep) {
    display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot > #yith-wapo-container .ecp-pdp-wapo-customize-panel .yith-wapo-addon {
    display: block !important;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100%;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-option-value,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot input.yith-wapo-option-value,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot textarea.yith-wapo-option-value,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot select.yith-wapo-option-value {
    width: 100% !important;
    max-width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    border: 1.5px solid #b9c0ca;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 1.4;
    color: #2a3a52;
    background: #fff !important;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-has-count {
    position: relative;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-has-count .yith-wapo-option-value {
    padding-right: 68px;
}
/* Live character count (only when YITH sets a character limit) — sits inside the field, right edge */
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-count {
    position: absolute;
    right: 14px;
    top: 25px;
    transform: translateY(-50%);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-count.is-full {
    color: #2a3a52;
    font-weight: 800;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-count .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-option-value:focus {
    outline: 2px solid #2a3a52;
    outline-offset: 1px;
    border-color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-addon-label label,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .option-container label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: #2a3a52;
    margin-bottom: 8px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .option-container label .option-price {
    font-size: 15px;
    font-weight: 700;
    color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .ecp-pdp-wapo-optional-tag {
    font-size: 15px;
    font-weight: 400;
    color: #6b7280;
    text-transform: none;
    letter-spacing: normal;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .yith-wapo-option .description,
body.ecp-pdp-va-active .ecp-pdp-wapo-slot p.description {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #555f6d;
    margin: 8px 0 0;
    line-height: 1.5;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot .length-error-message {
    font-size: 14px;
    color: #b42318;
    margin-top: 6px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-slot #wapo-total-price-table {
    display: none !important;
}


/* Want to customize? Yes + custom checkbox (optional YITH addons) — 1.7.0 larger for 100% zoom */
body.ecp-pdp-va-active .ecp-pdp-wapo-customize {
    margin: 0;
    background: transparent;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-height: 36px;
    font-family: 'Lato', sans-serif;
    color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-prompt {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-yes {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #2a3a52;
    user-select: none;
    position: relative;
}
/* Hide native OS checkbox; custom square mirrors size-chip language */
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #9aa3af;
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-box::after {
    content: '';
    display: block;
    width: 7px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    margin-top: -2px;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-cb:checked + .ecp-pdp-wapo-customize-box {
    background: #2a3a52;
    border-color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-cb:checked + .ecp-pdp-wapo-customize-box::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-cb:focus-visible + .ecp-pdp-wapo-customize-box {
    outline: 2px solid #2a3a52;
    outline-offset: 2px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-yes:hover .ecp-pdp-wapo-customize-box {
    border-color: #2a3a52;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-yes-text {
    line-height: 1;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-cue {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.1px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel {
    display: flow-root; /* the first add-on's top margin stays inside: measured height = painted height while it morphs */
    padding: 0;
    background: transparent;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel > .yith-wapo-addon:first-child {
    margin-top: 14px;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel[hidden] {
    display: none !important;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel.is-morphing {
    display: flow-root !important;
    overflow: hidden;
    box-sizing: border-box;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel .yith-wapo-addon {
    margin-bottom: 14px;
    padding-bottom: 0;
}
body.ecp-pdp-va-active .ecp-pdp-wapo-customize-panel .yith-wapo-addon:last-child {
    margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
    body.ecp-pdp-va-active .ecp-pdp-wapo-customize-box,
    body.ecp-pdp-va-active .ecp-pdp-wapo-customize-box::after { transition: none; }
}

/* Reviews anchor */
body.ecp-pdp-va-active .ecp-pdp-reviews-anchor { max-width: 1280px; margin: 0 auto; padding: 20px 30px 60px; border-top: 1px solid #e8e8e8; }

/* Mobile */
@media (max-width: 900px) {
    body.ecp-pdp-va-active .ecp-pdp-layout { grid-template-columns: 1fr; gap: 24px; padding: 16px 20px 40px; }
    body.ecp-pdp-va-active .ecp-pdp-gallery-col { position: static; }
    body.ecp-pdp-va-active .ecp-pdp-gallery { flex-direction: column-reverse; }
    body.ecp-pdp-va-active .ecp-pdp-thumbnails { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    body.ecp-pdp-va-active .ecp-pdp-thumb { width: 60px; height: 60px; flex-shrink: 0; }
    body.ecp-pdp-va-active .ecp-pdp-title { font-size: 24px; }
    /* (badges row: equal-width wrap-safe layout defined in the Badges section) */
    body.ecp-pdp-va-active .ecp-pdp-reviews-anchor { padding: 20px 20px 40px; }
}


/* Multi-axis (Color + Size) */
body.ecp-pdp-va-active.ecp-pdp-mode-multi .ecp-pdp-swatch-group--color {
    margin-bottom: 14px;
}
body.ecp-pdp-va-active.ecp-pdp-mode-multi .ecp-pdp-swatch-group--size {
    margin-bottom: 16px;
}
body.ecp-pdp-va-active.ecp-pdp-mode-multi .ecp-pdp-swatch--color[data-in-stock="0"] {
    opacity: 0.45;
}

/* 1.7.0: low-stock note under Qty slides in/out on a glaze switch (JS ecpSetShown) instead of jumping */
body.ecp-pdp-va-active .ecp-pdp-low-stock.is-morphing {
    display: block !important;
    overflow: hidden;
}