/*
 * qCommerce storefront: BASE stylesheet (optional).
 *
 * A small, responsive look of its own: grid, buttons, forms, cards, alerts, tables, badges, navigation, pagination,
 * text and spacing helpers. It styles the qc-* classes the "qCommerce (own styles)" preset prints and the few look-only
 * rules of the plugin's own classes. Turn it off in Settings > Advanced when a CSS framework or your theme styles the
 * pages (the preset then prints that framework's classes). Needs storefront-core.css.
 *
 * Built on CSS variables (override them in your theme), logical properties (right-to-left safe) and no framework.
 * Every block is marked @qc-optional (skip when a framework styles this).
 */

/* @qc-optional Design tokens. Change these in your theme to restyle everything below. */
:root {
  --qc-primary: #2563eb;
  --qc-primary-contrast: #fff;
  --qc-success: #15803d;
  --qc-danger: #dc2626;
  --qc-warning: #b45309;
  --qc-info: #0369a1;
  --qc-muted: #6b7280;
  --qc-border: #d1d5db;
  --qc-surface: #f8f9fa;
  --qc-radius: .375rem;
  --qc-gutter: 1rem;
  --qc-field-gutter: .5rem;
}

/* @qc-optional Page container. */
.qc-container { box-sizing: border-box; width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--qc-gutter); padding-block: 3rem; }

/* @qc-optional Grid: a row of columns that wraps; every column is full width on a phone. */
.qc-row, .qc-form-row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--qc-gutter) / -2); }
.qc-form-row { margin-inline: calc(var(--qc-field-gutter) / -1); }
.qc-row-end { justify-content: flex-end; }
.qc-col { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; padding-inline: calc(var(--qc-gutter) / 2); }
.qc-form-row > .qc-col { padding-inline: var(--qc-field-gutter); }
.qc-col-full, .qc-col-cards-1 { flex-basis: 100%; max-width: 100%; }
@media (min-width: 576px) {
  .qc-col-term { flex-basis: 25%; max-width: 25%; font-weight: 600; }
  .qc-col-desc { flex-basis: 75%; max-width: 75%; }
  .qc-col-cards-2, .qc-col-cards-3, .qc-col-cards-4 { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  .qc-col-half { flex-basis: 50%; max-width: 50%; }
  .qc-col-totals { flex-basis: 41.6667%; max-width: 41.6667%; }
}
@media (min-width: 992px) {
  .qc-col-main { flex-basis: 58.3333%; max-width: 58.3333%; }
  .qc-col-aside { flex-basis: 41.6667%; max-width: 41.6667%; }
  .qc-col-cards-3 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .qc-col-cards-4 { flex-basis: 25%; max-width: 25%; }
}

/* @qc-optional Buttons. */
.qc-btn { display: inline-block; box-sizing: border-box; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--qc-radius); background: transparent; color: inherit; font: inherit; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.qc-btn:hover { filter: brightness(.94); text-decoration: none; }
.qc-btn:focus-visible, .qc-input:focus-visible, .qc-check-input:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-btn[disabled] { opacity: .6; cursor: not-allowed; }
.qc-btn-primary { background: var(--qc-primary); border-color: var(--qc-primary); color: var(--qc-primary-contrast); }
.qc-btn-success { background: var(--qc-success); border-color: var(--qc-success); color: #fff; }
.qc-btn-danger { background: var(--qc-danger); border-color: var(--qc-danger); color: #fff; }
.qc-btn-outline { border-color: var(--qc-primary); color: var(--qc-primary); }
.qc-btn-outline.qc-btn-muted { border-color: var(--qc-border); color: var(--qc-muted); }
.qc-btn-outline.qc-btn-danger { background: transparent; border-color: var(--qc-danger); color: var(--qc-danger); }
.qc-btn-sm { padding: .25rem .5rem; font-size: .875rem; }
.qc-btn-lg { padding: .75rem 1.25rem; font-size: 1.125rem; }
.qc-btn-block { display: block; width: 100%; }
.qc-btn-link { padding-inline: 0; border-color: transparent; background: none; color: var(--qc-primary); text-decoration: underline; }

/* @qc-optional Forms. */
.qc-field { margin-block-end: 1rem; }
.qc-field > label, .qcommerce-field-label { display: inline-block; margin-block-end: .25rem; font-size: .9rem; font-weight: 500; }
.qc-input { display: block; box-sizing: border-box; width: 100%; padding: .5rem .75rem; border: 1px solid var(--qc-border); border-radius: var(--qc-radius); background: #fff; color: inherit; font: inherit; line-height: 1.4; }
.qc-input-sm { padding: .25rem .5rem; font-size: .875rem; }
.qc-select { appearance: auto; }
.qc-textarea { min-height: 6rem; resize: vertical; }
.qc-inline-form { display: flex; flex-wrap: wrap; align-items: center; }
.qc-inline-form .qc-input { width: auto; }
.qc-check { display: flex; align-items: center; gap: .5rem; margin-block-end: .25rem; }
.qc-check-input { margin: 0; }
.qc-check-label { margin: 0; }
.qc-help { display: block; margin-block-start: .25rem; color: var(--qc-muted); font-size: .875rem; }
.qc-error { display: block; margin-block-start: .25rem; color: var(--qc-danger); font-size: .875rem; }
.qc-required { color: var(--qc-danger); }
.qcommerce-field-error .qc-input { border-color: var(--qc-danger); }
.qcommerce-checkout abbr[title] { text-decoration: none; border: 0; }
.qcommerce-checkout .qc-field > label { white-space: nowrap; }
.qcommerce-checkout-section { margin-block-end: 2rem; }
.qcommerce-checkout { max-width: 1140px; }
.qcommerce-checkout-form textarea { min-height: 6rem; }
.qc-ship-toggle { margin-inline-end: .4rem; }

/* @qc-optional Cards. */
.qc-card { border: 1px solid var(--qc-border); border-radius: var(--qc-radius); background: #fff; }
.qc-card-full { display: flex; flex-direction: column; height: 100%; }
.qc-card-body, .qc-card-flex { padding: 1rem; }
.qc-card-flex { display: flex; flex: 1 1 auto; flex-direction: column; }
.qc-card-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.qcommerce-order-card { background: var(--qc-surface); }
@media (min-width: 992px) { .qcommerce-order-card { position: sticky; inset-block-start: 1.5rem; } }

/* @qc-optional Alerts. */
.qc-alert { margin-block-end: 1rem; padding: .75rem 1rem; border: 1px solid; border-radius: var(--qc-radius); }
.qc-alert-info { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.qc-alert-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.qc-alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.qc-alert-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.qc-alert-compact { padding: .25rem .5rem; margin-block-end: .5rem; }

/* @qc-optional Tables. */
.qc-table { width: 100%; border-collapse: collapse; }
:where(.qc-table) th, :where(.qc-table) td { padding: .6rem .5rem; border-block-end: 1px solid var(--qc-border); text-align: start; vertical-align: middle; }
.qc-table-sm th, .qc-table-sm td { padding: .3rem .5rem; }
.qc-table-wrap { overflow-x: auto; }
.qcommerce-cart-qty { width: 5.5rem; }
.qcommerce-mini-cart-line { border-block-end: 1px solid #eee; }
.qcommerce-order-meta dt { font-weight: 600; }

/* @qc-optional Badge. */
.qc-badge { display: inline-block; padding: .25rem .5rem; border-radius: var(--qc-radius); font-size: .75rem; font-weight: 600; line-height: 1; }
.qc-badge-sale { background: var(--qc-danger); color: #fff; }

/* @qc-optional Navigation pills. */
.qc-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.qc-nav-item { list-style: none; }
.qc-nav-link { display: block; padding: .4rem .9rem; border-radius: var(--qc-radius); color: var(--qc-primary); text-decoration: none; }
.qc-nav-link:hover { background: var(--qc-surface); }
.qc-nav-link.qc-active { background: var(--qc-primary); color: var(--qc-primary-contrast); }

/* @qc-optional Pagination. */
.qc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin: 1rem 0; padding: 0; list-style: none; }
.qc-page-link { display: block; padding: .35rem .75rem; border: 1px solid var(--qc-border); border-radius: var(--qc-radius); color: var(--qc-primary); text-decoration: none; }
.qc-page-item.qc-active .qc-page-link { background: var(--qc-primary); border-color: var(--qc-primary); color: var(--qc-primary-contrast); }
.qc-page-item.qc-disabled .qc-page-link { color: var(--qc-muted); }

/* @qc-optional Lists. */
.qc-list-plain, .qc-list-inline { margin: 0; padding: 0; list-style: none; }
.qc-list-inline-item { display: inline-block; margin-inline-end: .5rem; }

/* @qc-optional Text and headings. */
.qc-muted { color: var(--qc-muted); }
.qc-small { font-size: .875em; }
.qc-text-danger { color: var(--qc-danger); }
.qc-text-end { text-align: end; }
.qc-text-start { text-align: start; }
.qc-text-center { text-align: center; }
.qc-bold { font-weight: 600; }
.qc-normal { font-weight: 400; }
.qc-lead { font-size: 1.25rem; font-weight: 300; }
.qc-h-lg { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.qc-h-md { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.qc-h-sm { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.qcommerce-stock { font-size: .875rem; }
.qcommerce-price del { margin-inline-end: .35rem; opacity: .6; }
.qcommerce-price ins { font-weight: 600; }
.qcommerce-variable .qcommerce-attribute { max-width: 22rem; }
.qcommerce-variable .qcommerce-clear-options { display: inline-block; margin-block-end: 1rem; }

/* @qc-optional Layout helpers. */
.qc-flex-between { display: flex; justify-content: space-between; }
.qc-flex-top { align-items: flex-start; }
.qc-flex-column { display: flex; flex-direction: column; }
.qc-block { display: block; }
.qc-inline-block { display: inline-block; }
.qc-push-top { margin-block-start: auto; }

/* @qc-optional Spacing helpers (0 none, 1 .25rem, 2 .5rem, 3 1rem, 4 1.5rem, 5 3rem). */
.qc-mb-0 { margin-block-end: 0 !important; } .qc-mb-1 { margin-block-end: .25rem !important; } .qc-mb-2 { margin-block-end: .5rem !important; } .qc-mb-3 { margin-block-end: 1rem !important; } .qc-mb-4 { margin-block-end: 1.5rem !important; } .qc-mb-5 { margin-block-end: 3rem !important; }
.qc-mt-1 { margin-block-start: .25rem !important; } .qc-mt-2 { margin-block-start: .5rem !important; } .qc-mt-3 { margin-block-start: 1rem !important; } .qc-mt-4 { margin-block-start: 1.5rem !important; }
.qc-me-1 { margin-inline-end: .25rem !important; } .qc-me-2 { margin-inline-end: .5rem !important; } .qc-me-3 { margin-inline-end: 1rem !important; }
.qc-ms-1 { margin-inline-start: .25rem !important; } .qc-ms-2 { margin-inline-start: .5rem !important; } .qc-ms-3 { margin-inline-start: 1rem !important; }
.qc-p-0 { padding: 0 !important; } .qc-p-3 { padding: 1rem !important; }
.qc-px-2 { padding-inline: .5rem !important; } .qc-py-1 { padding-block: .25rem !important; } .qc-py-4 { padding-block: 1.5rem !important; }

/* @qc-optional Reviews: the summary with its bars, the list and the replies. */
.qcommerce-review-summary { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; margin-block: 1rem 1.5rem; }
.qcommerce-review-average { display: flex; flex-direction: column; gap: .25rem; }
.qcommerce-review-average-number { font-size: 2.5rem; font-weight: 600; line-height: 1; }
.qcommerce-review-bars { flex: 1 1 16rem; max-inline-size: 28rem; }
.qcommerce-review-bars li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; margin-block: .25rem; }
.qcommerce-review-bar-label { flex: 0 0 3.5rem; }
.qcommerce-review-bar { flex: 1; block-size: .5rem; border: 0; border-radius: 999px; background: var(--qc-border); overflow: hidden; -webkit-appearance: none; appearance: none; }
.qcommerce-review-bar::-webkit-progress-bar { background: var(--qc-border); }
.qcommerce-review-bar::-webkit-progress-value { background: var(--qc-star-on, #f5a623); }
.qcommerce-review-bar::-moz-progress-bar { background: var(--qc-star-on, #f5a623); }
.qcommerce-review-bar-count { flex: 0 0 2rem; text-align: end; color: var(--qc-muted); }
.qcommerce-review-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.qcommerce-review { padding-block: 1rem; border-block-end: 1px solid var(--qc-border); }
.qcommerce-review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-block-end: .25rem; }
.qcommerce-review-verified::before { content: "\2713\00a0"; }
.qcommerce-review-reply { margin-block-start: .75rem; margin-inline-start: 1rem; padding-inline-start: .75rem; border-inline-start: 3px solid var(--qc-border); }
.qcommerce-review-pages { display: flex; justify-content: space-between; align-items: center; margin-block-end: 1.5rem; }
.qcommerce-rating-count { font-size: .875em; color: var(--qc-muted); }