/* Sold-out gate (Slice C5) — visual disabled state on the add-to-cart button when
   the resolved variant is tracked and at 0 (backorders off). The button STAYS
   clickable so the blocked click can toast the out-of-stock message
   (variations_cl.hasErrors reads data-vr-soldout set by Product_cl).
   Two classes, not the id it had until 15-10-2026 (G103): the button also carries `is-disabled`, and a button
   design with its Disabled state on (`.cl-preset-N.cl-preset-N.is-disabled`) outranks this dim — for the properties
   it sets. So the dim is opacity only (its grayscale(0.4) went on 16-10-2026, G115: no Disabled state ever undid it):
   the shipped Disabled state (`opacity:0.6`) is then the whole look, and a merchant's Disabled state must set an
   opacity of its own to replace 0.55. It reaches the thank-you upsell's button (no id) and the sticky bar's too. */
.cl-addtocart-button.cl-is-soldout,
.cl-buynow-button.cl-is-soldout,
.cl-sticky-bt.cl-is-soldout {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A sold-out pick (stock per variation): the order blocks the store prints in the product page — the checkout and
   the cart (each in its design's wrapper), their custom blocks, and the quantity offers — are hidden until an
   available option is picked. The class comes from Product_cl._applyStockGate, or from the server when every option
   is sold out (owner, 30-10-2026). A quick view gets the same class for its quantity offers, and the quantity field
   goes with them — beside the add button, in the quick view, and in the sticky bar (which gets the class itself: it
   lives in <body>). Its value stays, so it still matches the selected tier when an available option is picked. */
.cl-product-page.cl-order-blocks-off [cl-design^="checkout-"],
.cl-product-page.cl-order-blocks-off [cl-design^="cart-"],
.cl-product-page.cl-order-blocks-off [data-compo="checkout"],
.cl-product-page.cl-order-blocks-off [data-compo="cart"],
.cl-product-page.cl-order-blocks-off .cl_qty_offers,
.cl-product-quickview.cl-order-blocks-off .cl_qty_offers,
.cl-product-page.cl-order-blocks-off .cl-qty-container,
.cl-product-quickview.cl-order-blocks-off .cl-qty-container,
#cl_sticky_button.cl-order-blocks-off .cl-sticky-qty {
    display: none;
}

/* Back-in-stock waitlist (Slice F) — revealed by the stock gate when sold out */
.cl-stock-waitlist {
    margin-top: 12px;
}
.cl-stock-waitlist-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.cl-stock-waitlist-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* flex-basis 150px + wrap: each field keeps a usable width and drops to the
   next line instead of squeezing to ~80px when 2-3 fields are enabled on a
   narrow (mobile) screen. */
.cl-stock-waitlist-row .cl-stock-waitlist-email,
.cl-stock-waitlist-row .cl-stock-waitlist-phone,
.cl-stock-waitlist-row .cl-stock-waitlist-name {
    flex: 1 1 150px;
    min-width: 0;
}
/* The waitlist in a pop-up (G125): a link that reads as one, and the pop-up's width and inner space, as the options
   error pop-up's (public.css). Their looks are the design's: the link's text style, the pop-up's card, its title's text
   style, the button design. */
.cl-stock-waitlist-open {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cl-stock-waitlist-popup .cl_modal_container {
    width: min(440px, 94vw);
}
.cl-stock-waitlist-popup .cl_modal_body {
    padding: 10px;
}

/* Colour swatch: the view prints the colour as a variable and this rule paints it (views carry
   no inline CSS). Until 08-10-2026 it was an inline background-color, and the admin preview's
   live edit of the swatch size (vr_colorbox_style, which sizes this span), which then replaced
   the span's whole inline style, blanked it until the preview reloaded. Only the product's own
   variations box: a listing card's dot prints the same variable and plist1.css paints it. */
.cl_variations.cl_product_block .cl-vr-colorbox ul li span:nth-child(1) {
    background-color: var(--cl-vr-swatch-color);
}

/* A sold-out option (15-10-2026, G103): product.js puts vr-is-soldout on every option whose combination is sold out,
   given the other groups' picks; it stays pickable, so the waitlist can show. vr_soldout_option_display (a class on
   .cl_variations) draws it as Shopify Dawn does: a colour or a photo at 40 % with a line across the option, a text
   button at 60 % and struck through. Only a swatch's fill dims, so a picked one keeps its full picked frame. */
.cl_variations.vr-soldout-cross .cl-vr-colorbox ul li.vr-is-soldout span:nth-child(1),
.cl_variations.vr-soldout-dim .cl-vr-colorbox ul li.vr-is-soldout span:nth-child(1),
.cl_variations.vr-soldout-cross .cl-vr-images ul li.vr-is-soldout img,
.cl_variations.vr-soldout-dim .cl-vr-images ul li.vr-is-soldout img {
    opacity: 0.4;
}
.cl_variations.vr-soldout-cross .cl-vr-buttons ul li.vr-is-soldout,
.cl_variations.vr-soldout-dim .cl-vr-buttons ul li.vr-is-soldout {
    opacity: 0.6;
}
/* !important: an option design with "Force styles" on compiles `text-decoration: none !important` (dev1's preset 11,
   measured 15-10-2026), and the mark must still show. */
.cl_variations.vr-soldout-cross .cl-vr-buttons ul li.vr-is-soldout {
    text-decoration: line-through !important;
}
/* The line, from the bottom-left corner of the option to its top-right (Dawn's -45°; the option is already
   position:relative, variations generated_css.php), in the option's text colour with a white edge so it shows on a
   dark colour too. */
.cl_variations.vr-soldout-cross .cl-vr-colorbox ul li.vr-is-soldout::after,
.cl_variations.vr-soldout-cross .cl-vr-images ul li.vr-is-soldout::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to top left, transparent calc(50% - 2.5px), rgba(255, 255, 255, 0.85) calc(50% - 2.5px), rgba(255, 255, 255, 0.85) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

/* Each piece's price under its options, while the pieces of one line are combinations at different prices (PR-16;
   product.js _showPiecePrices). In the options' own text colour; the regular price struck and dimmed. Under :where(),
   one class: the design's text style for it (vr_piece_price_text_preset, .cl-preset-{id} twice) sets its font. */
:where(.cl_variations) .cl-vr-piece-price {
    margin-top: 6px;
    font-size: 0.9em;
}
.cl_variations .cl-vr-piece-price .cl-vr-piece-regular {
    opacity: 0.6;
}

/* ── Variation option list: slider mode (vr_{buttons,colorbox,images}_layout) ──
   Mirrors the card's rules (plist1.css ~733-806) scoped to this compo instead.
   Duplicated rather than shared on purpose: the card's copy is `.plist1`-scoped
   and slider.css's rules target `.cl_list`, which the variations <ul>
   never carries — so neither reaches here. Per CLAUDE.md, a class used by 2-3
   compos lives in each compo's own CSS.

   Grid mode is NOT here: its column counts are merchant-set, so they compile
   per-instance in generated_css.php. Only the structural slider bits are
   static enough to live in a stylesheet. */
.cl_variations .cl-vr-parent.cl_slider {
    position: relative;
}
.cl_variations .cl-vr-items ul.cl-vr-elements[data-slider="true"] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Deliberately NO `scroll-behavior: smooth`. In this exact layout (flex UL
       inside a flex row, scroll-snap mandatory) Chrome silently drops scrollLeft
       mutations when scroll-behavior is smooth, so the arrows become no-ops.
       slider_cl still passes behavior explicitly in its scrollTo() calls. The
       view also sends data-slider-scroll-behavior="auto" for the same reason —
       belt and braces, both verified on the card before being copied here. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cl_variations .cl-vr-items ul.cl-vr-elements[data-slider="true"]::-webkit-scrollbar {
    display: none;
}
/* Intentionally NO `min-width: 0` on the LI — the merchant's Min width (Variations
   settings, one per type) compiles onto the LI, and a blanket
   min-width here would silently beat it on every slider chip. Same call the
   card documents at plist1.css:758. */
.cl_variations .cl-vr-items ul.cl-vr-elements[data-slider="true"] > li.cl_item {
    scroll-snap-align: start;
    flex: 0 0 auto;
}
.cl_variations .cl-vr-parent.cl_slider .cl_slider_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 0;
}

/* Inline arrows: prev/next sit on the SIDES of the track rather than below it.
   `display:contents` lets the nav's buttons participate directly in the row's
   flex layout while slider_cl still resolves them via
   wrapper.find('.cl_slider_nav').find('.cl_slider_prev'). */
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row > .cl_slider_nav_arrows_only,
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row > .cl_slider_nav_arrows_only > .cl_slider_arrows {
    display: contents;
}
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row .cl_slider_prev {
    order: 1;
    flex-shrink: 0;
}
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row > ul.cl-vr-elements {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
}
.cl_variations .cl-vr-parent.cl_slider.cl-vr-arrows-inline .cl-vr-slider-row .cl_slider_next {
    order: 3;
    flex-shrink: 0;
}

/* Stories / reviews section titles. They were an <h3> inside this div, and the gap
   under the title was the browser's h3 margin (1em, so it grew with the font size).
   Since 26-09-2026 the preset sits on this div and there is no browser margin, so the
   gap is set here. Space above the section = the block's container style
   (`{stories,reviews}_container_style`, margin-top). */
.cl-stories-title,
.cl-reviews-title {
    margin-bottom: 16px;
}

/* The stories viewer's close is a <button> since 02-11-2026 (whole_plugin WP-1), and so are its arrows and the story
   circles since the same day (demo2 PR-9): no browser chrome. The close's and the arrows' design presets
   (stories_lightbox_close_preset 403, stories_lightbox_arrow_preset 401 by default) style them and win at 0,2,0. */
.cl-stories-viewer-close,
.cl-stories-viewer-arrow,
.cl-story-circle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* A story without a photo: its circle shows a video sign. */
.cl-story-circle-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cl-bg-color2);
}
.cl-story-circle-img-empty .dashicons {
    font-size: 24px;
    color: var(--cl-txt-color3);
}

/* The stories viewer is a modal <dialog> since 02-11-2026 (demo2 PR-1, stories.js): the browser's top layer puts it
   above the stuck header, the topbar and the photo's tags. Its place, size and display stay the compiled ones
   (stories/v1/generated_css.php); this takes off what a browser gives a dialog. The box's padding, border, background
   and colour go under :where(), weight 0, so the viewer's design preset (stories_lightbox_bg_preset) and its compiled
   style keep setting them. Static on purpose: the view is a dialog at once on every store, without a recompile. */
dialog.cl-stories-viewer {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    overflow: hidden;
}
:where(dialog.cl-stories-viewer) {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}
dialog.cl-stories-viewer::backdrop {
    background: transparent;
}