/* ========================================================================
   Shop / product-detail polish overlay
   Applied on top of shop.css to push conversion + visual polish:
   plan-selector hierarchy, stronger CTAs, more confident trust row.
   ======================================================================== */

/* ---- Trust row: full strip, more confident -------------------------- */
.shop-detail-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 18px;
    margin: 18px 0 24px;
    background: #F9FAFB;
    border: 1px solid #EAECF0;
    border-radius: 14px;
}
.shop-detail-trust .shop-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    letter-spacing: -.005em;
}
.shop-detail-trust .shop-trust-item svg {
    width: 16px;
    height: 16px;
    color: #16A34A;
    flex: none;
}

/* ---- Price block: gentler hierarchy --------------------------------- */
.shop-detail-price .shop-price-big {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 38px);
    letter-spacing: -.02em;
    color: #101828;
}
.shop-detail-price .shop-price-old-big {
    color: #98A2B3;
    font-weight: 500;
}

/* ---- Plan selector: card depth + selected state -------------------- */
.shop-variations {
    margin: 24px 0;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 16px;
}
.shop-var-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.shop-var-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #344054;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
}

.shop-billing-toggle {
    display: inline-flex;
    padding: 4px;
    background: #F2EEFE;
    border-radius: 999px;
    gap: 2px;
}
.shop-billing-btn {
    border: 0;
    background: transparent;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shop-billing-btn:hover { color: #101828; }
.shop-billing-btn.active {
    background: #fff;
    color: #101828;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
}
.shop-billing-save {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #16A34A;
    background: #D1FAE5;
    padding: 2px 7px;
    border-radius: 999px;
}

/* Plan card */
.shop-var-card {
    position: relative;
    display: block;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1.5px solid #EAECF0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.shop-var-card:hover {
    border-color: rgba(127, 86, 217, .35);
    box-shadow: 0 4px 12px -4px rgba(127, 86, 217, .18);
}
.shop-var-card:has(.shop-var-radio:checked) {
    border-color: #7F56D9;
    background: linear-gradient(180deg, #F9F5FF 0%, #FFFFFF 100%);
    box-shadow: 0 0 0 3px rgba(127, 86, 217, .12),
                0 6px 18px -6px rgba(127, 86, 217, .25);
}
.shop-var-card--popular {
    border-color: rgba(244, 63, 94, .35);
}
.shop-var-popular-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #FB7185, #F43F5E);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 10px -2px rgba(244, 63, 94, .45);
}
.shop-var-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.shop-var-name {
    font-weight: 700;
    font-size: 15px;
    color: #101828;
    letter-spacing: -.005em;
}
.shop-var-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 700;
    color: #101828;
    font-size: 18px;
}
.shop-var-price .shop-price-old {
    font-size: 13px;
    font-weight: 500;
    color: #98A2B3;
    text-decoration: line-through;
}
.shop-var-period {
    font-size: 12px;
    font-weight: 500;
    color: #667085;
}

/* ---- CTA pair ------------------------------------------------------- */
.shop-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.shop-add-cart-btn,
.shop-buy-now-btn {
    flex: 1;
    height: 56px;
    padding: 0 20px;
    border-radius: 12px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* drift-killer: purchase buttons are icon-free, no ghost spacing */
    border: 1.5px solid transparent;
    line-height: 1;
}
.shop-add-cart-btn {
    color: #fff;
    background: linear-gradient(135deg, #FB7185 0%, #F43F5E 55%, #E11D48 100%);
    box-shadow: 0 10px 24px -8px rgba(244, 63, 94, .55),
                inset 0 1px 0 rgba(255, 255, 255, .18);
}
.shop-add-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgba(244, 63, 94, .65),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}
.shop-add-cart-btn:active { transform: translateY(0); }
/* Secondary CTA: coral-token ghost (coral text + 1px coral border) so it
   reads as a clear secondary to the solid coral primary, never purple.
   Token-driven (var(--c-cta-to)) so it stays aligned with the single
   coral conversion anchor. */
.shop-buy-now-btn {
    color: var(--c-cta-to, #F43F5E);
    background: #fff;
    border-color: color-mix(in srgb, var(--c-cta-to, #F43F5E) 35%, transparent);
}
.shop-buy-now-btn:hover {
    background: color-mix(in srgb, var(--c-cta-to, #F43F5E) 6%, #fff);
    border-color: var(--c-cta-to, #F43F5E);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .shop-detail-actions { flex-direction: column; }
}

/* ---- Title scale + safer wrap --------------------------------------- */
.shop-detail-title {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: #101828;
    font-size: clamp(28px, 3.6vw, 48px);
    margin: 6px 0 12px;
    text-wrap: balance;
}

/* ---- Subtle texture on the info column to give it editorial weight --- */
.shop-detail-info {
    position: relative;
}

/* ---- Variations spacing on subscription products: tighter ----------- */
.shop-var-card .shop-var-content { padding: 0; }

/* ---- Gallery: cinematic frame --------------------------------------- */
.shop-gallery-main {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(20, 14, 50, .22),
                0 4px 12px rgba(16, 24, 40, .06);
    background: linear-gradient(135deg, #FAF8FF, #FFF);
}

html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

.shop-price-unit {
    font-size: .5em;
    font-weight: 500;
    color: #667085;
    margin-left: 4px;
}

/* ===== Description content — globally consistent typography ============
   The legacy shop-desc-content rules use 15px body + tight heading
   spacing. Push them closer to the site-wide long-form scale so a product
   page reads like a Stripe/Notion doc, not a WooCommerce dump.
   ===================================================================== */
.shop-desc-content {
    font-size: 16px;
    line-height: 1.75;
    color: #344054;
    max-width: 780px;
}
.shop-desc-content > *:first-child { margin-top: 0; }
.shop-desc-content > *:last-child  { margin-bottom: 0; }

.shop-desc-content h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.22;
    color: #101828;
    letter-spacing: -0.015em;
    margin: 48px 0 16px;
}
.shop-desc-content h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(19px, 1.7vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    color: #101828;
    letter-spacing: -0.01em;
    margin: 36px 0 14px;
}
.shop-desc-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: #101828;
    margin: 28px 0 10px;
    line-height: 1.35;
}
.shop-desc-content > h2:first-child,
.shop-desc-content > h3:first-child {
    margin-top: 0;
}
.shop-desc-content p {
    margin: 0 0 18px;
}
.shop-desc-content ul,
.shop-desc-content ol {
    padding-left: 22px;
    margin: 0 0 22px;
}
.shop-desc-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.shop-desc-content li::marker {
    color: #7F56D9;
}
.shop-desc-content img {
    border-radius: 14px;
    margin: 24px 0;
    box-shadow: 0 8px 32px -12px rgba(16, 24, 40, 0.18);
}
.shop-desc-content blockquote {
    border-left: 3px solid #7F56D9;
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    color: #475467;
    font-style: italic;
}
.shop-desc-content code {
    background: rgba(127, 86, 217, 0.08);
    color: #6941C6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
}

/* Description tabs — refine to match global lift */
.shop-desc-tab {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    padding: 16px 26px;
}
.shop-desc-panel {
    padding: 36px 0 0;
}
.shop-description {
    padding-top: 24px;
    padding-bottom: 64px;
}

@media (max-width: 720px) {
    .shop-desc-content { font-size: 15.5px; line-height: 1.7; }
    .shop-desc-content h2 { margin-top: 36px; }
    .shop-desc-content h3 { margin-top: 28px; }
    .shop-desc-tab { padding: 12px 18px; font-size: 13.5px; }
    .shop-desc-panel { padding-top: 24px; }
    .shop-description { padding-bottom: 48px; }
}

/* ============================================================================
   PDP v2 (2026-06-02) — header-eq width, sticky gallery, badge breathing room,
   equal CTAs, sticky purchase bar, canonical FAQ, cohesive cross-sell.
   Loaded LAST so it overrides shop.css. Adaptive: hardware vs software handled
   in the view (.shop-detail--hardware / --software body classes not needed —
   copy/labels switch in markup; styling below is shared).
   ============================================================================ */

/* --- Width: every PDP top-level zone = header content width (1280) ---------
   .shop-detail + .shop-description already use --shop-max-w in shop.css; we pin
   the same token explicitly so all zones track the header 1-for-1. The related
   section stays FULL-BLEED (bg + border span the viewport); its inner
   .shop-related is the 1280 container, so we never constrain the section. */
.shop-detail,
.shop-description {
    max-width: var(--hdr-container-max, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hdr-px, 24px);
    padding-right: var(--hdr-px, 24px);
    box-sizing: border-box;
}
.shop-detail {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
    padding-top: clamp(24px, 3.4vw, 40px);
}

/* --- Gallery: ONE clean frame (own it; beats shop.css + cart.css) -----------
   Product is large and lifted off a soft radial surface with a drop-shadow — no
   box-in-box, no lavender wash, no fat inset padding. Badge top-left, expand
   top-right, arrows on hover, thumb strip below. Matches the reference store. */
.shop-detail .shop-gallery {
    position: sticky;
    top: 88px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.shop-detail .shop-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    border: none;
    background: #F5F7F9;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .06);
    display: block;
    padding: 0;
    cursor: zoom-in;
}
/* Direct image: fill the rounded frame edge-to-edge (cover), no padding/border */
.shop-detail .shop-gallery-main img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    filter: none;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .15s;
}
.shop-detail .shop-gallery-main:hover img { transform: scale(1.03); }

/* Expand affordance (top-right) + discount chip (top-left), both inside frame */
.shop-gallery-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;   /* match the global button{min-height:44} so it's a true circle, not an ellipse */
    aspect-ratio: 1;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .1);
    color: #475467;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s, color .15s;
}
.shop-gallery-zoom:hover { background: #fff; color: #101828; transform: scale(1.06); }
/* Discount chip: vivid coral, bold, unmistakable */
.shop-badge-detail {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 7px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(244, 63, 94, .42);
}

/* Main image: square + cover (consistent with the square cover thumbnails) */
.shop-detail .shop-gallery-main,
.shop-detail .shop-gallery-main--tall { aspect-ratio: 1 / 1; }

/* Track padding so the active thumb's outset ring isn't clipped by overflow */
.shop-detail .shop-gallery-thumbs { padding: 4px; gap: 10px; }
.shop-detail .shop-gallery-thumbs-wrap { margin: 0 -4px; }
/* Thumbs: cover, square, rounded, no border/padding; faint ring → coral ring when active */
.shop-detail .shop-gallery-thumb {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 12px;
    padding: 0;
    border: none;
    background: #F2F4F7;
    overflow: hidden;
    opacity: 1;
    box-shadow: 0 0 0 1px #EAECF0;
    transition: box-shadow .15s;
}
.shop-detail .shop-gallery-thumb:hover { box-shadow: 0 0 0 1px #D0D5DD; }
.shop-detail .shop-gallery-thumb.active { box-shadow: 0 0 0 2px var(--c-cta-to, #F43F5E); }
.shop-detail .shop-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.shop-gallery-thumb--video::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(16, 24, 40, .6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><polygon points='8 5 19 12 8 19'/></svg>") center / 11px no-repeat;
}

/* --- Package selector: keyboard + screen-reader operable -------------------
   shop.css hides the radios with display:none, which removes them from the tab
   order AND the a11y tree — a keyboard/SR user cannot choose a package (the
   primary purchase decision). Swap to visually-hidden-but-focusable so the
   native radio group stays operable (Tab in, arrows to switch); add a visible
   focus ring on the owning card. */
.shop-variations .shop-var-radio {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.shop-var-card:has(.shop-var-radio:focus-visible) {
    outline: 2px solid var(--shop-purple, #7F56D9);
    outline-offset: 2px;
}

/* --- Variation cards: badge breathing room + clearer rhythm --------------- */
.shop-variations { padding: 20px 20px 8px; }
.shop-var-card { padding: 15px 18px; margin-bottom: 12px; }
/* Popular card carries a floating badge → give it head-room so the badge never
   crowds the name; add a touch more separation from the card above. */
.shop-var-card--popular { margin-top: 18px; padding-top: 18px; }
.shop-var-popular-badge { top: -11px; }

/* --- CTA pair: guaranteed-equal box, slightly taller for confidence ------- */
/* CTA pair: side-by-side on desktop, equal-height confident buttons. Selectors
   are deliberately specific (.shop-detail-info .shop-detail-actions …) to win
   over cart.css's single-class base regardless of stylesheet order. */
.shop-detail-info .shop-detail-actions {
    flex-direction: row;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 24px;
}
.shop-detail-info .shop-detail-actions .shop-add-cart-btn,
.shop-detail-info .shop-detail-actions .shop-buy-now-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    height: 54px;
    min-height: 54px;
    padding: 0 24px;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: 12px;
}
/* Below 992px .shop-detail-info is display:contents, so .shop-detail-actions
   becomes a direct (shrink-wrapped) flex child of .shop-detail — force it full
   width or the buttons collapse to ~133px and look broken. */
@media (max-width: 991px) {
    .shop-detail .shop-detail-actions { width: 100%; align-self: stretch; }
}
@media (max-width: 600px) {
    .shop-detail-info .shop-detail-actions { flex-direction: column; }
    .shop-detail-info .shop-detail-actions .shop-add-cart-btn,
    .shop-detail-info .shop-detail-actions .shop-buy-now-btn { width: 100%; }
}

/* Buy Now = coral-tinted ghost (ties to the coral primary), shared by the inline
   pair and the sticky bar so the two contexts read identically. */
.shop-detail-actions .shop-buy-now-btn,
.shop-sticky-actions .shop-buy-now-btn {
    background: #fff;
    color: var(--c-cta-to, #F43F5E);
    border: 1.5px solid color-mix(in srgb, var(--c-cta-to, #F43F5E) 32%, #fff);
}
.shop-detail-actions .shop-buy-now-btn:hover,
.shop-sticky-actions .shop-buy-now-btn:hover {
    color: var(--c-cta-to, #F43F5E);
    border-color: var(--c-cta-to, #F43F5E);
    background: color-mix(in srgb, var(--c-cta-to, #F43F5E) 6%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(244, 63, 94, .14);
}

/* --- FAQ: the EXACT hx-faq component (same one the landings + Kiosk landing
   use). Bound to the site's single FAQ system instead of a bespoke accordion —
   native <details>, two real columns, circled chevron. Rules copied verbatim
   from home-extra.css so the PDP is byte-identical without loading the whole
   landing stylesheet. */
/* Left-aligned, full content width (1280); heading matches landing .hx-h2 exactly */
.shop-faq-w { max-width: none; margin: 0; }
.shop-faq-head { margin-bottom: 24px; text-align: left; }
.shop-faq-head h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #101828;
    margin: 0;
}
.hx-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; }
.hx-faq-col { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 768px) { .hx-faq { grid-template-columns: 1fr; } }
.hx-faq-item { background: #fff; border: 1px solid #EAECF0; border-radius: 14px; overflow: hidden; transition: border-color .14s; }
.hx-faq-item[open] { border-color: rgba(127, 86, 217, .3); }
.hx-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #101828;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
}
.hx-faq-item summary::-webkit-details-marker { display: none; }
.hx-faq-item summary::after {
    content: '';
    width: 20px;
    height: 20px;
    background: #F4F5F7;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .14s;
}
.hx-faq-item[open] summary::after { transform: rotate(180deg); }
.hx-faq-body { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.65; color: #667085; }
.hx-faq-body a { color: var(--c-cta-to, #F43F5E); font-weight: 600; }

/* --- Cross-sell: even 4-up grid that degrades cleanly with few items -------- */
.shop-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.shop-related-section .shop-section-title {
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    color: #101828;
    margin-bottom: 24px;
    letter-spacing: -.01em;
}
.shop-related-section { padding: clamp(56px, 6vw, 88px) 0; }
@media (max-width: 1100px) { .shop-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .shop-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .shop-related-grid { grid-template-columns: 1fr; } }

/* --- Desktop sticky purchase bar (max-conversion, hidden < 900px) ----------
   Mirrors the checkout sticky-bar pattern: blurred white shell pinned to the
   viewport bottom, name + live price on the left, Add to Cart + Buy Now on the
   right. Revealed by IntersectionObserver once the inline .shop-detail-actions
   scrolls above the fold. Mobile keeps its own .shop-mobile-cta-bar. */
.shop-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #EAECF0;
    box-shadow: 0 -6px 24px rgba(16, 24, 40, .08);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    padding: 12px 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.shop-sticky-bar.visible { transform: translateY(0); }
.shop-sticky-inner {
    max-width: var(--hdr-container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--hdr-px, 24px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.shop-sticky-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.shop-sticky-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: contain;
    background: #F7F6FB;
    border: 1px solid #F0EEF6;
    flex: 0 0 auto;
}
.shop-sticky-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.shop-sticky-name {
    font-weight: 700;
    font-size: 15px;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46ch;
}
.shop-sticky-price { font-weight: 800; font-size: 16px; color: #101828; line-height: 1.1; }
.shop-sticky-price .shop-price-unit { font-size: 13px; font-weight: 600; color: #667085; }
.shop-sticky-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.shop-sticky-actions .shop-add-cart-btn,
.shop-sticky-actions .shop-buy-now-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 168px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    font-size: 15px;
}
@media (max-width: 900px) { .shop-sticky-bar { display: none; } }

/* ============================================================================
   PDP v3 (2026-06-02) — payment trust bar, mobile layout repair, alignment.
   ============================================================================ */

/* --- "Guaranteed safe checkout" payment bar under the CTA pair ------------- */
.shop-safe-checkout {
    margin: 4px 0 8px;
    padding: 16px;
    border: 1px dashed #E4E7EC;
    border-radius: 12px;
    text-align: center;
    background: #FCFCFD;
}
.shop-safe-checkout .shop-safe-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98A2B3;
    margin-bottom: 10px;
}
.shop-safe-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.shop-safe-cards svg,
.shop-safe-cards img { height: 26px; width: auto; border-radius: 4px; }
.shop-safe-cards .shop-pay-card {
    height: 26px;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid #EAECF0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #344054;
}

/* --- Desktop: gallery top aligns with the breadcrumb (reference store) ------
   align-self:start keeps both columns at the grid row start; the gallery sits
   at the same Y as the breadcrumb. */
.shop-detail { align-items: start; }
.shop-detail .shop-gallery { margin-top: 0; }
.shop-detail-info > .shop-detail-breadcrumb:first-child { margin-top: 0; }

/* --- Mobile: repair the display:contents + order interleave ----------------
   The shared shop.css uses order on flex children; combined with the old gallery
   box this produced overlapping rows and big dead gaps. Here we give each zone a
   calm, explicit rhythm and a clean gallery so nothing collides. */
@media (max-width: 991px) {
    .shop-detail { gap: 0; }
    .shop-detail > *,
    .shop-detail-info > * { margin-left: 0; margin-right: 0; }

    .shop-detail-breadcrumb { order: 1; margin: 0 0 6px; }
    .shop-detail-title { order: 2; margin: 0 0 8px; }
    .shop-detail-rating { order: 3; margin: 0 0 14px; }

    .shop-detail .shop-gallery {
        order: 4;
        position: static;
        margin: 0 0 16px;
        gap: 10px;
    }
    .shop-detail .shop-gallery-main {
        aspect-ratio: 4 / 5;       /* taller frame suits the upright kiosk on phones */
        max-height: 62vh;
    }
    .shop-detail .shop-gallery-thumb { width: 60px; height: 60px; }

    .shop-detail-trust { order: 5; margin: 0 0 14px; gap: 12px 18px; }
    .shop-detail-price { order: 6; margin: 0 0 12px; padding-bottom: 0; }
    .shop-detail-short { order: 7; margin: 0 0 12px; }
    .shop-detail-short-toggle { order: 7; }
    .shop-variations { order: 8; margin: 0 0 16px; }
    .shop-detail-info .shop-detail-actions { order: 9; margin: 0 0 4px; }
    .shop-safe-checkout { order: 10; margin: 0 0 8px; }
    .shop-detail-meta { order: 11; }
}

/* --- Mobile: package cards need breathing room (were cramped) -------------- */
@media (max-width: 600px) {
    .shop-variations { padding: 16px 14px 6px; }
    .shop-var-card { padding: 16px 16px; margin-bottom: 12px; }
    .shop-var-card--popular { margin-top: 22px; }
    .shop-var-content { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
    .shop-var-name { font-size: 15px; }
    .shop-var-price { font-size: 15px; }
}

/* --- Package preview slide (placeholder) injected into the gallery --------- */
#galleryMainImg.is-package-preview { filter: none; max-width: 100%; max-height: 100%; }

/* ============================================================================
   PDP v4 (2026-06-02) — real pay logos, full-width mobile boxes, consent fix.
   ============================================================================ */

/* Real card logos in the safe-checkout row */
.shop-safe-cards .shop-pay-logo { display: inline-flex; line-height: 0; }
.shop-safe-cards .shop-pay-logo svg { height: 30px; width: 45px; display: block; }

/* Mobile: package selector + safe-checkout span the full column (were inset) */
@media (max-width: 991px) {
    .shop-detail .shop-variations,
    .shop-detail .shop-safe-checkout {
        width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }
    /* Calmer, even vertical rhythm for the interleaved mobile stack */
    .shop-detail .shop-description { margin-top: 8px; }
}
@media (max-width: 600px) {
    .shop-safe-checkout { padding: 14px 12px; }
    .shop-safe-cards { gap: 6px; }
    .shop-safe-cards .shop-pay-logo svg { height: 28px; width: 42px; }
}

/* Keep the global cookie-consent banner clear of the PDP product + buy zone:
   center it at the bottom (off the left gallery and right buy column on desktop)
   and lift it above the sticky mobile CTA bar so Add to Cart is never covered. */
body:has(.shop-detail) .ck-banner {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(560px, calc(100% - 32px));
    bottom: 20px;
}
@media (max-width: 991px) {
    body:has(.shop-detail) .ck-banner {
        width: calc(100% - 24px);
        bottom: calc(82px + env(safe-area-inset-bottom));
    }
}

/* ============================================================================
   PDP v5 (2026-06-02) — landing/PDP hybrid bands (stock, value, B2B, closing).
   Full-bleed sections (PDP renders FullWidth); inner *-w wrappers = 1280.
   ============================================================================ */

/* Stock + lead-time line under the price (physical) */
.shop-stock-line { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 6px; font-size: 13.5px; font-weight: 600; color: #067647; }
.shop-stock-line svg { color: #16A34A; flex: none; }

/* Value band (full-bleed light) */
.shop-vp { background: #FAFAFB; border-top: 1px solid #EEF0F3; padding: clamp(48px, 6vw, 80px) 0; }
.shop-vp-w { max-width: var(--hdr-container-max, 1280px); margin: 0 auto; padding: 0 var(--hdr-px, 24px); box-sizing: border-box; }
.shop-vp-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7F56D9; margin-bottom: 20px; }
.shop-vp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shop-vp-card { background: #fff; border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; }
.shop-vp-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #F4F0FF; color: #7F56D9; margin-bottom: 14px; }
.shop-vp-card h3 { font-size: 17px; font-weight: 700; color: #101828; margin: 0 0 6px; }
.shop-vp-card p { font-size: 14px; line-height: 1.6; color: #667085; margin: 0; }
@media (max-width: 820px) { .shop-vp-grid { grid-template-columns: 1fr; } }

/* B2B quote/demo band (content-width card on white) */
.shop-b2b { background: #fff; padding: clamp(36px, 4.5vw, 56px) 0; }
.shop-b2b-w { max-width: var(--hdr-container-max, 1280px); margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: linear-gradient(120deg, #F9F5FF, #FFF 70%); border: 1px solid #EAE3FB; border-radius: 20px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px); }
/* keep the card inset from the viewport edge to match other zones */
.shop-b2b { padding-left: var(--hdr-px, 24px); padding-right: var(--hdr-px, 24px); }
.shop-b2b-copy h2 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.01em; color: #101828; margin: 0 0 6px; }
.shop-b2b-copy p { font-size: 15px; line-height: 1.6; color: #667085; margin: 0; max-width: 62ch; }
.shop-b2b-cta { display: flex; gap: 12px; flex: 0 0 auto; }
.shop-b2b-primary, .shop-b2b-secondary { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.shop-b2b-primary { color: #fff; background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C), var(--c-cta-to, #F43F5E)); box-shadow: 0 10px 24px -10px rgba(244, 63, 94, .5); }
.shop-b2b-primary:hover { transform: translateY(-1px); }
.shop-b2b-secondary { color: #344054; background: #fff; border: 1.5px solid #D0D5DD; }
.shop-b2b-secondary:hover { border-color: #7F56D9; color: #7F56D9; }
@media (max-width: 680px) { .shop-b2b-w { flex-direction: column; align-items: flex-start; } .shop-b2b-cta { width: 100%; } .shop-b2b-primary, .shop-b2b-secondary { flex: 1; } }

/* Closing CTA band (dark — landing signature) */
.shop-closing { background: #0B0420; color: #fff; padding: clamp(56px, 7vw, 96px) 0; text-align: center; position: relative; overflow: hidden; }
.shop-closing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(127, 86, 217, .35), transparent 70%); pointer-events: none; }
.shop-closing-w { position: relative; max-width: 720px; margin: 0 auto; padding: 0 var(--hdr-px, 24px); }
.shop-closing-w h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 14px; color: #fff; }
.shop-closing-w p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 28px; }
.shop-closing-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.shop-closing-primary, .shop-closing-secondary { display: inline-flex; align-items: center; justify-content: center; height: 54px; min-height: 54px; padding: 0 28px; border-radius: 12px; font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.shop-closing-primary { color: #fff; background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C), var(--c-cta-to, #F43F5E)); box-shadow: 0 12px 28px -10px rgba(244, 63, 94, .6); }
.shop-closing-primary:hover { transform: translateY(-1px); }
.shop-closing-secondary { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .25); }
.shop-closing-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* ============================================================================
   PDP v6 (2026-06-02) — physical landing/PDP hybrid body
   (features / how-it-works / video / specs / ROI). Placeholder-friendly.
   ============================================================================ */
.shop-lp { padding: clamp(48px, 6vw, 88px) 0; background: #fff; }
.shop-lp--tint { background: #FAFAFB; border-top: 1px solid #EEF0F3; border-bottom: 1px solid #EEF0F3; }
.shop-lp-w { max-width: var(--hdr-container-max, 1280px); margin: 0 auto; padding: 0 var(--hdr-px, 24px); box-sizing: border-box; }
.shop-lp-w--narrow { max-width: 880px; }
.shop-lp-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7F56D9; margin-bottom: 12px; }
.shop-lp-eyebrow--light { color: rgba(255, 255, 255, .75); }
.shop-lp-h2 { font-family: 'Inter', sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: #101828; margin: 0 0 10px; }
.shop-lp-h2--light { color: #fff; }
.shop-lp-sub { font-size: 16px; line-height: 1.6; color: #667085; margin: 0 0 28px; max-width: 60ch; }
.shop-lp-sub--light { color: rgba(255, 255, 255, .72); }

.shop-lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shop-lp-feat { background: #fff; border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; }
.shop-lp-feat-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #F4F0FF; color: #7F56D9; margin-bottom: 14px; }
.shop-lp-feat h3 { font-size: 17px; font-weight: 700; color: #101828; margin: 0 0 6px; }
.shop-lp-feat p { font-size: 14px; line-height: 1.6; color: #667085; margin: 0; }
@media (max-width: 900px) { .shop-lp-feat-grid { grid-template-columns: 1fr; } }

.shop-lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-lp-step { padding-top: 8px; }
.shop-lp-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C), var(--c-cta-to, #F43F5E)); color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.shop-lp-step h3 { font-size: 18px; font-weight: 700; color: #101828; margin: 0 0 6px; }
.shop-lp-step p { font-size: 14.5px; line-height: 1.6; color: #667085; margin: 0; }
@media (max-width: 760px) { .shop-lp-steps { grid-template-columns: 1fr; } }

.shop-lp-videoframe { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 120% at 50% 40%, #2A2342, #0B0420); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid #EAECF0; }
.shop-lp-play { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(244, 63, 94, .95); box-shadow: 0 10px 30px -8px rgba(244, 63, 94, .6); padding-left: 4px; }
.shop-lp-video-note { font-size: 13px; color: rgba(255, 255, 255, .7); letter-spacing: .02em; }

.shop-lp-spectable { width: 100%; border-collapse: collapse; border: 1px solid #EAECF0; border-radius: 14px; overflow: hidden; }
.shop-lp-spectable th, .shop-lp-spectable td { text-align: left; padding: 14px 18px; font-size: 14.5px; border-bottom: 1px solid #EEF0F3; }
.shop-lp-spectable tr:last-child th, .shop-lp-spectable tr:last-child td { border-bottom: 0; }
.shop-lp-spectable th { width: 36%; font-weight: 700; color: #344054; background: #FAFAFB; }
.shop-lp-spectable td { color: #667085; }
.shop-lp-spec-note { font-size: 12.5px; color: #98A2B3; margin: 12px 2px 0; }

.shop-lp-roi { background: #0B0420; position: relative; overflow: hidden; text-align: center; }
.shop-lp-roi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 0%, rgba(127, 86, 217, .4), transparent 70%); pointer-events: none; }
.shop-lp-roi .shop-lp-w { position: relative; }
.shop-lp-roi .shop-lp-sub { margin-left: auto; margin-right: auto; }
.shop-lp-stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 72px); flex-wrap: wrap; margin: 8px 0 28px; }
.shop-lp-stat { display: flex; flex-direction: column; gap: 4px; }
.shop-lp-stat-num { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; background: linear-gradient(135deg, #FB7185, #FCD34D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shop-lp-stat-lbl { font-size: 13px; color: rgba(255, 255, 255, .65); }
.shop-lp-roi-cta { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 30px; border-radius: 12px; font-size: 15.5px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C), var(--c-cta-to, #F43F5E)); box-shadow: 0 12px 28px -10px rgba(244, 63, 94, .6); transition: transform .15s; }
.shop-lp-roi-cta:hover { transform: translateY(-1px); }

/* ============================================================================
   PDP v7 (2026-06-02) — clean global-standard physical body: section shell,
   package-synced "What's included", image-led story rows, specs.
   (Supersedes the v6 card-grid clutter; old .shop-lp-*/.shop-vp-*/.shop-b2b-*
   rules are now unused.)
   ============================================================================ */
.shop-sec { padding: clamp(48px, 6vw, 88px) 0; background: #fff; }
.shop-sec--tint { background: #FAFAFB; border-top: 1px solid #EEF0F3; border-bottom: 1px solid #EEF0F3; }
.shop-sec-w { max-width: var(--hdr-container-max, 1280px); margin: 0 auto; padding: 0 var(--hdr-px, 24px); box-sizing: border-box; }
.shop-sec-w--narrow { max-width: 860px; }
.shop-sec-h2 { font-family: 'Inter', sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: #101828; margin: 0 0 24px; }
.shop-sec-sub { font-size: 16px; line-height: 1.6; color: #667085; max-width: 64ch; margin: -8px 0 28px; }
/* Add-on example-output gallery */
.shop-examples-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shop-example { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border: 1px solid #EAECF0; background: #F4F6F8; }
.shop-example img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.shop-example:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .shop-examples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shop-examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* What's included (synced to the selected package) */
.shop-incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; max-width: 940px; }
.shop-incl-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: #344054; }
.shop-incl-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #ECFDF3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat; }
.shop-incl-list li.shop-incl-lead { grid-column: 1 / -1; padding-left: 0; font-weight: 700; color: #101828; }
.shop-incl-list li.shop-incl-lead::before { display: none; }
@media (max-width: 680px) { .shop-incl-list { grid-template-columns: 1fr; } }

/* Image-led story rows */
.shop-story-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.shop-story-row + .shop-story-row { margin-top: clamp(40px, 5vw, 72px); }
.shop-story-row--rev .shop-story-media { order: 2; }
.shop-story-media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: radial-gradient(130% 130% at 50% 35%, #F4F6F8, #E7EAEE); display: flex; align-items: center; justify-content: center; border: 1px solid #EAECF0; }
.shop-story-media--video { background: radial-gradient(120% 120% at 50% 40%, #2A2342, #0B0420); }
.shop-story-medialabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #98A2B3; }
.shop-story-media--video .shop-story-medialabel { color: rgba(255, 255, 255, .7); position: absolute; bottom: 16px; }
.shop-story-play { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(244, 63, 94, .95); box-shadow: 0 10px 30px -8px rgba(244, 63, 94, .6); padding-left: 4px; }
.shop-story-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7F56D9; margin-bottom: 10px; }
.shop-story-h3 { font-family: 'Inter', sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #101828; margin: 0 0 10px; }
.shop-story-copy p { font-size: 16px; line-height: 1.65; color: #667085; margin: 0; }
@media (max-width: 820px) { .shop-story-row { grid-template-columns: 1fr; gap: 20px; } .shop-story-row--rev .shop-story-media { order: 0; } }
/* Story media images fill the tile; video slot gets a dark scrim so the
   play button + label stay legible over the poster. */
.shop-story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-story-media--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,4,32,.15), rgba(11,4,32,.55)); }
.shop-story-play { position: relative; z-index: 2; }
.shop-story-media--video .shop-story-medialabel { z-index: 2; }

/* Specs table */
.shop-spectable { width: 100%; border-collapse: collapse; border: 1px solid #EAECF0; border-radius: 14px; overflow: hidden; background: #fff; }
.shop-spectable th, .shop-spectable td { text-align: left; padding: 14px 18px; font-size: 14.5px; border-bottom: 1px solid #EEF0F3; }
.shop-spectable tr:last-child th, .shop-spectable tr:last-child td { border-bottom: 0; }
.shop-spectable th { width: 36%; font-weight: 700; color: #344054; }
.shop-spectable td { color: #667085; }
.shop-spec-note { font-size: 12.5px; color: #98A2B3; margin: 12px 2px 0; }