/* Chavill backend-owned CSS chunk: d4f1c9a7e625308b.css; version: 1.0.0-105db2c98093 */
/* Chavill visual polish: restrained, friendly and page-specific. */
:root {
  /* Used by every out-of-stock and destructive treatment. It was written as a
     fallback literal at a dozen call sites and defined nowhere, so the token
     never actually resolved. Same colour, one definition. */
  --cv-danger: #b3261e;
  --cv-radius-sm: 12px;
  --cv-radius-md: 18px;
  --cv-radius-lg: 24px;
  --cv-shadow-soft: 0 10px 32px rgba(12, 74, 59, .065);
  --cv-shadow-raised: 0 18px 46px rgba(12, 74, 59, .11);
}

::selection {
  background: color-mix(in srgb, var(--cv-brand) 22%, #fff);
  color: var(--cv-dark);
}

body {
  line-height: 1.75;
  background: linear-gradient(180deg, #fcfefd 0, var(--cv-soft) 42rem, #f8fbfa 100%);
}

body::before { opacity: .28; background-size: 72px 72px; }

.nav {
  border-bottom: 1px solid color-mix(in srgb, var(--cv-brand) 11%, #e8efec);
  box-shadow: 0 7px 24px rgba(12, 74, 59, .055);
}

.nav-inner { min-height: 72px; }
.brand { font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
.nav .links a { color: #34453f; font-size: .9rem; font-weight: 650; }

.card {
  border-color: color-mix(in srgb, var(--cv-brand) 10%, #eef5f2);
  box-shadow: var(--cv-shadow-soft);
}

.btn {
  min-height: 43px;
  border-radius: 13px;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--cv-brand) 16%, transparent);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.ghost { box-shadow: 0 5px 14px rgba(12, 74, 59, .045); }

.input,
select,
textarea,
.nav input {
  border-color: #dce8e3;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(12, 74, 59, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input:hover,
select:hover,
textarea:hover,
.nav input:hover { border-color: color-mix(in srgb, var(--cv-brand) 28%, #dce8e3); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cv-brand) 24%, transparent);
  outline-offset: 3px;
}

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cv-brand) 38%, #b8c8c1) #edf3f0; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { border-radius: 999px; background: #edf3f0; }
*::-webkit-scrollbar-thumb {
  border: 2px solid #edf3f0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cv-brand) 46%, #aebdb7);
}

.section { padding-block: clamp(28px, 5vw, 64px); }
.section > h1:not(.panel-page-head h1) { letter-spacing: -.035em; }

.table-wrap { border: 1px solid var(--cv-line); background: #fff; }
.table th { background: color-mix(in srgb, var(--cv-soft) 84%, #fff); color: #345148; font-size: .8rem; }
.table td { color: #2d3d37; }
.table tbody tr:nth-child(even) td { background: rgba(244, 248, 246, .48); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--cv-soft) 82%, #fff); }

.footer { border-top: 1px solid #e8f1ed; background: linear-gradient(180deg, #ffffff, #f4faf7); }

/* Storefront rhythm */
main[data-page="home"] { padding-top: clamp(16px, 3vw, 34px); }
.home-hero-premium .campaign-hero-slider { box-shadow: 0 26px 68px color-mix(in srgb, var(--cv-brand) 15%, transparent); }
.campaign-hero-controls button { transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.home-strip-section > h2,
.home-strip-section .section-title h2 { letter-spacing: -.03em; }
.home-scroll-strip .product { border-radius: 20px; box-shadow: var(--cv-shadow-soft); }
#homeCategories > a.card { border-radius: 18px; box-shadow: var(--cv-shadow-soft); }
#newsletter { border-radius: 24px; box-shadow: 0 20px 52px color-mix(in srgb, var(--cv-brand) 18%, transparent); }

/* User and admin workspaces */
.account-shell-page {
  width: min(1280px, calc(100% - 28px));
  padding-top: 28px;
}

.account-shell-page .panel-page-head {
  position: relative;
  overflow: hidden;
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(22px, 3.2vw, 34px);
  border-radius: var(--cv-radius-lg);
  background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--cv-soft) 86%, #fff));
  box-shadow: var(--cv-shadow-soft);
}

.account-shell-page .panel-page-head::before {
  content: '';
  position: absolute;
  inset-block: 20px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(var(--cv-brand), var(--cv-brand-2));
}

.panel-page-head h1 { margin-block: 5px; font-size: clamp(1.7rem, 3vw, 2.65rem); }
.premium-panel.panel { gap: 16px; }

.premium-panel .side {
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--cv-shadow-soft);
}

.side-identity {
  margin-bottom: 7px;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 10%, #e5efea);
  background: linear-gradient(135deg, var(--cv-soft), #fff);
}

.side-avatar { border-radius: 13px; box-shadow: 0 8px 18px color-mix(in srgb, var(--cv-brand) 21%, transparent); }

.premium-panel .side a,
.premium-panel .side button {
  min-height: 42px;
  border-radius: 11px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.premium-panel .side a:hover { transform: translateX(-2px); }
.premium-panel .side a.active { box-shadow: inset -3px 0 0 var(--cv-brand); }

#panel > .panel-section,
#admin > .card,
#admin > .grid > .card,
#adminEditor > .card {
  border-radius: 20px;
  box-shadow: var(--cv-shadow-soft);
}

#panel > .panel-section,
#admin > .card { padding: clamp(18px, 2.6vw, 28px); }

.panel-section-intro,
.section-title { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--cv-line) 82%, transparent); }

.panel-section-intro h2,
.section-title h2 { letter-spacing: -.025em; }

.panel-summary-grid,
.admin-summary-grid,
.admin-stat-grid { gap: 11px; }

.panel-summary-card,
.admin-summary-item,
.admin-stat-grid .stat-card {
  min-height: 112px;
  border-radius: 16px;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.panel-summary-card:hover,
.admin-summary-item:hover,
.admin-stat-grid .stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cv-brand) 26%, #fff);
  box-shadow: 0 12px 28px rgba(12, 74, 59, .075);
}

.panel-summary-card.primary { background: linear-gradient(135deg, var(--cv-dark), var(--cv-brand)); }

.pretty-order,
.order-card { border-radius: 16px; background: linear-gradient(120deg, #fff, #f8fbfa); }

.order-card:hover { transform: translateX(-2px); border-color: color-mix(in srgb, var(--cv-brand) 24%, #fff); }
.settings-panel { border-top-width: 3px; }

.site-setting-card,
.newsletter-settings {
  padding: 18px;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fbfdfc;
}

.theme-choice { border-radius: 13px; }
.notification-stack,
.scroll-box { scrollbar-color: color-mix(in srgb, var(--cv-brand) 35%, #c8d7d1) transparent; }

.notification-card { padding: 14px 16px; border: 1px solid var(--cv-line); background: #fff; }

.admin-shell-page #admin > .admin-dashboard-hero {
  min-height: 178px;
  border-radius: 22px;
  background: linear-gradient(125deg, var(--cv-dark), color-mix(in srgb, var(--cv-brand) 90%, #2a7460));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--cv-brand) 19%, transparent);
}

.admin-dashboard-hero .hero-kicker,
.admin-revenue-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.admin-dashboard-workspace,
.admin-dashboard-columns { gap: 13px; }

.admin-task-list a,
.admin-stock-list > div,
.admin-alert { border-radius: 12px; transition: background .16s ease, transform .16s ease; }

.admin-task-list a:hover,
.admin-alert:hover { transform: translateX(-2px); }

#admin > .card:first-child { border-top: 3px solid color-mix(in srgb, var(--cv-brand) 75%, #fff); }

#admin form[data-admin-search] {
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: #f8fbfa;
}

.admin-resource-table { border-radius: 18px !important; box-shadow: var(--cv-shadow-soft) !important; }
.admin-resource-table .table thead th { background: #edf6f2; }

/* Product catalog */
.catalog-page { padding-top: clamp(26px, 4vw, 44px); }

.catalog-heading {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 22px 20px 26px;
  border: 1px solid var(--cv-line);
  border-inline-start: 4px solid var(--cv-brand);
  border-radius: 18px;
  background: linear-gradient(110deg, #fff, color-mix(in srgb, var(--cv-soft) 86%, #fff));
  box-shadow: var(--cv-shadow-soft);
}

.catalog-heading h1 { margin: 0 0 3px; font-size: clamp(1.8rem, 3vw, 2.55rem); }
.catalog-layout { gap: 20px; }

.catalog-page .product-filters { padding: 14px; border-radius: 17px; box-shadow: var(--cv-shadow-soft); }
.filter-heading { padding-bottom: 12px; }

.catalog-page .filter-panel {
  border-radius: 12px;
  background: #fafcfb;
  transition: border-color .16s ease, background .16s ease;
}

.catalog-page .filter-panel[open] { border-color: color-mix(in srgb, var(--cv-brand) 22%, #eef5f2); background: #fff; }
.catalog-page .check-row:hover { background: var(--cv-soft); }

.checkout-terms-confirm {
  align-items: center;
}

.checkout-terms-confirm span {
  line-height: 1.9;
}

.checkout-terms-confirm a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.checkout-terms-confirm a:hover,
.checkout-terms-confirm a:focus-visible {
  color: var(--primary-dark);
}

.catalog-toolbar {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .78);
}

.product-media-specs { background: #fff; }

.product-media-specs > .thumb {
  border: 1px solid #e6efeb;
  border-radius: 18px;
  background: linear-gradient(145deg, #f2f7f5, #fff);
}

.product-detail-main { padding: clamp(22px, 3.2vw, 36px); }

.product-detail-main > .muted:first-child {
  width: fit-content;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .76rem;
}

.product-detail-main h1 { font-size: clamp(1.8rem, 3.5vw, 2.9rem); letter-spacing: -.045em; }

.product-detail-main .price {
  width: fit-content;
  padding-bottom: 8px;
  border-bottom: 3px solid color-mix(in srgb, var(--cv-brand) 25%, transparent);
}

.volume-purchase-box {
  border: 1px solid color-mix(in srgb, var(--cv-brand) 16%, #e4ebe8);
  border-radius: 16px;
  background: linear-gradient(120deg, var(--cv-soft), #fff);
}

.product-detail-main > .btn:not(.secondary) { min-height: 50px; }
.product-specs-under-image { padding-top: 14px; border-top: 1px solid var(--cv-line); }

.product-description,
.qa-section {
  margin-top: 18px;
  border-radius: 21px;
  box-shadow: var(--cv-shadow-soft);
}

.product-description { border-top: 3px solid color-mix(in srgb, var(--cv-brand) 72%, #fff); }

/* Support */
.support-page { width: min(1040px, calc(100% - 28px)); }
.support-page-shell { display: grid; gap: 18px; }

.support-start {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 22px;
  border-top: 4px solid var(--cv-brand);
  background: linear-gradient(125deg, #fff, color-mix(in srgb, var(--cv-soft) 82%, #fff));
  box-shadow: var(--cv-shadow-raised);
}

.support-start h1 { margin: 6px 0; font-size: clamp(1.8rem, 3.5vw, 2.75rem); letter-spacing: -.04em; }
.support-start > .muted { max-width: 68ch; margin-bottom: 22px; }

/* One column: the contact grid, the description and the footer stack in order.
   This used to be a two-column grid whose `grid-column: 1 / -1` spans pointed at
   elements that are no longer direct children, so the textarea ended up sitting
   beside the fields instead of below them. */
.support-start-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}

.support-chat {
  gap: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--cv-shadow-raised);
}

.support-chat-header {
  border-radius: 0;
  padding: 18px 20px;
  background: linear-gradient(120deg, var(--cv-dark), var(--cv-brand));
  box-shadow: none;
}

.support-chat-body {
  min-height: 260px;
  max-height: min(56vh, 560px);
  padding: 18px;
  gap: 10px;
  background: linear-gradient(180deg, #f5f9f7, #fff);
}

.chat-message {
  border: 1px solid color-mix(in srgb, var(--cv-brand) 12%, #e8f1ed);
  border-radius: 17px 17px 5px 17px;
  box-shadow: 0 7px 18px rgba(12, 74, 59, .065);
}

.chat-message.from-admin { border-radius: 17px 17px 17px 5px; background: var(--cv-brand); }

.support-reply-form {
  margin: 12px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(12, 74, 59, .055);
}

.admin-ticket-shell { gap: 14px; }
.admin-ticket-list { border-radius: 17px; }
.admin-ticket-list-item { border-radius: 12px; }

/* Small overlays, dialogs and feedback */
.pretty-confirm-backdrop,
.auth-flow-overlay,
.mfa-wizard-overlay,
.order-detail-backdrop,
.product-finder-overlay {
  padding: clamp(12px, 3vw, 24px);
  background: rgba(7, 28, 22, .62);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  backdrop-filter: blur(10px) saturate(.9);
}

.pretty-confirm,
.auth-flow-card,
.mfa-wizard-card,
.order-detail-modal,
.product-finder-modal {
  max-height: min(90vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 31, 23, .24);
}

.pretty-confirm {
  gap: 12px;
  padding: clamp(22px, 4vw, 30px);
  border-top: 4px solid var(--cv-brand);
  background: linear-gradient(145deg, #fff, #fbfdfc);
}

.pretty-confirm h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.pretty-confirm p { color: var(--cv-muted); line-height: 1.9; }

.pretty-confirm-x,
.mfa-wizard-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cv-line);
  border-radius: 11px;
  background: #fff;
  color: var(--cv-muted);
  line-height: 1;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.pretty-confirm-x:hover,
.mfa-wizard-close:hover { border-color: var(--cv-brand); background: var(--cv-soft); color: var(--cv-brand); }

.auth-flow-card { border-top: 4px solid var(--cv-brand); }
.auth-flow-card form { gap: 11px; }

.auth-code-input {
  border-radius: 14px;
  background: var(--cv-soft);
  color: var(--cv-dark);
}

.mfa-wizard-card { padding: clamp(20px, 4vw, 34px); }
.mfa-wizard-head { padding-bottom: 15px; border-bottom: 1px solid var(--cv-line); }
.mfa-steps li { border: 1px solid transparent; border-radius: 11px; }
.mfa-steps li.is-active { border-color: color-mix(in srgb, var(--cv-brand) 22%, #fff); }

.product-finder-modal { border-top: 4px solid var(--cv-brand); }
.perfume-finder-form { border-radius: 0; background: none; }
.finder-empty,
.empty-state {
  padding: clamp(22px, 4vw, 34px);
  border: 1px dashed color-mix(in srgb, var(--cv-brand) 24%, var(--cv-line));
  border-radius: 17px;
  background: linear-gradient(135deg, var(--cv-soft), #fff);
  text-align: center;
}

.finder-loading {
  border-radius: 15px;
  box-shadow: var(--cv-shadow-soft);
}

.order-detail-modal { border-top: 4px solid var(--cv-brand); }
.order-detail-products,
.order-delivery-form { border-radius: 17px; background: #fafcfb; }
.order-finance-grid span { border: 1px solid #e7efeb; }

.broadcast-preview { border-top-color: var(--cv-brand); }
.broadcast-preview-content { padding: 10px; border-radius: 16px; background: var(--cv-soft); }
.sms-phone-preview { border-width: 7px; border-color: #1c2925; border-radius: 24px; }

.jalali-calendar-pop {
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(6, 48, 37, .18);
}

.jalali-calendar-pop header { padding-bottom: 8px; border-bottom: 1px solid var(--cv-line); }
.jalali-days button { border-radius: 8px; transition: background .14s ease, color .14s ease; }

.cookie-consent-pop { z-index: 120; }
.cookie-card {
  border: 1px solid color-mix(in srgb, var(--cv-brand) 14%, #fff);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 55px rgba(5, 38, 29, .17);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.cookie-actions { gap: 7px; }

.toast {
  width: min(390px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(12, 40, 31, .96);
  box-shadow: 0 18px 50px rgba(4, 29, 22, .25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-message { min-height: 44px; padding-block: 5px; font-size: .86rem; }
.site-message-content { border-radius: 10px; }
.site-message > button {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  transition: background .16s ease, transform .16s ease;
}
.site-message > button:hover { background: rgba(255, 255, 255, .2); transform: scale(1.04); }
.header-notification-pill { border-radius: 10px; box-shadow: 0 5px 14px rgba(12, 74, 59, .05); }

/* Remaining storefront pages */
main[data-page="login"],
main[data-page="register"],
main[data-page="security"] { width: min(620px, calc(100% - 28px)); }

main[data-page="login"] > form,
main[data-page="register"] > form,
main[data-page="security"] #securityPanel > .card {
  padding: clamp(22px, 4vw, 34px);
  border-top: 4px solid var(--cv-brand);
  border-radius: 20px;
  box-shadow: var(--cv-shadow-raised);
}

main[data-page="login"] > form > a,
main[data-page="register"] > form > a { color: var(--cv-brand); font-weight: 750; }

main[data-page="checkout"] { width: min(820px, calc(100% - 28px)); }

main[data-page="checkout"] > form {
  padding: clamp(22px, 4vw, 34px);
  border-top: 4px solid var(--cv-brand);
  border-radius: 20px;
}

main[data-page="cart"] #cart { max-width: 980px; margin-inline: auto; }
.cart-tabs { border-radius: 16px; box-shadow: var(--cv-shadow-soft); }
.cart-item { border-radius: 17px; }
.cart-summary { border-radius: 17px; background: linear-gradient(135deg, var(--cv-soft), #fff); }

main[data-page="compare"] .compare-specs { border-radius: 18px; box-shadow: var(--cv-shadow-soft); }
main[data-page="invoice"] #invoice { padding: 0; border: 0; background: transparent; box-shadow: none; }

.tracking-premium-hero { border-radius: 24px; box-shadow: 0 20px 54px color-mix(in srgb, var(--cv-brand) 22%, transparent); }
.tracking-main-card,
.tracking-info-grid .card,
.tracking-timeline-card,
.tracking-items-card { border-radius: 19px; box-shadow: var(--cv-shadow-soft); }

.payment-result-card { border-radius: 22px; box-shadow: var(--cv-shadow-raised); }

main[data-page="about"] > .card,
main[data-page="terms"] > .card {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 42px);
  border-top: 4px solid var(--cv-brand);
  border-radius: 20px;
}

@media (max-width: 1024px) {
  .panel-summary-grid,
  .admin-summary-grid,
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .account-shell-page { width: min(100% - 20px, 1280px); }
  .account-shell-page .panel-page-head { align-items: flex-start; flex-direction: column; }
  .premium-panel.panel { grid-template-columns: 1fr; }
  .premium-panel .side {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }
  .side-identity,
  .side-label { grid-column: 1 / -1; }
  .premium-panel .side .logout-button { margin-top: 0; }
  .catalog-toolbar { align-items: flex-start; }
}

@media (max-width: 1024px) {
  .section { padding-block: 24px 42px; }
  .panel-summary-grid,
  .admin-summary-grid,
  .admin-stat-grid,
  .support-start-form { grid-template-columns: 1fr; }
  .support-start-form .contact-message,
  .support-start-form input[type="file"],
  .support-start-form .btn { grid-column: auto; }
  .premium-panel .side { grid-template-columns: 1fr; }
  .side-identity,
  .side-label { grid-column: auto; }
  .panel-page-head .btn,
  .panel-head-actions,
  .panel-head-actions .btn { width: 100%; }
  .catalog-heading { padding: 18px; }
  .catalog-toolbar { flex-direction: column; }
  .catalog-toolbar > a { align-self: stretch; text-align: center; }
  .product-detail-main { padding: 20px; }
  .chat-message { width: 90%; }
  .support-reply-form { grid-template-columns: auto minmax(0, 1fr) auto; margin: 8px; }
  .pretty-confirm,
  .auth-flow-card,
  .mfa-wizard-card,
  .product-finder-modal,
  .order-detail-modal { border-radius: 18px; }
  .mfa-steps { grid-template-columns: 1fr; }
  .cookie-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: hover) {
  .product.card,
  .panel-summary-card,
  .admin-summary-item,
  .admin-stat-grid .stat-card,
  .order-card { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Responsive foundations and interactive storefront components. */
:root { --cv-page-gutter: clamp(14px, 3vw, 22px); }
*,
*::before,
*::after { box-sizing: border-box; }
html,
body { max-width: 100%; overflow-x: clip; }
:where(.grid, .row, .card, .panel-section, .panel-summary-card, .product-card-body, .cart-line-info) { min-width: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .container,
  .catalog-page,
  .account-shell-page,
  .support-page,
  main[data-page="product"],
  main[data-page="cart"],
  main[data-page="checkout"],
  main[data-page="login"],
  main[data-page="register"],
  main[data-page="security"] {
    width: calc(100% - (2 * var(--cv-page-gutter)));
    margin-inline: auto;
    padding-inline: 0;
  }
  .section { min-width: 0; }
}

/* Dashboard content must remain in document flow at every breakpoint. */
#panel,
#dashboard {
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.panel-summary-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.panel-summary-card { width: 100%; min-height: 128px; overflow-wrap: anywhere; }
@media (max-width: 1024px) and (min-width: 481px) {
  .panel-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .panel-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-summary-card { min-height: 112px; }
}

/* MFA: predictable loading, QR sizing and mobile-safe forms. */
.security-loading-state,
.security-load-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.security-loading-state > span,
.variant-picker-loading > span {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--cv-brand) 18%, #e4ebe8);
  border-top-color: var(--cv-brand);
  border-radius: 50%;
  animation: cv-spin .8s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(1turn); } }
.mfa-status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-block: 16px;
  padding: 13px 14px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: #f8faf9;
}
.mfa-status > span {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: #8a9892;
}
.mfa-status.is-enabled > span { background: #12a87e; box-shadow: 0 0 0 5px rgba(30, 155, 105, .12); }
.mfa-status b,
.mfa-status p { display: block; margin: 0; }
.mfa-status p { color: var(--cv-muted); font-size: .84rem; }
.mfa-action-form label { display: grid; gap: 6px; font-weight: 750; }
.security-inline-error {
  padding: 11px 13px;
  border-radius: 12px;
  background: #fff4e8;
  color: #7b4916;
}
.mfa-enrollment-card { display: grid; gap: 18px; margin-top: 18px; }
.mfa-enrollment-grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.mfa-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.mfa-qr-wrap img { display: block; width: min(100%, 280px); height: auto; aspect-ratio: 1; object-fit: contain; }
.mfa-qr-wrap small { color: var(--cv-muted); }
.mfa-manual-key { display: grid; gap: 10px; min-width: 0; }
.mfa-manual-key h3,
.mfa-manual-key p { margin: 0; }
.mfa-manual-key code {
  display: block;
  max-width: 100%;
  padding: 12px;
  overflow-x: auto;
  border-radius: 10px;
  background: #edf4f1;
  font-size: .9rem;
  text-align: left;
  white-space: nowrap;
}
.mfa-recovery {
  min-width: 0;
  padding: 15px;
  border: 1px solid #eadfc8;
  border-radius: 14px;
  background: #fffaf1;
}
.mfa-recovery h3,
.mfa-recovery p { margin-top: 0; }
.mfa-recovery pre {
  max-width: 100%;
  max-height: 190px;
  margin-bottom: 0;
  padding: 12px;
  overflow: auto;
  border-radius: 10px;
  background: #17241f;
  color: #fff;
}
.mfa-confirm-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.mfa-confirm-form label { grid-column: 1 / -1; font-weight: 750; }
@media (max-width: 1024px) {
  .mfa-wizard-head { flex-direction: column; }
  .mfa-wizard-actions { width: 100%; justify-content: space-between; }
  .mfa-steps { grid-template-columns: 1fr; }
  .mfa-steps span { display: inline; }
  .mfa-enrollment-grid { grid-template-columns: 1fr; }
  .mfa-confirm-form { grid-template-columns: 1fr; }
  .mfa-confirm-form label { grid-column: auto; }
  .mfa-confirm-form .btn,
  .mfa-action-form .btn { width: 100%; }
}

/* Product rails and cards keep real content readable without page overflow. */
.home-scroll-strip {
  gap: 16px;
  /* Top padding gives the cards' overhanging action group room inside this
     scroll container, which clips vertically (overflow-y: hidden). */
  padding: 16px 5px 18px;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}
.home-empty-state,
.home-load-error {
  display: grid;
  place-content: center;
  min-height: 220px;
  text-align: center;
}
.home-empty-state p,
.home-load-error p { margin: 4px 0 12px; color: var(--cv-muted); }
@media (max-width: 1024px) {
  .home-scroll-strip { gap: 12px; }
}

/* Variant picker is a centered dialog and turns into a compact bottom sheet. */
.has-modal { overflow: hidden; }
.variant-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 20, 15, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.variant-picker-dialog {
  width: min(520px, 100%);
  max-height: min(720px, calc(100dvh - 36px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(3, 27, 20, .28);
}
.variant-picker-dialog > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--cv-line);
  background: rgba(255, 255, 255, .96);
}
.variant-picker-dialog header span { color: var(--cv-brand); font-size: .76rem; font-weight: 850; }
.variant-picker-dialog h2 { margin: 3px 0 0; font-size: 1.2rem; }
.variant-picker-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cv-ink);
  font: inherit;
  font-size: 1.45rem;
  cursor: pointer;
}
.variant-picker-body { padding: 18px; }
.variant-picker-loading,
.variant-picker-error { display: grid; justify-items: center; gap: 10px; min-height: 190px; place-content: center; text-align: center; }
.variant-picker-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.variant-picker-form legend { margin-bottom: 10px; font-weight: 850; }
.variant-option-list { display: grid; gap: 8px; }
.variant-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  cursor: pointer;
}
.variant-option:has(input:checked) {
  border-color: var(--cv-brand);
  background: color-mix(in srgb, var(--cv-soft) 80%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-brand) 10%, transparent);
}
.variant-option input { width: 20px; height: 20px; accent-color: var(--cv-brand); }
.variant-option span { display: grid; gap: 2px; }
.variant-option small { color: var(--cv-muted); }
.variant-option.is-unavailable { opacity: .75; cursor: not-allowed; }
/* The volume that cannot be bought says so in the same red chip the card button
   and the cart line use, rather than only being faded. */
.variant-option.is-unavailable small {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cv-danger);
  color: #fff;
  font-weight: 800;
}
.variant-picker-message { margin: 10px 0 0; color: #a33a32; }
.variant-picker-submit { width: 100%; margin-top: 14px; }
@media (max-width: 520px) {
  .variant-picker-overlay { align-items: end; padding: 0; }
  .variant-picker-dialog { width: 100%; max-height: min(82dvh, 680px); border-radius: 22px 22px 0 0; }
  .variant-picker-dialog > header,
  .variant-picker-body { padding: 15px var(--cv-page-gutter); }
}

/* Cart line layout: balanced on desktop, clear two-column flow on mobile. */
main[data-page="cart"] #cart { width: 100%; max-width: 1120px; }
.cart-line {
  display: grid;
  grid-template-columns: 112px minmax(170px, 1fr) minmax(110px, auto) 132px minmax(120px, auto) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  transition: opacity .16s ease;
}
.cart-line[aria-busy="true"] { opacity: .6; pointer-events: none; }
.cart-line-media {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cv-soft);
}
.cart-line-media .thumb { width: 100%; height: 100%; object-fit: contain; }
.cart-line-info h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.6; }
.cart-volume,
.cart-stock { margin: 3px 0; font-size: .78rem; }
.cart-volume { display: flex; flex-wrap: wrap; gap: 5px; }
.cart-volume span,
.cart-stock,
.cart-line-unit small,
.cart-line-total small { color: var(--cv-muted); }
.cart-line-unit,
.cart-line-total { display: grid; gap: 3px; }
.cart-line-unit b,
.cart-line-total b { color: var(--cv-brand); white-space: nowrap; }
.cart-quantity {
  display: grid;
  grid-template-columns: 42px 42px 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  background: #fff;
}
.cart-quantity button {
  width: 42px;
  height: 44px;
  border: 0;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}
.cart-quantity button:disabled { opacity: .38; cursor: not-allowed; }
.cart-quantity output { text-align: center; font-weight: 900; }
.cart-line-actions { display: grid; gap: 7px; justify-items: stretch; }
.cart-remove-btn {
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid #ead7d4;
  border-radius: 11px;
  background: #fff8f7;
  color: #a13f37;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.saved-cart-line {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.saved-cart-line .cart-line-media { width: 90px; height: 90px; }
.cart-empty-state,
.cart-load-error,
.cart-loading-state { display: grid; justify-items: center; gap: 10px; min-height: 170px; place-content: center; text-align: center; }
.cart-summary-error { border-color: #ead7d4; background: #fff8f7; color: #8b342d; }
.cart-checkout-action { width: fit-content; margin-inline-start: auto; }
@media (max-width: 1024px) {
  .cart-line { grid-template-columns: 100px minmax(0, 1fr) 132px; }
  .cart-line-media { width: 100px; height: 100px; grid-row: 1 / 3; }
  .cart-line-unit { grid-column: 2; }
  .cart-line-total { grid-column: 2; }
  .cart-quantity { grid-column: 3; grid-row: 1; }
  .cart-line-actions { grid-column: 3; grid-row: 2 / 4; }
}
@media (max-width: 1024px) {
  .cart-line {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
  }
  .cart-line-media { width: 88px; height: 100px; grid-row: 1; }
  .cart-line-info { grid-column: 2; }
  .cart-line-unit,
  .cart-line-total,
  .cart-quantity,
  .cart-line-actions { grid-column: 1 / -1; grid-row: auto; }
  .cart-line-unit,
  .cart-line-total { grid-template-columns: 1fr auto; align-items: center; }
  .cart-quantity { justify-self: start; }
  .cart-line-actions { grid-template-columns: 1fr auto; width: 100%; }
  .cart-line-actions .btn { width: auto; }
  .saved-cart-line { grid-template-columns: 76px minmax(0, 1fr); }
  .saved-cart-line .cart-line-media { width: 76px; height: 82px; }
  .saved-cart-line > .btn { grid-column: 1 / -1; width: 100%; }
  .cart-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-tabs .btn { min-width: 0; padding-inline: 8px; font-size: .8rem; }
  .cart-checkout-action { width: 100%; }
}

/* Page-by-page usability pass. */
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid color-mix(in srgb, var(--cv-brand) 13%, var(--cv-line));
  border-radius: 22px;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--cv-soft) 52%, #fff));
  box-shadow: 0 16px 42px color-mix(in srgb, var(--cv-brand) 7%, transparent);
}

.page-heading h1,
.legal-head h1,
.auth-head h1 {
  margin: 4px 0 0;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.35;
}

.page-heading-link {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cv-brand);
  font-weight: 800;
}

.page-heading-link:hover {
  border-color: color-mix(in srgb, var(--cv-brand) 42%, var(--cv-line));
  background: var(--cv-soft);
}

.auth-page {
  min-height: min(760px, calc(100dvh - 88px));
  display: grid;
  place-items: center;
}

.auth-shell {
  width: min(100%, 540px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 15%, var(--cv-line));
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--cv-brand) 11%, transparent);
}

.register-shell,
.security-shell { width: min(100%, 680px); }

/* The MFA card is also used inside an overlay elsewhere. On the standalone
   security page it must stay in the document flow so the page owns scrolling. */
.security-page {
  align-items: start;
  padding-block: clamp(24px, 5vh, 56px);
  overflow: visible;
}

.security-page .security-shell { margin-inline: auto; }

.security-page .mfa-wizard-card {
  max-height: none;
  overflow: visible;
}

.auth-head {
  padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 36px) 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cv-soft) 70%, #fff), #fff);
  border-bottom: 1px solid var(--cv-line);
}

.auth-head p {
  max-width: 52ch;
  margin: 8px 0 0;
  color: var(--cv-muted);
  line-height: 1.85;
}

.auth-card {
  padding: clamp(20px, 4vw, 34px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.field-label,
.admin-resource-search label {
  display: grid;
  gap: 7px;
  color: var(--cv-ink);
  font-size: .86rem;
  font-weight: 800;
}

.field-label > span,
.admin-resource-search label > span { padding-inline: 3px; }
.field-label small { color: var(--cv-muted); font-weight: 600; }
.auth-submit { width: 100%; min-height: 48px; }

.auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 5px;
}

.auth-links a,
.auth-links button { color: var(--cv-brand); font-size: .86rem; font-weight: 800; }
.security-loading { min-height: 120px; display: grid; place-items: center; box-shadow: none; }

.legal-card { max-width: 800px; margin-inline: auto; }
.legal-head { padding-bottom: 16px; border-bottom: 1px solid var(--cv-line); }
.legal-lead { margin: 12px 0 0; color: var(--cv-muted); line-height: 2; }
.legal-section { margin-top: 26px; }
.legal-section h2 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; }
.legal-section p { margin: 0 0 9px; line-height: 2.05; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-support-note { margin-top: 26px; padding: 14px 16px; border: 1px solid var(--cv-line); border-radius: 14px; background: var(--cv-soft); line-height: 2; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.account-shell-page .panel-page-head {
  min-height: 0;
  margin-bottom: 16px;
  padding: 20px 24px;
  border-radius: 22px;
}

.panel-page-head h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.panel-head-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.premium-panel.panel {
  align-items: start;
  grid-template-columns: minmax(218px, 252px) minmax(0, 1fr);
  gap: 18px;
}

.premium-panel > .side {
  position: sticky;
  top: 84px;
  max-height: calc(100dvh - 104px);
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.premium-panel > .side a,
.premium-panel > .side button { min-height: 43px; border-radius: 11px; }
.premium-panel > .side a:hover,
.premium-panel > .side button:hover { transform: none; }

.premium-panel > #panel,
.premium-panel > #admin { width: 100%; gap: 16px; }

#panel > .panel-section,
#admin > .card,
#admin > section.card { padding: clamp(18px, 2.5vw, 26px); }

.panel-latest-order,
.panel-empty-state { margin-top: 18px; }
.panel-latest-order { padding: 16px; }

.wallet-balance-card {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cv-dark), var(--cv-brand));
  color: #fff;
}

.wallet-balance-card small { color: rgba(255,255,255,.76); }
.wallet-balance-card strong { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* Uses the .form-row primitive for alignment; only the column shape and the
   spacing below are its own.

   One column at every width, so the button is exactly as wide as the amount it
   applies to. Beside the field it could only ever be as wide as its own label
   (125px against a 798px input on desktop), which read as two unrelated
   controls rather than one action on one value. */
.wallet-deposit-form {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 22px;
}
.wallet-deposit-form .btn { width: 100%; min-height: 47px; }
.panel-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-subheading small { color: var(--cv-muted); }
.wallet-table { min-width: 560px; }

.order-card-copy > small { color: var(--cv-muted); }
.order-status-chip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .78rem;
  font-weight: 850;
}
/* An order that still owes money sits next to its status chip, in the same
   shape but the amber of something waiting on the customer rather than the
   green of something in hand. */
.order-status-chip.is-awaiting-payment {
  margin-inline-start: 6px;
  background: #fff5e6;
  color: #8a5300;
}

.wishlist-list { display: grid; gap: 9px; }
.wishlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  background: #fff;
  color: var(--cv-ink);
}

.wishlist-row:hover { border-color: var(--cv-brand); background: var(--cv-soft); }
.wishlist-row b { color: var(--cv-brand); font-size: .8rem; white-space: nowrap; }

.settings-form { gap: 16px; }
.settings-block {
  padding: clamp(16px, 2.5vw, 22px);
  border: 1px solid var(--cv-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--cv-soft) 25%, #fff);
}

.settings-block > header {
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cv-line);
}

.settings-block > header span { color: var(--cv-brand); font-size: .73rem; font-weight: 850; }
.settings-block > header h3 { margin: 3px 0 0; }
.settings-save-row { position: sticky; bottom: 10px; z-index: 3; display: flex; justify-content: flex-end; padding: 10px; border: 1px solid var(--cv-line); border-radius: 15px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.settings-save-row .btn { min-width: 170px; }

.admin-resource-head .section-title { align-items: flex-start; }
.admin-result-count { display: inline-block; margin-top: 5px; color: var(--cv-muted); }
.admin-resource-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, .5fr) auto auto;
  align-items: end;
  gap: 9px;
  margin-top: 18px;
}

.admin-resource-search .btn { min-height: 46px; }
.admin-empty-result { min-height: 150px; display: grid; place-items: center; }

.admin-summary-item,
.admin-insight-card,
.admin-review-panel,
.admin-stock-panel { box-shadow: 0 12px 34px color-mix(in srgb, var(--cv-brand) 6%, transparent); }

.admin-summary-item b { letter-spacing: -.02em; }
.admin-dashboard-head h2 { margin: 7px 0; font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
.admin-dashboard-head .panel-quick-actions { justify-content: flex-end; }
.admin-task-list a,
.admin-stock-list > div { min-height: 48px; }
.admin-resource-table { padding: 8px !important; }
.admin-resource-table .table { margin: 0; }
.admin-resource-table thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--cv-soft) 84%, #fff); }

.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notification-stack { overscroll-behavior-y: auto; }

@media (max-width: 1024px) {
  .premium-panel.panel { display: grid; grid-template-columns: 1fr; }

  .premium-panel > .side,
  .admin-shell-page .premium-panel > .side {
    position: sticky;
    top: 70px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .premium-panel > .side .side-identity,
  .premium-panel > .side .side-label { display: none; }

  .premium-panel > .side > span[data-manager-nav] { display: contents; }

  .premium-panel > .side a,
  .premium-panel > .side button {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid transparent;
    white-space: nowrap;
  }

  .premium-panel > .side a.active {
    border-color: color-mix(in srgb, var(--cv-brand) 22%, var(--cv-line));
    box-shadow: none;
  }

  .premium-panel > .side .logout-button { display: inline-flex; margin-top: 0; }
  .admin-resource-search { grid-template-columns: 1fr 1fr; }
  .admin-resource-search label:first-child { grid-column: 1 / -1; }
  .admin-dashboard-head { gap: 16px; }

  .product-detail-grid { display: grid; }
  .product-media-specs { display: contents; }
  .product-main-image {
    order: 1;
    padding: 14px;
    border: 1px solid var(--cv-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--cv-shadow-soft);
  }
  .product-detail-main { order: 2; }
  .product-specs-under-image {
    order: 3;
    padding: 18px;
    border: 1px solid var(--cv-line);
    border-radius: 20px;
    background: #fff;
  }

  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-hero-premium .campaign-hero-visual {
    order: 0;
    width: 100%;
    min-height: clamp(270px, 64vw, 380px);
    margin: 0;
    background-position: center 35%;
  }

  .home-hero-premium .campaign-hero-copy { order: 1; }
  .home-hero-premium .campaign-hero-visual::before { background: linear-gradient(180deg, transparent 58%, rgba(4, 27, 20, .28)); }
}

@media (max-width: 1024px) {
  .commerce-page,
  .legal-page,
  .auth-page { width: min(100% - 24px, 100%); }

  .page-heading,
  .account-shell-page .panel-page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
    padding: 17px;
    border-radius: 19px;
  }

  .page-heading-link { width: 100%; text-align: center; }
  .panel-head-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .panel-head-actions .btn { width: 100%; }
  .premium-panel.panel { gap: 12px; }
  .premium-panel > .side { top: 66px; margin-inline: 0; border-radius: 15px; }
  #panel > .panel-section,
  #admin > .card,
  #admin > section.card { padding: 16px; border-radius: 18px; }

  .panel-summary-grid,
  .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-summary-card,
  .admin-summary-item { min-height: 108px; padding: 15px; }
  .panel-summary-card b,
  .admin-summary-item b { font-size: clamp(1.22rem, 6vw, 1.6rem); }

  .order-card .row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .order-card .row > * { width: 100%; }
  .settings-block { padding: 14px; border-radius: 16px; }
  .settings-save-row .btn { width: 100%; min-width: 0; }
  .admin-resource-head .section-title { gap: 14px; }
  .admin-resource-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .admin-resource-actions .btn { width: 100%; }
  .admin-resource-search { grid-template-columns: 1fr 1fr; }
  .admin-resource-search label { grid-column: 1 / -1; }
  .admin-resource-search .btn { width: 100%; }
  .notification-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }

  .auth-page { min-height: auto; padding-block: 18px 34px; }
  .auth-shell { border-radius: 22px; }
  .auth-head { padding: 22px 18px 16px; }
  .auth-card { padding: 18px; }
  .auth-links { align-items: stretch; flex-direction: column; }

  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active { gap: 16px; padding: 13px 13px 66px; }
  .home-hero-premium .campaign-hero-visual { min-height: 255px; border-radius: 19px; }
  .home-hero-premium .campaign-hero-copy h1 { font-size: clamp(1.85rem, 10vw, 2.45rem); }
}

@media (max-width: 420px) {
  .order-card .row { grid-template-columns: 1fr; }
  .panel-head-actions { grid-template-columns: 1fr; }
  .admin-resource-actions { grid-template-columns: 1fr; }
}

@media print {
  .no-print { display: none !important; }
}
@media (max-width: 360px) {
  :root { --cv-page-gutter: 12px; }
}

/* SEO and interface finishing layer: clearer hierarchy without changing page structure. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.desktop-links a {
  position: relative;
  padding-block: 7px;
}

.desktop-links a::after {
  content: '';
  position: absolute;
  inset-inline: 50%;
  inset-block-end: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--cv-brand);
  transition: inset-inline .18s ease;
}

.desktop-links a:hover::after,
.desktop-links a[aria-current="page"]::after { inset-inline: 12%; }
.desktop-links a[aria-current="page"] { color: var(--cv-brand); font-weight: 800; }
.mobile-menu a[aria-current="page"] { background: var(--cv-soft); color: var(--cv-brand); font-weight: 800; }

main[data-page] { min-height: min(680px, calc(100dvh - 240px)); }
main[data-page] > h1 { text-wrap: balance; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 1180px;
  margin: 0 auto 14px;
  color: var(--cv-muted);
  font-size: .78rem;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumbs a { color: var(--cv-brand); font-weight: 700; }
.breadcrumbs > :last-child { overflow: hidden; text-overflow: ellipsis; }
.product-category-label { color: var(--cv-brand); font-size: .78rem; font-weight: 850; }

.related-products-section {
  max-width: 1180px;
  margin: clamp(32px, 6vw, 70px) auto 0;
}

.related-products-section > .section-title {
  align-items: center;
  margin-bottom: 17px;
}

.related-products-section > .section-title a {
  color: var(--cv-brand);
  font-size: .82rem;
  font-weight: 800;
}

.home-shell-intro {
  width: 100%;
  padding: clamp(28px, 6vw, 72px);
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--cv-brand-2) 18%, transparent), transparent 34%),
    var(--cv-surface, #fff);
}

.home-shell-intro h1 {
  max-width: 720px;
  margin: 14px 0;
}

.home-shell-intro p {
  max-width: 650px;
  margin: 0 0 24px;
  color: var(--cv-muted, #64756e);
  line-height: 2;
}

main[data-page="about"] > .card,
main[data-page="terms"] > .card {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(25px, 5vw, 48px);
}

main[data-page="about"] > .card p,
main[data-page="terms"] > .card p {
  max-width: 72ch;
  margin-bottom: 0;
  color: #4c5d56;
  font-size: clamp(.94rem, 1.8vw, 1.05rem);
  line-height: 2.15;
}

main[data-page="login"],
main[data-page="register"],
main[data-page="security"] { max-width: 720px; }

main[data-page="login"] > form,
main[data-page="register"] > form { padding: clamp(20px, 4vw, 32px); }

.footer-grid > nav { display: flex; flex-direction: column; }
.footer-grid a { width: fit-content; transition: color .16s ease, transform .16s ease; }
.footer-grid a:hover { transform: translateX(-2px); }

@media (max-width: 1024px) {
  .brand { gap: 7px; }
  .breadcrumbs { margin-bottom: 11px; }
}

.catalog-category-group {
  display: grid;
  gap: .4rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border, #cfe1da);
}

.catalog-category-group:last-child { border-bottom: 0; }
.catalog-category-group > b { padding: 0 .45rem .35rem; }
.catalog-category-option {
  display: grid;
  gap: .3rem;
  margin-inline-start: calc((var(--category-depth, 0) + 1) * .8rem);
}

.catalog-category-option > .check-row {
  padding: .45rem .55rem;
  border-radius: .6rem;
}

.catalog-category-option > .check-row:hover {
  background: color-mix(in srgb, var(--primary, #0a8062) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .desktop-links a::after,
  .footer-grid a { transition: none; }
}

/* Final storefront controls: theme-aware product actions and mobile-only filters. */
.home-strip-section {
  margin-block: 18px;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid color-mix(in srgb, var(--cv-brand) 11%, #e2ebe7);
  border-radius: 22px;
  background: color-mix(in srgb, #fff 94%, var(--cv-soft));
  box-shadow: 0 12px 34px rgba(12, 74, 59, .055);
}

/* A product card has to announce itself as a thing you can buy.
   The border was #e8f1ed on a white card against a near-white page -- correct
   by the palette and invisible in practice, which is how a first-time visitor
   scrolled past a full catalogue without registering that it was one. It is
   drawn properly now, and lifts on hover rather than only tinting. */
.store-product-card {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cv-card-line, #d7e3de);
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 74, 59, .05), 0 6px 18px rgba(12, 74, 59, .05);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.store-product-card:hover,
.store-product-card:focus-within {
  border-color: color-mix(in srgb, var(--cv-brand) 40%, #fff);
  box-shadow: 0 2px 4px rgba(12, 74, 59, .07), 0 14px 30px rgba(12, 74, 59, .12);
}

/* Corner badges, on the image and opposite the quick actions so the two never
   sit on top of one another. The quick actions are pinned to the physical left
   (`left: -7px`), which in this right-to-left layout is the inline END -- so the
   badges take the inline START, and stay clear at every width. */
.product-badges {
  position: absolute;
  z-index: 4;
  top: 8px;
  inset-inline-start: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  pointer-events: none;
}
.product-badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(12, 74, 59, .16);
}
.product-badge.is-sale { background: var(--cv-badge-sale-bg); color: var(--cv-badge-sale-ink); }
.product-badge.is-low  { background: var(--cv-badge-hot-bg);  color: var(--cv-badge-hot-ink); }
/* Solid rather than tinted: the idle tint is close enough to a pale product
   photo that the badge disappeared into it. */
.product-badge.is-out  { background: #55635d;                 color: #fff; }

.store-product-card .product-icon-actions {
  z-index: 3;
  align-items: center;
}

.store-product-card .icon-btn {
  border-color: color-mix(in srgb, var(--cv-brand) 18%, #e8f1ed);
  background: color-mix(in srgb, #fff 92%, var(--cv-soft));
  color: var(--cv-brand);
}

.store-product-card .icon-btn:hover,
.store-product-card .icon-btn.is-active,
.store-product-card .product-favorite-trigger[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cv-brand) 60%, #fff);
  background: color-mix(in srgb, var(--cv-brand) 13%, #fff);
  color: var(--cv-brand);
}

.store-product-card .product-favorite-trigger[aria-pressed="true"] .action-icon {
  fill: color-mix(in srgb, var(--cv-brand) 88%, #fff);
}

.product-cart-control {
  direction: rtl;
  display: grid;
  grid-template-columns: 42px 0fr;
  align-items: center;
  min-width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 18%, #e8f1ed);
  border-radius: 14px;
  background: color-mix(in srgb, #fff 93%, var(--cv-soft));
  box-shadow: 0 8px 22px rgba(18, 56, 39, .08);
  transition: grid-template-columns .32s cubic-bezier(.2, .75, .25, 1), width .32s cubic-bezier(.2, .75, .25, 1), border-color .2s ease, background .2s ease;
}

.product-cart-control .product-cart-trigger {
  width: 42px;
  height: 40px;
  border: 0;
  border-radius: 13px;
  box-shadow: none;
  background: transparent;
}

.product-cart-control:not(.product-cart-control-labelled) .product-quantity-stepper {
  direction: rtl;
  display: grid;
  grid-template-columns: 34px 30px 34px;
  align-items: center;
  width: 0;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: width .32s cubic-bezier(.2, .75, .25, 1), opacity .2s ease, transform .32s cubic-bezier(.2, .75, .25, 1);
}

/* These belong to the round icon control over the card image: it grows from a
   42px circle into a 100px pill. The labelled control is a full-width button
   that must not change size at all, so it is excluded here rather than having
   to out-specify these rules later in the file. */
.product-cart-control.has-items:not(.product-cart-control-labelled) {
  grid-template-columns: 0 1fr;
  width: 100px;
  border-color: color-mix(in srgb, var(--cv-brand) 55%, #fff);
  background: var(--cv-brand);
}

.product-cart-control.has-items:not(.product-cart-control-labelled) .product-cart-trigger {
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.product-cart-control.has-items:not(.product-cart-control-labelled) .product-quantity-stepper {
  width: 100px;
  opacity: 1;
  transform: translateX(0);
}

.product-quantity-stepper button,
.product-quantity-stepper output {
  display: grid;
  min-width: 0;
  height: 40px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 900;
}

.product-quantity-stepper button {
  cursor: pointer;
  font-size: 1.15rem;
}

.product-quantity-stepper button:hover { background: rgba(255, 255, 255, .14); }
.product-quantity-stepper output { font-size: .86rem; }
.product-cart-control.is-busy { opacity: .7; pointer-events: none; }

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.notification-actions .btn { min-height: 39px; }

.tracking-shipping-card { display: grid; align-content: start; gap: 13px; }
.tracking-code-box {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 16%, var(--cv-line));
  border-radius: 14px;
  background: var(--cv-soft);
}
.tracking-code-box > span { color: var(--cv-muted); font-size: .76rem; }
.tracking-code-box > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tracking-code-box b { overflow-wrap: anywhere; color: var(--cv-brand); font-size: 1rem; letter-spacing: .04em; }
.tracking-code-box .btn { min-height: 36px; padding-block: 5px; }
.tracking-provider-link { width: fit-content; }
.tracking-address { display: grid; gap: 9px; margin: 0; }
.tracking-address > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
.tracking-address dt { color: var(--cv-muted); }
.tracking-address dd { margin: 0; }

.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: start;
}

.product-media-specs,
.product-detail-main { overflow: hidden; }

/* Consistent native file picker across support, admin uploads and forms. */
input[type="file"] {
  width: 100%;
  min-height: 52px;
  padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--cv-brand) 34%, var(--cv-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--cv-soft) 72%, #fff);
  color: var(--cv-muted);
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-inline-end: 12px;
  padding: 7px 15px;
  border: 0;
  border-radius: 10px;
  background: var(--cv-brand);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
input[type="file"]:hover::file-selector-button { background: var(--cv-brand-strong); transform: translateY(-1px); }
input[type="file"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--cv-brand) 22%, transparent); outline-offset: 2px; }

/* Checkout keeps the heading quiet and lets the form stay in focus. */
main[data-page="checkout"] { width: min(980px, calc(100% - 32px)); }
main[data-page="checkout"] > h1 { display: none; }
.checkout-page-head {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--cv-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cv-shadow-soft);
}
.checkout-page-head h1 { margin: 0 0 4px; color: var(--cv-ink); font-size: clamp(1.35rem, 3vw, 1.75rem); }
.checkout-page-head p { margin: 0; color: var(--cv-muted); line-height: 1.8; }
main[data-page="checkout"] > form.checkout-experience {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.checkout-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.checkout-field { display: grid; gap: 7px; min-width: 0; color: var(--cv-ink); font-size: .78rem; font-weight: 800; }
.checkout-field-wide { grid-column: 1/-1; }
.checkout-field :is(input,select,textarea) { width: 100%; min-height: 48px; border-radius: 13px; }
.checkout-field textarea { min-height: 86px; resize: vertical; }
.checkout-continue { grid-column: 1/-1; min-height: 54px; font-size: .95rem; box-shadow: 0 14px 30px color-mix(in srgb,var(--cv-brand) 20%,transparent); }
.checkout-confirm { padding: clamp(20px,4vw,34px); border-radius: 24px; box-shadow: var(--cv-shadow-raised); }
.checkout-confirm[hidden] { display: none; }
.checkout-summary-list article { border-radius: 13px; background: var(--cv-soft); }

.notification-card-action { width: 100%; color: inherit; text-align: start; cursor: pointer; }
/* Sits in the controls column, at a size of its own, so the width it takes is
   the same on every row regardless of the message beside it. */
.notification-open-label { display: grid; place-items: center; width: 46px; min-height: 22px; color: var(--cv-brand); font-size: .73rem; font-weight: 900; }
.order-risk-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.7fr); gap: 18px; margin-top: 18px; padding: 18px; border: 1px solid #ecc989; border-radius: 19px; background: #fff9ec; }
.order-risk-panel.is-critical { border-color: #e2a2a2; background: #fff3f3; }
.order-risk-panel h3 { margin: 5px 0 8px; }
.order-risk-panel ul { margin: 0; padding-inline-start: 20px; }
.order-risk-panel form { display: grid; align-content: center; gap: 10px; }
.admin-task-list .is-risk-alert { border-color: #e7bf75; background: #fff8e9; }

@media (min-width: 1025px) {
  .home-hero-premium .campaign-hero-slide { grid-template-columns: minmax(0,.76fr) minmax(400px,1.24fr); }
  .home-hero-premium .campaign-hero-visual { width: calc(100% + 38px); min-height: 420px; }
}

@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slider { min-height: 0; }
  .home-hero-premium .campaign-hero-slide {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 18px 72px;
  }
  .home-hero-premium .campaign-hero-slide.is-active { position: relative; }
  .home-hero-premium .campaign-hero-visual {
    order: -1;
    width: 100%;
    min-height: clamp(300px,70vw,430px);
    margin: 0;
    background-position: center 32%;
  }
  .home-hero-premium .campaign-hero-copy { order: 1; width: 100%; }
  .order-risk-panel { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  main[data-page="checkout"] { width: calc(100% - 24px); }
  .checkout-page-head { padding: 16px; border-radius: 16px; }
  .checkout-page-head p { font-size: .8rem; }
  main[data-page="checkout"] > form.checkout-experience { grid-template-columns: 1fr; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-field-wide { grid-column: auto; }
  .checkout-confirm .row { display: grid; grid-template-columns: 1fr; }

  /* Let the page continue scrolling after a nested list reaches either edge. */
  :where(.scroll-box,.table-wrap,.notification-stack,.admin-task-list,.admin-stock-list,.broadcast-recipient-list,.product-specs-under-image,.side) {
    overscroll-behavior: auto !important;
    overscroll-behavior-block: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  :where(.home-scroll-strip,.admin-order-progress,.catalog-filter-chips) {
    overscroll-behavior-inline: auto !important;
    touch-action: pan-x pan-y;
  }
}

@media (max-width: 480px) {
  .home-hero-premium .campaign-hero-slide { min-height: 680px; padding: 14px 13px 72px; }
  .home-hero-premium .campaign-hero-visual { min-height: 330px; border-radius: 22px; }
  .home-hero-premium .campaign-hero-copy h1 { font-size: clamp(1.85rem,10vw,2.6rem); }
  .home-hero-premium .campaign-hero-copy .row { grid-template-columns: 1fr; }
  .home-hero-premium .campaign-hero-copy .row .btn { grid-column: auto; width: 100%; }
  input[type="file"]::file-selector-button { width: 100%; margin: 0 0 6px; }
}

.product-main-image {
  display: grid;
  min-height: clamp(340px, 40vw, 520px);
  place-items: center;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--cv-brand) 9%, #e6efeb);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cv-soft) 82%, #fff), #fff);
}

.product-main-image .thumb {
  width: 100%;
  height: clamp(310px, 36vw, 480px);
  object-fit: contain;
  border: 0;
  background: transparent;
}

.product-detail-main {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 14px;
}

.product-detail-main h1 { margin: 0; line-height: 1.45; }
.product-short-description { margin: 0; color: var(--cv-muted); line-height: 2; }

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-block: 1px solid var(--cv-line);
}

.product-price-row small { display: block; color: var(--cv-muted); }
.product-detail-main .product-price-row .price { margin: 2px 0 0; padding: 0; border: 0; }

.product-stock-pill {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
}

.product-stock-pill.is-available { background: color-mix(in srgb, var(--cv-brand) 12%, #fff); color: var(--cv-brand); }
.product-stock-pill.is-unavailable { background: var(--cv-danger); color: #fff; }
.product-code { margin: 0; color: var(--cv-muted); font-size: .84rem; }
.product-code b { color: var(--cv-ink); }

.product-purchase-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 9px;
}

/* Compare is a secondary action: it sits on its own row under the two primary
   buttons rather than leaving a half-empty cell beside them. */
.product-purchase-actions .product-compare-action { grid-column: 1 / -1; }

.product-purchase-actions .btn { width: 100%; min-width: 0; }

@media (min-width: 1025px) {
  .catalog-filter-toggle { display: none; }
  .catalog-filter-body {
    display: block;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
  }
  .catalog-filter-drawer { position: sticky; top: 92px; }
  .catalog-filter-drawer .product-filters { position: static; top: auto; }
  #catalogActiveFiltersDesktop {
    display: block;
    margin-top: 3px;
    color: var(--cv-muted);
    font-size: .76rem;
  }
  #catalogActiveFiltersDesktop button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }
}

@media (max-width: 1024px) {
  .catalog-heading p { margin-bottom: 0; }
  .catalog-filter-drawer {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cv-brand) 16%, #dfe8e4);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--cv-shadow-soft);
  }
  .catalog-filter-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 0;
    background: #fff;
    color: var(--cv-ink);
    text-align: right;
    cursor: pointer;
  }
  .catalog-filter-toggle > span {
    display: grid;
    min-width: 0;
    gap: 5px;
  }
  .catalog-filter-toggle > span > b { font-size: .82rem; }
  .catalog-filter-toggle > i {
    width: 13px;
    height: 13px;
    margin-inline: auto;
    border-right: 2px solid var(--cv-brand);
    border-bottom: 2px solid var(--cv-brand);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .35s ease;
  }
  .catalog-filter-drawer.is-open .catalog-filter-toggle > i { transform: rotate(225deg) translate(-2px, -2px); }
  .catalog-filter-chips {
    display: flex;
    max-width: 100%;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .catalog-filter-chips::-webkit-scrollbar { display: none; }
  .catalog-filter-chips button,
  .catalog-filter-chips > span {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--cv-brand) 16%, #dfe8e4);
    border-radius: 999px;
    background: var(--cv-soft);
    color: var(--cv-brand);
    font: inherit;
    font-size: .7rem;
  }
  .catalog-filter-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-14px);
    transition: max-height .48s cubic-bezier(.2, .75, .25, 1), opacity .24s ease, transform .4s ease;
  }
  .catalog-filter-drawer.is-open .catalog-filter-body {
    max-height: 1500px;
    opacity: 1;
    transform: translateY(0);
  }
  .catalog-filter-body .product-filters {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--cv-line);
    border-radius: 0;
    box-shadow: none;
  }
  #catalogActiveFiltersDesktop { display: none; }
  .catalog-toolbar { margin-top: 0; }
  .product-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .product-detail-main { position: static; }
  .product-main-image { min-height: min(100vw, 470px); }
  .product-main-image .thumb { height: min(78vw, 430px); }
}

@media (max-width: 480px) {
  .home-strip-section { padding: 13px; border-radius: 18px; }
  .notification-actions { width: 100%; justify-content: stretch; }
  .notification-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .product-purchase-actions { grid-template-columns: 1fr; }
}

/* Product volumes are managed as clear, repeatable rows. */
.admin-volume-editor {
  display: grid;
  width: 100%;
  gap: 14px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid color-mix(in srgb, var(--cv-brand) 18%, #dfe8e4);
  border-radius: 20px;
  background: color-mix(in srgb, var(--cv-soft) 58%, #fff);
}
.admin-volume-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-volume-editor > header > div { display: grid; gap: 4px; }
.admin-volume-editor > header b { color: var(--cv-ink); font-size: 1rem; }
.admin-volume-editor > header small { color: var(--cv-muted); line-height: 1.7; }
.admin-volume-list { display: grid; gap: 10px; }
.admin-volume-row {
  display: grid;
  grid-template-columns: 34px repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(12, 74, 59, .045);
}
.admin-volume-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: center;
  border-radius: 9px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .78rem;
  font-weight: 900;
}
.admin-volume-row label { display: grid; min-width: 0; gap: 6px; }
.admin-volume-row label > span { color: var(--cv-muted); font-size: .73rem; font-weight: 800; }
.admin-volume-row .input { width: 100%; min-height: 44px; background: #fff; }
.admin-volume-remove {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #efc9c9;
  border-radius: 12px;
  background: #fff7f7;
  color: #a43d3d;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}
.admin-volume-remove:hover { border-color: #d99494; background: #fff0f0; }
.admin-volume-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--cv-line);
  border-radius: 13px;
  color: var(--cv-muted);
  text-align: center;
}
.admin-volume-empty[hidden] { display: none; }

/* ==========================================================================
   Product cards - the single source of truth for the home rails and the
   catalog grid. Portrait card: square media frame on top, compact info panel
   below. Earlier generations of these rules were removed rather than layered.
   ========================================================================== */
.card.home-product-card,
.card.catalog-product-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  isolation: isolate;
  /* Visible so the icon group may overhang the corner; the media and the info
     panel each round and clip their own edges instead. */
  overflow: visible;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 106, 86, .04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card.home-product-card:hover,
.card.catalog-product-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cv-brand) 30%, #fff);
  box-shadow: 0 14px 32px rgba(31, 106, 86, .11);
}

/* Media: a fixed square frame keeps every card the same height regardless of
   how tall or wide the uploaded product photo happens to be. */
.home-product-card .product-media,
.catalog-product-card .product-media {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  flex: none;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--cv-line) 55%, transparent);
  border-radius: 15px 15px 0 0;
  background: linear-gradient(160deg, #f6fbf9, #fdfefe);
}
.home-product-card .product-image-link,
.catalog-product-card .product-image-link {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 2vw, 18px);
  overflow: hidden;
  border-radius: inherit;
  contain: layout paint;
}
.home-product-card .product-image-link img,
.catalog-product-card .product-image-link img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.home-product-card:hover .product-image-link img,
.catalog-product-card:hover .product-image-link img { transform: scale(1.04); }

/* Information panel: title -> availability -> price -> actions. */
.home-product-card .product-card-body,
.catalog-product-card .product-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 12px 13px 13px;
  border-radius: 0 0 15px 15px;
  background: #fff;
}
.home-product-card .product-card-body h3,
.catalog-product-card .product-card-body h3 {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  min-height: 3.5em; /* 2 x line-height: one- and two-line titles size alike */
  color: var(--cv-ink);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.home-product-card .product-card-body h3 a,
.catalog-product-card .product-card-body h3 a { color: inherit; text-decoration: none; }
.home-product-card .product-card-body h3 a:hover,
.catalog-product-card .product-card-body h3 a:hover { color: var(--cv-brand); }

.home-product-card .product-card-meta,
.catalog-product-card .product-card-meta {
  margin: 0 !important;
  color: var(--cv-muted);
  font-size: .68rem;
  font-weight: 600;
}
.home-product-card .product-card-price,
.catalog-product-card .product-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  margin-top: auto;
  padding: 7px 0 0;
  border: 0;
}
.home-product-card .product-card-price > div,
.catalog-product-card .product-card-price > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.home-product-card .product-card-price .price,
.catalog-product-card .product-card-price .price {
  color: var(--cv-ink);
  /* Was 1rem against a .92rem title -- near enough the same size that nothing
     on the card read as the price. */
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.35;
  white-space: nowrap;
}
.home-product-card .product-card-price .old,
.catalog-product-card .product-card-price .old {
  color: var(--cv-muted);
  font-size: .72rem;
  font-weight: 600;
  text-decoration: line-through;
  white-space: nowrap;
}
.home-product-card .product-card-actions,
.catalog-product-card .product-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--cv-line) 70%, transparent);
}
.home-product-card .product-card-actions .btn,
.catalog-product-card .product-card-actions .btn {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 700;
}

/* 2d - the quick-action group lifts slightly past the card's top-left corner.
   Nothing in the card clips it now, and the rails carry enough padding that the
   overhang is never cut off by their scroll container. */
.store-product-card .product-icon-actions {
  top: -7px;
  left: -7px;
  right: auto;
  z-index: 4;
}

/* 2c - the reveal only starts hidden once JS is present and motion is allowed,
   so the buttons are never stranded invisible without scripting. */
html[data-card-reveal="on"] .store-product-card .product-icon-actions {
  opacity: 0;
  transform: translateY(-7px) scale(.93);
  transition: opacity .34s cubic-bezier(.2, .8, .2, 1), transform .34s cubic-bezier(.2, .8, .2, 1);
}
html[data-card-reveal="on"] .store-product-card.is-revealed .product-icon-actions,
html[data-card-reveal="on"] .store-product-card:hover .product-icon-actions,
html[data-card-reveal="on"] .store-product-card:focus-within .product-icon-actions {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html[data-card-reveal="on"] .store-product-card .product-icon-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile: markedly more minimal - tighter panel, small type, small buttons. */
/* Touch widths (phone AND tablet): shape and behaviour, not scale. */
@media (max-width: 1024px) {
  .home-product-card,
  .catalog-product-card { border-radius: 12px; }
  .home-product-card .product-card-actions,
  .catalog-product-card .product-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One clear action per card on a touch screen. */
  .product-card-actions .compare-strip { display: none; }
  /* Hover-only quick actions are pointless without a pointer. */
  .store-product-card .product-icon-actions { display: none; }
}

/* Phones only: the compaction. Applying this up to 1024px produced a 483px-wide
   card carrying 12px text and a 29px button, which is why the tablet range
   looked wrong even once the layout itself was correct. */
@media (max-width: 560px) {
  .home-product-card .product-image-link,
  .catalog-product-card .product-image-link { padding: 7px; }
  .home-product-card .product-card-body,
  .catalog-product-card .product-card-body { gap: 3px; padding: 8px 9px 9px; }
  .home-product-card .product-card-body h3,
  .catalog-product-card .product-card-body h3 { min-height: 3.2em; font-size: .75rem; line-height: 1.6; }
  .home-product-card .product-card-meta,
  .catalog-product-card .product-card-meta { font-size: .58rem; }
  .home-product-card .product-card-price,
  .catalog-product-card .product-card-price { padding-top: 5px; gap: 5px; }
  /* .81rem put the price at 12.96px against a 12px title -- the same size, to
     the eye. It is the number people scan for, so it stays clearly the largest
     thing in the card body at every width. */
  .home-product-card .product-card-price .price,
  .catalog-product-card .product-card-price .price { font-size: 1.06rem; line-height: 1.4; }
  .home-product-card .product-card-price .old,
  .catalog-product-card .product-card-price .old { font-size: .6rem; }
  .home-product-card .product-card-actions,
  .catalog-product-card .product-card-actions {
    gap: 4px;
    margin-top: 7px;
    padding-top: 7px;
  }
  .home-product-card .product-card-actions .btn,
  .catalog-product-card .product-card-actions .btn {
    /* 40px: this is the card's primary action and it is being tapped, not
       clicked. It went 29 -> 34 in an earlier pass, which was still short of a
       comfortable target; measuring the whole site turned up the same shortfall
       in several places and they are all on 40 now. */
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
  }
}

/* Product page: full-width sections, calmer hierarchy and easier purchasing. */
main[data-page="product"] {
  width: min(1220px, calc(100% - 28px));
  padding-top: clamp(22px, 4vw, 46px);
}
main[data-page="product"] #detail {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
}
main[data-page="product"] #detail > * {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}
main[data-page="product"] .breadcrumbs,
main[data-page="product"] .product-detail-grid,
main[data-page="product"] .product-section-card,
main[data-page="product"] #smartBundle,
main[data-page="product"] .related-products-section {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
main[data-page="product"] .product-detail-grid {
  /* These are the proportions the page actually shipped with: an earlier file
     declared them with !important to beat this rule, so the values that were
     losing lived here and the ones in force lived two files away. Consolidated
     here, in the sheet that loads last, where they win on their own. */
  grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr);
  /* The flag was only ever on the columns, so the gap in force was this rule's
     own value, not the other file's. Taking both would have widened the gutter. */
  gap: clamp(18px, 2.8vw, 34px);
}
main[data-page="product"] .product-media-specs,
main[data-page="product"] .product-detail-main {
  border: 1px solid var(--cv-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(12, 74, 59, .075);
}
main[data-page="product"] .product-detail-main {
  gap: 16px;
  padding: clamp(24px, 3.5vw, 40px);
}
main[data-page="product"] .product-detail-main h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -.035em;
}
main[data-page="product"] .product-main-image {
  min-height: clamp(360px, 39vw, 520px);
  border: 0;
  background: linear-gradient(145deg, #f2f7f5, #fff);
}
main[data-page="product"] .product-specs-under-image {
  max-height: none;
  overflow: visible;
  padding-top: 20px;
}
main[data-page="product"] .product-specs-under-image .table { width: 100%; }
main[data-page="product"] .product-price-row {
  padding: 16px;
  border: 0;
  border-radius: 17px;
  background: var(--cv-soft);
}
main[data-page="product"] .volume-purchase-box {
  margin: 0;
  padding: 15px;
  border-radius: 16px;
  background: #fff;
}
main[data-page="product"] .volume-single {
  min-height: 58px;
  padding-inline: 18px;
}
main[data-page="product"] .product-purchase-actions { margin-top: 2px; }
.product-section-card {
  margin-top: 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--cv-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(12, 74, 59, .06);
}
.product-section-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cv-line);
}
.product-section-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--cv-brand);
  font-size: .76rem;
  font-weight: 850;
}
.product-section-head h2 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.product-description-copy {
  color: #2f403a;
  font-size: .95rem;
  line-height: 2.15;
  overflow-wrap: anywhere;
}
.qa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: start;
  gap: clamp(18px, 3vw, 30px);
}
.related-products-section { margin-top: clamp(12px, 3vw, 28px); }

@media (max-width: 1024px) {
  .admin-volume-row { grid-template-columns: 34px repeat(2, minmax(0, 1fr)); }
  .admin-volume-row label:nth-of-type(3) { grid-column: 2 / -1; }
  .admin-volume-remove { grid-column: 2 / -1; }
  main[data-page="product"] .product-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .qa-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .admin-volume-editor > header { align-items: stretch; flex-direction: column; }
  .admin-volume-editor > header .btn { width: 100%; }
  .admin-volume-row { grid-template-columns: 30px minmax(0, 1fr); }
  .admin-volume-row label,
  .admin-volume-row label:nth-of-type(3),
  .admin-volume-remove { grid-column: 2; }
  main[data-page="product"] { width: min(100% - 20px, 1220px); }
  .product-section-card { padding: 20px 16px; border-radius: 19px; }
  main[data-page="product"] .product-detail-main { padding: 22px 18px; }
}

/* Product discussions */
.qa-section .qa-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}
.discussion-list { display: grid; min-width: 0; gap: 14px; }
.discussion-node { min-width: 0; scroll-margin-top: 110px; }
.discussion-card {
  display: grid;
  gap: 13px;
  padding: clamp(15px, 2vw, 20px);
  border: 1px solid color-mix(in srgb, var(--cv-brand) 14%, var(--cv-line));
  border-radius: 18px;
  background: color-mix(in srgb, #fff 96%, var(--cv-soft));
  color: var(--cv-ink);
  box-shadow: 0 10px 28px rgba(12, 74, 59, .05);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.discussion-node.is-highlighted > .discussion-card {
  border-color: var(--cv-brand);
  background: color-mix(in srgb, var(--cv-soft) 72%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-brand) 12%, transparent), 0 14px 34px rgba(12, 74, 59, .1);
}
.discussion-card.is-deleted { background: color-mix(in srgb, var(--cv-soft) 48%, #fff); box-shadow: none; }
.discussion-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.discussion-author-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.discussion-author { color: var(--cv-ink); font-size: .88rem; }
.discussion-card time { color: var(--cv-muted); font-size: .68rem; white-space: nowrap; }
.discussion-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .64rem;
  font-weight: 850;
}
.discussion-badge.is-question { background: color-mix(in srgb, #fff4cf 84%, var(--cv-soft)); color: #765700; }
.discussion-badge.is-buyer { background: color-mix(in srgb, var(--cv-brand) 11%, #fff); }
.discussion-badge.is-admin { background: var(--cv-brand); color: #fff; }
.discussion-message { color: var(--cv-ink); font-size: .87rem; line-height: 2; overflow-wrap: anywhere; }
.discussion-deleted { color: var(--cv-muted); font-style: italic; }
.discussion-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--cv-line); }
.discussion-action {
  min-height: 34px;
  padding: 5px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cv-brand);
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}
.discussion-action:hover { background: var(--cv-soft); }
.discussion-action.is-danger { color: var(--cv-danger, #b42318); }
.discussion-children {
  display: grid;
  gap: 12px;
  margin-block-start: 12px;
  margin-inline-start: clamp(18px, 4vw, 42px);
  padding-inline-start: clamp(11px, 2vw, 18px);
  border-inline-start: 2px solid color-mix(in srgb, var(--cv-brand) 22%, var(--cv-line));
}
.discussion-node.is-legacy > .discussion-card { background: color-mix(in srgb, var(--cv-brand) 5%, #fff); }
.discussion-reply-form { display: grid; gap: 10px; padding-top: 4px; }
.discussion-reply-form[hidden] { display: none; }
.discussion-reply-form textarea { min-height: 104px; resize: vertical; }
.discussion-reply-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.discussion-reply-controls .btn { min-height: 39px; padding: 7px 14px; }
.discussion-form {
  position: sticky;
  top: 100px;
  padding: 18px;
  border: 1px solid var(--cv-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--cv-soft) 48%, #fff);
}
.discussion-form textarea { min-height: 150px; resize: vertical; }
.discussion-question-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cv-ink);
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}
.discussion-question-check input { width: 18px; height: 18px; accent-color: var(--cv-brand); }
.discussion-form > .btn { width: 100%; }
.discussion-empty {
  display: grid;
  gap: 6px;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--cv-brand) 28%, var(--cv-line));
  border-radius: 18px;
  background: var(--cv-soft);
  color: var(--cv-muted);
  text-align: center;
}
.discussion-empty b { color: var(--cv-ink); }

/* Keep the glass action group fully rounded on every product card. */
.store-product-card .product-icon-actions,
.catalog-page .product-icon-actions {
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 8px 24px rgba(7, 48, 37, .1);
  -webkit-backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.store-product-card .product-icon-actions .icon-btn,
.catalog-page .product-icon-actions .icon-btn,
.store-product-card .product-icon-actions .product-cart-control {
  border-radius: 13px;
}

@media (max-width: 1024px) {
  .qa-section .qa-layout { grid-template-columns: minmax(0, 1fr); }
  .discussion-form { position: static; }
}
@media (max-width: 560px) {
  .discussion-card-head { align-items: stretch; flex-direction: column; gap: 7px; }
  .discussion-card time { white-space: normal; }
  .discussion-children { margin-inline-start: 9px; padding-inline-start: 9px; }
}

/* Visual product description editor */
.admin-editor-field[data-rich-editor-field] { position: relative; display: grid; gap: 9px; min-width: 0; }
.editor-toolbar { position: relative; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.editor-toolbar > button,
.editor-tool > button {
  min-height: 39px;
  padding: 7px 12px;
  border: 1px solid var(--cv-line);
  border-radius: 11px;
  background: #fff;
  color: var(--cv-ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}
.editor-toolbar > button:hover,
.editor-tool > button:hover,
.editor-tool.is-open > button { border-color: var(--cv-brand); background: var(--cv-soft); color: var(--cv-brand); }
.editor-toolbar > button.is-active,
.editor-tool > button.is-active { border-color: var(--cv-brand); background: color-mix(in srgb,var(--cv-soft) 75%,#fff); color: var(--cv-brand); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--cv-brand) 18%,transparent); }
.editor-tool { position: relative; }
.editor-tool::after { content: ''; position: absolute; inset: 100% 0 auto; height: 10px; pointer-events: none; }
.editor-tool:hover::after,
.editor-tool.is-open::after { pointer-events: auto; }
.editor-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  display: grid;
  min-width: 180px;
  padding: 7px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 55px rgba(5, 38, 29, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.editor-popover.is-above { top: auto; bottom: calc(100% + 8px); transform: translateY(5px); }
.editor-tool:hover .editor-popover,
.editor-tool.is-open .editor-popover { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.editor-popover button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cv-ink);
  font: inherit;
  font-size: .75rem;
  text-align: right;
  cursor: pointer;
}
.editor-popover button:hover { background: var(--cv-soft); color: var(--cv-brand); }
.editor-popover button.is-selected { background: var(--cv-soft); color: var(--cv-brand); }
.editor-option-check { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--cv-brand); color: #fff; opacity: 0; font-size: .68rem; }
.editor-popover button.is-selected .editor-option-check { opacity: 1; }
.editor-popover button small { color: var(--cv-muted); }
.editor-highlight-options i { width: 28px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.rich-editor {
  min-height: 240px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cv-ink);
  font-size: .93rem;
  line-height: 2.1;
  outline: 0;
  white-space: pre-wrap;
  user-select: text;
  cursor: text;
}
.rich-editor::selection,
.rich-editor *::selection { background: color-mix(in srgb,var(--cv-brand) 26%,#fff); color: var(--cv-ink); }
.rich-editor:focus { border-color: var(--cv-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-brand) 12%, transparent); }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--cv-muted); pointer-events: none; }
.rich-editor p,
.rich-editor div,
.product-description-copy p,
.product-description-copy div { margin: 0 0 .9em; }
.rt-weight-700 { font-weight: 700; }
.rt-weight-800 { font-weight: 800; }
.rt-weight-900 { font-weight: 900; }
.rt-highlight-yellow { padding: .08em .24em; border-radius: .35em; background: #fff0a8; color: #4d3c00; }
.rt-highlight-green { padding: .08em .24em; border-radius: .35em; background: #ccefdc; color: #149170; }
.rt-highlight-rose { padding: .08em .24em; border-radius: .35em; background: #ffd9e2; color: #702237; }
.rich-editor a,
.product-description-copy a {
  padding: .08em .24em;
  border-radius: .35em;
  background: color-mix(in srgb, var(--cv-brand) 8%, transparent);
  color: var(--cv-brand);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: background .16s ease, color .16s ease;
}
.rich-editor a:hover,
.product-description-copy a:hover { background: var(--cv-brand); color: #fff; }
.product-description-copy { white-space: pre-wrap; }

/* Multi announcement manager */
.announcement-manager { display: grid; gap: 18px; }
.announcement-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.announcement-manager-head h3,
.announcement-manager-head p { margin: 0; }
.announcement-manager-head > span { padding: 6px 10px; border-radius: 999px; background: var(--cv-soft); color: var(--cv-brand); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.announcement-composer { display: grid; gap: 14px; padding: 17px; border: 1px solid var(--cv-line); border-radius: 18px; background: color-mix(in srgb, var(--cv-soft) 45%, #fff); }
.announcement-composer label { display: grid; gap: 7px; color: var(--cv-ink); font-size: .78rem; font-weight: 800; }
.announcement-type-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--cv-line) 52%, #fff); }
.announcement-type-switch button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--cv-muted); font: inherit; font-weight: 850; cursor: pointer; }
.announcement-type-switch button.is-active { background: #fff; color: var(--cv-brand); box-shadow: 0 7px 20px rgba(7, 48, 37, .08); }
.announcement-type-panel { display: grid; gap: 12px; }
.announcement-type-panel[hidden] { display: none; }
.announcement-file-picker { min-height: 116px; }
.announcement-banner-preview { overflow: hidden; border: 1px solid var(--cv-line); border-radius: 15px; background: #fff; }
.announcement-banner-preview[hidden] { display: none; }
.announcement-banner-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.announcement-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.announcement-composer-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.announcement-admin-list { display: grid; gap: 10px; }
.announcement-empty { padding: 24px; border: 1px dashed var(--cv-line); border-radius: 15px; text-align: center; }
.announcement-admin-item { display: grid; grid-template-columns: minmax(140px, .6fr) minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--cv-line); border-radius: 16px; background: #fff; }
.announcement-admin-preview { display: grid; place-items: center; min-height: 74px; overflow: hidden; border-radius: 12px; background: var(--cv-soft); }
.announcement-admin-preview p { margin: 0; padding: 12px; color: var(--cv-ink); font-size: .75rem; line-height: 1.8; text-align: center; }
.announcement-admin-preview img { width: 100%; height: 86px; object-fit: cover; }
.announcement-admin-meta { display: grid; min-width: 0; gap: 7px; }
.announcement-admin-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.announcement-admin-meta small { overflow: hidden; color: var(--cv-muted); text-overflow: ellipsis; white-space: nowrap; }
.announcement-admin-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.announcement-admin-badges span { padding: 4px 7px; border-radius: 999px; background: var(--cv-soft); color: var(--cv-brand); font-size: .62rem; font-weight: 800; }
.announcement-admin-actions { display: flex; gap: 7px; }
.announcement-admin-actions .btn { min-height: 38px; padding: 7px 10px; font-size: .7rem; }
.announcement-admin-actions .is-danger { color: var(--cv-danger, #b42318); }

/* Homepage announcement bars */
.site-message.announcement.is-pinned { position: relative; z-index: 31; }
.site-message.announcement.is-banner { min-height: 0; padding: 0; background: #fff; }
.site-message.announcement.is-banner .site-message-content { min-height: 0; padding: 0; border-radius: 0; }
.site-message-banner { display: block; width: 100%; max-height: 132px; object-fit: cover; }
.site-message.announcement.is-banner.is-dismissible > button { z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(8, 38, 30, .72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-message.announcement.is-pinned > button { display: none !important; }

@media (max-width: 1024px) {
  .announcement-admin-item { grid-template-columns: 110px minmax(0, 1fr); }
  .announcement-admin-actions { grid-column: 1 / -1; }
  .announcement-admin-actions .btn { flex: 1; }
  .site-message-banner { max-height: 96px; }
}
@media (max-width: 520px) {
  .announcement-manager-head { align-items: stretch; flex-direction: column; }
  .announcement-manager-head > span { align-self: flex-start; }
  .announcement-options,
  .announcement-admin-item { grid-template-columns: minmax(0, 1fr); }
  .announcement-admin-preview img { height: 110px; }
}

/* Unified theme tokens: every legacy and current component reads the selected palette. */
:root {
  --cv-on-brand: #fff;
  --cv-page: #f8fcfa;
  --cv-surface-solid: #fff;
}

html[data-theme="forest"] {
  --cv-ink: #1d3129;
  --cv-muted: #64736c;
  --cv-line: #e8f1ed;
  --cv-soft: #f6fbf9;
  --cv-page: #f8fcfa;
  --cv-brand: #0a8062;
  --cv-brand-2: #12a87e;
  --cv-dark: #1f6a56;
}

html[data-theme="ocean"] {
  --cv-ink: #152830;
  --cv-muted: #61747c;
  --cv-line: #d8e8ee;
  --cv-soft: #eff7fa;
  --cv-page: #f4f8fa;
  --cv-brand: #176b87;
  --cv-brand-2: #2a91ad;
  --cv-dark: #102f3d;
}

html[data-theme="plum"] {
  --cv-ink: #2d2331;
  --cv-muted: #756878;
  --cv-line: #eadfec;
  --cv-soft: #f8f2f9;
  --cv-page: #faf7fa;
  --cv-brand: #70507d;
  --cv-brand-2: #9470a3;
  --cv-dark: #34233b;
}

html[data-theme] {
  --ch-primary: var(--cv-brand);
  --ch-primary-2: var(--cv-brand-2);
  --ch-primary-soft: var(--cv-soft);
  --ch-bg: var(--cv-page);
  --ch-surface: var(--cv-surface-solid);
  --ch-surface-2: color-mix(in srgb, var(--cv-soft) 46%, #fff);
  --ch-border: var(--cv-line);
  --ch-text: var(--cv-ink);
  --ch-muted: var(--cv-muted);
  --ch-shadow-sm: 0 10px 28px color-mix(in srgb, var(--cv-dark) 7%, transparent);
  --ch-shadow-md: 0 18px 48px color-mix(in srgb, var(--cv-dark) 10%, transparent);
  --ch-shadow-lg: 0 28px 80px color-mix(in srgb, var(--cv-dark) 14%, transparent);
  --cv-surface: color-mix(in srgb, var(--cv-surface-solid) 95%, var(--cv-soft));
  --cv-shadow: 0 18px 52px color-mix(in srgb, var(--cv-dark) 8%, transparent);
  --cv-shadow-hover: 0 24px 65px color-mix(in srgb, var(--cv-dark) 13%, transparent);
}

html[data-theme] body {
  color: var(--cv-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cv-page) 48%, #fff), var(--cv-page));
}

html[data-theme] :where(input, select, textarea, option) { color: var(--cv-ink); }
/* The theme's surface line. A product card is deliberately not in this set: it
   sits on the page rather than inside a panel and needs a heavier edge to read
   as a separate, clickable object, so it keeps --cv-card-line instead. Listing
   the exception here rather than fighting this rule from further down is what
   keeps there being one place that decides a surface's border. */
html[data-theme] :where(.card:not(.store-product-card), .nav, .mobile-menu, .input, select, textarea) {
  border-color: var(--cv-line);
}
html[data-theme] .store-product-card { border-color: var(--cv-card-line); }
html[data-theme] :where(.input, select, textarea, .btn.ghost, .mobile-menu) {
  background: var(--cv-surface-solid);
}
html[data-theme] :where(.brand, .price, .panel-eyebrow, .product-section-head span, .catalog-page .product-card-price .price, .filter-heading a, .catalog-toolbar > a, .catalog-pager a, .invoice-label, .invoice-paid-badge, .settings-feedback.is-success, .admin-task-list b, .admin-stock-list b, .nav-search-icon, .side a:hover, .side button:hover, .mobile-menu a:hover, .mobile-menu button:hover, .badge, .filter-chip, .icon-btn, .editor-toolbar button:hover, .order-card h3, .invoice-summary h2, .stat-card b, .hero-badges span, .tracking-steps span, .campaign-hero-controls button, #hero h1) { color: var(--cv-brand); }
html[data-theme] :where(
  .muted,
  .product-card-meta,
  .side-label,
  .side-identity small,
  .table th,
  .admin-ticket-list-item small,
  .admin-ticket-list-item time,
  .ticket-priority
) { color: var(--cv-muted); }
html[data-theme] :where(
  .catalog-heading h1,
  .catalog-search,
  .catalog-sort,
  .catalog-page .product-card-body h3 a
) { color: var(--cv-ink); }
html[data-theme] :where(.btn, .chat-send) {
  background-color: var(--cv-brand);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cv-brand) 18%, transparent);
}
html[data-theme] .btn.secondary {
  background: var(--cv-soft);
  color: var(--cv-brand);
}
html[data-theme] :where(.side a:hover, .side button:hover, .mobile-menu a:hover, .mobile-menu button:hover, .badge, .filter-chip, .editor-toolbar button:hover, .hero-badges span, .tracking-steps span) { background-color: var(--cv-soft); }
html[data-theme] :where(
  .icon-btn:hover,
  .icon-btn.is-active,
  .editor-toolbar button:hover,
  .filter-panel[open] summary::before,
  input[type="checkbox"]:checked
) { border-color: var(--cv-brand); }
html[data-theme] input[type="checkbox"] { accent-color: var(--cv-brand); }
html[data-theme] input[type="checkbox"]::after { background: var(--cv-brand); }
html[data-theme] :where(.icon-btn:hover, .icon-btn.is-active) {
  background: var(--cv-brand);
  color: var(--cv-on-brand);
}
html[data-theme] :where(.card:hover .price, .product.card:hover h3, .order-card:hover h3) {
  color: var(--cv-brand);
}
html[data-theme] .campaign-hero-controls button:hover { background: var(--cv-soft); }
/* The footer is a light surface now, so it is no longer tinted with --cv-dark
   under a theme; it kept a dark colour underneath the light gradient. */
html[data-theme] :where(.admin-dashboard-hero, .panel-summary-card.primary) {
  background-color: var(--cv-dark);
}

/* Tables keep one visual row across every column, including actions. */
.table-wrap {
  border-color: var(--cv-line);
  background: var(--cv-surface-solid);
}
.table th,
.table td {
  height: 58px;
  vertical-align: middle;
}
.table:not(.invoice-table) thead th,
.admin-resource-table .table thead th {
  background: color-mix(in srgb, var(--cv-soft) 88%, #fff);
  color: var(--cv-muted);
  box-shadow: 0 1px 0 var(--cv-line);
}
.table:not(.invoice-table) tbody td,
.admin-resource-table .table tbody td {
  background: var(--cv-surface-solid);
  color: var(--cv-ink);
  border-block-color: var(--cv-line);
}
.table:not(.invoice-table) tbody tr:nth-child(even) td,
.admin-resource-table .table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--cv-soft) 48%, #fff);
}
.table:not(.invoice-table) tbody tr:hover td,
.admin-resource-table .table tbody tr:hover td {
  background: var(--cv-soft);
}
.admin-resource-table .table th:last-child,
.admin-resource-table .table td:last-child {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  min-width: 0;
  box-shadow: none !important;
}
.admin-resource-table .table td:last-child {
  background: var(--cv-surface-solid);
}
.admin-resource-table .table tbody tr:nth-child(even) td:last-child {
  background: color-mix(in srgb, var(--cv-soft) 48%, #fff);
}
.admin-resource-table .table tbody tr:hover td:last-child {
  background: var(--cv-soft);
}
.table-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  white-space: nowrap;
}

/* Flat support workspace for customers and administrators. */
.support-page {
  width: min(1080px, calc(100% - 28px));
}
.support-start,
.support-chat,
.admin-ticket-list-panel {
  border: 1px solid var(--cv-line);
  border-radius: 20px;
  background: var(--cv-surface-solid);
  box-shadow: none;
}
.support-start {
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 26px);
}
.support-start::before,
.support-start::after {
  display: none;
}
.support-start-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cv-line);
}
.support-start-head h1 {
  margin: 5px 0 5px;
  color: var(--cv-ink);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -.02em;
}
.support-start-head p { font-size: .85rem; line-height: 1.8; }
.support-start-head p { margin: 0; }
.support-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  color: var(--cv-ink);
  font-size: .76rem;
  font-weight: 800;
}
.support-availability i,
.support-orb {
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 50%;
  background: var(--cv-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-brand) 14%, transparent);
}
.support-start-form {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}
.support-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 13px;
}
.support-start-form label {
  display: grid;
  gap: 6px;
  color: var(--cv-ink);
  font-size: .79rem;
  font-weight: 700;
}
.support-start-form .contact-message {
  height: 132px;
  min-height: 132px;
  resize: vertical;
}
.support-form-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.support-form-footer .btn { flex: 0 0 auto; min-height: 44px; padding-inline: 26px; }

/* File picker: the native control is kept for behaviour and accessibility but
   is visually replaced, since its "No file chosen" text is English and cannot
   be relabelled. */
.support-file-picker { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.support-file-label { color: var(--cv-ink); font-size: .79rem; font-weight: 700; }
.support-start-form .support-file-control,
.support-file-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
}
.support-file-control:hover { border-color: color-mix(in srgb, var(--cv-brand) 34%, #fff); }
.support-file-control:focus-within {
  border-color: var(--cv-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-brand) 13%, transparent);
}
.support-file-control input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.support-file-button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .76rem;
  font-weight: 700;
}
.support-file-status {
  min-width: 0;
  overflow: hidden;
  color: var(--cv-muted);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-file-status.has-files { color: var(--cv-ink); font-weight: 600; }
.support-chat {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
}
.support-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cv-line);
  border-radius: 0;
  background: var(--cv-surface-solid);
  color: var(--cv-ink);
  box-shadow: none;
}
.support-chat-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.support-chat-header b { color: var(--cv-ink); }
.support-chat-header .muted {
  margin: 5px 0 0;
  color: var(--cv-muted);
}
.support-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-status,
.ticket-priority {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .7rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.ticket-status-closed {
  background: #f1f3f2;
  color: #5f6965;
}
.ticket-status-answered {
  background: color-mix(in srgb, var(--cv-soft) 80%, #fff);
  color: var(--cv-brand);
}
.support-chat-body {
  min-height: 320px;
  max-height: min(58vh, 620px);
  padding: 22px;
  gap: 12px;
  background: color-mix(in srgb, var(--cv-soft) 58%, #fff);
}
.chat-message {
  width: min(76%, 620px);
  border: 1px solid var(--cv-line);
  border-radius: 16px 16px 5px 16px;
  background: var(--cv-surface-solid);
  color: var(--cv-ink);
  box-shadow: none;
}
.chat-message.from-admin {
  border-color: var(--cv-brand);
  border-radius: 16px 16px 16px 5px;
  background: var(--cv-brand);
  color: var(--cv-on-brand);
}
.chat-message.from-admin :where(small, time, p) { color: var(--cv-on-brand); }
.chat-attachment {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, var(--cv-surface-solid) 88%, transparent);
  color: var(--cv-brand);
}
.support-reply-form {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0;
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid var(--cv-line);
  border-radius: 0;
  background: var(--cv-surface-solid);
  box-shadow: none;
}
.support-reply-form .chat-textarea {
  min-height: 48px;
  background: var(--cv-soft);
}
.chat-file span {
  border-color: var(--cv-line);
  background: var(--cv-soft);
  color: var(--cv-brand);
}
.chat-send {
  background: var(--cv-brand);
  color: var(--cv-on-brand);
}
.ticket-closure-notice {
  padding: 11px 18px;
  border-bottom: 1px solid color-mix(in srgb, #a56b15 24%, #fff);
  background: #fff8e9;
  color: #80530f;
  font-size: .82rem;
  font-weight: 850;
}
.ticket-closed-composer {
  padding: 15px 18px;
  border-top: 1px solid var(--cv-line);
  background: var(--cv-soft);
  color: var(--cv-muted);
  text-align: center;
  font-size: .8rem;
}
.admin-ticket-shell {
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 14px;
}
.admin-ticket-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}
.admin-ticket-list-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--cv-line);
}
.admin-ticket-list-panel > header div { display: grid; gap: 2px; }
.admin-ticket-list-panel > header small { color: var(--cv-muted); font-size: .7rem; }
.admin-ticket-list-panel > header > span {
  min-width: 31px;
  padding: 5px 8px;
  border-radius: 9px;
  background: var(--cv-soft);
  color: var(--cv-brand);
  text-align: center;
  font-size: .75rem;
  font-weight: 900;
}
.admin-ticket-list {
  gap: 0;
  max-height: 680px;
  padding: 7px;
}
.admin-ticket-list-item {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--cv-line);
  border-radius: 11px;
  background: transparent;
  color: var(--cv-ink);
  box-shadow: none;
}
.admin-ticket-list-item:last-child { border-bottom-color: transparent; }
.admin-ticket-list-item:hover,
.admin-ticket-list-item.active {
  border-color: transparent;
  background: var(--cv-soft);
  color: var(--cv-ink);
  box-shadow: none;
}
.admin-ticket-list-item.active {
  box-shadow: inset -3px 0 0 var(--cv-brand);
}
.admin-ticket-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.admin-ticket-item-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-ticket-list-item time {
  font-size: .67rem;
  text-align: right;
}
.admin-ticket-detail { min-width: 0; }

@media (max-width: 1024px) {
  .admin-ticket-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-ticket-list { max-height: 290px; }
}

@media (max-width: 1024px) {
  .support-start-head,
  .support-form-footer,
  .support-chat-header {
    align-items: stretch;
    flex-direction: column;
  }
  .support-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .support-form-footer .btn { width: 100%; }
  .support-header-actions { justify-content: flex-start; }
  .support-chat-body { min-height: 280px; padding: 14px 10px; }
  .chat-message { width: 91%; }
  .support-reply-form { margin: 0; padding: 10px; }
  .table-actions { flex-wrap: wrap; min-width: 150px; }
}

/* Final layout refinements */
main[data-page="home"] .home-strip-section {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.notification-card-action {
  width: 100%;
  display: block;
  text-align: right;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.toast-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.order-detail-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(92vh, 960px);
  overflow: auto;
}

.order-detail-layout {
  align-items: stretch;
}

.order-buyer-info,
.order-workflow-editor {
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--cv-line);
  border-radius: 20px;
  background: var(--cv-surface-solid);
}

.order-buyer-info .section-title {
  align-items: start;
}

.order-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.order-info-grid > div {
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--cv-soft);
}

.order-info-grid .order-info-wide {
  grid-column: 1 / -1;
}

.order-info-grid dt {
  margin-bottom: 7px;
  color: var(--cv-muted);
  font-size: .82rem;
}

.order-info-grid dd {
  margin: 0;
  color: var(--cv-ink);
  line-height: 1.9;
  white-space: pre-wrap;
}

.order-workflow-editor {
  margin-top: 18px;
}

.admin-order-progress {
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 8px 2px 14px;
}

.admin-order-progress article {
  min-height: 150px;
  padding: 17px 15px;
}

.admin-order-progress article > div,
.tracking-stepper article > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-order-progress article b,
.admin-order-progress article small,
.tracking-stepper article b,
.tracking-stepper article small {
  display: block;
  width: 100%;
}

.admin-order-progress article small,
.tracking-stepper article small {
  line-height: 1.85;
}

.order-status-control [data-custom-status-field] {
  display: block;
  margin-top: 10px;
}

.order-status-control [data-custom-status-field][hidden] {
  display: none;
}

.order-workflow-save {
  margin-top: 24px;
}

.order-workflow-save .btn {
  min-width: 210px;
}

.support-page-shell,
.customer-support-chat,
.admin-ticket-resource,
.admin-ticket-shell,
.admin-ticket-detail {
  overflow: visible;
}

.support-page .support-chat-body,
.admin-ticket-detail .support-chat-body {
  max-height: none;
  overflow: visible;
}

.admin-ticket-resource {
  min-width: 0;
}

.admin-ticket-shell {
  min-height: 640px;
}

.admin-ticket-list {
  max-height: none;
  overflow: visible;
}

.admin-ticket-list-panel {
  grid-template-rows: auto auto;
  overflow: visible;
}

.invoice-footer {
  justify-content: flex-end;
}

.footer-brand {
  max-width: 420px;
}

.footer-tagline {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  line-height: 1.9;
}

.footer-tagline strong,
.footer-tagline span {
  display: block;
}

.footer-tagline strong {
  color: var(--cv-ink);
  font-size: .96rem;
}

.footer-tagline span {
  color: var(--cv-muted);
  font-size: .88rem;
}

@media (max-width: 1024px) {
  .order-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-info-grid .order-info-wide {
    grid-column: auto;
  }

  .admin-order-progress {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
  }
}

/* Storefront geometry correction: keep artwork, copy and product media in their own flow. */
.home-hero-premium .campaign-hero-slider {
  overflow: hidden;
}
.home-hero-premium .campaign-hero-slide {
  position: absolute;
  inset: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  align-items: center;
  gap: clamp(20px, 3.2vw, 46px);
  padding: clamp(22px, 3.5vw, 46px);
}
.home-hero-premium .campaign-hero-slide.is-active {
  visibility: visible;
}
.home-hero-premium .campaign-hero-copy,
.home-hero-premium .campaign-hero-visual {
  min-width: 0;
}
.home-hero-premium .campaign-hero-visual {
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  background-position: center 24%;
  background-size: cover;
}

.home-scroll-strip {
  gap: clamp(15px, 2vw, 23px);
}
main[data-page="product"] .product-media-specs {
  overflow: hidden;
}
main[data-page="product"] .product-main-image {
  position: relative;
  min-height: clamp(330px, 37vw, 500px);
  overflow: hidden;
}
/* Keep the detail-page hero image inside its frame. This containment guard used to
   ride along with the product-card image rules; it is stated on its own now that the
   card system is consolidated. */
main[data-page="product"] .product-main-image .thumb {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: clamp(300px, 34vw, 460px);
  object-fit: contain;
  object-position: center;
}
.stock-notice-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 11px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 18%, var(--cv-line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--cv-soft) 64%, #fff);
}
.stock-notice-box label {
  display: grid;
  gap: 7px;
  color: var(--cv-ink);
  font-size: .78rem;
  font-weight: 850;
}
.stock-notice-box .btn {
  min-height: 46px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slider {
    min-height: 0;
  }
  .home-hero-premium .campaign-hero-slide {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px 18px 66px;
  }
  .home-hero-premium .campaign-hero-slide.is-active {
    position: relative;
    inset: auto;
    display: grid;
  }
  .home-hero-premium .campaign-hero-copy {
    order: 1;
  }
  .home-hero-premium .campaign-hero-visual {
    order: 2;
    min-height: clamp(250px, 55vw, 380px);
    background-position: center 20%;
  }
}

@media (max-width: 520px) {
  .home-hero-premium .campaign-hero-slide {
    gap: 13px;
    padding: 15px 13px 64px;
  }
  .home-hero-premium .campaign-hero-copy h1 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }
  .home-hero-premium .campaign-hero-copy .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .home-hero-premium .campaign-hero-copy .row .btn:first-child {
    grid-column: 1 / -1;
  }
  .home-hero-premium .campaign-hero-visual {
    min-height: 235px;
    padding: 16px;
    border-radius: 21px;
  }
  main[data-page="product"] .product-main-image {
    min-height: min(92vw, 410px);
  }
  main[data-page="product"] .product-main-image .thumb {
    max-height: min(78vw, 370px);
  }
  .stock-notice-box {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .stock-notice-box .btn {
    width: 100%;
  }
}

/* Final hero sizing: keep this after legacy geometry corrections. */
@media (min-width: 1025px) {
  .home-hero-premium .campaign-hero-slide {
    grid-template-columns: minmax(0,.76fr) minmax(410px,1.24fr);
  }
  .home-hero-premium .campaign-hero-visual {
    width: calc(100% + 38px);
    min-height: 410px;
  }
}
@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slide.is-active {
    display: flex;
    flex-direction: column;
    min-height: 680px;
  }
  .home-hero-premium .campaign-hero-visual {
    order: -1;
    min-height: clamp(300px,70vw,430px);
    background-position: center 28%;
  }
  .home-hero-premium .campaign-hero-copy { order: 1; }
}
@media (max-width: 520px) {
  .home-hero-premium .campaign-hero-visual { min-height: 330px; }
  .home-hero-premium .campaign-hero-copy .row { grid-template-columns: 1fr; }
  .home-hero-premium .campaign-hero-copy .row .btn:first-child { grid-column: auto; }
}

/* Poster-led campaigns: artwork carries the message, controls stay quiet and reachable. */
.home-hero-premium .campaign-hero-slider {
  border-radius: clamp(20px, 3vw, 34px);
  background: color-mix(in srgb, var(--cv-soft) 72%, #fff);
}
.home-hero-premium .campaign-hero-slide,
.home-hero-premium .campaign-hero-slide.is-active {
  display: block;
  padding: 0;
  overflow: hidden;
}
.home-hero-premium .campaign-hero-visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  transform: none;
}
.home-hero-premium .campaign-hero-visual::before {
  background: linear-gradient(180deg, transparent 66%, rgba(3, 25, 19, .36));
}
.home-hero-premium .campaign-hero-cta {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 7;
  min-width: 132px;
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.94);
  color: var(--cv-brand-strong);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.home-hero-premium .campaign-hero-controls {
  left: clamp(16px, 3vw, 34px);
  right: auto;
  top: auto;
  bottom: clamp(16px, 3vw, 30px);
  z-index: 9;
  transform: none;
  grid-template-columns: repeat(2, auto);
}
@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active { min-height: inherit; }
  .home-hero-premium .campaign-hero-visual {
    order: initial;
    min-height: 100%;
    background-position: center;
  }
}
@media (max-width: 520px) {
  .home-hero-premium .campaign-hero-cta { right: 13px; bottom: 13px; min-width: 118px; }
  .home-hero-premium .campaign-hero-controls { left: 13px; bottom: 13px; }
}

/* Current storefront controls and account settings */
.product-finder-modal .finder-field .check-row input[type="checkbox"] {
  flex: 0 0 22px;
  width: 22px !important;
  min-width: 22px;
  height: 22px !important;
  aspect-ratio: 1;
  border-radius: 50% !important;
}
.support-availability.is-disabled { color: var(--cv-danger, #b42318); background: #fff1f1; }
.support-availability.is-disabled i { background: var(--cv-danger, #d92d20); box-shadow: 0 0 0 5px rgba(217,45,32,.1); }
/* The number and its change button are one control: stretch rather than centre
   so their top and bottom edges line up whatever the button's label wraps to. */
.account-mobile-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: stretch; }
.account-mobile-control .input,
.account-mobile-control .btn { min-height: 50px; }
.account-mobile-control .btn { white-space: nowrap; }
.account-password-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cv-line); }
.account-delivery-warning { padding: 12px 14px; border: 1px solid #e9c98e; border-radius: 14px; background: #fff8e9; color: #765117; }
.account-delivery-warning p { margin: 4px 0 0; }
/* The per-device notification switch. Its explanation line carries the reason
   push is unavailable, which can run to a full sentence, so the text column is
   allowed to wrap while the button keeps its own width. */
.push-device-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--cv-line); border-radius: 14px; }
.push-device-row p { margin: 3px 0 0; line-height: 1.75; }
.push-device-row .btn { white-space: nowrap; }
.push-device-row[data-push-state="on"] { border-color: color-mix(in srgb,var(--cv-brand) 42%,var(--cv-line)); background: color-mix(in srgb,var(--cv-soft) 60%,#fff); }
@media (max-width: 560px) { .push-device-row { grid-template-columns: minmax(0,1fr); } }
.discussion-thread-replies[hidden] { display: none !important; }
.discussion-thread-toggle { color: var(--cv-brand); background: color-mix(in srgb,var(--cv-soft) 72%,#fff); }

/* Campaign artwork sits closer to its outer frame and uses more of the available canvas. */
.home-hero-premium .campaign-hero-slide { gap: clamp(12px, 1.8vw, 24px); }

@media (max-width: 1024px) {
  .account-mobile-control { grid-template-columns: 1fr; }
  .account-mobile-control .btn { width: 100%; }
}

/* Quiet page polish: shared rhythm without changing any page workflow. */
main[data-page]:not([data-page="home"]):not([data-page="admin"]):not([data-page="user-panel"]) {
  position: relative;
}

main[data-page]:not([data-page="home"]):not([data-page="product"]):not([data-page="tracking"]) > h1:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(18px, 3vw, 30px);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  letter-spacing: -.035em;
}

main[data-page]:not([data-page="home"]):not([data-page="product"]):not([data-page="tracking"]) > h1:first-child::before {
  content: "";
  width: 6px;
  height: 1.15em;
  flex: 0 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cv-brand), color-mix(in srgb, var(--cv-brand) 48%, #fff));
  box-shadow: 0 7px 20px color-mix(in srgb, var(--cv-brand) 24%, transparent);
}

main[data-page="login"],
main[data-page="register"],
main[data-page="security"] {
  width: min(100% - 28px, 680px);
  min-height:min(720px, calc(100vh - 190px)); min-height:min(720px, calc(100dvh - 190px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main[data-page="login"] > .card,
main[data-page="register"] > .card,
main[data-page="security"] #securityPanel > .card {
  width: 100%;
  padding: clamp(20px, 4vw, 34px);
  border-color: color-mix(in srgb, var(--cv-brand) 15%, var(--cv-line));
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--cv-soft) 56%, #fff));
  box-shadow: 0 24px 70px color-mix(in srgb, var(--cv-brand) 10%, transparent);
}

main[data-page="login"] .auth-text-button,
main[data-page="login"] form > a,
main[data-page="register"] form > a {
  justify-self: center;
}

main[data-page="terms"],
main[data-page="invoice"],
main[data-page="payment-result"],
main[data-page="compare"] {
  width: min(100% - 28px, 1120px);
}

main[data-page="terms"] > .card {
  padding: clamp(22px, 4vw, 42px);
  line-height: 2.15;
  border-color: color-mix(in srgb, var(--cv-brand) 13%, var(--cv-line));
  box-shadow: 0 20px 60px color-mix(in srgb, var(--cv-brand) 8%, transparent);
}

main[data-page="compare"] #compare,
main[data-page="payment-result"] #result,
main[data-page="invoice"] #invoice,
main[data-page="cart"] #cart {
  min-width: 0;
}

.premium-panel > .side,
.premium-panel > #panel,
.premium-panel > #admin {
  min-width: 0;
}

.premium-panel > .side a,
.premium-panel > .side button {
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.premium-panel > .side a:hover,
.premium-panel > .side button:hover {
  transform: translateX(-2px);
}

main[data-page="cart"] .cart-item,
main[data-page="product"] .product-detail-main,
main[data-page="contact"] .support-start {
  border-color: color-mix(in srgb, var(--cv-brand) 14%, var(--cv-line));
}

@media (prefers-reduced-motion: no-preference) {
  main[data-page] {
    animation: cv-page-in .28s ease-out both;
  }

  @keyframes cv-page-in {
    from { opacity: .01; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 1024px) {
  main[data-page="login"],
  main[data-page="register"],
  main[data-page="security"],
  main[data-page="terms"],
  main[data-page="invoice"],
  main[data-page="payment-result"],
  main[data-page="compare"] {
    width: min(100% - 24px, 100%);
  }

  main[data-page="login"],
  main[data-page="register"],
  main[data-page="security"] {
    min-height: auto;
    justify-content: flex-start;
  }

  main[data-page]:not([data-page="home"]):not([data-page="product"]):not([data-page="tracking"]) > h1:first-child {
    margin-bottom: 16px;
  }
}

/* Critical responsive ordering kept at the end of the cascade. */
@media (max-width: 1024px) {
  .premium-panel.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .premium-panel > .side,
  .admin-shell-page .premium-panel > .side {
    position: sticky;
    top: 70px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
  }
  .premium-panel > .side .side-identity,
  .premium-panel > .side .side-label { display: none; }
  .premium-panel > .side > span[data-manager-nav] { display: contents; }
  .premium-panel > .side a,
  .premium-panel > .side button { flex: 0 0 auto; width: auto; min-height: 40px; white-space: nowrap; }
  .premium-panel > .side .logout-button { display: inline-flex; margin-top: 0; }

  main[data-page="product"] .product-detail-grid { display: grid; }
  main[data-page="product"] .product-media-specs { display: contents; }
  main[data-page="product"] .product-main-image { order: 1; }
  main[data-page="product"] .product-detail-main { order: 2; }
  main[data-page="product"] .product-specs-under-image { order: 3; }

  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active { position: relative; display: grid; grid-template-columns: 1fr; min-height: 0; }
  .home-hero-premium .campaign-hero-visual { order: 0; width: 100%; margin: 0; }
  .home-hero-premium .campaign-hero-copy { order: 1; width: 100%; }
}

/* Keep growing account menus usable instead of letting them leave the viewport. */
@media (min-width: 1025px) {
  .account-shell-page .premium-panel > .side {
    max-height: calc(100dvh - 104px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
}

@media (max-width: 1024px) {
  .mobile-menu:not([hidden]) {
    max-height: calc(100dvh - 72px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .account-shell-page .premium-panel > .side {
    scrollbar-width: thin;
  }
}

/* This must follow the shared mobile panel rules: campaign posters remain a full-card canvas. */
@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slider {
    position: relative;
    height: clamp(410px, 112vw, 590px);
    min-height: 0;
  }
  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  .home-hero-premium .campaign-hero-visual {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }
  .home-hero-premium .campaign-hero-cta {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 20;
    display: inline-flex;
    visibility: visible;
    opacity: 1;
  }
}

@media (max-width: 520px) {
  .home-hero-premium .campaign-hero-slider {
    height: clamp(390px, 122vw, 520px);
  }
}

/* Nested category editor and product category picker */
.admin-category-branch-editor,
.admin-category-tree-picker {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #cfe1da);
  border-radius: 1rem;
  background: var(--surface, #fff);
}

.admin-category-branch-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-category-branch-editor > header div {
  display: grid;
  gap: .3rem;
}

.admin-category-branch-editor small,
.admin-category-existing { color: var(--muted, #667870); }

.admin-category-branch-list {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.admin-category-branch-list.is-nested {
  margin-inline-start: clamp(1rem, 3vw, 2.75rem);
  padding-inline-start: .85rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--primary, #0a8062) 25%, transparent);
}

.admin-category-branch-node {
  display: grid;
  gap: .7rem;
  min-width: 0;
}

.admin-category-branch-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--border, #cfe1da);
  border-radius: .85rem;
  background: var(--surface-soft, #f6faf8);
}

.admin-category-branch-row label { display: grid; gap: .35rem; }
.admin-category-remove {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, #c62828 30%, transparent);
  border-radius: .7rem;
  color: #b42318;
  background: transparent;
  cursor: pointer;
}

.admin-category-existing {
  align-self: center;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0a8062) 8%, transparent);
  font-size: .8rem;
}

.admin-category-tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .85rem;
  max-height: 32rem;
  overflow: auto;
  padding: .2rem;
}

.admin-category-tree-group {
  display: grid;
  align-content: start;
  gap: .55rem;
  padding: .85rem;
  border: 1px solid var(--border, #cfe1da);
  border-radius: .9rem;
  background: var(--surface-soft, #f6faf8);
}

.admin-category-tree-group h4 {
  margin: 0 0 .2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border, #cfe1da);
}

.admin-category-tree-option {
  display: grid;
  gap: .35rem;
  margin-inline-start: calc(var(--category-depth, 0) * 1rem);
}

.admin-category-tree-option .check-row {
  min-height: 2.4rem;
  padding: .45rem .6rem;
  border-radius: .65rem;
}

.admin-category-tree-option .check-row:hover {
  background: color-mix(in srgb, var(--primary, #0a8062) 8%, transparent);
}

@media (max-width: 1024px) {
  .admin-category-branch-editor > header { align-items: stretch; flex-direction: column; }
  .admin-category-branch-row { grid-template-columns: 1fr; align-items: stretch; }
  .admin-category-branch-list.is-nested { margin-inline-start: .45rem; padding-inline-start: .55rem; }
  .admin-category-tree { grid-template-columns: 1fr; }
}

/* Support conversation: bounded history, stable composer and in-page attachments. */
.customer-support-chat,
.admin-ticket-detail {
  min-width: 0;
  overflow: hidden;
}

.support-page .support-chat-body,
.admin-ticket-detail .support-chat-body {
  display: grid;
  align-content: start;
  min-height: clamp(260px, 34vh, 360px);
  max-height: min(60vh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.admin-ticket-shell {
  min-height: 0;
  align-items: start;
}

.admin-ticket-list-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.admin-ticket-list {
  max-height: min(72vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
}

.chat-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-attachment {
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.chat-attachment:hover {
  transform: translateY(-1px);
  border-color: currentColor;
}

.chat-attachment span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment small {
  flex: 0 0 auto;
  opacity: .7;
  font-size: .66rem;
}

.support-reply-form {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  gap: 10px;
  contain: layout;
}

.support-reply-form .chat-textarea {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  max-height: 144px;
  padding-block: 12px;
  resize: none;
  line-height: 1.75;
}

.chat-file,
.chat-send {
  align-self: end;
}

.chat-file span,
.chat-send {
  display: inline-flex;
  width: auto;
  min-width: 82px;
  height: 48px;
  gap: 7px;
  padding-inline: 13px;
  border-radius: 14px;
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}

.chat-file span {
  border: 1px solid var(--cv-line);
}

.chat-file.has-file span {
  border-color: var(--cv-brand);
  background: color-mix(in srgb, var(--cv-brand) 12%, #fff);
}

.chat-file b,
.chat-send b {
  font: inherit;
}

.file-feedback {
  grid-column: 1 / -1;
  justify-self: start;
  margin: -2px 2px 0;
}

.attachment-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(7, 25, 20, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: attachmentFadeIn .16s ease both;
}

.attachment-preview-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(940px, 100%);
  height: min(86vh, 820px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cv-line) 78%, #fff);
  border-radius: clamp(18px, 3vw, 26px);
  background: var(--cv-surface-solid);
  box-shadow: 0 32px 100px rgba(4, 28, 21, .3);
  animation: attachmentPopIn .2s ease both;
}

.attachment-preview-modal > header,
.attachment-preview-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 17px;
  border-block-end: 1px solid var(--cv-line);
}

.attachment-preview-modal > header span {
  color: var(--cv-muted);
  font-size: .72rem;
  font-weight: 800;
}

.attachment-preview-modal > header h3 { margin: 3px 0 0; font-size: 1rem; }
.attachment-preview-modal > header > button {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: var(--cv-soft);
  color: var(--cv-ink);
  font: inherit;
  font-size: 1.45rem;
  cursor: pointer;
}

.attachment-preview-modal > footer {
  justify-content: flex-end;
  border-block-start: 1px solid var(--cv-line);
  border-block-end: 0;
}

.attachment-preview-content {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 14px;
  background: color-mix(in srgb, var(--cv-soft) 74%, #fff);
}

.attachment-preview-content img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.attachment-preview-content iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

.attachment-preview-content pre {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  color: var(--cv-ink);
  direction: auto;
  font: 400 .86rem/1.9 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.attachment-preview-loading,
.attachment-preview-error,
.attachment-preview-empty {
  max-width: 520px;
  padding: 24px;
  color: var(--cv-muted);
  text-align: center;
  line-height: 1.9;
}

.attachment-preview-error { color: #a33a3a; }

@keyframes attachmentFadeIn { from { opacity: 0; } }
@keyframes attachmentPopIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width: 1024px) {
  .support-page .support-chat-body,
  .admin-ticket-detail .support-chat-body {
    min-height: 240px;
    max-height: 54svh;
  }

  .admin-ticket-list { max-height: 280px; }
  .support-reply-form { gap: 7px; padding: 9px; }
  .chat-file span,
  .chat-send { min-width: 48px; width: 48px; padding: 0; }
  .chat-file b,
  .chat-send b { display: none; }
  .attachment-preview-modal { height: min(88svh, 760px); }
  .attachment-preview-content { padding: 8px; }
  .attachment-preview-content iframe { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .attachment-preview-backdrop,
  .attachment-preview-modal { animation: none; }
}

/* Final home campaign spacing override. */
.home-hero-premium { padding: 0; }
.home-hero-premium .campaign-hero-slider { min-height: clamp(250px, 27vw, 330px); }
@media (max-width: 1024px) {
  .home-hero-premium .campaign-hero-slider { min-height: 0; height: clamp(240px, 48vw, 320px); }
}

/* Footer: Instagram link and the Enamad trust seal.
   The seal sits in the last grid column, which in RTL is the far-left end. */
.footer .footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 14px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cv-brand);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.footer .footer-social:hover {
  border-color: color-mix(in srgb, var(--cv-brand) 40%, #fff);
  background: var(--cv-soft);
  color: var(--cv-brand);
  transform: translateY(-1px);
}
.footer .footer-social svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-trust {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.footer .footer-trust a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 106, 86, .07);
  line-height: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.footer .footer-trust a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 106, 86, .13);
}
.footer-trust img {
  display: block;
  width: auto;
  max-width: 104px;
  height: auto;
}

@media (max-width: 1024px) {
  .footer-trust { justify-content: flex-start; margin-top: 4px; }
  .footer .footer-social { margin-top: 10px; }
}

/* ==========================================================================
   iOS Safari corrections
   ========================================================================== */

/* Safari inflates text in landscape without this, which is what made some
   Persian headings read oversized on iPhone. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The sticky header was translucent while relying on a blur that Safari never
   applied (the -webkit- prefix was missing across the sheets). Content scrolling
   underneath showed through it. Opaque by default; translucent only where the
   blur genuinely works. */
.nav {
  isolation: isolate;
  background: #fff;
  padding-top: env(safe-area-inset-top);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .nav { background: rgba(255, 255, 255, .92); }
}

/* Notch / home-indicator clearance. */
.footer { padding-bottom: calc(38px + env(safe-area-inset-bottom)); }
.container,
.catalog-page,
.account-shell-page {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* iOS zooms the page whenever a focused control is under 16px. */
.input,
.nav input,
select,
textarea,
.finder-field input,
.finder-field select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"] {
  font-size: 16px;
}

/* Momentum scrolling and predictable snapping in the horizontal rails. */
.home-scroll-strip {
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-start: 5px;
}
/* Sticky children behave differently inside an overflow container on iOS; the
   rails hold no sticky content, so opt them out explicitly. */
.home-scroll-strip [style*="position: sticky"],
.home-scroll-strip .is-sticky { position: static; }

/* Hover-only affordances are unreachable on touch. The scroll-into-view reveal
   is the primary path; hover is an enhancement for pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  html[data-card-reveal="on"] .store-product-card:hover .product-icon-actions {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Comfortable touch targets. */
@media (hover: none) {
  .icon-btn,
  .footer-back-top,
  .catalog-filter-toggle { min-height: 44px; }
  .icon-btn { min-width: 44px; }
}

/* ==========================================================================
   PWA surfaces: install dock, update prompt, iOS install sheet
   ========================================================================== */

.pwa-install-dock {
  position: fixed;
  z-index: 9000;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: calc(16px + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 30px rgba(31, 106, 86, .16);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pwa-install-dock.is-visible { opacity: 1; transform: none; }
.pwa-install-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cv-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pwa-install-button:hover { color: var(--cv-brand); }
.pwa-install-button img { display: block; border-radius: 6px; }
.pwa-install-dismiss {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--cv-soft);
  color: var(--cv-muted);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.pwa-install-dismiss:hover { color: var(--cv-ink); }

/* Already installed: never offer the install affordance again. */
@media (display-mode: standalone) {
  .pwa-install-dock { display: none !important; }
}

.pwa-ios-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 14px;
  background: rgba(10, 32, 26, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pwa-ios-sheet {
  position: relative;
  width: min(400px, 100%);
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 -10px 40px rgba(6, 30, 23, .28);
  text-align: center;
  animation: pwaSheetUp .26s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes pwaSheetUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.pwa-ios-sheet img { display: block; margin: 0 auto 12px; border-radius: 12px; }
.pwa-ios-sheet h2 { margin: 0 0 8px; font-size: 1.14rem; }
.pwa-ios-sheet p { margin: 0 0 18px; color: var(--cv-muted); font-size: .86rem; line-height: 1.9; }
.pwa-ios-sheet ol {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: start;
}
.pwa-ios-sheet li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: var(--cv-soft);
  font-size: .85rem;
  line-height: 1.8;
}
.pwa-ios-sheet li i {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--cv-brand);
}
.pwa-ios-sheet li svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pwa-ios-sheet .pwa-ios-done { width: 100%; }
.pwa-ios-close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--cv-soft);
  color: var(--cv-muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-dock { transition: none; }
  .pwa-ios-sheet { animation: none; }
}

/* The generic `.btn:not(.ghost):not(.danger):not(.secondary):not(.logout-button)`
   rule (0,5,0) was overriding the hero CTA's light pill background, which left
   dark green text sitting on green. Match that specificity so the intended
   pill wins and the label stays legible over the campaign artwork. */
.campaign-hero-cta:not(.ghost):not(.danger):not(.secondary):not(.logout-button) {
  background: rgba(255, 255, 255, .96);
  color: var(--cv-brand-strong);
}
.campaign-hero-cta:not(.ghost):not(.danger):not(.secondary):not(.logout-button):hover {
  background: #fff;
  color: var(--cv-brand-strong);
}

/* iOS auto-zooms whenever a focused control renders below 16px. A few
   component-scoped rules (catalog search, jalali picker) set smaller sizes at
   higher specificity than the base guard, so restate them for touch widths. */
@media (max-width: 1024px) {
  /* Every text-entry control, not an enumerated list of classes: a component
     without the .input class (the support file picker) slipped through before. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* The support column is a form, not a full-width sheet: cap it and centre it. */
main[data-page="contact"] .support-page-shell {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  gap: 14px;
}
@media (max-width: 1024px) {
  main[data-page="contact"] .support-page-shell { max-width: none; }
  .support-form-footer { align-items: stretch; flex-direction: column; }
  .support-form-footer .btn { width: 100%; }
}

/* The drawn تومان mark that follows every price. Sized in em so it tracks the
   surrounding font-size, from small card prices to the product-page headline.

   Set smaller than the number and slightly dimmed: at body size and full
   strength the mark competed with the amount and read as ordinary text, which
   is the whole thing it is meant not to be. currentColor keeps it correct on
   the dark footer and on brand-coloured pills alike. */
.toman-mark {
  display: inline-block;
  width: auto;
  /* The mark now carries a rule beneath the word, so its box is taller relative
     to the letterforms than the old one. Sized so the WORD reads at roughly the
     same size as before and the rule sits just under the price's baseline. */
  height: .82em;
  margin-inline-start: .3em;
  vertical-align: -.16em;
  fill: currentColor;
  opacity: .78;
  flex: none;
  pointer-events: none;
}
/* Inside tight table cells and badges the extra gap reads as a stray space. */
.table .toman-mark,
.admin-summary-item .toman-mark,
.order-finance-grid .toman-mark { margin-inline-start: .22em; }

/* ==========================================================================
   Mobile / installed-app pass
   Items 2 (footer), 3+4 (back-to-top seam), 5 (native feel), 6 (update bar).
   ========================================================================== */

/* --- shared stacking order for every floating element ---------------------
   These used to be assigned ad hoc and could overlap on small screens. */
:root {
  --z-app-nav: 8500;
  --z-install-dock: 9000;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-nav-height: 0px;
}
/* Only reserved where the bar is actually rendered (phone widths, installed). */
@media (max-width: 1024px) {
  html.is-standalone.has-app-nav { --app-nav-height: calc(58px + var(--safe-bottom)); }
}

/* --------------------------------------------------------------------------
   Item 5: native-feeling touch behaviour
   -------------------------------------------------------------------------- */
html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body { overscroll-behavior-y: none; }

/* Chrome/UI text should not be selectable the way body copy is; content stays
   selectable so prices, codes and descriptions can still be copied. */
.nav, .app-bottom-nav, .footer-back-top, .pwa-install-dock,
.btn, .icon-btn, .app-nav-item, .catalog-filter-toggle, .discussion-action {
  -webkit-user-select: none;
  user-select: none;
}

/* Buttons respond immediately to touch instead of waiting on hover states. */
@media (hover: none) {
  .btn:active,
  .icon-btn:active,
  .footer-back-top:active,
  .pwa-install-button:active,
  .app-nav-item:active {
    transform: scale(.97);
    transition-duration: .06s;
  }
}

/* Cross-document view transitions where supported; a normal navigation
   everywhere else. This is what removes the white flash between pages. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Item 2: mobile footer
   -------------------------------------------------------------------------- */
.footer-grid { align-items: start; }

/* Desktop: the trust group is the grid's fourth column, which is where the seal
   sat before. Instagram stacks above it. The full-width strip treatment below is
   scoped to the mobile breakpoint only - it used to be unscoped, which left the
   desktop grid with an empty fourth column. */
.footer-trust-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.footer-trust-row .footer-trust { justify-content: flex-start; margin: 0; }

@media (max-width: 1024px) {
  /* No top margin: the zero-height back-to-top wrap must land exactly on the
     footer's top edge so the button can straddle it, as it does on desktop.
     The top padding gives the button's lower half somewhere to sit. */
  .footer { margin-top: 0; padding-block: 36px 20px; }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .footer-grid > * { min-width: 0; }
  /* Tighter than the mobile body rhythm; the removed block supplied these and
     the footer grew ~15px without them. */
  .footer-grid h2,
  .footer-grid h3 { line-height: 1.4; }
  .footer-grid p { max-width: 54ch; margin: 0; line-height: 1.65; }
  /* Brand sits across the top; the two link groups share the row below it. */
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-grid h2 { margin: 0 0 8px; font-size: 1.25rem; }
  .footer-grid h3 {
    margin: 0 0 4px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--cv-ink);
  }
  .footer-tagline { margin-top: 8px; }
  .footer-tagline span { font-size: .82rem; line-height: 1.9; }
  .footer-links { display: flex; flex-direction: column; }
  /* Comfortable touch targets rather than tightly packed text links. */
  .footer-grid a {
    display: flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    margin: 0;
    font-size: .86rem;
    line-height: 1.4;
  }
  /* Mobile keeps the separated strip: full width, divider above, seal and
     Instagram at opposite ends with room to breathe. */
  .footer-trust-row {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* No margin: the grid's row gap already supplies the space above the
       divider, which is what the sibling layout used to add manually. */
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: max(0px, var(--safe-bottom));
    border-top: 1px solid color-mix(in srgb, var(--cv-line) 80%, transparent);
    gap: 14px;
  }
  .footer-trust-row .footer-trust { justify-content: flex-end; }
  .footer .footer-social { margin: 0; min-height: 44px; }
}

/* Narrow phones: stack the trust strip so neither item is squeezed. */
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Stacked, both hugging the RTL start edge so they read as one group. */
  .footer-trust-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .footer-trust-row .footer-trust { justify-content: flex-start; width: auto; }
}

/* --------------------------------------------------------------------------
   Items 3 + 4: back-to-top straddles the body/footer seam on mobile too
   -------------------------------------------------------------------------- */
.footer-back-top-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  /* Zero height so the wrap sits exactly on the body/footer boundary; the
     button is then pulled up by half its height to straddle it. */
  height: 0;
  margin: 46px 0 0;
  /* Nothing above may clip the half that overhangs into the page body. */
  overflow: visible;
  pointer-events: none;
}
.footer-back-top {
  pointer-events: auto;
  /* Half above the seam, half below it. */
  transform: translateY(-50%);
}
.footer-back-top:hover { transform: translateY(calc(-50% - 3px)); }
.footer-back-top:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cv-brand) 45%, transparent);
  outline-offset: 3px;
}
/* The footer must not crop the button that sits on its top edge. */
.footer { overflow: visible; }

@media (max-width: 1024px) {
  .footer-back-top-wrap { margin-top: 34px; }
  .footer-back-top {
    min-height: 44px;
    padding: 9px 18px;
    font-size: .85rem;
  }
}

/* --------------------------------------------------------------------------
   Install dock: coordinated with the other floating UI
   -------------------------------------------------------------------------- */
.pwa-install-dock {
  z-index: var(--z-install-dock);
  bottom: calc(16px + var(--safe-bottom) + var(--app-nav-height));
}
/* Lifted clear of the cookie notice by its measured height (set in JS), so it
   works at every viewport instead of relying on a guessed constant. */
.pwa-install-dock.is-raised {
  bottom: calc(var(--install-dock-lift, 96px) + var(--safe-bottom) + var(--app-nav-height));
}

/* --------------------------------------------------------------------------
   Item 5: standalone-only bottom navigation
   -------------------------------------------------------------------------- */
.app-bottom-nav { display: none; }

@media (max-width: 1024px) {
html.is-standalone .app-bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-app-nav);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--cv-line);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.is-standalone .app-bottom-nav { background: #fff; }
}
html.is-standalone .app-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 7px 4px;
  color: var(--cv-muted);
  font-size: .68rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .16s ease;
}
html.is-standalone .app-nav-item svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.is-standalone .app-nav-item.is-active { color: var(--cv-brand); }
html.is-standalone .app-nav-item.is-active svg { stroke-width: 2.1; }
}

/* Content must clear the fixed bar. */
html.is-standalone.has-app-nav body { padding-bottom: var(--app-nav-height); }
html.is-standalone.has-app-nav .footer { padding-bottom: calc(30px + var(--app-nav-height)); }
/* Redundant next to the app bar - but only where that bar actually renders.
   In a desktop PWA window there is no bottom nav, so this stays. */
@media (max-width: 1024px) {
  html.is-standalone .footer-back-top-wrap { display: none; }
}

/* Standalone header: compact and stable, clearing the notch. */
html.is-standalone .nav {
  padding-top: max(6px, env(safe-area-inset-top));
  padding-bottom: 6px;
}
@media (max-width: 1024px) { html.is-standalone .nav .links { display: none; } }

/* --------------------------------------------------------------------------
   Item 5: Persian typography tuned for phones
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body {
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
  }
  h1 { font-size: clamp(1.35rem, 5.4vw, 1.72rem); line-height: 1.5; letter-spacing: -.015em; }
  h2 { font-size: clamp(1.1rem, 4.4vw, 1.32rem); line-height: 1.6; letter-spacing: -.012em; }
  h3 { font-size: clamp(.95rem, 3.9vw, 1.06rem); line-height: 1.65; }
  p, li { line-height: 1.95; }
  .muted, small { line-height: 1.85; }
}

/* ---------------------------------------------------------------------------
   Loading placeholders

   The home strips and the catalog grid are filled from the API after boot. They
   used to ship empty, so the page grew by several hundred pixels the moment the
   response landed -- most of the site's cumulative layout shift came from that
   one jump. These placeholders are built from the real card elements and
   classes, so their height is computed by the same rules that size a real card
   at every breakpoint (including the rule below that drops the compare button
   on touch widths). Only the paint is overridden here; nothing sets a height.
   --------------------------------------------------------------------------- */
.cv-skeleton-card {
  pointer-events: none;
  user-select: none;
}
.cv-skeleton-card .product-media {
  background: linear-gradient(160deg, #f1f7f4, #f8fbfa);
}
/* Stack the two title bars as plain lines; the -webkit-box the real title uses
   is only there to clamp text, which a placeholder has none of. */
.cv-skeleton-card .product-card-body h3 { display: block; }
.cv-skeleton-row { display: block; }

/* Inline-block, and shorter than a line, so the surrounding element's own line
   box still decides the height exactly as it does for real text. */
.cv-skeleton-line {
  display: inline-block;
  width: 100%;
  height: .78em;
  border-radius: 6px;
  vertical-align: middle;
  background: linear-gradient(90deg, #eef4f1 25%, #f7faf9 50%, #eef4f1 75%);
  background-size: 400% 100%;
  animation: cv-skeleton-sheen 1.5s ease-in-out infinite;
}
.cv-skeleton-line--short { width: 62%; }
.cv-skeleton-line--meta { width: 46%; }
.cv-skeleton-line--price { width: 72%; }

.cv-skeleton-card .cv-skeleton-btn {
  border-color: transparent;
  background: linear-gradient(90deg, #eef4f1 25%, #f7faf9 50%, #eef4f1 75%);
  background-size: 400% 100%;
  animation: cv-skeleton-sheen 1.5s ease-in-out infinite;
  box-shadow: none;
  color: transparent;
}
.cv-skeleton-category { display: block; }

@keyframes cv-skeleton-sheen {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* A pulsing placeholder is exactly the kind of motion that causes discomfort,
   so it holds still when the visitor has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .cv-skeleton-line,
  .cv-skeleton-card .cv-skeleton-btn { animation: none; }
}

/* --------------------------------------------------------------------------
   Item 7: Instagram sits under the store description on desktop

   Two anchors, never both rendered: the labelled one in the trust column is the
   mobile/tablet treatment and is untouched, and this bare icon replaces it from
   the desktop breakpoint up. display:none keeps whichever is inactive out of
   the accessibility tree, so a screen reader only ever meets one Instagram link.
   -------------------------------------------------------------------------- */
.footer .footer-social--brand { display: none; }

@media (min-width: 1025px) {
  .footer .footer-social--brand {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 14px 0 0;
    padding: 0;
    gap: 0;
  }
  /* The labelled anchor is the mobile treatment; desktop shows the icon above. */
  .footer .footer-trust-row > .footer-social { display: none; }
}

/* --------------------------------------------------------------------------
   Item 4: a notification can be removed on its own

   The card is a button (the whole thing opens the linked page), so the remove
   control has to sit beside it rather than inside it -- nested buttons are not
   valid and browsers drop the inner one.
   -------------------------------------------------------------------------- */
.notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.notification-row > .notification-card { width: 100%; }

/* The controls column.
   Held to one width and pinned to the top of the row, so it sits beside the
   notification's title whatever the message underneath does. It used to be
   centred, which on a long message pushed it halfway down a very tall card and
   read as though the button itself had changed size. */
.notification-row-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 46px;
  align-self: start;
}
/* Three lines, then an ellipsis. A notification that ran to a paragraph used to
   make its row three times the height of the one above it. */
.notification-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.notification-row.is-expanded .notification-card p {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.notification-expand {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--cv-brand);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.notification-expand[hidden] { display: none; }
.notification-expand:hover { text-decoration: underline; }
.notification-remove {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cv-muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.notification-remove:hover,
.notification-remove:focus-visible {
  border-color: color-mix(in srgb, var(--cv-danger, #b3261e) 45%, #fff);
  background: color-mix(in srgb, var(--cv-danger, #b3261e) 7%, #fff);
  color: var(--cv-danger, #b3261e);
}

/* --------------------------------------------------------------------------
   Touch targets for the two toolbar actions

   "clear filters" and "compare" are actions, not prose links, and both were
   about 22px tall on touch widths. Product titles and breadcrumbs are left as
   inline links: boxing those to 44px would break the card layout and is not
   how they read.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .filter-heading a,
  .catalog-toolbar > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 10px;
    margin-inline-end: -10px;
  }
}

/* --------------------------------------------------------------------------
   Item 2: the labelled add-to-cart control

   Same markup and the same handlers as the round icon control above; this one
   lives in the card's action row, where a touch visitor can actually reach it
   (the icon group is display:none below the desktop breakpoint). It fills the
   width it is given and swaps to the stepper in place, so the card's height
   does not change when something is added.
   -------------------------------------------------------------------------- */
.product-cart-control-labelled {
  /* Structural only. Every pixel of the visible control is painted by the two
     children below, so swapping between them cannot change the look of the
     frame around them -- there is no frame. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--cart-control-height, 38px);
  border: 0;
  border-radius: var(--cart-control-radius, 10px);
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Both children occupy the same cell and share one geometry, so the swap is a
   straight visual exchange with no reflow anywhere around it. */
.product-cart-control-labelled .product-cart-trigger-labelled,
.product-cart-control-labelled .product-quantity-stepper {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  min-height: var(--cart-control-height, 38px);
  height: auto;
  border: 0;
  border-radius: var(--cart-control-radius, 10px);
  background: var(--cv-brand);
  box-shadow: none;
  transform: none;
}

.product-cart-control-labelled .product-cart-trigger-labelled {
  padding: 8px 10px;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-cart-control-labelled .product-quantity-stepper {
  direction: rtl;
  display: grid;
  grid-template-columns: 1fr minmax(34px, auto) 1fr;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transform: none;
}

/* Only one of the two is ever interactive: stacked in one cell, whichever is on
   top would otherwise swallow the clicks meant for the other. */
.product-cart-control-labelled .product-quantity-stepper {
  visibility: hidden;
  pointer-events: none;
}
.product-cart-control-labelled.has-items .product-quantity-stepper {
  visibility: visible;
  pointer-events: auto;
}
.product-cart-control-labelled.has-items .product-cart-trigger-labelled {
  visibility: hidden;
  pointer-events: none;
}

/* The shell's own has-items treatment belongs to the icon variant, not this one. */
.product-cart-control-labelled.has-items {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
}

.product-cart-control-labelled .product-quantity-stepper button,
.product-cart-control-labelled .product-quantity-stepper output {
  min-height: var(--cart-control-height, 38px);
  height: auto;
  border-radius: 0;
}
/* The end buttons round with the control so the fill has no square corners. */
.product-cart-control-labelled .product-quantity-stepper button:first-child {
  border-start-start-radius: var(--cart-control-radius, 10px);
  border-end-start-radius: var(--cart-control-radius, 10px);
}
.product-cart-control-labelled .product-quantity-stepper button:last-child {
  border-start-end-radius: var(--cart-control-radius, 10px);
  border-end-end-radius: var(--cart-control-radius, 10px);
}

.product-cart-control-labelled .product-cart-trigger-labelled[disabled] {
  background: var(--cv-soft);
  color: var(--cv-muted);
  cursor: not-allowed;
}

/* A stepper button at the stock ceiling reads as unavailable, not broken. */
.product-quantity-stepper button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.product-quantity-stepper button:focus-visible,
.product-cart-trigger-labelled:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* The card's action row now holds the cart control first, then the two links. */
.home-product-card .product-card-actions,
.catalog-product-card .product-card-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}
.home-product-card .product-card-actions > .product-cart-control,
.catalog-product-card .product-card-actions > .product-cart-control {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Header cart count
   -------------------------------------------------------------------------- */
.nav-cart-link { position: relative; }
.nav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 6px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--cv-brand);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}
.nav-cart-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .product-cart-control,
  .product-cart-control .product-quantity-stepper { transition: none; }
}

/* The product page's buy control is the same stepper at the page's button size.
   Both states read the size from the same two properties, so they cannot drift
   apart. */
.product-purchase-actions > .product-cart-control-labelled {
  --cart-control-height: 50px;
  --cart-control-radius: 12px;
}
.product-purchase-actions > .product-cart-control-labelled .product-cart-trigger-labelled,
.product-purchase-actions > .product-cart-control-labelled .product-quantity-stepper output {
  font-size: .92rem;
}
.product-purchase-actions > .product-cart-control-labelled .product-quantity-stepper button {
  font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   The stock hold notice on the checkout confirmation
   -------------------------------------------------------------------------- */
.checkout-reservation-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cv-brand) 26%, var(--cv-line));
  border-radius: 14px;
  background: var(--cv-soft);
  color: var(--cv-ink);
  font-size: .84rem;
  line-height: 1.9;
}
.checkout-reservation-note b { color: var(--cv-brand); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Risk reasons in the admin order panel

   A score on its own is not actionable, so each reason shows what it cost and
   the value that produced it.
   -------------------------------------------------------------------------- */
.order-risk-reasons { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.order-risk-reasons li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  font-size: .82rem;
  line-height: 1.8;
}
.order-risk-weight {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.order-risk-reasons b { font-weight: 700; opacity: .85; }

/* --------------------------------------------------------------------------
   Item 6: a cart line whose stock has gone

   The line stays readable enough to recognise but is clearly not purchasable:
   dimmed and blurred, with the reason stated over it in the danger colour. The
   message sits above the blur, not inside it.
   -------------------------------------------------------------------------- */
.cart-line.is-unavailable,
.saved-cart-line.is-unavailable {
  position: relative;
  border-color: color-mix(in srgb, var(--cv-danger, #b3261e) 30%, var(--cv-line));
}
/* Everything except the notice is dimmed and softened. */
.cart-line.is-unavailable > *:not(.cart-line-unavailable),
.saved-cart-line.is-unavailable > *:not(.cart-line-unavailable) {
  opacity: .45;
  filter: blur(1.5px);
  transition: none;
}
.cart-line.is-unavailable .cart-quantity button,
.cart-line.is-unavailable .cart-quantity output {
  pointer-events: none;
}
.cart-line-unavailable {
  position: absolute;
  inset-inline: 10px;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding: 9px 12px;
  transform: translateY(-50%);
  border: 1px solid var(--cv-danger);
  border-radius: 12px;
  background: var(--cv-danger);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.saved-cart-line.is-unavailable .cart-line-unavailable { font-size: .78rem; }

/* The notice above the lines, and the reason the button is held. */
.cart-blocking-notice {
  border-color: color-mix(in srgb, var(--cv-danger, #b3261e) 35%, var(--cv-line));
  background: color-mix(in srgb, var(--cv-danger, #b3261e) 6%, #fff);
}
.cart-blocking-notice b { color: var(--cv-danger, #b3261e); }
.cart-blocking-notice p { margin: 6px 0 0; font-size: .85rem; line-height: 1.9; }
.cart-checkout-action[disabled] { opacity: .55; cursor: not-allowed; }
.cart-checkout-hint,
.field-hint {
  margin: 8px 0 0;
  color: var(--cv-danger, #b3261e);
  font-size: .82rem;
  line-height: 1.8;
}
.field-hint[hidden] { display: none; }

/* Item 3: shipping is quoted at checkout, so the cart says so rather than
   leaving the customer to wonder what the total is missing. */
.cart-summary-note {
  margin: 8px 0 0;
  color: var(--cv-muted);
  font-size: .78rem;
  line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  .cart-line.is-unavailable > *:not(.cart-line-unavailable) { filter: none; }
}

/* --------------------------------------------------------------------------
   Catalog grid

   One block, no !important. It used to be four rules across two files carrying
   eight !important flags, all of them fighting the generic
   `.grid { grid-template-columns: repeat(4, 1fr) }` that the same element also
   matches. Scoping to the section the grid always sits in raises specificity
   from (0,1,0) to (0,2,0), which beats .grid on merit.
   -------------------------------------------------------------------------- */
.catalog-results .catalog-product-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  /* The catalogue sits on a tint of its own. White cards on a white page gave
     the grid no edges at all, so the eye had nothing telling it "this region is
     the shop" as distinct from the promotional matter above it. */
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 18px;
  background: var(--cv-catalog-bg);
}

/* Touch widths: same three columns, tighter gutters. */
@media (max-width: 1024px) {
  .catalog-results .catalog-product-grid { gap: clamp(10px, 2vw, 18px); }
}

/* Phones: exactly two per row. */
@media (max-width: 560px) {
  .catalog-results .catalog-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.5vw, 14px);
  }
}

/* --------------------------------------------------------------------------
   Form rows

   The recurring defect this replaces: a control sitting beside another that
   carries a caption or a helper line is aligned against a taller box, so the
   two end up on different lines. `align-items: end` puts a button level with
   the bottom of its neighbour's helper text; `center` puts it level with the
   middle of caption+control+helper. Neither is level with the control itself.

   The primitive is structural. A row is a grid of cells; every cell is three
   rows -- caption, control, and whatever hangs below it. A cell with no caption
   of its own still reserves the caption row, so its control lands in the same
   band as its neighbours'. Helper text then hangs in the third row without
   moving anything.

   Use it for any row that mixes a captioned field with a bare control.
   -------------------------------------------------------------------------- */
.form-row {
  display: grid;
  align-items: start;
  gap: 10px;
}

.form-row > * {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 7px;
  min-width: 0;
}

/* The caption line. Empty is fine and is the point: it holds the row open. */
.form-cap {
  min-height: 1.6em;
  color: var(--cv-ink);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.6;
}

/* Anything hanging under a control: helper text, an error, a hint. It sits in
   the third row, so it can grow without shifting the control above it. */
.form-under {
  align-self: start;
  margin: 0;
  color: var(--cv-muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.8;
}

/* ==========================================================================
   Checkout

   Steps on one side, a summary that stays in view on the other. The order is
   the order a customer works in: where it goes, how it gets there, a code if
   they have one, how they pay, what it costs. Restrained on purpose -- the only
   emphasised thing on the page is the amount and the button.
   ========================================================================== */
.checkout-page-shell { max-width: 1180px; }

.checkout-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.checkout-page-head h1 { margin: 6px 0 4px; font-size: clamp(1.5rem, 3vw, 2rem); }
.checkout-page-head p { margin: 0; color: var(--cv-muted); font-size: .88rem; line-height: 1.9; }

.checkout-experience {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 26px);
}

.checkout-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-step {
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--cv-line);
  border-radius: 20px;
  background: #fff;
}
.checkout-step-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}
.checkout-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cv-soft);
  color: var(--cv-brand);
  font-size: .86rem;
  font-weight: 900;
}
.checkout-step-eyebrow {
  color: var(--cv-brand);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.checkout-step-head h2 { margin: 2px 0 0; font-size: 1.02rem; }
.checkout-step-head p { margin: 4px 0 0; color: var(--cv-muted); font-size: .8rem; line-height: 1.8; }

/* The fields themselves ride on the shared form-row primitive, so a field with
   a helper line never pushes its neighbour out of alignment. */
.checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-field-wide { grid-column: 1 / -1; }
.checkout-fields textarea.input { min-height: 92px; resize: vertical; }

/* The summary follows the customer down the page while they fill the steps. */
.checkout-aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
}
.checkout-summary { padding: clamp(16px, 2.2vw, 22px); }
.checkout-summary h2 { margin: 0 0 14px; font-size: 1rem; }
.checkout-summary-lines { display: grid; gap: 9px; margin: 0; }
.checkout-summary-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.checkout-summary-lines dt { color: var(--cv-muted); font-size: .84rem; }
.checkout-summary-lines dd { margin: 0; font-size: .88rem; font-weight: 700; }
.checkout-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cv-line);
}
.checkout-summary-total span { font-size: .9rem; font-weight: 800; }
.checkout-summary-total b { font-size: 1.25rem; font-weight: 900; }
.checkout-summary-note { margin: 10px 0 0; color: var(--cv-brand); font-size: .8rem; line-height: 1.8; }
.checkout-summary-error { margin: 0; color: var(--cv-danger, #b3261e); font-size: .84rem; line-height: 1.8; }

.checkout-continue { width: 100%; min-height: 52px; font-size: .95rem; }
.checkout-secure-note {
  margin: 0;
  color: var(--cv-muted);
  font-size: .76rem;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 1024px) {
  /* One column, summary directly above the button it explains. */
  .checkout-experience { grid-template-columns: minmax(0, 1fr); }
  .checkout-aside { position: static; }
  .checkout-page-head { flex-direction: column; gap: 10px; }
}

@media (max-width: 560px) {
  .checkout-fields { grid-template-columns: minmax(0, 1fr); }
  .checkout-step { padding: 15px; border-radius: 16px; }
  .checkout-step-head { margin-bottom: 13px; }
}


/* --------------------------------------------------------------------------
   Out of stock reads the same everywhere

   Product cards, the product page and the cart all used a different treatment
   for the same fact. The add-to-cart trigger now states it the way the cart
   line and the variant chip do: solid red, white label. White on --cv-danger is
   about 6.5:1, past AA for both the label and the icon-only variant.
   -------------------------------------------------------------------------- */
.product-cart-trigger.is-unavailable,
.product-cart-trigger.is-unavailable:disabled,
.product-cart-trigger.is-unavailable[disabled] {
  border-color: var(--cv-danger);
  background: var(--cv-danger);
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
}
.product-cart-trigger.is-unavailable svg { stroke: #fff; fill: none; }


/* --------------------------------------------------------------------------
   Order documents on the site

   The invoice body is rendered by src/services/orderDocuments.js and shown both
   here and on the printable sheet, so the customer sees one layout in both
   places. The standalone sheet carries its own copy of this styling because it
   has to render with nothing else loaded; what lives here is the same design
   adapted to sit inside the site shell (no A4 box, no page shadow).
   -------------------------------------------------------------------------- */
.doc-invoice { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-lg); background: #fff; }
.doc-invoice .doc-logo { width: 42px; height: 42px; flex: 0 0 42px; }
.doc-invoice .doc-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--cv-brand); }
.doc-invoice .doc-brand { display: flex; align-items: center; gap: 12px; }
.doc-invoice .doc-brand b { display: block; font-size: 1.05rem; font-weight: 900; }
.doc-invoice .doc-brand span { color: var(--cv-muted); font-size: .78rem; }
.doc-invoice .doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 18px; margin: 0; }
.doc-invoice .doc-meta div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.doc-invoice .doc-meta dt { color: var(--cv-muted); font-size: .74rem; }
.doc-invoice .doc-meta dd { margin: 0; font-size: .82rem; font-weight: 800; }
.doc-invoice .doc-state { color: var(--cv-brand); }
.doc-invoice .doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.doc-invoice .doc-parties > div { padding: 13px 15px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-sm); background: var(--cv-soft); }
.doc-invoice .doc-parties b { display: block; margin: 4px 0 6px; font-size: .93rem; font-weight: 800; }
.doc-invoice .doc-parties p { margin: 0 0 3px; color: var(--cv-muted); font-size: .82rem; }
.doc-invoice .doc-label { display: block; color: var(--cv-brand); font-size: .72rem; font-weight: 800; }
.doc-invoice .doc-lines { overflow-x: auto; }
.doc-invoice .doc-lines table { width: 100%; min-width: 540px; border-collapse: collapse; }
.doc-invoice .doc-lines th { padding: 9px 8px; border-bottom: 1.5px solid var(--cv-brand); color: var(--cv-muted); font-size: .74rem; font-weight: 800; text-align: right; }
.doc-invoice .doc-lines td { padding: 10px 8px; border-bottom: 1px solid var(--cv-line); font-size: .84rem; }
.doc-invoice .doc-lines tbody tr:nth-child(even) { background: #fafdfc; }
.doc-invoice .col-index { width: 40px; text-align: center; color: var(--cv-muted); }
.doc-invoice .col-volume, .doc-invoice .col-qty { width: 72px; text-align: center; }
.doc-invoice .col-qty { font-weight: 800; }
.doc-invoice .col-unit, .doc-invoice .col-total { width: 128px; white-space: nowrap; }
.doc-invoice .col-title small { display: block; color: var(--cv-muted); font-size: .73rem; }
.doc-invoice .doc-empty { padding: 18px; color: var(--cv-muted); text-align: center; }
.doc-invoice .doc-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.doc-invoice .doc-notes, .doc-invoice .doc-totals { padding: 13px 15px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-sm); }
.doc-invoice .doc-totals { background: var(--cv-soft); }
.doc-invoice .doc-notes p, .doc-invoice .doc-totals p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 7px; font-size: .83rem; }
.doc-invoice .doc-notes span, .doc-invoice .doc-totals span { color: var(--cv-muted); }
.doc-invoice .doc-notes b, .doc-invoice .doc-totals b { font-weight: 800; }
.doc-invoice .doc-totals .is-discount b { color: var(--cv-danger); }
.doc-invoice .doc-totals .is-final { padding-top: 9px; margin-top: 3px; border-top: 1.5px solid var(--cv-brand); }
.doc-invoice .doc-totals .is-final b { color: var(--cv-brand); font-size: 1.06rem; font-weight: 900; }
.doc-invoice .doc-legal { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--cv-line); color: var(--cv-muted); font-size: .74rem; line-height: 2; text-align: center; }
.invoice-actions { margin-top: 14px; gap: 10px; }

/* The packing-slip export sits opposite the popup's title, beside the close
   control, so the two things you reach for most are in the same corner. */
/* The close control is absolutely positioned at the popup's physical left, so
   it is not in this row's flow. The inline-end padding (physical left, in RTL)
   is what keeps the export button clear of it -- without it the two collide at
   phone widths, where the header row is narrow enough to reach the corner. */
.order-detail-actions { display: flex; align-items: center; gap: 8px; padding-inline-end: 46px; }
.order-packing-export { white-space: nowrap; }
.order-label-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cv-line); text-align: center; }
.order-label-qr img { width: 120px; height: 120px; border-radius: 10px; }
.order-label-qr small { color: var(--cv-muted); font-size: .72rem; font-weight: 800; word-break: break-all; }
.order-label-spent { margin: 0; color: var(--cv-muted); font-size: .8rem; }
@media (max-width: 560px) {
  .order-detail-actions { gap: 6px; }
  .order-packing-export { padding-inline: 12px; font-size: .78rem; }
}
@media (max-width: 400px) {
  .order-packing-export { padding-inline: 10px; font-size: .74rem; }
}

/* ==========================================================================
   PANEL DESIGN SYSTEM  —  /user-panel and the admin panel

   Both panels had accumulated their look in layers: a base in
   c7f2a9e4b1d83650.css and a second, partly contradictory pass here. Cards,
   tiles and the nav rail were each defined twice, which is why sections drifted
   apart -- different padding, different radii, different control heights, three
   button treatments for the same job.

   This block is the single authority for the panel chrome. It is deliberately
   restrained: flat surfaces, one spacing rhythm, one type scale, one status
   vocabulary. Nothing here animates on hover beyond a colour change, and no
   card carries a gradient -- an operational tool is read all day, and movement
   and decoration are what make that tiring.
   ========================================================================== */

.account-shell-page,
.admin-shell-page { background: var(--cv-panel-ground); }

/* ---- the page head ------------------------------------------------------
   It was a full card carrying only a title and one button. Now it is a plain
   heading band, so the first real content starts near the top of the screen. */
.account-shell-page > .panel-page-head,
.admin-shell-page > .panel-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 2px 14px;
  border: 0;
  border-bottom: 1px solid var(--cv-panel-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.account-shell-page > .panel-page-head h1,
.admin-shell-page > .panel-page-head h1 {
  margin: 2px 0 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
}
.panel-page-head .panel-eyebrow {
  color: var(--cv-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---- navigation rail ----------------------------------------------------
   The decorative dot before every item is gone: it marked nothing, and with a
   dozen entries it read as a bulleted list rather than navigation. The active
   item is now carried by weight, ground and one edge bar. */
.premium-panel > .side {
  gap: 1px;
  padding: 10px;
  border: 1px solid var(--cv-panel-line);
  border-radius: var(--cv-panel-radius);
  background: var(--cv-panel-nav);
  box-shadow: none;
}
.premium-panel > .side .side-identity {
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--cv-panel-line-soft);
  border-radius: 0;
  background: none;
}
.premium-panel > .side .side-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cv-brand);
  font-size: .95rem;
  box-shadow: none;
}
.premium-panel > .side .side-identity b { font-size: .86rem; font-weight: 800; }
.premium-panel > .side .side-identity small { font-size: .7rem; }

.side-label {
  margin: 12px 8px 3px;
  color: var(--cv-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.premium-panel > .side > .side-label:first-of-type { margin-top: 4px; }

.premium-panel > .side a,
.premium-panel > .side button {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--cv-panel-radius-sm);
  color: var(--cv-ink);
  font-size: .845rem;
  font-weight: 600;
  transition: background .14s ease, color .14s ease;
}
.premium-panel > .side a::before { content: none; }
.premium-panel > .side a:hover,
.premium-panel > .side button:hover {
  background: var(--cv-panel-hover);
  color: var(--cv-brand);
  transform: none;
}
.premium-panel > .side a.active {
  position: relative;
  background: color-mix(in srgb, var(--cv-brand) 9%, #fff);
  color: var(--cv-brand);
  font-weight: 800;
  box-shadow: none;
}
.premium-panel > .side a.active::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--cv-brand);
}
.premium-panel > .side .logout-button {
  margin-top: 10px;
  border-top: 1px solid var(--cv-panel-line-soft);
  border-radius: var(--cv-panel-radius-sm);
  padding-top: 12px;
  background: none;
  color: var(--cv-stop-ink);
  font-weight: 700;
}
.premium-panel > .side .logout-button:hover { background: var(--cv-stop-bg); color: var(--cv-stop-ink); }
/* The base .unread-dot is absolutely positioned at -5px for a badge that sits
   on a button elsewhere; inside a nav row that put it outside the rail. Here it
   is an ordinary flow item pinned to the end of the row. */
.premium-panel > .side .unread-dot {
  position: static;
  inset: auto;
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--cv-stop-ink);
}

/* The page head is a plain band now, so the gradient bar that used to mark the
   edge of the old card has nothing left to mark. */
.account-shell-page > .panel-page-head::before,
.admin-shell-page > .panel-page-head::before { content: none; }

/* ---- cards --------------------------------------------------------------
   One padding, one radius, one border, no shadow and no gradient, everywhere
   in both panels. Cards used to differ section by section. */
#panel > .panel-section,
#admin > .card,
#admin > section.card,
#admin > .grid > .card,
#adminEditor > .card,
.admin-summary-item,
.admin-insight-card,
.admin-review-panel,
.admin-stock-panel,
.admin-recent-orders {
  padding: var(--cv-panel-pad);
  border: 1px solid var(--cv-panel-line);
  border-radius: var(--cv-panel-radius);
  background: var(--cv-panel-card);
  box-shadow: none;
}
.premium-panel > #panel,
.premium-panel > #admin { gap: var(--cv-panel-gap); }

/* Section headings: one scale. Overline, title, then optional helper line. */
#panel > .panel-section > h2,
#admin .section-title h2,
#admin > .card > h2,
#admin > .card > h3,
.panel-section-intro h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
}
#panel .panel-eyebrow,
#admin .panel-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: var(--cv-muted);
  font-size: .7rem;
  font-weight: 700;
}
#panel > .panel-section > p.muted,
#admin > .card > p.muted { margin: 4px 0 0; font-size: .82rem; }

/* ---- summary tiles ------------------------------------------------------
   These were 112px tall with a large number floating in the middle, so eight
   of them filled a screen and said very little. Label, figure and one line of
   context, packed to the same rhythm and aligned across the row. */
.admin-summary-grid,
.admin-stat-grid,
.panel-summary-grid { gap: var(--cv-panel-gap); }

.admin-summary-item,
.panel-summary-card,
.admin-stat-grid .stat-card {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 13px 14px;
  border-radius: var(--cv-panel-radius-sm);
  transition: border-color .14s ease;
}
.admin-summary-item:hover,
.panel-summary-card:hover,
.admin-stat-grid .stat-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--cv-brand) 30%, #fff);
  box-shadow: none;
}
.admin-summary-item small,
.panel-summary-card small {
  color: var(--cv-muted);
  font-size: .73rem;
  font-weight: 600;
}
.admin-summary-item b,
.panel-summary-card b {
  margin: 3px 0 0;
  color: var(--cv-ink);
  font-size: 1.32rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.admin-summary-item span,
.panel-summary-card span {
  color: var(--cv-muted);
  font-size: .71rem;
  line-height: 1.7;
}
/* The one emphasised tile keeps its emphasis, as a flat brand ground. */
.panel-summary-card.primary {
  border-color: var(--cv-brand);
  background: var(--cv-brand);
}
.panel-summary-card.primary small,
.panel-summary-card.primary span { color: rgba(255, 255, 255, .82); }
.panel-summary-card.primary b { color: #fff; }

/* ---- the overview -------------------------------------------------------
   The four tiles are the shortcuts now. They used to be numbers with a
   separate row of buttons underneath pointing at the same four places, which
   said everything twice and cost a scroll to reach. */
a.panel-summary-card { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.panel-summary-card:hover { border-color: var(--cv-brand); }
a.panel-summary-card:hover .panel-summary-go { color: var(--cv-brand); }
.panel-summary-go { display: block; margin-top: 8px; color: var(--cv-muted); font-size: .72rem; font-weight: 700; }
.panel-summary-card.primary:hover { border-color: #fff; }
/* Unread mail is the one number worth a mark of its own. */
.panel-summary-card.has-unread b { color: var(--cv-brand); }
.panel-summary-card.has-unread::after {
  content: '';
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cv-brand);
}
.panel-summary-card { position: relative; }

/* The most recent order, given the room to answer "where is my parcel" without
   opening anything. */
.panel-latest-order {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
}
.panel-latest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-latest-head h3 { margin: 4px 0 0; font-size: 1.06rem; }
/* Facts on one end, the two things you can do on the other, sharing a line.
   Stacked they left most of a wide card empty and pushed the buttons a scroll
   further down on the page people open specifically to press them. */
.panel-latest-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.panel-latest-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.panel-latest-facts div { min-width: 0; }
.panel-latest-facts dt { color: var(--cv-muted); font-size: .72rem; }
.panel-latest-facts dd { margin: 3px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.panel-latest-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* Anything the customer is still waiting on: an open ticket, a return being
   reviewed. Both were already being loaded and shown nowhere. */
.panel-followups { margin-top: 18px; }
.panel-followup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 13px;
  background: #fff;
  color: var(--cv-ink);
  text-decoration: none;
}
.panel-followup-row + .panel-followup-row { margin-top: 8px; }
.panel-followup-row:hover { border-color: var(--cv-brand); background: var(--cv-soft); }
.panel-followup-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; line-height: 1.6; }
.panel-followup-row small { color: var(--cv-muted); white-space: nowrap; }
.panel-support-line { margin: 18px 0 0; color: var(--cv-muted); font-size: .88rem; }
.panel-support-line a { color: var(--cv-brand); font-weight: 700; }

@media (max-width: 560px) {
  .panel-latest-head { flex-direction: column; gap: 8px; }
  .panel-latest-body { align-items: stretch; }
  .panel-latest-actions { width: 100%; }
  .panel-latest-actions .btn { flex: 1 1 auto; }
  /* The date is the first thing to go when the row runs out of width. The
     subject is then allowed to wrap rather than being cut: an order number
     ending in an ellipsis identifies nothing. */
  .panel-followup-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .panel-followup-row small { display: none; }
  .panel-followup-row b { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
}

/* ---- status vocabulary --------------------------------------------------
   Same colour means the same thing in both panels: green settled, amber
   waiting on someone, red stopped, grey inactive. */
.status-pill,
.order-status-chip,
.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cv-idle-bg);
  color: var(--cv-idle-ink);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill.is-ok,      .order-status-chip.is-ok      { background: var(--cv-ok-bg);   color: var(--cv-ok-ink); }
.status-pill.is-wait,    .order-status-chip.is-wait    { background: var(--cv-wait-bg); color: var(--cv-wait-ink); }
.status-pill.is-stop,    .order-status-chip.is-stop    { background: var(--cv-stop-bg); color: var(--cv-stop-ink); }
.status-pill.is-idle,    .order-status-chip.is-idle    { background: var(--cv-idle-bg); color: var(--cv-idle-ink); }
.status-pill.is-info,    .order-status-chip.is-info    { background: var(--cv-info-bg); color: var(--cv-info-ink); }

/* ---- button hierarchy ---------------------------------------------------
   One height and one shape for every control in both panels. Primary is
   filled, secondary is outlined, destructive is outlined red and only turns
   solid on hover -- so a delete never looks like the obvious thing to press. */
#panel .btn,
#admin .btn,
#adminEditor .btn,
.order-detail-modal .btn {
  min-height: var(--cv-control-h);
  padding: 8px 15px;
  border-radius: var(--cv-panel-radius-sm);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: none;
}
#panel .btn:hover,
#admin .btn:hover,
#adminEditor .btn:hover { transform: none; box-shadow: none; }
#panel .btn.ghost,
#admin .btn.ghost,
#adminEditor .btn.ghost {
  border: 1px solid var(--cv-panel-line);
  background: #fff;
  color: var(--cv-ink);
  font-weight: 600;
}
#panel .btn.ghost:hover,
#admin .btn.ghost:hover,
#adminEditor .btn.ghost:hover { border-color: var(--cv-brand); background: var(--cv-panel-hover); color: var(--cv-brand); }
#panel .btn.danger,
#admin .btn.danger,
#adminEditor .btn.danger,
#admin [data-admin-delete] {
  border: 1px solid color-mix(in srgb, var(--cv-stop-ink) 30%, #fff);
  background: #fff;
  color: var(--cv-stop-ink);
}
#panel .btn.danger:hover,
#admin .btn.danger:hover,
#adminEditor .btn.danger:hover,
#admin [data-admin-delete]:hover { border-color: var(--cv-stop-ink); background: var(--cv-stop-bg); color: var(--cv-stop-ink); }

#panel .input,
#admin .input,
#adminEditor .input { min-height: var(--cv-control-h); border-radius: var(--cv-panel-radius-sm); font-size: .84rem; }

/* ---- data tables --------------------------------------------------------
   Scannability: a quiet sticky header, hairline row rules, numbers aligned on
   their digits, and row actions that stop competing with the data. */
#admin .table { border-collapse: collapse; }
#admin .table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  border-bottom: 1px solid var(--cv-panel-line);
  background: var(--cv-panel-ground);
  color: var(--cv-muted);
  font-size: .73rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
#admin .table td {
  padding: 10px;
  border-bottom: 1px solid var(--cv-panel-line-soft);
  font-size: .82rem;
  vertical-align: middle;
}
#admin .table tbody tr:hover td { background: color-mix(in srgb, var(--cv-brand) 3%, #fff); }
#admin .table td:not(:has(.table-actions)) { overflow-wrap: anywhere; }
/* Money and counts line up on their digits. */
#admin .table td b,
#admin .table td .price { font-variant-numeric: tabular-nums; }
#admin .table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start;
}
#admin .table-actions .btn { min-height: 31px; padding: 5px 10px; font-size: .75rem; }

/* ---- empty and loading states ------------------------------------------ */
#panel .empty-state,
#admin .empty-state,
#admin .admin-empty-result {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 30px 18px;
  border: 1px dashed var(--cv-panel-line);
  border-radius: var(--cv-panel-radius-sm);
  background: color-mix(in srgb, var(--cv-brand) 2%, #fff);
  text-align: center;
}
#panel .empty-state p,
#admin .empty-state p,
#admin .admin-empty-result p { margin: 0; color: var(--cv-muted); font-size: .84rem; }

/* ---- order cards in the user panel -------------------------------------- */
.pretty-order,
.order-card {
  border: 1px solid var(--cv-panel-line);
  border-radius: var(--cv-panel-radius-sm);
  background: var(--cv-panel-card);
}

/* ==========================================================================
   Tablet and mobile

   The rail becomes a horizontal strip (already handled above 1024px down), and
   every data table becomes a stack of cards. A table squeezed onto a phone is
   the single worst thing in the current admin panel: the operator is usually
   on a phone when they check something quickly.
   ========================================================================== */
@media (max-width: 1024px) {
  .premium-panel > .side {
    gap: 5px;
    padding: 7px;
    border-radius: var(--cv-panel-radius-sm);
  }
  .premium-panel > .side a,
  .premium-panel > .side button {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
  }
  .premium-panel > .side a.active::after { content: none; }
  .premium-panel > .side a.active {
    background: var(--cv-brand);
    color: #fff;
  }
  .premium-panel > .side .logout-button {
    margin-top: 0;
    padding-top: 6px;
    border-top: 0;
  }
}

@media (max-width: 760px) {
  /* Each row becomes a card; each cell shows the column name it belongs to,
     which is what the data-label on the cell is for. */
  #admin .admin-resource-table {
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible !important;
  }
  #admin .admin-resource-table .table,
  #admin .admin-resource-table .table tbody,
  #admin .admin-resource-table .table tr,
  #admin .admin-resource-table .table td { display: block; width: auto; min-width: 0; }
  #admin .admin-resource-table .table thead { display: none; }
  #admin .admin-resource-table .table tr {
    margin-bottom: 9px;
    padding: 4px 12px 10px;
    border: 1px solid var(--cv-panel-line);
    border-radius: var(--cv-panel-radius-sm);
    background: #fff;
  }
  #admin .admin-resource-table .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cv-panel-line-soft);
    text-align: left;
  }
  #admin .admin-resource-table .table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--cv-muted);
    font-size: .73rem;
    font-weight: 700;
    text-align: right;
  }
  #admin .admin-resource-table .table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  #admin .admin-resource-table .table td:last-child::before { align-self: center; }
  #admin .table-actions { justify-content: flex-end; }

  .admin-summary-grid,
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-summary-item b,
  .panel-summary-card b { font-size: 1.15rem; }
}

@media (max-width: 420px) {
  .admin-summary-grid,
  .admin-stat-grid { grid-template-columns: 1fr; }
}

/* ---- panel heading trim -------------------------------------------------
   Section headings carry a 48x4 gradient bar site-wide. On the storefront that
   is a deliberate flourish; inside a panel, repeated once per card down a long
   page, it is noise. Removed here only -- the storefront keeps it. */
#panel .section-title h2::after,
#admin .section-title h2::after,
#panel > .panel-section > h2::after,
#adminEditor .section-title h2::after { content: none; }

/* The eyebrow and title belong together on one line-length, not split by the
   action buttons stretching across the row. */
.panel-page-head > div:first-child { min-width: 0; }
.panel-page-head .panel-eyebrow { white-space: nowrap; }
.panel-head-actions,
.panel-page-head .panel-shop-action { flex: 0 0 auto; }
.panel-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Resource section header: title on one side, its actions on the other, and a
   search row that stays reachable rather than scrolling away. */
.admin-resource-head .section-title { gap: 10px; padding-bottom: 10px; }
#admin .admin-resource-head .btn { min-height: 34px; padding: 6px 12px; font-size: .78rem; }

@media (max-width: 760px) {
  /* Head actions were stretching to full width and pushing the first row of
     real content most of a screen down. */
  .account-shell-page > .panel-page-head,
  .admin-shell-page > .panel-page-head { align-items: flex-start; gap: 10px; }
  .panel-head-actions { width: auto; }
  #panel .panel-page-head .btn,
  #admin .panel-page-head .btn,
  .panel-head-actions .btn,
  .panel-page-head .panel-shop-action {
    width: auto;
    min-height: 34px;
    padding: 6px 13px;
    font-size: .78rem;
  }
  .admin-resource-head .section-title { flex-direction: column; align-items: stretch; }
  .admin-resource-head .section-title > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
}

/* Row actions are navigational, not commitments: a column of five filled
   buttons made every row shout. They read as outlined controls, leaving the
   filled treatment for the one real primary action in a section. Delete keeps
   its own red outline from the button hierarchy above. */
#admin .table-actions .btn:not(.danger):not([data-admin-delete]) {
  border: 1px solid var(--cv-panel-line);
  background: #fff;
  color: var(--cv-ink);
  font-weight: 600;
}
#admin .table-actions .btn:not(.danger):not([data-admin-delete]):hover {
  border-color: var(--cv-brand);
  background: var(--cv-panel-hover);
  color: var(--cv-brand);
}

/* --------------------------------------------------------------------------
   Product finder: the category filter fields

   These questions are generated from the store's category tree, so neither
   their number nor their length is known in advance. Each field is a chip row
   that wraps, and a field with a long option list scrolls inside itself rather
   than pushing the budget and the submit button off the bottom of the modal.
   -------------------------------------------------------------------------- */
.finder-category-fields {
  grid-column: 1 / -1;
  display: grid;
  gap: 13px;
  /* Many root categories must not turn the modal into an endless form. */
  max-height: min(46vh, 420px);
  padding-inline-end: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.finder-group {
  margin: 0;
  padding: 11px 13px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: #fff;
}
.finder-group legend {
  padding: 0 4px;
  color: var(--cv-ink);
  font-size: .81rem;
  font-weight: 800;
}
.finder-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.finder-chip { position: relative; }
.finder-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.finder-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cv-ink);
  font-size: .81rem;
  font-weight: 600;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.finder-chip input:hover + span { border-color: var(--cv-brand); }
.finder-chip input:checked + span {
  border-color: var(--cv-brand);
  background: var(--cv-brand);
  color: #fff;
  font-weight: 700;
}
.finder-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--cv-brand) 30%, transparent); outline-offset: 2px; }
.finder-empty .row { justify-content: center; margin-top: 14px; }

@media (max-width: 1024px) {
  .finder-category-fields { max-height: none; overflow: visible; }
}


/* --------------------------------------------------------------------------
   Phone navigation

   A usability test found people could not tell where the catalogue was, and
   could not find the way in to an account: on a phone the header carried only
   the logo, the menu button and the search box, with everything else behind the
   hamburger. Two things answer that -- a cart and an account control that are
   always in the header, and a bottom bar with the four destinations a shopper
   actually uses.

   Both appear only below 1024px, which is the same breakpoint that hides the
   desktop links and the account buttons, so nothing is offered twice.
   -------------------------------------------------------------------------- */
.nav-quick-actions { display: none; }
.bottom-nav { display: none; }

@media (max-width: 1024px) {
  .nav-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
  }
  .nav-quick-action {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--cv-brand);
  }
  .nav-quick-action:hover,
  .nav-quick-action:focus-visible { background: var(--cv-soft); }
  .nav-quick-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .nav-quick-action .nav-cart-count {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cv-brand);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
  }

  .bottom-nav {
    position: fixed;
    z-index: 60;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cv-line);
    background: color-mix(in srgb, #fff 94%, var(--cv-soft));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 18px rgba(12, 74, 59, .08);
  }
  .bottom-nav-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 46px;
    padding: 5px 2px;
    border-radius: 12px;
    color: var(--cv-muted);
    font-size: .66rem;
    font-weight: 700;
    text-decoration: none;
  }
  .bottom-nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav-item[aria-current="page"] { color: var(--cv-brand); }
  .bottom-nav-item:active { background: var(--cv-soft); }
  .bottom-nav-count {
    position: absolute;
    top: 0;
    inset-inline-end: calc(50% - 20px);
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cv-brand);
    color: #fff;
    font-size: .6rem;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
  }

  /* Room for the bar, so it never covers the last row of the footer, and the
     cookie notice sits above it rather than under it. */
  /* Slightly more than the bar's own height, measured rather than guessed:
     64px left the last two pixels of the footer under it. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  /* The bar is fixed, so the browser does not know it is there when it scrolls
     something into view: an anchor jump or a scrollIntoView would land the
     target underneath it. This reserves that space for scrolling too, the way
     scroll-padding-top already does for the sticky header. */
  html { scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .cookie-consent-pop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .footer-back-top-wrap { margin-bottom: 8px; }
}


/* --------------------------------------------------------------------------
   Sign in, where you were stopped

   Deliberately shaped like the confirm dialog already in use rather than a new
   kind of window, so it reads as part of the same site. Two real buttons, and a
   way out that does not punish the person for saying not now.
   -------------------------------------------------------------------------- */
.signin-prompt-backdrop {
  position: fixed;
  /* The shared overlay layer in c7f2a9e4b1d83650.css raises this to 12000
     alongside every other modal; this value is only the floor for a page that
     somehow loads without that sheet. */
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 38, 30, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.signin-prompt {
  position: relative;
  width: min(430px, 100%);
  padding: 26px 24px 22px;
  border: 1px solid var(--cv-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(11, 38, 30, .28);
  text-align: start;
}
.signin-prompt-eyebrow { display: block; color: var(--cv-brand); font-size: .75rem; font-weight: 900; }
.signin-prompt h2 { margin: 8px 0 10px; font-size: 1.16rem; }
.signin-prompt p { margin: 0; color: var(--cv-muted); line-height: 1.95; }
.signin-prompt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.signin-prompt-actions .btn { width: 100%; min-height: 46px; }
.signin-prompt-later { width: 100%; margin-top: 9px; min-height: 42px; }
.signin-prompt-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--cv-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.signin-prompt-close:hover { background: var(--cv-soft); color: var(--cv-ink); }
@media (max-width: 420px) {
  .signin-prompt-actions { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Checkout progress

   The steps below were already numbered; what was missing was a single line at
   the top saying how much of the checkout is still ahead. It reflects what has
   been filled in, not where the page is scrolled.
   -------------------------------------------------------------------------- */
.checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.checkout-progress-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--cv-line);
  border-radius: 14px;
  background: #fff;
  color: var(--cv-muted);
  font-size: .82rem;
}
.checkout-progress-step b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.checkout-progress-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cv-idle-bg);
  color: var(--cv-idle-ink);
  font-size: .78rem;
  font-weight: 900;
}
.checkout-progress-step.is-done { border-color: color-mix(in srgb, var(--cv-brand) 35%, #fff); color: var(--cv-ink); }
.checkout-progress-step.is-done .checkout-progress-mark { background: var(--cv-ok-bg); color: var(--cv-ok-ink); }
.checkout-progress-step.is-current { border-color: var(--cv-brand); background: var(--cv-soft); color: var(--cv-ink); }
.checkout-progress-step.is-current .checkout-progress-mark { background: var(--cv-brand); color: #fff; }

.checkout-assurances { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.checkout-assurances li { color: var(--cv-muted); font-size: .78rem; line-height: 1.8; }
.checkout-assurances li[hidden] { display: none; }

@media (max-width: 600px) {
  .checkout-progress { gap: 6px; }
  .checkout-progress-step { flex-direction: column; gap: 5px; padding: 9px 6px; text-align: center; font-size: .72rem; }
  .checkout-progress-step b { white-space: normal; }
}


/* Suggestions under an empty result. Full width of the grid it sits inside, so
   the "nothing found" line and the alternatives read as one block. */
.catalog-suggestions { grid-column: 1 / -1; margin-top: 6px; }
.catalog-suggestions h2 { margin: 0 0 12px; font-size: 1rem; }
.catalog-suggestions-grid { padding: 0; background: none; }


/* --------------------------------------------------------------------------
   Tap targets

   Measured across every page at 390, 820 and 1440: a set of controls sat
   between 32px and 39px, which is under the ~40px a finger needs. They are
   raised here in one place rather than each being nudged where it was found,
   and only the height is set, so nothing about their look or spacing changes.
   Native checkboxes and radios keep their own size on purpose -- the label row
   around them is the target, and inflating the box itself looks broken.
   -------------------------------------------------------------------------- */
.mobile-menu-toggle { min-width: 42px; min-height: 42px; }
/* A checkbox keeps its native size -- inflating the box itself looks broken --
   so the row that carries it is the tap target, and it is sized like one.
   The catalog's own `.catalog-page .check-row` outranks this one and is spelled
   out twice, in c7f2a9e4b1d83650.css and aefbe585773be8e3.css; both were moved
   to 40px at the source rather than being overridden from here again. */
.check-row,
.catalog-category-option > .check-row { display: flex; align-items: center; min-height: 40px; }
.auth-text-button,
.side button.logout-button,
.mobile-menu button.logout-button,
.logout-button,
.panel-page-head .panel-shop-action,
.panel-shop-action { min-height: 40px; }
/* Square, so the close control is as wide as it is tall. */
.pretty-confirm-x { min-width: 40px; min-height: 40px; }
.store-product-card .icon-btn,
.store-product-card .product-quantity-stepper button { min-width: 40px; min-height: 40px; }

@media (max-width: 1024px) {
  /* Everything a finger reaches for on a touch width, including the ghost
     buttons that carry the secondary actions on a product card. */
  .btn,
  .icon-btn,
  .product-cart-trigger { min-height: 40px; }
  .product-quantity-stepper button { min-height: 40px; }
}


/* --------------------------------------------------------------------------
   Getting the merchandise on screen sooner (phones)

   Measured at 390x844: the hero, the category chips, the finder card and the
   category strip together used 962px before the first product card, so someone
   landing on the homepage saw nothing purchasable without scrolling -- which is
   precisely what the usability test reported. Nothing is removed here; the
   promotional blocks are simply given less air on the one width where vertical
   space is scarce.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .home-hero-premium .campaign-hero-slide,
  .home-hero-premium .campaign-hero-slide.is-active { gap: 12px; padding: 11px 11px 54px; }
  .home-hero-premium .campaign-hero-visual { min-height: 186px; }
  .home-discovery-bar { padding: 11px 13px; }
  .product-finder-entry { padding: 11px; }
  .product-finder-entry p { margin: 4px 0 0; }
  /* The category strip keeps every card and every link; only its own padding
     and the gap around its heading come down. */
  .home-strip-section { padding-block: 9px; }
  .home-strip-section .section-title { margin-bottom: 8px; }
  #app-root > .section + .section { margin-top: 4px; }
}


/* --------------------------------------------------------------------------
   Money, spaced like money

   Product card prices carry `letter-spacing: -.015em`, which is what makes them
   read as one figure rather than a row of separate digits. The larger monetary
   displays were left at `normal`, and the bigger the type the looser that looks:
   the wallet balance renders at 33.6px, where the difference is obvious. Same
   tracking everywhere a sum of money is shown large, in em so it holds at every
   size, plus tabular figures so the digits line up.
   -------------------------------------------------------------------------- */
.wallet-balance-card strong,
.panel-summary-card b,
.checkout-summary-total b,
.panel-latest-facts dd,
.invoice-summary h2,
.admin-summary-item b {
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}


/* A validation message belongs beside the box it is about. */
.field-error {
  display: block;
  margin-top: 5px;
  color: var(--cv-danger, #b3261e);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.7;
}
.has-field-error .input,
.has-field-error input,
.has-field-error textarea,
.has-field-error select {
  border-color: var(--cv-danger, #b3261e);
}


/* --------------------------------------------------------------------------
   Final order confirmation

   This was a flat run of paragraphs: goods, receiver, payment and totals all in
   the same undifferentiated list, with the amount about to be charged no louder
   than the rest of it. Each part is its own block now, and the payable amount is
   given the weight a purchase confirmation should give it.
   -------------------------------------------------------------------------- */
.checkout-confirm-head { margin-bottom: 4px; }
.checkout-confirm-head h2 { margin: 6px 0 4px; }
.checkout-confirm-head p { margin: 0; }

.checkout-confirm-block {
  padding: 16px 17px;
  border: 1px solid var(--cv-line);
  border-radius: 16px;
  background: #fff;
}
.checkout-confirm-block > h3 {
  margin: 0 0 12px;
  color: var(--cv-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.checkout-confirm-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.checkout-confirm-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-areas: 'image detail price' 'image detail count';
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
}
.checkout-confirm-item + .checkout-confirm-item { border-top: 1px solid var(--cv-line); }
.checkout-confirm-item img { grid-area: image; width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: var(--cv-soft); }
.checkout-confirm-item > div { grid-area: detail; min-width: 0; }
.checkout-confirm-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.checkout-confirm-item span { color: var(--cv-muted); font-size: .78rem; }
.checkout-confirm-item strong { grid-area: price; align-self: end; font-weight: 900; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-confirm-item em { grid-area: count; align-self: start; color: var(--cv-muted); font-size: .74rem; font-style: normal; white-space: nowrap; text-align: end; }

.checkout-confirm-facts { display: grid; gap: 9px; margin: 0; }
.checkout-confirm-facts div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.checkout-confirm-facts dt { color: var(--cv-muted); font-size: .78rem; }
.checkout-confirm-facts dd { margin: 0; min-width: 0; font-weight: 700; line-height: 1.85; overflow-wrap: anywhere; }

.checkout-confirm-totals .checkout-totals { display: grid; gap: 8px; margin: 0; }
.checkout-confirm-totals .checkout-totals div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.checkout-confirm-totals dt { color: var(--cv-muted); font-size: .82rem; }
.checkout-confirm-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkout-confirm-note { margin: 10px 0 0; color: var(--cv-brand); font-size: .78rem; }

/* What is about to be charged. */
.checkout-confirm-payable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cv-line);
}
.checkout-confirm-payable span { color: var(--cv-ink); font-weight: 700; }
.checkout-confirm-payable b {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--cv-brand);
}
.checkout-confirm-help { margin: 2px 0 0; font-size: .8rem; }
.checkout-confirm-actions { justify-content: flex-start; gap: 10px; }

@media (max-width: 720px) {
  .checkout-confirm-columns { grid-template-columns: 1fr; }
  .checkout-confirm-facts div { grid-template-columns: 74px minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   Phone and tablet: header and drawer

   The collapsed header carried the wordmark, which duplicated the one the menu
   now heads itself and took space from the controls that are actually pressed.
   Below 1024px -- the same breakpoint that already hides the desktop links --
   the header keeps search, cart, account and the menu button, and the wordmark
   moves into the drawer.

   The drawer is anchored to the inline start, which in this right-to-left
   layout is the right-hand edge: it comes in from the side the reading starts
   on, the way a drawer should here.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-inner > .brand { display: none; }

  /* `:not([hidden])` to match the existing rule's specificity -- this sheet
     loads last, so an equal-weight rule here is the one that lands. A column
     flex aligned to the inline start puts the panel against the right edge,
     which is the side a drawer should enter from in a right-to-left layout. */
  .mobile-menu:not([hidden]),
  .mobile-menu {
    position: fixed;
    z-index: 11000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 33, 26, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mobile-menu[hidden] { display: none; }

  /* The panel itself. Everything inside scrolls; the wordmark row does not. */
  .mobile-menu > * {
    box-sizing: border-box;
    width: min(320px, 86vw);
    background: #fff;
  }
  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cv-line);
  }
  /* Scoped to three classes on purpose. A much older, pre-drawer version of
     this menu left behind `.mobile-menu a, .mobile-menu button { display:
     block; width: 100%; ... }` in 0cfadccd963c6d0ad.css -- still active,
     since it targets every anchor and button inside .mobile-menu, drawer or
     not. That rule's extra element selector outranks a single class, so it
     was the one deciding the wordmark's box: `width: 100%` stretched it
     across the whole row, leaving the close button nowhere to sit but
     outside the panel. Explicit display/width here, at higher specificity
     than the legacy rule, is what actually fixes that -- not a position
     tweak, since nothing here was ever positioned absolutely. */
  .mobile-menu .mobile-menu-head .mobile-menu-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The legacy rule's `padding: 12px` is a property this block did not use
       to set at all, so cascade never had a conflict to resolve in the
       higher-specificity rule's favour -- it kept applying regardless, on
       top of the line-height, and puffed the row out by 24px. Explicit 0
       here, the same way .mobile-menu-close already declares its own. */
    padding: 0;
    font-size: 1.34rem;
    font-weight: 900;
    color: var(--cv-brand);
    text-decoration: none;
  }
  /* The same legacy `.mobile-menu a:hover { background: #e8f4ef; ... }` also
     matches the wordmark, since it targets any anchor inside .mobile-menu.
     List items are already safe from it -- they have their own
     `.mobile-menu-list a:hover` rule -- but the wordmark is not in that list,
     so a mouse or trackpad left resting where the hamburger icon was tapped
     (which now sits under the wordmark once the drawer opens) painted a
     leftover pale-green pill behind it. */
  .mobile-menu .mobile-menu-head .mobile-menu-brand:hover,
  .mobile-menu .mobile-menu-head .mobile-menu-brand:focus-visible {
    background: none;
    color: var(--cv-brand);
  }
  .mobile-menu .mobile-menu-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--cv-line);
    border-radius: 13px;
    background: #fff;
    color: var(--cv-muted);
    cursor: pointer;
  }
  .mobile-menu .mobile-menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
  .mobile-menu .mobile-menu-close:hover,
  .mobile-menu .mobile-menu-close:focus-visible { border-color: var(--cv-brand); color: var(--cv-brand); }

  /* Fills whatever the wordmark row leaves. A percentage height collapsed to
     nothing here; letting flex do it needs no arithmetic and holds at any
     drawer height. `min-height: 0` is what allows it to scroll rather than
     grow past the screen. */
  .mobile-menu .mobile-menu-list {
    display: grid;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    gap: 2px;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu .mobile-menu-list a,
  .mobile-menu .mobile-menu-list .logout-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    background: none;
    color: var(--cv-ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-menu-list a + a { border-top: 1px solid color-mix(in srgb, var(--cv-line) 55%, transparent); border-radius: 13px; }
  .mobile-menu-list a:hover,
  .mobile-menu-list a:focus-visible,
  .mobile-menu-list .logout-button:hover,
  .mobile-menu-list .logout-button:focus-visible { background: var(--cv-soft); color: var(--cv-brand); }
  .mobile-menu-list a[aria-current="page"] { background: var(--cv-soft); color: var(--cv-brand); font-weight: 800; }
  .mobile-menu-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Leaving is not the same kind of action as going somewhere. */
  .mobile-menu .mobile-menu-list .logout-button { margin-top: 6px; border-top: 1px solid var(--cv-line); border-radius: 0 0 13px 13px; color: var(--cv-danger, #b3261e); }
  .mobile-menu-list .logout-button:hover { background: color-mix(in srgb, var(--cv-danger, #b3261e) 8%, #fff); color: var(--cv-danger, #b3261e); }

  /* The page behind a drawer does not scroll. */
  body.has-open-menu { overflow: hidden; }
}

/* ==========================================================================
   Category navigation — the header dropdown and the drawer popup.

   One set of row styles (.cat-*) is shared by both, because both render the
   same markup from the same function; only the frame around them differs.
   ========================================================================== */

/* ---- shared rows --------------------------------------------------------- */
.cat-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cat-node { margin: 0; }
.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--cv-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.cat-row:hover,
.cat-row:focus-visible { background: var(--cv-soft); color: var(--cv-brand); }
.cat-row-title { min-width: 0; overflow-wrap: anywhere; }
.cat-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
/* At rest the "∨" points straight down. Hovering an expandable row -- or
   opening it -- turns it exactly 90° clockwise, so it ends up pointing left,
   on the same line as its label (the row is a centred flex box). The tap-only
   drawer opener uses its aria-expanded state for the same effect. */
.cat-row--branch:hover .cat-chevron,
.cat-row--branch:focus-visible .cat-chevron,
.cat-node.is-open > .cat-row .cat-chevron,
.nav-cat-root:hover .cat-chevron,
.nav-cat-root:focus-visible .cat-chevron,
.nav-cat-root.is-active .cat-chevron,
[data-open-categories]:hover .cat-chevron,
[data-open-categories][aria-expanded="true"] .cat-chevron { transform: rotate(90deg); }
.cat-children {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid color-mix(in srgb, var(--cv-brand) 22%, transparent);
}
.cat-row--all { min-height: 38px; color: var(--cv-brand); font-size: .82rem; font-weight: 800; }
.cat-empty { margin: 0; padding: 18px 14px; color: var(--cv-muted, #65756d); font-size: .86rem; text-align: center; }

/* ---- desktop header dropdown -------------------------------------------- */
.nav-cat { position: relative; display: flex; align-items: center; }
.nav-cat-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 2px;
  border: 0;
  background: none;
  /* A <button> does not inherit font the way the sibling <a> links do -- the
     user agent's 16px / 400 was leaking through `font: inherit` at this rule's
     specificity, which read as a different typeface and pushed the label a
     shade below the baseline of "خانه" and "محصولات". Pin it to exactly what
     `.nav .links a` resolves to. */
  color: #34453f;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.75;
  cursor: pointer;
}
.nav-cat-trigger:hover,
.nav-cat[data-nav-categories].is-open .nav-cat-trigger { color: var(--cv-brand); }
.nav-cat-caret {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
/* The panel opens on hover, so the caret follows the pointer: a smooth 90°
   clockwise turn from "∨" to a left-pointing chevron, level with the label. */
.nav-cat-trigger:hover .nav-cat-caret,
.nav-cat.is-open .nav-cat-caret { transform: rotate(90deg); }

.nav-cat-panel {
  position: absolute;
  z-index: 12000;
  inset-block-start: calc(100% + 10px);
  /* Anchored to the trigger's own inline-start edge and grown towards the
     inline end. Centring it on the trigger pushed a 720px panel straight off
     the right edge of the viewport in this right-to-left layout, which clipped
     the roots column. */
  inset-inline-start: 0;
  display: none;
  grid-template-columns: minmax(190px, 240px) minmax(260px, 1fr);
  width: min(720px, calc(100vw - 48px));
  max-height: min(70vh, 520px);
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--cv-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(9, 42, 33, .16);
}
.nav-cat.is-open .nav-cat-panel { display: grid; }
/* A small bridge across the gap, so the pointer travelling from the trigger to
   the panel never leaves the menu and closes it on the way. */
.nav-cat-panel::before { content: ''; position: absolute; inset-block-end: 100%; inset-inline: 0; height: 12px; }
.nav-cat-roots {
  margin: 0;
  padding: 0 6px 0 0;
  overflow-y: auto;
  border-inline-end: 1px solid var(--cv-line);
  list-style: none;
}
.nav-cat-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--cv-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.nav-cat-root:hover,
.nav-cat-root:focus-visible,
.nav-cat-root.is-active { background: var(--cv-soft); color: var(--cv-brand); }
.nav-cat-branch { min-width: 0; padding-inline-start: 10px; overflow-y: auto; }
.nav-cat-flat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.cat-list--desktop .cat-children { padding-inline-start: 10px; }

/* ---- the drawer popup ---------------------------------------------------- */
.cat-popup {
  position: absolute;
  z-index: 5;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  background: #fff;
}
.cat-popup-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cv-line);
}
.cat-popup-head b { font-size: 1.02rem; font-weight: 800; }
.cat-popup-close {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cv-line);
  border-radius: 12px;
  background: #fff;
  color: var(--cv-ink);
  cursor: pointer;
}
.cat-popup-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cat-popup-close:hover { background: var(--cv-soft); color: var(--cv-brand); }
/* The list scrolls, the header does not, so the close control stays reachable
   however deep the tree gets. */
.cat-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The popup is mounted inside #mobileMenu, where the pre-drawer legacy rule
   `.mobile-menu a, .mobile-menu button { display: block; width: 100%;
   padding: 12px; text-align: right; font: inherit }` (one class + one type)
   still matches every row and outranks the single-class `.cat-row`. Two
   classes here restore the shared row: a centred flex box, the site's own
   14.4px / 650-ish text rather than the user agent's 16px / 400, and the
   chevron back on the label's line instead of wrapped beneath it. */
.cat-popup .cat-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.75;
  text-align: start;
}
.cat-popup .cat-row--all { min-height: 38px; font-size: .82rem; font-weight: 800; }

/* ==========================================================================
   Drawer motion — the panel slides in from the inline-start edge (the right,
   in this right-to-left layout) and the hamburger morphs into an ×.

   The panel is not one element: .mobile-menu holds the head and the list as
   separate children, each already given the panel's width and background by
   the rules above. Transforming those children together slides the panel as
   one piece without restructuring markup the rest of the header depends on.
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-menu {
    background: rgba(9, 33, 26, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background .28s ease, backdrop-filter .28s ease;
  }
  .mobile-menu.is-open {
    background: rgba(9, 33, 26, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mobile-menu > * {
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }
  .mobile-menu.is-open > * { transform: translateX(0); }
}

/* The three bars become an ×: the outer two rotate onto each other and the
   middle one fades out, on the same clock as the drawer's slide. */
.mobile-menu-toggle span { transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .18s ease; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu > *,
  .mobile-menu-toggle span,
  .cat-chevron,
  .nav-cat-caret { transition: none; }
  .mobile-menu > * { transform: translateX(0); }
}

@media (max-width: 1024px) {
  /* Same box as the drawer's other rows. Three classes on purpose: the legacy
     `.mobile-menu button { display: block; width: 100%; padding: 12px }` in
     0cfadccd963c6d0ad.css still matches this button and outranks a single
     class, exactly as it does the wordmark above. */
  .mobile-menu .mobile-menu-list .cat-open-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    background: none;
    color: var(--cv-ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
  }
  .mobile-menu .mobile-menu-list .cat-open-row:hover,
  .mobile-menu .mobile-menu-list .cat-open-row:focus-visible { background: var(--cv-soft); color: var(--cv-brand); }
  /* The row's own chevron sits at the far end, after the label. */
  .mobile-menu .mobile-menu-list .cat-open-row .cat-chevron { margin-inline-start: auto; }
}