/* Site refresh, 25 October 2026 (owner-approved plan docs/SITE_SEO_DESIGN_2026-10-25_EN.md).
   Loaded after storefront.css / storefront-v3.css; only adds to them. */

/* Compact phone header: «القائمة» holds favourites, guides, coupons, language and theme. */
.fp-menu-btn { display: none; }
.fp-actions-more { display: contents; }
@media (max-width: 760px) {
  .fp-header-row { flex-wrap: wrap; }
  .fp-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
  .fp-menu-btn svg { width: 18px; height: 18px; }
  .fp-actions { position: relative; }
  .fp-actions-more { display: none; }
  .fp-header.is-menu-open .fp-actions-more {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
    display: flex; flex-wrap: wrap; gap: 8px; width: min(88vw, 320px); padding: 12px;
    border: 1px solid var(--fp-line); border-radius: 16px; background: var(--fp-surface);
    box-shadow: 0 18px 40px -18px rgba(11, 27, 58, .45);
  }
  .fp-header.is-menu-open .fp-actions-more .fp-btn-label { display: inline; }
  .fp-header.is-menu-open .fp-actions-more .fp-nav-coupons { width: auto; padding: 0 12px; }
}

/* Home: shorter hero on phones so the first products show on the first screen. */
@media (max-width: 760px) {
  .forsa-storefront .fp-hero { padding: 16px 0 18px; }
  .forsa-storefront .fp-hero h1 { font-size: clamp(24px, 7vw, 30px); }
  .forsa-storefront .fp-hero-sub,
  .forsa-storefront .fp-hero-search,
  .forsa-storefront .fp-hero-highlights { display: none; }
  .forsa-storefront .fp-hero-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
}

/* Category tiles under the hero. */
.fp-cat-tiles {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 6px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.fp-cat-tiles::-webkit-scrollbar { display: none; }
.fp-cat-tile {
  flex: none; display: inline-flex; align-items: center; gap: 8px; scroll-snap-align: start;
  min-height: 48px; padding: 8px 16px; border-radius: 16px; border: 1px solid var(--fp-line);
  background: var(--fp-surface); color: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 27, 58, .06); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fp-cat-tile > span:first-child { font-size: 20px; line-height: 1; }
.fp-cat-tile:hover, .fp-cat-tile:focus-visible { transform: translateY(-2px); border-color: var(--fp-brand); box-shadow: 0 8px 18px -10px rgba(11, 27, 58, .35); }

/* «أقوى تخفيضات دلوقتي» swipe row. */
.fp-drops { margin-top: 4px; }
.fp-drops .fp-section-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.fp-drops .fp-section-head > span { color: var(--fp-muted); font-size: 13px; }
@media (max-width: 760px) {
  .fp-drops .fp-section-head { flex-wrap: wrap; gap: 2px 10px; }
  .fp-drops .fp-section-head h2 { font-size: 20px; }
  .fp-drops .fp-rail { grid-auto-columns: 58%; }
}

/* «أقل سعر رصدناه في 30 يوم» card badge (Noon/Jumia only; set by web.catalog.with_price_lows). */
.forsa-low30 {
  position: absolute; top: 12px; inset-inline-end: 10px; z-index: 1; max-width: 62%;
  padding: 3px 9px; border-radius: 999px; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0;
  font-size: 11px; font-weight: 800; line-height: 1.4;
}
:root[data-theme="dark"] .forsa-low30 { background: #064E3B; color: #A7F3D0; border-color: #065F46; }

/* Product page. */
.fp-product-details { margin-top: 12px; border: 1px solid var(--fp-line); border-radius: 14px; padding: 0 14px; }
.fp-product-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; font-size: 14px; }
.fp-product-details[open] > summary { border-bottom: 1px solid var(--fp-line); }
.fp-product-details .fp-product-code { margin-block: 10px; }

.fp-price-insight { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; }
.fp-price-insight.is-below { background: #ECFDF5; color: #047857; }
.fp-price-insight.is-above { background: #FFF7ED; color: #B45309; }
:root[data-theme="dark"] .fp-price-insight.is-below { background: #064E3B; color: #A7F3D0; }
:root[data-theme="dark"] .fp-price-insight.is-above { background: #431407; color: #FED7AA; }

.fp-alert-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fp-alert-card > div { flex: 1 1 260px; min-width: 0; }
.fp-alert-card h2 { font-size: 18px; margin: 0 0 2px; }
.fp-alert-icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px;
  background: linear-gradient(135deg, #FFEDD5, #FED7AA); font-size: 24px;
}
@media (max-width: 560px) { .fp-alert-card .fp-btn { width: 100%; justify-content: center; } }

/* Coupons: codes first, explanation folded. */
.fp-coupon-howto > summary { cursor: pointer; list-style: none; }
.fp-coupon-howto > summary::-webkit-details-marker { display: none; }
.fp-coupon-howto > summary h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
.fp-coupon-howto > summary h2::after { content: "＋"; color: var(--fp-muted); font-weight: 600; }
.fp-coupon-howto[open] > summary h2::after { content: "－"; }
.fp-coupon-howto p { margin-top: 8px; }
@media (max-width: 760px) {
  .forsa-coupons .fp-coupon-intro { padding-block: 18px; }
  .forsa-coupons .fp-coupon-controls { grid-template-columns: 1.4fr 1fr; gap: 8px; }
  .forsa-coupons .fp-coupon-controls label { font-size: 12px; }
}
.fp-code.is-copied { animation: fp-copied .5s ease; }
@keyframes fp-copied { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Choices: icon and live count. */
.fp-choice-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.fp-choice-card .fp-btn { margin-top: auto; align-self: flex-start; }
.fp-choice-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--fp-brand-soft, #E8F1FD); font-size: 24px;
}
.fp-choice-count {
  align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #FFF7ED; color: #C2410C;
  font-size: 12.5px; font-weight: 800;
}
:root[data-theme="dark"] .fp-choice-count { background: #431407; color: #FED7AA; }

/* Polish: softer cards and a gentle pulse on freshly checked prices. */
.forsa-card { box-shadow: 0 1px 2px rgba(11, 27, 58, .05), 0 6px 16px -12px rgba(11, 27, 58, .28); }
.forsa-card .fp-verified:not(.is-stale) svg { animation: fp-fresh 2.4s ease-in-out 2; }
@keyframes fp-fresh { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .fp-cat-tile, .fp-code.is-copied, .forsa-card .fp-verified svg { transition: none; animation: none; }
}
.fp-nowrap { white-space: nowrap; }

/* One-row chip bar (26 October): store menu · category chips · «المزيد». */
.fp-chiprow { display: flex; align-items: center; gap: 8px; }
.fp-chiprow > .fp-chip-scroll { flex: 1 1 auto; min-width: 0; padding: 8px 0; }
.fp-chiprow .fp-chips-cats { padding-inline-start: 0; margin-inline-start: 0; border-inline-start: 0; }
.fp-dd { position: relative; flex: none; }
.fp-dd > summary { list-style: none; cursor: pointer; user-select: none; }
.fp-dd > summary::-webkit-details-marker { display: none; }
.fp-dd-caret { font-size: 11px; opacity: .7; transition: transform .15s ease; }
.fp-dd[open] .fp-dd-caret { transform: rotate(180deg); }
.fp-dd[open] > summary, .fp-dd.is-filtered > summary { border-color: var(--fp-navy, #0B1B3A); color: var(--fp-navy, #0B1B3A); }
.fp-dd-panel {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 70;
  display: grid; gap: 2px; min-width: 210px; padding: 8px;
  border: 1px solid var(--fp-line); border-radius: 16px; background: var(--fp-surface);
  box-shadow: 0 18px 40px -18px rgba(11, 27, 58, .45);
}
.fp-dd-end .fp-dd-panel { inset-inline-start: auto; inset-inline-end: 0; }
.fp-dd-panel .fp-chip { width: 100%; justify-content: flex-start; height: 40px; border: 0; border-radius: 10px; background: transparent; }
.fp-dd-panel .fp-chip:hover, .fp-dd-panel .fp-chip:focus-visible { background: var(--fp-surface-2); }
.fp-dd-panel .fp-store-chip[aria-pressed="true"] { background: var(--fp-navy, #0B1B3A); color: #fff; }
@media (max-width: 760px) {
  .fp-chiprow { gap: 6px; }
  .fp-chiprow > .fp-chip-scroll { flex-direction: row; overflow-x: auto; padding: 6px 0; }
  .fp-chiprow .fp-chips { overflow: visible; }
  .fp-dd-panel { min-width: 190px; }
}