/* =========================================================================
   FOLO Store — main stylesheet
   Written RTL-first with logical properties, so the LTR mirror is automatic.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  /*
   * Surfaces — overridden inline from the Customizer in inc/assets.php, which
   * also switches the text, lines and fills below to their light-on-dark
   * versions when the chosen background is dark.
   */
  color-scheme: light;

  --f-bg:          #F8F8F6;
  --f-surface:     #FFFFFF;
  --f-surface-2:   #F1F1EE;
  --f-header:      #FFFFFF;
  --f-topbar:      #F1F1EE;

  --f-accent:      #E91532;
  --f-accent-2:    #FF3651;
  --f-accent-rgb:  233, 21, 50;
  --f-accent-deep: #B30F26;

  --f-line:        rgba(20, 20, 20, .08);
  --f-line-2:      rgba(20, 20, 20, .14);

  --f-text:        #141414;
  --f-soft:        rgba(20, 20, 20, .72);
  --f-mute:        rgba(20, 20, 20, .5);

  /* Text and icons drawn straight on the page, the colour of a see-through
     hover fill, and what sits on a filled strong or call-to-action button. */
  --f-strong:      #141414;
  --f-on-strong:   #FFFFFF;
  --f-tint-rgb:    20, 20, 20;
  --f-cta-bg:      var(--f-accent);
  --f-cta-text:    #FFFFFF;
  --f-cta-hover:   var(--f-accent-2);
  --f-bar:         rgba(255, 255, 255, .96);

  --f-ok:          #16A34A;
  --f-warn:        #D97706;

  /* Keyboard focus: a neutral ring, never the accent red, which reads as an
     error next to a form field. */
  --f-focus:       #1F2937;

  /* Radii */
  --f-r-sm:   8px;
  --f-r:      12px;
  --f-r-lg:   16px;
  --f-r-xl:   22px;
  --f-r-pill: 999px;

  /* Elevation */
  --f-sh-sm: 0 2px 10px rgba(0, 0, 0, .06);
  --f-sh:    0 12px 32px rgba(0, 0, 0, .10);
  --f-sh-lg: 0 26px 70px rgba(0, 0, 0, .16);
  --f-glow:  0 10px 30px rgba(var(--f-accent-rgb), .40);

  /* Motion */
  --f-ease: cubic-bezier(.4, 0, .2, 1);
  --f-fast: 160ms;
  --f-mid:  260ms;

  /* Layout */
  --f-container: 1320px;
  --f-gutter:    16px;
  --f-topbar-h:  40px;
  --f-header-h:  74px;
  --f-nav-h:     50px;
  --f-tabbar-h:  64px;

  --f-font: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body.f-body {
  margin: 0;
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.f-body.is-locked { overflow: hidden; }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--f-fast) var(--f-ease);
}

a:hover { color: var(--f-accent-2); }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
.f-links, .f-nav__list, .f-social, .f-drawer__list { list-style: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--f-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the red bars (announcement, buttons) a white ring shows where the dark
   one would vanish. */
:where(.f-announce, .f-btn, .f-summary__checkout, .f-summary__bar-btn, .f-stickybar__btn--solid) :focus-visible,
:where(.f-btn, .f-summary__checkout, .f-summary__bar-btn, .f-stickybar__btn--solid):focus-visible {
  outline-color: var(--f-focus);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}

/* A link, @username or URL inside Arabic text: isolated left to right, shown
   whole, and broken only where the markup allows (after "/"), never inside a
   word — the last resort is a break anywhere, so nothing overflows. */
.f-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Kept in one piece: a link that does not fit after its label moves to the
   next line whole, instead of splitting at "https://". */
:where(.f-cart__datum, .f-cartpop__datum) .f-ltr {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.f-skip {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--f-accent);
  border-radius: 0 0 var(--f-r) var(--f-r);
  transition: inset-block-start var(--f-fast) var(--f-ease);
}

.f-skip:focus { inset-block-start: 0; color: #fff; }

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

.f-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.f-main { flex: 1 0 auto; }

.f-container {
  width: 100%;
  max-width: var(--f-container);
  margin-inline: auto;
  padding-inline: var(--f-gutter);
}

.f-section { padding-block: 48px; }
.f-section--cats { padding-block: 44px 20px; }
.f-section--grid { padding-block: 28px 56px; }

.f-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--f-mute);
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
}

/* -------------------------------------------------------------------------
   4. Primitives
   ---------------------------------------------------------------------- */

.f-icon { flex: none; }

.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--f-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-radius: var(--f-r-sm);
  box-shadow: var(--f-glow);
  transition: background var(--f-fast) var(--f-ease),
              transform var(--f-fast) var(--f-ease),
              box-shadow var(--f-fast) var(--f-ease);
}

.f-btn:hover {
  background: var(--f-accent-2);
  color: #fff;
  transform: translateY(-1px);
}

.f-btn:active { transform: translateY(0); }

.f-btn[disabled] { opacity: .6; pointer-events: none; }

/* A slow host can leave add-to-cart pending for seconds, so the button says so
   rather than just dimming. */
/* WooCommerce's own button needs a positioning context for the spinner/tick. */
.single_add_to_cart_button { position: relative; }

.f-btn.is-busy,
.single_add_to_cart_button.is-busy {
  opacity: .75;
  pointer-events: none;
  position: relative;
  color: transparent;
}

.f-btn.is-busy > *,
.single_add_to_cart_button.is-busy > * { visibility: hidden; }

.f-btn.is-busy::after,
.single_add_to_cart_button.is-busy::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 18px;
  height: 18px;
  /* Logical, so the centring holds in RTL — a plain left margin would not. */
  margin-block-start: -9px;
  margin-inline-start: -9px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-block-start-color: #fff;
  border-radius: 50%;
  animation: f-spin .7s linear infinite;
}

@keyframes f-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes f-spin {
  to { transform: rotate(360deg); }
}

.f-btn--hero {
  padding: 14px 30px;
  font-size: 16px;
  border-radius: var(--f-r-sm);
}

/* Touch screens: the product cards' add button is 44px tall (41px from its
   padding on phones). */
@media (pointer: coarse) {
  .f-btn--atc { min-height: 44px; }
}

/* The chevron points at the reading direction. */
.f-btn__chev { transform: rotate(180deg); }
[dir="ltr"] .f-btn__chev { transform: none; }

.f-btn--atc {
  width: 100%;
  padding: 11px 18px;
  font-size: 14.5px;
}

/* On a product card the button is MSH's white outline rather than a solid
   red block: a grid of solid red buttons shouts over the products, and the
   outline still reads plainly as the thing to press. It fills in on hover. */
.f-card .f-btn--atc {
  background: transparent;
  border: 1px solid rgba(var(--f-tint-rgb), .78);
  box-shadow: none;
  color: var(--f-strong);
}

.f-card .f-btn--atc:hover {
  background: var(--f-strong);
  border-color: var(--f-strong);
  color: var(--f-on-strong);
  transform: none;
}

.f-btn--ghost {
  background: transparent;
  border: 1px solid var(--f-line-2);
  box-shadow: none;
  color: var(--f-soft);
}

.f-btn--ghost:hover { background: rgba(var(--f-tint-rgb), .06); color: var(--f-strong); }

.f-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(var(--f-tint-rgb), .05);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  color: var(--f-soft);
  transition: background var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease);
}

.f-iconbtn:hover { background: rgba(var(--f-tint-rgb), .11); color: var(--f-strong); }

.f-iconbtn__wrap { position: relative; display: inline-flex; }

.f-badge {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: -10px;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--f-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--f-r-pill);
  box-shadow: 0 0 0 2px var(--f-header);
}

/* Phones: no red "0" on an empty cart. Desktop keeps showing it, as before. */
@media (max-width: 980px) {
  .f-badge[hidden] { display: none; }
}

/* -------------------------------------------------------------------------
   5. Logo
   ---------------------------------------------------------------------- */

.f-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--f-strong);
}

.f-logo:hover { color: var(--f-strong); }

/* Touch screens: the home link is 44px tall around the 30-38px mark (the
   negative margin keeps the header's height). */
@media (pointer: coarse) {
  .f-logo { min-height: 44px; }
  .f-header .f-logo { margin-block: -5px; }
  .f-header .f-cart-total { min-height: 44px; }
}

/* The brand mark is a wide lockup, not a square badge — height drives it so
   the aspect ratio is never squashed, whichever artwork is in place. Scoped
   under .f-logo so Elementor's ".elementor img { height: auto }" cannot blow
   the logo up to its file size inside an Elementor header. */
.f-logo .f-logo__mark { width: auto; height: 30px; flex: none; }
.f-logo--sm .f-logo__mark { height: 25px; }
.f-logo--lg .f-logo__mark { height: 38px; }

.f-logo .f-logo__img { max-height: 46px; width: auto; }

.f-logo__words { display: flex; flex-direction: column; line-height: 1; }

.f-logo__ar {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.f-logo__en {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--f-mute);
  text-transform: uppercase;
}

.f-logo--lg .f-logo__ar { font-size: 23px; }
.f-logo--sm .f-logo__ar { font-size: 17px; }

/* -------------------------------------------------------------------------
   6. Top bar
   ---------------------------------------------------------------------- */

.f-topbar {
  background: var(--f-topbar);
  border-block-end: 1px solid rgba(var(--f-tint-rgb), .05);
  font-size: 12.5px;
}

.f-topbar__inner {
  min-height: var(--f-topbar-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.f-topbar__links { flex: none; }

.f-topbar__links .f-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.f-topbar__links a { color: var(--f-mute); }
.f-topbar__links a:hover { color: var(--f-strong); }

.f-topbar__text {
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--f-soft);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------------- */

.f-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: var(--f-header);
  border-block-end: 1px solid var(--f-line);
}

/* A logged-in owner has WordPress's admin bar fixed across the top. Stuck at
   0, the header's icon row — cart included — slides underneath it. The bar is
   32px on desktop, 46px on tablets, and stops being fixed at all on phones. */
.admin-bar .f-header { inset-block-start: 32px; }

@media (max-width: 782px) {
  .admin-bar .f-header { inset-block-start: 46px; }
}

@media (max-width: 600px) {
  .admin-bar .f-header { inset-block-start: 0; }
}

.f-header__inner {
  min-height: var(--f-header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Order 1 is the line start — the right edge in RTL, where the brand belongs. */
.f-header__brand  { order: 1; flex: none; }
.f-header__search { order: 2; flex: 1; min-width: 0; }
.f-header__lead   { order: 3; flex: none; display: flex; align-items: center; gap: 12px; }

.f-header__actions { display: flex; align-items: center; gap: 12px; }

/* Menu and search buttons, and the announcement bar, belong to the phone
   header; a desktop has the full search field and the category nav instead. */
.f-header__start,
.f-announce { display: none; }

/* --- Header slot: currency / language switchers ---
   A plugin drops its own widget in here, so the styling is defensive: it tames
   whatever select, link or list arrives without assuming any one plugin. */

.f-headerx {
  display: flex;
  align-items: center;
  gap: 8px;
}

.f-headerx__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--f-soft);
}

.f-headerx select,
.f-headerx .f-headerx__item > a {
  padding: 8px 12px;
  background: rgba(var(--f-tint-rgb), .05);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  color: var(--f-soft);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease);
}

.f-headerx select:hover,
.f-headerx .f-headerx__item > a:hover {
  background: rgba(var(--f-tint-rgb), .11);
  color: var(--f-strong);
}

.f-headerx select option { background: var(--f-surface); color: var(--f-strong); }

.f-headerx ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.f-headerx img { display: inline-block; max-height: 16px; width: auto; }

/* In the drawer it becomes a stacked block rather than a tight row. */
.f-headerx--drawer {
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--f-line);
}

.f-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: var(--f-soft);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--f-r-pill);
  transition: background var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease);
}

.f-account:hover { background: rgba(var(--f-tint-rgb), .07); color: var(--f-strong); }

/* Signed in: a filled disc with the first letter of the name (or the person
   glyph) and a green dot, in the header and the tab bar (folo_account_icon). */
.f-avatar {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--f-strong);
  color: var(--f-on-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.f-avatar .f-icon { width: 16px; height: 16px; }
.f-avatar__initial { display: block; padding-block-start: 1px; }

.f-avatar__dot {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--f-ok);
  box-shadow: 0 0 0 2px var(--f-header);
}

/* -------------------------------------------------------------------------
   8. Search
   ---------------------------------------------------------------------- */

.f-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin-inline: auto;
  background: rgba(var(--f-tint-rgb), .045);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  transition: border-color var(--f-fast) var(--f-ease), background var(--f-fast) var(--f-ease);
}

.f-search:focus-within {
  border-color: rgba(var(--f-accent-rgb), .55);
  background: rgba(var(--f-tint-rgb), .07);
}

.f-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 20px;
  background: none;
  border: 0;
  font-size: 14.5px;
  color: var(--f-strong);
}

.f-search__input::placeholder { color: var(--f-mute); }
.f-search__input:focus { outline: none; }
.f-search__input::-webkit-search-cancel-button { filter: invert(1) opacity(.45); }

.f-search__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: 3px;
  background: none;
  border: 0;
  border-radius: var(--f-r-pill);
  color: var(--f-mute);
}

.f-search__submit:hover { color: var(--f-strong); }

.f-search__results {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline: 0;
  z-index: 70;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 8px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: var(--f-r-lg);
  box-shadow: var(--f-sh-lg);
}

.f-search__results[hidden] { display: none; }

.f-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--f-r-sm);
  transition: background var(--f-fast) var(--f-ease);
}

.f-result:hover,
.f-result.is-active { background: rgba(var(--f-tint-rgb), .07); color: var(--f-strong); }

.f-result__thumb {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--f-r-sm);
  background: var(--f-surface-2);
}

.f-result__body { min-width: 0; flex: 1; }

.f-result__title {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.f-result__meta { font-size: 12px; color: var(--f-mute); }
.f-result__price { flex: none; font-size: 13px; font-weight: 700; color: var(--f-accent-2); }

.f-search__state {
  padding: 16px;
  text-align: center;
  color: var(--f-mute);
  font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   9. Category navigation bar
   ---------------------------------------------------------------------- */

.f-nav {
  background: var(--f-header);
  border-block-end: 1px solid var(--f-line);
}

.f-nav__inner {
  min-height: var(--f-nav-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.f-nav__list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.f-nav__list::-webkit-scrollbar { display: none; }

.f-nav__list > li { display: flex; }

.f-nav__list > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--f-soft);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.f-nav__list > li > a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 14px;
  height: 2px;
  background: var(--f-accent);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform var(--f-mid) var(--f-ease);
}

.f-nav__list > li > a:hover { color: var(--f-strong); }

.f-nav__list > li.current-menu-item > a,
.f-nav__list > li.current-menu-parent > a,
.f-nav__list > li.current-product_cat-ancestor > a {
  color: var(--f-accent-2);
}

.f-nav__list > li.current-menu-item > a::after,
.f-nav__list > li.current-menu-parent > a::after,
.f-nav__list > li > a:hover::after { transform: scaleX(1); }

/* Dropdowns for menus with children. */
.f-nav__list .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 70;
  min-width: 200px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: var(--f-r);
  box-shadow: var(--f-sh);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--f-fast) var(--f-ease), transform var(--f-fast) var(--f-ease), visibility var(--f-fast);
}

.f-nav__list > li { position: relative; }

.f-nav__list > li:hover > .sub-menu,
.f-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.f-nav__list .sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--f-r-sm);
  font-size: 14px;
  color: var(--f-soft);
}

.f-nav__list .sub-menu a:hover { background: rgba(var(--f-tint-rgb), .07); color: var(--f-strong); }

/* -------------------------------------------------------------------------
   10. Drawer
   ---------------------------------------------------------------------- */

/* Above WordPress's admin bar too, which otherwise covers the menu's title
   and close button for a logged-in owner. */
.f-drawer { position: fixed; inset: 0; z-index: 100000; }
.f-drawer[hidden] { display: none; }

.f-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--f-mid) var(--f-ease);
}

.f-drawer.is-open .f-drawer__scrim { opacity: 1; }

.f-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(330px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--f-surface);
  border-inline-end: 1px solid var(--f-line);
  box-shadow: var(--f-sh-lg);
  transform: translateX(-100%);
  transition: transform var(--f-mid) var(--f-ease);
}

[dir="rtl"] .f-drawer__panel { transform: translateX(100%); }
.f-drawer.is-open .f-drawer__panel { transform: translateX(0); }

.f-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px 12px 18px;
  border-block-end: 1px solid var(--f-line);
}

[dir="rtl"] .f-drawer__head { padding: 12px 18px 12px 10px; }

.f-drawer__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--f-strong); }

.f-drawer__head .f-iconbtn { background: none; border: 0; color: var(--f-strong); }

.f-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 28px;
}

/* MSH's menu: full-width rows split by hairlines, each ending in a chevron. */
.f-drawer__list { display: grid; }

.f-drawer__list a,
.f-drawer__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-block-end: 1px solid var(--f-line);
  color: var(--f-strong);
  font-size: 15px;
  font-weight: 700;
}

.f-drawer__list a::after,
.f-drawer__links a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border: solid currentColor;
  border-width: 0 0 1.6px 1.6px;
  opacity: .45;
  transform: rotate(-135deg);
}

/* The chevron points toward the line end: left in Arabic. */
[dir="rtl"] .f-drawer__list a::after,
[dir="rtl"] .f-drawer__links a::after { transform: rotate(45deg); }

.f-drawer__list a:hover,
.f-drawer__links a:hover { background: rgba(var(--f-tint-rgb), .05); color: var(--f-strong); }

.f-drawer__list .f-icon { color: var(--f-accent-2); }

.f-drawer__links .f-links { display: grid; gap: 0; }
.f-drawer__links a { color: var(--f-soft); font-size: 14px; font-weight: 600; }

.f-drawer__social { margin-block-start: 20px; padding-inline: 18px; }

/* -------------------------------------------------------------------------
   11. Hero
   ---------------------------------------------------------------------- */

.f-hero { padding-block: 20px 8px; }

.f-hero__frame {
  position: relative;
  border-radius: var(--f-r-xl);
  overflow: hidden;
  box-shadow: var(--f-sh);
}

.f-hero__track {
  display: grid;
  grid-template-areas: "slide";
}

.f-hero__slide {
  grid-area: slide;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 380px;
  padding: 44px 52px;
  background: linear-gradient(115deg, var(--f-accent-deep) 0%, var(--f-accent) 46%, var(--f-accent-2) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--f-mid) var(--f-ease), visibility var(--f-mid);
}

.f-hero__slide.is-active { opacity: 1; visibility: visible; }

.f-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* --- Supplied banner artwork --- */

.f-hero__banner {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}

/* The artwork is shown whole — never cropped — because these banners carry
   their own logo, headline and CTA, and a crop would cut one of them off.
   A blurred, darkened copy fills whatever the poster does not cover, so a
   portrait banner in a wide frame still reads as one designed panel. */
.f-hero__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--banner);
  background-size: cover;
  background-position: center;
  filter: blur(36px) saturate(1.25) brightness(.40);
  transform: scale(1.18);
}

.f-hero__banner img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A real banner replaces the gradient, the wash and the drawn tile scene. */
.f-hero__slide--img { background: #000; }
.f-hero__slide--img .f-hero__wash,
.f-hero__slide--img .f-hero__scene { display: none; }

/* Artwork that carries its own headline: the whole slide is the link.
   Taller than a drawn slide, so a portrait poster is not reduced to a stamp. */
.f-hero__slide--bare {
  padding: 0;
  min-height: 540px;
}

.f-hero__slide--bare .f-hero__copy { display: none; }

/* Stays absolute so it fills the slide's own height — going relative here let
   the image render at its natural size and stretched the hero to 1448px. */
.f-hero__slide--bare .f-hero__banner { z-index: 0; }

/* Bare means bare: artwork that carries its own message does not also need the
   theme's corner badge and handwritten note competing with it. */
.f-hero__slide--bare .f-hero__badge,
.f-hero__slide--bare .f-hero__note { display: none; }

/* The bundled banner cut above the payment strip printed in it
   (folo_hero_paystrip_crop(), hero.php): the methods the store can really
   take right now sit under the artwork instead. Desktop: a band along the
   bottom of the frame, over the blurred fill, with the poster above it. */
.f-hero__pay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px 16px 12px;
}

.f-hero__slide--paybar .f-hero__banner img { height: calc(100% - 60px); }

.f-paybadges--hero { justify-content: center; gap: 6px 12px; }
.f-paybadges--hero .f-paybadges__label { color: rgba(255, 255, 255, .84); font-size: 13px; }
.f-paybadges--hero .f-paybadge__svg { width: 46px; height: 30px; }

.f-hero__hit {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* Keep the headline readable when it is kept over a photograph. */
.f-hero__slide--img:not(.f-hero__slide--bare)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, rgba(4, 8, 18, .78) 0%, rgba(4, 8, 18, .45) 45%, transparent 75%);
}

[dir="ltr"] .f-hero__slide--img:not(.f-hero__slide--bare)::before {
  background: linear-gradient(to right, rgba(4, 8, 18, .78) 0%, rgba(4, 8, 18, .45) 45%, transparent 75%);
}

.f-hero__wash svg { width: 100%; height: 100%; }

/* Copy sits at the line start, which is the right in RTL. */
.f-hero__copy {
  flex: 1 1 46%;
  max-width: 520px;
  text-align: start;
}

.f-hero__title {
  display: grid;
  gap: 2px;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}

.f-hero__title-2 { color: #0B1220; }

.f-hero__sub {
  margin-block: 14px 24px;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}

.f-hero__copy .f-btn--hero {
  background: #E5133A;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
}

.f-hero__copy .f-btn--hero:hover { background: #fff; color: #E5133A; }

/* --- The tile scene --- */

.f-hero__scene {
  position: relative;
  flex: 1 1 46%;
  align-self: stretch;
  min-height: 250px;
}

.f-hero__stand {
  position: absolute;
  inset-block-end: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.f-hero__stand.is-back  { inset-inline-start: 4%;  --s: .78; z-index: 1; }
.f-hero__stand.is-front { inset-inline-start: 33%; --s: 1;   z-index: 3; }
.f-hero__stand.is-mid   { inset-inline-start: 64%; --s: .86; z-index: 2; }

/* Two tiles need re-centring, or the scene sits lopsided. */
.f-hero__scene--2 .f-hero__stand.is-back  { inset-inline-start: 16%; --s: .84; }
.f-hero__scene--2 .f-hero__stand.is-front { inset-inline-start: 46%; --s: 1;   }

.f-hero__tile {
  display: grid;
  place-items: center;
  width: calc(112px * var(--s));
  height: calc(112px * var(--s));
  border-radius: calc(26px * var(--s));
  background: linear-gradient(150deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  color: #fff;
  box-shadow:
    0 calc(18px * var(--s)) calc(38px * var(--s)) rgba(0, 0, 0, .42),
    inset 0 2px 0 rgba(255, 255, 255, .34);
  animation: f-float 6s var(--f-ease) infinite;
}

.f-hero__stand.is-front .f-hero__tile { animation-delay: -2s; }
.f-hero__stand.is-mid .f-hero__tile   { animation-delay: -4s; }

@keyframes f-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.f-hero__plinth {
  width: calc(124px * var(--s));
  height: calc(26px * var(--s));
  margin-block-start: calc(10px * var(--s));
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(8, 14, 30, .95), rgba(8, 14, 30, .25) 72%);
}

.f-hero__chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px 12px 12px 4px;
  color: #fff;
  box-shadow: var(--f-sh-sm);
  animation: f-float 5s var(--f-ease) infinite;
}

.f-hero__chip--user  { inset-block-start: 8%;  inset-inline-start: 46%; background: #E8213E; animation-delay: -1s; }
.f-hero__chip--heart { inset-block-start: 34%; inset-inline-start: 22%; background: #FF3D5C; animation-delay: -3s; }

/* --- Decoration --- */

.f-hero__badge {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 34px;
  z-index: 4;
  padding: 7px 16px;
  background: #0B1220;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: var(--f-r-pill);
  box-shadow: var(--f-sh-sm);
}

.f-hero__note {
  position: absolute;
  inset-block-end: 24px;
  inset-inline-end: 40px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #FFE1E7;
  font-size: 13px;
  font-weight: 700;
}

.f-hero__arrow { width: 44px; height: 32px; }
[dir="rtl"] .f-hero__arrow { transform: scaleX(-1); }

.f-hero__dots {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 7px;
}

[dir="rtl"] .f-hero__dots { transform: translateX(50%); }

.f-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, .42);
  border: 0;
  border-radius: var(--f-r-pill);
  transition: width var(--f-mid) var(--f-ease), background var(--f-mid) var(--f-ease);
}

.f-hero__dot.is-active { width: 22px; background: #fff; }

/* One slide in play: nothing to choose between. */
.f-hero.is-single .f-hero__dots { display: none; }

/* Once real banner artwork exists, the drawn scene steps out on every screen
   size: it is the stand-in for a store with no banners yet, not a slide to
   rotate between photographs. */
.f-hero--has-art .f-hero__slide--drawn,
.f-hero--has-art .f-hero__dot--drawn { display: none; }

/* -------------------------------------------------------------------------
   12. Section heading
   ---------------------------------------------------------------------- */

.f-head {
  margin-block-end: 26px;
  text-align: center;
}

.f-head__icon {
  display: inline-grid;
  place-items: center;
  margin-block-end: 6px;
  color: var(--f-accent-2);
  filter: drop-shadow(0 0 10px rgba(var(--f-accent-rgb), .75));
}

.f-head__title {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 800;
}

.f-head__sub {
  margin: 6px 0 0;
  color: var(--f-mute);
  font-size: 14px;
  font-weight: 500;
}

.f-head--archive { text-align: start; margin-block-end: 22px; }

/* -------------------------------------------------------------------------
   13. Category board
   ---------------------------------------------------------------------- */

.f-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
}

/* Few tiles should read as a deliberate pair, not a short row of small ones. */
.f-cats--1 { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
.f-cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; gap: 28px; }
.f-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin-inline: auto; }

.f-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--f-text);
}

.f-cat__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / .78;
  isolation: isolate;
}

.f-cat__splash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .92;
  transition: transform var(--f-mid) var(--f-ease), opacity var(--f-mid) var(--f-ease);
}

.f-cat__glyph {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .32);
  transition: transform var(--f-mid) var(--f-ease);
}

.f-cat:hover .f-cat__glyph { transform: translateY(-5px) scale(1.03); }
.f-cat:hover .f-cat__splash { transform: scale(1.06); opacity: 1; }

.f-cat__label {
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
}

.f-cat:hover .f-cat__label { color: var(--f-accent-2); }

/* --- Picture tiles ---
   A supplied render already carries its own glow and lettering, so the tile
   gets out of its way: square frame, cover fit, and the artwork's own black
   background blended into the page rather than boxed on a card. */

.f-cat--img .f-cat__art {
  aspect-ratio: 1;
  border-radius: var(--f-r-lg);
  overflow: hidden;
  background: #000;
}

/* Under a picture the drawn artwork and the caption step aside; app.js puts
   them back by dropping .f-cat--img if the picture fails to load. */
.f-cat--img .f-cat__drawn,
.f-cat--img .f-cat__label { display: none; }

.f-cat__drawn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.f-cat__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--f-mid) var(--f-ease), filter var(--f-mid) var(--f-ease);
}

.f-cat--img:hover .f-cat__img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* Lift the corners off the page so the square does not look pasted on. */
.f-cat--img .f-cat__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06),
              inset 0 -40px 60px -30px rgba(var(--f-accent-rgb), .18);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   14. Product grid and cards
   ---------------------------------------------------------------------- */

.f-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.f-card {
  display: flex;
  flex-direction: column;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  overflow: hidden;
  transition: border-color var(--f-mid) var(--f-ease),
              transform var(--f-mid) var(--f-ease),
              box-shadow var(--f-mid) var(--f-ease);
}

.f-card:hover,
.f-card:focus-within {
  border-color: rgba(var(--f-accent-rgb), .55);
  transform: translateY(-6px);
  box-shadow: var(--f-sh-lg), 0 0 0 1px rgba(var(--f-accent-rgb), .25);
}

/* A light sweeps across the artwork on hover. The pseudo-element sits above
   the image but below the buttons, and is skipped for reduced motion. */
.f-card__media::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .06) 35%,
    rgba(255, 255, 255, .26) 50%,
    rgba(255, 255, 255, .06) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.f-card:hover .f-card__media::after {
  animation: f-shine 900ms cubic-bezier(.25, .6, .3, 1) forwards;
}

@keyframes f-shine {
  0%   { opacity: 0;   inset-inline-start: -60%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0;   inset-inline-start: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .f-card__media::after { display: none; }
}

/* Square, because product posters are square compositions — a 4:3 crop would
   slice the logo off the top and the strapline off the bottom. */
.f-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--f-surface-2);
  overflow: hidden;
}

.f-card__link { display: block; height: 100%; }

.f-card__img,
.f-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--f-mid) var(--f-ease);
}

.f-card:hover .f-card__img,
.f-card:hover .f-card__media img { transform: scale(1.07); }

/* Generated poster used when a product has no image yet. */
.f-poster {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--c1) 34%, transparent), transparent 70%),
    linear-gradient(160deg, #0F1730, #070C18 70%);
}

.f-poster__glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c2) 55%, transparent), transparent 68%);
  filter: blur(18px);
}

.f-poster__glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 32px;
  background: linear-gradient(150deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  color: #fff;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .3);
}

.f-watermark {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(6, 10, 20, .62);
  border-radius: var(--f-r-sm);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.f-watermark .f-logo__mark { width: auto; height: 14px; }
.f-watermark__words { display: flex; flex-direction: column; line-height: 1; }
.f-watermark__ar { font-size: 10.5px; font-weight: 800; color: #fff; }
.f-watermark__en { font-size: 6.5px; font-weight: 700; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }

/* The opposite corner from the heart and eye buttons, as MSH places its
   badges — sharing their corner, the badge sat hidden under the heart. */
.f-card__flag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--f-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--f-r-pill);
}

/* Top corner, not the middle: product posters carry their title across the
   lower half, and centred buttons sat right on top of the lettering. */
.f-card__tools {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 4;
  display: grid;
  gap: 10px;
}

/* On a pointer device the buttons stay out of the way until the card is
   hovered, then pop up in sequence. Touch screens have no hover, so there they
   are simply always visible — hiding them would make them unreachable. */
@media (hover: hover) and (pointer: fine) {
  .f-card__tools .f-tool {
    opacity: 0;
    transform: scale(.4) translateY(14px);
    transition: opacity 260ms var(--f-ease),
                transform 320ms cubic-bezier(.34, 1.56, .64, 1),
                background var(--f-fast) var(--f-ease),
                color var(--f-fast) var(--f-ease);
  }

  .f-card:hover .f-tool,
  .f-card:focus-within .f-tool {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* The second button follows a beat behind the first. */
  .f-card:hover .f-tool:nth-child(2),
  .f-card:focus-within .f-tool:nth-child(2) { transition-delay: 70ms; }

  /* Keyboard users must still be able to see what they have focused. */
  .f-card .f-tool:focus-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-card__tools .f-tool { transition: opacity 120ms linear; transform: none; }
  .f-card:hover .f-tool { transform: none; }
}

.f-tool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(6, 10, 20, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--f-r-pill);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  transition: background var(--f-fast) var(--f-ease),
              color var(--f-fast) var(--f-ease),
              transform var(--f-fast) var(--f-ease);
}

.f-tool:hover { background: var(--f-accent); color: #fff; transform: scale(1.07); }

.f-tool[aria-pressed="true"] { background: var(--f-accent); color: #fff; }
.f-tool[aria-pressed="true"] .f-icon { fill: currentColor; }

/* Tablets and any touch screen: the heart and the eye are finger targets,
   40px (phones get their own 40px button around a smaller disc below). */
@media (max-width: 980px), (pointer: coarse) {
  .f-tool { width: 40px; height: 40px; }
}

.f-card__body {
  flex: 1;
  padding: 14px 16px 6px;
  text-align: center;
}

.f-card__eyebrow {
  margin: 0 0 4px;
  color: var(--f-mute);
  font-size: 12.5px;
  font-weight: 600;
}

.f-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.f-card__title a:hover { color: var(--f-accent-2); }

.f-card__unit {
  margin: 4px 0 0;
  color: var(--f-soft);
  font-size: 14px;
  font-weight: 500;
}

/* New price and the struck-out old one share a line, as on MSH's cards. */
.f-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  margin: 8px 0 0;
  color: var(--f-accent-2);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.f-card__foot { padding: 12px 16px 16px; }

/* -------------------------------------------------------------------------
   15. Quick view
   ---------------------------------------------------------------------- */

.f-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
}

.f-modal[hidden] { display: none; }

.f-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, .76);
  backdrop-filter: blur(4px);
}

.f-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: var(--f-r-xl);
  box-shadow: var(--f-sh-lg);
}

.f-modal__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 2;
}

.f-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.f-modal__media {
  aspect-ratio: 1;
  border-radius: var(--f-r-lg);
  overflow: hidden;
  background: var(--f-surface-2);
}

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

.f-modal__eyebrow { color: var(--f-mute); font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.f-modal__title { font-size: 22px; margin: 0 0 8px; }
.f-modal__unit { color: var(--f-soft); font-size: 14px; margin: 0 0 8px; }
.f-modal__price { color: var(--f-accent-2); font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.f-modal__excerpt { color: var(--f-soft); font-size: 14.5px; }
.f-modal__actions { display: flex; gap: 10px; margin-block-start: 18px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   15b. Add-to-cart feedback
   ---------------------------------------------------------------------- */

/* The product image flies to the cart icon. Cloned into a fixed-position
   element so it can travel across the page without disturbing the layout. */
.f-fly {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

.f-fly__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  will-change: transform, opacity, border-radius;
}

/* The horizontal travel rides on the wrapper and the vertical travel on the
   image inside it; giving the two different easings is what bends the path.

   MSH's path, measured frame by frame: the parcel climbs to the header almost
   at once, then runs along it into the cart. So the vertical travel (and the
   shrink with it) front-loads, while the horizontal travel starts slowly and
   finishes fast — "up, then across", never rising above the cart. */
.f-fly.is-flying { animation: f-fly-x 600ms cubic-bezier(.6, 0, .9, .55) forwards; }
.f-fly.is-flying .f-fly__img { animation: f-fly-y 600ms cubic-bezier(.2, .7, .3, 1) forwards; }

@keyframes f-fly-x {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--fly-x, 0px)); }
}

@keyframes f-fly-y {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    border-radius: 14px;
  }
  90% { opacity: 1; }
  100% {
    transform: translateY(var(--fly-y, 0px)) scale(.12);
    opacity: 0;
    border-radius: 50%;
  }
}

/* The cart reacts the moment the parcel lands in it. */
.f-cart-link.is-hit { animation: f-cart-shake 620ms var(--f-ease); }

/* The ripple hangs off the icon wrapper, not the link: on the tab bar the
   link's own ::after is already spoken for by the current-page marker. */
.f-cart-link.is-hit .f-iconbtn__wrap::after,
.f-cart-link.is-hit .f-tabbar__icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid var(--f-accent);
  border-radius: 50%;
  pointer-events: none;
  animation: f-cart-ripple 700ms ease-out forwards;
}

@keyframes f-cart-ripple {
  from { transform: scale(.45); opacity: .95; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* The cart badge kicks when the count changes. */
.f-badge.is-bumped { animation: f-bump 620ms cubic-bezier(.34, 1.56, .64, 1); }

@keyframes f-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.75); }
  55%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

.f-cart-link.is-bumped { animation: f-cart-shake 620ms var(--f-ease); }

@keyframes f-cart-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-4px) rotate(-9deg); }
  60%      { transform: translateY(0) rotate(7deg); }
}

/* Button confirms, then returns to its label. */
.f-btn.is-added,
.single_add_to_cart_button.is-added {
  background: var(--f-ok) !important;
  box-shadow: 0 10px 26px rgba(47, 208, 122, .35) !important;
  pointer-events: none;
}

.f-btn.is-added > *,
.single_add_to_cart_button.is-added > * { visibility: hidden; }

.f-btn.is-added::after,
.single_add_to_cart_button.is-added::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 18px;
  height: 10px;
  margin-block-start: -8px;
  margin-inline-start: -9px;
  border: 2.5px solid #fff;
  border-block-start: 0;
  border-inline-end: 0;
  border-radius: 1px;
  transform: rotate(-45deg);
  animation: f-tick 360ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes f-tick {
  0%   { transform: rotate(-45deg) scale(0); opacity: 0; }
  100% { transform: rotate(-45deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .f-fly { display: none; }
  .f-badge.is-bumped,
  .f-cart-link.is-bumped,
  .f-cart-link.is-hit,
  .f-cart-link.is-hit .f-iconbtn__wrap::after,
  .f-cart-link.is-hit .f-tabbar__icon::before,
  .f-btn.is-added::after,
.single_add_to_cart_button.is-added::after { animation: none; }
}

/* -------------------------------------------------------------------------
   15c. Add-to-cart notification

   A success toast that drops in at the top of the screen, draws a tick, and
   counts itself out on a progress bar.
   ---------------------------------------------------------------------- */

.f-added {
  position: fixed;
  inset-block-start: 16px;
  inset-inline: 0;
  z-index: 190;
  margin-inline: auto;
  width: min(342px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 14px;
  background: var(--f-ok);
  border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-140%);
  pointer-events: none;
  transition: opacity 220ms var(--f-ease), transform 220ms var(--f-ease);
}

.f-added.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 400ms var(--f-ease),
              transform 500ms cubic-bezier(.34, 1.36, .64, 1);
}

/* Clear the WordPress admin bar, which outranks everything on z-index. Only
   logged-in users see it, but that includes the shop owner testing the store. */
.admin-bar .f-added { inset-block-start: 62px; }

@media (min-width: 783px) {
  .admin-bar .f-added { inset-block-start: 48px; }
}

.f-added__tick {
  flex: none;
  width: 26px;
  height: 26px;
}

.f-added__tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

.f-added__ring,
.f-added__check {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Both strokes start fully offset, so the shapes are invisible until the
   toast is shown and the dash offset animates back to zero. */
.f-added__ring  { stroke-dasharray: 145; stroke-dashoffset: 145; }
.f-added__check { stroke-dasharray: 40;  stroke-dashoffset: 40; }

.f-added.is-visible .f-added__ring  { animation: f-draw 520ms ease-out 80ms forwards; }
.f-added.is-visible .f-added__check { animation: f-draw 300ms ease-out 440ms forwards; }

@keyframes f-draw { to { stroke-dashoffset: 0; } }

.f-added__heading {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

/* A 40px target around the 24px glyph; the negative margin keeps the bar
   as tall as before. */
.f-added__close {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -8px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  font-size: 21px;
  line-height: 1;
}

.f-added__close:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.f-added__timer {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 3px;
  background: rgba(255, 255, 255, .25);
}

.f-added__timer-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .9);
}

@media (prefers-reduced-motion: reduce) {
  .f-added,
  .f-added.is-visible { transition: opacity 120ms linear; transform: none; }
  .f-added__ring,
  .f-added__check { stroke-dashoffset: 0; animation: none; }
  .f-added__timer { display: none; }
}

/* -------------------------------------------------------------------------
   15d. Mini-cart panel

   Opens on the cart's side of the header once the parcel has landed.
   ---------------------------------------------------------------------- */

.f-cartpop {
  position: fixed;
  /* The script pins the top to the header's edge; this is only the fallback. */
  inset-block-start: 12px;
  /* The cart sits at the inline end of the header — left in Arabic, right in
     English — so the panel opens over it either way. */
  inset-inline-end: 18px;
  z-index: 191;
  width: min(390px, calc(100vw - 24px));
  padding: 4px 16px 16px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: var(--f-r-lg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 200ms var(--f-ease), transform 200ms var(--f-ease);
}

[dir="rtl"] .f-cartpop { transform-origin: top left; }

.f-cartpop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 280ms var(--f-ease),
              transform 380ms cubic-bezier(.34, 1.4, .64, 1);
}

/* The line along the top edge counts down to the panel closing itself. It
   shrinks toward the inline start — the right in Arabic — as MSH's does. */
.f-cartpop__timer {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--f-strong);
  transform-origin: left center;
}

[dir="rtl"] .f-cartpop__timer { transform-origin: right center; }

.f-cartpop__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.f-cartpop__tick { flex: none; color: var(--f-ok); display: inline-flex; }

.f-cartpop__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--f-text);
}

/* 40px to tap on every screen (it was 28px from 481px up, a tablet's size);
   the negative margin keeps the head row as tall. */
.f-cartpop__close {
  flex: none;
  width: 40px;
  height: 40px;
  margin-block: -6px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--f-r-pill);
  color: var(--f-mute);
}

.f-cartpop__close:hover { background: rgba(var(--f-tint-rgb), .08); color: var(--f-strong); }

.f-cartpop__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 14px;
}

.f-cartpop__thumb {
  width: 74px;
  height: 74px;
  flex: none;
  object-fit: cover;
  border-radius: 15px;
  background: var(--f-surface-2);
}

.f-cartpop__info { flex: 1; min-width: 0; }

.f-cartpop__name {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f-cartpop__detail {
  margin: 0;
  font-size: 12px;
  color: var(--f-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One row per chosen detail; a link or @username is shown whole, isolated
   left to right, and wraps only after a "/" (never inside a word). */
.f-cartpop__detail:has(.f-cartpop__datum) {
  display: grid;
  gap: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.f-cartpop__datum { display: block; line-height: 1.55; }
.f-cartpop__datum--ltr .f-ltr { color: var(--f-soft); }

/* The line price is the calm figure here; the saving below it is the one that
   gets the accent colour. */
.f-cartpop__price {
  flex: none;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--f-text);
}

.f-cartpop__summary {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--f-soft);
}

.f-cartpop__off { color: var(--f-accent-2); font-weight: 700; }

.f-cartpop__stackrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 16px;
}

/* The thumbnails overlap into a stack, so a full cart stays one line. */
.f-cartpop__stack { display: inline-flex; }

.f-cartpop__dot {
  position: relative;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 2px solid var(--f-surface);
  border-radius: 50%;
  background: var(--f-surface-2);
}

.f-cartpop__dot + .f-cartpop__dot { margin-inline-start: -12px; }

/* «عرض السلة ›»: a 44px-tall target around the 21px line; the negative
   margin keeps the row's height. */
.f-cartpop__view {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -11px;
  padding-inline: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--f-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-cartpop__view:hover { color: var(--f-strong); }

.f-cartpop__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.f-cartpop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--f-r-sm);
  text-align: center;
}

.f-cartpop__btn--ghost {
  background: none;
  border: 1px solid var(--f-line-2);
  color: var(--f-text);
}

.f-cartpop__btn--ghost:hover { background: rgba(var(--f-tint-rgb), .07); }

.f-cartpop__btn--solid {
  background: var(--f-cta-bg);
  border: 1px solid var(--f-cta-bg);
  color: var(--f-cta-text);
}

.f-cartpop__btn--solid:hover { background: var(--f-cta-hover); color: var(--f-cta-text); }

@media (max-width: 480px) {
  .f-cartpop {
    inset-inline: 12px;
    width: auto;
  }

  /* A full touch target; the negative margin keeps the head row as tall. */
  .f-cartpop__close { width: 40px; height: 40px; margin-block: -6px; }
}

/* Phones and tablets: the cart panel repeats the confirmation, so the green
   bar steps aside for it instead of peeking out half-hidden above it. */
@media (max-width: 980px) {
  body:has(.f-cartpop.is-visible) .f-added {
    opacity: 0;
    transform: translateY(-140%);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-cartpop,
  .f-cartpop.is-visible { transition: opacity 120ms linear; transform: none; }
}

/* -------------------------------------------------------------------------
   15f. Offer countdown

   A red strip across the foot of the poster: days, hours, minutes, seconds.
   ---------------------------------------------------------------------- */

.f-countdown {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Clocks read left to right in every language, so pin the direction rather
     than let the units mirror into 06:43:09:67. */
  direction: ltr;
  padding: 6px 4px;
  background: var(--f-accent);
  text-align: center;
}

.f-countdown[hidden] { display: none; }

.f-countdown__cell {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* The product page's version, after MSH: no red block, a heading, and every
   number named underneath — there is room for it here, and none on a card. */
.f-offer { margin-block: 14px 6px; }

.f-offer__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--f-soft);
}

.f-countdown--labeled {
  position: static;
  max-width: 340px;
  padding: 0;
  background: none;
  gap: 6px;
}

.f-countdown--labeled .f-countdown__cell {
  display: grid;
  gap: 2px;
  font-size: 22px;
  font-weight: 800;
  color: var(--f-strong);
}

.f-countdown__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--f-mute);
}

/* Under the price: the saving and the stock state. */
.f-single__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-block: 6px 4px;
}

.f-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(var(--f-accent-rgb), .14);
  border: 1px solid rgba(var(--f-accent-rgb), .4);
  border-radius: var(--f-r-pill);
  color: var(--f-accent-2);
  font-size: 13px;
  font-weight: 800;
}

.f-instock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--f-ok);
}

.f-instock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(47, 208, 122, .18);
}

/* A sale price and the price it replaces, as MSH prints them: the new one in
   the accent, the old one smaller, muted and struck through. */
.price ins,
.f-card__price ins,
.f-sheet__price ins { text-decoration: none; }

.price del,
.f-card__price del,
.f-sheet__price del {
  margin-inline-start: 6px;
  font-size: .82em;
  font-weight: 600;
  color: var(--f-mute);
  opacity: 1;
}

/* -------------------------------------------------------------------------
   15g. Quick-order sheet

   Opened from a product card. On a phone it rises from the bottom edge like
   a native sheet, within thumb reach; from 720px up it is a centred dialog.
   ---------------------------------------------------------------------- */

.f-sheet {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.f-sheet[hidden] { display: none; }

.f-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 240ms var(--f-ease);
}

.f-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-block-end: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.f-sheet.is-open .f-sheet__scrim { opacity: 1; }
.f-sheet.is-open .f-sheet__panel { transform: none; }

.f-sheet__grip {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 10px;
  background: var(--f-line-2);
  border-radius: 99px;
}

.f-sheet__close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(var(--f-tint-rgb), .06);
  border: 0;
  border-radius: 50%;
  color: var(--f-soft);
  font-size: 22px;
  line-height: 1;
}

.f-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 4px 14px;
  padding-inline-end: 40px;
  border-block-end: 1px solid var(--f-line);
}

.f-sheet__thumb {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: cover;
  border-radius: 14px;
  background: var(--f-surface-2);
}

.f-sheet__info { min-width: 0; }

.f-sheet__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.f-sheet__price { font-size: 14px; font-weight: 800; color: var(--f-accent-2); }

.f-sheet__body { padding-block: 14px 6px; }

/* The product page frames its form in a card; inside the sheet the sheet is
   the frame, so the form sits flat. */
.f-sheet__body .folo-order {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.f-sheet__submit {
  width: 100%;
  margin-block-start: 6px;
  padding-block: 15px;
  font-size: 15px;
}

/* Phones: the head and the button stay put and only the form between them
   scrolls, so the close button and "أضف للسلة" are always within reach. */
@media (max-width: 719.98px) {
  .f-sheet__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .f-sheet__grip,
  .f-sheet__head,
  .f-sheet__submit { flex: none; }

  .f-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for focus rings, which the scroll box would otherwise clip. */
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .f-sheet__close { width: 40px; height: 40px; }

  /* "يبدأ من" at a readable size, as on the cards. */
  .f-sheet__price .folo-from { font-size: 12px; }
}

@media (min-width: 720px) {
  .f-sheet { align-items: center; padding: 20px; }

  .f-sheet__panel {
    width: min(460px, 100%);
    padding: 22px;
    border-block-end: 1px solid var(--f-line-2);
    border-radius: var(--f-r-xl);
    box-shadow: var(--f-sh-lg);
    transform: translateY(18px) scale(.98);
    opacity: 0;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 200ms var(--f-ease);
  }

  .f-sheet.is-open .f-sheet__panel { opacity: 1; }
  .f-sheet__grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .f-announce__track { animation: none; }
  .f-sheet__panel,
  .f-sheet__scrim { transition: none; }
}

/* -------------------------------------------------------------------------
   15h. Cart total beside the header cart
   ---------------------------------------------------------------------- */

.f-cart-total {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--f-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.f-cart-total:hover { color: var(--f-strong); }

/* -------------------------------------------------------------------------
   15e. Sticky add-to-cart bar
   ---------------------------------------------------------------------- */

.f-stickybar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 150;
  padding: 10px 0;
  background: var(--f-bar);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--f-line-2);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .45);
}

.f-stickybar[hidden] { display: none; }

/* The mobile tab bar owns the bottom of the screen wherever it shows (980px
   down), so sit above it, home-indicator inset included: the tab bar itself
   is that much taller on an iPhone. */
@media (max-width: 980px) {
  .f-tabbar ~ .f-stickybar,
  body:has(.f-tabbar) .f-stickybar { inset-block-end: calc(var(--f-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* The 1px top border already separates it; the old shadow was tuned for
     the dark theme. */
  .f-stickybar { box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); }

  /* Room for the bar as well as the tab bar, so the footer's last row can
     scroll clear of it. :has(.f-stickybar), not :not([hidden]), so the page
     height does not jump as the bar toggles. */
  body:has(.f-stickybar) .f-shell { padding-block-end: calc(var(--f-tabbar-h) + 76px + env(safe-area-inset-bottom, 0px)); }

  /* An add-to-cart error from the bar shows above it, not on its buttons. */
  body:has(.f-stickybar:not([hidden])) .f-toast { inset-block-end: calc(var(--f-tabbar-h) + 140px + env(safe-area-inset-bottom, 0px)); }
}

.f-stickybar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
}

.f-stickybar__product {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.f-stickybar__thumb {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: 12px;
  background: var(--f-surface-2);
}

.f-stickybar__text { min-width: 0; }

.f-stickybar__name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-stickybar__price {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--f-accent-2);
}

.f-stickybar__qty {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px;
  background: var(--f-surface-2);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
}

.f-stickybar__qty[hidden] { display: none; }

.f-stickybar__step {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--f-soft);
  font-size: 17px;
  line-height: 1;
}

/* Hover only where a pointer can hover: on touch, :hover sticks after a tap
   and left a grey disc on the step just pressed. */
@media (hover: hover) {
  .f-stickybar__step:hover { background: rgba(var(--f-tint-rgb), .1); color: var(--f-strong); }
}

.f-stickybar__step:active { background: rgba(var(--f-tint-rgb), .1); color: var(--f-strong); }

.f-stickybar__mid { display: grid; justify-items: center; }

/* The live total under the amount: phones only, where the product block with
   its price line is hidden (see the 720px block). */
.f-stickybar__total { display: none; }

.f-stickybar__amount {
  min-width: 56px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.f-stickybar__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.f-stickybar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--f-r-sm);
  white-space: nowrap;
}

.f-stickybar__btn--ghost {
  background: none;
  border: 1px solid var(--f-line-2);
  color: var(--f-text);
}

.f-stickybar__btn--ghost:hover { background: rgba(var(--f-tint-rgb), .07); }

.f-stickybar__btn--solid {
  background: var(--f-accent);
  border: 1px solid var(--f-accent);
  color: #fff;
}

.f-stickybar__btn--solid:hover { background: var(--f-accent-2); border-color: var(--f-accent-2); }

/* Pressed and waiting on the server: the button fills in, its label gives way
   to a spinner, and it stops taking clicks — so a slow host never looks like a
   press that was missed. */
.f-stickybar__btn.is-busy {
  position: relative;
  background: #e9ecf5;
  border-color: #e9ecf5;
  color: transparent;
  pointer-events: none;
}

.f-stickybar__btn.is-busy > * { visibility: hidden; }

.f-stickybar__btn.is-busy::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 18px;
  height: 18px;
  margin-block-start: -9px;
  margin-inline-start: -9px;
  border: 2px solid rgba(16, 19, 28, .2);
  border-block-start-color: #10131c;
  border-radius: 50%;
  animation: f-spin .7s linear infinite;
}

/* Phone: MSH's two rows — the amount across the full width, then the two
   buttons side by side. The product name is already on screen above. */
@media (max-width: 720px) {
  .f-stickybar { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Riding on the tab bar, which already pads for the home indicator. */
  .f-tabbar ~ .f-stickybar,
  body:has(.f-tabbar) .f-stickybar { padding-block-end: 10px; }

  /* Two rows here (124px). */
  body:has(.f-stickybar) .f-shell { padding-block-end: calc(var(--f-tabbar-h) + 128px + env(safe-area-inset-bottom, 0px)); }

  .f-stickybar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .f-stickybar__product { display: none; }

  .f-stickybar__qty {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding: 2px 6px;
    border-radius: var(--f-r-sm);
    border-color: var(--f-line-2);
    background: none;
  }

  .f-stickybar__step { width: 40px; height: 40px; font-size: 20px; }
  .f-stickybar__amount { font-size: 16px; line-height: 1.25; }

  .f-stickybar__total:not(:empty) {
    display: block;
    color: var(--f-accent-2);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }

  /* A product without an amount stepper: no row to carry the total, so the
     product block comes back as a one-line name + price. */
  .f-stickybar__inner:has(.f-stickybar__qty[hidden]) .f-stickybar__product { display: flex; grid-column: 1 / -1; }
  .f-stickybar__inner:has(.f-stickybar__qty[hidden]) .f-stickybar__thumb { display: none; }

  .f-stickybar__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .f-stickybar__btn { padding: 13px 10px; }

  /* The add button takes MSH's light fill on a phone, next to the red Buy now. */
  .f-stickybar__btn--ghost { background: var(--f-strong); border-color: var(--f-strong); color: var(--f-on-strong); }
  .f-stickybar__btn--ghost:hover { background: var(--f-soft); }
}

/* -------------------------------------------------------------------------
   16. Toast
   ---------------------------------------------------------------------- */

.f-toast {
  position: fixed;
  inset-block-end: calc(var(--f-tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(14px);
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: var(--f-r-pill);
  box-shadow: var(--f-sh-lg);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--f-mid) var(--f-ease), transform var(--f-mid) var(--f-ease);
}

[dir="rtl"] .f-toast { transform: translateX(50%) translateY(14px); }

.f-toast.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
[dir="rtl"] .f-toast.is-visible { transform: translateX(50%) translateY(0); }

.f-toast.is-error { border-color: rgba(var(--f-accent-rgb), .6); }
.f-toast.is-success { border-color: rgba(22, 163, 74, .45); }
.f-toast.is-success::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--f-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.f-toast__link { color: var(--f-accent-2); font-weight: 700; white-space: nowrap; }

/* Phones and tablets: above the quick-order sheet (180) so its errors are
   seen; still below the added bar (190), the cart panel (191) and the
   flying image (200). */
@media (max-width: 980px) {
  .f-toast { z-index: 185; }

  /* Both insets + fit-content: centred, up to the full gutter width, so long
     messages wrap in 2 lines, not 4. (One inset at 50% left it only half the
     screen to shrink-to-fit into.) */
  .f-toast,
  [dir="rtl"] .f-toast {
    inset-inline: 16px;
    margin-inline: auto;
    width: fit-content;
    max-width: none;
    border-radius: 18px;
    text-align: center;
    transform: translateY(14px);
  }

  .f-toast.is-visible,
  [dir="rtl"] .f-toast.is-visible { transform: translateY(0); }

  /* The quick-order sheet fills the bottom: show its messages above it, clear
     of the fields. */
  body:has(.f-sheet.is-open) .f-toast {
    inset-block-end: auto;
    inset-block-start: calc(12px + env(safe-area-inset-top, 0px));
    transform: translateY(-14px);
  }

  body:has(.f-sheet.is-open) .f-toast.is-visible { transform: translateY(0); }
}

@media (min-width: 981px) {
  .f-toast { inset-block-end: 24px; }
}

/* -------------------------------------------------------------------------
   16b. Floating WhatsApp button
   ---------------------------------------------------------------------- */

.f-wa {
  --f-wa-gap: 20px;
  position: fixed;
  inset-block-end: calc(var(--f-wa-gap) + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 155;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .40);
  transition: transform .2s ease, box-shadow .2s ease, inset-block-end .25s ease, opacity .2s ease, visibility .2s;
}

.f-wa:hover,
.f-wa:focus-visible {
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .55);
}

.f-wa:focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 3px; }

/* Ride above the product page's sticky add-to-cart bar while it is showing. */
body:has(.f-stickybar:not([hidden])) .f-wa { --f-wa-gap: 96px; }

/* Cart, checkout, order-pay, thank-you and the My Account sign-in form
   (body.f-wa-quiet, inc/woocommerce.php) carry their own WhatsApp support
   link, and their totals, place-order button and code fields fill the
   corner: the button stays out on every screen size there. */
body.f-wa-quiet .f-wa { display: none; }

/* Every screen size: step aside while a link or button scrolls underneath it
   (app.js initWaGuard, body.f-wa-zone) and while a modal, sheet or menu is
   open (body.is-locked) — on a desktop it used to float above the quick-view
   scrim and over the footer's links. */
body.f-wa-zone .f-wa,
body.is-locked .f-wa {
  opacity: 0;
  visibility: hidden;
  transform: scale(.6);
  pointer-events: none;
}

/* Desktop: where the page ends, the copyright line starts in the button's
   corner (right to left), so the footer bar keeps that corner clear. The gap
   is on the bar itself and on the physical right, where the button floats in
   both directions: a margin on .f-footer__copy was reset by its own
   `margin: 0` further down and never applied. */
@media (min-width: 981px) {
  .f-footer__bar-inner { padding-right: 88px; }
}

/* Phones and tablets (wherever the tab bar shows): clear the tab bar, and the
   sticky bar stacked on top of it. */
@media (max-width: 980px) {
  .f-wa { --f-wa-gap: calc(var(--f-tabbar-h) + 14px); right: 14px; width: 52px; height: 52px; }
  body:has(.f-stickybar:not([hidden])) .f-wa { --f-wa-gap: calc(var(--f-tabbar-h) + 132px); }

  /* Step aside (keeping the bottom-right corner) while something else owns
     it: the product page's own add-to-cart button or the checkout's place-
     order button is on screen (it scrolls through the whole corner, so no
     offset can clear it), any other control scrolls underneath it (app.js
     initWaGuard, body.f-wa-zone), a menu, quick view or sheet is
     open, search results are showing (header or in-page), or a field has
     focus (the on-screen keyboard is up then anyway). */
  body.f-atc-onscreen .f-wa,
  body.f-wa-zone .f-wa,
  body.is-locked .f-wa,
  body:has(.f-cartpop.is-visible) .f-wa,
  body:has(.f-header.is-search-open) .f-wa,
  body:has(.f-search__results:not([hidden])) .f-wa,
  body:has(:is(input:not([type=checkbox]):not([type=radio]), textarea, select):focus) .f-wa {
    opacity: 0;
    visibility: hidden;
    transform: scale(.6);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-wa { transition: none; }
  .f-wa:hover, .f-wa:focus-visible { transform: none; }
}

/* -------------------------------------------------------------------------
   16c. Payment badges — only the methods FOLO Core reports as live
   (folo_payment_badges(), inc/template-tags.php); nothing without keys.
   ---------------------------------------------------------------------- */

.f-paybadges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.f-paybadges__label { color: var(--f-mute); font-size: 12.5px; font-weight: 600; }

.f-paybadges__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-paybadge { display: inline-flex; line-height: 0; }
.f-paybadge__svg { display: block; width: 40px; height: 26px; }

/* -------------------------------------------------------------------------
   17. Footer
   ---------------------------------------------------------------------- */

.f-footer {
  margin-block-start: 20px;
  background: var(--f-header);
  border-block-start: 1px solid var(--f-line);
}

.f-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding-block: 32px;
  border-block-end: 1px solid var(--f-line);
}

.f-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  flex-wrap: wrap;
}

.f-footer__brand { display: flex; flex-direction: column; gap: 6px; }

.f-footer__tagline {
  margin: 0;
  color: var(--f-mute);
  font-size: 13px;
  font-weight: 500;
}

.f-footer__nav .f-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

.f-footer__nav a { color: var(--f-soft); font-size: 14px; }
.f-footer__nav a:hover { color: var(--f-strong); }

/* Touch screens of any width (tablets too): about 44px to tap, rows closed
   up to match. */
@media (pointer: coarse) {
  .f-footer__nav .f-links { row-gap: 0; }
  .f-footer__nav a { display: inline-block; padding-block: 12px; }
}

.f-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.f-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(var(--f-tint-rgb), .05);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  color: var(--f-soft);
}

.f-social a:hover { background: var(--f-accent); border-color: transparent; color: #fff; }

/* Touch screens: 44px discs. */
@media (pointer: coarse) {
  .f-social a { width: 44px; height: 44px; }
}

.f-footer__bar { border-block-start: 1px solid var(--f-line); }

.f-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  flex-wrap: wrap;
}

.f-footer__copy,
.f-footer__note {
  margin: 0;
  color: var(--f-mute);
  font-size: 12.5px;
}

/* -------------------------------------------------------------------------
   18. Mobile tab bar
   ---------------------------------------------------------------------- */

.f-tabbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 100;
  display: none;
  align-items: stretch;
  height: calc(var(--f-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--f-header);
  border-block-start: 1px solid var(--f-line);
}

.f-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--f-mute);
  font-size: 11px;
  font-weight: 600;
}

.f-tabbar__icon { position: relative; display: inline-flex; }

.f-tabbar__item.is-current { color: var(--f-accent); }

.f-tabbar__item .f-avatar { width: 24px; height: 24px; font-size: 12px; }
.f-tabbar__item.is-current .f-avatar { background: var(--f-accent); color: #fff; }

.f-tabbar__item.is-current .f-tabbar__icon::after {
  content: "";
  position: absolute;
  inset-block-start: -10px;
  /* Both insets plus auto margins centre it in either direction; a 50% inset
     with translateX(-50%) only centred in LTR. */
  inset-inline: 0;
  width: 22px;
  height: 3px;
  margin-inline: auto;
  background: var(--f-accent);
  border-radius: 0 0 3px 3px;
}

/* -------------------------------------------------------------------------
   19. Posts, pages, rich text
   ---------------------------------------------------------------------- */

.f-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.f-post {
  display: flex;
  flex-direction: column;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  overflow: hidden;
}

.f-post__media { aspect-ratio: 16 / 9; overflow: hidden; }
.f-post__media img { width: 100%; height: 100%; object-fit: cover; }
.f-post__body { padding: 16px 18px 20px; }
.f-post__meta { margin: 0 0 6px; color: var(--f-mute); font-size: 12.5px; }
.f-post__title { font-size: 18px; margin: 0 0 8px; }
.f-post__excerpt { margin: 0; color: var(--f-soft); font-size: 14.5px; }

.f-page { max-width: 820px; margin-inline: auto; }
.f-page__media { margin: 0 0 24px; border-radius: var(--f-r-lg); overflow: hidden; }

.f-rich { color: var(--f-soft); font-size: 16px; }
.f-rich h2 { margin-block: 1.6em .5em; font-size: 22px; color: var(--f-strong); }
.f-rich h3 { margin-block: 1.4em .4em; font-size: 19px; color: var(--f-strong); }
.f-rich a { color: var(--f-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.f-rich ul, .f-rich ol { margin: 0 0 1em; padding-inline-start: 1.3em; }
.f-rich li { margin-block-end: .4em; }
.f-rich img { border-radius: var(--f-r); }
.f-rich blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-inline-start: 3px solid var(--f-accent);
  background: rgba(var(--f-tint-rgb), .04);
  border-radius: 0 var(--f-r) var(--f-r) 0;
}
.f-rich table { width: 100%; border-collapse: collapse; }
.f-rich th, .f-rich td { padding: 10px 12px; border: 1px solid var(--f-line); text-align: start; }
.f-rich code {
  padding: 2px 6px;
  background: rgba(var(--f-tint-rgb), .07);
  border-radius: 4px;
  font-size: .9em;
}

.f-sidebar { display: grid; gap: 22px; }

.f-widget {
  padding: 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
}

.f-widget__title { font-size: 16px; margin: 0 0 12px; }
.f-widget ul { list-style: none; display: grid; gap: 8px; }
.f-widget a { color: var(--f-soft); font-size: 14.5px; }

.f-pager,
.woocommerce-pagination {
  margin-block-start: 32px;
  display: flex;
  justify-content: center;
}

.f-pager .nav-links,
.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  border: 0 !important;
}

.f-pager .page-numbers,
.woocommerce-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-sm);
  color: var(--f-soft);
  font-size: 14px;
  font-weight: 600;
}

.f-pager .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
  background: var(--f-accent);
  border-color: transparent;
  color: #fff;
}

.woocommerce-pagination li { border: 0 !important; }

.f-postnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 34px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--f-line);
  font-size: 14px;
}

.f-comments { max-width: 820px; margin: 44px auto 0; }
.f-comments__title { font-size: 19px; margin-block-end: 18px; }
.f-comments__list { list-style: none; display: grid; gap: 16px; }
.f-comments .comment-body {
  padding: 16px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r);
}
.f-comments input[type="text"],
.f-comments input[type="email"],
.f-comments input[type="url"],
.f-comments textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-sm);
  color: var(--f-strong);
}

/* 404 */

.f-404 { text-align: center; max-width: 620px; margin-inline: auto; }
.f-404__code { font-size: clamp(64px, 14vw, 128px); font-weight: 900; line-height: 1; color: var(--f-accent); margin: 0; }
.f-404__title { font-size: 26px; margin-block: 8px 10px; }
.f-404__sub { color: var(--f-mute); margin-block-end: 24px; }
.f-404 .f-search { margin-block-end: 24px; }

/* -------------------------------------------------------------------------
   20. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .f-hero__slide { padding: 38px 40px; min-height: 340px; }
  .f-cats { gap: 22px 16px; }
}

/* Tablets: the cut banner keeps the artwork at the scale it had uncut (340px
   for 1448px of art = 301px for the 1282px kept) and adds the 60px band.
   (Phones let the banner flow at its own height, see the 760px block.) */
@media (min-width: 761px) and (max-width: 1100px) {
  .f-hero__slide.f-hero__slide--paybar { min-height: 362px; }
}

@media (max-width: 980px) {
  :root { --f-header-h: 64px; }

  .f-topbar { display: none; }

  /* MSH's phone header: menu and search at the line start (right), the
     logo dead centre, then account, cart and the cart total at the far end.
     The logo is centred on the bar, not between its neighbours, so a long
     cart total never pushes it off-centre. */
  .f-header__inner {
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 0;
    min-height: 0;
    padding-block: 0;
  }

  .f-header__start,
  .f-header__lead { height: 58px; display: flex; align-items: center; }

  .f-header__start { order: 1; }
  .f-header__lead { order: 2; }

  .f-header__brand {
    position: absolute;
    inset-block-start: 29px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .f-header__brand .f-logo__words { display: none; }
  .f-header__brand .f-logo__mark { height: 34px; width: auto; }

  /* The search field waits behind the search button. */
  .f-header__search { order: 3; flex: 1 0 100%; display: none; padding-block-end: 10px; }
  .f-header.is-search-open .f-header__search { display: block; }
  .f-header__search .f-search { max-width: none; }

  /* 16px or iOS Safari zooms the page in on focus (and leaves it zoomed). */
  .f-search__input { font-size: 16px; }

  /* Built as <span>s by app.js paint(): without this they stay inline, the
     ellipsis never applies and the name runs under the category and price. */
  .f-result__title,
  .f-result__meta { display: block; }

  /* Stop above the tab bar on short phones; browsers without dvh keep the
     line from section 8. */
  .f-search__results { max-height: min(70vh, 460px, calc(100dvh - var(--f-tabbar-h) - 190px)); }

  /* The empty-results page's own search sits lower down: a shorter list, so
     less of it starts under the tab bar. */
  .f-noresults .f-search__results { max-height: min(50vh, 320px); }

  /* The phone header has no room for switchers; the drawer carries them. */
  .f-header__actions .f-headerx { display: none; }

  /* Plain icons, no frames, as MSH's are. */
  .f-header__actions { gap: 0; }

  .f-header .f-iconbtn,
  .f-header .f-account {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--f-strong);
  }

  .f-account__label { display: none; }

  /* A white dot on the cart's top corner, with the count inside. */
  .f-header .f-badge {
    inset-block-start: -6px;
    inset-inline-end: auto;
    inset-inline-start: -7px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    background: var(--f-cta-bg);
    color: var(--f-cta-text);
    font-size: 10px;
  }

  .f-cart-total { margin-inline-start: 2px; font-size: 14px; font-weight: 700; }

  /* --- Scrolling announcement bar --- */
  .f-announce {
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
    background: var(--f-accent);
    color: #fff;
  }

  .f-announce[hidden] { display: none; }

  /* While the product page's sticky add-to-cart bar is up, the announcement
     folds away so the header and the bar leave more of the screen to the
     page (app.js initStickyBar measures the header without it). */
  body:has(.f-stickybar:not([hidden])) .f-announce { display: none; }

  /* Left to right as well: in a right-to-left box the wide track would hang
     off the right edge, and sliding it would carry the text out of view. */
  .f-announce__viewport {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    direction: ltr;
  }

  /* The track is laid out left to right so the loop maths is simple; each
     message inside is still set right to left. It drifts rightward, so an
     Arabic message comes in beginning first. */
  .f-announce__track {
    display: flex;
    width: max-content;
    direction: ltr;
    animation: f-marquee 24s linear infinite;
  }

  .f-announce__half { display: flex; }

  .f-announce__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: 18px;
    direction: rtl;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 700;
  }

  /* The red logo would vanish on the red bar, so it is shown in white. */
  .f-announce__item .f-logo__mark { height: 16px; width: auto; filter: brightness(0) invert(1); }

  .f-announce__close {
    flex: none;
    width: 40px;
    height: 100%;
    padding: 0;
    background: var(--f-accent);
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
  }

  .f-nav { display: none; }

  .f-tabbar { display: flex; }
  .f-shell { padding-block-end: calc(var(--f-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* A card alone on its row (the last of an odd count, or a category with a
     single product) lies on its side across the full width instead of
     leaving half the row empty. Archive grids only (direct children of
     .f-shop__main); the homepage and related rows keep their cards. */
  .f-shop__main > .f-grid > .f-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    display: grid;
    /* Capped so a tablet does not get a 400px poster for one product. */
    grid-template-columns: min(48%, 280px) minmax(0, 1fr);
    align-items: center;
  }

  .f-shop__main > .f-grid > .f-card:nth-child(odd):last-child .f-card__body { padding-block: 12px; }
  .f-shop__main > .f-grid > .f-card:nth-child(odd):last-child .f-card__foot { grid-column: 1 / -1; }

  /* No row partner to line up with, so no two-line title reserve (760px
     block): a one-line title is followed straight by its unit. */
  .f-shop__main > .f-grid > .f-card:nth-child(odd):last-child .f-card__title { min-height: 0; }

  /* Centred like the rest of the card body (eyebrow, title, unit). */
  .f-card__price { justify-content: center; }
  .f-card__price .folo-from,
  .f-sheet__price .folo-from { font-size: 12px; }

  .f-cats,
  .f-cats--2,
  .f-cats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }

  .f-cats--1 { grid-template-columns: minmax(0, 1fr); }

  .f-modal__grid { grid-template-columns: 1fr; }

  /* Single column: a smaller poster leaves the close button its own corner,
     on a solid disc, and both actions share one row in view. */
  .f-modal { padding: 12px; }
  .f-modal__panel { padding: 16px; }
  .f-modal__media { width: 72%; margin-inline: auto; }

  /* A phone on its side: poster and details side by side, or only the
     poster would fit and the title, price and buttons fall below it. */
  @media (orientation: landscape) and (max-height: 560px) {
    .f-modal__grid {
      grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
      align-items: center;
    }

    .f-modal__media { width: 100%; }
  }

  .f-modal__close {
    background: var(--f-surface);
    border-color: var(--f-line-2);
    box-shadow: var(--f-sh-sm);
    color: var(--f-strong);
  }

  .f-modal__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-block-start: 14px;
  }

  .f-modal__actions .f-btn { width: 100%; padding-inline: 10px; }

  /* Centred wherever the WhatsApp button floats over the tab bar: start-
     aligned, the copyright ran under it at the bottom of the page. */
  .f-footer__bar-inner { justify-content: center; text-align: center; }
}

@media (max-width: 760px) {
  :root { --f-gutter: 14px; }

  /* Phone: the price drops under the name instead of squeezing it. */
  .f-result {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }

  .f-result__thumb { grid-row: 1 / span 2; }
  .f-result__price { grid-column: 2; }

  /* MSH's phone hero: the banner runs edge to edge straight under the
     header — no side gaps, no rounded frame — at its own proportions. */
  .f-hero { padding-block: 0; }
  .f-hero > .f-container { padding-inline: 0; }
  .f-hero__frame { border-radius: 0; box-shadow: none; }


  /* The mockup keeps copy and scene side by side on phones, just tighter. */
  .f-hero__slide {
    gap: 8px;
    min-height: 210px;
    padding: 18px 16px 26px;
  }

  .f-hero__copy { flex: 1 1 54%; max-width: none; }
  .f-hero__title { font-size: clamp(22px, 6.6vw, 30px); }
  .f-hero__sub { margin-block: 6px 12px; font-size: 11.5px; line-height: 1.5; }
  .f-hero__copy .f-btn--hero { padding: 8px 16px; font-size: 12.5px; gap: 6px; }
  .f-hero__copy .f-btn--hero .f-icon { width: 14px; height: 14px; }

  .f-hero__scene { flex: 1 1 44%; min-height: 150px; }

  .f-hero__stand  { inset-block-end: 12%; }
  .f-hero__stand.is-back  { inset-inline-start: 0;   }
  .f-hero__stand.is-front { inset-inline-start: 28%; }
  .f-hero__stand.is-mid   { inset-inline-start: 58%; }

  .f-hero__tile   { width: calc(60px * var(--s)); height: calc(60px * var(--s)); border-radius: calc(15px * var(--s)); }
  .f-hero__tile .f-icon { width: calc(30px * var(--s)); height: calc(30px * var(--s)); }
  .f-hero__plinth { width: calc(68px * var(--s)); height: calc(15px * var(--s)); }

  .f-hero__chip { width: 26px; height: 26px; border-radius: 8px 8px 8px 3px; }
  .f-hero__chip .f-icon { width: 13px; height: 13px; }

  .f-hero__badge,
  .f-hero__note { display: none; }

  /* On a phone the banner simply flows at its own aspect ratio — whatever that
     is — so there is nothing to letterbox and no blurred fill to draw. */
  .f-hero__slide--bare {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .f-hero__slide--bare .f-hero__banner {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .f-hero__slide--bare .f-hero__banner img {
    height: auto;
    object-fit: fill;
  }

  .f-hero__slide--bare .f-hero__banner::before { display: none; }
  .f-hero__slide--bare .f-hero__scene { display: none; }

  /* Phone: the live payment methods follow the artwork as one more row of
     the poster, on its black. */
  .f-hero__pay {
    position: static;
    min-height: 0;
    padding: 2px 16px 16px;
    background: #000;
  }

  .f-hero__slide--paybar .f-hero__banner img { height: auto; }
  .f-paybadges--hero .f-paybadges__label { font-size: 12.5px; }
  .f-paybadges--hero .f-paybadge__svg { width: 40px; height: 26px; }

  .f-section { padding-block: 32px; }
  .f-section--cats { padding-block: 30px 14px; }
  .f-section--grid { padding-block: 18px 40px; }

  .f-head { margin-block-end: 18px; }

  .f-cat__glyph { width: 68px; height: 68px; border-radius: 18px; }
  .f-cat__glyph .f-icon { width: 40px; height: 40px; }
  .f-cat__label { font-size: 13.5px; }

  .f-card__body { padding: 10px 12px 4px; }

  .f-card__title {
    font-size: 14.5px;
    /* Two lines (line-height 1.35), so unit and price line up across a row. */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .f-card__eyebrow { font-size: 11.5px; }
  .f-card__unit { font-size: 12.5px; }
  .f-card__foot { padding: 10px 12px 12px; }
  .f-btn--atc { padding: 9px 12px; font-size: 13px; gap: 7px; }
  .f-card__price { font-size: 14px; justify-content: center; }
  .f-card__price .folo-from { font-size: 12px; opacity: .85; }

  /* A 32px disc, 8px from the corner, so the pair stays clear of the poster's
     printed title even on a 360px phone — inside a 40px button, so the target
     a finger hits is 40px (and measurable as such). */
  .f-tool {
    position: relative;
    isolation: isolate;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
  }

  .f-tool::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(6, 10, 20, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    transition: background var(--f-fast) var(--f-ease);
  }

  .f-tool:hover,
  .f-tool[aria-pressed="true"] { background: transparent; }
  .f-tool:hover::before,
  .f-tool[aria-pressed="true"]::before { background: var(--f-accent); }
  .f-tool:focus-visible { outline-offset: -2px; border-radius: 50%; }

  .f-tool .f-icon { width: 16px; height: 16px; }
  .f-card__tools { gap: 0; inset-block-start: 4px; inset-inline-start: 4px; }

  .f-poster__glyph { width: 76px; height: 76px; border-radius: 20px; }
  .f-poster__glyph .f-icon { width: 46px; height: 46px; }

  .f-footer__inner { flex-direction: column; text-align: center; gap: 18px; padding-block: 24px; }

  /* About 44px to tap, with the rows closed up to match. */
  .f-footer__nav .f-links { row-gap: 0; }
  .f-footer__nav a { display: inline-block; padding-block: 12px; }

  .f-footer__brand { align-items: center; }
}

@media (max-width: 380px) {
  .f-card__title { font-size: 13.5px; }
  .f-btn--atc .f-btn__text { font-size: 12.5px; }
}

/* -------------------------------------------------------------------------
   21. Print
   ---------------------------------------------------------------------- */

@media print {
  .f-topbar, .f-header, .f-nav, .f-tabbar, .f-footer, .f-drawer, .f-toast { display: none !important; }
  body.f-body { background: #fff; color: #000; }
}

/* -------------------------------------------------------------------------
   15i. Language & currency picker — MSH's box: a red close button, the
   languages as radios, the currencies in a list, and a white "موافق".
   ---------------------------------------------------------------------- */

.f-settings {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: grid;
  place-items: center;
  padding: 16px;
}

.f-settings[hidden] { display: none; }

.f-settings__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, .66);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 200ms var(--f-ease);
}

.f-settings__panel {
  position: relative;
  width: min(360px, 100%);
  padding: 22px 18px 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity 200ms var(--f-ease), transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.f-settings.is-open .f-settings__scrim { opacity: 1; }
.f-settings.is-open .f-settings__panel { opacity: 1; transform: none; }

.f-settings__close {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: -12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--f-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.f-settings__group {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.f-settings__label {
  display: block;
  margin-block-end: 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--f-strong);
}

.f-settings__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--f-soft);
  cursor: pointer;
}

.f-settings__radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--f-strong); }

.f-settings__select {
  width: 100%;
  padding: 12px 14px;
  background: var(--f-bg);
  border: 1px solid var(--f-line-2);
  border-radius: 10px;
  color: var(--f-strong);
  font: inherit;
}

.f-settings__ok {
  width: 100%;
  padding: 13px;
  background: var(--f-cta-bg);
  border: 0;
  border-radius: 10px;
  color: var(--f-cta-text);
  font: inherit;
  font-weight: 800;
}

/* Hover only where there is a mouse: on a phone :hover sticks after a tap.
   The CTA's own hover red (the old pale #e9ecf5 was a dark-theme leftover
   that left the white label unreadable). */
@media (hover: hover) {
  .f-settings__ok:hover { background: var(--f-cta-hover); }
}

.f-settings__ok:active { background: var(--f-cta-hover); }

/* Menu rows: the current choice shown quietly after the label. */
.f-drawer__switch { border-block-start: 1px solid var(--f-line); }
.f-drawer__switch small { margin-inline-start: auto; color: var(--f-mute); font-size: 12.5px; font-weight: 600; }
.f-drawer__switch a::after { margin-inline-start: 10px; }

/* Desktop header: "اللغة: العربية  العملة: ريال قطري", as MSH has it. */
.f-switchlink {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: var(--f-r-sm);
  color: var(--f-soft);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}

.f-switchlink strong { color: var(--f-strong); font-weight: 700; }
.f-switchlink:hover { background: rgba(var(--f-tint-rgb), .06); }

@media (max-width: 980px) {
  .f-switchlink { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .f-settings__scrim,
  .f-settings__panel { transition: none; }
}

/* TranslatePress adds its own floating language button, which sat on top of
   the tab bar. The theme's picker (menu → اللغة, or the header on desktop)
   replaces it, so the floating one is hidden. */
.trp-floating-switcher { display: none !important; }

/* ---------------------------------------------------------------------------
 * Elementor
 *
 * A page built with Elementor gets the whole width between the header and the
 * footer; its sections set their own width. Its title follows Elementor's
 * "Hide Title" switch, which sets --page-title-display.
 * ------------------------------------------------------------------------ */

.f-page--built { max-width: none; }

.f-page--built .f-page__head {
  display: var(--page-title-display, block);
  padding-block: 40px 8px;
}

/* The theme zeroes list indents for its menus; text written in Elementor
   keeps its bullets inside the column. */
.elementor-widget-text-editor :where(ul, ol),
.f-built-content :where(ul, ol) {
  padding-inline-start: 1.4em;
  margin: 0 0 1em;
}

/* The FOLO sections fill the container they are dropped into; in a flex
   container Elementor would otherwise shrink them to their content. */
.elementor-widget-folo-hero,
.elementor-widget-folo-categories,
.elementor-widget-folo-products { width: 100%; }

/* A header or footer built as an Elementor template. The header stays at the
   top while scrolling unless that is switched off in the Customizer. */
.f-header--static { position: relative; inset-block-start: auto; }
.f-footer--built { border-block-start: 0; background: none; }

/* FOLO header pieces, laid out by the Elementor container they sit in. */
.f-wnav .f-nav__list > li > a { padding-block: 10px; }

.f-wcart,
.f-waccount {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.f-waccount__label { font-size: 14px; font-weight: 600; }

.f-wsearch { width: 100%; min-width: 200px; }

/* The theme's own header hides this link on phones for want of room; placed
   by hand, it shows wherever it was put. */
.f-wswitch .f-switchlink { display: inline-flex; }