/* ==========================================================================
   QarQarak visual system guard
   Final cross-page palette, shell and responsive corrections. Product paint
   swatches and technical artwork intentionally keep their physical colors.
   ========================================================================== */
:root {
  --shell-topbar: linear-gradient(180deg, var(--qq-ink-700), var(--qq-ink-800));
  --shell-header: rgba(255,255,255,.96);
  --panel-elevated: #FFFFFF;
  --panel-muted: #F7F9FB;
  --field-bg: #F1F4F7;
  --placeholder: #6B7785;
  --inverse-hi: #F5F8FA;
  --inverse-mid: #C7D0D9;
  --inverse-low: #9AA7B4;
  --inverse-line: rgba(255,255,255,.14);
  --inverse-wash: rgba(255,255,255,.06);
  --scrim: rgba(7,12,16,.68);
  --panel-shadow: 0 16px 44px rgba(11,17,22,.08);
  --panel-shadow-hover: 0 22px 52px rgba(11,17,22,.13);
  --demo-wash: rgba(200,149,46,.08);
  --image-stage: linear-gradient(145deg, var(--surface-2), var(--stage));
  --accent-strong: var(--accent-text);
  accent-color: var(--accent);
}

:root[data-theme="dark"] {
  --shell-header: rgba(15,24,32,.98);
  --panel-elevated: #111B24;
  --panel-muted: #16232D;
  --field-bg: #172530;
  --placeholder: #8D9AA7;
  --panel-shadow: 0 18px 48px rgba(0,0,0,.28);
  --panel-shadow-hover: 0 24px 60px rgba(0,0,0,.38);
  --demo-wash: rgba(220,174,78,.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell-header: rgba(15,24,32,.98);
    --panel-elevated: #111B24;
    --panel-muted: #16232D;
    --field-bg: #172530;
    --placeholder: #8D9AA7;
    --panel-shadow: 0 18px 48px rgba(0,0,0,.28);
    --panel-shadow-hover: 0 24px 60px rgba(0,0,0,.38);
    --demo-wash: rgba(220,174,78,.09);
  }
}

html { scrollbar-color: var(--qq-steel-400) var(--bg-2); }
body { background-color: var(--bg); color: var(--text); }
::placeholder { color: var(--placeholder); opacity: 1; }
:is(input, textarea, select) { caret-color: var(--accent); }
:is(input, textarea, select):disabled { color: var(--text-faint); opacity: .72; }
.qqp-topbar nav > a:hover { color: var(--accent-text); }
.qqp-topbar__cart b { color: var(--text-onbrass); }

/* The original global shell remains visually identical across all routes. */
.qq-topbar { background: var(--shell-topbar); color: var(--inverse-hi); }
.qq-header { background: var(--shell-header) !important; isolation: isolate; }
.qq-topbar > .container,
.qq-header > .container { inline-size: min(1480px, calc(100% - (var(--gutter) * 2))); }
.qq-header__inner {
  grid-template-columns: minmax(230px, auto) minmax(0, 1fr) auto;
  gap: clamp(.65rem, 1.4vw, 1.25rem);
}
.qq-brand { max-inline-size: 330px; }
.qq-brand__text { overflow: hidden; }
.qq-nav { min-inline-size: 0; }
.qq-nav__link { padding-inline: clamp(.55rem, .8vw, 1rem); font-size: clamp(.82rem, .72rem + .2vw, .98rem); }
.qq-actions { flex: 0 0 auto; }
.qq-mega { background: var(--panel-elevated); border-color: var(--line-strong); }
.qq-mega__link:hover { background: var(--panel-muted); }
.qq-backdrop { background: var(--scrim); }
.qq-drawer { background: var(--panel-elevated); }
.qq-drawer__head, .qq-drawer__foot, .qq-dnav a, .qq-dnav button { background: var(--panel-muted); }

/* Shared panels: one surface and elevation contract instead of page-local hues. */
:is(.qqs-card,.qqs-filters,.qqs-search,.qqc-items,.qqc-summary,.qqx-form,.qqx-summary,.qqo-receipt,.qqo-card,.qqp-card) {
  background: var(--panel-elevated);
  border-color: var(--line);
  box-shadow: var(--panel-shadow);
}
:is(.qqs-card,.qqc-items,.qqc-summary,.qqx-form,.qqx-summary,.qqo-receipt) { isolation: isolate; }
.qqs-card:hover { box-shadow: var(--panel-shadow-hover); }
:is(.qqs-card__media,.qqc-line__media,.qqx-summary-line img,.qqx-review-line img,.qqo-products img) { background: var(--image-stage); }
:is(.qqx-fields input,.qqx-fields select,.qqx-fields textarea,.qqx-note textarea) { background: var(--field-bg); }
.qqx-summary > p, .qqc-grand, .qqo-notice { background: var(--demo-wash); }
.qqx-success::backdrop, .qqc-confirm::backdrop { background: var(--scrim); }

/* Checkout fixes visible in the supplied 385px captures. */
.qqx-main { min-inline-size: 0; }
.qqx-customer label span { min-inline-size: 0; }
.qqx-customer input[type="radio"] { order: -1; }
.qqx-form__actions { background: var(--panel-muted); }

@media (max-width: 1380px) {
  .qq-brand__tag { display: none; }
  .qq-brand { max-inline-size: 230px; }
  .qq-header .qq-brand__logo { inline-size: 96px; block-size: 54px; }
  .qq-actions .btn--ghost { display: none; }
}

/* CSS and header.js use the same desktop/mobile boundary. */
@media (max-width: 1180px) {
  :root { --header-h: 68px; }
  .qq-header__inner { grid-template-columns: auto minmax(0,1fr) auto; }
  .qq-nav { display: none; }
  .qq-burger { display: block; grid-column: 1; justify-self: start; }
  .qq-brand { grid-column: 2; justify-self: center; }
  .qq-actions { grid-column: 3; justify-self: end; }
}

@media (max-width: 620px) {
  .qq-topbar > .container,
  .qq-header > .container { inline-size: calc(100% - 1rem); }
  .qq-topbar__links { justify-content: space-between; }
  .qq-header__inner { gap: .4rem; }
  .qq-header .qq-brand__logo { inline-size: 78px; block-size: 46px; }
  .qq-actions { gap: .2rem; }
  .qq-actions .qq-iconbtn { inline-size: 40px; block-size: 40px; }
  .qq-actions .btn--brass { inline-size: 42px; min-inline-size: 42px; padding: 0; }

  .qqx-main { inline-size: calc(100% - 1rem); margin-block: .75rem 4rem; }
  .qqx-layout { gap: .8rem; }
  .qqx-panel { padding: 1rem; }
  .qqx-fields { gap: .8rem; }
  .qqx-customer { display: grid; grid-template-columns: 1fr; gap: .5rem; }
  .qqx-customer label {
    display: flex; inline-size: 100%; min-block-size: 54px; margin: 0;
    justify-content: space-between; gap: .75rem; padding: .65rem .8rem;
  }
  .qqx-customer label span { flex: 1; white-space: nowrap; text-align: start; }
  .qqx-customer input[type="radio"] { order: 0; flex: 0 0 20px; }
  .qqx-form__actions { position: static; grid-template-columns: auto 1fr auto; backdrop-filter: none; }
  .qqx-summary { margin-block-start: 0; }
}

@media (max-width: 390px) {
  .qq-topbar__phone { padding-inline: .6rem; }
  .qq-header .qq-brand__logo { inline-size: 70px; block-size: 42px; }
  .qq-actions .qc__listBtn { display: none; }
  .qqx-panel { padding: .8rem; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(21,31,39,.3); --line-strong: rgba(21,31,39,.5); }
  :root[data-theme="dark"] { --line: rgba(255,255,255,.3); --line-strong: rgba(255,255,255,.5); }
  :is(.qqs-card,.qqc-items,.qqc-summary,.qqx-form,.qqx-summary) { box-shadow: none; }
}

@media print {
  .qq-topbar, .qq-actions, .qq-burger, .qq-drawerhost, .qq-backdrop { display: none !important; }
  .qq-header { position: static; background: #fff !important; box-shadow: none; }
}

/* v18 shared topbar and mobile contact links */
.qq-topbar .qq-topbar__links{gap:.45rem;flex-shrink:0}.qq-topbar .qq-topbar__phone{white-space:nowrap;direction:ltr}
.qq-messengers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.qq-messengers>a,.qq-messengers>button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;min-height:76px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);font-size:.8rem}
.qq-messengers .icon{width:27px;height:27px;color:var(--accent-text)}.qq-messengers>a:hover,.qq-messengers>button:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.qq-eitaa-help{padding:1rem;margin-bottom:1rem;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:.85rem;line-height:1.9}.qq-eitaa-help[hidden]{display:none}.qq-eitaa-help input{width:100%;min-width:0;padding:.5rem;background:var(--field-bg);color:var(--text);border:1px solid var(--line);border-radius:8px}.qq-eitaa-help button,.qq-eitaa-help a{display:inline-block;min-height:44px;padding:.6rem;color:var(--accent-text)}
@media(max-width:1180px){.qq-topbar .qq-topbar__facts{display:none}.qq-topbar .qq-topbar__links{width:100%;justify-content:flex-end}.qq-topbar .qq-msg{margin-inline-end:auto}}
@media(max-width:480px){.qq-topbar .qq-topbar__inner{gap:0}.qq-topbar .qq-topbar__phone{font-size:.7rem;padding-inline:.45rem;min-height:30px}.qq-topbar .qq-topbar__links{gap:.35rem}.qq-topbar .qq-msg{display:none}.qq-topbar .qq-topbar__links{justify-content:space-between}.qq-topbar .qq-topbar__phone .icon{width:12px;height:12px}}
/* Correct inverse CTA contrast after global visual styles. */
.s5-page .cta h3{position:relative;color:#F5F8FA;font-size:clamp(1.1rem,1rem + .5vw,1.6rem);line-height:1.8}.s5-page .cta .btn--out{color:#F5F8FA;border-color:#9AA7B4}

/* Shared shell is omitted from printed receipts. */
@media print{
  .qqo-body [data-site-header],.qqo-body [data-site-footer],.qqo-body .qq-header,.qqo-body .qq-topbar,.qqo-body .fo,.qqo-body .qq-drawerhost,.qqo-body .qq-backdrop,.qqo-body .qqo-actions{display:none!important}
}