/* Shared customer components inherit the approved storefront palette, never the admin palette. */
:root {
  --store-page:var(--ks-canvas,#f5f3ec); --store-surface:var(--ks-surface,#fff);
  --store-soft:var(--ks-sunken,#eeeee8); --store-ink:var(--ks-ink,#242424);
  --store-muted:var(--ks-ink-2,#606060); --store-line:var(--ks-line,#dededb);
  --store-input:var(--ks-surface,#fff); --store-input-line:var(--ks-ink-3,#81817c);
  --store-accent:var(--ks-brand,#275840); --store-on-accent:#fff;
  --store-button:var(--store-accent); --store-radius:16px; --store-field-radius:10px;
  --store-button-radius:10px; --store-shadow:none; --store-scheme:light;
  --store-success-bg:#edf3ed; --store-success-ink:#274d35;
  --store-error-bg:#fff0ee; --store-error-ink:#902f23;
}
:is([data-storefront],.theme-cafenik,.theme-shamsa,.theme-najm,.theme-atta,.theme-babkad) {
  --store-button:var(--store-accent);
}
:is([data-storefront="cafenik"],.theme-cafenik) {
  --store-page:#071b26; --store-surface:#122d38; --store-soft:#193640;
  --store-ink:#f0e5cc; --store-muted:#b5c5be; --store-line:#38565b;
  --store-input:#0a222e; --store-input-line:#708887;
  --store-accent:#dac6a2; --store-on-accent:#112b37;
  --store-button:linear-gradient(120deg,#f0e2c8,#d5c09b); --store-button-radius:999px;
  --store-radius:18px; --store-shadow:inset 0 1px #eaddc216,0 14px 30px #020f1752;
  --store-scheme:dark; --store-success-bg:#203e34; --store-success-ink:#c9e1b7;
  --store-error-bg:#482a2b; --store-error-ink:#ffd5cf;
}
:is([data-storefront="shamsa"],.theme-shamsa) {
  --store-page:var(--ks-canvas,#f5fbfc); --store-surface:var(--ks-surface,#fff);
  --store-soft:var(--ks-sunken,#e7f5f7); --store-ink:var(--ks-ink,#142f34);
  --store-muted:#4b6369; --store-line:var(--ks-line,#cce5e9);
  --store-input:#f5fbfc; --store-input-line:#6d929a;
  --store-accent:var(--ks-brand,#00b7d0); --store-on-accent:#073840;
  --store-field-radius:8px; --store-button-radius:8px;
  --store-shadow:0 12px 30px #0738400a;
}
:is([data-storefront="najm"],.theme-najm) {
  --store-page:var(--ks-canvas,#f8f3e9); --store-surface:var(--ks-surface,#fffaf2);
  --store-soft:var(--ks-sunken,#eee5d7); --store-ink:var(--ks-ink,#463325);
  --store-muted:var(--ks-ink-2,#68543f); --store-line:var(--ks-line,#dfd2c0);
  --store-input:#fffaf2; --store-input-line:#9c846a;
  --store-accent:var(--ks-brand,#895739); --store-on-accent:#fffaf2;
  --store-radius:20px; --store-shadow:0 12px 30px #4633250a;
}
:is([data-storefront="atta"],.theme-atta) {
  --store-page:#f5f1f7; --store-surface:#fff; --store-soft:#eee7f8;
  --store-ink:#211a29; --store-muted:#62556d; --store-line:#ded5e5;
  --store-input:#faf7fc; --store-input-line:#8e7c9d;
  --store-accent:var(--ks-brand,#8060af); --store-on-accent:#fff;
  --store-radius:14px; --store-shadow:0 12px 30px #211a290a;
}
:is([data-storefront="babkad"],.theme-babkad) {
  --store-page:#0c0c0c; --store-surface:#151515; --store-soft:#292929;
  --store-ink:#efeeeb; --store-muted:#bcbcbc; --store-line:#555;
  --store-input:#111; --store-input-line:#777; --store-accent:#efeeeb;
  --store-on-accent:#111; --store-radius:0; --store-field-radius:0; --store-button-radius:0;
  --store-scheme:dark; --store-success-bg:#223129; --store-success-ink:#d3e6d8;
  --store-error-bg:#3e2828; --store-error-ink:#ffd5cf;
}
.store-commerce {
  width:min(1180px,calc(100% - 40px)); margin:48px auto 72px;
  color:var(--store-ink); font-family:inherit; line-height:1.9; min-height:50vh;
}
.store-commerce * {box-sizing:border-box}
.store-commerce h1 {font-size:clamp(28px,4vw,42px);line-height:1.5;margin:12px 0 28px;font-weight:800}
.store-commerce h2 {font-size:23px;margin:20px 0 12px}
.store-commerce p {margin:12px 0;overflow-wrap:anywhere}
.store-commerce a {color:inherit;text-underline-offset:5px}
.store-commerce .eyebrow {color:var(--store-muted);font-size:13px}
.store-commerce .columns,.store-commerce .grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.store-commerce .grid {grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0}
.store-commerce :is(.panel,.narrow,.product) {padding:28px;margin:24px 0;background:var(--store-surface);border:1px solid var(--store-line);border-radius:var(--store-radius);box-shadow:var(--store-shadow);min-width:0}
.store-commerce .narrow {max-width:560px;margin:40px auto}
.store-commerce .row {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--store-line)}
.store-commerce .row form {display:flex;align-items:end;gap:12px}
.store-commerce label {display:flex;flex-direction:column;gap:8px;margin:16px 0;font-weight:700}
.store-commerce .check {flex-direction:row;align-items:center;font-weight:400}
.store-commerce .price {font-size:24px;font-weight:700}
.store-commerce .price del {font-size:16px;color:var(--store-muted)}
.store-commerce fieldset {min-width:0;border:1px solid var(--store-line);border-radius:var(--store-field-radius);padding:18px;margin:24px 0}
.store-commerce legend {padding:0 8px}
.store-commerce :is(.cover,.product img) {width:100%;max-height:560px;object-fit:contain;border-radius:var(--store-field-radius)}
.store-commerce .filters {display:flex;align-items:end;gap:16px;flex-wrap:wrap}
.store-commerce .filters label {flex:1;min-width:150px}
.store-commerce .pagination {display:flex;justify-content:center;align-items:center;gap:24px;margin:30px 0}
.store-commerce details summary {min-height:44px;cursor:pointer;font-weight:700}
.store-commerce .description {white-space:pre-line}
.store-commerce :is(.journal-cover,.article-cover) {display:block;width:100%;height:auto;max-height:560px;object-fit:contain;margin-block:24px}

/* Extra specificity keeps page-local wholesale/guide sheets from resetting the brand. */
:is(.store-commerce,.customer-service) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea),
.cs-auth .cs-form input {
  font:inherit;font-size:16px;min-height:48px;width:100%;min-width:0;padding:12px 14px;
  background:var(--store-input);color:var(--store-ink);border:1px solid var(--store-input-line);
  border-radius:var(--store-field-radius);color-scheme:var(--store-scheme);
}
:is(.store-commerce,.customer-service) textarea {min-height:110px;resize:vertical}
:is(.store-commerce,.customer-service,.cs-auth) :is(input,textarea)::placeholder {color:var(--store-muted);opacity:1}
:is(.store-commerce,.customer-service) :is(button,.button),.cs-auth .cs-form button {
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;
  background:var(--store-button);color:var(--store-on-accent);border:1px solid var(--store-accent);
  border-radius:var(--store-button-radius);transition:filter .2s,box-shadow .2s;
}
:is(.store-commerce,.customer-service) :is(button,.button):hover,.cs-auth .cs-form button:hover {filter:brightness(1.07)}
:is(.store-commerce,.customer-service) :is(button,.button):disabled {opacity:.5;cursor:not-allowed}
:is(.store-commerce,.customer-service) :is(.secondary,.cs-text-button) {background:transparent;color:var(--store-ink);border-color:var(--store-input-line)}
:is(.store-commerce,.customer-service) :is(input[type=checkbox],input[type=radio]) {width:20px;min-height:20px;flex:0 0 20px;accent-color:var(--store-accent);color-scheme:var(--store-scheme)}
:is(.store-commerce,.customer-service) :is(.notice,.cs-notice) {padding:16px;border-radius:var(--store-field-radius);background:var(--store-success-bg);color:var(--store-success-ink);border:1px solid currentColor}
:is(.store-commerce,.customer-service) :is(.errors,.cs-error) {padding:16px;border-radius:var(--store-field-radius);background:var(--store-error-bg);color:var(--store-error-ink);border:1px solid currentColor}
:is(.store-commerce,.customer-service,.cs-auth) :focus-visible {outline:3px solid var(--store-accent);outline-offset:4px}
:is(.store-commerce,.customer-service,.cs-auth) input[aria-invalid=true] {border-color:var(--store-error-ink)}
.wholesale-notice {background:var(--store-soft);color:var(--store-ink);border-color:var(--store-line);font-family:inherit}
.customer-service :is(.quote-card,.guide-products article,.panel) {background:var(--store-surface);border-color:var(--store-line);border-radius:var(--store-radius);color:var(--store-ink)}
.customer-service :is(.guide-choices label,fieldset,.quote-card th,.quote-card td) {border-color:var(--store-input-line)}
.store-commerce .customer-service {width:100%;margin-block:0}
.payment-options .payment-choice {display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px;margin:8px 0;background:var(--store-soft);border:1px solid var(--store-line);border-radius:var(--store-field-radius);cursor:pointer}
.payment-options .payment-choice input {width:20px;min-height:20px;flex:0 0 20px;accent-color:var(--store-accent)}
.payment-options .payment-choice:has(input:checked) {border-color:var(--store-accent)}
/* Destination details stay selectable and inherit each storefront's palette. */
:is(.store-commerce,.commerce-surface) .bank-transfer {max-width:480px;margin:28px auto 8px;container-type:inline-size}
:is(.store-commerce,.commerce-surface) .bank-card {position:relative;isolation:isolate;overflow:hidden;padding:26px;border:1px solid var(--store-input-line);border-radius:20px;background:linear-gradient(125deg,var(--store-soft),var(--store-surface) 65%);color:var(--store-ink);box-shadow:var(--store-shadow);line-height:1.5}
:is(.store-commerce,.commerce-surface) .bank-card::before {content:"";position:absolute;z-index:-1;width:250px;height:250px;border:1px solid var(--store-line);border-radius:50%;inset-inline-end:-110px;top:-70px;box-shadow:0 0 0 24px var(--store-soft);opacity:.65;pointer-events:none}
:is(.store-commerce,.commerce-surface) .bank-card__header {display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:700}
:is(.store-commerce,.commerce-surface) .bank-card__caption {display:block;font-size:12px;font-weight:400;color:var(--store-muted)}
:is(.store-commerce,.commerce-surface) .bank-card__chip {display:block;position:relative;width:40px;height:29px;margin:16px 0 10px;border:1px solid var(--store-input-line);border-radius:7px;background:var(--store-soft);overflow:hidden}
:is(.store-commerce,.commerce-surface) .bank-card__chip::before,:is(.store-commerce,.commerce-surface) .bank-card__chip::after {content:"";position:absolute;inset:10px 0;border-block:1px solid var(--store-input-line)}
:is(.store-commerce,.commerce-surface) .bank-card__chip::after {inset:0 12px;border-block:0;border-inline:1px solid var(--store-input-line);border-radius:6px}
:is(.store-commerce,.commerce-surface) .bank-card__number {display:block;margin-top:5px;font-family:ui-monospace,Consolas,monospace;font-size:clamp(17px,5vw,27px);font-weight:600;letter-spacing:.035em;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums;user-select:all}
:is(.store-commerce,.commerce-surface) .bank-card__holder {margin-top:14px;overflow-wrap:anywhere}
:is(.store-commerce,.commerce-surface) .bank-card__holder strong {display:block;margin-top:3px;font-size:16px;font-weight:600}
:is(.store-commerce,.commerce-surface) .bank-card__iban {margin-top:18px;padding-top:14px;border-top:1px solid var(--store-line)}
:is(.store-commerce,.commerce-surface) .bank-card__iban b {display:block;margin-top:5px;font-family:ui-monospace,Consolas,monospace;font-size:clamp(12px,3.1vw,17px);font-weight:500;text-align:left;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;user-select:all}
:is(.store-commerce,.commerce-surface) .bank-transfer__actions {display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
:is(.store-commerce,.commerce-surface) .bank-transfer__actions button {flex:1;min-width:140px;padding:10px 12px;font-size:14px;margin:0}
:is(.store-commerce,.commerce-surface) .bank-transfer__actions button:active {transform:translateY(1px)}
:is(.store-commerce,.commerce-surface) .bank-transfer__actions button:hover {background:var(--store-soft);color:var(--store-ink)}
:is(.store-commerce,.commerce-surface) .bank-transfer__actions button:disabled {opacity:.7;background:var(--store-soft);color:var(--store-ink)}
:is(.store-commerce,.commerce-surface) .bank-transfer__feedback {min-height:28px;margin:8px 0;font-size:13px;text-align:center;color:var(--store-muted)}
@media(max-width:400px) {
  :is(.store-commerce,.commerce-surface) .bank-card {padding:18px}
  :is(.store-commerce,.commerce-surface) .bank-card__number {font-size:clamp(15px,4.7vw,19px);letter-spacing:0}
}
@supports (font-size:1cqw) {
  :is(.store-commerce,.commerce-surface) .bank-card__number {font-size:clamp(12px,5.5cqw,27px)}
}
:is(.store-commerce,.commerce-surface) .bank-transfer :focus-visible {outline:3px solid var(--store-accent);outline-offset:4px}
@media(max-width:720px) {
  .store-commerce {width:calc(100% - 32px);margin:28px auto 48px}
  .store-commerce .columns,.store-commerce .grid {grid-template-columns:1fr}
  .store-commerce .row {align-items:start;flex-wrap:wrap}
  .store-commerce .row form {width:100%;flex-wrap:wrap}
  .store-commerce :is(.panel,.narrow,.product) {padding:20px}
}
@media(prefers-reduced-motion:reduce) {
  :is(.store-commerce,.customer-service,.cs-auth) :is(button,.button) {transition:none}
}