/* ============================================================
   SOLT — storefront
   Department-store treatment: white ground, black type, hairline
   rules, zero radius. Colour is reserved for reductions only.
   RTL-first, logical properties throughout.
   ============================================================ */

:root {
  --ink:       #000000;
  --ink-soft:  #4a4a4a;
  --ink-faint: #767676;
  --line:      #e3e3e3;
  --line-soft: #f0f0f0;
  --paper:     #ffffff;
  --card:      #ffffff;
  --stone:     #f4f4f4;   /* image ground */
  --sale:      #c8102e;   /* reductions only */

  --pad: 24px;
}

[data-theme="dark"] {
  --ink:       #ffffff;
  --ink-soft:  #b4b4b4;
  --ink-faint: #8a8a8a;
  --line:      #2a2a2a;
  --line-soft: #1e1e1e;
  --paper:     #0d0d0d;
  --card:      #0d0d0d;
  --stone:     #191919;
  --sale:      #ff5a70;
}

html { color-scheme: light; scroll-behavior: smooth; }
[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

/* Scrollbar — hairline, square, follows the theme tokens. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-corner { background: transparent; }

h1, h2, h3 {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Latin digits regardless of the Arabic font's numeral set */
.num, .num * {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum";
}

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus {
  inset-inline-start: 12px; inset-block-start: 12px; z-index: 99;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}

/* ============================ Announcement ============================ */

.announce {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 12px;
  letter-spacing: .02em;
  height: 34px;
  overflow: hidden;
}

.announce-track {
  display: flex;
  flex-direction: column;
  animation: announce 13s infinite;
}

.announce span { height: 34px; line-height: 34px; flex: none; }

@keyframes announce {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(-34px); }
  66%, 94%  { transform: translateY(-68px); }
  100%      { transform: translateY(0); }
}

/* ============================ Header ============================ */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand { text-decoration: none; line-height: 1.1; }

.brand-mark {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .34em;
  margin-inline-end: -.34em;
}

.brand-sub {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-faint);
  margin-top: 1px;
}

.main-nav { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; }

.main-nav a {
  text-decoration: none;
  font-size: 13px;
  color: var(--ink);
  padding-block: 24px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: border-color .15s, color .15s;
}

.main-nav a:hover { border-bottom-color: var(--ink); }

/* الرئيسية sits in a hairline chip so it reads as the anchor, not a category. */
.nav-home {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-bottom-width: 1px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--ink);
}
.nav-home:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.nav-cat {
  font-size: 12px;
  color: var(--ink-faint);
}
.nav-cat:hover { color: var(--ink); }

.cart-link, .theme-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background .14s ease, color .14s ease, transform .1s ease;
}
.cart-link:hover, .theme-btn:hover { background: var(--ink); color: var(--paper); }
.cart-link:hover .cart-count { background: var(--paper); color: var(--ink); }
.cart-link:active, .theme-btn:active { transform: scale(.92); }

.theme-btn .ic-moon { display: none; }
[data-theme="dark"] .theme-btn .ic-sun  { display: none; }
[data-theme="dark"] .theme-btn .ic-moon { display: block; }

.cart-count {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border-radius: 20px;
}

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0 6px;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-btn span { display: block; height: 1px; background: var(--ink); transition: transform .2s, opacity .2s; }
.menu-btn.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================ Layout ============================ */

main { max-width: 1420px; margin: 0 auto; padding: 0 var(--pad); }

.page-top { padding: 40px 0 20px; }
.page-top h1 { margin: 0; font-size: 26px; }
.page-sub { margin: 3px 0 0; color: var(--ink-faint); font-size: 13px; }

.crumbs { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 8px; letter-spacing: .04em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ============================ Hero ============================ */

.hero { padding: 24px 0 36px; max-width: 620px; }

.hero-title {
  margin: 0 0 16px;
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.hero-text {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 44ch;
}

.btn-lg {
  display: inline-block;
  padding: 13px 38px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-lg:hover { background: var(--paper); color: var(--ink); }

.btn-wa { background: var(--paper); color: var(--ink); }
.btn-wa:hover { background: var(--ink); color: var(--paper); }

/* ============================ Grid ============================ */

.strip { padding-bottom: 58px; }
.strip-more { text-align: center; margin-top: 30px; }

/* On a phone the two homepage strips show fewer cards than desktop (10 and
   20 instead of 15 and 25) — trimmed visually rather than fetched smaller,
   so the same query still backs both screen sizes. */
@media (max-width: 700px) {
  .strip-trending .grid > .card:nth-child(n+11) { display: none; }
  .strip-latest .grid > .card:nth-child(n+21)   { display: none; }
}

.strip-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ink);
}

.strip-head h2 { margin: 0; font-size: 18px; }

.strip-head a {
  margin-inline-start: auto;
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 42px 20px;
}

.card { text-decoration: none; display: block; }

.card-img {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--stone);
  overflow: hidden;
  margin-bottom: 12px;
}

.card-img img { width: 100%; height: 100%; object-fit: cover; }

/* Second photograph fades in on hover, as on a department-store card */
.card-img .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.card:hover .card-img .alt { opacity: 1; }

.card-noimg { display: block; width: 100%; height: 100%; background: var(--stone); }

.badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing: .08em;
  z-index: 2;
}

.badge-sale {
  background: var(--sale);
  color: #fff;
  inset-block-end: auto;
  inset-block-start: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.badge-one  { background: var(--ink); color: var(--paper); }

.card-cat {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.card-name { margin: 0 0 4px; font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.card:hover .card-name { text-decoration: underline; text-underline-offset: 3px; }

.card-price { margin: 0; font-size: 13px; font-weight: 500; }

.was { text-decoration: line-through; color: var(--ink-faint); font-weight: 400; margin-inline-end: 6px; }
.now-sale { color: var(--sale); }

/* ============================ Categories ============================ */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line);
  margin-bottom: 58px;
}

.cat-tile {
  padding: 22px 16px;
  text-decoration: none;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  transition: background .15s;
}

.cat-tile:first-child { border-inline-end: 1px solid var(--line); }
.cat-tile:hover { background: var(--stone); }

.cat-name { display: block; font-size: 14px; font-weight: 500; margin-bottom: 1px; }
.cat-n    { display: block; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); }

/* ============================ Toolbar ============================ */

.toolbar { padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.sort { display: flex; gap: 22px; }

.sort a {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  text-decoration: none;
  padding-block-end: 2px;
  border-bottom: 1px solid transparent;
}

.sort a.on { color: var(--ink); border-bottom-color: var(--ink); }
.sort a:hover { color: var(--ink); }

/* ============================ Product page ============================ */

.product {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 440px);
  justify-content: center;
  gap: 56px;
  align-items: start;
  padding: 34px 0 80px;
}

/* Vertical thumbnail rail beside the main image on desktop. */
.gallery { display: flex; flex-direction: row-reverse; gap: 12px; }

.gal-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 66px;
}

.gal-main {
  position: relative;
  display: block;
  flex: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--stone);
  overflow: hidden;
  cursor: zoom-in;
}
.gal-main[disabled], .gal-main--empty { cursor: default; }
.gal-main--empty { display: grid; place-items: center; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gal-main:not([disabled]):hover img { transform: scale(1.04); }

.gal-zoom {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity .15s;
}
.gal-main:hover .gal-zoom { opacity: 1; }
@media (hover: none) { .gal-main .gal-zoom { opacity: 1; } }

.sold-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  letter-spacing: .18em;
  color: #fff;
  background: rgba(0,0,0,.5);
}

.gal-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--stone);
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s, border-color .15s;
}

.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb:hover { opacity: .8; }
.gal-thumb.on { opacity: 1; border-color: var(--ink); }

@media (max-width: 700px) {
  .gallery { flex-direction: column; max-width: 75%; margin-inline: auto; }
  .gal-thumbs { flex-direction: row; flex-wrap: wrap; flex-basis: auto; }
  .gal-thumb { width: 56px; aspect-ratio: 3 / 4; }
}

/* ---------- Image viewer ---------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.lightbox::backdrop { background: var(--paper); }

.lightbox[open] {
  display: flex;
  flex-direction: column;
  animation: lb-in .16s ease both;
}
.lightbox.closing { animation: lb-out .14s ease both; }

@keyframes lb-in  { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lb-out { to   { opacity: 0; } }

.lb-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 18px 10px;
  overflow: hidden;
}

.lb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  touch-action: none;
  transition: transform .2s ease;
}
.lb-img.zoomed { cursor: grab; transition: none; }
.lb-img.grabbing { cursor: grabbing; }

.lb-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lb-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.lb-bar {
  display: flex;
  direction: ltr;            /* ‹ 2 / 5 › — same order everywhere */
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 0 22px;
}
.lb-bar.solo { display: none; }

.lb-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lb-nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.lb-count {
  min-width: 52px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lightbox.closing { animation: none; }
}

.pinfo { padding-top: 2px; max-width: 440px; }

.pname { margin: 0 0 12px; font-size: 27px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }

.pprice {
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
  font-weight: 500;
}

.pdesc {
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.85;
}

.add-form { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; flex-wrap: wrap; }

.qty { display: flex; align-items: center; border: 1px solid var(--line); }

.qty-btn {
  width: 40px;
  min-height: 46px;
  font-size: 15px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
}

.qty-btn:hover { color: var(--ink); }

.qty input {
  width: 38px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 500;
  background: none;
  color: var(--ink);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.add-form .btn-lg { flex: 1; min-width: 180px; }

.ask-wa {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.ask-wa:hover { color: var(--ink); border-bottom-color: var(--ink); }

.sold-msg {
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--sale);
  border: 1px solid var(--sale);
}

.pfacts { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.pfacts li { font-size: 13px; color: var(--ink-soft); padding-block: 5px; }
.pfacts span { display: inline-block; min-width: 78px; color: var(--ink-faint); font-size: 11px; letter-spacing: .06em; }

/* ============================ Promise ============================ */

.promise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line);
  margin-bottom: 6px;
}

.promise-item { padding: 34px 24px; border-inline-start: 1px solid var(--line); }
.promise-item:first-child { border-inline-start: 0; }
.promise-item h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; }
.promise-item p  { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ============================ Empty ============================ */

.soon { padding: 84px 0 96px; text-align: center; }
.soon p { margin: 0 0 4px; font-size: 15px; }
.soon-sub { color: var(--ink-faint); font-size: 13px; }
.soon-sub a { border-bottom: 1px solid currentColor; text-decoration: none; }

/* ============================ Footer ============================ */

.site-foot { border-top: 1px solid var(--ink); }

.foot-inner {
  /* Wider than the page body on purpose: the three blocks push out to
     the edges instead of clustering near the middle. */
  max-width: 1760px;
  margin: 0 auto;
  padding: 52px 46px 36px;
  display: grid;
  /* Equal thirds so the three blocks sit at the right edge, the centre
     and the left edge rather than bunching toward the middle. */
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: start;
}

/* RTL: first column is the right edge, last is the left edge. */
.foot-inner > .foot-col:first-child { text-align: start; }
.foot-inner > .foot-col:nth-child(2) { text-align: center; }
.foot-inner > .foot-col:last-child  { text-align: end; }

.foot-inner > .foot-col:nth-child(2) .foot-links-row { justify-content: center; }
.foot-inner > .foot-col:last-child .social-icons { justify-content: flex-end; }

.site-foot .brand-mark { margin-bottom: 8px; }

.foot-col h3 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.foot-col p  { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

.foot-links-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allows links to wrap to the next line if there are too many categories */
  align-items: center;
  gap: 12px; /* Distance between each link */
}
.foot-col a {
  display: block;
  font-size: 13px;
  text-decoration: none;
  padding-block: 3px;
  color: var(--ink-soft);
}

.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.social-icons {
  display: flex;
  flex-direction: row; /* forces horizontal row */
  align-items: center; /* aligns icon centers vertically */
  gap: 12px;           /* adjust spacing between icons */
}

.wa { color: var(--ink) !important; font-weight: 500; }
.foot-note { margin-top: 8px !important; font-size: 11.5px !important; color: var(--ink-faint) !important; }

.wa:hover, .site-search button:hover { opacity: .6; }

.ig-link { color: var(--ink) !important; font-weight: 500; }
.foot-note { margin-top: 8px !important; font-size: 11.5px !important; color: var(--ink-faint) !important; }

.ig-link:hover, .site-search button:hover { opacity: .6; }

.tt { color: var(--ink) !important; font-weight: 500; }
.foot-note { margin-top: 8px !important; font-size: 11.5px !important; color: var(--ink-faint) !important; }

.tt:hover, .site-search button:hover { opacity: .6; }

.foot-base {
  border-top: 1px solid var(--line);
  padding: 16px var(--pad);
  text-align: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

.foot-base a { color: inherit; text-decoration: none; }
.foot-base a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }



/* ============================ WhatsApp float ============================ */
.wa-float {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 22px;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    color: #25d366;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    transition: opacity .15s;
}

.wa-float svg {
    width: 30px;
    height: 30px;
}

/* ============================ Responsive ============================ */

@media (max-width: 960px) {
  .product { grid-template-columns: 1fr; gap: 30px; }
  .gallery { max-width: 480px; }
  .pinfo { max-width: none; }
  .pname { font-size: 22px; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding-inline: var(--pad); }
  .promise-item { border-inline-start: 0; border-top: 1px solid var(--line); padding: 24px 0; }
  .promise-item:first-child { border-top: 0; }
}

@media (max-width: 700px) {
  .head-inner { height: 56px; gap: 10px; }
  .menu-btn { display: flex; }
  .brand-mark { font-size: 18px; }

  /* hamburger + logo at the start; search + theme + cart grouped at the far
     side (the single auto margin lives on .site-search, see 860px block) */

  .main-nav {
    position: fixed;
    inset-block-start: 56px;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    padding: 0 var(--pad) 12px;
    display: none;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }

  .main-nav.open { display: flex; }
  .main-nav a { padding-block: 13px; border-bottom: 1px solid var(--line-soft); }
  .main-nav a:last-child { border-bottom: 0; }
  .nav-home { padding: 13px 0; border: 0; border-bottom: 1px solid var(--line-soft); font-weight: 700; }
  .nav-home:hover { background: none; color: var(--ink); }
  .nav-cat { font-size: 13px; }

  .hero { padding: 44px 0 38px; }

  /* Product facts: label on its own line so long shipping text stays tidy */
  .pfacts li { padding-block: 7px; }
  .pfacts li > span:first-child { display: block; min-width: 0; margin-bottom: 1px; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .card-name { font-size: 12.5px; }
  .page-top { padding: 26px 0 16px; }
  .page-top h1 { font-size: 21px; }
  .wa-float { width: 42px; height: 42px; inset-block-end: 14px; inset-inline-start: 14px; }

  /* Footer: one centred column instead of the broken 2-col grid. */
  .foot-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
    padding: 38px var(--pad) 26px;
  }
  .foot-inner > .foot-col:first-child,
  .foot-inner > .foot-col:nth-child(2),
  .foot-inner > .foot-col:last-child { text-align: center; }
  .foot-links-row,
  .foot-inner > .foot-col:last-child .social-icons { justify-content: center; }
  .foot-col a { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  *, .announce-track { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Wrappers ---------- */

.card-body { padding: 0; }

/* The photographs stay in view while the details scroll, so a long
   description never leaves the reader looking at empty space. */
@media (min-width: 961px) {
  .gallery { position: sticky; inset-block-start: 90px; align-self: start; }
}

/* ============================ Flash ============================ */

.flash {
  position: fixed;
  inset-inline: 16px;
  inset-block-start: 76px;
  z-index: 50;
  max-width: 380px;
  margin: 0 auto;
  padding: 12px 18px;
  font-size: 13px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  animation: flash-in .3s ease, flash-out .4s ease 2.6s forwards;
}

.flash-err { color: var(--sale); border-color: var(--sale); }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flash-out {
  to { opacity: 0; transform: translateY(-10px); }
}

/* ============================ Cart ============================ */

.cart-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
  padding-bottom: 70px;
  align-items: start;
}

.cart-lines { border-top: 1px solid var(--ink); }

.cart-line {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.cl-img { display: block; aspect-ratio: 3/4; background: var(--stone); overflow: hidden; }
.cl-img img { width: 100%; height: 100%; object-fit: cover; }

.cl-info { display: flex; flex-direction: column; gap: 3px; }
.cl-name { font-size: 14px; text-decoration: none; }
.cl-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-unit { font-size: 12.5px; color: var(--ink-faint); }
.cl-one  { font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); margin-top: 4px; }

.cl-qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cl-qty label { font-size: 11.5px; color: var(--ink-faint); }
.cl-qty select {
  font: inherit; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0;
}

.cl-end { text-align: end; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cl-total { font-size: 14px; font-weight: 500; }

.cl-remove {
  font: inherit; font-size: 11.5px; color: var(--ink-faint);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.cl-remove:hover { color: var(--sale); border-bottom-color: var(--sale); }

/* ---------- Summary panel ---------- */

.cart-sum, .co-sum { border: 1px solid var(--ink); padding: 24px; }

.cart-sum h2, .co-sum h2 {
  margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}

.sum-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding-block: 6px;
}

.sum-row.dim, .sum-row.dim span { color: var(--ink-faint); }

.sum-total {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--ink);
  font-size: 15px; font-weight: 700;
}

.cart-sum .btn-lg, .co-sum .btn-lg { display: block; width: 100%; text-align: center; margin-top: 18px; }

.sum-discount span:last-child { color: var(--sale); }

.coupon-form { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.coupon-form input {
  flex: 1; min-width: 0; padding: 9px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.coupon-form input:focus { outline: none; border-color: var(--ink); }
.coupon-applied { flex: 1; font-size: 13px; }

.pay-method { display: flex; gap: 8px; margin-top: 18px; }
.pay-opt {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 10px; font-size: 12.5px; text-align: center;
  border: 1px solid var(--line); cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.pay-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-opt:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.pay-transfer {
  margin-top: 12px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--stone);
}
.pay-transfer p { margin: 0 0 6px; }
.pay-transfer a { color: var(--ink); }

/* Dedicated page (payment-info.php) — same idea, more breathing room. */
.pay-info {
  max-width: 480px; margin: 0 auto 70px;
  padding: 24px 26px; line-height: 1.8;
  border: 1px solid var(--line); background: var(--stone);
}
.pay-info p { margin: 0 0 14px; }
.pay-info ul { margin: 0 0 14px; padding-inline-start: 20px; }
.pay-info li { margin-bottom: 8px; }
.pay-info .btn-lg { display: block; text-align: center; margin-top: 20px; }

.sum-note { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.sum-back {
  display: block; margin-top: 14px; padding: 11px 20px;
  text-align: center; font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink); text-decoration: none; border: 1px solid var(--line);
}
.sum-back:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ============================ Checkout ============================ */

.checkout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  padding-bottom: 70px;
  align-items: start;
}

.co-form h2 {
  margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}

.co-form label {
  display: block; margin-bottom: 6px; font-size: 12px;
  letter-spacing: .04em; color: var(--ink-soft);
}

.co-form input, .co-form select, .co-form textarea {
  width: 100%; padding: 11px 13px; margin-bottom: 4px;
  font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--paper); color: var(--ink);
}

.co-form textarea { resize: vertical; line-height: 1.7; }

.co-form input:focus, .co-form select:focus, .co-form textarea:focus {
  outline: none; border-color: var(--ink);
}

.co-form .hint { display: block; margin-bottom: 16px; font-size: 11.5px; color: var(--ink-faint); }
.co-form .err  { display: block; margin-bottom: 14px; font-size: 12px; color: var(--sale); }
.co-form input + label, .co-form textarea + label, .co-form select + label { margin-top: 16px; }

.req { color: var(--sale); }
.opt { color: var(--ink-faint); font-weight: 400; }

.co-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding-block: 8px; border-bottom: 1px solid var(--line-soft);
}

.co-name em { font-style: normal; color: var(--ink-faint); margin-inline-start: 4px; }
.co-sum .sum-row:first-of-type { margin-top: 10px; }

/* ============================ Confirmation ============================ */

.confirm { max-width: 470px; margin: 0 auto; padding: 56px 0 84px; text-align: center; }
.confirm-tick { color: var(--ink); margin-bottom: 18px; display: flex; justify-content: center; }
.confirm h1 { margin: 0 0 8px; font-size: 25px; }
.confirm-lead { margin: 0 0 28px; color: var(--ink-soft); font-size: 14px; }

.confirm-no {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border: 1px solid var(--ink); margin-bottom: 20px;
}
.confirm-no span { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-faint); }
.confirm-no strong { font-size: 16px; letter-spacing: .04em; }

.confirm-box { border: 1px solid var(--line); padding: 18px; margin-bottom: 22px; text-align: start; }

.confirm-facts { list-style: none; margin: 0 0 28px; padding: 0; }
.confirm-facts li { font-size: 13px; color: var(--ink-soft); padding-block: 3px; }
.confirm-facts li::before { content: '—'; color: var(--ink-faint); margin-inline-end: 7px; }

@media (max-width: 900px) {
  .cart-wrap, .checkout { grid-template-columns: 1fr; gap: 30px; }
  .cart-line { grid-template-columns: 72px 1fr auto; gap: 14px; }
}

/* ---------- Free-shipping threshold ---------- */

.ship-nudge, .ship-free {
  margin: 8px 0 2px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--line);
}

.ship-free { border-color: var(--ink); font-weight: 500; }

/* ---------- Checkout error summary ---------- */

.err-box {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 2px solid var(--sale);
  color: var(--sale);
  outline: none;
}

.err-box strong { display: block; margin-bottom: 6px; font-size: 14px; }
.err-box ul { margin: 0; padding-inline-start: 18px; }
.err-box li { font-size: 13px; padding-block: 2px; }

.co-form .bad { border-color: var(--sale) !important; border-width: 2px; }

/* ---------- Checkout form: hold the stacked layout everywhere ----------
   In-app browsers (Instagram, Facebook) and some Android WebViews do not
   inherit the block layout reliably, which collapses labels and fields
   onto the same line. Stating it explicitly costs nothing and prevents it. */

.co-form { display: block; width: 100%; }

.co-form label,
.co-form .hint,
.co-form .err {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}

.co-form input,
.co-form select,
.co-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  float: none;
  box-sizing: border-box;
}

.checkout, .cart-wrap { width: 100%; }

@media (max-width: 900px) {
  .checkout, .cart-wrap {
    display: block;          /* grid can misbehave in older WebViews */
  }
  .co-form { margin-bottom: 30px; }
}

/* ============================ Header search ============================ */

.site-search {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  border: 1px solid var(--line);
  height: 34px;
  transition: border-color .15s;
}

.site-search:focus-within { border-color: var(--ink); }

.site-search input {
  width: 160px;
  height: 100%;
  padding: 0 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
}

.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search input::placeholder { color: var(--ink-faint); }

.site-search button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 100%;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

/* the nav no longer needs to push everything right */
.main-nav { margin-inline-start: 0; }


/* ============================ New badge ============================ */

.badge-new {
  inset-block-end: auto;
  inset-block-start: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* ============================ Trust strip, moved up ============================ */

.promise-top {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 54px;
}

.promise-top .promise-item { padding: 22px 24px; }
.promise-top .promise-item h3 { font-size: 12px; }
.promise-top .promise-item p  { font-size: 12.5px; }

@media (max-width: 1100px) {
  .site-search input { width: 120px; }
  .main-nav { gap: 18px; }
}

@media (max-width: 860px) {
  /* collapse to just the icon — it submits to shop.php where the full
     search field lives */
  .site-search { border: 0; height: 34px; margin-inline-start: auto; }
  .site-search input { display: none; }
}

@media (max-width: 700px) {
  .promise-top .promise-item { padding: 18px 0; }
}

/* ---------- Search on the shop page ---------- */

.shop-search { display: none; }

@media (max-width: 860px) {
  .toolbar { padding-bottom: 0; }

  .shop-search {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    height: 40px;
  }

  .shop-search:focus-within { border-color: var(--ink); }

  .shop-search input {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
    -webkit-appearance: none;
  }

  .shop-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

  .shop-search button {
    padding: 0 18px;
    font: inherit;
    font-size: 13px;
    color: var(--paper);
    background: var(--ink);
    border: 0;
    cursor: pointer;
  }

  .sort { padding-bottom: 14px; overflow-x: auto; }
}

/* ============================ Hero mark ============================
   A logo, not a photograph: contained rather than cropped, centred in
   its half, and left at its own proportions. */

.hero-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
  max-width: none;
}

.hero-split .hero-copy { max-width: 520px; }

.hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mark img {
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A dark logo would disappear on the dark theme, so invert it there.
   Remove this rule if the logo is already light or full-colour. */
[data-theme="dark"] .hero-mark img { filter: invert(1) hue-rotate(180deg); }

/* --- قسم المميزات "التوصيل والدفع" (الكمبيوتر) --- */

.cats {
    display: flex !important;
    flex-wrap: nowrap !important; /* يجبر الأقسام تكون بصف واحد دائماً */
    gap: 10px !important;
    border: none !important;
    background: transparent !important;
    margin-bottom: 50px !important;
    padding: 0 !important;
}
.cats .cat-tile {
    flex: 1 !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--stone) !important;
    padding: 16px 2px !important;
    text-align: center !important;
    min-width: 0 !important;
}
.cats .cat-name {
    font-size: 14px !important;
    font-weight: bold !important;
    display: block !important;
}
.cats .cat-n {
    font-size: 11px !important;
    display: block !important;
    color: var(--ink-faint) !important;
    transition: color .15s ease;
}

/* Hover: card brightens slightly, no moving parts. */
.cats .cat-tile {
    transition: background .18s ease !important;
}
.cats .cat-tile:hover {
    background: var(--line) !important;
}
.cats .cat-tile:hover .cat-name { color: var(--ink) !important; }
.cats .cat-tile:hover .cat-n    { color: var(--ink-soft) !important; }

@media (max-width: 1000px) {
    .hero-split { 
        grid-template-columns: 1fr !important; 
    }
    .hero-split .hero-copy { 
        max-width: none !important; 
    }
    .hero-mark { 
        display: none !important; 
    }
}
.promise-top {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        text-align: center !important;
        border: none !important;
    }
    .promise-top div {
        /* Logical, not physical. The page is RTL, so border-right landed on
           the OUTER right edge of the strip and the divider between the
           middle and the left block was never drawn. border-inline-end
           resolves to the left side here and to the right side in LTR. */
        border-inline-start: 0;          /* drop the base rule's divider... */
        border-inline-end: 1px solid #333;  /* ...so only one hairline is drawn */
        padding: 0 5px;
    }
    .promise-top div:last-child {
        border-inline-end: none;
    }
    .promise-top h3, .promise-top h4 { 
        font-size: 11px !important; 
        margin-bottom: 5px !important;
    }
    .promise-top p { 
        font-size: 9px !important; 
        line-height: 1.2 !important;
    }
.cats .cat-tile {
        padding: 10px 1px !important;
    }
    .cats .cat-name {
        font-size: 10px !important; /* تصغير الخط ليناسب 7 أقسام */
    }
    .cats .cat-n {
        font-size: 8px !important;
    }
/* ---------- Low stock ---------- */

.cl-low {
  display: block;
  font-size: 11.5px;
  color: var(--sale);
  margin-top: 2px;
}
/* ---------- Size / colour picker ---------- */

.pick { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }

/* :not([hidden]) — plain .variant-low{display:block} would outrank the
   browser's own [hidden]{display:none} and the note would never actually
   hide once JS had shown it once. */
.variant-low:not([hidden]) { display: block; flex-basis: 100%; font-size: 12px; color: var(--sale); }

.pick-label { font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); }
.pick-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block;
  min-width: 44px;
  padding: 9px 16px;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--line);
  transition: border-color .12s, background .12s, color .12s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Out of stock: stays visible so the customer knows it exists, but reads
   as unavailable and can't be picked. */
.chip:has(input:disabled) { cursor: not-allowed; }
.chip:has(input:disabled) span { opacity: .4; }
.chip:has(input:disabled):hover span { border-color: var(--line); }

.cl-variant {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* ============================================================
   Phone tidy-up: trust strip + category strip
   (overrides the un-scoped 3-col / nowrap rules above)
   ============================================================ */
@media (max-width: 620px) {
  .promise-top {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .promise-top > div {
    border-inline-end: 0 !important;
    border-top: 1px solid #333 !important;
    padding: 15px 4px !important;
  }
  .promise-top > div:first-child { border-top: 0 !important; }
  .promise-top h3, .promise-top h4 { font-size: 12px !important; margin-bottom: 4px !important; }
  .promise-top p { font-size: 12px !important; line-height: 1.55 !important; }

  .cats { flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 30px !important; }
  .cats .cat-tile {
    flex: 1 0 30% !important;
    padding: 8px 4px !important;
  }
  .cats .cat-name { font-size: 11px !important; }
  .cats .cat-n { font-size: 9px !important; }
}