/* ELRA3Y sage identity. Load after the storefront/admin bundles. */
:root {
  --ink: #171b17;
  --muted: #657166;
  --paper: #f4f6f1;
  --white: #fffefb;
  --line: #d7e0d5;
  --accent: #315943;
  --accent-dark: #203d2f;
  --brand-sage: #9bb49c;
  --brand-sage-light: #e8efe7;
  --bs-primary: #315943;
  --bs-primary-rgb: 49, 89, 67;
  --bs-link-color: #315943;
  --bs-link-hover-color: #203d2f;
  accent-color: var(--accent);
}

body, .admin-body { background-color: var(--paper); color: var(--ink); }
::selection { background: #9bb49c; color: #101810; }
:is(.form-control, .form-select):focus {
  border-color: var(--brand-sage);
  box-shadow: 0 0 0 .2rem rgb(49 89 67 / 13%);
}
:is(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--brand-sage); box-shadow: 0 0 0 .2rem rgb(49 89 67 / 13%); }

/* Shared storefront surfaces and navigation. */
.site-header, .clean-header { background: #fffefb; border-color: var(--line); }
.announcement { background: var(--announcement-bg, #171b17); color: var(--announcement-color, #fffefb); }
.hero, .catalog-hero { background: #e8efe7; }
.hero-visual, .main-product-image { background-color: #d3dfd1; }
.orbit-two { border-color: rgb(49 89 67 / 11%); }
.brand-mark, .brand-shoe-mark, .cart-action b, .product-badge,
.curated-badge, .dynamic-showcase-badge, .branch-sold-badge {
  background: var(--accent); color: #fff;
}
.product-badge.is-discount, .dynamic-showcase-badge.is-discount {
  background: #ed2424; color: #fff;
}
.brand-r-mark, .invoice-brand .brand-r-mark {
  --brand-cut: #dcebdd;
  background: linear-gradient(145deg, #c3d5c1, #9bb49c 68%, #789b7d);
  color: #111b13;
}
.brand-r-mark {
  box-shadow: 0 10px 24px rgb(49 89 67 / 18%), inset 0 1px 0 rgb(255 255 255 / 30%);
}
.brand:hover .brand-r-mark {
  box-shadow: 0 14px 30px rgb(49 89 67 / 24%), inset 0 1px 0 rgb(255 255 255 / 35%);
}

/* Keep the article badge out of the product grid so gallery and details share one row. */
.product-page > .article-product-badge {
  position: absolute !important;
  inset-inline-start: clamp(12px, 2vw, 25px) !important;
  top: clamp(42px, 5vw, 76px) !important;
}
.product-page > .article-product-badge small { color: #dce6dc; }
.product-page > .article-product-badge strong { color: #fff; }
@media (max-width: 900px) {
  .product-page > .article-product-badge { top: 42px !important; }
}

/* The size-strip scrollbar should follow the sage palette. */
.unified-product-card .product-size-chips {
  scrollbar-color: #9bb49c #e8efe7;
}
.unified-product-card .product-size-chips::-webkit-scrollbar-track {
  background: #e8efe7;
}
.unified-product-card .product-size-chips::-webkit-scrollbar-thumb {
  background: #9bb49c;
}
.mobile-bottom-nav b { background: var(--accent); }
.pwa-install-icon { background-color: var(--accent); }
.primary-button, .pwa-install-action,
.mobile-drawer-install > i:first-child { background: var(--accent); color: #fff; }
.primary-button:hover, .pwa-install-action:hover { background: var(--accent-dark); color: #fff; }
.account-modal input:focus { box-shadow: 0 0 0 3px rgb(49 89 67 / 13%); }
.curated-home-heading .eyebrow, .dynamic-showcase-heading .eyebrow,
.curated-home-heading > a, .section-heading > a, .governorate-tools button, .shipping-zone-card-head > b,
.checkout-shipping-row strong, .favorite-form .wish-button:hover,
.settings-divider i, .category-stats i, .category-editor[open] summary,
.mobile-category-icon, .mobile-category-all:not(.is-active) .mobile-category-icon,
.mobile-drawer-utilities i, .cart-item-meta i, .mobile-drawer-install > i:last-child {
  color: var(--accent);
}
.settings-divider i, .tab-panel-heading > i { background: var(--brand-sage-light); color: var(--accent); }
.mobile-category-link.is-active::after, .mobile-category-link.is-active .mobile-category-icon,
.dynamic-showcase-heading button:hover, .cart-quantity-control button:hover:not(:disabled) {
  background: var(--accent); color: #fff;
}
.mobile-category-drawer { background-color: #f4f6f1; }
.mobile-category-parent.is-active .mobile-category-icon,
.mobile-category-view-all > span { background-color: var(--accent); color: #fff; }
.mobile-category-child > span { background-color: #e8efe7; color: var(--accent); }
.mobile-category-child:hover, .mobile-category-child.is-active {
  border-color: var(--accent); background-color: #f1f6ef; color: var(--accent-dark);
}
.checkout-payment-grid .payment-option:has(input:checked) > i:last-child {
  color: var(--accent);
}
.payment-option-card .payment-option-icon { background-color: #e8efe7; color: var(--accent); }
.homepage-enable input, .homepage-pick-card > input[type=checkbox] { accent-color: var(--accent); }
.homepage-pick-card:has(input[type=checkbox]:checked) { border-color: var(--accent); }
.compare-card-button.active i, .unified-product-card .compare-card-button.active i {
  color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important;
}
.footer-promises i, .footer-feature-link > i, .footer-install-app > i:first-child {
  background: rgb(155 180 156 / 19%); color: #b5d0b8 !important;
}
.footer-install-icon { background: rgb(155 180 156 / 19%); color: #b5d0b8 !important; }
.footer-contact > a i { color: #b5d0b8; }
.footer-grid .footer-feature-link:hover { border-color: rgb(155 180 156 / 55%); }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); }
.mobile-drawer-install:hover { border-color: var(--brand-sage); background: #f4f8f2; }
.content-page-hero { background: linear-gradient(135deg, #e8efe7, #fffefb); border-color: var(--line); }
.content-page-hero > span { background: var(--accent); }
.account-hero-card { background: linear-gradient(135deg, #fffefb, #f1f6ef); }
.account-identity-email, .account-info-card { background: #edf3eb; border-color: var(--line); }
.account-stat-card > span, .account-order-icon, .security-card-title > i,
.account-empty > i { background: #e8efe7; color: var(--accent); }

/* Admin: dark logo ink for the shell, sage for actions and active states. */
.admin-sidebar { background: #171b17; }
.order-edit-modal { --order-modal-accent: var(--accent); --order-modal-ink: var(--ink); }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: var(--accent); color: #fff; }
.admin-header p, .admin-stats span, .orders-page-hero > div > small,
.orders-search i, .offers-page-intro .admin-kicker, .offer-percent-input > b,
.inventory-source-search > i, .inventory-colors > i, .security-log-title > div > span,
.report-cards i, .report-row i, .mail-setup-steps i,
.customer-profile-copy > p, .order-edit-modal .modal-header small,
.quantity-offer-preview .preview-label, .quantity-offer-preview h3 b,
.product-category-picker input:checked + span i,
.order-edit-modal .order-editor-head-copy > small,
.order-editor-head-summary > span i {
  color: var(--accent);
}
.admin-stats article, .admin-table-panel { background: #fffefb; border-color: var(--line); }
.category-editor[open] summary, .customer-order-section[open] summary { color: var(--accent); }
.order-edit-trigger, .customer-profile-avatar, .order-number-icon,
.offer-card-heading > span, .coupon-code-block > i, .payment-method-icon.kashier-icon,
.inventory-product-mark, .order-card-identity > span,
.quantity-offer-preview .preview-icon {
  background: #e8efe7; color: var(--accent);
}
.mail-setup-steps b, .orders-summary article > i, .order-editor-title > div > i,
.security-log-title > div > span, .color-inline-edit-button:hover {
  background: var(--brand-sage-light); color: var(--accent);
}
.payment-method-options label input:checked + span, .product-category-picker input:focus-visible + span {
  border-color: var(--accent);
}
.security-log-scroll:focus-visible { outline-color: var(--accent); }
.order-editor-head-summary > strong em { color: var(--accent); }
.product-category-picker label span i, .quantity-offer-note i,
.inventory-article-code b { color: var(--accent); }
.inventory-article-code b { background: #e8efe7; border-color: #c4d5c5; }
.btn-primary { --bs-btn-bg: #315943; --bs-btn-border-color: #315943; --bs-btn-hover-bg: #203d2f; --bs-btn-hover-border-color: #203d2f; --bs-btn-active-bg: #203d2f; --bs-btn-active-border-color: #203d2f; }
.btn-outline-primary { --bs-btn-color: #315943; --bs-btn-border-color: #315943; --bs-btn-hover-bg: #315943; --bs-btn-hover-border-color: #315943; --bs-btn-active-bg: #203d2f; --bs-btn-active-border-color: #203d2f; }
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }

/* Destructive actions and validation stay red, never green. */
.cart-remove-button:hover, .cart-unavailable-action:hover {
  border-color: #c9412d; background: #fff0ec; color: #b93624;
}
.cart-inventory-alert > i, .cart-unavailable-action .branch-sold-badge {
  background: #c9412d; color: #fff;
}
.profile-logout-button:hover { background: #b93624; border-color: #b93624; color: #fff; }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; }

/* Admin sidebar: visible, keyboard-accessible toggle without changing the page layout. */
.admin-header-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-sidebar-toggle {
  display: inline-grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fffefb; color: var(--accent); cursor: pointer;
}
.admin-sidebar-toggle i { font-size: 23px; line-height: 1; }
.admin-sidebar-toggle:hover, .admin-sidebar-toggle:focus-visible {
  border-color: var(--accent); background: #e8efe7; outline: none;
}
.admin-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.admin-shell.sidebar-collapsed > .admin-sidebar { visibility: hidden; padding: 0; overflow: hidden; }
.admin-sidebar-backdrop { display: none; }
.admin-sidebar-open { overflow: hidden; }
@media (max-width: 980px) {
  .admin-shell, .admin-shell.sidebar-collapsed { display: block; }
  .admin-shell > .admin-sidebar {
    position: fixed; z-index: 1051; inset-block: 0; inset-inline-start: 0;
    width: min(280px, 84vw); padding: 22px 16px;
    overflow-y: auto; visibility: hidden;
    transform: translateX(105%); transition: transform .2s ease, visibility .2s;
    box-shadow: 0 20px 55px rgb(0 0 0 / 20%);
  }
  html[dir="ltr"] .admin-shell > .admin-sidebar { transform: translateX(-105%); }
  .admin-shell.sidebar-open > .admin-sidebar,
  .admin-shell.sidebar-collapsed.sidebar-open > .admin-sidebar {
    visibility: visible; transform: none; padding: 22px 16px;
  }
  .admin-shell .admin-sidebar .admin-brand { justify-content: flex-start; padding: 0 8px 24px; }
  .admin-shell .admin-sidebar .admin-brand > span:last-child,
  .admin-shell .admin-sidebar nav span { display: inline; }
  .admin-shell .admin-sidebar .back-store { display: block; }
  .admin-shell .admin-sidebar nav a { justify-content: flex-start; padding-inline: 14px; }
  .admin-shell.sidebar-open .admin-sidebar-backdrop {
    display: block; position: fixed; z-index: 1050; inset: 0;
    width: 100%; height: 100%; padding: 0; border: 0;
    background: rgb(0 0 0 / 46%); cursor: pointer;
  }
  .admin-header { gap: 10px; }
  .admin-header-title { gap: 9px; }
  .admin-sidebar-toggle { flex-basis: 42px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-shell > .admin-sidebar { transition: none; }
}