/*
 * qCommerce storefront: CORE stylesheet.
 *
 * Only what the storefront needs to WORK under any CSS framework or theme: screen-reader text, hidden states, the
 * "ship to a different address" reveal, product image boxes, the gallery and the focus rules of the cart blocks.
 * No colours, no grid, no buttons: those are in storefront-base.css (optional) or come from your framework.
 *
 * Every block is marked:
 *   @qc-required   keep it (copy it into your own stylesheet if you turn this file off)
 *   @qc-optional   a look only (skip when a framework styles this)
 * docs/STYLING.md lists every selector.
 */

/* @qc-required Screen-reader-only text (labels, captions, live regions). */
.qcommerce-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* @qc-required Hidden states: the scripts and templates use the hidden attribute for rows, notes and the unused gallery image. */
.qcommerce [hidden], .qcommerce-mini-cart [hidden], .qcommerce-purchase [hidden] { display: none !important; }
.qcommerce-variation-info:empty { display: none; }

/* @qc-required Focus targets that the cart script moves focus to; they must not show an outline of their own. */
.qcommerce-mini-cart-body:focus, .qcommerce-cart-body:focus { outline: 0; }

/* @qc-required Product card image box: a fixed shape so lists do not jump while images load; the sale flash sits over it. */
.qcommerce-card { position: relative; }
.qcommerce-card-image { display: block; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.qcommerce-card-image img { width: 100%; height: 100%; object-fit: cover; }
.qcommerce-badge-sale { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 1; }

/* @qc-required Prices: del/ins carry the meaning (was / now), so reset the browser look of ins. */
.qcommerce-price ins { text-decoration: none; }

/* @qc-required Product gallery: main image fills its column, thumbnails are small squares. */
.qcommerce-gallery-main { display: block; width: 100%; height: auto; background: #f3f4f6; }
.qcommerce-gallery-thumbs a { display: inline-block; width: 64px; height: 64px; margin-block-start: .5rem; margin-inline-end: .5rem; }
.qcommerce-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* @qc-required Checkout: the delivery address stays closed until the checkbox before it is ticked (works without JavaScript). */
.qc-ship .qc-ship-fields { display: none; }
.qc-ship .qc-ship-toggle:checked ~ .qc-ship-fields,
.qc-ship:has(.qc-ship-toggle:checked) .qc-ship-fields { display: block; }

/* @qc-required The coupon box is a native details element; keep its summary clickable. */
.qcommerce-coupon summary { cursor: pointer; }

/* @qc-required The quantity box next to Add to cart stays compact whatever the framework's input width is. */
.qcommerce-purchase input.qcommerce-qty { width: 5rem; }

/* @qc-required The built-in quantity stepper (minus, number, plus) stays in one compact row. */
.qcommerce-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.qcommerce-stepper input.qcommerce-qty { width: 3.5rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qcommerce-stepper input.qcommerce-qty::-webkit-outer-spin-button, .qcommerce-stepper input.qcommerce-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* @qc-required A card's purchase form keeps its controls on one line and does not stretch the card. */
.qcommerce-purchase-card { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

/* @qc-required Quick view dialog: a centred panel that scrolls on a small screen, and a fixed fallback for browsers without <dialog>. */
.qcommerce-quick-view { box-sizing: border-box; width: calc(100% - 2rem); max-width: 56rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1.5rem; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: inherit; }
.qcommerce-quick-view::backdrop { background: rgba(0, 0, 0, .5); }
.qcommerce-quick-view-fallback { position: fixed; inset: 1rem; margin: auto; height: fit-content; z-index: 1050; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
.qcommerce-quick-view-close { position: absolute; inset-block-start: .5rem; inset-inline-end: .75rem; border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: inherit; }
.qcommerce-quick-view-content .qcommerce-gallery-main { max-height: 60vh; object-fit: contain; }
.qcommerce-quick-view-title { padding-inline-end: 2rem; }
.qcommerce-quick-view-title:focus { outline: 0; }

/* @qc-required Card slots: the image box holds three overlay slots (top, bottom strip, hover layer); the hover layer shows on hover or keyboard focus, and always on a touch screen. */
.qcommerce-card-media { position: relative; }
.qcommerce-card-slot-overlay-top { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; z-index: 2; display: flex; flex-direction: column; gap: .25rem; }
.qcommerce-card-slot-overlay-bottom { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .5rem; }
.qcommerce-card-slot-overlay-hover { position: absolute; inset: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .25rem; padding: .5rem; opacity: 0; transition: opacity .15s; }
.qcommerce-card:hover .qcommerce-card-slot-overlay-hover, .qcommerce-card:focus-within .qcommerce-card-slot-overlay-hover { opacity: 1; }
@media (hover: none) { .qcommerce-card-slot-overlay-hover { opacity: 1; } }
.qcommerce-card-slot-under-image { padding-inline: 1rem; padding-block-start: .5rem; }
.qcommerce-card-action-icon { display: inline-flex; width: 1.25em; height: 1.25em; }
.qcommerce-card-action-icon svg { width: 100%; height: 100%; }

/* @qc-required Toasts: messages after an add to cart, stacked at the chosen place on the screen (a position class on the container: top or bottom, left, center or right); an optional product image sits on the left of the text. */
.qcommerce-toasts { position: fixed; z-index: 1100; display: flex; flex-direction: column; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.qcommerce-toasts-top-left, .qcommerce-toasts-top-center, .qcommerce-toasts-top-right { top: 1rem; }
.qcommerce-toasts-bottom-left, .qcommerce-toasts-bottom-center, .qcommerce-toasts-bottom-right { bottom: 1rem; }
.qcommerce-toasts-top-left, .qcommerce-toasts-bottom-left { left: 1rem; }
.qcommerce-toasts-top-right, .qcommerce-toasts-bottom-right { right: 1rem; }
.qcommerce-toasts-top-center, .qcommerce-toasts-bottom-center { left: 50%; transform: translateX(-50%); }
.qcommerce-toast { position: relative; display: flex; align-items: center; gap: .75rem; margin: 0; padding-inline-end: 2.25rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); pointer-events: auto; }
.qcommerce-toast-image { flex: 0 0 auto; width: 3rem; height: 3rem; object-fit: cover; border-radius: .25rem; }
.qcommerce-toast-close { position: absolute; inset-block-start: .25rem; inset-inline-end: .5rem; border: 0; background: none; font-size: 1.25rem; line-height: 1; color: inherit; cursor: pointer; }

/* @qc-required A grouped product's quantity boxes stay compact in the table. */
.qcommerce-grouped input.qcommerce-qty { width: 5rem; }

/* Variation options as radio buttons or chips: the fieldset replaces the label + select pair. */
.qcommerce-attribute-options { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.qcommerce-attribute-options legend { padding: 0; }
.qcommerce-attribute-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.qcommerce-attribute-buttons legend { inline-size: 100%; }
.qcommerce-chip { position: relative; display: inline-block; }
.qcommerce-chip-input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; pointer-events: none; }
.qcommerce-chip-label { display: inline-block; min-inline-size: 2.5rem; padding: .375rem .75rem; border: 1px solid currentColor; border-radius: .375rem; text-align: center; cursor: pointer; opacity: .8; }
.qcommerce-chip-input:checked + .qcommerce-chip-label { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; font-weight: 600; }
.qcommerce-chip-input:focus-visible + .qcommerce-chip-label { outline: 2px solid Highlight; outline-offset: 2px; }
.qcommerce-chip-input:disabled + .qcommerce-chip-label { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* @qc-required Star ratings: five stars filled in proportion to --qc-rating (set inline on the element); colours come from --qc-star-on and --qc-star-off. */
.qcommerce-stars { --qc-rating: 0; display: inline-block; font-size: 1.1em; line-height: 1; letter-spacing: .08em; white-space: nowrap; vertical-align: middle; }
.qcommerce-stars::before { content: "\2605\2605\2605\2605\2605"; background: linear-gradient(90deg, var(--qc-star-on, #f5a623) calc(var(--qc-rating) / 5 * 100%), var(--qc-star-off, #d1d5db) 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.qcommerce-rating { color: inherit; text-decoration: none; }

/* @qc-required Review form: the star choice is five radio buttons drawn as stars (highest first in the markup, shown in reverse, so a hover or a choice fills the lower ones), and the honeypot field stays out of sight. */
.qcommerce-rating-input { border: 0; padding: 0; min-inline-size: 0; }
.qcommerce-rating-choices { display: inline-flex; flex-direction: row-reverse; }
.qcommerce-rating-choices input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; pointer-events: none; }
.qcommerce-rating-choices label { margin: 0; padding: 0 .08em; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--qc-star-off, #d1d5db); }
.qcommerce-rating-choices label::before { content: "\2605"; }
.qcommerce-rating-choices input:checked ~ label, .qcommerce-rating-choices label:hover, .qcommerce-rating-choices label:hover ~ label { color: var(--qc-star-on, #f5a623); }
.qcommerce-rating-choices input:focus-visible + label { outline: 2px solid Highlight; outline-offset: 2px; }
.qcommerce-review-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* @qc-required Wishlist button: the saved state shows the "on" icon (data-active comes from the server, and the script changes it after a click). The icon-only look is a round button; the other looks use the shop's button classes. */
.qcommerce-wishlist-button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4em; line-height: 1; }
.qcommerce-wishlist-button .qcommerce-wishlist-icon { display: inline-flex; align-items: center; }
.qcommerce-wishlist-button .qcommerce-wishlist-icon-on, .qcommerce-wishlist-button[data-active="1"] .qcommerce-wishlist-icon-off { display: none; }
.qcommerce-wishlist-button[data-active="1"] .qcommerce-wishlist-icon-on { display: inline-flex; }
.qcommerce-wishlist-button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.qcommerce-wishlist-style-icon { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #444; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); font-size: 1.15rem; }
.qcommerce-wishlist-style-icon:hover, .qcommerce-wishlist-style-icon:focus-visible { color: var(--qc-wishlist-color, #d6336c); }
.qcommerce-wishlist-style-icon[data-active="1"] { color: var(--qc-wishlist-color, #d6336c); }
.qcommerce-wishlist-svg { width: 1em; height: 1em; }
.qcommerce-wishlist-single { margin-block: .75rem; }
.qcommerce-wishlist-link { display: inline-flex; align-items: center; gap: .35em; text-decoration: none; position: relative; }
.qcommerce-wishlist-link-icon { display: inline-flex; }
.qcommerce-wishlist-count { min-width: 1.35em; padding: 0 .35em; border-radius: 999px; background: var(--qc-wishlist-color, #d6336c); color: #fff; font-size: .75em; line-height: 1.35em; text-align: center; }
.qcommerce-wishlist-count[hidden] { display: none; }
.qcommerce-wishlist-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.qcommerce-wishlist-form { margin: 0; }
.qcommerce-wishlist-form-inline { display: inline; }
.qcommerce-wishlist-share { margin-block-start: 1.5rem; }
.qcommerce-wishlist-share input { max-width: 100%; }
.qcommerce-wishlist-cell-actions { margin: .5rem 0 0; text-align: center; }