/* ============================================================
   Thikrak (ذكراك) — Salla custom CSS  (v3: no theme-variable overrides + mobile slider fixes)
   Paste into: Theme editor → </> (custom code) → CSS
   Brand tokens + font. Selectors marked [CHECK] must be verified
   against the installed theme's class names (right-click → Inspect).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');

:root{
  --tk-terracotta:#C45F3C; --tk-terracotta-dark:#A84D2E;
  --tk-cream:#FBF3E8; --tk-blush:#F3E3D6; --tk-cocoa:#3E2A22; --tk-muted:#7A6358;
  --tk-radius:22px;
}
body, body *:not(i):not(svg):not(path){ font-family:'El Messiri','Tajawal',sans-serif; }
/* Page background is set in the theme editor (palette icon), not here. */
h1,h2,h3,h4,.section-title,.sec-title{ font-family:'El Messiri',sans-serif !important; color:var(--tk-cocoa); font-weight:700; }

/* Buttons [CHECK: .btn, .s-button-primary, .s-add-product-button] */
.btn,.btn--primary,.s-button-primary,.s-add-product-button,button[type=submit].btn{
  background:var(--tk-terracotta) !important; color:#fff !important; border-color:var(--tk-terracotta) !important;
  border-radius:999px !important; font-weight:600 !important; font-family:inherit !important;
}
.btn:hover,.btn--primary:hover,.s-button-primary:hover{ background:var(--tk-terracotta-dark) !important; }
.btn--outline,.btn-outline{ color:var(--tk-terracotta) !important; border-color:var(--tk-terracotta) !important; background:transparent !important; }

/* Product cards [CHECK: .product-entry, .s-product-card-entry] */
.product-entry,.s-product-card-entry,.product-card{
  background:#fff; border-radius:var(--tk-radius) !important; overflow:hidden; border:0 !important;
  transition:transform .2s, box-shadow .2s;
}
.product-entry:hover,.s-product-card-entry:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(62,42,34,.08); }
.product-entry__title,.s-product-card-content-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.product-entry__price,.s-product-card-price{ color:var(--tk-cocoa); font-weight:700; }
/* Promo badge → cocoa pill (keep only meaningful labels) */
.s-product-card-promotion-title,.product-promotion-title{ background:var(--tk-cocoa) !important; color:#fff !important; border-radius:999px !important; font-size:.78rem; }

/* Header */
header.store-header,.store-header{ border-bottom:1px solid var(--tk-blush); }
/* Footer */
/* Footer colors: set in the theme editor → تذييل الصفحة. Uncomment to force:
footer.store-footer{ background:var(--tk-terracotta) !important; color:var(--tk-cream) !important; }
footer.store-footer a{ color:var(--tk-cream) !important; } */
/* Inputs (name option) */
input.form-control,input.s-input,textarea.form-control{ border:2px solid var(--tk-blush) !important; border-radius:14px !important; background:var(--tk-cream) !important; padding:12px 14px !important; }
input.form-control:focus,input.s-input:focus{ border-color:var(--tk-terracotta) !important; box-shadow:none !important; }

/* Injected sections (from thikrak-salla-inject.js) */
.tk{ font-family:'El Messiri',sans-serif; color:var(--tk-cocoa); direction:rtl; text-align:right; }
.tk *{ box-sizing:border-box; }
.tk-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }
.tk-topbar{ background:var(--tk-terracotta); color:#fff; text-align:center; font-size:.9rem; padding:8px 12px; }
.tk-trust{ background:var(--tk-cream); border-top:1px solid var(--tk-blush); border-bottom:1px solid var(--tk-blush); padding:30px 0; }
.tk-trust ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.tk-trust li{ display:flex; align-items:center; gap:12px; }
.tk-trust .ico{ flex:0 0 54px; height:54px; border-radius:50%; background:var(--tk-blush); display:flex; align-items:center; justify-content:center; }
.tk-trust svg{ width:26px; height:26px; fill:none; stroke:var(--tk-terracotta); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tk-trust strong{ display:block; font-size:1rem; } .tk-trust small{ display:block; font-size:.86rem; color:var(--tk-muted); }
.tk-name{ background:var(--tk-blush); padding:56px 0; }
.tk-name .row{ display:flex; align-items:center; gap:48px; }
.tk-name h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--tk-terracotta); margin:0 0 .35em; }
.tk-name p{ font-size:1.15rem; line-height:1.9; margin:0 0 1.4em; }
.tk-name .art{ flex:0 0 220px; color:var(--tk-terracotta); } .tk-name .art svg{ width:100%; height:auto; display:block; }
.tk-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:1.6em; } .tk-pills span{ background:var(--tk-cream); border-radius:999px; padding:.35em 1em; font-size:.95rem; }
.tk-btn{ display:inline-block; background:var(--tk-terracotta); color:#fff !important; font-weight:600; padding:.8em 2.2em; border-radius:999px; text-decoration:none; }
.tk-btn:hover{ background:var(--tk-terracotta-dark); }
.tk-faq{ padding:60px 20px; max-width:820px; margin:0 auto; }
.tk-faq h2{ text-align:center; font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 .3em; } .tk-faq .lead{ text-align:center; color:var(--tk-muted); margin:0 0 28px; }
.tk-faq details{ background:#fff; border-radius:16px; padding:16px 20px; margin-bottom:12px; }
.tk-faq summary{ font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.tk-faq summary::-webkit-details-marker{ display:none; } .tk-faq summary::after{ content:'+'; color:var(--tk-terracotta); font-size:1.4rem; } .tk-faq details[open] summary::after{ content:'−'; }
.tk-faq details p{ padding-top:10px; color:var(--tk-muted); margin:0; }
.tk-pinfo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.tk-pinfo div{ background:#fff; border-radius:14px; padding:12px 14px; display:flex; gap:10px; align-items:center; font-size:.95rem; }
.tk-pinfo svg{ width:22px; height:22px; fill:none; stroke:var(--tk-terracotta); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tk-name-hint{ font-size:.9rem; color:var(--tk-muted); margin:6px 0 10px; }
@media (max-width:900px){ .tk-trust ul{ grid-template-columns:repeat(2,1fr); } .tk-name .row{ flex-direction:column-reverse; text-align:center; gap:22px; } .tk-name .art{ flex-basis:auto; width:140px; } .tk-pills{ justify-content:center; } .tk-pinfo{ grid-template-columns:1fr; } }
@media (max-width:480px){ .tk-trust ul{ grid-template-columns:1fr; } }

/* ============================================================
   v3 additions
   ============================================================ */

/* Hide slider arrows on phones (swipe + dots remain) */
@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next,
  .slick-prev,
  .slick-next,
  [class*="slider"] button[aria-label*="prev" i],
  [class*="slider"] button[aria-label*="next" i],
  [class*="slider"] [class*="arrow"] {
    display: none !important;
  }
}

/* Slider arrows on desktop: smaller, cream, and kept to the edges */
@media (min-width: 769px) {
  .swiper-button-prev, .swiper-button-next {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(251,243,232,.9); color: var(--tk-cocoa);
  }
  .swiper-button-prev::after, .swiper-button-next::after { font-size: 16px; }
}

/* WhatsApp button: keep clear of the bottom nav on phones */
@media (max-width: 768px) {
  .whatsapp-btn, [class*="whatsapp"] a[href*="wa.me"], a[href*="wa.me"].floating {
    bottom: 84px !important;
  }
}