/* Prime PDP skin: casual (fashion, warm and lively). Identity: coral action, Rubik, cream surfaces, rounded chips. */
.sf-pdp--casual {
    --p-ratio: 4 / 5;
    --p-fit: contain;
    --p-stage: var(--section-bg-2, #FFF6EE);
    --p-gallery: 1.15fr;
    --p-sticky: 104px;
    --p-radius: 8px;
    --p-radius-lg: 14px;
}
.sf-pdp--casual .sf-pdp-title { font-weight: 600; letter-spacing: -.01em; }
.sf-pdp--casual .sf-pdp-kicker a { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; color: var(--p-accent); }
.sf-pdp--casual .sf-pdp-price { color: var(--p-accent); }
.sf-pdp--casual .sf-pdp-compare { font-size: 17px; }
.sf-pdp--casual .sf-pdp-discount { border-radius: 999px; padding-inline: 10px; }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip, .sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch { border-radius: 999px; min-width: 52px; justify-content: center; }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip.active, .sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch.active { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); color: var(--p-ink); }
.sf-pdp--casual .sf-pdp-btn-secondary { background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.sf-pdp--casual .sf-pdp-btn-secondary:hover { filter: brightness(1.25); background: var(--p-ink); color: #fff; }
.sf-pdp--casual .sf-pdp-thumb.gallery-thumb-active { border-color: var(--p-accent); }
.sf-pdp--casual .sf-pdp-assurance { background: var(--section-bg-1, #FFFBFB); border-color: color-mix(in srgb, var(--p-accent) 18%, var(--p-line)); }
.sf-pdp--casual .sf-pdp-badge { border-radius: 999px; }
.sf-pdp--casual .cs-pd-related-title { font-size: clamp(20px, 1.8vw, 26px); margin-block-end: 18px; }

/* casual's own option / button rules (pages.css) size these classes for the old layout; the classes stay for the
   mobile layer (touch contract, purchase bar), the old box sizes do not */
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch.cs-pd-color-swatch { width: auto; height: auto; transform: none; border: 1px solid var(--p-line); border-radius: 999px; padding: 6px 14px 6px 6px; }
[dir="rtl"] .sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch.cs-pd-color-swatch { padding: 6px 6px 6px 14px; }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch.cs-pd-color-swatch:hover { transform: none; border-color: var(--p-ink); }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-swatch.cs-pd-color-swatch.active { transform: none; border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip.cs-pd-option-item { padding: 8px 16px; font-size: 14px; font-weight: 600; background: var(--p-surface); color: var(--p-ink); border-color: var(--p-line); }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip.cs-pd-option-item:hover { background: var(--p-surface); color: var(--p-ink); border-color: var(--p-accent); }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip.cs-pd-option-item.active { background: var(--p-accent); border-color: var(--p-accent); color: #fff; box-shadow: none; }
.sf-pdp--casual .sf-pdp-option-list > li.sf-pdp-chip.cs-pd-option-item.disabled { background: var(--p-surface); color: var(--p-muted); }
.sf-pdp--casual .sf-pdp-link.cs-pd-wish-btn, .sf-pdp--casual .sf-pdp-link.cs-pd-compare-btn { width: auto; height: auto; border: 0; border-radius: 0; color: var(--p-muted); }
.sf-pdp--casual .sf-pdp-link.cs-pd-wish-btn:hover, .sf-pdp--casual .sf-pdp-link.cs-pd-compare-btn:hover { color: var(--p-accent); }
.sf-pdp--casual .sf-pdp-qty.cs-pd-qty { height: 52px; border-color: var(--p-line); border-radius: var(--p-radius); }
.sf-pdp--casual .sf-pdp-qty .cs-qty-btn { height: auto; width: 44px; background: transparent; }
.sf-pdp--casual .sf-pdp-qty .cs-qty-input { height: auto; }
.sf-pdp--casual .sf-pdp-btn.cs-pd-atc-btn, .sf-pdp--casual .sf-pdp-btn.cs-pd-buy-btn { padding: 0 24px; font-size: 15px; border-radius: var(--p-radius); }
.sf-pdp--casual .sf-pdp-main.cs-pd-main-img { border: 0; border-radius: var(--p-radius-lg); background: var(--p-stage); }
.sf-pdp--casual .sf-pdp-main.cs-pd-main-img img { height: 100%; }
.sf-pdp--casual .sf-pdp-thumb.cs-pd-thumb { width: 100%; height: auto; border-width: 1px; }
@media (max-width: 991.98px) { .sf-pdp--casual .sf-pdp-thumb.cs-pd-thumb { width: 64px; } }