/*! LANT — Custom Theme CSS · v2 · (c) 2026 LANT · Proprietary.
    Salla → تصميم المتجر → تخصيص الثيم → تخصيص باستخدام CSS

    Built on Prestige. Rule: no !important unless setting the property
    inline fails to hold — that proves the theme used !important first.
    v94 carried 785; this file carries 15 (recounted).

    00  Colours
    01–01c  Header (desktop · mobile · cart badge)
    02–02d  Footer
    03–03d  Product page
    09  Engraving file field
    10–10b  Cart line / card
    11  Delivery · 12 Installment · 13 Not-included
    14  Assist · 15 Notices · 16 Track · 17 Blog
*/


/* ==================================================================
   00 · THE TWO COLOURS
   ------------------------------------------------------------------
   The store colour (--color-primary) is the merchant's, and it means
   one thing: this is an action, or this is chosen. The add-to-cart
   button, the selected option, the active dot, a saved product, the
   cart count.

   Everything else that happens to be dark is not the store colour —
   it is ink. Slider arrows, unselected dots, an unsaved bookmark: they
   inform, they are not offers. Turning the store blue made the
   difference visible, because a page where everything is the store
   colour has no store colour at all.

   Ink is written here once. It is not a Salla setting — the platform
   has no variable for body ink — so this line is the single place to
   change it.
   ================================================================== */
.app-inner { --lant-ink: #1d1d1f; }


/* ==================================================================
   01 · HEADER — desktop
   ------------------------------------------------------------------
   Prestige stacks two rows, 136px total, with «تصغير حجم الهيدر»
   already on: .prestige-header (56) + .navbar-mobile-menu (80).
   Rebuilt as one 44px line — logo right, links centred, search by the
   account — by dissolving both boxes rather than overriding them.

   BREAKPOINT IS 1025, NOT 1024. At 1024 and below mmenu moves
   #mobile-menu out into its drawer, so a 1024 floor styles a header
   whose menu has already left and the empty flex item pushes the icons
   off-screen. The move is one-way: test any width on a fresh load.

   44 = 32 (icon box) + 12 (padding). The rule is an inset shadow, not
   a border, so it adds no height.
   ================================================================== */

@media (min-width: 1025px) {

  .store-header nav > div:has(> .prestige-header) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 48px;
    padding-block: 6px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
  }

  /* dissolved so their children become flex items that `order` can move */
  .store-header .prestige-header,
  .store-header .prestige-header > div:first-child {
    display: contents;
  }

  /* RTL: order 1 is furthest right */
  .store-header .prestige-header > a { order: 1; }
  .store-header .navbar-mobile-menu { order: 2; flex: 1; margin-inline: 16px; }
  .store-header .prestige-header > div:first-child > button { order: 3; }
  .store-header .prestige-header > div:last-child { order: 5; }

  /* النافذة صفر العرض لكنها عنصر مرن قبل الشعار — تُخفى.
     أيقونة اللغة تجلس مع أيقونات الحساب، بنفس الصندوق ٣٢. */
  .store-header .prestige-header > div:first-child > salla-localization-modal {
    display: none;
  }

  .store-header .prestige-header > div:first-child > div:has(.sicon-lang) {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
  }

  .store-header .prestige-header > div:first-child > div:has(.sicon-lang) > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
  }

  .store-header .navbar-mobile-menu {
    align-self: stretch;
    height: auto;
    padding-inline: 0;
    margin-block: -6px;      /* past the wrapper's padding, onto the rule */
    background: transparent;
    min-width: 0;            /* else min-content held 728 for 680 of links */
  }

  /* !important earned: an inline background did not clear it */
  .store-header .navbar-mobile-menu > nav {
    background: transparent !important;
  }

  /* Direct-child chain throughout: the dropdown carries its own ul/li/a,
     and descendant selectors flattened it to a fraction of its 224×93. */
  .store-header .navbar-mobile-menu > nav,
  .store-header .navbar-mobile-menu > nav > ul,
  .store-header .navbar-mobile-menu > nav > ul > li { height: 100%; }

  .store-header .navbar-mobile-menu > nav > ul {
    padding-block-start: 0;
    align-items: stretch;   /* centring left a 2px dead strip on the rule */
    flex-wrap: nowrap;
  }

  .store-header .navbar-mobile-menu > nav > ul > li { padding-block: 0; }

  /* The link fills the line rather than losing its padding: that padding
     was the bridge the pointer crosses to the dropdown, and zeroing it
     made the menu vanish mid-travel.
     !important earned: an inline style left it 44px tall. */
  .store-header .navbar-mobile-menu > nav > ul > li > a {
    height: 100% !important;
    padding-block: 0 !important;
    display: flex;
    align-items: center;
    white-space: nowrap;    /* labels broke inside their own link */
  }

  /* Prestige gives the chevron align-self:flex-end, which now drops it
     below the label */
  .store-header .navbar-mobile-menu > nav > ul > li > a::after { align-self: center; }

  /* The chevron is 18px plus 2px either side, and it lives inside the link,
     so a label followed by a chevron sits 38px from its neighbour while two
     plain labels sit 16px apart — measured on the six live categories.
     Reserving the same 22px after every chevron-less label puts all five
     gaps on 38. A margin, not padding, so the narrower line below (which
     resets padding-inline) can't undo it. Not on the last item: there it
     would be trailing air, and it would pull the row off centre. */
  .store-header .navbar-mobile-menu > nav > ul > li:not(:has(.sub-menu)):not(:last-child) > a {
    margin-inline-end: 22px;
  }

  /* 100% of the row = the header's full height, so it opens on the rule.
     No overflow on this chain — the dropdown is absolutely positioned
     and any scroll container above it would clip it. */
  .store-header .navbar-mobile-menu .sub-menu { inset-block-start: 100%; }

  /* .prestige-logo carries Tailwind's md:w-36 (144px); shrinking only the
     image left that box wide and pushed the icons off the left edge. The
     image carries width="100%" as an attribute, so a free-sizing box and
     a free-sizing image squashed each other — hence a fixed box. */
  .store-header .prestige-header > a .prestige-logo {
    width: 96px;
    height: 24px;
  }

  .store-header .prestige-header > a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Prestige ships three glyph sizes (24/20/18) in two box sizes (24/40).
     The glyph box matters as much as the button box: a 20px glyph inside
     a 32px button reads as a wider gap than a glyph that fills its box. */
  .store-header .prestige-header > div:first-child > button,
  .store-header .prestige-header > div:last-child > button,
  .store-header .prestige-header > div:last-child > salla-user-menu,
  .store-header .prestige-header > div:last-child > salla-cart-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;             /* search was shrinking to 28.5 of its 32 */
    width: 32px;
    height: 32px;
  }

  /* control glyphs only — a plain `i` under div:last-child also reaches the
     eight icons inside the account dropdown, and squashed their 16px SVGs
     to 8px wide */
  .store-header .prestige-header > div > button > i,
  .store-header .prestige-header > div > salla-cart-summary > a > div > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
  }

  .store-header .prestige-header > div:last-child { gap: 8px; }
}


/* Six categories measure 680px; below 1280 the line stops holding them
   at full size, so the row tightens instead of wrapping. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .store-header nav > div:has(> .prestige-header) { padding-inline: 32px; }
  .store-header .navbar-mobile-menu { margin-inline: 8px; }
  .store-header .navbar-mobile-menu > nav > ul > li > a {
    padding-inline: 8px;
    font-size: 13px;
  }
}


/* ==================================================================
   01b · HEADER — tablet and phone
   Two defects in Prestige's own mobile header, then the same 44px.
   ================================================================== */

/* The nav goes to the drawer but its 80px row stays — measured: nothing
   visible inside it, its one child a close button at opacity 0 pushed to
   y-51. Safe to hide: the drawer is a child of <body>, and the burger and
   its #mobile-menu target both live outside this row. */
@media (max-width: 1024px) {
  .store-header .navbar-mobile-menu { display: none; }
}

/* At exactly 1024 the store has no menu: Tailwind's lg:hidden takes the
   burger from 1024 up, mmenu takes the nav from 1024 down. 1024 is iPad
   landscape. */
@media (width: 1024px) {
  .store-header [href="#mobile-menu"] { display: block; }
}

/* Same 44px, same rule, same icon sizing as the desktop line. Search
   stays where Prestige puts it here — beside the burger. */
@media (max-width: 1024px) {
  .store-header .prestige-header {
    padding-block: 6px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
  }

  /* الجوال: أيقونة اللغة تخرج من صف الهيدر — الصف ضيّق.
     اللغة تصير أول بند في قائمة القائمة (يضيفها الجافاسكربت). */
  .store-header .prestige-header > div:first-child > div:has(.sicon-lang),
  .store-header .prestige-header > div:first-child > salla-localization-modal {
    display: none;
  }

  #mobile-menu #lantLangRow > a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-navbar-text, #1d1d1f);
  }

  #mobile-menu #lantLangRow > a > i {
    font-size: 18px;
    line-height: 1;
  }

  .store-header .prestige-header > a .prestige-logo {
    width: 96px;
    height: 24px;
  }

  .store-header .prestige-header > a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .store-header .prestige-header > div:first-child > a,
  .store-header .prestige-header > div:first-child > button,
  .store-header .prestige-header > div:last-child > button,
  .store-header .prestige-header > div:last-child > salla-user-menu,
  .store-header .prestige-header > div:last-child > salla-cart-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
  }

  /* control glyphs only — a plain `i` also reaches .s-cart-summary-icon
     and the sicon-sar riyal mark inside the cart total */
  .store-header .prestige-header > div > a > i,
  .store-header .prestige-header > div > button > i,
  .store-header .prestige-header > div > salla-cart-summary > a > div > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
  }

  .store-header .prestige-header > div:first-child,
  .store-header .prestige-header > div:last-child { gap: 8px; }
}


/* ==================================================================
   01c · HEADER — cart count badge (both widths)
   Shipped red-400, with padding:4px leaving 8×8 for a 10px digit,
   text-align:start on a flex box with no justify, and 16px flush over a
   20px glyph. Now 15px on the bag's top corner, overlapping it 6px, 10px
   below the header top and 5px clear of the account button. The ring is
   the merchant's header colour, so the badge sits apart from the bag.
   ================================================================== */

/* The bag glyph hangs at the top of a 28px block, 2px above the search and
   account glyphs. Centring its wrapper levels all three; the badge is
   absolute against the anchor, so it follows the glyph. */
.store-header .prestige-header > div > salla-cart-summary > a > div {
  display: flex;
  align-items: center;
}

.store-header .prestige-header .s-cart-summary-count {
  background: var(--color-primary, #1d1d1f);
  box-shadow: 0 0 0 2px var(--color-header-main, #fafafa);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  width: 15px;
  height: 15px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;

  inset-block-start: -2px;
  inset-inline-start: -9px;
}


/* ==================================================================
   02 · FOOTER — the bottom bar
   ------------------------------------------------------------------
   Prestige puts the payment marks inside the footer's right column and
   leaves .copyright — a sibling <div> below the footer — holding only
   the copyright line, already centred. LANT wants the marks on that bar.

   No JS: <footer> is already position:relative in Prestige, so the row
   anchors to it and a negative block-end drops it into the bar beneath.
   Measured: the row lands inside the bar's 613–649, 48px off the right
   edge, 100px clear of the centred text.
   ================================================================== */

/* The two heights the bar is built from, declared once on the ancestor
   both sides can read. The offset below is derived from them rather than
   guessed, so changing either keeps the row centred — verified at
   36/20, 48/20 and 56/28, all landing dead centre. */
.app-inner:has(> .copyright) {
  --lant-footbar-h: 36px;
  --lant-pay-h: 20px;
  --lant-radius: 16px;      /* the panel's corner, and the band behind it */
}

/* height only — the bar's own colour is already the page's, so anything
   set here would only break the match the moment the merchant changes
   the footer */
.copyright { min-height: var(--lant-footbar-h); }

/* The marks themselves — one shape at every width; only where the row
   sits changes below. */

/* 48×32 cards make the row 552 wide and it runs into the centred
   copyright text; 32×20 brings it to 352.
   The plate had to go: each mark ships with Prestige's `bg-white`, and on
   a product page `.product-single .bg-white` repaints it in the store's
   background colour — pale chips scattered over a #d8d8d8 strip. Now the
   marks sit on the strip itself.
   !important earned: an inline background did not clear it; only an
   inline !important did, which is what that rule uses. */
footer .grid > div:first-child ul:has(img[alt="mada"]) > li {
  width: 32px;
  height: var(--lant-pay-h);
  padding: 0;
  justify-content: center;
  background: transparent !important;
}

/* the marks are mixed aspect ratios in one box, so a fixed width would
   squash them; height with object-fit lets each fill what it can — a
   square mark reads 18×18, a wide one 32×8. 14 left the square ones
   noticeably smaller than the wide ones. */
footer .grid > div:first-child ul:has(img[alt="mada"]) img {
  height: 18px;
  width: auto;
  max-width: 32px;
  object-fit: contain;
}

/* Salla serves mahally_customer_wallet_mini.png at 0×0, so it renders
   as a broken-image glyph. Hidden because a broken mark reads worse
   than a missing one — the fault is on Salla's side, so drop this rule
   once the file loads again. */
footer .grid > div:first-child ul:has(img[alt="mada"]) > li:has(img[alt="mahally_customer_wallet"]) {
  display: none;
}

/* Where the row sits. The side-by-side arrangement only holds while the
   bar is wide enough for both: the row is 352 and sits 48 from the edge,
   the centred line is 211, so they touch at 1011px and clear each other
   with 24px to spare at 1059. Below that the row moves above the line —
   the same arrangement the phone already used. Both numbers grow if the
   merchant enables more payment methods. */
@media (min-width: 1060px) {

  /* half the bar plus half the row puts the row's centre on the bar's */
  footer .grid > div:first-child ul:has(img[alt="mada"]) {
    position: absolute;
    inset-block-end: calc(-0.5 * (var(--lant-footbar-h) + var(--lant-pay-h)));
    inset-inline-start: 48px;
    width: max-content;
    height: var(--lant-pay-h);
    margin: 0;
  }
}


/* ==================================================================
   02b · FOOTER — one icon row
   ------------------------------------------------------------------
   Prestige keeps the social accounts at the foot of column 1 and the
   contact links as labelled lines in column 3. LANT wants them as one
   unlabelled icon row.

   The move itself is two lines of JS (initFooterIcons) — CSS cannot do
   it: the two lists sit in different grid cells 611px apart, and both
   hug their own column's edge, so no ordering brings them together.
   Absolute positioning was tried and rejected: it needs a vertical
   anchor inside column 1 that shifts with the logo and description.

   Everything below is what CSS does own — the shape of the icons and
   the column left behind.
   ================================================================== */

footer .s-social-list a { border: 0; border-radius: 0; }

footer .s-contacts-list { flex-direction: row; gap: 10px; }
footer .s-contacts-list > div { display: contents; }
footer .s-contacts-item { width: 32px; height: 32px; margin: 0; }
footer .s-contacts-item .unicode { display: none; }
footer .s-contacts-icon { border: 0; border-radius: 0; }

/* its three links now live in the social row, so the column holds only
   a heading over nothing */
footer .grid > div:has(salla-contacts) { display: none; }


/* ==================================================================
   02c · FOOTER — the links column, split in two
   ------------------------------------------------------------------
   Prestige binds one menu and renders one column, and it reads only the
   menu's top level — nesting the items made Salla drop the children
   entirely, so the eight links arrived as two.

   Flattened, the merchant's own «من نحن» and «السياسات» sit at
   positions 1 and 5 with their four links each. Split by position, not
   by text, so it holds in English too — and both labels stay editable
   and translatable in Salla rather than living in this file.
   ================================================================== */

/* No width query: the two groups sit side by side at every size. Behind
   a 768 floor they stacked into one eight-link column on phones. */
footer .footer-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, min-content);
  column-gap: 16px;
  row-gap: 20px;
}

/* every link carries mb-5 from Prestige, and the grid's row-gap landed
   on top of it — spacing was margin + gap. Worse, the heading's margin
   differed, so the first gap measured 16 and the rest 32. The gap is
   the one source now. */
footer .footer-list > a { margin-block-end: 0; }

/* a label, not a destination */
footer .footer-list > a:nth-of-type(1),
footer .footer-list > a:nth-of-type(5) {
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}

/* the menu's own name now just repeats over the two headings */
footer .grid > div:has(.footer-list) h3 { display: none; }


/* ==================================================================
   02d · FOOTER — the panel and its columns
   ------------------------------------------------------------------
   The reference footer is a rounded #EDEDED panel sitting flush to both
   page edges, with the copyright strip beneath it in the page's own
   background — so the panel reads as a card the page carries. Values
   read off it: 16px radius, and the merchant already set #ededed.

   Even thirds spaced the columns by their tracks, not by their content:
   the logo block filled its third, so it sat 16px from «من نحن», while
   «من نحن» sat 300px from «السياسات». Three content-sized blocks sharing
   one gap put both distances on 100.
   ================================================================== */

/* All four corners, at every width. Verified by hit-test: with the radius,
   the four corner pixels belong to .app-inner, not to the footer. */
.app-inner footer { border-radius: var(--lant-radius, 16px); }

/* What the two bottom corners cut into was the page (#f8f8f8) sitting
   behind the footer, so they read as pale notches on the strip. This lays
   the strip's own colour across the footer's last 16px, behind its
   background, so nothing shows but the two corners — and it reads
   var(--color-breadcrumbs), the value .copyright itself is painted with in
   Prestige's app.css, so it follows the merchant's setting rather than
   freezing today's grey. <footer> is already position:relative. */
.app-inner footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--lant-radius, 16px);
  z-index: -1;
  background: var(--color-breadcrumbs);
}

@media (min-width: 768px) {

  /* .app-inner footer, not footer: the element alone loses to Prestige's
     py-20 utility, so the padding never applied */
  .app-inner footer {
    padding-block: 32px;        /* 80 suited three tall columns */
  }

  /* One gap for both levels — the outer grid holds the logo block and the
     links block, the inner one holds the two link groups — so the three
     read as one rhythm. It can't be a fixed 120: at 768 the blocks plus
     two 120s overflow the row, and clamp lands it at 48 there and 100 at
     this width. */
  footer .grid {
    --lant-gap: clamp(48px, 8vw, 120px);
    grid-template-columns: max-content max-content;
    justify-content: center;
    column-gap: var(--lant-gap);
  }

  footer .grid > div:has(.footer-list) { grid-column: auto; }

  /* max-content, not the two halves the phone uses: at 1fr each the
     narrow «من نحن» group floated in a box as wide as «السياسات», so its
     side of the gap read 53px wider than the other's. */
  footer .footer-list {
    grid-template-columns: max-content max-content;
    column-gap: var(--lant-gap);
  }

  /* max-content on a paragraph is one endless line; 22rem is the measure
     the description already reads at, two lines. */
  footer .grid > div:first-child { max-width: 22rem; }
}

/* Prestige leaves an empty fourth grid child that still claimed 17px on
   a phone and a whole third on desktop */
footer .grid > div:not(:has(*)) { display: none; }


/* Prestige gives every column a border-b that only lives below lg — a
   divider between stacked columns. With the contacts column gone and the
   payment row moved out, it read as two stray lines around the links. */
@media (max-width: 1023px) {
  footer .grid > div { border-block-end: 0; padding-block-end: 0; }
}


/* Too narrow to sit beside the line, so the row moves into the bar above
   it. The footer's bottom edge is the bar's top, so a negative inset of
   (gap + row height) drops it into the bar's upper half and the bar grows
   to hold both. Measured: 10 above the row, 8 between it and the line,
   18 below. */
@media (max-width: 1059px) {
  footer .grid > div:first-child ul:has(img[alt="mada"]) {
    position: absolute;
    inset-block-end: calc(-10px - var(--lant-pay-h));
    inset-inline: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }

  .copyright {
    min-height: calc(var(--lant-footbar-h) + var(--lant-pay-h) + 18px);
    padding-block-start: calc(var(--lant-pay-h) + 18px);
  }
}

@media (max-width: 767px) {
  /* 48 above the logo and 16 between it and the description suited three
     tall columns; the phone stacks them, so the block tightens */
  .app-inner footer { padding-block: 24px 32px; }
  footer .grid > div:first-child > .info { margin-block-start: 8px; }
  footer .grid > div:first-child { margin-block-end: 8px; }
}


/* The copyright bar draws its background from «لون خلفية مسار التنقل» —
   the breadcrumb nav and this bar are the only two elements sharing
   --color-breadcrumbs. Fadel found this by setting that colour to
   #000000 and watching the bar follow.

   Its text ships as a fixed rgb(233,233,235), which measured 2.67:1 on
   the #8f8f8f the bar now carries. Bound to «لون نص الفوتر» instead, it
   follows a setting rather than a literal: 5.2:1 there, 14.4 on #ededed,
   15.9 on #f8f8f8.

   The one background it fails on is black (1.25:1) — dark ink on a dark
   bar. Two earlier attempts to make one value serve every background
   both failed, because CSS cannot ask whether a colour is light. If the
   bar is ever set dark, this line has to be revisited.

   !important earned: a plain inline colour did not move it. */
.copyright p {
  color: var(--color-footer-text, #1d1d1f) !important;
}


/* The breadcrumb renders empty on some pages yet still holds 8px either
   side of a 16px line. Hidden only when it has no links, so pages that
   do show a trail keep it. */
.breadcrumbs.prestige-breadcrumbs:not(:has(a)) { display: none; }


/* Signed in, Prestige swaps the account icon for salla-user-menu, whose
   trigger paints a white plate with 6px top corners behind the avatar.
   Only that one element carries it — the dropdown shares the class name
   but is a separate node and keeps its own white.
   Its 8px/10px/14px padding turned a 25px avatar into a 75×47 box that
   overflowed the 32px slot; at 0 the avatar centres in the slot.
   !important earned: Prestige's app.css carries
   `.s-user-menu-trigger { padding-top: 8px !important }` — the sides
   cleared without it, the top did not, and that 8px sat the avatar 4px
   below the search and cart glyphs. */
.store-header .s-user-menu-trigger { background: transparent; padding: 0 !important; }

/* The avatar is the one control that isn't a 20px glyph — app.css sets it
   to `1.55rem !important`, an unrounded 24.8px. 24 keeps it the largest of
   the three, as a photo should be, on a whole pixel inside the 32px slot.
   `display: block` removes the inline baseline gap that left it 0.8px low. */
.store-header .s-user-menu-trigger-avatar {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

/* The chevron beside the avatar opens nothing the avatar doesn't already
   open — the whole trigger is the click target — and it was the other
   50px of that 75px box. */
.store-header .s-user-menu-trigger-icon { display: none; }


/* ==================================================================
   03 · PRODUCT PAGE — the image panel
   ------------------------------------------------------------------
   The media column becomes half the screen: pinned under the header,
   bleeding to the page edge, running from the header to the bottom of
   the viewport, while the text column scrolls beside it. When the text
   runs out the panel unpins and leaves with the page.

   Prestige already builds most of it — `.sidebar` is `md:sticky top-24`
   at 50% width — so this is that column re-measured, not a new layout.
   Three numbers change: the offset (96 → the header's own 44), the
   height (the image's own → the viewport's), and the width (50% of the
   container → 50% of the screen).

   The release is sticky's own behaviour, not a script: the panel stops
   when #product-… ends, and that block is as tall as the text column.
   Measured on a 1256×627 window: pinned 44–627 from y=340 to y=843,
   then travelling with the block.
   ================================================================== */

/* Dots, not thumbnails. The strip Salla renders is already wired to the
   slider (a click moves it, the active one carries
   .swiper-slide-thumb-active), so shrinking each thumb to an 8px circle
   and dropping its image keeps every behaviour and writes no JS.

   Scoped to .sidebar — the product's own slider. Reviews with photos
   render .s-slider-thumbs too, and they want thumbnails, not dots.

   !important earned twice: swiper sets width and margin inline on each
   slide, and rewrites them on resize. */
.product-single .sidebar .s-slider-thumbs {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 0;
  height: auto;
  margin: 0;
  z-index: 2;
}

.product-single .sidebar .s-slider-thumbs .swiper-wrapper { justify-content: center; }

.product-single .sidebar .s-slider-thumbs .swiper-slide {
  width: 8px !important;
  height: 8px;
  margin: 0 5px !important;
  border-radius: 9999px;
  border: 1px solid var(--lant-ink);    /* chrome — see §00 */
  background: transparent;
  box-sizing: border-box;

  /* Prestige rings each thumbnail with a 1px inset shadow — invisible
     around a photograph, a white gap inside an 8px dot. */
  box-shadow: none;
}

/* And it marks the active thumbnail with a 6px ::after in the store
   colour. That was the blue centre inside the black ring: two dots, one
   drawn by the theme inside the one drawn here. The theme's goes. */
.product-single .sidebar .s-slider-thumbs .swiper-slide::after { display: none; }

/* the dot marks which picture you are on — a position, not an offer */
.product-single .sidebar .s-slider-thumbs .swiper-slide-thumb-active {
  background: var(--lant-ink);
  border-color: var(--lant-ink);
}

.product-single .sidebar .s-slider-thumbs .swiper-slide img { display: none; }


/* The arrows shipped mismatched: both 40px white discs, but only one
   carried a grey drop shadow — that was the unevenness, not the size.
   Now 32 with an 18px glyph (a glyph reads best at a little over half
   its button), and the disc is glass rather than paint, so the photo
   still shows through and no shadow is needed to lift it off.
   The disabled arrow needs nothing from us: Prestige already greys its
   glyph to #d1d5db. */
.product-single .s-slider-nav-arrow {
  width: 40px;                /* كان ٣٢ — كبُر ليُلمس بالإبهام ويُرى على الصورة */
  height: 40px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* the two !important here are earned, and the other two are not:
     the white disc and the grey drop shadow both survive a plain
     declaration, while the size does not need one. */
  background: rgba(255, 255, 255, .62) !important;
  box-shadow: none !important;
}

.product-single .s-slider-nav-arrow svg {
  width: 24px;                /* ٢٤ في ٤٠ — النسبة نفسها التي كانت */
  height: 24px;
  fill: var(--lant-ink);                 /* shipped #6b7280 — grey on glass */
}


/* ------------------------------------------------------------------
   03b · PRODUCT PAGE — the text column
   What Salla and Prestige put in the card that LANT does not want, and
   the two surfaces that were painted a different white.
   Card measured 915px before, 735 after; the whole column 1204 → 835.
   ------------------------------------------------------------------ */

/* «القسم : …» — the breadcrumb already says it, and the category link
   sits in the menu. Hooked on its own icon, not on a utility class. */
.product-single .product-form > div:has(.sicon-align-justify) { display: none; }

/* the price a second time, three rows under the first */
.product-single .product-form > div.center-between:has(.total-price) { display: none; }

/* share links: five icons for a page the customer reached by link */
.product-single .product-form salla-social-share { display: none; }

/* tabby and tamara ship as two 177px banners; the line that replaces
   them goes under the add-to-cart button */
.product-single .main-content salla-installment { display: none; }

/* الإهداء مفعّل للمتجر، لكن في المنتج يكرر السلّة بلا داعٍ —
   نبقيه في صفحة السلّة ونخفيه هنا فقط */
.product-single salla-gifting { display: none; }

/* the wishlist button was the last thing in the card, beside the share
   icons. The JS moves it into the <h1> (moveWishlist) so it follows the
   title's own text end rather than sitting at the card's far edge —
   measured 8px after the last letter, wherever the title happens to end.
   The row it left behind collapses to 0 once its margin goes. */
.product-single .main-content section.bg-white { position: relative; }
.product-single .product-form > div:has(salla-social-share) { margin: 0; }

/* the title row: name at its own edge, mark at the far one */
.product-single .main-content section.bg-white > h1 {
  display: flex;
  align-items: center;
}

.product-single .main-content section.bg-white > h1 > salla-button.btn--wishlist {
  position: static;             /* Prestige floats it over the slider */
  display: inline-flex;
  margin-inline-start: auto;    /* pushed to the end, never touching the name */
  margin-inline-end: 0;
}

/* Not scoped to the product page: the same mark belongs on every card and
   in the wishlist page. sallaicons is a font, so the glyph is one
   codepoint — \e9d8 is sicon-bookmark. */
.btn--wishlist .sicon-heart::before { content: "\e9d8"; }

/* Prestige puts a second one on the photograph, sized 0×0 on a desktop
   and 42×40 on a phone — so below 768 the product had two marks, one on
   the title and one on the image. The title's is the one that carries
   the store's shape, and it is there at every width. */
.product-single .sidebar salla-button.btn--wishlist { display: none; }

/* Beside the title it is a mark, not a control: no disc, no ring, the
   store's own ink instead of the shipped red. None of this needs
   !important — tested with the marks off, all four hold. */
.product-single .main-content .btn--wishlist button {
  background: transparent;
  border: 0;
  width: auto;
  height: auto;
}

/* Saved and not-saved looked identical when the store primary was near
   ink (#343434 ≈ #1d1d1f). State is colour: ink while offering to save,
   a clear warm red once saved. Salla flips `.is-added` itself. */
.product-single .main-content .btn--wishlist .sicon-heart {
  color: var(--lant-ink);
  font-size: 20px;              /* shipped 24, beside a 24px title */
}

.product-single .main-content .btn--wishlist.is-added .sicon-heart,
.btn--wishlist.is-added .sicon-heart {
  color: #c43b3b;
}

/* الوصف يُعرض كاملًا. Prestige يكتب max-height: 5.25rem داخل العنصر
   ويضع «اقرأ المزيد» — الأوصاف قصيرة والرابط كان يُفوَّت، فيُلغى الاثنان.
   !important لازم لأن الارتفاع مكتوب على العنصر نفسه. */
.product-single article.article--main {
  max-height: none !important;
  overflow: visible !important;
}

/* Prestige indents the description 16px on every side while the title,
   the price and the options all sit on the card's own edge — so the one
   paragraph in the card read as inset. The block padding stays: the JS
   measures the collapsed height from it. */
.product-single article.article--main { padding-inline: 0; }

/* the gap the options never had: every block below the description is
   20px from the next, and the description sat flush against them */
.product-single .main-content .product-form { margin-block-start: 20px; }

/* ------------------------------------------------------------------
   03c · PRODUCT PAGE — the reviews
   One rule, and it earned its place. A pass over the type — name 16→14,
   date and verification 14→12, stars 24→14, the «مفيد» button off the
   store colour — was written, measured, and thrown away: twelve rules to
   move four labels by two pixels each is not a difference anyone sees.
   Salla's own scale stays.
   ------------------------------------------------------------------ */

/* Salla paints the reviews block #f3f4f6 — a fixed grey that sat a shade
   off the page's own #f8f8f8 and drew a rectangle nobody asked for.
   That one is visible from across the room. Transparent rather than
   repainted: it then follows the page colour wherever the merchant takes
   it. Not scoped to the product page — the same block, the same
   reasoning, anywhere it appears. */
.s-comments { background: transparent; }

/* «التعليقات» sits over a block whose own first line reads «9 تعليقات» —
   the same word twice, one of them a heading with nothing under it but
   the other. Hooked on the container that holds salla-comments, so no
   other h2 on the page is touched. */
.container:has(> salla-comments) > h2 { display: none; }


.product-single #btn-show-more { display: none !important; }

/* Prestige fades the link out the moment it expands — `#btn-show-more
   .is-expanded { opacity: 0; pointer-events: none }` — because in its
   design there is no way back. This kept it alive while the two handlers
   still shared the click; now the JS takes the event in the capture
   phase and Prestige's handler never runs, so the class is never added.
   Kept because it costs nothing and covers the day the theme adds that
   class from somewhere else. */
.product-single #btn-show-more.is-expanded {
  opacity: 1;
  pointer-events: auto;
}

/* The options box shipped pure white and each unselected chip too, while
   the card around them takes the merchant's page colour — so they read as
   a paler panel floating in it. Transparent, not the colour: transparent
   cannot drift from whatever he sets next. The selected chip already
   works this way, marked by its border alone. */
.product-single .s-product-options-wrapper { background: transparent; }
.product-single .s-product-options-grid-mode-span { background: transparent; }

/* Salla lays each option as two grid columns — the question on one side,
   the answers on the other — which reads as a form. Stacked, it reads as
   a choice: the question, then one answer per line under it. 16px between
   the two was the column gap; 8 suits a label and the thing it labels. */
.product-single .s-product-options-option {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* stretch, not flex-start: chips sized to their own words left a ragged
   left edge down the column — 84, 69, 86 — while the rest of the card is
   one measure. `flex-wrap: wrap` is Prestige's and stays: a column with
   no height never wraps, so it costs nothing to leave alone. */
.product-single .s-product-options-grid-mode {
  flex-direction: column;
  align-items: stretch;
}

/* Centred text suited a two-word pill. A full-width row reads from its
   own edge, like every other line in the card — and it has to, once a
   picture sits in front of the words. The padding moves off the row and
   onto its parts, so the picture can reach all three edges. */
.product-single .s-product-options-grid-mode-span {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 0;
  text-align: start;
}

/* A row with a picture is as tall as the picture. A row without one is as
   tall as its own words — no floor. A 48px floor looked tidier in the
   stylesheet and wasn't: it left «من دون نقش» 6px of air above its line
   and «إضافة النقش» 1px above its two, because one cleared the floor and
   the other didn't. With no floor both sit on the same 8px. */
/* أرضيّةٌ واحدةٌ لكلّ الكروت، بصورةٍ أو بغيرها. قِيس بلا أرضيّة:
   ٦٦ · ٦٦ · **٣٤** · ٦٩ — فكرت «من دون نقش» ينهار وحده وسط إخوته.
   وبها: ٦٦ · ٦٦ · ٦٤ · ٧٧ — صفٌّ مستوٍ، وما زاد فلطول نصّه لا لفراغه. */
.product-single .s-product-options-grid-mode-span {
  min-height: 64px;      /* كان ٨٠ ولكرتِ الصورة وحده */
}

/* The tile is square because the photographs are: I sampled both on a
   canvas — 900×900, the wood centred inside a transparent margin of its
   own. Square means the picture arrives whole and untouched: nothing
   cropped, and no padding added by us. The air you see around the wood
   is in the file, so it closes by re-exporting the photograph tighter,
   not by a rule here. */
/* والهامش الداخليّ ٦px: الصورة كانت تلامس الحوافّ الثلاث فتبدو مقصوصةً
   عن الكرت لا جزءًا منه. */
.lant-opt-frame {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}

.lant-opt-frame .lant-opt-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.lant-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 6px;
}

/* an option with no picture still needs its edge — وهامشًا رأسيًّا
   أوسع، فليس له صورةٌ تملأ ارتفاعه */
.lant-opt-text:first-child {
  padding-inline-start: 12px;
  padding-block: 10px;
}

/* the name was 12/600 and the line under it 13/700 — the note read
   louder than the thing it describes */
/* Prestige ships the button as a full pill (9999px). The reference keeps
   its corner at about a fifth of the button's height — on our 41px bar
   that is 8, and it sits with the 8px option cards and the 6px chip
   rather than against them. */
.product-single salla-add-product-button .s-button-element {
  border-radius: 8px;
}

/* وزرّ إتمام الطلب في السلّة هو نفسه الزرّ الآخر في الرحلة، وبنفس
   الارتفاع بالضبط (قِيس: ٤١px في الصفحتين) — فزاويته واحدة. سلة
   تسمّيه ‎#cart-submit‎ فالمِرساة معرّفٌ لا صنفُ تنسيق. */
#cart-submit .s-button-element {
  border-radius: 8px;
}

/* ═══ الهوامش حول زرّ الإضافة — مقيسة لا مقدَّرة ═══
   كان فوق الزرّ ٤٠px وتحته ٨px: فراغٌ واسعٌ يفصله عمّا يخصّه (الخيارات)،
   وسطران ملتصقان به لا يخصّانه. فعُكس: الخيارات تقترب، والسطران يتنفّسان. */
.product-single salla-product-options { margin-bottom: 8px; }
.product-single .s-product-options-grid-mode { margin-bottom: 8px; }
.product-single salla-add-product-button { margin-top: 10px; }
.product-single .lant-inst { margin-top: 14px; }
.product-single .delivery-estimate { margin-top: 10px; }


/* the chosen option is marked by its border alone — the name stays ink,
   so choosing does not repaint the words */
.lant-opt-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lant-ink);
}

/* حبرٌ كامل لا رماديّ: الوزن وحده يفرّقه عن الاسم فوقه (٤٠٠ مقابل ٦٠٠) */
.lant-opt-note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lant-ink);
}

/* «إضافة النقش (9 ر.س)» → الرقم في آخر الصف برمز الريال الرسمي (sicon-sar)
   مثل سعر المنتج والتقسيط — لا حروف «ر.س».

   salla.money يطبع: رقم ثم أيقونة. الاتجاه يقرّر المكان المرئي:
     عربي (rtl)  → الرمز يسار الرقم
     إنجليزي (ltr) → الرمز يمين الرقم
   وpadding-inline من الجهتين حتى لا تلتصق الحافة بعد انعكاس الاتجاه. */
.lant-opt-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: auto;
  padding-inline: 12px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--lant-ink);
  direction: rtl;
  unicode-bidi: isolate;
}
html[lang^="en"] .lant-opt-price,
:lang(en) .lant-opt-price {
  direction: ltr;
}

.lant-opt-price .sicon-sar {
  font-family: sallaicons !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-block !important;
  width: 1em;
  height: 1em;
  -webkit-font-smoothing: antialiased;
}


@media (min-width: 768px) {

  /* the header's measured height — nothing declares it, it falls out of
     6px padding either side of a 32px control row.
     --lant-media-w is the one number worth turning. On a 1273 window the
     text column gets what is left: 70vw → 340px, 60vw → 467, 55vw → 531,
     50vw → 586. Change it here and the column follows. */
  .app-inner {
    --lant-header-h: 44px;
    --lant-media-w: 57vw;
  }

  /* 24px of air between the header and the panel; the text column takes
     that 24 back as its own padding below */
  .container:has(> [id^="product-"]) { margin-block-start: 0; }

  /* The width is --lant-media-w and nothing else; the margin is what puts
     the panel's outer edge on the screen's edge — (its own half) minus
     (the screen's half) — and it holds at any width, whether .container
     runs full width (there it resolves to −10px, the container's own
     padding) or is centred with a max-width on a larger screen.
     !important earned: `md:!w-2/4` is Prestige's, already !important.
     The rule between the columns rides the panel, so it starts under the
     header and ends where the panel does. */
  [id^="product-"] > .sidebar {
    position: sticky;
    top: var(--lant-header-h);
    height: calc(100vh - var(--lant-header-h));
    width: var(--lant-media-w) !important;
    margin-inline-start: calc(50% - 50vw);
    padding: 0;
    border-inline-end: 1px solid rgba(29, 29, 31, .1);

    /* Prestige's own gap here is 32 (rtl:ml-8), and with the card's 20px
       padding it put the text 52 from the rule and 30 from the screen —
       the lopsided margin. At 10, matching .container's own padding, the
       text sits 30 from both. */
    margin-inline-end: 10px;
  }

  /* the slider is built as a square: 618×618 with a 1px border and a 6px
     radius. Filling the panel means the image, not the box, decides
     nothing — height travels down the whole chain. */
  [id^="product-"] > .sidebar > salla-slider { height: 100%; border-radius: 0; }

  [id^="product-"] > .sidebar .s-slider-container {
    height: 100%;
    border-radius: 0;
    border: 0;                /* the 1px that left a seam at the edge */
  }

  /* .s-slider-container, not .sidebar: the dots are swiper slides too,
     and a blanket height:100% collapsed them to zero */
  [id^="product-"] > .sidebar .s-slider-container .swiper-wrapper,
  [id^="product-"] > .sidebar .s-slider-container .swiper-slide {
    height: 100%;
    border-radius: 0;
  }

  [id^="product-"] > .sidebar .s-slider-container .swiper-slide img { height: 100%; }

  [id^="product-"] > .main-content { padding-block-start: 24px; }
}


/* ------------------------------------------------------------------
   03d · PRODUCT PAGE — the phone
   The panel is not sticky here and does not need to be: the picture is
   simply the first thing, edge to edge, and the words follow. What it
   did need was to stop being a card — Prestige inset it 10px either
   side, rounded it, and dropped it 24px below the header, so a photograph
   read as a tile floating in the page.

   The text below keeps the desktop measure: 10px from .container plus
   20px of card padding puts it 30 from both edges, the same 30 the wide
   layout has either side of its column.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

  .container:has(> [id^="product-"]) { margin-block-start: 0; }

  /* 100vw with the pull on both sides — the container's own 10px padding
     is what it is escaping, and calc(50% − 50vw) resolves to exactly
     that at any width */
  [id^="product-"] > .sidebar {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0;
  }

  [id^="product-"] > .sidebar > salla-slider,
  [id^="product-"] > .sidebar .s-slider-container {
    border-radius: 0;
    border: 0;
  }

  /* the picture ends, the words begin — the same rule the wide layout
     draws between its two columns, turned on its side */
  [id^="product-"] > .sidebar {
    border-block-end: 1px solid rgba(29, 29, 31, .1);
  }
}


/* The rule under the whole block, at every width: drawn by the container
   that holds the columns rather than by either one, so it spans both on a
   desktop and closes the block on a phone. */
.container:has(> [id^="product-"]) {
  border-block-end: 1px solid rgba(29, 29, 31, .1);
}


/* ==================================================================
   09 · حقل ملفّ النقش — موجودٌ يعمل، غيرُ معروض
   ------------------------------------------------------------------
   حقلٌ واحد يخرج من خيار النقش: ملفّ الإنتاج (PDF)، والأداة تضعه لا
   العميل — فعرضُه يطلب منه فهم شيءٍ لا يخصّه، ويُريه اسماً عشوائيّاً
   من خوادم سلة. أمّا المعاينة التي تخصّه فبطاقةُ عرضٍ ترسمها الأداة
   (lant-view-card في lant-v2.js) — لا حقل. وحقلُ صورةٍ كان هنا
   وحُذف من المنتج: قِيس أنّ تحديثات السلّة تمسحه، فكان يتظاهر
   بالحفظ ولا يحفظ.

   ولا نُخفي الملفّ بجافاسكربت: يبقى حقلَ سلة كاملاً — يُرفع برافعها،
   ويُرسل باسمها، ويُتحقّق منه بتحقّقها — إنّما لا يُرسم. ولذلك
   `display:none` لا نزعٌ للعنصر ولا تعطيلٌ له.

   ويُلتمس بنوعه: `file` هو النوع الوحيد في المنتج. ولو أضاف التاجر
   يوماً حقلَ ملفٍّ ثانياً يريد عرضه، فهنا يُستثنى.
   ================================================================== */
/* يُلتمس بنوعه أو بوجود رافع الملفات — بريستيج لا يضع دائماً
   data-option-type="file"، فقياس المتجر أظهر الحقل ظاهراً رغم القاعدة
   القديمة. الصنف lant-hide-file تضيفه الأداة عند التركيب. */
.s-product-options-option[data-option-type="file"],
.s-product-options-option.lant-hide-file,
.s-product-options-option:has(salla-file-upload) {
  display: none !important;
}


/* ==================================================================
   10 · سطر السلّة — صورة يميناً، الاسم بجانبها، السعر تحته
   ------------------------------------------------------------------
   بريستيج يرسم السطر شبكةَ عشرة أعمدة، ويكدّس الصورة والاسم والسعر
   في عمودٍ واحد بمحاذاة الوسط — فيخرج مبعثراً. وكان الإصلاح بالهوامش
   ترقيعاً يقارب المحاذاة ولا يصيبها، لأنّ الخيارات شقيقةٌ للصفّ لا
   ابنةٌ لعمود الاسم.

   `display: contents` يحلّ هذا من أصله: يُذيب حاويتَي بريستيج فتصير
   عناصرها أبناءً مباشرين لشبكةٍ واحدة على السطر نفسه، فيُسند كلٌّ
   إلى عموده وصفّه بالتصميم لا بالهوامش. ولا يُنقل عنصرُ سلة واحد،
   ولا يُلمس منطقها — تنسيقٌ خالص.

   العمود ١: الصورة ٧٢×٩٠ · العمود ٢: الاسم ثم السعر ثم الخيارات ثم
   بطاقة النقش · العمود ٣: زرّ الحذف.
   ================================================================== */
/* عمود الاسم بعرضٍ ثابت لا مرن: وإلّا تزحزحت بطاقات المعاينة يميناً
   ويساراً بطول اسم كلّ منتج، فلا يستقيم للسلّة عمود. */
.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 250px) 1fr auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}

.cart-item > .grid.grid-cols-10,
.cart-item .grid.grid-cols-10 > div:nth-child(2) {
  display: contents;
}

/* العمودان الفارغان، والكميّة والمجموع وفاصلهما */
.cart-item .grid.grid-cols-10 > div:nth-child(1),
.cart-item .grid.grid-cols-10 > div:nth-child(3),
.cart-item > .grid.grid-cols-6,
.cart-item > hr,
.cart-item > input {
  display: none;
}

/* العمود ١ — الصورة */
.cart-item .grid.grid-cols-10 > div:nth-child(2) > a:first-of-type {
  grid-column: 1;
  grid-row: 1 / span 6;
  width: 72px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
}
.cart-item .grid.grid-cols-10 > div:nth-child(2) > a:first-of-type img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 10px;
}

/* العمود ٢ — الاسم ثم السعر */
.cart-item .grid.grid-cols-10 > div:nth-child(2) > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: start;
}
.cart-item .grid.grid-cols-10 > div:nth-child(2) > h3 a {
  font-size: 13.5px;
  line-height: 1.45;
}
.cart-item .grid.grid-cols-10 > div:nth-child(2) > span {
  grid-column: 2;
  text-align: start;
  justify-content: flex-start;
}

/* العمود ٢ — ما تحت السعر */
.cart-item > salla-product-options { grid-column: 2; }
.cart-item > .lant-sum { grid-column: 2; }

/* العمود ٣ — بطاقة النقش تملأ الفراغ بين الاسم وزرّ الحذف

   عرضها ٢٣٠ لا ١٥٦: الزرّان صارا داخلها كصفحة المنتج، فيلزم للصورة
   ممرٌّ بينهما. قِيس على ١٢٦٧: بـ١٥٦ تلامس الصورةُ الزرَّين (الفجوة
   صفر)، وبـ٢٣٠ تبقى الصورة ١١٢×٨٠ كما هي والفجوة ٢٤ من كلّ جهة —
   فالعرض زاد ولم تصغر الصورة ولا طال صفّ السلّة (١٤٨px قبل وبعد).
   والعمود ٣ يتّسع لـ٣٧٣ فلا يزاحم أحداً. */
.cart-item > .lant-view-wrap {
  grid-column: 3;
  grid-row: 1 / span 6;
  justify-self: start;
  width: 230px;
  max-width: 100%;
  margin: 4px 0 0;
}

/* سطر الخيارات المختصر يجلس ملاصقاً للسعر */
.cart-item > .lant-sum { margin-top: 2px; }

/* العمود ٤ — الحذف */
.cart-item .grid.grid-cols-10 > div:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}

/* على الشاشات الضيّقة: البطاقة تنزل تحت السطر بعرضٍ كامل، فلا يضيق
   عمود الاسم ولا تتزاحم الأعمدة الأربعة */
@media (max-width: 767px) {
  /* عمودان فقط: صورة المنتج ثم كلّ ما عداها — وزرّ الحذف يعلو معها */
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-item .grid.grid-cols-10 > div:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .cart-item .grid.grid-cols-10 > div:nth-child(2) > h3 { padding-inline-end: 40px; }

  /* البطاقة تنزل صفّاً كاملاً تحت كلّ شيء — فتتّسع صورتها ولا تضيق
     على الزرّين. قِيس على ٥٠٠px: عرضها في العمود كان ١٣١ والصورة
     ٣٧ فقط، وهنا تصير الصورة ضعف ذلك ونيّفاً. */
  /* العمود ٢ لا الصفّ كلّه: تنزل بمحاذاة الاسم والسعر والخيارات،
     لا تحت صورة المنتج. والعرض هو عرض سطح المكتب نفسه (٢٣٠) — قِيس
     على ٥٠٠px: بـ٢١٠ تبقى الفجوة بين الصورة والزرّين ٣px وحدها،
     وبـ٢٣٠ تصير ١٣ والصورة ١٣٤ في الحالين. */
  .cart-item > .lant-view-wrap {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
}


/* ==================================================================
   10b · المنتجات في كرتٍ واحد لا كرتٍ لكلٍّ
   ------------------------------------------------------------------
   بريستيج يضع كلّ سطرٍ في نموذجٍ مستقلّ بخلفيةٍ بيضاء وزوايا وهامشٍ
   سفليّ — فتظهر السلّة كروتاً متفرّقة. ولا يمكن لفّها في عنصرٍ واحد
   بلا لمس بنية سلة، فتُوصَل بدلاً من ذلك: يُرفع الهامش بينها فتلتحم
   خلفياتها، وتُنزع الزوايا الملتقية وحدها فيبقى الطرفان مستديرين.

   ويُعرف الطرفان بالجوار لا بالترتيب (`:has(+ …)`)، فلا يخطئ لو سبقت
   السطورَ عناصرُ أخرى في الصفحة.

   والفاصل خطٌّ داخليّ لا يمتدّ إلى الحافّتين — كالفاصل في كروت
   «أضفها لسلتك».
   ================================================================== */
form:has(> .cart-item) > .cart-item {
  margin-bottom: 0;
}

/* الزاوية الملتقية تُنزع من الطرفين المتجاورين */
form:has(> .cart-item):has(+ form:has(> .cart-item)) > .cart-item {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
form:has(> .cart-item) + form:has(> .cart-item) > .cart-item {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* الفاصل الداخليّ بين سطرين متتاليين */
form:has(> .cart-item) + form:has(> .cart-item) > .cart-item::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 28px;
  height: 1px;
  background: rgba(29, 29, 31, .08);
}


/* ==================================================================
   11 · تقدير التوصيل — تحت زرّ الإضافة وتحت زرّ إتمام الطلب
   ------------------------------------------------------------------
   «اطلب اليوم، شحن الثلاثاء ١٢ أغسطس · وصول ١٤–١٧ أغسطس»

   الوزن وحده يفرّق بين أجزاء الجملة، لا اللون: التمهيد عاديّ، ويوم
   الشحن أثقل، ويوم الوصول أثقلها — فالعين تلتقط ما يهمّها في لمحة
   بلا رماديٍّ باهت يُضعف القراءة.

   وصندوق الدول يطفو فوق ما حوله، ولهذا z-index عالٍ على الحاوية حين
   يُفتح — أزرار سلة اللاصقة تعلو كلّ شيء وتبتلعه بدونه.

   منقولٌ من نسخة الأداة الأولى بعد قراءة كلّ قاعدة، ومحوَّلٌ من
   متغيّراتها القديمة إلى ألوان هذا الملفّ.
   ================================================================== */
.delivery-estimate {
  margin-top: 12px;
  color: #000000;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.delivery-estimate__row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  position: relative;
}

.delivery-estimate:has(.delivery-hint--open) {
  position: relative;
  z-index: 10000;
}

.delivery-estimate__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #000000;
}
.delivery-estimate__icon svg { display: block; width: 14px; height: 14px; }

.delivery-estimate__copy { flex: 1; min-width: 0; margin: 0; }

/* السطر كلّه بحبر أسود واحد — الوزن وحده يفرّق بين الأجزاء */
.delivery-estimate__lead   { font-weight: 500; }
.delivery-estimate__ship   { font-weight: 600; }
.delivery-estimate__arrive { font-weight: 700; }
.delivery-estimate__sep    { margin-inline: 4px; color: #000000; }

.delivery-estimate__info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: -1px 0 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #000000;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.delivery-estimate__info:hover {
  background: rgba(0, 0, 0, .12);
  color: #000000;
}
.delivery-estimate__info svg { display: block; width: 11px; height: 11px; }

.delivery-hint { position: relative; display: inline-flex; z-index: 1; }
.delivery-hint--open { z-index: 10001; }

.delivery-hint__box {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 8px);
  min-width: 212px;
  max-width: min(240px, 78vw);
  padding: 11px 12px 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(29, 29, 31, .09);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
  font-size: 11px;
  line-height: 1.45;
  z-index: 10002;
  display: none;
}
/* السهم في مركز الزرّ لا في مركز الصندوق: الزرّ ١٨px فمركزه على ٩ من
   حافّة الحاوية، والسهم ١٠px فنصفه ٥ — فيقع مركزه على ٩ بإزاحة ٤.
   كان ١٢px فبعُد عن الزرّ ١٨٦px (قِيس) لأنّ الصندوق ٢١٢px لا ١٨. */
.delivery-hint__box::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-inline-end: 1px solid rgba(29, 29, 31, .09);
  border-block-end: 1px solid rgba(29, 29, 31, .09);
  transform: rotate(45deg);
}

.delivery-hint__title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(29, 29, 31, .62);
}
.delivery-hint__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.delivery-hint__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
}
.delivery-hint__item--primary {
  margin-bottom: 2px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(29, 29, 31, .04);
}
.delivery-hint__item--primary .delivery-hint__country {
  font-weight: 600;
  color: rgb(29, 29, 31);
}
.delivery-hint__country { font-size: 10.5px; color: rgba(29, 29, 31, .78); }
.delivery-hint__days {
  font-size: 10px;
  font-weight: 600;
  color: rgb(29, 29, 31);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delivery-hint--open .delivery-hint__box {
  display: block;
  animation: lant-delivery-hint-in .16s ease;
}
.delivery-hint--open .delivery-estimate__info {
  background: rgba(29, 29, 31, .10);
  color: rgb(29, 29, 31);
}

@keyframes lant-delivery-hint-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==================================================================
   12 · التقسيط — سطرٌ نصّيّ تحت زرّ الإضافة
   ------------------------------------------------------------------
   بديلُ لوحتَي تابي وتمارا المخفيّتين في §03b: بدل شريطَين من
   الشعارات، سطرٌ واحدٌ بمقاس سطر التوصيل ونَسَقه — أيقونةٌ ثمّ نصّ.

   والوزن وحده يفرّق بين أجزائه كما في §11: التمهيد عاديّ، وعددُ
   الدفعات أثقل، وقيمةُ الدفعة أثقلها، واسما البوّابتين أخفُّ لونًا
   لأنّهما تفصيلٌ لا وعد.

   والأرقام كلّها من سلة لا من هنا: عدد الدفعات من إعدادات المتجر،
   والقيمة من سعر الصفحة مقسومًا عليه — فإن غيّرت البوّابة عدد
   دفعاتها تغيّر السطر وحده.
   ================================================================== */
.lant-inst {
  margin-top: 8px;
  color: #000000;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.lant-inst__row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.lant-inst__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #000000;
}
.lant-inst__icon svg { display: block; width: 14px; height: 14px; }

.lant-inst__copy { flex: 1; min-width: 0; margin: 0; }

/* الوزن وحده يفرّق — السطر كلّه أسود صريح */
.lant-inst__lead   { font-weight: 500; }
.lant-inst__count  { font-weight: 600; }
.lant-inst__amount { font-weight: 700; }
.lant-inst__brands { font-weight: 500; }
.lant-inst__sep    { margin-inline: 4px; color: #000000; }


/* ==================================================================
   13 · «لا يشمل» — شارةٌ على زاوية المعرض
   ------------------------------------------------------------------
   الصورة تُري المطحنة والقاعدة معًا، والمُشترى القاعدة وحدها. فالنصّ
   الذي يصحّح هذا مكانُه الصورة نفسها لا آخرُ الوصف.

   وهي في الزاوية العليا لا السفلى: عمود المعرض لاصقٌ (sticky) وأطول
   من الشاشة، فقِيس أنّ أسفله لا يُبلغ أبدًا على سطح المكتب — يبقى
   تحت الطيّ مهما نزلت. وفي الجوّال نقاطُ المعرض تحتلّ الأسفل.

   والمِرساة عنصر salla-slider نفسه — السبب مكتوبٌ عند الدالّة
   lantMountNotIncluded في ملفّ الجافاسكربت.

   وتبقى مفتوحة دائمًا: كانت تنكمش عند لمس المعرض فيظنّها العميل
   اختفت مع التمرير. والخلفية بيضاء صريحة لأن الزجاج نصف الشفّاف
   كان يذوب فوق الصورة.
   ================================================================== */
.lant-notinc-anchor { position: relative; }

/* نفس الكبسولة الزجاجية السابقة. الخط أكبر بدرجة، والحبر أسود.
   وتبقى مفتوحة: لا تنكمش مع تصفّح الصور. */
.lant-notinc {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 8px 12px 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 0;
  box-shadow: none;
  color: #000;
  cursor: default;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
}

.lant-notinc__icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  color: #000;
}
.lant-notinc__icon svg { width: 13px; height: 13px; }

.lant-notinc__text {
  white-space: nowrap;
  overflow: hidden;
  max-width: 260px;
  opacity: 1;
  transition: max-width .3s ease, opacity .22s ease;
}

/* ==================================================================
   15a · كرت المنتج — زرّ السلّة الذي يطفو عند المرور
   ------------------------------------------------------------------
   بريستيج يُظهر زرّ سلّةٍ فوق صورة المنتج عند مرور الفأرة. وهو وعدٌ
   كاذبٌ في هذا المتجر: كلّ قطعةٍ لها خياراتٌ إلزاميّة (الخشب، والنقش)،
   فالإضافة من الكرت لا تكتمل — تنقل العميل إلى الصفحة أو تُخفق.
   وفي الجوّال لا مرورَ أصلًا فلا يراه نصفُ الزوّار.
   ================================================================== */
.s-product-card-quick-view-btn { display: none; }


/* ==================================================================
   15b · صفحات الحساب — إطفاء اللافتة العلويّة
   ------------------------------------------------------------------
   بريستيج يضع لافتةً بارتفاع ١٩٢px بلون المتجر أعلى كلّ صفحات الحساب:
   الطلبات · الملفّ · الإشعارات · الأمنيات · المحفظة · تفاصيل الطلب.

   وهي تخالف قاعدة §00: لون المتجر يعني «هذا فعلٌ أو هذا مُختار».
   واللافتة لا تُفعل ولا تُختار — تأكل خُمس الشاشة وتصرخ بلا معنى،
   بينما صفحات الشحن والاستبدال والشروط هادئةٌ بكرتٍ أبيض.

   فتُطفأ، ويبدأ المحتوى أعلى بـ١٩٢px.
   ================================================================== */
.profile-header { display: none; }


/* ==================================================================
   16 · مسار الشحنة — أربع محطّاتٍ في صفحة الطلب
   ------------------------------------------------------------------
   الصفحة تقول اليوم كلمةً واحدة عن الحالة. وهذه أربع محطّاتٍ على خطّ
   واحد: ما مضى مُعلَّمٌ بصحّ، والجاري بحلقةٍ مفرغة، والقادم باهت.

   والخطّ يُرسم بـ::before على كلّ محطّةٍ عدا الأولى، فيقصر ويطول مع
   عرض الشاشة بلا حسابٍ في الجافاسكربت.

   والألوان: الحبر للمنجَز، ولون المتجر للجاري وحده — نقطةٌ واحدةٌ
   ملوّنة في الصفحة تقول «أنت هنا». وما بعدها رماديٌّ لأنّه لم يقع
   بعد، وهذا رماديُّ حالةٍ لا رماديُّ كسل.
   ================================================================== */
.lant-track {
  margin: 0 0 20px;
  padding: 16px 18px 18px;
  border-radius: 12px;
  background: #fff;
  color: rgb(29, 29, 31);
}

.lant-track__title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lant-track__line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.lant-track__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  min-width: 0;
}

/* الواصل بين محطّةٍ وسابقتها — نصفُ المسافة يمينًا ونصفُها يسارًا */
.lant-track__step::before {
  content: '';
  position: absolute;
  top: 8px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: rgba(29, 29, 31, .12);
}
.lant-track__step:first-child::before { display: none; }
.lant-track__step.is-done::before,
.lant-track__step.is-current::before { background: rgb(29, 29, 31); }

.lant-track__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(29, 29, 31, .18);
  color: #fff;
}
.lant-track__dot svg { display: block; width: 11px; height: 11px; }

.lant-track__step.is-done .lant-track__dot {
  background: rgb(29, 29, 31);
  box-shadow: none;
}
/* الجارية: حلقةٌ بلون المتجر — «أنت هنا» */
.lant-track__step.is-current .lant-track__dot {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--color-primary, rgb(29, 29, 31));
}

.lant-track__label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: rgb(29, 29, 31);
}
.lant-track__step.is-done .lant-track__label { color: rgb(29, 29, 31); }
.lant-track__step.is-current .lant-track__label { color: rgb(29, 29, 31); }

.lant-track__when {
  font-size: 10.5px;
  line-height: 1.25;
  color: rgb(29, 29, 31);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .lant-track { padding: 14px 12px 16px; }
  .lant-track__label { font-size: 10.5px; }
  .lant-track__when { font-size: 9.5px; }
}

/* المسار فوق عناوين جدول الطلبات */
.lant-track-list {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* بقايا صفّ قديم داخل الجدول — تُزال بالـ JS، ويبقى التعريف دفاعًا */
.lant-track-row > .lant-track-cell {
  padding: 0 0 12px;
  background: transparent;
  border: 0;
}
.lant-track--compact {
  margin: 0;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: rgba(29, 29, 31, .03);
}
.lant-track--compact .lant-track__title { margin-bottom: 12px; font-size: 12px; }
.lant-track--compact .lant-track__dot { width: 16px; height: 16px; }
.lant-track--compact .lant-track__dot svg { width: 10px; height: 10px; }
.lant-track--compact .lant-track__step::before { top: 7px; }
.lant-track--compact .lant-track__label { font-size: 10.5px; }
.lant-track--compact .lant-track__when {
  font-size: 9.5px;
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* ==================================================================
   17 · المدونة — كرت عنوان ووصف، بلا غلاف
   ------------------------------------------------------------------
   المقال يبدأ من العنوان. وفي القائمة كل المقالات كرت واحد:
   أبيض، عنوان، ووصف قصير. الصورة و«اقرأ المزيد» والناشر
   والتاريخ تخرج، والكرت نفسه هو الرابط.
   ================================================================== */
/* حاوية المدونة عرضها ١٠٠٪ وفوقها الهامش md:mr-16 md:ml-16 (٦٤px
   من الجهتين). الهامش ما ينقص من العرض، فيفيض الصندوق عن الشاشة
   ومن اليمين يظهر الفراغ واليسار ينقص. العرض auto يخلي الهامش
   ينقص من الصندوق فيتزن الجانبان. */
@media (min-width: 768px) {
  .blog-single .container[class~="md:ml-16"],
  .blog-index .container[class~="md:ml-16"] {
    width: auto;
  }
}

.blog-category > img.h-80 { display: none; }

.blog-index .grid > div:has(> a > img.h-64),
.blog-single .grid > div:has(> a > img.h-64) {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(29, 29, 31, .08);
  border-radius: 12px;
}

.blog-index .grid > div:has(> a > img.h-64):hover,
.blog-single .grid > div:has(> a > img.h-64):hover {
  border-color: rgba(29, 29, 31, .22);
}

.blog-index .grid > div:has(> a > img.h-64) > a:has(img),
.blog-single .grid > div:has(> a > img.h-64) > a:has(img),
.blog-index .grid > div:has(> a > img.h-64) .text-center,
.blog-single .grid > div:has(> a > img.h-64) .text-center {
  display: none;
}

.blog-index .grid > div:has(> a > img.h-64) > .bg-white,
.blog-single .grid > div:has(> a > img.h-64) > .bg-white {
  flex: 1;
  margin: 0;
  padding: 22px 22px 24px;
  border-radius: 12px;
  background: transparent;
}

.blog-index .grid > div:has(> a > img.h-64) h1,
.blog-single .grid > div:has(> a > img.h-64) h1 {
  margin: 0;
  color: #1d1d1f;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}

.blog-index .grid > div:has(> a > img.h-64) .bg-white > a::after,
.blog-single .grid > div:has(> a > img.h-64) .bg-white > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-index .grid > div:has(> a > img.h-64) .bg-white > p,
.blog-single .grid > div:has(> a > img.h-64) .bg-white > p {
  margin: 10px 0 0;
  padding: 0;
  color: rgba(29, 29, 31, .62);
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* سطر التاريخ والناشر داخل المقال، وشريط الكرت اللي يجمعهما */
.blog-category > div.mb-10,
.blog-index div.bg-primary:has(> a[href*="/blog/author/"]),
.blog-single div.bg-primary:has(> a[href*="/blog/author/"]) {
  display: none;
}