/* ───── Design Override Layer (loads last) ───── */
/* Matches all pages against the DESIGN.md spec. */

/* ───── Base Overrides ───── */

html {
  background: var(--colors-canvas);
}

body {
  background: var(--colors-canvas);
  color: var(--colors-body);
  font-family: var(--font-body);
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  background: var(--colors-canvas);
}

.container {
  width: min(100% - 40px, var(--container));
}

code,
pre,
.code-block,
.cart-bundle-breakdown,
.range-meta,
.filter-heading-row span {
  font-family: var(--font-mono);
}

/* ───── Navigation Overrides ───── */

.top-nav {
  height: var(--nav-height);
  background: var(--colors-canvas);
  border-bottom: 1px solid var(--colors-hairline);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand-mark {
  color: var(--colors-primary);
  font-weight: 500;
}

.brand-logo-nav {
  height: 32px;
}

.nav-menu {
  gap: 24px;
}

.nav-menu a {
  color: var(--colors-ink);
  opacity: 0.62;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  opacity: 1;
}

.promo-banner {
  background: var(--colors-ink);
  color: var(--colors-canvas);
  letter-spacing: 0.88px;
}

/* ───── Unified Button Styling ───── */

.button-primary,
.button-secondary,
.button-text-link,
.filter-toggle-button,
.reset-button,
.place-order-button,
.checkout-button,
.confirm-order-button,
.continue-button,
.product-detail-add-to-cart,
.submit-button,
.auth-submit,
.admin-action-button,
.admin-menu-toggle,
.login-panel button,
.track-form button,
.contact-form button,
.w4l-alert-btn {
  border-radius: var(--rounded-md);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.button-primary,
.place-order-button,
.checkout-button,
.confirm-order-button,
.product-detail-add-to-cart,
.submit-button,
.auth-submit,
.login-panel button[type="submit"],
.track-form button[type="submit"],
.contact-form button[type="submit"],
.w4l-alert-btn-confirm {
  border: 1px solid var(--colors-primary);
  background: var(--colors-primary);
  color: var(--colors-on-primary);
}

.button-primary:hover,
.place-order-button:hover,
.checkout-button:hover,
.confirm-order-button:hover,
.product-detail-add-to-cart:hover,
.submit-button:hover,
.auth-submit:hover,
.login-panel button[type="submit"]:hover,
.track-form button[type="submit"]:hover,
.contact-form button[type="submit"]:hover,
.w4l-alert-btn-confirm:hover {
  border-color: var(--colors-primary-active);
  background: var(--colors-primary-active);
}

.button-secondary,
.continue-button,
.w4l-alert-btn-cancel {
  border: 1px solid var(--colors-hairline-strong);
  background: var(--colors-surface-card);
  color: var(--colors-ink);
}

.nav-icon-button,
.menu-toggle,
.lang-toggle,
.filter-close-button,
.toast-action,
.toast-close,
.icon-action,
.asset-viewer-close,
.asset-viewer-prev,
.asset-viewer-next {
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-md);
  background: var(--colors-surface-card);
  color: var(--colors-ink);
  box-shadow: none;
}

.account-nav-button {
  color: var(--colors-semantic-error);
}

.account-nav-button[data-logged-in] {
  color: var(--colors-semantic-success);
}

.account-nav-button:hover {
  color: var(--colors-canvas);
}

.nav-actions .cart-nav-button {
  border: 0;
  background: transparent;
  color: var(--colors-ink);
}

/* ───── Badge-like Elements ───── */

.badge-pill,
.mono-eyebrow,
.product-detail-brand,
.cart-item-copy > span,
.filter-group h2,
.footer h2 {
  background: var(--colors-surface-strong);
  color: var(--colors-ink);
  border-radius: var(--rounded-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  line-height: 1.4;
  padding: 4px 10px;
  text-transform: uppercase;
  width: fit-content;
}

.cart-item-copy > span,
.footer h2 {
  background: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--colors-muted);
}

/* ───── Heading Typography ───── */

.hero-copy h1,
.section-heading h2,
.shop-toolbar h2,
.cart-hero h1,
.cart-panel-heading h2,
.checkout-hero h1,
.checkout-card-heading h2,
.product-detail-name,
.product-detail-not-found h2,
.cta-panel h2,
.empty-state h2,
.admin-header h1,
.panel-toolbar h2,
.page-hero h1,
.confirmation-hero h1,
.account-header h1,
.account-login-card h1,
.account-orders-section h2,
.account-details-section h2 {
  color: var(--colors-ink);
  font-family: var(--font-display);
  font-weight: 400;
}

.hero-copy h1 {
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: -1.68px;
  line-height: 1.12;
}

.section-heading h2,
.cta-panel h2,
.shop-toolbar h2,
.cart-panel-heading h2,
.checkout-card-heading h2,
.summary-heading h2,
.panel-toolbar h2 {
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.72px;
  line-height: 1.2;
}

.cart-hero h1,
.checkout-hero h1,
.product-detail-name,
.page-hero h1,
.confirmation-hero h1,
.account-header h1,
.account-login-card h1 {
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: -1.68px;
  line-height: 1.12;
}

p,
li,
dd,
dt {
  color: var(--colors-body);
}

.page-hero p,
.cart-hero p,
.checkout-hero p,
.confirmation-hero p,
.hero-copy > p {
  color: var(--colors-body);
  font-size: 16px;
  line-height: 1.5;
}

/* ───── Section & Layout Overrides ───── */

.shop-section,
.cart-section,
.checkout-section {
  padding-block: var(--spacing-section);
}

.hero-band,
.cart-hero,
.checkout-hero,
.page-hero,
.confirmation-hero,
.account-page {
  background: var(--colors-canvas);
  border-bottom: 1px solid var(--colors-hairline);
}

.arrivals-section,
.testimonials-section,
.checkout-option,
.cod-panel,
.shipping-notice,
.empty-state,
.filter-panel-head,
.filter-actions {
  background: var(--colors-canvas-soft);
}

.page-hero {
  padding-top: calc(var(--nav-height) + 84px);
  padding-bottom: 84px;
}

/* ───── Card Styling ───── */

.product-mockup-card,
.product-skeleton,
.testimonial-card,
.cta-section {
  background: var(--colors-canvas);
}

.cta-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 64px 32px;
  text-align: center;
}

.cta-panel h2 {
  margin: 0;
}

.cta-panel p {
  margin: 0;
  max-width: 480px;
  color: var(--colors-body);
  font-size: 16px;
  line-height: 26px;
}

.cta-panel,
.shop-sidebar,
.cart-hero-note,
.cart-item,
.summary-card,
.checkout-card,
.shipping-estimate,
.product-detail-info,
.product-gallery-main,
.product-gallery-thumbs,
.product-assets-panel,
.product-detail-not-found,
.cart-empty,
.cart-toast,
.tab-stat-card,
.settings-card,
.login-panel,
.about-stat-card,
.account-login-card,
.account-points-card,
.order-card,
.account-order-meta-card,
.track-form-card,
.track-items-card,
.track-not-found,
.track-points,
.contact-card,
.faq-item,
.returns-summary-card,
.returns-faq-item,
.returns-contact-card,
.guide-card,
.review-panel,
.review-card,
.confirm-summary-card,
.feature-card {
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-lg);
  background: var(--colors-surface-card);
  box-shadow: none;
}

.account-login-card,
.track-form-card {
  padding: 32px;
}

.cart-hero-note,
.about-stat-card,
.contact-card,
.returns-summary-card,
.returns-contact-card,
.guide-card,
.review-card {
  padding: 24px;
}

.product-mockup-card,
.product-skeleton,
.cart-item,
.summary-card,
.checkout-card,
.testimonial-card,
.cta-panel {
  overflow: hidden;
}

.product-mockup-card:hover,
.cart-item:hover,
.checkout-option:hover,
.brand-filter:hover,
.filter-chip:hover {
  border-color: var(--colors-hairline-strong);
  background: var(--colors-surface-card);
  color: var(--colors-ink);
}

/* ───── Image Backgrounds ───── */

.product-image,
.skeleton-image,
.product-gallery-main,
.product-gallery-thumbs,
.product-detail-gallery img,
.summary-items img,
.cart-item img,
.cart-toast img {
  background: var(--colors-canvas-soft);
}

/* ───── Form Inputs ───── */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.search-field,
.sort-field,
.filter-dropdown-toggle,
.quantity-stepper,
.price-range-track {
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-md);
  background: var(--colors-surface-card);
  color: var(--colors-ink);
  box-shadow: none;
}

.search-field input,
.sort-field select,
.price-range,
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--colors-primary);
}

/* ───── Filter Chips Active ───── */

.filter-chip.is-active,
.brand-filter.is-active,
.category-tab-active {
  border-color: var(--colors-primary);
  background: var(--colors-primary);
  color: var(--colors-on-primary);
}

/* ───── Price Range ───── */

.price-range-track span,
.shipping-progress-fill {
  background: var(--colors-primary);
}

/* ───── Preorder ───── */

.preorder-badge,
.preorder-notice,
.preorder-notice-inline {
  border: 1px solid;
  border-color: color-mix(in srgb, var(--colors-semantic-preorder) 22%, var(--colors-hairline));
  background: var(--surface-preorder);
  color: var(--colors-semantic-preorder);
}

.preorder-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--rounded-md);
}

.preorder-notice[hidden] {
  display: none;
}

.preorder-notice > svg,
.preorder-notice > i {
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  color: var(--colors-preorder);
}

.preorder-notice strong {
  display: block;
  margin-bottom: 4px;
  color: var(--colors-preorder);
  font-size: 14px;
}

.preorder-notice p {
  margin: 0;
  color: var(--colors-body);
  font-size: 13px;
  line-height: 20px;
}

.checkout-steps {
  display: flex;
  gap: 18px;
  color: var(--colors-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.checkout-steps span[aria-current="step"] {
  color: var(--colors-ink);
}

@media (max-width: 767px) {
  .checkout-steps {
    flex-wrap: wrap;
  }
}

/* ───── Rating Stars ───── */

.rating-stars {
  color: var(--colors-ink);
  letter-spacing: 0.08px;
}

/* ───── Brand Slider ───── */

.brand-slider::before,
.brand-slider::after,
.scroll-carousel::after {
  display: none;
}

.brand-slider,
.brands-section,
.bestsellers,
.arrivals-section,
.bundles-section,
.testimonials-section,
.footer {
  border-color: var(--colors-hairline);
}

.brand-logo img {
  filter: grayscale(1) brightness(0);
  opacity: 0.72;
}

/* ───── Footer ───── */

.footer {
  background: var(--colors-canvas);
  border-top: 1px solid var(--colors-hairline);
}

.footer a:not(.brand-mark) {
  color: var(--colors-body);
}

/* ───── Semantic Colors ───── */

.low-stock-warning,
.product-price-save,
.field-error,
.gift-remove-btn {
  color: var(--colors-semantic-error);
}

.shipping-progress-text.is-achieved {
  color: var(--colors-semantic-success);
}

.shipping-progress-fill.is-achieved {
  background: var(--colors-semantic-success);
}

/* ───── Backdrops ───── */

.filter-backdrop,
.w4l-alert-overlay,
.product-assets-backdrop,
.asset-viewer-backdrop {
  background: rgba(38, 37, 30, 0.38);
  backdrop-filter: none;
}

/* ───── Analytics KPI ───── */

.analytics-kpi-views { background: var(--surface-info); color: var(--colors-semantic-info); }
.analytics-kpi-order { background: var(--surface-error); color: var(--colors-semantic-error); }
.analytics-kpi-revenue { background: var(--surface-success); color: var(--colors-semantic-success); }
.analytics-kpi-conversion { background: var(--surface-warning); color: var(--colors-semantic-warning); }

/* ───── Product Detail ───── */

.product-detail-section {
  padding-top: calc(var(--nav-height) + var(--banner-height) + 32px);
  padding-bottom: var(--spacing-section);
}

.product-detail-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(28px, 5vw, 56px);
}

.product-detail-gallery {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  position: static;
  top: auto;
}

.product-detail-info {
  padding: 32px;
}

.product-gallery-main {
  border: 1px solid var(--colors-hairline);
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: none;
  min-height: 0;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: var(--rounded-lg);
}

.product-gallery-main > img,
.product-gallery-main .gallery-placeholder {
  width: 100%;
  height: 100%;
}

.product-gallery-main > img {
  padding: clamp(16px, 3vw, 28px);
  object-fit: contain;
  object-position: center;
}

.product-gallery-main.has-picker {
  display: block;
  aspect-ratio: auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  border-radius: var(--rounded-lg);
}

.product-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  overflow: visible;
  max-width: 100%;
  border-radius: var(--rounded-lg);
}

.product-gallery-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-sm);
  background: var(--colors-surface-card);
}

.product-gallery-thumb.is-active {
  border-color: var(--colors-ink);
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail-price strong,
#pd-price,
#bd-price {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.6px;
}

.product-detail-price {
  align-items: baseline;
  gap: 10px;
}

.product-detail-price .discount-badge,
#pd-discount,
#bd-savings {
  position: static;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  align-self: center;
  padding: 4px 10px;
  border: none;
  border-radius: var(--rounded-xs);
  background: #c62828 !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.product-price-current.is-discounted,
.product-mockup-card[data-discounted="true"] .product-price-wrap strong,
#pd-price.is-discounted,
.product-detail-price.is-discounted strong,
.product-price-save,
#bd-savings {
  color: var(--colors-price-discount);
}

.product-price-current.is-bundle-price,
.product-mockup-card[data-bundle-id] .product-price-wrap strong,
#bd-price,
.bundle-card-price {
  color: var(--colors-price-bundle);
}

.product-price-original,
#pd-original-price,
#bd-original-price {
  color: var(--colors-muted);
  font-size: 11px;
  font-weight: 400;
  text-decoration: line-through;
}

.color-swatch,
.cart-color-dot,
.cart-toast-color::before,
.product-detail-swatch-dot,
.bundle-detail-swatches .variant-option::before,
.guide-swatch::before {
  border-color: var(--colors-hairline-strong);
}

/* ───── Skeleton ───── */

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ───── Bundle Detail ───── */

.bundle-detail-preview {
  overflow: hidden;
}

.bundle-detail-preview > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(520px, 58vh);
  padding: clamp(12px, 2.5vw, 22px);
  object-fit: contain;
  object-position: center;
  background: var(--colors-canvas-soft);
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-lg);
}

.cart-item-image-wrap {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rounded-sm);
  background: var(--colors-canvas-soft);
  contain: paint;
}

.cart-item .bundle-image-carousel {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rounded-sm);
  background: var(--colors-canvas-soft);
  contain: paint;
}

.cart-item .bundle-image-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  object-position: center;
  transition: transform 300ms ease, opacity 300ms ease;
}

.cart-item .bundle-image-carousel img:not(.is-active) {
  transform: translateX(100%);
  opacity: 0;
}

.cart-item .bundle-image-carousel img.is-active {
  transform: translateX(0);
  opacity: 1;
}

.cart-item-image-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  object-position: center;
}

.bundle-detail-preview-thumbs {
  padding: 10px;
  margin-top: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  background: var(--colors-surface-card);
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-lg);
}

.bundle-product-item.is-selected,
.bundle-detail-swatches .variant-option.is-selected {
  border-color: var(--colors-hairline-strong);
  outline: 1px solid var(--colors-hairline-strong);
  background: var(--colors-surface-card);
}

/* ───── Cart ───── */

.cart-gift-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--colors-hairline);
  border-radius: var(--rounded-md);
  background: var(--colors-surface-card);
  color: var(--colors-muted);
}

.cart-gift-toggle svg,
.cart-gift-toggle [data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.cart-gift-toggle:hover {
  border-color: var(--colors-hairline-strong);
  color: var(--colors-ink);
}

.cart-gift-toggle.is-active {
  border-color: color-mix(in srgb, var(--colors-semantic-warning) 32%, var(--colors-hairline));
  background: var(--surface-warning);
  color: var(--colors-semantic-warning);
}

/* ───── Asset Button ───── */

.product-detail-assets-btn {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--colors-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ───── Tracking / Account ───── */

.bundle-picker-count.is-complete,
.track-step.is-done .track-step-label,
.track-step.is-current .track-step-label {
  color: var(--colors-semantic-success);
}

.track-step.is-done::before,
.track-step.is-done .track-step-dot,
.track-step.is-current .track-step-dot {
  border-color: var(--colors-semantic-success);
  background: var(--colors-semantic-success);
  color: var(--colors-on-primary);
}

.account-points-balance {
  border-color: color-mix(in srgb, var(--colors-semantic-warning) 34%, var(--colors-hairline));
  background: var(--surface-warning);
  color: var(--colors-semantic-warning);
}

.account-points-balance .account-points-label,
.account-points-balance .account-points-value {
  color: var(--colors-semantic-warning);
}

/* ───── Semantic Surface Badges ───── */

.contact-icon-whatsapp,
.coupon-active-badge,
.guide-coupon-demo {
  border: 1px solid color-mix(in srgb, var(--colors-semantic-success) 22%, var(--colors-hairline));
  background: var(--surface-success);
  color: var(--colors-semantic-success);
}

.other-area-notice,
.points-earn-msg [data-lucide],
.summary-points-earn [data-lucide] {
  color: var(--colors-semantic-warning);
}

.other-area-notice {
  border: 1px solid color-mix(in srgb, var(--colors-semantic-warning) 26%, var(--colors-hairline));
  background: var(--surface-warning);
}

.guide-info-icon-preorder,
.preorder-priority-explanation,
.payment-plan-summary div {
  border: 1px solid color-mix(in srgb, var(--colors-semantic-info) 20%, var(--colors-hairline));
  background: var(--surface-info);
  color: var(--colors-semantic-info);
}

.guide-badge-red {
  background: var(--surface-error);
  color: var(--colors-semantic-error);
}

.guide-badge-blue {
  background: var(--surface-info);
  color: var(--colors-semantic-info);
}

.guide-badge-dark {
  background: var(--colors-ink);
  color: var(--colors-canvas);
}

/* ───── Status Pills ───── */

.status-pill.pending,
.status-pill.low {
  background: var(--surface-warning);
  color: var(--colors-semantic-warning);
}

.status-pill.approved,
.status-pill.ok,
.status-pill.active,
.status-pill.delivered {
  background: var(--surface-success);
  color: var(--colors-semantic-success);
}

.status-pill.preorder,
.track-preorder-badge {
  background: var(--surface-preorder);
  color: var(--colors-semantic-preorder);
}

.status-pill.inactive {
  background: var(--colors-surface-strong);
  color: var(--colors-muted);
}

.discount-badge {
  background: var(--colors-semantic-error);
  color: var(--colors-on-primary);
}

.confirm-success-icon,
.confirm-success-icon svg,
.checkout-account-banner,
.account-details-status {
  color: var(--colors-semantic-success);
}

.checkout-account-banner {
  border-color: color-mix(in srgb, var(--colors-semantic-success) 22%, var(--colors-hairline));
  background: var(--surface-success);
}

/* ───── Admin ───── */

.admin-sidebar {
  width: 248px;
  gap: 14px;
  padding: 18px 14px;
  border-right: 1px solid var(--colors-hairline);
  background: var(--colors-surface-card);
  box-shadow: none;
}

.admin-sidebar .brand-mark {
  border-bottom-color: var(--colors-hairline);
  color: var(--colors-primary);
}

.admin-sidebar .brand-logo-nav {
  filter: none;
}

.admin-tab,
.logout-button {
  color: var(--colors-body);
}

.admin-tab:hover,
.logout-button:hover {
  background: var(--colors-canvas-soft);
  color: var(--colors-ink);
}

.admin-tab.is-active {
  border-color: var(--colors-hairline-strong);
  background: var(--colors-canvas-soft);
  color: var(--colors-ink);
}

.logout-button,
.admin-sidebar .logout-button {
  border-color: var(--colors-hairline);
}

.admin-shell {
  min-height: 100vh;
  background: var(--colors-canvas);
}

.admin-main {
  min-height: 100vh;
  margin-left: 248px;
  padding: 32px clamp(24px, 3vw, 40px) 80px;
}

.admin-menu-toggle {
  margin-bottom: 18px;
}

.admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto 24px;
}

.admin-header h1 {
  margin-top: 10px;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -1.1px;
  line-height: 1.08;
}

.admin-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-panel.is-active {
  max-width: 1480px;
  margin-inline: auto;
  gap: 18px;
}

.admin-row-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tab-stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
}

.tab-stat-card > div {
  min-width: 128px;
}

.tab-stat-card p {
  justify-content: flex-end;
}

.panel-toolbar {
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-block: 1px solid var(--colors-hairline);
}

.panel-toolbar > div:first-child {
  min-width: 0;
}

.toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.search-field {
  grid-template-columns: 16px minmax(180px, 280px);
  min-height: 42px;
  background: var(--colors-canvas-soft);
}

.select-field select,
.compact-action,
.order-tab {
  min-height: 42px;
}

.admin-row,
.order-card {
  padding: 14px 16px;
  border-radius: var(--rounded-lg);
}

.product-row-thumb,
.stock-group-thumb,
.order-line-img {
  object-fit: contain;
  background: var(--colors-canvas-soft);
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: var(--colors-hairline-strong);
}

/* ───── Responsive: Admin 1180px ───── */

@media (max-width: 1180px) {
  .admin-sidebar {
    width: min(280px, calc(100vw - 48px));
    border-right: 1px solid var(--colors-hairline);
  }

  .admin-main {
    margin-left: 0;
    padding: 22px 24px 72px;
  }

  .admin-header,
  .admin-panel.is-active {
    max-width: none;
  }
}

@media (max-width: 860px) {
  .panel-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-actions,
  .order-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .search-field {
    grid-template-columns: 16px minmax(0, 1fr);
    width: 100%;
  }

  .tab-stat-card {
    grid-template-columns: 1fr;
  }

  .tab-stat-card p {
    justify-content: flex-start;
  }
}

/* ───── Responsive: Admin 560px ───── */

@media (max-width: 560px) {
  .admin-main {
    padding: 16px 16px 64px;
  }

  .admin-row,
  .order-card {
    padding: 12px;
  }
}

/* ───── Responsive: Product Pages 767px ───── */

@media (max-width: 767px) {
  .top-nav {
    grid-template-columns: 1fr auto;
  }

  .nav-menu {
    background: var(--colors-canvas);
  }

  .button-primary,
  .button-secondary {
    min-height: 44px;
  }

  .checkout-button,
  .place-order-button,
  .confirm-order-button {
    border-radius: 0;
  }

  .product-detail-section {
    padding-top: calc(var(--nav-height) + var(--banner-height) + 20px);
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-gallery {
    position: static;
    max-height: none;
  }

  .product-gallery-main {
    aspect-ratio: 3 / 4;
    max-height: 72vh;
  }

  .product-gallery-main.has-picker {
    min-height: 0;
    max-height: none;
  }

  .product-detail-info {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --spacing-section: 72px;
  }

  .container {
    width: min(100% - 32px, var(--container));
  }
}