/**
 * Styling for the Itoris DynamicProductOptions fields so they read like clean,
 * uniform native selects (the M1 / RecodarServices_ProductOptions look).
 *
 * IMPORTANT scope note: the INLINE options (on the product page AND inside the
 * quickview-injected fragment) live in `.product-options-wrapper`, NOT in
 * `#itoris_dynamicproductoptions` — that id is only Itoris' hidden "configure"
 * popup. Everything here is therefore scoped to `.product-options-wrapper` so it
 * actually reaches the visible fields. Loaded on catalog_product_view and
 * catalogsearch_result_index (quickview).
 */

/* ---- Flush layout: strip Itoris' framed fieldset + inner padding ---------- *
 * Itoris frames the option fieldset (grey border/legend) and indents the fields;
 * drop it so the options line up flush-left with the price and add-to-cart row. */
.product-options-wrapper,
.product-options-wrapper #itoris_dynamicproductoptions,
.product-options-wrapper .fieldset,
.product-options-wrapper .fieldset-section-1,
.product-options-wrapper .form-list,
.product-options-wrapper ul.form-list,
.product-options-wrapper .form-list > li,
.product-options-wrapper li.fields,
.product-options-wrapper .fields,
.product-options-wrapper .field,
.product-options-wrapper .control {
    background: transparent !important;
    border: 0 !important;
    /* A <ul class="form-list"> carries the browser default 40px inline padding,
       which indents the whole option column off the left flush line. Zero it. */
    padding: 0 !important;
    /* Zero ALL margins on the container chain — Itoris' own
       `#itoris_dynamicproductoptions .fieldset { margin: 35px 0 5px }` (ID rule)
       otherwise injects big vertical gaps once its CSS/JS finish loading, which
       "breaks" the buybox after first paint. Field spacing comes from .field. */
    margin: 0 !important;
    list-style: none !important;
}
/* box-shadow is reset separately, guarded against the step-mode pulse: the pulse
   (UnloadTheme `.rcs-opt-pulse-*`) draws its ring with a CSS animation, and an
   !important declaration outranks animations — resetting it blanket-style above
   silently swallowed the whole pulse on Itoris option rows. */
.product-options-wrapper,
.product-options-wrapper :is(#itoris_dynamicproductoptions, .fieldset, .fieldset-section-1,
    .form-list, li, .fields, .field, .control):not(.rcs-opt-pulse-accent):not(.rcs-opt-pulse-std) {
    box-shadow: none !important;
}

/* ---- Step mode: let UnloadTheme hide the not-yet-due options -------------- *
 * `.rcs-opt-hidden { display: none !important }` (0,1,0) loses to our own
 * `li.fields { display: block !important }` (0,2,1) above — both important, so
 * specificity decides and the "hidden" option stayed visible, i.e. step mode did
 * nothing on Itoris rows. Re-assert the hide at a higher specificity. */
.product-options-wrapper .form-list > li.rcs-opt-hidden,
.product-options-wrapper li.fields.rcs-opt-hidden,
.product-options-wrapper .field.choice.rcs-opt-hidden,
.product-options-wrapper .field.rcs-opt-hidden {
    display: none !important;
}

/* Itoris' framed "legend" chip — not part of the M1 look. */
.product-options-wrapper .fieldset > .legend,
.product-options-wrapper .fieldset > legend {
    display: none !important;
}

/* ---- Field rhythm + labels ---------------------------------------------- */
.product-options-wrapper .field {
    margin: 0 0 1rem !important;
}
.product-options-wrapper .field > .label,
.product-options-wrapper .field > label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 0.4rem !important;
    padding: 0 !important;
    /* Match the body/M1 option-label size (0.875rem) so the options don't look
       oversized/heavy next to the surrounding text on mobile. */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rcs-color-text, #111827);
}

/* ---- Uniform, full-width fields ----------------------------------------- *
 * Itoris fixes `.field` to 270px / 97% and `.control` to auto, and styles
 * input/textarea to 100% but NOT <select> — so native selects size to their
 * content and a short-label option ("-- Bitte auswählen --") renders far
 * narrower than a long-label one. Force the whole field chain to full width so
 * every option reads as one clean, equal-width stack. */
.product-options-wrapper .form-list,
.product-options-wrapper ul.form-list {
    display: block !important;
}
/* Conditional "mitbestellen" fields are toggled in by JS and can end up
   narrow/floated — force every option row to a full-width block so the whole
   column is one uniform stack. */
.product-options-wrapper .form-list > li,
.product-options-wrapper li.fields {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
}
.product-options-wrapper .form-list .field,
.product-options-wrapper .form-list.option-fields-cols-1 .field,
.product-options-wrapper .form-list .field .control {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
}
.product-options-wrapper select,
.product-options-wrapper input[type="text"],
.product-options-wrapper input[type="number"],
.product-options-wrapper input[type="email"],
.product-options-wrapper textarea {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    /* !important beats Itoris main.css `#itoris_dynamicproductoptions select`
       (ID specificity, border-radius:3px / border:1px #88888) so the fields use
       the theme control radius like the qty stepper + add-to-cart button. */
    border: 1px solid var(--rcs-color-border, #d1d5db) !important;
    border-radius: var(--rcs-button-radius, 14px) !important;
    padding: 0.65rem 0.85rem !important;
    background: #fff !important;
    color: var(--rcs-color-text, #111827);
    font-size: 0.9375rem;
    line-height: 1.3;
}
.product-options-wrapper select:focus,
.product-options-wrapper input:focus,
.product-options-wrapper textarea:focus {
    outline: none;
    border-color: var(--rcs-color-accent, #1d4ed8);
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}

/* Itoris' custom image dropdown overlays the (now full-width) select with an
   absolutely-positioned transparent mask. Make the mask cover the whole field
   (top→bottom, full width) so it lines up with the native selects and every
   click opens the image list. */
.product-options-wrapper .dpo_dd,
.product-options-wrapper .rcsdo-dd,
.product-options-wrapper .dpo_dd_mask {
    box-sizing: border-box;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ---- Open image-dropdown must sit above the sticky section nav ---------- *
 * Itoris' .dpo_dd_list_outer is z-index:2; the sticky anchor nav is z-index:80,
 * so the open list was hidden behind the nav. Lift the open list high, and lift
 * the field that currently holds an open list into its own stacking context so
 * it clears the nav regardless of ancestor stacking. */
.product-options-wrapper .dpo_dd_list_outer {
    z-index: 1000 !important;
}
.product-options-wrapper li.fields:has(.dpo_dd_list_outer),
.product-options-wrapper .field:has(.dpo_dd_list_outer),
.product-options-wrapper .control:has(.dpo_dd_list_outer) {
    position: relative;
    z-index: 1000;
}

/* ---- Open dropdown welds onto the select -------------------------------- *
 * Itoris draws the open list as its own framed box (1px #ccc all round,
 * margin-top:1px, all-round shadow) below a glowing select, so the closed
 * pill's rounded bottom edge and the panel's top edge stack into a visible
 * double seam. Weld them into one control: the open select keeps only its top
 * radius and hands its bottom edge to the panel, and the panel drops its own
 * top border/radius and carries the pill radius on the bottom instead. */
.product-options-wrapper select.open-dd {
    /* Itoris' `select.open-dd` glow would trace exactly the seam we remove. */
    box-shadow: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Keep the 1px box geometry (no 1px reflow on open) but let the select's
       own white background show through where the panel joins. */
    border-bottom-color: transparent !important;
}
.product-options-wrapper .dpo_dd_list_outer {
    /* margin-top:1px + border-top would be the second edge under the pill. */
    margin-top: 0 !important;
    border-top: 0 !important;
    /* Same border as the field so the left/right edges continue the pill's. */
    border-color: var(--rcs-color-border, #d1d5db) !important;
    border-radius: 0 0 var(--rcs-button-radius, 14px) var(--rcs-button-radius, 14px) !important;
    /* Clip the scrolling rows to the rounded bottom corners, otherwise the
       last row's background paints square corners over them. */
    overflow: hidden;
    /* Itoris' all-round shadow darkens the joint; cast it downwards only. */
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.28) !important;
}

/* Itoris opens the list at `selectedRow.offsetTop - 30`, which leaves the row
   above the selection sliced in half right under the "Suche…" field — a stray
   horizontal edge at the top of the panel. Snap the scroll port to whole rows
   so the list always starts on a row boundary. Progressive enhancement: a UA
   that ignores scroll-snap just keeps Itoris' behaviour. */
.product-options-wrapper .dpo_dd_list {
    scroll-snap-type: y mandatory;
}
.product-options-wrapper .dpo_dd_list_value {
    scroll-snap-align: start;
}

/* Pulse pausiert, solange die Bildliste offen steht: das Ringen soll auf die
   noch offene Auswahl hinweisen, nicht um eine bereits geoeffnete Liste herum
   weiterblinken. Itoris haengt `open-dd` an das <select> und nimmt es in jedem
   Schliess-Pfad wieder weg (Maskenklick, Fensterklick, Auswahl einer Zeile), die
   Animation laeuft danach also von selbst weiter, wenn nichts gewaehlt wurde. */
.product-options-wrapper .rcs-opt-pulse-accent:has(select.open-dd),
.product-options-wrapper .rcs-opt-pulse-std:has(select.open-dd) {
    animation: none !important;
}

/* ---- Radio / checkbox rows ---------------------------------------------- */
.product-options-wrapper .field.choice {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 4px 0 !important;
    cursor: pointer;
}
.product-options-wrapper .field.choice input[type="radio"],
.product-options-wrapper .field.choice input[type="checkbox"] {
    accent-color: var(--rcs-color-accent, #1d4ed8);
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
}
.product-options-wrapper .field.choice > .label,
.product-options-wrapper .field.choice > label {
    margin: 0 !important;
    font-weight: 400;
}

/* ---- Option tooltips: SVG info glyph + dark bubble ---------------------- *
 * Itoris' options.js appends `<span class="dpo_tooltip_icon">` to the label and,
 * on first hover/click, a `<div class="dpo_tooltip_body">` inside it. main.css
 * draws the trigger as a serif italic "i" on a blue disc and the bubble as a grey
 * framed Luma box with a two-tone pointer. Both are restyled here in the look of
 * the Amasty filter tooltip bridge (UnloadThemeCompatibility), with plain
 * fallbacks so it reads the same without RCS UnloadTheme's tokens.
 *
 * CSS only on purpose: the span is built by Itoris' JS, so there is no template
 * to put an <svg> into. The glyph is an SVG mask painted with currentColor,
 * which keeps it crisp on hi-dpi screens and lets the colour follow the theme.
 * The bubble geometry leaves Itoris' JS alone: it resets `margin-left`, measures
 * the bubble and shifts it back into the viewport, and getBoundingClientRect
 * already includes the centring transform below. */
.product-options-wrapper .dpo_tooltip_icon {
    position: relative;
    top: 0 !important;
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.35rem !important;
    vertical-align: -0.2em;
    color: #9ca3af;
    cursor: help;
    transition: color 0.18s ease;
}
.product-options-wrapper .dpo_tooltip_icon {
    --rcs-dpo-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 1.9a8.1 8.1 0 1 0 0 16.2 8.1 8.1 0 0 0 0-16.2Zm0 6.5c.5 0 .95.4.95.9v5.2a.95.95 0 1 1-1.9 0v-5.2c0-.5.42-.9.95-.9Zm0-3.7a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
}
.product-options-wrapper .dpo_tooltip_icon::after {
    content: '' !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    /* main.css gives the pseudo element `color: #fff` for its white "i", which
       would make currentColor paint the glyph white on white. */
    color: inherit !important;
    background: currentColor !important;
    /* Longhands on purpose: older Chromium drops the unprefixed `mask`
       shorthand and with it the whole glyph. */
    -webkit-mask-image: var(--rcs-dpo-info-glyph);
            mask-image: var(--rcs-dpo-info-glyph);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.product-options-wrapper .dpo_tooltip_icon:hover {
    color: var(--rcs-color-accent, #1d4ed8);
}
/* Text swatches: Itoris stretches the icon over the whole swatch label as an
   invisible hover area and hides its glyph - keep it that way. */
.product-options-wrapper .dpo_swatch_text > label .dpo_tooltip_icon {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0 !important;
}
.product-options-wrapper .dpo_swatch_text > label .dpo_tooltip_icon::after {
    display: none;
}

/* The bubble. Dark and borderless like the filter tooltip, so the pointer can be
   one plain triangle. `left`/`width` need !important: Itoris' ID rule forces
   400px / -200px, and its JS writes an inline `left` for choice rows. */
.product-options-wrapper .dpo_tooltip_icon:hover .dpo_tooltip_body {
    left: 50% !important;
    right: auto;
    bottom: 100%;
    z-index: 1200;
    box-sizing: border-box;
    width: max-content !important;
    max-width: min(20rem, calc(100vw - 2rem));
    margin-bottom: 0.6rem;
    padding: 0.55rem 0.8rem !important;
    border: 0;
    border-radius: 10px;
    background: var(--rcs-color-primary, #111827);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
    color: #fff;
    font-size: 0.82rem !important;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: default;
    transform: translateX(-50%);
    animation: rcs-dpo-tooltip-in 0.16s ease-out;
}
.product-options-wrapper .dpo_tooltip_body p {
    margin: 0 0 0.35rem;
}
.product-options-wrapper .dpo_tooltip_body p:last-child {
    margin-bottom: 0;
}
.product-options-wrapper .dpo_tooltip_body a {
    color: inherit;
    text-decoration: underline;
}
/* Itoris' two-tone pointer is two stacked border triangles; one is enough. */
.product-options-wrapper .dpo_tooltip_icon:hover .dpo_tooltip_body::before {
    content: none;
}
.product-options-wrapper .dpo_tooltip_icon:hover .dpo_tooltip_body::after {
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 6px 7px 0;
    border-style: solid;
    border-color: var(--rcs-color-primary, #111827) transparent transparent;
}
@keyframes rcs-dpo-tooltip-in {
    from { opacity: 0; translate: 0 4px; }
    to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .product-options-wrapper .dpo_tooltip_icon,
    .product-options-wrapper .dpo_tooltip_icon:hover .dpo_tooltip_body {
        transition: none;
        animation: none;
    }
}

/* ---- "Suche…" filter inside the image dropdown -------------------------- *
 * A bare <input class="dpo_dd_search"> — give it more height/padding so it reads
 * like the other fields (sizing/spacing only, never layout). */
.product-options-wrapper input.dpo_dd_search,
.product-options-wrapper .dpo_dd_search {
    box-sizing: border-box;
    width: calc(100% - 20px) !important;
    min-height: 2.5rem;
    padding: 0.5rem 1.75rem 0.5rem 0.7rem !important;
    font-size: 0.9rem;
    line-height: 1.3;
    border: 1px solid var(--rcs-color-border, #d1d5db);
    border-radius: var(--rcs-button-radius, 14px);
}

/* ---- Open dropdown list ------------------------------------------------- *
 * The list is a <table>, so rows only span content width and the hover/selected
 * highlight leaves dead white space on the right. Force full width so the
 * highlight fills, center the preview image, and pad the text off the divider. */
.product-options-wrapper .dpo_dd_list_outer,
.product-options-wrapper .dpo_dd_list {
    box-sizing: border-box;
    width: 100% !important;
}
.product-options-wrapper .dpo_dd_list_inner {
    width: 100%;
    table-layout: auto;
}
.product-options-wrapper .dpo_dd_list_value {
    width: 100%;
}
.product-options-wrapper .dpo_dd_list_preview {
    vertical-align: middle !important;
    /* Left-align the image column with the "Suche…" field (10px) instead of
       centering it in the wide default cell, so it sits in one flush line. */
    text-align: left !important;
    width: 60px !important;
    padding: 4px 8px 4px 10px !important;
}
/* Vertically center the (inline-block) preview image / colour swatch so it sits
   in the middle of the row instead of riding the text baseline. */
.product-options-wrapper .dpo_dd_list_preview img,
.product-options-wrapper .dpo_dd_list_preview > div {
    vertical-align: middle !important;
}
.product-options-wrapper .dpo_dd_list_label {
    width: 100%;               /* text cell eats the remaining width */
    padding-left: 0.75rem;     /* breathing room after the image divider */
    vertical-align: middle !important;
}

/* ---- Add-to-cart button: true full width -------------------------------- *
 * .actions holds the button PLUS Klarna's express placeholder
 * (#klarna-kec-placeholder, inline width:49%) and the instant-purchase block,
 * which steal ~half the row. Lay .actions out as a block so the button fills
 * the row; the express placeholder stacks below (and is hidden while empty). */
.box-tocart .actions {
    display: block !important;
}
.box-tocart .actions > .action.primary.tocart,
.box-tocart .actions > #product-addtocart-button {
    width: 100% !important;
    box-sizing: border-box;
}
.box-tocart .actions #klarna-kec-placeholder {
    width: 100% !important;
    margin-top: 0.5rem;
}
.box-tocart .actions #klarna-kec-placeholder:empty {
    display: none !important;
}