/* ============================================================
   Products overrides
   Keep this file small and product/shop-specific.
   The main visual baseline remains in site.css.
   ============================================================ */

/* 3D Shop desktop grid: exactly 4 columns.
   Scoped to #shop-grid so Aathaar grids/cards are not affected. */
@media (min-width: 961px){
  #shop-grid.prod-grid,
  #shop-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Tablet: 2 columns */
@media (min-width: 641px) and (max-width: 960px){
  #shop-grid.prod-grid,
  #shop-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px){
  #shop-grid.prod-grid,
  #shop-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   Theme accent guard for product pages
   AATHAAR pages must never inherit 3D Shop red accents for
   prices, totals, form rows, focus states or notices.
   ============================================================ */
body.theme-aathaar-page{
  --product-accent:var(--gold3);
  --product-accent-strong:var(--gold2);
}
body.theme-shop-page{
  --product-accent:var(--red);
  --product-accent-strong:var(--red);
}

body.theme-aathaar-page .product-start-price{
  border-left-color:var(--gold3)!important;
}

body.theme-aathaar-page .product-start-price .price-big,
body.theme-aathaar-page .inline-order-total .price-big,
body.theme-aathaar-page .inline-order-total #product-order-total,
body.theme-aathaar-page .order-total-block .price-big,
body.theme-aathaar-page #product-order-total{
  color:var(--gold2)!important;
}

body.theme-aathaar-page .order-form-header[role="button"]:focus,
body.theme-aathaar-page .order-form-header:focus{
  outline:2px solid var(--gold3)!important;
  outline-offset:2px;
}

body.theme-aathaar-page .ofi:focus,
body.theme-aathaar-page .ofs:focus,
body.theme-aathaar-page .ofta:focus,
body.theme-aathaar-page .fi:focus,
body.theme-aathaar-page .fs:focus,
body.theme-aathaar-page .fta:focus,
body.theme-aathaar-page .form-input:focus,
body.theme-aathaar-page .custom-input:focus{
  border-color:var(--gold3)!important;
}

body.theme-aathaar-page .dyn-item,
body.theme-aathaar-page .odyn-item,
body.theme-aathaar-page .custom-repeat-item{
  border-left-color:var(--gold3)!important;
}

body.theme-aathaar-page .dyn-item-lbl,
body.theme-aathaar-page .odyn-lbl,
body.theme-aathaar-page .custom-repeat-label{
  color:var(--gold3)!important;
}

body.theme-aathaar-page .onotice.red,
body.theme-aathaar-page .form-notice.red-notice,
body.theme-aathaar-page .form-error{
  border-left-color:var(--gold3)!important;
  background:rgba(201,169,110,0.08)!important;
  color:var(--gold3)!important;
}

body.theme-aathaar-page .btn-add-basket,
body.theme-aathaar-page .btn-submit:not(.red-submit){
  background:var(--gold3)!important;
}
body.theme-aathaar-page .btn-add-basket:hover,
body.theme-aathaar-page .btn-submit:not(.red-submit):hover{
  background:var(--gold)!important;
}