/* ═══════════════════════════════════════════════════════════════════════════
   STOREFRONT CSS — Commerce App
   All storefront styles consolidated. Colors via CSS variables (set by ThemeService).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-body-font);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--sf-heading-font); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.sf-btn-primary {
  background: var(--sf-primary);
  color: #fff;
  border: none;
}
.sf-btn-primary:hover {
  opacity: .9;
  color: #fff;
}
.sf-btn-secondary {
  background: var(--sf-beige);
  color: var(--sf-text);
  border: none;
}
.sf-btn-accent {
  background: var(--sf-accent);
  color: #fff;
  border: none;
}

/* ── Product Card ─────────────────────────────────────────────────────────── */
.sf-product-card {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  transition: box-shadow .15s;
  overflow: hidden;
}
.sf-product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.sf-product-card .card-img-top {
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--sf-beige);
}
.sf-product-card .card-img-placeholder {
  aspect-ratio: 1;
  background: var(--sf-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}
.sf-product-card .sf-product-sku { font-size: .75rem; color: var(--sf-secondary); }
.sf-product-card .sf-view-details { font-size: .8rem; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.sf-breadcrumb { font-size: .85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: #aaa; }

/* ── Price ─────────────────────────────────────────────────────────────────── */
.sf-price-main  { font-size: 1.4rem; font-weight: 700; }
.sf-price-msrp  { text-decoration: line-through; color: #aaa; font-size: .9rem; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.page-link { color: var(--sf-primary); }
.page-item.active .page-link {
  background: var(--sf-primary);
  border-color: var(--sf-primary);
  color: #fff;
}

/* ── Category Flyout Navigation ───────────────────────────────────────────── */
.sf-drop-menu .dropdown-item,
.sf-sub-menu .dropdown-item {
  font-size: .875rem;
  padding: .45rem 1rem;
  color: #333;
}
.sf-drop-menu .dropdown-item:hover,
.sf-sub-menu .dropdown-item:hover { background: var(--sf-beige); color: var(--sf-text); }
.sf-drop-menu .dropdown-divider { margin: .25rem 0; }

/* Desktop: hover-driven flyout */
@media (min-width: 992px) {
  .sf-hover-drop { position: relative; }
  .sf-hover-drop:hover > .sf-drop-menu { display: block; }
  .sf-drop-menu {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 240px; border: none; border-radius: 0 0 var(--sf-radius) var(--sf-radius);
    box-shadow: 0 8px 28px rgba(0,0,0,.18); margin-top: 0 !important;
    padding: .35rem 0; background: #fff; z-index: 1050;
  }
  .sf-has-sub { position: relative; }
  .sf-has-sub:hover > .sf-sub-menu { display: block; }
  .sf-sub-menu {
    display: none; position: absolute !important; left: 100%; top: 0;
    min-width: 210px; border: none; border-radius: var(--sf-radius);
    box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: .35rem 0;
    background: #fff; z-index: 1051;
  }
}

/* Mobile: accordion-style */
@media (max-width: 991.98px) {
  .sf-drop-menu, .sf-sub-menu {
    display: none; position: static !important;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0; margin: 0; background: transparent;
  }
  .sf-drop-menu.show, .sf-sub-menu.show { display: block; }
  .sf-drop-menu .dropdown-item,
  .sf-sub-menu .dropdown-item { color: rgba(255,255,255,.8); padding-left: 1.5rem; }
  .sf-sub-menu .dropdown-item { padding-left: 2.5rem; }
  .sf-drop-menu .dropdown-item:hover,
  .sf-sub-menu .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sf-drop-menu .dropdown-divider { border-color: rgba(255,255,255,.12); }
}

/* ── Cart Toast ───────────────────────────────────────────────────────────── */
.cart-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: var(--sf-primary); color: #fff;
  padding: .6rem 1.2rem; border-radius: 6px;
  font-size: .875rem; animation: sfFadeIn .2s;
  transition: opacity .3s;
}
.cart-toast-error { background: #dc3545; }
@keyframes sfFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Default Header / Footer ──────────────────────────────────────────────── */
.sf-default-header {
  background: var(--sf-primary);
  padding: .6rem 1rem;
}
.sf-default-header .navbar-brand,
.sf-default-header .nav-link,
.sf-default-header a { color: #fff; }
.sf-default-header .nav-link:hover { color: rgba(255,255,255,.8); }
.sf-default-header .sf-chevron-down { font-size: .55rem; opacity: .6; margin-left: 2px; }
.sf-default-header .sf-icon { font-size: 1.1rem; }
.sf-default-header .sf-toggler { font-size: 1.4rem; }

.sf-default-footer {
  background: var(--sf-primary);
  color: rgba(255,255,255,.75);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}
.sf-default-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.sf-default-footer a:hover { color: #fff; }
.sf-default-footer .sf-footer-heading {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  font-weight: 600;
  margin-bottom: .5rem;
}
.sf-default-footer .sf-footer-text { font-size: .875rem; }
.sf-default-footer hr { border-color: rgba(255,255,255,.12); }
.sf-default-footer .sf-copyright { font-size: .8rem; }

/* ── Cart Badge ───────────────────────────────────────────────────────────── */
.sf-cart-badge {
  background: var(--sf-accent);
  font-size: .6rem;
  transform: translate(-30%,-30%) !important;
}

/* ── Cart Drawer ──────────────────────────────────────────────────────────── */
.sf-drawer-header {
  background: var(--sf-primary);
  color: #fff;
  padding: .75rem 1rem;
}
.sf-drawer-count {
  background: var(--sf-accent);
  font-size: .65rem;
}
.sf-drawer-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sf-drawer-items {
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.sf-drawer-thumb {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sf-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-drawer-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.sf-drawer-thumb-icon { font-size: 1.2rem; color: #aaa; }
.sf-drawer-product-name {
  font-size: .82rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-drawer-meta { font-size: .75rem; }
.sf-drawer-line-total { font-size: .85rem; }
.sf-drawer-remove { font-size: .7rem; text-decoration: none; }
.sf-drawer-footer { background: #fff; }

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.sf-hero {
  background: linear-gradient(135deg, var(--sf-primary) 0%, #2c2c2c 100%);
  color: #fff;
  padding: 5rem 1rem;
  text-align: center;
}
.sf-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
.sf-hero p  { font-size: 1.15rem; color: rgba(255,255,255,.8); max-width: 560px; margin: 1rem auto 2rem; }
.sf-section-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; }

/* ── Category Card ────────────────────────────────────────────────────────── */
.sf-category-card {
  border-radius: 10px; overflow: hidden;
  background: var(--sf-beige);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem; text-align: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--sf-border);
  transition: box-shadow .15s, transform .15s;
  height: 100%;
}
.sf-category-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.sf-category-card i { font-size: 2.2rem; color: var(--sf-secondary); margin-bottom: .75rem; }
.sf-category-card .sf-cat-name { font-weight: 600; font-size: .95rem; }
.sf-category-card .sf-cat-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 6px; margin-bottom: .75rem;
}

/* ── Product Detail Page ──────────────────────────────────────────────────── */
.sf-img-gallery { display: flex; gap: .5rem; flex-direction: column; }
.sf-img-gallery img { border-radius: 6px; object-fit: cover; width: 100%; }
.sf-thumb-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.sf-thumb-row img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 4px;
  cursor: pointer; border: 2px solid transparent;
}
.sf-thumb-row img.active { border-color: var(--sf-primary); }
.sf-attr-badge {
  display: inline-block; background: #f3f4f6; border-radius: 4px;
  padding: .2rem .6rem; font-size: .75rem; color: #374151; margin: 2px;
}
.sf-tier-table th,
.sf-tier-table td { padding: .35rem .75rem; font-size: .85rem; }
.sf-main-image { border-radius: var(--sf-radius); }
.sf-image-placeholder {
  height: 360px; border-radius: var(--sf-radius);
  background: var(--sf-beige);
  display: flex; align-items: center; justify-content: center;
}
.sf-variant-btn {
  font-size: .85rem;
  min-width: 2.8rem;
  text-align: center;
}
.sf-variant-btn-active {
  background: var(--sf-primary);
  color: #fff;
}
/* Color swatches (variant axis "Color") */
.sf-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-block; cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--sf-border);
  transition: box-shadow .12s ease, transform .12s ease;
}
.sf-swatch:hover { transform: scale(1.06); }
.sf-swatch-active { box-shadow: 0 0 0 2px var(--sf-primary); }
.sf-description { font-size: .9rem; line-height: 1.65; }
.sf-qty-input { width: 100px; }
.sf-quote-badge {
  background: #f3f4f6;
  color: #374151;
}
.sf-out-of-stock-badge {
  background: #fee2e2; color: #991b1b;
  font-size: .85rem; padding: .4rem .9rem;
}

/* ── Catalog Filters ──────────────────────────────────────────────────────── */
.sf-filter-label {
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--sf-secondary); margin-bottom: .5rem;
}
.sf-filter-section {
  border-bottom: 1px solid var(--sf-border);
  padding-bottom: 1rem; margin-bottom: 1rem;
}
.sf-subcategory-pill {
  font-size: .8rem; padding: .3rem .75rem; border-radius: 20px;
  border: 1px solid var(--sf-border); text-decoration: none;
  color: #333; background: #fff; white-space: nowrap;
}
.sf-subcategory-pill:hover,
.sf-subcategory-pill.active { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-price-filter { width: 70px; }
.sf-sort-select { width: auto; }
.sf-scroll-container { max-height: 200px; overflow-y: auto; }

/* ── Cart Page ────────────────────────────────────────────────────────────── */
.sf-cart-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 6px; background: var(--sf-beige);
}
.sf-cart-img-placeholder {
  color: #aaa;
  background: var(--sf-beige);
  border-radius: 6px;
}
.sf-qty-input-sm { width: 72px; text-align: center; }
.sf-order-summary {
  background: var(--sf-beige);
  border-radius: 10px;
  padding: 1.5rem;
}
.sf-cart-count-badge {
  background: var(--sf-beige);
  color: var(--sf-text);
  font-size: .75rem;
}
.sf-quote-item-badge {
  background: #e0e7ff; color: #3730a3;
  font-size: .7rem;
}
.sf-tag-icon, .sf-chat-icon { font-size: .75rem; }
.sf-remove-btn { font-size: .8rem; }

/* ── Auth Pages ───────────────────────────────────────────────────────────── */
.sf-auth-body { background: var(--sf-beige); }
.sf-auth-card { max-width: 420px; margin: 0 auto; }
.sf-auth-card-wide { max-width: 480px; margin: 0 auto; }
.sf-auth-link { color: var(--sf-text); }

/* ── Account Pages ────────────────────────────────────────────────────────── */
.sf-account-nav .nav-link {
  color: var(--sf-secondary);
  border-radius: 6px;
  padding: .4rem .75rem;
  font-size: .875rem;
}
.sf-account-nav .nav-link.active,
.sf-account-nav .nav-link:hover { background: var(--sf-beige); color: var(--sf-text); }
.sf-signout-btn { font-size: .875rem; padding: .4rem .75rem; }
.sf-stat-card { background: var(--sf-beige); }
.sf-stat-number { font-size: 1.5rem; }

/* ── Order Cards & Status Badges ──────────────────────────────────────────── */
.sf-order-card { transition: box-shadow .2s; }
.sf-order-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.sf-status-badge {
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 12px;
  font-weight: 600;
}
.sf-status-badge-lg {
  font-size: .75rem;
  padding: .25rem .7rem;
  border-radius: 12px;
  font-weight: 600;
}
.sf-status-PENDING     { background: #fef3c7; color: #92400e; }
.sf-status-PROCESSING  { background: #dbeafe; color: #1e40af; }
.sf-status-SHIPPED     { background: #e0e7ff; color: #3730a3; }
.sf-status-DELIVERED   { background: #d1fae5; color: #065f46; }
.sf-status-COMPLETED   { background: #d1fae5; color: #065f46; }
.sf-status-CANCELLED        { background: #fee2e2; color: #991b1b; }
.sf-status-PENDING_APPROVAL { background: #fff7ed; color: #9a3412; }
.sf-status-REJECTED         { background: #fee2e2; color: #991b1b; }
.sf-status-QUOTE            { background: #f3e8ff; color: #6b21a8; }
.sf-status-REFUNDED         { background: #fce7f3; color: #9d174d; }

.sf-pay-UNPAID     { background: #fef3c7; color: #92400e; }
.sf-pay-PAID       { background: #d1fae5; color: #065f46; }
.sf-pay-AUTHORIZED { background: #dbeafe; color: #1e40af; }

/* ── Address Card ─────────────────────────────────────────────────────────── */
.sf-address-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; }
.sf-address-card.sf-is-default { border-color: var(--sf-primary); }
.sf-badge-billing  { background: #dbeafe; color: #1e40af; font-size: .65rem; }
.sf-badge-shipping { background: #d1fae5; color: #065f46; font-size: .65rem; }
.sf-badge-label    { background: #f3f4f6; color: #374151; font-size: .65rem; }

/* ── Checkout ─────────────────────────────────────────────────────────────── */
.sf-checkout-main { max-width: 960px; }
.sf-step-bar { display: flex; gap: 0; }
.sf-step-bar .sf-step {
  flex: 1; text-align: center; padding: .4rem .5rem;
  font-size: .75rem; background: var(--sf-beige);
  color: var(--sf-secondary); border-top: 3px solid #ddd;
}
.sf-step-bar .sf-step.active { background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-step-bar .sf-step.done   { background: #d1fae5; color: #065f46; border-color: #34d399; }
.sf-checkout-card { border-radius: 10px; border: 1px solid var(--sf-border); }
.sf-addr-field label { font-size: .8rem; font-weight: 600; }
.sf-otp-input {
  letter-spacing: .4em; font-size: 1.4rem; text-align: center;
  font-family: monospace; max-width: 200px;
}
.sf-otp-section { background: #f0f7ff; }
.sf-phone-group .sf-dial-select { width: 90px; flex: none; font-size: .85rem; }
.sf-login-panel {
  background: #f9f9f9; border-radius: 10px;
  border: 1px solid var(--sf-border); padding: 1.5rem;
  position: sticky; top: 1rem;
}
.sf-default-shipping-badge { background: #d1fae5; color: #065f46; font-size: .65rem; }
.sf-addr-card-clickable { cursor: pointer; }
.sf-payment-fields { display: none; background: #fafafa; }
.sf-cvv-toggle { font-size: .8rem; }

/* ── Checkout Review ──────────────────────────────────────────────────────── */
.sf-review-thumb {
  flex-shrink: 0; width: 56px; height: 56px;
  border-radius: 6px; overflow: hidden;
  background: var(--sf-beige);
  border: 1px solid var(--sf-border);
}
.sf-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-review-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #bbb;
}
.sf-review-thumb-icon { font-size: 1.2rem; }
.sf-review-price { flex-shrink: 0; }
.sf-review-address { line-height: 1.6; }
.sf-review-summary { background: #f9f6f0; }

/* ── Invoice / Confirm ────────────────────────────────────────────────────── */
.sf-confirm-main { max-width: 780px; }
.sf-invoice-card { border: 1px solid var(--sf-border); border-radius: 10px; }
.sf-invoice-header {
  background: var(--sf-primary); color: #fff;
  border-radius: 9px 9px 0 0; padding: 1.5rem 2rem;
}
.sf-invoice-label {
  font-size: .7rem; letter-spacing: .05em;
  text-transform: uppercase; opacity: .7;
}
.sf-invoice-status { background: rgba(255,255,255,.2); font-size: .85rem; padding: .35rem .8rem; }
.sf-invoice-table-head {
  background: var(--sf-beige);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-invoice-totals { max-width: 280px; }
.sf-payment-status-badge { font-size: .7rem; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.sf-icon-lg { font-size: 2.5rem; }
.sf-icon-xl { font-size: 3rem; }
.sf-icon-md { font-size: 1.4rem; }
.sf-icon-sm { font-size: .75rem; }
.sf-muted-icon { color: #ccc; }
.sf-muted-icon-light { color: #aaa; }
.sf-text-sm { font-size: .85rem; }
.sf-text-xs { font-size: .75rem; }
.sf-text-xxs { font-size: .65rem; }
.sf-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* ── Impersonation Banner ─────────────────────────────────────────────────── */
.sf-impersonation-banner {
  background: #fff3cd;
  color: #664d03;
  font-size: 0.875rem;
  border-bottom: 2px solid #ffecb5;
  position: sticky;
  top: 0;
  z-index: 1060;
}
.sf-impersonation-banner a.btn { font-size: 0.8rem; }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .sf-invoice-card { border: none; }
  .sf-impersonation-banner { display: none !important; }
}