/* ---------- GLOBAL RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* prevent horizontal scrollbars */
}



/* ---------- ROOT VARIABLES ---------- */
:root {
  color-scheme: only light;
  --teal-700:#b91c1c; /* Accent Dark Red */
  --teal-600:#ef4444; /* Accent Red */
  --teal-500:#ef4444; /* Accent Red */
  --teal-50:#fef2f2;  /* Accent Light Red Tint */
  --blue-600:#ef4444; /* Accent Red */
  --ink:#000000;      /* Pure Black Text */
  --gray-900:#000000; /* Pure Black Text */
  --gray-700:#262626; /* Dark gray for secondary text */
  --gray-500:#737373; /* Neutral gray */
  --gray-200:#e5e5e5; /* Border light gray */
  --gray-100:#f5f5f5; /* Light gray bg */
  --gray-50:#ffffff;  /* Pure White Background */
  --white:#ffffff;
  --danger:#ef4444;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 24px 56px rgba(0,0,0,.1);
  --font-display:'Tajawal','Plus Jakarta Sans',sans-serif;
  --font-body:'Tajawal','Inter','Plus Jakarta Sans',sans-serif;
}

/* ---------- HTML & BODY ---------- */
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: #1a2b29; /* or var(--ink) if you want consistency */
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}


.s-about, .s-contact, .s-layout {
  position: relative !important;
}
.s-about::before, .s-layout::before {
  content: "" !important;
  position: absolute !important;
  top: 10% !important;
  right: 5% !important;
  width: 120px !important;
  height: 120px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='1.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.07 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: floatSlow 20s infinite ease-in-out !important;
}
.s-contact::after, .s-layout::after {
  content: "" !important;
  position: absolute !important;
  bottom: 10% !important;
  left: 5% !important;
  width: 150px !important;
  height: 150px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23EF4444' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='3' fill='%23EF4444'/%3E%3Ccircle cx='50' cy='20' r='3' fill='%23EF4444'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%23EF4444'/%3E%3Ccircle cx='20' cy='50' r='3' fill='%23EF4444'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23EF4444'/%3E%3Ccircle cx='80' cy='50' r='3' fill='%23EF4444'/%3E%3Ccircle cx='20' cy='80' r='3' fill='%23EF4444'/%3E%3Ccircle cx='50' cy='80' r='3' fill='%23EF4444'/%3E%3Ccircle cx='80' cy='80' r='3' fill='%23EF4444'/%3E%3Cpath d='M20 20l30 30-30 30'/%3E%3Cpath d='M50 20l30 30'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: floatSlowReverse 25s infinite ease-in-out !important;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-20px) rotate(10deg) scale(1.05); }
}
@keyframes floatSlowReverse {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(20px) rotate(-15deg) scale(0.95); }
}
h1,h2,h3{font-family:var(--font-display);margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}
a{text-decoration:none;color:inherit}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- NAVBAR ---------- */
.navbar{
  position:sticky;top:0;z-index:40;
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  border-bottom:1px solid var(--gray-200);
}
.navbar__inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:14px 24px;
}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand__mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--ink);
  border:1px solid var(--gray-700);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
:root:root .brand__text,
:root:root .s-brand__text,
:root:root .a-brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -.02em;
  color: var(--gray-900) !important;
  text-transform: uppercase !important;
}
:root:root .brand__text *,
:root:root .s-brand__text *,
:root:root .a-brand__text * {
  color: inherit !important;
  text-transform: uppercase !important;
}
.brand__mark img, .s-brand__mark img, .a-brand__mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.navbar__search{
  flex:1;max-width:560px;
  display:flex;align-items:center;gap:8px;
  background:var(--gray-100);
  border:1px solid transparent;
  border-radius:999px;
  padding:9px 16px;
  color:var(--gray-500);
  transition:border-color .15s, background .15s;
}
.navbar__search:focus-within{
  border-color:var(--teal-500);
  background:var(--white);
}
.navbar__search input{
  border:none;outline:none;background:transparent;
  width:100%;font-size:.92rem;color:var(--ink);
}

.navbar__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{
  position:relative;
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-700);
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--gray-100);color:var(--teal-700)}
#menuToggle{display:none}
.cart-badge{
  position:absolute;top:2px;right:2px;
  min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--teal-600);color:#fff;
  font-size:.65rem;font-weight:700;line-height:17px;text-align:center;
}

/* ---------- LAYOUT ---------- */
/* .layout{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:272px 1fr;gap:28px;
  padding:24px;
  align-items:start;
} */
.layout {
  max-width: 1400px;
  margin: 0 auto;    /* centers it without overflow */
  padding: 0 16px;   /* safe inner spacing */
}


/* ---------- SIDEBAR ---------- */
.sidebar{
  position:sticky;top:88px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:6px;
  max-height:calc(100vh - 112px);
  overflow-y:auto;
}
.sidebar__header{
  display:none;
  align-items:center;justify-content:space-between;
  padding:14px 16px 6px;
}
.sidebar__header h2{font-size:1.05rem}
.sidebar__close{font-size:1.6rem;line-height:1;color:var(--gray-500);width:32px;height:32px}

.category-tree{padding:10px}
.tree-skeleton{padding:8px}
.sk-line{height:14px;border-radius:6px;background:var(--gray-100);margin-bottom:10px;animation:pulse 1.3s ease-in-out infinite}
.sk-line:nth-child(2){width:80%}
.sk-line:nth-child(3){width:60%}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.tree-node{margin-bottom:2px}
.tree-node__row{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:var(--radius-sm);
  font-size:.88rem;font-weight:600;color:var(--gray-900);
  border-left:3px solid transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.tree-node__row:hover{background:var(--teal-50)}
.tree-node__row.is-active{
  background:var(--teal-50);
  border-left-color:var(--teal-600);
  color:var(--teal-700);
}
.tree-node__caret{
  width:16px;height:16px;flex-shrink:0;
  transition:transform .18s ease;
  color:var(--gray-500);
}
.tree-node.is-open > .tree-node__row .tree-node__caret{transform:rotate(90deg)}
.tree-node__label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-node__spacer{width:16px;flex-shrink:0}

.tree-children{
  max-height:0;overflow:hidden;
  transition:max-height .22s ease;
  padding-left:14px;
  border-left:1px solid var(--gray-100);
  margin-left:14px;
}
.tree-node.is-open > .tree-children{max-height:1200px}

.tree-node--sub > .tree-node__row{font-weight:500;font-size:.85rem}
.tree-node--leaf > .tree-node__row{font-weight:500;font-size:.83rem;color:var(--gray-700)}

/* ---------- MAIN ---------- */
.main{min-width:0}
.main__toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap;
}
.crumb{margin:0 0 4px;font-size:.78rem;font-weight:600;color:var(--teal-600);text-transform:uppercase;letter-spacing:.05em}
.main__title{font-size:1.5rem;font-weight:700;color:var(--gray-900)}
.sort-select{
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:.85rem;color:var(--gray-700);background:var(--white);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.product-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease;
}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-card__img{
  aspect-ratio:1/1;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:12px;box-sizing:border-box;
}
.product-card__img img{width:100%;height:100%;object-fit:contain}
.product-card__body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card__name{font-size:.92rem;font-weight:600;line-height:1.3;color:var(--gray-900)}
.product-card__price{font-family:var(--font-display);font-weight:700;color:var(--teal-700);font-size:1.05rem;margin-top:auto}
.product-card__unavailable{font-size:.72rem;font-weight:600;color:var(--danger)}

.btn{
  border-radius:999px;padding:10px 18px;font-weight:600;font-size:.86rem;
  transition:background .15s, color .15s, box-shadow .15s;
}
.btn--primary{background:var(--teal-600);color:#fff}
.btn--primary:hover{background:var(--teal-700)}
.btn--block{width:100%}
.btn--add{
  background:var(--teal-50);color:var(--teal-700);
  padding:9px 14px;font-size:.82rem;display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn--add:hover{background:var(--teal-600);color:#fff}
.btn--add:disabled{opacity:.5;cursor:not-allowed;background:var(--gray-100);color:var(--gray-500)}

.empty-state{text-align:center;color:var(--gray-500);padding:60px 0;font-size:.95rem}

/* ---------- PAGINATION ---------- */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:36px 0 8px;flex-wrap:wrap;
}
.page-btn{
  min-width:38px;height:38px;padding:0 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--gray-200);
  background:var(--white);color:var(--gray-700);font-weight:600;font-size:.85rem;
  transition:background .15s, color .15s, border-color .15s;
}
.page-btn:hover:not(:disabled){border-color:var(--teal-500);color:var(--teal-700)}
.page-btn.is-active{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-btn--nav{font-size:.8rem}

/* ---------- CART DRAWER ---------- */
.cart-drawer{
  position:fixed;top:0;right:0;height:100vh;width:400px;max-width:92vw;
  background:var(--white);z-index:70;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform .28s ease;
}
.cart-drawer.is-open{transform:translateX(0)}
.cart-drawer__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--gray-200);
}
.cart-drawer__items{flex:1;overflow-y:auto;padding:12px 18px}
.cart-drawer__footer{padding:18px 22px;border-top:1px solid var(--gray-200)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.95rem}
.cart-total-row strong{font-family:var(--font-display);font-size:1.2rem;color:var(--teal-700)}

.cart-line{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100);
}
.cart-line__img{width:56px;height:56px;border-radius:8px;background:var(--gray-100);flex-shrink:0;overflow:hidden}
.cart-line__img img{width:100%;height:100%;object-fit:cover}
.cart-line__body{flex:1;min-width:0}
.cart-line__name{font-size:.86rem;font-weight:600;margin-bottom:4px}
.cart-line__price{font-size:.8rem;color:var(--gray-500)}
.cart-line__qty{display:flex;align-items:center;gap:12px;margin-top:8px}
.qty-btn{
  width:36px;height:36px;border-radius:8px;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gray-700);
  font-size:1.1rem;
}
.qty-btn:hover{background:var(--teal-50);color:var(--teal-600)}
.cart-line__remove{color:var(--danger);font-size:.85rem;font-weight:600;margin-left:auto;padding:8px}
.cart-empty{text-align:center;color:var(--gray-500);padding:40px 0;font-size:.9rem}

.cart-overlay,.sidebar-overlay{
  position:fixed;inset:0;background:rgba(15,30,28,.35);
  z-index:60;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.cart-overlay.is-open,.sidebar-overlay.is-open{opacity:1;pointer-events:auto}
.sidebar-overlay{z-index:39}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .layout{grid-template-columns:1fr;padding:16px}
  #menuToggle{display:flex}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:300px;max-width:85vw;
    z-index:50;border-radius:0;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar__header{display:flex}
}
@media (max-width:640px){
  .navbar__inner{padding:12px 16px;gap:10px}
  .brand__text{font-size:1.05rem}
  .navbar__search{padding:8px 12px}
  .main__title{font-size:1.2rem}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cart-drawer{width:100vw;max-width:100vw}
}
@media (max-width:480px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .product-card{border-radius:12px}
  .brand__text{font-size:.95rem}
}

/* ---------- PRODUCT MODAL ---------- */
.s-product-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90vw;
  max-width: 800px;
  background: var(--white);
  border-radius: var(--radius);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.s-product-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.s-product-modal__content {
  position: relative;
  padding: 24px;
}
.s-product-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gray-500);
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s, color 0.15s;
}
.s-product-modal__close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}
.s-product-modal__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .s-product-modal__grid {
    grid-template-columns: 1fr;
  }
}
.s-product-modal__img-wrapper {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
}
.s-product-modal__img-wrapper img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}
.s-product-modal__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-product-modal__cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--teal-600);
  background: var(--teal-50, #f0fdfa);
  border: 1.5px solid rgba(15,118,110,0.18);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  width: fit-content;
}
.s-product-modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.s-product-modal__status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
}
.s-product-modal__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--teal-700);
  margin: 8px 0 16px;
}
.s-product-modal__desc {
  font-size: 0.86rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.s-product-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-btn--share {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.s-btn--share svg {
  stroke: var(--ink) !important;
  color: var(--ink) !important;
  fill: none !important;
}
.s-btn--share svg path {
  stroke: var(--ink) !important;
  fill: none !important;
  stroke-width: 2.8 !important;
}
.s-btn--share:hover {
  background: var(--gray-50);
  color: var(--teal-700);
  border-color: var(--teal-500);
}

/* ---------- TOAST ---------- */
.s-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.s-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---------- USER UX UPGRADES ---------- */
.s-cart-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--teal-600);
  color: var(--white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(15, 118, 110, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  cursor: pointer;
  transition: transform 0.25s, background-color 0.2s;
}
.s-cart-float:hover {
  transform: scale(1.08);
  background: var(--teal-700);
}
.s-cart-float-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--white);
}

.s-wa-tooltip {
  position: absolute;
  bottom: 10px !important;
  left: 74px !important;
  background: var(--white);
  color: var(--gray-900);
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  font-size: 0.8rem;
  white-space: nowrap;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px) !important;
  transition: opacity 0.3s, transform 0.3s;
}
.s-wa-tooltip.has-messenger {
  bottom: 46px !important;
}
.s-wa-tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: -6px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  border-width: 6px 6px 6px 0 !important;
  border-style: solid !important;
  border-color: transparent var(--white) transparent transparent !important;
}

/* Suggestions dropdown */
.s-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  border: 1px solid var(--gray-200);
  margin-top: 6px;
}
.s-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.s-suggestion-item:hover {
  background: var(--gray-100);
}
.s-suggestion-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--gray-100);
}
.s-suggestion-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-900);
}
.s-suggestion-price {
  font-size: 0.78rem;
  color: var(--teal-700);
  font-weight: 700;
  margin-top: 2px;
}
.s-suggestion-empty {
  padding: 14px;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.85rem;
}

/* Qty card control */
.s-qty-card-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.s-qty-card-btn:hover {
  background: rgba(15, 118, 110, 0.1);
}

/* Order Lookup Card Styles */
.s-order-lookup-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--gray-50);
}
.s-order-lookup-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.s-order-lookup-meta {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.s-order-lookup-items {
  font-size: 0.82rem;
  color: var(--gray-700);
  border-top: 1px dashed var(--gray-200);
  padding-top: 8px;
}

/* Order Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
}
.status-badge--pending {
  background-color: #fef3c7;
  color: #d97706;
}
.status-badge--processing {
  background-color: #e0f2fe;
  color: #0284c7;
}
.status-badge--shipped {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.status-badge--completed {
  background-color: #dcfce7;
  color: #16a34a;
}
.status-badge--cancelled {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Homepage Hero Search Form Focus State */
 .s-hero-search-form:focus-within {
  border-color: var(--a-teal-500) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}

/* Toggleable Navigation Search Overlay */
.s-nav-search-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: transparent !important; /* اتغيرت من var(--white) لـ transparent */
  backdrop-filter: blur(10px);        /* إضافة تاثير الزجاج عشان يبقى شكلها احترافي */
  z-index: 50;
  align-items: center;
  padding: 0 24px;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- ADVANCED CREATIVE REDESIGN ---------- */
body {
  background-color: var(--gray-50) !important;
}

/* Glassmorphism Navbar */
.s-navbar {
  backdrop-filter: blur(16px) !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border-bottom: 1.5px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Elegant Cards */
.s-card {
  border: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.s-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--teal-500) !important;
}
.s-card__img {
  background: linear-gradient(180deg, var(--gray-50), var(--gray-100)) !important;
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0 !important;
}
.s-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(15, 23, 42, 0.02));
}
.s-card__name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  transition: color 0.2s;
}
.s-card:hover .s-card__name {
  color: var(--teal-600) !important;
}

/* Category Sidebar improvements */
.s-sidebar {
  border: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
  background: var(--white) !important;
}
.s-tree-node__row {
  margin-bottom: 4px !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.s-tree-node__row:hover {
  background: var(--teal-50) !important;
  color: var(--teal-600) !important;
}
.s-tree-node__row.is-active {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-600)) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-md) !important;
  border-left: none !important;
  padding-left: 15px !important;
}
.s-tree-children {
  border-left: 1.5px dashed var(--gray-200) !important;
  margin-left: 18px !important;
  padding-left: 14px !important;
}

/* Hero Section Mesh Gradient */
.s-hero {
  background: var(--white) !important;
  position: relative;
  overflow: hidden;
}
.s-hero::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  top: -50px;
  right: -50px;
  z-index: 0;
  animation: breathingGlow 10s infinite ease-in-out;
}
.s-hero::after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.12) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  z-index: 0;
  animation: breathingGlowReverse 12s infinite ease-in-out;
}

@keyframes breathingGlow {
  0%, 100% { opacity: 0.8; transform: scale(1) translate(0, 0); }
  50% { opacity: 1; transform: scale(1.1) translate(10px, -10px); }
}
@keyframes breathingGlowReverse {
  0%, 100% { opacity: 0.8; transform: scale(1) translate(0, 0); }
  50% { opacity: 1; transform: scale(1.08) translate(-15px, 15px); }
}

/* Sub-page buttons */
.s-btn--primary {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500)) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  color: var(--white) !important;
  transition: all 0.2s !important;
}
.s-btn--primary:hover {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-600)) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}
.s-btn--add {
  background: var(--teal-50) !important;
  color: var(--teal-600) !important;
  border: 1px solid var(--gray-200) !important;
  transition: all 0.2s !important;
}
.s-btn--add:hover {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500)) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Float buttons glow */
.s-cart-float {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-700)) !important;
  box-shadow: var(--shadow-md) !important;
}
.s-wa-float {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 55 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(37,211,102,.45) !important;
  transition: transform .18s ease, background-color 0.2s !important;
}
.s-wa-float:hover {
  transform: scale(1.08) !important;
  background-color: #20ba5a !important;
}
.s-wa-float::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  opacity: .5 !important;
  animation: s-wa-pulse 2.2s ease-out infinite !important;
  z-index: -1 !important;
}
@keyframes s-wa-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 640px) {
  .s-wa-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 16px !important;
    left: 16px !important;
  }
  .s-wa-tooltip {
    left: 64px !important;
    bottom: 6px !important;
  }
  .s-cart-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
}

.s-icon-btn--msger:hover {
  background: var(--a-slate-100) !important;
  color: #006aff !important;
}

/* Footer layout auto-bottom alignment */
footer, .s-footer {
  margin-top: auto !important;
}

/* Forms & inputs */
.s-field input:focus, .s-field textarea:focus {
  border-color: var(--teal-600) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}
.s-contact-form {
  background: var(--white) !important;
  border: 1.5px solid var(--gray-200) !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}
.s-contact-info {
  background: var(--white) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  padding: 32px 28px !important;
  color: var(--ink) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}
.s-contact-info__item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: var(--gray-100) !important;
  border: 1.5px solid var(--gray-200) !important;
  transition: all 0.2s ease !important;
}
.s-contact-info__item:hover {
  border-color: var(--teal-600) !important;
  transform: translateY(-2px) !important;
}
.s-contact-info__item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: var(--teal-600) !important;
}
.s-contact-info__item > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.s-contact-info__item b {
  display: block !important;
  font-size: 0.72rem !important;
  color: var(--gray-500) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
}
.s-contact-info__item span {
  display: block !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* --- Micro-animations Redesign --- */

/* Smooth Card Hover Zoom */
.s-card__img img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.s-card:hover .s-card__img img {
  transform: scale(1.08) !important;
}

/* Button Micro-interactions */
.s-btn, .btn, .s-qty-btn, .s-qty-card-btn, .s-icon-btn, .icon-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.s-btn:hover, .btn:hover {
  transform: translateY(-2px) !important;
}
.s-btn:active, .btn:active {
  transform: translateY(1px) scale(0.98) !important;
}
.s-icon-btn:hover, .icon-btn:hover {
  transform: scale(1.08) !important;
}

/* Search Input Focus Highlight */
.navbar__search, .s-navbar__search {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.navbar__search:focus-within, .s-navbar__search:focus-within {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}

/* Category Sidebar Links slide-in bg */
.s-tree-node__row, .tree-node__row, .s-quicknav__link {
  position: relative !important;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.s-tree-node__row::after, .tree-node__row::after, .s-quicknav__link::after {
  content: "" !important;
  position: absolute !important;
  top: 15% !important;
  right: 0 !important;
  width: 4px !important;
  height: 70% !important;
  background-color: var(--teal-600) !important;
  border-radius: 99px !important;
  opacity: 0 !important;
  transform: scaleY(0) !important;
  transform-origin: center !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
}
.s-tree-node__row:hover::after, .tree-node__row:hover::after, .s-quicknav__link:hover::after,
.s-tree-node__row.is-active::after, .tree-node__row.is-active::after, .s-quicknav__link--active::after {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

/* Floating buttons shake or pop attention grabber */
@keyframes attentionPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.s-cart-float, .s-wa-float {
  animation: attentionPulse 4s infinite ease-in-out;
}
.s-cart-float:hover, .s-wa-float:hover {
  animation-play-state: paused;
  transform: scale(1.1) translateY(-2px) !important;
}

/* Modal Open Scales */
.s-product-modal {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translate(-50%, -50%) scale(0.95) !important;
}
.s-product-modal.is-open, #trackOrderModalOverlay[style*="display: flex"] > .s-product-modal {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Drawer transitions */
.s-cart-drawer, .s-sidebar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Review Star hover rotation and states */
.s-star-rating {
  display: flex;
  gap: 6px;
}
.s-star-btn {
  border: none;
  background: none;
  padding: 2px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.s-star-btn svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill .12s, stroke .12s;
}
.s-star-btn:hover {
  transform: scale(1.2) rotate(15deg) !important;
}
.s-star-btn.is-filled svg,
.s-star-btn:hover svg {
  fill: #FFC107;
  stroke: #FFC107;
}

.s-review-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.s-review-card__stars svg {
  width: 15px;
  height: 15px;
  fill: #FFC107;
  stroke: #FFC107;
}
.s-review-card__stars svg.is-empty {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* Premium Global Animated Background Pattern */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(255, 0, 0, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 0, 0, 0.01) 0%, transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.005) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 36px 36px !important;
  animation: sGlobalBgFloat 140s linear infinite !important;
}

@keyframes sGlobalBgFloat {
  0% {
    background-position: 0% 0%, 0% 0%, 0px 0px;
  }
  100% {
    background-position: 0% 0%, 0% 0%, 360px 720px;
  }
}

/* Translucent Section Backgrounds to reveal moving background pattern */
.s-features, .s-reviews, .s-featured {
  background-color: var(--white) !important;
}
.s-about, .s-contact {
  background-color: var(--white) !important;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.s-announce-bar {
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0;
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 60;
}
.s-announce-bar__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: sAnnounceTicker 35s linear infinite;
  flex-shrink: 0;
}
.s-announce-bar__item {
  padding: 0 28px;
  letter-spacing: 0.02em;
}
.s-announce-bar__sep {
  opacity: 0.5;
  font-size: 0.65rem;
}
.s-announce-bar__close {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.s-announce-bar__close:hover {
  background: rgba(255,255,255,0.35);
}
@keyframes sAnnounceTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   BRANDS TICKER
   ============================================================ */
.s-brands-ticker {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  border-top: 1px solid var(--a-slate-200);
  border-bottom: 1px solid var(--a-slate-200);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.s-brands-ticker::before,
.s-brands-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.s-brands-ticker::before {
  right: 0;
  background: linear-gradient(to left, var(--ink) 0%, transparent 100%);
}
.s-brands-ticker::after {
  left: 0;
  background: linear-gradient(to right, var(--ink) 0%, transparent 100%);
}
.s-brands-ticker__track {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  animation: sBrandsTicker 28s linear infinite;
  width: max-content;
}
.s-brands-ticker__track:hover {
  animation-play-state: paused;
}
.s-brand-pill {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: default;
  letter-spacing: 0.02em;
}
.s-brand-pill:hover {
  background: var(--white);
  border-color: var(--teal-600);
  color: var(--teal-600);
  transform: scale(1.04);
}
@keyframes sBrandsTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   VISUAL CATEGORIES QUICK ACCESS
   ============================================================ */
.s-cat-quick {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-200);
}
.s-cat-quick .s-section__inner {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.s-cat-quick__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: center !important;
}
.s-cat-quick__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 110px !important;
  flex: 0 0 auto !important;
  padding: 16px 12px !important;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  gap: 8px !important;
}
.s-cat-quick__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cqc, #2563eb) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.s-cat-quick__card:hover {
  border-color: var(--cqc, #2563eb);
  box-shadow: 0 8px 24px rgba(15,23,42,0.1), 0 0 0 1px var(--cqc, #2563eb) inset;
  transform: translateY(-2px);
}
.s-cat-quick__card:hover::before {
  opacity: 0.06;
}
.s-cat-quick__card:hover .s-cat-quick__icon {
  background: var(--cqc, #2563eb);
  color: #fff;
}
.s-cat-quick__card:hover .s-cat-quick__arrow {
  color: var(--cqc, #2563eb);
  transform: translateX(-4px);
}
.s-cat-quick__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cqc, #2563eb) 10%, #f0f9ff);
  color: var(--cqc, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
  overflow: hidden;
  position: relative;
}
.s-cat-quick__label {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}
.s-cat-quick__arrow {
  display: none !important;
}
.s-cat-quick__card--all {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--gray-200);
}
.s-cat-quick__card--all .s-cat-quick__icon {
  background: var(--gray-100);
  color: var(--ink);
}
.s-cat-quick__card--all .s-cat-quick__arrow {
  display: none !important;
}
.s-cat-quick__card--all:hover {
  transform: translateY(-3px);
  border-color: var(--a-teal-600);
  box-shadow: none;
}
.s-cat-quick__skeleton {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: sCatSkeletonShimmer 1.5s infinite linear;
  flex-shrink: 0 !important;
}
@keyframes sCatSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.s-how {
  background: var(--white) !important;
}
.s-how__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.s-how__step {
  flex: 1;
  min-width: 200px;
  max-width: 240px;
  text-align: center;
  padding: 28px 20px;
  position: relative;
}
.s-how__connector {
  flex: 0 0 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--a-teal-600), var(--a-blue-600));
  margin-top: 48px;
  border-radius: 99px;
  opacity: 0.3;
  position: relative;
  align-self: flex-start;
}
.s-how__connector::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a-teal-600);
  opacity: 0.5;
}
.s-how__step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a-teal-600), var(--a-blue-600));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.s-how__step-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--white);
  color: var(--teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: none;
  border: 1.5px solid var(--gray-200);
  transition: all 0.3s ease;
}
.s-how__step:hover .s-how__step-icon {
  background: var(--teal-600);
  color: #fff;
  border-color: var(--teal-600);
  transform: scale(1.06);
  box-shadow: none;
}
.s-how__step-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--a-slate-900);
  margin: 0 0 8px;
}
.s-how__step-desc {
  font-size: 0.85rem;
  color: var(--a-slate-500);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .s-how__steps { flex-direction: column; align-items: center; }
  .s-how__connector { display: none; }
  .s-how__step { max-width: 100%; width: 100%; }
}

/* --- Premium WhatsApp CTA Design (Updated Colors) --- */
.s-wa-cta {
    padding: 60px 20px;
    background-color: transparent;
}

.s-wa-cta__inner {
    background: #25D366 !important; /* لون الواتساب الرسمي */
    border-radius: 20px;
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border: none; /* شلنا الحدود القديمة عشان لون الواتس يظهر صح */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.s-wa-cta__content {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
}

.s-wa-cta__icon {
    background: rgba(255, 255, 255, 0.2) !important; /* خلفية شفافة فوق الأخضر */
    color: #ffffff !important; /* الأيقونة بيضاء */
    padding: 15px;
    border-radius: 15px;
    flex-shrink: 0;
}

.s-wa-cta__text {
    flex: 1;
    min-width: 250px;
}

.s-wa-cta__text h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: #ffffff !important; /* نص أبيض */
}

.s-wa-cta__text p {
    margin: 0;
    color: #ffffff !important; /* نص أبيض */
    font-size: 15px;
    opacity: 0.9;
}

.s-wa-cta__btn {
    background: #25D366 !important; /* لون الواتساب الرسمي */
    color: #ffffff !important;
    border: 2px solid #ffffff !important; /* حدود بيضاء للزرار */
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    transition: all 0.3s ease;
}

.s-wa-cta__btn:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
}

/* تنسيق الموبايل */
@media (max-width: 768px) {
    .s-wa-cta__inner { padding: 25px; text-align: center; }
    .s-wa-cta__content { flex-direction: column; text-align: center; }
}
/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.s-faq {
  background: var(--white) !important;
}
.s-faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-faq__item {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;
}
.s-faq__item:hover {
  border-color: var(--a-teal-500);
  box-shadow: none;
}
.s-faq__item.is-open {
  border-color: var(--a-teal-500);
  box-shadow: none;
}
.s-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--a-slate-900);
  user-select: none;
}
.s-faq__chevron {
  flex-shrink: 0;
  color: var(--a-slate-400);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.s-faq__item.is-open .s-faq__chevron {
  transform: rotate(180deg);
  color: var(--a-teal-600);
}
.s-faq__item.is-open .s-faq__q {
  color: var(--a-teal-600);
}
.s-faq__a {
  font-size: 0.88rem;
  color: var(--a-slate-600);
  line-height: 1.7;
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease;
}
.s-faq__item.is-open .s-faq__a {
  max-height: 200px;
  padding: 0 22px 18px;
}

/* ============================================================
   LANGUAGE SWITCHER STYLES
   ============================================================ */
.s-lang-switch {
  display: inline-flex;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  direction: ltr; /* Switch remains ltr always */
}
/* When inside sidebar, stretch full width */
.s-sidebar__lang-wrapper .s-lang-switch {
  display: flex;
  width: 100%;
}
.s-sidebar__lang-wrapper .s-lang-btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  font-size: 0.82rem;
}
.s-lang-btn {
  border: none;
  background: none;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--a-slate-500);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.s-lang-btn:hover {
  color: var(--a-teal-600);
}
.s-lang-btn.is-active {
  background: var(--a-teal-600);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15,118,110,0.2);
}

/* ============================================================
   RESPONSIVE LAYOUT MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 640px) {
  /* Dynamic Quick categories grid mobile overflow scroll */
  .s-cat-quick__grid {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }
  .s-cat-quick__grid::-webkit-scrollbar {
    display: none !important;
  }
  .s-cat-quick__card {
    padding: 12px 8px !important;
    width: 100px !important;
  }
  .s-cat-quick__skeleton {
    width: 100px !important;
    height: 100px !important;
  }
  /* WhatsApp CTA text center alignment on wrap */
  .s-wa-cta__text {
    text-align: center !important;
  }
}

/* Inputs & textareas focus overrides */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--teal-600) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* FORCE LIGHT THEME - overrides everything selectively */
body, html {
    background-color: var(--white) !important;
    color: var(--ink) !important;
}

div:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand__mark):not(.brand__mark):not(.cart-badge):not(.s-cart-badge):not(.s-cart-float-badge):not(.s-product-modal__cat-badge):not(.s-featured-card__badge):not(.s-brand-pill):not(.tree-node__row.is-active):not(.s-tree-node__row.is-active):not(.s-wa-float):not(.s-cart-float):not(.s-how__step-num):not(.s-how__step-icon):not(.s-category-pill):not(.s-prod-status):not(.s-card__availability):not(.is-available):not(.is-unavailable):not(.s-product-modal__status),
section, header, footer, .card, .container {
    background-color: var(--white) !important;
    color: var(--ink) !important;
    border-color: var(--gray-200) !important;
}

h1:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
h2:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
h3:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
h4:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
h5:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
h6:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
p:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-brand-pill):not(.s-brand__mark):not(.brand__mark),
span:not(.cart-badge):not(.s-cart-badge):not(.s-cart-float-badge):not(.s-lang-btn.is-active):not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.s-hero__cta):not(.s-wa-cta__btn):not(.s-featured__cta):not(.btn--whatsapp):not(#confirmOrderBtn):not(.s-prod-status):not(.s-card__availability):not(.is-available):not(.is-unavailable):not(.s-featured-card__badge):not(.s-product-modal__status),
a:not(.btn):not(.s-btn):not(.btn--primary):not(.s-btn--primary):not(.cart-badge):not(.s-cart-badge):not(.s-lang-btn.is-active):not(.s-hero__cta):not(.s-wa-cta__btn):not(.s-featured__cta):not(.btn--whatsapp):not(#confirmOrderBtn):not(.s-prod-status):not(.s-card__availability):not(.is-available):not(.is-unavailable):not(.s-featured-card__badge):not(.s-product-modal__status) {
    color: var(--ink) !important;
}

button:not(.btn--primary):not(.s-btn--primary):not(.s-lang-btn.is-active):not(.s-icon-btn):not(.icon-btn):not(.qty-btn):not(.s-qty-btn):not(.s-cart-float) {
    background-color: var(--gray-100) !important;
    color: var(--ink) !important;
}

/* Premium Dental-Themed Background SVG Patterns */

/* 1. Staggered Minimalist Molar & Cross Pattern */
.bg-pattern-molar, .bg-pattern-tooth, .s-hero {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M22%2C14%20C25%2C14%2028%2C16%2030%2C19%20C32%2C16%2035%2C14%2038%2C14%20C43%2C14%2046%2C18%2046%2C23%20C46%2C31%2042%2C37%2039%2C44%20C38%2C46%2036%2C48%2035%2C48%20C34%2C48%2033%2C47%2032%2C45%20C31%2C47%2030%2C48%2029%2C48%20C28%2C48%2026%2C46%2025%2C44%20C22%2C37%2018%2C31%2018%2C23%20C18%2C18%2021%2C14%2022%2C14%20Z%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.12%22%2F%3E%3Cpath%20d%3D%22M54%2C23%20h6%20M57%2C20%20v6%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.12%22%2F%3E%3Cpath%20d%3D%22M72%2C64%20C75%2C64%2078%2C66%2080%2C69%20C82%2C66%2085%2C64%2088%2C64%20C93%2C64%2096%2C68%2096%2C73%20C96%2C81%2092%2C87%2089%2C94%20C88%2C96%2086%2C98%2085%2C98%20C84%2C98%2083%2C97%2082%2C95%20C81%2C97%2080%2C98%2079%2C98%20C78%2C98%2076%2C96%2075%2C94%20C72%2C87%2068%2C81%2068%2C73%20C68%2C68%2071%2C64%2072%2C64%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.08%22%2F%3E%3Cpath%20d%3D%22M4%2C73%20h6%20M7%2C70%20v6%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.08%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: repeat !important;
  background-position: center !important;
}

/* 2. Abstract Dental Cusp Curves & Enamel Waves */
.bg-pattern-curves, .s-about, .s-layout, .checkout-layout {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20d%3D%22M0%2C60%20Q30%2C20%2060%2C60%20T120%2C60%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.08%22%2F%3E%3Cpath%20d%3D%22M0%2C80%20Q30%2C120%2060%2C80%20T120%2C80%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%224%2C4%22%20opacity%3D%220.08%22%2F%3E%3Cpath%20d%3D%22M0%2C30%20Q30%2C10%2060%2C30%20T120%2C30%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221%22%20opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: repeat !important;
  background-position: center !important;
}

/* 3. Clinical Medical Cross Grid & Radar circles */
.bg-pattern-cross, .s-footer {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20d%3D%22M37%2C40%20h6%20M40%2C37%20v6%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.12%22%2F%3E%3Cpath%20d%3D%22M0%2C4%20h4%20M2%2C0%20v8%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%222%2C4%22%20opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22%239CA3AF%22%20opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2240%22%20r%3D%221.5%22%20fill%3D%22%239CA3AF%22%20opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%2265%22%20cy%3D%2240%22%20r%3D%221.5%22%20fill%3D%22%239CA3AF%22%20opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2265%22%20r%3D%221.5%22%20fill%3D%22%239CA3AF%22%20opacity%3D%220.12%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: repeat !important;
  background-position: center !important;
}

/* Structural wrappers overrides to allow SVG backgrounds to show through */
.s-hero__actions,
.s-hero__trust,
.s-hero__trust-item,
.s-section__inner,
.s-section__head,
.s-featured-grid,
.s-featured__cta-wrap,
.s-about__grid,
.s-about__copy {
  background-color: transparent !important;
}

/* Glassmorphism content containers and cards with high specificity */
body div.s-feature-card,
body div.s-featured-card,
body div.s-review-card,
body div.s-review-card--skeleton,
body div.s-card,
body div.product-card,
body div.cat-browser-card,
body div.cat-skeleton-card,
body div.s-sidebar,
body aside.s-sidebar,
body section.checkout-summary,
body section.checkout-form-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Glassmorphism Hero Inner Card Box */
body div.s-hero__inner {
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 24px !important;
  padding: 48px 32px !important;
  box-shadow: var(--shadow-md) !important;
}

@media (max-width: 640px) {
  body div.s-hero__inner {
    padding: 32px 16px !important;
  }
}

/* --- FIX: WhatsApp CTA Banner Override --- */
.s-wa-cta {
  background: #25D366 !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  border-radius: var(--radius) !important;
  padding: 40px 30px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 40px auto !important;
  max-width: 1200px !important;
  border: 1px solid var(--gray-200) !important;
}
.s-wa-cta__inner {
  background: transparent !important;
  background-color: transparent !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.s-wa-cta__text h2, .s-wa-cta__text p {
  color: #ffffff !important;
}
.s-wa-cta__btn {
  background: #25D366 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  margin-top: 15px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.s-wa-cta__btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}
#waCtaBtnText {
  color: #ffffff !important;
}
body .s-wa-cta__btn:hover #waCtaBtnText {
  color: #25D366 !important;
}
body .s-wa-cta__btn:hover,
body .s-wa-cta__btn:hover * {
  color: #25D366 !important;
  fill: #25D366 !important;
  stroke: #25D366 !important;
}
#waCtaIcon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #25D366 !important;
}
#waCtaIcon,
#waCtaIcon * {
  fill: #25D366 !important;
  stroke: #25D366 !important;
  color: #25D366 !important;
}
.s-wa-cta__bubble {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Force white text and icons on all red background interactive elements and their children */
body .s-hero__cta,
body .s-hero__cta *,
body .s-wa-cta__btn,
body .s-wa-cta__btn *,
body .s-featured__cta,
body .s-featured__cta *,
body .btn,
body .btn *,
body .s-btn,
body .s-btn *,
body .btn--primary,
body .btn--primary *,
body .s-btn--primary,
body .s-btn--primary *,
body .btn--whatsapp,
body .btn--whatsapp *,
body #confirmOrderBtn,
body #confirmOrderBtn *,
body .s-tree-node__row.is-active,
body .s-tree-node__row.is-active *,
body .s-lang-btn.is-active,
body .s-lang-btn.is-active *,
body .page-btn.is-active,
body .page-btn.is-active * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.navbar.is-scrolled,.s-navbar.is-scrolled,.a-topbar.is-scrolled{
  animation:navbar-slide-in .28s ease-out;
}
@keyframes navbar-slide-in{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}

/* Keep the navigation visible regardless of the page's scroll container. */
body{padding-top:var(--navbar-height,0px)}
.navbar,.s-navbar,.a-topbar{
  position:fixed!important;
  top:0!important;
  inset-inline:0;
}

/* Let the navbar's white content span the viewport, hiding the outer dark edges. */
.s-navbar__inner{
  width:100%!important;
  max-width:none!important;
}

footer.s-footer,
footer.s-footer *{
  color:#fff!important;
}

body footer.s-footer p,
body footer.s-footer p *{
  color:#fff!important;
}

/* Hide dashboard quicknav button by default */
.s-quicknav__link--dashboard {
  display: none !important;
}

/* Show dashboard quicknav button only if body has show-admin-nav class */
.show-admin-nav .s-quicknav__link--dashboard {
  display: flex !important;
}

/* Product Details Page Styles */
.s-prod-section {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: var(--shadow-md) !important;
  margin-bottom: 40px !important;
}
.s-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
.s-prod-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s-prod-main-img-wrapper {
  position: relative;
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, var(--gray-50), var(--gray-100));
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  box-sizing: border-box;
}
.s-prod-main-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.s-prod-main-img-wrapper:hover img {
  transform: scale(1.05);
}
.s-prod-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s-prod-cat-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--teal-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--teal-50);
  padding: 6px 14px;
  border-radius: 99px;
  width: fit-content;
}
.s-prod-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.25;
  margin: 0;
}
.s-prod-status {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  width: fit-content;
}
.s-prod-status.is-available {
  background: #dcfce7;
  color: #15803d;
}
.s-prod-status.is-unavailable {
  background: #fef2f2;
  color: var(--danger);
}
.s-prod-price {
  font-family: var(--font-display) !important;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--teal-700);
}
.s-prod-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-600);
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}
.s-prod-qty-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .s-prod-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .s-prod-section {
    padding: 20px !important;
  }
  .s-prod-title {
    font-size: 1.4rem;
  }
}

/* Premium Breadcrumbs Styling */
.s-crumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  margin-bottom: 24px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1px solid var(--gray-200) !important;
  width: fit-content !important;
  box-shadow: var(--shadow-sm) !important;
}
.s-crumb a {
  color: var(--gray-600) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.s-crumb a:hover {
  color: var(--teal-600) !important;
}
.s-crumb-separator {
  color: var(--gray-400) !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
}
.s-crumb-current {
  color: var(--teal-600) !important;
  font-weight: 700 !important;
}

/* Related Products Layout */
.s-related-products {
  margin-top: 64px !important;
  margin-bottom: 40px !important;
}
.s-related-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--gray-900) !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.s-related-title::before {
  content: "" !important;
  width: 4px !important;
  height: 24px !important;
  background: var(--teal-600) !important;
  border-radius: 99px !important;
  display: inline-block !important;
}

/* Global Product/Card Grid Layout */
.s-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .s-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 640px) {
  .s-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Smart Description Formatting */
.s-prod-desc {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--gray-700) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding-top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.s-desc-paragraph {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: var(--gray-600) !important;
}
.s-desc-heading {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--gray-900) !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.s-desc-heading::before {
  content: "" !important;
  width: 3px !important;
  height: 14px !important;
  background: var(--teal-600) !important;
  border-radius: 99px !important;
  display: inline-block !important;
}
.s-desc-list, .s-desc-list-ordered {
  margin: 4px 0 !important;
  padding-inline-start: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.s-desc-list li {
  list-style-type: disc !important;
  color: var(--gray-600) !important;
}
.s-desc-list-ordered li {
  list-style-type: decimal !important;
  color: var(--gray-600) !important;
}
.s-desc-spec {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
}
.s-desc-spec__label {
  font-weight: 700 !important;
  color: var(--gray-800) !important;
}
.s-desc-spec__val {
  color: var(--teal-700) !important;
  font-weight: 600 !important;
}

/* iOS Safari Viewport Height and Spacing Fix for Cart Drawer on all pages */
.s-cart-drawer {
  height: 100dvh !important;
  height: 100% !important;
  bottom: 0 !important;
  top: 0 !important;
}
.s-cart-drawer__footer {
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

/* Offers Floating Button */
.s-offers-float {
  position: fixed !important;
  bottom: 98px !important;
  left: 24px !important;
  z-index: 55 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.45) !important;
  transition: transform .18s ease, background-color 0.2s !important;
  cursor: pointer;
}
.s-offers-float:hover {
  transform: scale(1.08) !important;
  background-color: #dc2626 !important;
}
.s-offers-float::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  opacity: .5 !important;
  animation: s-offers-pulse 2.2s ease-out infinite !important;
  z-index: -1 !important;
}
@keyframes s-offers-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 640px) {
  .s-offers-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 78px !important;
    left: 16px !important;
  }
}

/* ============================================================
   PRODUCT DETAIL ACCORDIONS
   ============================================================ */
.s-prod-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.s-prod-accordion__item {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
}
.s-prod-accordion__item:hover,
.s-prod-accordion__item.is-open {
  border-color: var(--teal-600);
}
.s-prod-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gray-900);
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: inherit;
  font-family: inherit;
}
.s-prod-accordion__header:hover {
  color: var(--teal-600);
}
.s-prod-accordion__item.is-open .s-prod-accordion__header {
  color: var(--teal-600);
  border-bottom: 1px solid var(--gray-100);
}
.s-prod-accordion__chevron {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.s-prod-accordion__item.is-open .s-prod-accordion__chevron {
  transform: rotate(180deg);
  color: var(--teal-600);
}
.s-prod-accordion__content {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.7;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease;
}
.s-prod-accordion__item.is-open .s-prod-accordion__content {
  max-height: 1500px;
  padding: 18px 20px;
}

/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root, :root:root {
    color-scheme: only dark;
    /* White (like --white, --gray-50) becomes dark gray. */
    --white: #1e1e1e;
    --gray-50: #1e1e1e;
    
    /* Black/Gray (like --ink, --gray-900, --gray-700, --gray-500, --gray-200, --gray-100) become white */
    --gray-100: #ffffff;
    --gray-200: #ffffff;
    --gray-500: #ffffff;
    --gray-700: #ffffff;
    --gray-900: #ffffff;
    --ink: #ffffff;
    
    /* Subtle background red tint in dark mode - inverted from light pink #fef2f2 to dark red/gray #2b1e1e */
    --teal-50: #2b1e1e;
    
    /* Admin/Page panel variables starting with --a- */
    --a-white: #1e1e1e;
    --a-slate-50: #1e1e1e;
    --a-slate-100: #ffffff;
    --a-slate-200: #ffffff;
    --a-slate-400: #ffffff;
    --a-slate-500: #ffffff;
    --a-slate-600: #ffffff;
    --a-slate-700: #ffffff;
    --a-slate-800: #ffffff;
    --a-slate-900: #ffffff;
    --a-teal-50: #2b1e1e;
    --a-danger-bg: #2b1e1e;
    --a-ok: #ffffff;
    --a-ok-bg: #1e1e1e;
  }

  /* Specific overrides for hardcoded colors in HTML/CSS */
  
  /* Navigation Search Overlay & Suggestions */
  .s-nav-search-overlay, #navSearchOverlay {
    background: #1e1e1e !important;
  }
  .s-search-suggestions, #searchSuggestions {
    background: #1e1e1e !important;
    border-color: #ffffff !important;
  }
  
  /* Modals */
  .s-product-modal, .product-modal, .a-modal, .modal-overlay .modal {
    background: #1e1e1e !important;
    border: 1px solid #ffffff !important;
  }
  
  /* Brand logos */
  .brand__mark, .s-brand__mark, .a-brand__mark {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1e1e1e !important;
  }
  :root:root .brand__mark img, :root:root .s-brand__mark img, :root:root .a-brand__mark img {
    filter: brightness(0) !important;
  }
  
  /* Keep footer in its light mode colors (Black background, white text) */
  .s-footer, footer.s-footer {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
  }
  .s-footer *, footer.s-footer * {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
  
  /* Hardcoded select element inputs in admin forms */
  select#adminProductCategoryFilter, select#offerSelectProduct {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
  }
  
  /* Select option overrides */
  select option {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
  }
  
  /* Glassmorphism containers and cards in dark mode: white background becomes dark gray */
  body div.s-feature-card,
  body div.s-featured-card,
  body div.s-review-card,
  body div.s-review-card--skeleton,
  body div.s-card,
  body div.product-card,
  body div.cat-browser-card,
  body div.cat-skeleton-card,
  body div.s-sidebar,
  body aside.s-sidebar,
  body section.checkout-summary,
  body section.checkout-form-panel,
  body div.s-hero__inner {
    background: rgba(30, 30, 30, 0.95) !important;
    background-color: rgba(30, 30, 30, 0.95) !important;
    border-color: #ffffff !important;
  }

  /* Keep image containers in their light mode color */
  .product-card__img,
  .cart-line__img,
  .checkout-line__img,
  .admin-table__thumb,
  #mainImageThumbnailContainer,
  .s-sk-img {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
  }
  .s-card__img,
  .s-prod-main-img-wrapper,
  .s-featured-card__img {
    background: linear-gradient(180deg, #ffffff, #f5f5f5) !important;
    border-color: #e5e5e5 !important;
  }
  .s-product-modal__img-wrapper,
  .s-prod-gallery-thumbs .s-prod-gallery-thumb {
    background: #ffffff !important;
    border-color: #e5e5e5 !important;
  }
  

  /* Ensure product images and other photos are not affected by any filters in dark mode */
  img:not(.brand__mark img):not(.s-brand__mark img):not(.a-brand__mark img) {
    filter: none !important;
  }

  /* Force all buttons in the entire site to keep their light mode styling */
  button,
  .btn,
  .s-btn,
  .a-btn,
  .qty-btn,
  .s-qty-btn,
  .page-btn,
  .s-lang-btn,
  .s-icon-btn,
  .icon-btn,
  .s-btn--share,
  .back-link,
  .row-actions .icon-action,
  .a-btn--danger-soft,
  .a-btn--edit-soft,
  .btn--primary,
  .s-btn--primary,
  .a-btn--primary,
  .btn--whatsapp,
  #confirmOrderBtn,
  .s-wa-cta__btn,
  .s-hero__cta {
    /* Reset styles that might be inherited from general dark mode variables */
  }

  /* 1. Primary buttons (Red background, white text) */
  .btn--primary,
  .s-btn--primary,
  .a-btn--primary,
  .btn--whatsapp,
  #confirmOrderBtn,
  .s-wa-cta__btn,
  .s-hero__cta {
    background-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
  }
  .btn--primary:hover,
  .s-btn--primary:hover,
  .a-btn--primary:hover,
  .btn--whatsapp:hover,
  #confirmOrderBtn:hover,
  .s-wa-cta__btn:hover,
  .s-hero__cta:hover {
    background-color: #b91c1c !important;
    background: #b91c1c !important;
    color: #ffffff !important;
  }
  .btn--primary *,
  .s-btn--primary *,
  .a-btn--primary *,
  .btn--whatsapp *,
  #confirmOrderBtn *,
  .s-wa-cta__btn *,
  .s-hero__cta * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* 2. Ghost/Secondary/Generic buttons (Light gray/white background, dark gray/black text) */
  button:not(.btn--primary):not(.s-btn--primary):not(.a-btn--primary):not(.btn--whatsapp):not(#confirmOrderBtn):not(.s-wa-cta__btn):not(.s-hero__cta):not(.s-lang-btn.is-active):not(.page-btn.is-active):not(.s-wa-float):not(.s-cart-float):not(.s-quicknav__link),
  .btn--ghost,
  .s-btn--ghost,
  .a-btn--ghost,
  .qty-btn,
  .s-qty-btn,
  .page-btn:not(.is-active),
  .s-lang-btn:not(.is-active),
  .s-icon-btn,
  .icon-btn,
  .s-btn--share,
  .back-link,
  .row-actions .icon-action {
    background-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
    color: #262626 !important;
    border-color: #e5e5e5 !important;
  }
  button:not(.btn--primary):not(.s-btn--primary):not(.a-btn--primary):not(.btn--whatsapp):not(#confirmOrderBtn):not(.s-wa-cta__btn):not(.s-hero__cta):not(.s-lang-btn.is-active):not(.page-btn.is-active):not(.s-wa-float):not(.s-cart-float):not(.s-quicknav__link):hover,
  .btn--ghost:hover,
  .s-btn--ghost:hover,
  .a-btn--ghost:hover,
  .s-btn--share:hover,
  .back-link:hover,
  .row-actions .icon-action:hover {
    background-color: #e5e5e5 !important;
    background: #e5e5e5 !important;
    color: #ef4444 !important;
  }
  button:not(.btn--primary):not(.s-btn--primary):not(.a-btn--primary):not(.btn--whatsapp):not(#confirmOrderBtn):not(.s-wa-cta__btn):not(.s-hero__cta):not(.s-lang-btn.is-active):not(.page-btn.is-active):not(.s-wa-float):not(.s-cart-float):not(.s-quicknav__link) *,
  .btn--ghost *,
  .s-btn--ghost *,
  .a-btn--ghost *,
  .qty-btn *,
  .s-qty-btn *,
  .page-btn:not(.is-active) *,
  .s-lang-btn:not(.is-active) *,
  .s-icon-btn *,
  .icon-btn *,
  .s-btn--share *,
  .back-link *,
  .row-actions .icon-action * {
    color: #262626 !important;
    fill: none;
    stroke: #262626 !important;
  }

  /* 3. Special soft buttons in Admin Panel */
  .a-btn--danger-soft {
    background-color: #fef2f2 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
  }
  .a-btn--edit-soft {
    background-color: #fef2f2 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
  }

  /* 4. Active/Selection switches */
  .s-lang-btn.is-active,
  .page-btn.is-active {
    background-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
  }
  .s-lang-btn.is-active *,
  .page-btn.is-active * {
    color: #ffffff !important;
  }

  /* Exclude Admin Panel: Force light mode variables on admin-page and all of its descendants */
  body.admin-page,
  body.admin-page * {
     --white: #ffffff !important;
     --gray-50: #ffffff !important;
     --gray-100: #f5f5f5 !important;
     --gray-200: #e5e5e5 !important;
     --gray-500: #737373 !important;
     --gray-700: #262626 !important;
     --gray-900: #000000 !important;
     --ink: #000000 !important;
     
     --a-white: #ffffff !important;
     --a-slate-50: #ffffff !important;
     --a-slate-100: #f5f5f5 !important;
     --a-slate-200: #e5e5e5 !important;
     --a-slate-400: #9ca3af !important;
     --a-slate-500: #737373 !important;
     --a-slate-600: #4b5563 !important;
     --a-slate-700: #262626 !important;
     --a-slate-800: #1f2937 !important;
     --a-slate-900: #000000 !important;
     --a-teal-50: #fef2f2 !important;
     --a-danger-bg: #fef2f2 !important;
     --a-ok: #000000 !important;
     --a-ok-bg: #ffffff !important;
  }

  /* Specific resets for hardcoded element overrides on admin page */
  body.admin-page,
  body.admin-page div,
  body.admin-page section,
  body.admin-page header,
  body.admin-page footer,
  body.admin-page .card,
  body.admin-page .container {
    background-color: var(--a-slate-50) !important;
    color: var(--a-slate-900) !important;
    border-color: var(--a-slate-200) !important;
  }
  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page h5,
  body.admin-page h6,
  body.admin-page p,
  body.admin-page span,
  body.admin-page a {
    color: var(--a-slate-900) !important;
  }
  body.admin-page .a-brand__mark img {
    filter: none !important;
  }
}

/* Homepage Hero Search Bar & Suggestions Liquid Glass - Light Mode (Default) */
:root:root .s-hero-search-form {
  background: rgba(255, 255, 255, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05), inset 0 2px 4px 0 rgba(255, 255, 255, 0.3) !important;
}
:root:root .s-hero-search-form:focus-within {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 12px 40px 0 rgba(239, 68, 68, 0.12), inset 0 2px 4px 0 rgba(255, 255, 255, 0.4) !important;
}
:root:root .s-hero-search-form :not(.s-btn) {
  background-color: transparent !important;
}
:root:root #heroSearchInput {
  color: #000000 !important;
  background: transparent !important;
  background-color: transparent !important;
}
:root:root #heroSearchInput::placeholder {
  color: #4b5563 !important;
}
:root:root .s-hero-search-form svg:not(.s-btn svg) {
  color: #4b5563 !important;
  stroke: #4b5563 !important;
}

/* Force Suggestions Dropdown to stay Light Mode Liquid Glass */
:root:root #heroSearchSuggestions {
  background: rgba(255, 255, 255, 0.7) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-top: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}
:root:root #heroSearchSuggestions .s-suggestion-item {
  color: #262626 !important;
  background: transparent !important;
  background-color: transparent !important;
}
:root:root #heroSearchSuggestions .s-suggestion-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}
:root:root #heroSearchSuggestions .s-suggestion-name {
  color: #000000 !important;
}
:root:root #heroSearchSuggestions .s-suggestion-price {
  color: #262626 !important;
}
:root:root #heroSearchSuggestions .s-suggestion-price--new {
  color: #b91c1c !important;
}
:root:root #heroSearchSuggestions .s-suggestion-price--old {
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}
:root:root #heroSearchSuggestions .s-suggestion-badge {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
:root:root #heroSearchSuggestions .s-suggestion-empty {
  color: #737373 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Homepage Hero Search Bar & Suggestions Liquid Glass - Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:root .s-hero-search-form {
    background: rgba(30, 30, 30, 0.45) !important;
    background-color: rgba(30, 30, 30, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 2px 0 rgba(255, 255, 255, 0.15) !important;
  }
  :root:root .s-hero-search-form:focus-within {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: rgba(20, 20, 20, 0.6) !important;
    background-color: rgba(20, 20, 20, 0.6) !important;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), inset 0 1px 2px 0 rgba(255, 255, 255, 0.25) !important;
  }
  :root:root #heroSearchInput {
    color: #ffffff !important;
  }
  :root:root #heroSearchInput::placeholder {
    color: #9ca3af !important;
  }
  :root:root .s-hero-search-form svg:not(.s-btn svg) {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
  }
  
  :root:root #heroSearchSuggestions {
    background: rgba(30, 30, 30, 0.65) !important;
    background-color: rgba(30, 30, 30, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-item {
    color: #e5e7eb !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-name {
    color: #ffffff !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-price {
    color: #d1d5db !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-price--new {
    color: #f87171 !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-price--old {
    color: #9ca3af !important;
  }
  :root:root #heroSearchSuggestions .s-suggestion-empty {
    color: #9ca3af !important;
  }
}

/* ============================================================
   GLOBAL PRODUCT IMAGES STYLING: SMART FIT (CLASS-BASED)
   ============================================================ */

/* Default: rectangular image → show fully with small padding */
.s-card__img,
.s-prod-main-img-wrapper,
.s-featured-card__img,
.s-product-modal__img-wrapper,
.s-prod-gallery-thumb,
.s-cart-line__img,
.checkout-line__img,
.cart-line__img,
.admin-table__thumb {
  padding: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.s-card__img img,
.s-prod-main-img-wrapper img,
.s-featured-card__img img,
.s-product-modal__img-wrapper img,
.s-prod-gallery-thumb img,
.s-cart-line__img img,
.checkout-line__img img,
.cart-line__img img,
.admin-table__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Square image class: JS adds .img-fit--square to the container → fill, no padding */
.s-card__img.img-fit--square,
.s-prod-main-img-wrapper.img-fit--square,
.s-featured-card__img.img-fit--square,
.s-product-modal__img-wrapper.img-fit--square,
.s-prod-gallery-thumb.img-fit--square,
.s-cart-line__img.img-fit--square,
.checkout-line__img.img-fit--square,
.cart-line__img.img-fit--square,
.admin-table__thumb.img-fit--square {
  padding: 0 !important;
}

.s-card__img.img-fit--square img,
.s-prod-main-img-wrapper.img-fit--square img,
.s-featured-card__img.img-fit--square img,
.s-product-modal__img-wrapper.img-fit--square img,
.s-prod-gallery-thumb.img-fit--square img,
.s-cart-line__img.img-fit--square img,
.checkout-line__img.img-fit--square img,
.cart-line__img.img-fit--square img,
.admin-table__thumb.img-fit--square img {
  object-fit: cover !important;
}