/*
 * Stroyoptorg / UI UX audit 2026-10-14 / phase 1 (brand, product grids).
 * Non-destructive CSS layer after V9/V10 and current storefront styles.
 * Brand pattern SVG, checkout arithmetic, search, and home-builder layout are
 * intentionally OUT OF SCOPE. White opaque product photography stays white.
 */
:root {
  --brand-blue: #012F91;
  --brand-blue-hover: #0B3F9A;
  --brand-navy: #0D2B5E;
  --brand-red: #EE0906;
  --brand-sky: #4799CF;
  --brand-ice: #E8F4FD;
  --brand-ice-strong: #C1E4FB;
  --accent-yellow: #FFC21A;
  --brand-gray: #F7FAFE;
  --link-blue: #012F91;
  --sf-audit-ink: #1D1D1F;
  --sf-audit-line: #E2EAF3;
}
.store-front {
  --sf-radius: 12px;
  --sf-audit-button-radius: 10px;
  color: var(--sf-audit-ink);
}
/* Brand header and navigation. Never repaint a real logo. */
.store-front .sf-topbar,
.store-home .sf-topbar { background: var(--brand-navy); }
.store-front .sf-catalog-button,
.store-front .sf-menu-button,
.store-home .sf-catalog-button {
  background: var(--brand-blue);
  color: #fff;
  border-radius: var(--sf-audit-button-radius);
}
.store-front .sf-catalog-button:hover,
.store-front .sf-menu-button:hover,
.store-home .sf-catalog-button:hover { background: var(--brand-blue-hover); color:#fff; }
.store-front .sf-search button,
.store-front .sf-button-red {
  background: var(--brand-red);
  border-radius: var(--sf-audit-button-radius);
  color: #fff;
}
.store-front .sf-nav a,
.store-front .sf-actions>a,
.store-front .sf-text-link,
.store-front .sf-panel-all,
.store-front .sf-drawer-links a { color: var(--brand-blue); }
.store-front :focus-visible { outline-color: var(--brand-sky); }
.store-front .sf-search:focus-within { border-color: var(--brand-sky); box-shadow: 0 0 0 3px rgba(71,153,207,.12); }
.store-front .sf-action-icon b { background: var(--brand-red); }
.store-front .sf-bottom-nav>a.is-active { color: var(--brand-blue); }

/* Preserve the selected editorial design, only bring its actions into brand. */
.store-home {
  --sf-home-ink: #182943;
  --sf-home-muted: #68798D;
  --sf-home-line: #DCE8F3;
  --sf-home-card: var(--brand-ice);
}
.store-home .sf-section h2 { color: var(--brand-navy); font-weight: 800; }
.store-home .sf-text-link { color: var(--brand-blue); }
.store-home .sf-section .sf-product .sf-buy,
.store-home .sf-section .sf-product .sf-buy:not(:disabled) {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  border-radius: var(--sf-audit-button-radius);
}
.store-home .sf-section .sf-product .sf-buy:hover:not(:disabled) {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}
.store-front .sf-buy:not(:disabled),
.store-front .sf-button-dark,
.store-front .sf-drawer-catalog,
.store-front .btn-blue,
.store-front .btn-apply-filter {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color:#fff;
  border-radius: var(--sf-audit-button-radius);
}
.store-front .sf-buy:hover:not(:disabled),
.store-front .sf-button-dark:hover,
.store-front .btn-blue:hover,
.store-front .btn-apply-filter:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  color:#fff;
}
.store-front .sf-discount,
.store-front .badge-discount { background: var(--brand-red); color:#fff; border-radius: 6px; }
.store-front .badge-hit { background: var(--accent-yellow); color:#162746; border-radius:6px; }

/* Category surface: only the backdrop changes. Do not crop category PNG images. */
.store-home .sf-home-category,
.store-home .sf-home-tile { background-color: var(--brand-ice); }
.store-home .sf-home-category:hover { background-color: #DDEFFA; border-color: var(--brand-ice-strong); }
.store-front .sf-category { background-color: var(--brand-ice); }
.store-front .sf-category img,
.store-home .sf-home-category > img { object-fit: contain; }

/* Product photography must remain on plain white, not on soft-blue surfaces. */
.store-front .sf-product,
.store-front .product-card { background:#fff; border-color:var(--sf-audit-line); border-radius:12px; }
.store-front .sf-product-picture,
.store-front .sf-product-picture > a,
.store-front .sf-product-picture img,
.store-front .product-image-link,
.store-front .product-image { background:#fff; }
.store-front .sf-product-picture img,
.store-front .product-image { object-fit:contain; object-position:center center; mix-blend-mode:normal; }
.store-front .sf-product:hover,
.store-front .product-card:hover { border-color:#BDD7ED; box-shadow:0 10px 28px rgba(13,43,94,.075); }
.store-front .sf-old-price:empty { display:none; }
.store-front .product-rating-empty { display:none; }
.store-front .sf-price b,
.store-front .product-card .price-current { color:var(--brand-navy); font-variant-numeric:tabular-nums; }
.store-front .sf-stock-available { color:#19714C; }
.store-front .product-card .product-title { color:var(--sf-audit-ink); }
.store-front .product-card .price-old { color:#8A94A2; }
.store-front .product-cart-control .btn-add-cart {
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#fff;
  border-radius:var(--sf-audit-button-radius);
}
.store-front .product-cart-control .btn-add-cart:hover:not(:disabled) {
  background:var(--brand-blue-hover);
  border-color:var(--brand-blue-hover);
  color:#fff;
}
.store-front .product-cart-control .btn-add-cart:disabled { background:#F0F3F7; border-color:#E0E7F0; color:#7B8596; }
.store-front .catalog-filter-mobile-button,
.store-front .catalog-sort-control { border-radius:10px; }
.store-front .catalog-filter-mobile-button b { background:var(--brand-blue); }

/* Sales/promo visual system using existing admin-managed campaigns. */
.store-home .vd-kicker,
.store-home .st-campaigns-kicker { color:var(--brand-red); }
.store-home .vd-tier { background:var(--brand-ice); border-color:#D5E9F8; border-radius:12px; }
.store-home .vd-tier-percent { color:var(--brand-navy); }
.store-home .vd-tier-maximum { background:var(--brand-red); border-color:var(--brand-red); }
.store-home .vd-tier-maximum .vd-tier-percent,
.store-home .vd-tier-maximum .vd-tier-threshold,
.store-home .vd-tier-maximum .vd-tier-threshold b,
.store-home .vd-tier-maximum .vd-tier-number { color:#fff; }
.store-home .st-campaign-card { border-radius:12px; }
.store-home .st-campaign-card:nth-child(3n + 2) { background:var(--brand-ice); }
.store-home .st-campaign-card:nth-child(3n) { background:#F4F9FE; }
.store-home .sf-benefits i,
.store-home .sf-business-details i { color:var(--brand-sky); }
.store-home .sf-business { background:var(--brand-ice); }

/* Showcase and promo blocks still had hard-coded gray / sage colors. */
.store-home .hb-showcase-tab.is-selected,
.store-home .hb-showcase-tab[aria-selected="true"] {
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#fff;
}
.store-home .hb-showcase-tab:focus-visible { outline-color:var(--brand-sky); }
.store-home .hb-showcase-category-hero { background:var(--brand-ice); }
.store-home .hb-showcase-promo-panel { background:var(--brand-navy); }
.store-home .hb-showcase-promo-panel-2 { background:var(--brand-ice);color:var(--brand-navy); }
.store-home .hb-showcase-promo-panel-2 .hb-showcase-hero-kicker { color:var(--brand-blue); }
.store-home .hb-showcase-promo-panel-2 p { color:#46637F; }

/* Dark navy footer; no made-up imitation of the missing licensed maze pattern. */
.store-front .main-footer { background:var(--brand-navy); }
.store-front .footer-stats-bar { background:#09234D; }

/* Mobile catalog: compact subcategories and two usable product columns. */
@media (max-width: 767px) {
  .store-front .catalog-section .category-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-bottom:22px!important;
  }
  .store-front .catalog-section .category-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px;
    grid-template-rows:auto auto;
    align-content:center;
    align-items:center;
    column-gap:6px;
    min-height:92px;
    padding:11px;
    border:1px solid #DAE9F5;
    border-radius:10px;
    background:var(--brand-ice);
  }
  .store-front .catalog-section .category-card .title,
  .store-front .catalog-section .category-card .count { grid-column:1; }
  .store-front .catalog-section .category-card .title { font-size:12px;line-height:1.25;margin-bottom:4px; }
  .store-front .catalog-section .category-card .count { font-size:10px; }
  .store-front .catalog-section .category-card img {
    position:static;
    grid-column:2;
    grid-row:1 / 3;
    width:58px;
    max-width:100%;
    max-height:62px;
    object-fit:contain;
  }
  .store-front .catalog-section .product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .store-front .catalog-section .product-grid > .col { min-width:0;margin:0;padding:0; }
  .store-front .catalog-section .product-card {
    min-width:0;
    padding:10px;
    border-radius:12px;
    box-shadow:none;
  }
  .store-front .catalog-section .product-card .product-image {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    margin:0 0 8px;
    padding:7px;
  }
  .store-front .catalog-section .product-card .product-actions-top { top:5px;right:5px;gap:4px; }
  .store-front .catalog-section .product-card .btn-icon { font-size:15px;padding:2px; }
  .store-front .catalog-section .product-card .product-meta { font-size:9px;line-height:1.25;margin-bottom:4px; }
  .store-front .catalog-section .product-card .product-title {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    min-height:32px;
    margin-bottom:9px;
    font-size:11px;
    line-height:1.43;
  }
  .store-front .catalog-section .product-card .product-bottom {
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    gap:6px;
    align-items:end;
    margin-top:auto;
  }
  .store-front .catalog-section .product-card .price-block { min-width:0; }
  .store-front .catalog-section .product-card .price-old { font-size:10px;min-height:13px; }
  .store-front .catalog-section .product-card .price-current { font-size:16px;line-height:1.2; }
  .store-front .catalog-section .product-card .product-cart-control {
    width:42px;
    min-width:0;
  }
  .store-front .catalog-section .product-card .btn-add-cart {
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
  }
  .store-front .catalog-section .product-card .btn-add-cart span { display:none; }
  .store-front .catalog-section .product-card .btn-add-cart::before {
    content:"";
    display:block;
    width:19px;
    height:19px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2 12h11l3-9H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2 12h11l3-9H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* The existing +/– cart control can occupy the full row without overflow. */
  .store-front .catalog-section .product-card .product-bottom:has([data-card-cart-qty]:not([hidden])) {
    grid-template-columns:minmax(0,1fr);
  }
  .store-front .catalog-section .product-card .product-bottom:has([data-card-cart-qty]:not([hidden])) .product-cart-control {
    width:100%;
  }
  .store-front .catalog-section .product-card .product-card-qty {
    width:100%;
    height:42px;
    min-width:0;
    grid-template-columns:1fr 1fr 1fr;
  }
  .store-front .catalog-section .product-card .product-card-qty button { height:40px; }
  .store-front .catalog-section .catalog-results-meta > span { display:none; }
}
@media (max-width: 359px) {
  .store-front .catalog-section .product-grid { gap:7px; }
  .store-front .catalog-section .product-card { padding:8px; }
  .store-front .catalog-section .product-card .price-current { font-size:15px; }
  .store-front .catalog-section .category-card { grid-template-columns:minmax(0,1fr) 45px;padding:9px; }
  .store-front .catalog-section .category-card img { width:45px;max-height:52px; }
}
@media (prefers-reduced-motion:reduce) {
  .store-front .product-card,
  .store-front .sf-product,
  .store-home .st-campaign-card { transition:none; }
}

/* Audit V12.1: black type on light surfaces; keep brand fills/buttons intact.
 * Pure color refinement: no geometry, fonts, layouts, data or behavior changed.
 * White typography on navy/red/blue actions, badges and footer stays white.
 */
.store-front {
  --sf-audit-ink:#000000;
  color:#000000;
}
.store-home { --sf-home-ink:#000000; }
.store-front .sf-search input,
.store-front .sf-nav a,
.store-front .sf-actions>a,
.store-front .sf-drawer-links a,
.store-front .sf-panel-head,
.store-front .sf-panel-all,
.store-front .sf-text-link,
.store-front .sf-section-heading h2,
.store-front .sf-category>span,
.store-front .sf-home-category .sf-home-category-title,
.store-front .sf-product-title,
.store-front .sf-product-title:hover,
.store-front .sf-price b,
.store-front .sf-benefits h3,
.store-front .sf-business-details h3,
.store-front .product-card .product-title,
.store-front .product-card .price-current,
.store-front .catalog-section .category-card .title,
.store-home .sf-section .sf-product-title,
.store-home .sf-section .sf-product-title:hover,
.store-home .sf-section .sf-product .sf-price b,
.store-home .vd-tier:not(.vd-tier-maximum) .vd-tier-percent,
.store-home .hb-showcase-promo-panel-2 .hb-showcase-hero-kicker,
.store-home .hb-showcase-promo-panel-2 p {
  color:#000000;
}
/* Keep brand-colored icons even when their adjacent link label is black. */
.store-front .sf-actions>a .sf-action-icon,
.store-front .sf-nav a i,
.store-front .sf-text-link i { color:var(--brand-blue); }
.store-front .sf-nav a:first-child i { color:var(--brand-red); }