/* Styles for markup the platform renders on Nahleh that the Shopify theme never had.
   Sizes and colours follow nahleh-collection.css so a rating on a Dawn card
   (search, related products) looks like the one on a collection card. */

.nh-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nh-ink);
}

.nh-rating__stars {
  display: inline-flex;
  gap: 0.1rem;
}

.nh-star {
  display: inline-flex;
  color: rgba(var(--color-foreground), 0.15);
}

.nh-star--on {
  color: var(--nh-amber-gold);
}

.nh-star svg {
  width: 1.2rem;
  height: 1.2rem;
}

.nh-rating__count {
  color: var(--nh-muted);
  font-weight: 500;
}

/* Search tabs and filter pills: a wrapping row on desktop, one swipeable row on a phone
   (Dawn's mobile facets drawer needs facets.js, which this storefront does not ship). */
.rz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}

.rz-row > * {
  flex: none;
}

.rz-facet {
  position: relative;
}

.rz-facet__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.8rem 1.4rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.rz-facet__toggle[aria-expanded="true"] {
  background: rgba(var(--color-foreground), 0.06);
}

.rz-facet__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.rz-facet__pop {
  position: absolute;
  /* Dawn's .facets__display pins left:-1.2rem and width:35rem; reset both so RTL anchors right. */
  left: auto;
  right: auto;
  inset-inline-start: 0;
  width: max-content;
  max-width: min(36rem, 90vw);
  top: calc(100% + 0.6rem);
  z-index: 4;
  min-width: 26rem;
  max-height: 34rem;
  overflow-y: auto;
  padding: 1.6rem;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-radius: 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rz-facet__backdrop {
  display: none;
}

@media screen and (max-width: 749px) {
  .rz-row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    padding-block: 0.2rem;
  }

  .rz-row--scroll::-webkit-scrollbar {
    display: none;
  }

  /* On a phone a filter opens as a bottom sheet over a dimmed page. */
  .rz-facet__pop {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    top: auto;
    bottom: 0;
    z-index: 101;
    min-width: 0;
    max-height: 70vh;
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom));
    border-radius: 1.6rem 1.6rem 0 0;
    border-bottom: 0;
  }

  .rz-facet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.35);
  }

  .rz-facet__title {
    display: block;
    margin: 0 0 1.2rem;
    font-weight: 700;
  }
}

@media screen and (min-width: 750px) {
  .rz-facet__title {
    display: none;
  }
}

/* Dawn spaces the cart totals with margin-left, which is the wrong side in Arabic:
   "المجموع الفرعي22.000 د.أ". Mirror it for right-to-left pages. */
[dir="rtl"] .totals > * + * {
  margin-left: 0;
  margin-right: 2rem;
}

/* The floating WhatsApp button never sits on top of an open cart drawer's checkout button. */
html.cod-drawer-open a[data-wa] {
  display: none !important;
}

/* A price never breaks between the amount and "د.أ". */
.cart-item__final-price,
.cart-item__old-price,
.cart-item__price-wrapper .price,
.totals__total-value {
  white-space: nowrap;
}

/* The COD stylesheet pins its widgets right-to-left (it was written for the Arabic store); on the
   English pages that reversed every price ("JD 21.990JD") and label. Follow the element's dir. */
.cod-offer[dir="ltr"],
.cod-form[dir="ltr"],
.cod-sticky[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.cod-tier__price,
.cod-tier__compare,
.cod-tier__per-unit .money {
  white-space: nowrap;
}

/* COD popup (themes/nahleh/sections/CodPopup.tsx) — the old app's modal, plus what it never had. */
.cod-modal[dir="ltr"] {
  direction: ltr;
  text-align: left;
}
.cod-field__input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 1px #b3261e inset;
}
.nh-cod-qty {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.nh-cod-qty .quantity {
  width: 14rem;
  min-height: 4.8rem;
  background: #fff;
  border-radius: 10px;
}
.cod-form__submit.nh-cod-view {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #2b2722;
  border: 1px solid #e7ded0;
}
.cod-form__submit[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}
/* An add-on's prices wrapped as "JD / 11.990" on a phone; keep each amount on one line. */
.cod-upsell__compare,
.cod-upsell__price,
.cod-cartline__price,
.cod-summary__row .money {
  white-space: nowrap;
}
/* On a phone the add-on row had no room for a title plus two prices side by side: stack the
   was-price over the price (desktop keeps the live store's single row). */
.cod-upsell__title { min-width: 0; }
@media (max-width: 480px) {
  .cod-upsell {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
  }
  .cod-upsell__cb, .cod-upsell__img, .cod-upsell__title { grid-row: 1 / span 2; }
  .cod-upsell__compare { grid-column: 4; grid-row: 1; justify-self: end; align-self: end; }
  .cod-upsell__price { grid-column: 4; grid-row: 2; justify-self: end; align-self: start; }
  .cod-upsell__price:only-of-type { grid-row: 1 / span 2; align-self: center; }
}

/* ───────────── Motion (platform, beyond Dawn) ─────────────
   Dawn's drawer snaps its dimmed backdrop on and slides the panel on a 200ms ease. Here the
   backdrop fades, the panel arrives on a spring and leaves faster than it came, a removed line
   folds away, prices dim while a change is on its way to the server, and the header's cart
   bubble bumps when something is added. Nothing changes at rest; reduced motion turns it off. */
:root {
  --sf-ease-spring: linear(0, 0.0081, 0.0317, 0.0695 4.8%, 0.1216, 0.1851 8.2%, 0.3236 11.4%, 0.6089 17.3%, 0.7295, 0.8274 23.3%, 0.9038 26.6%, 0.9565 29.9%, 0.9912 33.3%, 1.0138 37%, 1.0233 40.5%, 1.025 44.4%, 1.0203 49.4%, 1.0038 62.6%, 0.9995 74.7%, 1);
  --sf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-ease-in: cubic-bezier(0.55, 0, 0.8, 0.2);
}
cart-drawer.drawer {
  background-color: rgba(var(--color-foreground), 0);
  transition: visibility 240ms, background-color 220ms var(--sf-ease-in);
}
cart-drawer.drawer.active {
  background-color: rgba(var(--color-foreground), 0.5);
  transition: visibility 0ms, background-color 300ms var(--sf-ease-out);
}
cart-drawer .drawer__inner {
  transition: transform 220ms var(--sf-ease-in);
  touch-action: pan-y;
  will-change: transform;
}
cart-drawer.active .drawer__inner {
  transition: transform 460ms var(--sf-ease-spring);
}
/* In Arabic the panel docks to the left edge, so it must hide off that edge — Dawn pushed it right,
   which made it sweep in from the middle of the screen. */
[dir="rtl"] cart-drawer:not(.active) .drawer__inner { transform: translate(-100%); }

/* A removed line folds away instead of vanishing. */
cart-drawer .cart-item { transition: opacity 180ms var(--sf-ease-out), transform 260ms var(--sf-ease-out); }
cart-drawer .cart-item.nh-line-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; }
[dir="rtl"] cart-drawer .cart-item.nh-line-leaving { transform: translateX(-12px); }

/* The shopper's change is on screen; the money follows the server. */
cart-drawer .cart-item__totals, cart-drawer .totals__total-value { transition: opacity 200ms var(--sf-ease-out); }
cart-drawer.nh-cart-stale .cart-item__totals, cart-drawer.nh-cart-stale .totals__total-value { opacity: 0.45; }
cart-drawer .cart-item.nh-line-pending { opacity: 0.55; }
cart-drawer .quantity__input { transition: transform 200ms var(--sf-ease-spring); }
cart-drawer .quantity__button:active { transform: scale(0.88); }
cart-drawer .quantity__button { transition: transform 120ms var(--sf-ease-out); }

/* Free-delivery bar grows smoothly as the cart fills. */
.nh-free-delivery__bar > span { transition: width 600ms var(--sf-ease-spring); }

/* Header cart bubble: a bump when something is added. */
@keyframes nh-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
#cart-icon-bubble.nh-bump, .cart-count-bubble.nh-bump { animation: nh-bump 520ms var(--sf-ease-spring); }

/* Tactile press on theme buttons. */
.nh-theme .button:not([disabled]):active, .nh-theme .cart__checkout-button:active { transform: scale(0.98); }
.nh-theme .button { transition: transform 120ms var(--sf-ease-out), box-shadow var(--duration-short) ease; }

@media (prefers-reduced-motion: reduce) {
  cart-drawer.drawer, cart-drawer .drawer__inner, cart-drawer .cart-item, .nh-free-delivery__bar > span { transition: none !important; }
  #cart-icon-bubble.nh-bump, .cart-count-bubble.nh-bump { animation: none; }
}

/* Cart page (sections/main-cart): the same instant stepper as the drawer. */
html.nh-cart-stale .cart-item__totals, html.nh-cart-stale .totals__total-value { opacity: 0.45; transition: opacity 200ms var(--sf-ease-out); }
.cart-item.nh-line-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity 180ms var(--sf-ease-out), transform 260ms var(--sf-ease-out); }
[dir="rtl"] .cart-item.nh-line-leaving { transform: translateX(-12px); }

/* The merchant's colour for an option value (products.option_swatches) inside a Dawn pill: Dawn's own
   .swatch circle (component-swatch.css), small, before the value's name. */
.product-form__input--pill .nh-pill-swatch {
  --swatch--size: 1.8rem;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 0.6rem;
}

/* The COD popup's cart rows (− / + / remove) and its discount-code box. Logical properties only. */
.nh-cod-cartrow .cod-cartline__info { display: grid; gap: 6px; }
.nh-cod-cartqty.quantity { width: 11rem; min-height: 3.6rem; background: #fff; border-radius: 8px; }
.nh-cod-cartqty .quantity__button { width: 3.6rem; }
.nh-cod-stale .nh-cod-cartrow .cod-cartline__price,
.nh-cod-stale .cod-summary__row .money { opacity: 0.5; transition: opacity 120ms; }
.cod-summary__row.nh-cod-eta { padding-block: 0 4px; font-size: 13px; color: #7a6f60; }
.nh-cod-promo { margin-block: 12px 4px; }
.nh-cod-promo__row { display: flex; gap: 8px; align-items: stretch; }
.nh-cod-promo__input { flex: 1; min-width: 0; }
.nh-cod-promo__apply { flex: 0 0 auto; padding-block: 0; padding-inline: 18px; border: 1px solid #2b2722; border-radius: 12px; background: #2b2722; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.nh-cod-promo__apply:disabled { opacity: 0.5; cursor: default; }
.nh-cod-promo__applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #1f7a3f; font-weight: 600; }
.nh-cod-promo__remove { border: none; background: none; padding: 0; color: #6b6355; text-decoration: underline; cursor: pointer; font: inherit; }
.nh-cod-promo__error { margin-block: 6px 0; font-size: var(--cod-fs-xs, 14px); color: #b3261e; }
.nh-cod-discount .money { color: #1f7a3f; }

/* ============ Search (header overlay, predictive panel, /search) ============
   Logical properties only; the physical `left/right: auto` resets undo Dawn's and nahleh-rtl.css's
   absolute positions, which would otherwise win over the inset-inline ones. */

/* One input with one border. Two frames used to wrap it: the storefront's own `.field` utility
   (globals.css: border, white fill, padding) and Dawn's .field::after; and Dawn's floating label
   covered the icon (the label is now the input's aria-label). */
.nh-search-field.field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.nh-search-field::before,
.nh-search-field::after {
  display: none;
}

.nh-search-field .search__input.field__input {
  height: 4.8rem;
  margin: 0;
  padding-block: 0;
  padding-inline: 1.6rem 9.2rem;
  border: 1px solid rgba(var(--color-foreground), 0.25);
  border-radius: 1.2rem;
  background: rgb(var(--color-background));
  box-shadow: none;
  text-align: start;
  font-size: 1.6rem;
  /* Typed text runs and aligns in its own direction (Arabic on /en from the right, English on Arabic pages from the
     left) while the box keeps the page's direction, so its end padding stays on the icons' side. `dir="auto"` used to
     flip the whole box: on /en, Arabic then ran under the ✕ and 🔍 (QA, 2026-10-26). */
  unicode-bidi: plaintext;
}

.nh-search-field .search__input.field__input:placeholder-shown {
  padding-inline-end: 4.8rem;
}

.nh-search-field .search__input.field__input:focus,
.nh-search-field .search__input.field__input:focus-visible {
  outline: none;
  border-color: rgba(var(--color-foreground), 0.6);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.08);
}

/* The visible hint is .nh-search-field__hint (Chrome never ends a search field's placeholder in
   "…"); the placeholder itself stays in the markup for assistive technology. */
.nh-search-field .search__input.field__input::placeholder {
  opacity: 0;
}

.nh-search-field__hint {
  position: absolute;
  top: 50%;
  inset-inline: 1.7rem 4.8rem;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: start;
  color: rgba(var(--color-foreground), 0.55);
  font-size: 1.6rem;
  pointer-events: none;
}

.nh-search-field .search__input:not(:placeholder-shown) ~ .nh-search-field__hint {
  display: none;
}

/* A phone fits fewer words: the hint shrinks a little. The typed text keeps 16px (nahleh-base.css:
   smaller makes iOS zoom in). */
@media screen and (max-width: 749px) {
  .nh-search-field__hint {
    font-size: 1.4rem;
  }
}

/* The header modal: field and close button on one line. Dawn puts the button beside
   <predictive-search>; here it sits inside it, after the form, so the element lays them out. */
.search-modal__content > predictive-search.search-modal__form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.search-modal__content > predictive-search.search-modal__form > form {
  flex: 1 1 auto;
  min-width: 0;
}

.search-modal__content > predictive-search.search-modal__form > .search-modal__close-button {
  flex: none;
  position: static;
  margin: 0;
}

/* Dawn kept 5rem free on a phone for its floating close button; it is in the row now. */
@media screen and (max-width: 749px) {
  html[dir] .search-modal__content:has(> predictive-search > .search-modal__close-button) {
    padding-inline: 1rem;
  }
}

.nh-search-field .field__button.search__button,
.nh-search-field .field__button.reset__button {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(var(--color-foreground), 0.75);
}

.nh-search-field .field__button.search__button {
  inset-inline-end: 0.2rem;
}

.nh-search-field .field__button.reset__button {
  inset-inline-end: 4.6rem;
}

.nh-search-field .field__button.reset__button::after {
  display: none;
}

.nh-search-field .field__button svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* The header's panel spans the screen on a phone (nahleh-rtl.css's `right: auto` shrank it to its
   content in Arabic). */
@media screen and (max-width: 749px) {
  html[dir] .predictive-search.predictive-search--header {
    inset-inline: 0;
  }
}

/* Predictive panel on a wide screen: every column it has, side by side over the full width —
   products wider, collections / articles / pages beside them. Dawn's rules expect the pages
   markup twice and pin the first column to 26.4rem, which left half the panel empty. */
@media screen and (min-width: 750px) {
  .predictive-search .predictive-search__results-groups-wrapper {
    display: flex;
    flex-direction: row;
    gap: 3.2rem;
  }

  .predictive-search .predictive-search__results-groups-wrapper .predictive-search__result-group:nth-child(n) {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .predictive-search .predictive-search__results-groups-wrapper .predictive-search__result-group--products:nth-child(n) {
    flex-grow: 2;
  }

  .predictive-search .predictive-search__result-group:nth-child(n) .predictive-search__pages-wrapper {
    display: block;
  }
}

/* Result-type tabs: one row; on a phone it scrolls sideways (snap, faded trailing edge) instead of
   running off the page. */
.nh-search-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-block-end: 1.6rem;
}

.nh-search-tabs {
  min-width: 0;
  max-width: 100%;
}

.nh-search-tabs__list {
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding-block: 0.2rem;
  padding-inline: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.nh-search-tabs__list::-webkit-scrollbar {
  display: none;
}

.nh-search-tabs__list > li {
  flex: none;
  scroll-snap-align: start;
}

.nh-search-tab {
  display: inline-flex;
  align-items: center;
  min-height: 4rem;
  padding-block: 0;
  padding-inline: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  white-space: nowrap;
  text-decoration: none;
}

.nh-search-tab:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.nh-search-tab.is-active {
  border-color: rgb(var(--color-button));
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .nh-search-tabs__list {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 3.2rem);
    mask-image: linear-gradient(to left, transparent 0, #000 3.2rem);
  }

  [dir="rtl"] .nh-search-tabs__list {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.2rem);
    mask-image: linear-gradient(to right, transparent 0, #000 3.2rem);
  }

  /* The last tab can scroll clear of the fade. */
  .nh-search-tabs__list::after {
    content: "";
    flex: 0 0 2.4rem;
  }
}

@media screen and (min-width: 750px) {
  .nh-search-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* Sort: its label, then one pill — the look of the filter pills (.rz-facet__toggle). */
.nh-search-sort {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.nh-search-sort__label {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.75);
  white-space: nowrap;
}

.nh-search-sort__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nh-search-sort__select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding-block: 0.8rem;
  padding-inline: 1.4rem 3.4rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

.nh-search-sort__select:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.2rem;
}

.nh-search-sort__pill .icon-caret {
  position: absolute;
  inset-inline-end: 1.4rem;
  width: 1rem;
  height: 0.6rem;
  pointer-events: none;
}

/* Collections among the results: pills, with the collection's image when it has one. */
.nh-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}

.nh-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding-block: 0.4rem;
  padding-inline: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  text-decoration: none;
}

.nh-search-chip:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.nh-search-chip img {
  width: 2.8rem;
  height: 2.8rem;
  margin-inline-start: -1rem;
  border-radius: 50%;
  object-fit: cover;
}

.template-search__results-count {
  margin-block: 1.2rem 0;
}

/* "نتائج البحث عن «كريم»" sat right on top of the field. */
.template-search__header h1 {
  margin-block: 0 1.6rem;
}

@media screen and (min-width: 750px) {
  .template-search__header h1 {
    margin-block-end: 2.4rem;
  }
}

/* ============ Sticky buy bar (themes/nahleh/sections/StickyBuyBar.tsx) ============
   One balanced row. Desktop: a floating card — photo and name at the start, then the price block, then
   the button. Phone: full width, the price block and a wide button (~64px). The price block is the
   chosen bundle's price on top, the struck-through price and the saving pill under it. It slides in
   after the first scroll. The page keeps room for it (bar + safe area), so it never covers the footer
   or a button and its arrival never moves the page. */
html.nh-has-sticky-buy body {
  padding-bottom: calc(var(--raizn-sticky-h, 0px) + env(safe-area-inset-bottom));
}

.cod-sticky.nh-sticky-buy {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.6rem;
  min-height: 64px;
  padding-block: 10px;
  padding-inline: 12px 12px;
  border: 1px solid rgba(43, 39, 34, 0.08);
  box-shadow: 0 12px 32px rgba(43, 39, 34, 0.16);
  transform: translateY(calc(100% + 48px));
  transition: transform 0.22s ease;
}

.cod-sticky.nh-sticky-buy[data-shown] {
  transform: none;
}

.nh-sticky-buy__product {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nh-sticky-buy__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #fbf8f3;
}

.nh-sticky-buy__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #2b2722;
}

/* The price block: the price on its own line, the struck price and the saving under it. */
.nh-sticky-buy .cod-sticky__prices {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 0.1rem 0.6rem;
  line-height: 1.2;
}

.nh-sticky-buy .cod-sticky__price {
  grid-column: 1 / -1;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.nh-sticky-buy .cod-sticky__compare {
  font-size: 13px;
  white-space: nowrap;
}

.nh-sticky-buy__save {
  justify-self: start;
  padding-block: 1px;
  padding-inline: 7px;
  border-radius: 999px;
  background: #fdecea;
  color: #c8543b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cod-sticky.nh-sticky-buy .cod-sticky__cta {
  order: 0;
  flex: none;
  width: auto;
  min-height: 48px;
  padding-block: 10px;
  padding-inline: 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(227, 161, 28, 0.35);
}

@media (min-width: 750px) {
  .cod-sticky.nh-sticky-buy {
    max-width: 760px;
    margin-bottom: 16px;
    border-radius: 18px;
  }
}

/* A phone: the price block and a wide button — no photo or name. */
@media (max-width: 749px) {
  .cod-sticky.nh-sticky-buy {
    gap: 1.2rem;
    padding-block: 10px calc(10px + env(safe-area-inset-bottom));
    padding-inline: 16px;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(43, 39, 34, 0.12);
  }

  .nh-sticky-buy__product {
    display: none;
  }

  .nh-sticky-buy .cod-sticky__prices {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cod-sticky.nh-sticky-buy .cod-sticky__cta {
    flex: 0 0 auto;
    min-width: 46%;
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cod-sticky.nh-sticky-buy {
    transition: none;
  }
}

/* ============ COD order popup on a phone (themes/nahleh/sections/CodPopup.tsx) ============
   A full-screen sheet: nothing of the page shows underneath, the body scrolls, the close button stays
   in reach at the top and the submit button stays at the bottom. */
@media (max-width: 749px) {
  .cod-modal {
    padding: 0;
    align-items: stretch;
  }

  .cod-modal__backdrop {
    display: none;
  }

  .cod-modal .cod-modal__panel {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-block: 0;
    padding-inline: 16px;
    overscroll-behavior: contain;
  }

  .cod-modal .cod-modal__close {
    position: sticky;
    top: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 8px 0;
    margin-inline-start: auto;
    box-shadow: 0 2px 8px rgba(43, 39, 34, 0.12);
  }

  .cod-modal .cod-modal__content.cod-form {
    margin-block-start: -36px;
  }

  .cod-modal .cod-form__submit:not(.cod-result__again) {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-block-end: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 14px -2px #fbf8f3;
  }
}

/* Bundle cards: the "most popular" pill stays on one line, a bundle's name never breaks mid-phrase,
   the phone's country code shows whole ("🇯🇴 +962"), and the submit text keeps to one line. */
.cod-tier__popular {
  white-space: nowrap;
}

.cod-tier__label {
  text-wrap: balance;
}

.cod-field__cc.cod-field__input {
  width: auto;
  min-width: 7.5em;
  padding-inline: 8px 24px;
}

.cod-form__submit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 749px) {
  .cod-tier__popular {
    font-size: 12px;
    padding-block: 1px;
    padding-inline: 6px;
  }

  .cod-form__submit {
    font-size: clamp(15px, 4.4vw, 19px);
  }
}

/* Order placed: the close button sat on the result card's border. It now has its own row inside the
   panel's padding (a full 44×44 target), and the card starts below it. */
.cod-modal__panel:has(.cod-form__result) .cod-modal__close {
  width: 44px;
  height: 44px;
  top: 12px;
  inset-inline-end: 12px;
}

.cod-modal__panel:has(.cod-form__result) .cod-modal__content.cod-form {
  margin-block-start: 52px;
}

@media (max-width: 749px) {
  .cod-modal .cod-modal__panel:has(.cod-form__result) .cod-modal__content.cod-form {
    margin-block-start: 12px;
  }
}

/* A phone: the bundle's pricing stacks into one column (price, struck price, per unit, saving), so its
   name keeps the room it needs instead of breaking into one word per line ("مشد / عدد / 2"). */
@media (max-width: 749px) {
  .cod-tiers--bars .cod-tier__pricing {
    grid-template-columns: auto;
    row-gap: 0;
  }

  .cod-tiers--bars .cod-tier__pricing > * {
    grid-column: 1;
    grid-row: auto;
  }

  .cod-tiers--bars .cod-tier__info {
    flex: 1 1 auto;
  }
}