/* Shared product landing page styles (/breath, /hair) — loaded after the product stylesheet, which sets the palette
   variables (--navy, --royal, --cta, --muted, --soft, --line, --ok, --radius, --shadow). */

/* Self-hosted IBM Plex Sans Arabic (Google Fonts files, OFL): 400 / 500 / 700, arabic + latin. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 1. hero: first screen (image → name → benefit → offer → COD → CTA) ---------- */
.hero-fold{padding:12px 0 18px;background:linear-gradient(180deg,var(--soft),#fff 85%)}
.hf-grid{display:grid;gap:12px}
/* height known before the image loads → no layout shift; capped so the whole offer + CTA fits the first screen */
.hf-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--soft);
  height:min(calc(100vw - 32px),44vh);height:min(calc(100vw - 32px),44svh)}
.hf-media img{width:100%;height:100%;object-fit:cover}
.hf-copy h1{font-size:clamp(1.4rem,6.2vw,2.2rem);line-height:1.25}
.hf-benefit{color:var(--muted);font-size:1rem;line-height:1.45;margin-top:.2rem}
.hf-offer{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;margin-top:.55rem}
.hf-price{color:var(--navy);font-weight:700;line-height:1;white-space:nowrap}
.hf-price b{font-size:2.1rem;font-weight:700}
.hf-price small{font-size:.85rem;color:var(--muted);font-weight:500}
.hf-bundle{background:var(--cta-soft);color:var(--cta-2);font-weight:700;font-size:.86rem;line-height:1.4;padding:.3rem .75rem;border-radius:999px}
.hf-bundle b{font-weight:700}
.hf-bundle em{font-style:normal;color:var(--ok)}
.hf-cod{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;color:var(--ok);font-weight:700;font-size:.9rem;
  background:#ecfdf3;border:1px solid #bbf7d0;padding:.28rem .8rem;border-radius:999px}
#hero-cta{margin-top:.75rem}

/* the old hero headline now sits under the form as an h2 */
.hero .hero-hook{font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.25;margin-top:.3rem}
.hero .hero-hook .hl{color:var(--royal);display:block}
.hero-copy{margin-top:8px}

@media (min-width:760px){
  .hero-fold{padding:36px 0 40px}
  .hf-grid{grid-template-columns:1fr 1fr;align-items:center;column-gap:48px}
  .hf-media{height:auto;aspect-ratio:1/1;max-height:540px}
  .hero-grid{grid-template-columns:1fr 1fr;grid-template-areas:"buy copy"}
  .hero-copy{grid-area:copy;margin-top:0}
}

/* ---------- sticky mobile bar: "order now, pay on delivery" + selected offer price ---------- */
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.sticky-cta{display:block;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.sticky-cta .btn{flex-direction:column;gap:0;line-height:1.3;padding:.5rem 1rem;font-size:1.08rem;min-height:56px;width:100%}
.sticky-price{display:block;font-size:.85rem;font-weight:500;opacity:.95;color:inherit;white-space:nowrap}
.sticky-price b{font-size:1rem;font-weight:700}
@media (min-width:760px){ body{padding-bottom:0} .sticky-cta{display:none} }

/* searchable city picker (/lp/city.js) */
.combo{position:relative}
.combo-list{position:absolute;z-index:30;top:calc(100% + 4px);inset-inline:0;max-height:min(260px,40vh);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.14);padding:4px}
.combo-list li{padding:.7rem .85rem;border-radius:9px;cursor:pointer;font-weight:500;min-height:44px}
.combo-list li[aria-selected="true"],.combo-list li:hover{background:var(--line)}
.combo-list li.is-other{color:var(--muted);border-top:1px solid var(--line);margin-top:2px}
.o-unit{font-size:.74rem;color:var(--muted)}