/* ==========================================================================
   OMID HOMEPAGE SECTIONS — v2 (design-system pass)
   Changes in this revision:
   1) FIXED BUG: `.omid-faq__q` lost its color / font-size / line-height /
      cursor to the theme's generic `button`, `[type=button]` and
      `.elementor-kit-101 button` resets. Those resets have the SAME CSS
      specificity as a lone class selector (0,1,0) — when specificity ties,
      the rule that appears LATER in the merged stylesheet wins, and the
      theme's reset is loaded after this file. Rather than fight load order
      with !important (fragile, breaks the next time an asset gets
      reordered), every interactive element in this file is now scoped
      under an ancestor class (e.g. `.omid-faq-shell .omid-faq__q`),
      which raises specificity to (0,2,0) — that beats the resets
      permanently, regardless of load order.
   2) UNIFIED DESIGN TOKENS: one spacing scale, one radius scale, one
      shadow scale, and one mobile breakpoint (640px) are now used by
      every section instead of each section inventing its own numbers
      (90px/70px/50px/72px/80px paddings, 12–24px radii, differently
      colored/opacity shadows, 600/640/768/900 breakpoints scattered
      inconsistently).
   3) NEW: `.omid-products` — a WooCommerce "featured products" strip that
      reuses `.omid-card`, so it automatically matches the rest of the
      page. Pair with the shortcode in omid-products-shortcode.php.

   4) FIXED BUG (this revision): `.omid-products` was not properly
      mobile-responsive. On narrow screens the card's `.om-pcard__footer`
      kept `price + button` side-by-side inside a narrow card, which
      is not enough room for both — they overlapped/wrapped ugly. The
      title also had no line-clamp, so a long product name could stretch
      a card taller than its neighbours, and the category link could wrap
      to two lines and further break the row's alignment.

   5) FIXED BUG (confirmed against a live iPhone-SE screenshot): the
      original "single row + horizontal scroll" mobile layout never
      actually scrolled in production — a competing rule elsewhere in
      the theme (loaded after this file, likely with `!important`) kept
      collapsing the card's `min-width` back toward 0, so all 5 cards
      just squeezed into one unreadable row instead of overflowing.
      Mobile now uses a wrapping 2-column grid (1 column under 380px)
      instead of relying on `min-width` to force a scrollbar, and every
      sizing property in that breakpoint carries `!important` so it
      can't be quietly overridden again. Desktop's horizontal-scroll
      strip is untouched.

   6) FIXED BUG (confirmed against a live screenshot): the single-column
      (≤380px) breakpoint above was forcing `.om-pcard__thumb` to a
      16:9 aspect-ratio. These product photos are framed artwork shot
      roughly square, so cropping them to 16:9 with `object-fit:cover`
      cut the frame off the top/bottom and looked broken. Removed —
      the thumbnail now stays at its natural 1:1 ratio (same as the
      catalog page cards) at every width, uncropped, frame intact.

   Token safety is unchanged from v1: nothing here redeclares --b, --a,
   --text, --muted, --font-fa, --site-font from the child theme; every
   token is either a new "hp-" token or derived with var(--real, fallback).
   ========================================================================== */

:root{
  /* ---- brand aliases (read-only; never redeclare the real tokens) ---- */
  --hp-brand:var(--b,#004851);
  --hp-brand-rgb:0,72,81;
  --hp-gold:var(--a,#92842c);
  --hp-gold-rgb:146,132,44;
  --hp-muted:var(--muted,#64748b);
  --hp-text:var(--text,#0f172a);

  /* ---- spacing scale (used for section vertical rhythm) ---- */
  --hp-space-1:8px;
  --hp-space-2:16px;
  --hp-space-3:24px;
  --hp-space-4:32px;
  --hp-space-5:48px;
  --hp-space-6:64px;
  --hp-space-7:80px;

  /* one pair used by every section: desktop / mobile vertical padding */
  --hp-section-py:var(--hp-space-7);      /* 80px  */
  --hp-section-py-sm:var(--hp-space-5);   /* 48px  */
  --hp-section-px:20px;
  --hp-section-px-sm:16px;

  /* ---- radius scale ---- */
  --hp-radius-sm:12px;   /* small pills/buttons/links      */
  --hp-radius-md:16px;   /* faq items, medium buttons      */
  --hp-radius-lg:20px;   /* content cards (omid-card, oa .cd, posts) */
  --hp-radius-xl:24px;   /* hero / feature imagery          */
  --hp-radius-pill:999px;

  /* ---- shadow scale (all derived from the real brand color) ---- */
  --hp-shadow-sm:0 8px 24px rgba(var(--hp-brand-rgb),.10);
  --hp-shadow-md:0 16px 40px rgba(var(--hp-brand-rgb),.14);
  --hp-shadow-lg:0 24px 56px rgba(var(--hp-brand-rgb),.20);

  /* ---- charity-hero banner palette (kept distinct on purpose) ---- */
  --hero-green:#004851;
  --hero-orange:#ff9a73;
  --hero-red:#d86a56;
  --hero-bg:#fff5ef;
}

/* ==========================================================================
   1. Charity hero (top donation banner)
   ========================================================================== */
@keyframes cardReveal{0%{opacity:0;transform:translateY(30px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cinematicReveal{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes smoothExpandLine{0%{width:0;opacity:0}100%{width:100px;opacity:1}}
@keyframes fadeUpSmooth{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
@keyframes gentleGlow{0%,100%{text-shadow:0 0 0 rgba(216,106,86,0);transform:scale(1)}50%{text-shadow:0 4px 15px rgba(216,106,86,.5);transform:scale(1.02)}}
@keyframes heartEntrance{0%{opacity:0;transform:translateY(10px) rotate(45deg) scale(.85)}100%{opacity:1;transform:translateY(0) rotate(45deg) scale(1)}}
@keyframes heartbeatCSS{0%,100%{transform:rotate(45deg) scale(1)}15%{transform:rotate(45deg) scale(1.25)}30%{transform:rotate(45deg) scale(1)}45%{transform:rotate(45deg) scale(1.15)}60%{transform:rotate(45deg) scale(1)}}

.charity-hero{
  direction:rtl;text-align:center;padding:40px var(--hp-section-px) 35px;max-width:600px;margin:20px auto;
  position:relative;overflow:hidden;border-radius:var(--hp-radius-xl);background:var(--hero-bg);
  box-shadow:var(--hp-shadow-sm);
  font-family:var(--site-font,Vazirmatn,IRANSans,system-ui,sans-serif);
  opacity:0;animation:cardReveal 1s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .4s ease,box-shadow .4s ease;
}
.charity-hero:hover{transform:translateY(-5px);box-shadow:var(--hp-shadow-lg)}
.charity-hero h1{
  font-size:clamp(26px,4vw,36px);font-weight:900;color:var(--hero-green);margin:0 0 8px;
  position:relative;z-index:1;opacity:0;animation:cinematicReveal 1s cubic-bezier(.25,1,.5,1) .2s forwards;
}
.charity-hero .line{
  width:0;height:4px;margin:12px auto 16px;border-radius:var(--hp-radius-pill);background:var(--hero-orange);
  box-shadow:0 8px 15px rgba(255,154,115,.4);position:relative;z-index:1;
  animation:smoothExpandLine .8s cubic-bezier(.25,1,.5,1) .6s forwards;
}
.charity-hero h2{
  font-size:clamp(18px,2.5vw,22px);font-weight:500;color:#4f6462;margin:0;
  position:relative;z-index:1;opacity:0;animation:fadeUpSmooth .8s cubic-bezier(.25,1,.5,1) .8s forwards;
}
.charity-hero .emotional{
  margin-top:18px;font-size:clamp(15px,2.2vw,18px);color:#8a5d52;line-height:1.8;
  position:relative;z-index:1;opacity:0;animation:fadeUpSmooth .8s cubic-bezier(.25,1,.5,1) 1s forwards;
}
.charity-hero .hope{
  display:inline-block;margin-top:8px;font-size:clamp(16px,2.4vw,20px);font-weight:700;
  color:var(--hero-red);animation:gentleGlow 3s ease-in-out 1.8s infinite;
}
.charity-hero .heart{
  display:inline-block;width:14px;height:14px;background:#ff7f7f;transform:rotate(45deg);
  position:relative;top:1px;margin:0 8px;border-radius:2px;opacity:0;
  animation:heartEntrance .45s ease 1.2s forwards,heartbeatCSS 1.8s ease-in-out 1.75s infinite;
}
.charity-hero .heart:before,.charity-hero .heart:after{content:"";width:14px;height:14px;background:#ff7f7f;border-radius:50%;position:absolute}
.charity-hero .heart:before{left:-7px;top:0}
.charity-hero .heart:after{top:-7px;left:0}

@media(max-width:767px){
  .charity-hero{padding:32px var(--hp-section-px-sm) 28px;border-radius:var(--hp-radius-lg);margin:16px auto}
  .charity-hero .line{margin:10px auto 14px}
}
@media(prefers-reduced-motion:reduce){
  .charity-hero,.charity-hero *{animation:none!important;transition:none!important;opacity:1!important}
  .charity-hero .line{width:100px}
  .charity-hero .heart{transform:rotate(45deg)}
}

.omid-home-page__hero{margin:0!important;padding:0!important}
.omid-home-page__hero .charity-hero{margin:0 auto!important}
.omid-home-page__hero+.omid-charity{margin-top:var(--hp-space-3)!important;padding-top:0!important}
.omid-home-page__hero+.omid-charity .omid-container{padding-top:0!important}
@media(max-width:640px){
  .omid-home-page__hero+.omid-charity{margin-top:var(--hp-space-2)!important}
}

/* ==========================================================================
   2. Mission / charity cards grid (.omid-charity)
   ========================================================================== */
.omid-charity{
  --charity-blue:#0b4a57;
  --charity-gold:#c7b35a;
  --charity-muted:#6a6f73;
  --charity-bg1:#f8faf8;
  --charity-bg2:#edf4f2;
  direction:rtl;padding:var(--hp-section-py) var(--hp-section-px);
  background:
    radial-gradient(1200px 500px at 10% 0,#fff 0,transparent 60%),
    linear-gradient(135deg,var(--charity-bg1) 0,var(--charity-bg2) 50%,var(--charity-bg1) 100%);
}
.omid-container{max-width:1200px;margin:auto}
.omid-title{display:block;text-align:center;font-size:30px;color:var(--charity-blue);margin:0 0 10px;font-weight:800;letter-spacing:.2px}
.omid-title::after{content:"";display:block;width:80px;height:4px;background:linear-gradient(90deg,var(--charity-gold),var(--charity-blue));margin:12px auto 0;border-radius:var(--hp-radius-sm)}
.omid-intro{text-align:center;max-width:860px;margin:0 auto var(--hp-space-5);line-height:2.15;color:var(--charity-muted);font-size:15px}
.omid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--hp-space-3)}
.omid-card{
  display:flex;flex-direction:column;align-items:center;background:#fff;padding:var(--hp-space-4) var(--hp-space-3);
  border-radius:var(--hp-radius-lg);text-align:center;box-shadow:var(--hp-shadow-sm);transition:.35s ease;
  position:relative;overflow:hidden;border:1px solid rgba(var(--hp-brand-rgb),.06);
}
.omid-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--hp-gold-rgb),.08),transparent 50%);opacity:0;transition:.35s ease}
.omid-card::after{content:"";position:absolute;top:-60px;right:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(var(--hp-gold-rgb),.12),transparent 70%);transition:.4s ease}
.omid-card::before,.omid-card::after{pointer-events:none}
.omid-card>*{position:relative;z-index:1}
.omid-card:hover{transform:translateY(-10px);box-shadow:var(--hp-shadow-lg)}
.omid-card:hover::before{opacity:1}
.omid-card:hover::after{transform:scale(1.2)}
.omid-card img{width:64px;height:64px;object-fit:contain;margin-bottom:15px}
.omid-card h3{color:var(--charity-blue);font-size:18px;margin-bottom:10px;font-weight:800;line-height:1.6}
.omid-card p{margin:0;font-size:13.6px;line-height:2;color:var(--charity-muted)}

@media(max-width:640px){
  .omid-charity{padding:var(--hp-section-py-sm) var(--hp-section-px-sm)}
  .omid-title{font-size:25px}
  .omid-card{padding:var(--hp-space-3) var(--hp-space-2)}
}

/* ==========================================================================
   3. Achievements / awards slider (.oa)
   ========================================================================== */
.oa{
  --oa-blue:var(--hp-brand);
  --oa-gold:var(--hp-gold);
  --oa-text:var(--hp-text);
  --oa-muted:var(--hp-muted);
  background:transparent;padding:var(--hp-section-py) 0;overflow:hidden;
}
.oa *{box-sizing:border-box;margin:0;padding:0}
.oa .ct{max-width:1200px;margin:0 auto;padding:0 var(--hp-section-px)}
.oa .hd{text-align:center;margin-bottom:var(--hp-space-5)}
.oa .tg{display:inline-block;background:var(--oa-blue);color:#fff;padding:10px 28px;border-radius:var(--hp-radius-pill);font-size:.9rem;font-weight:700;margin-bottom:var(--hp-space-2)}
.oa h2{font-size:2rem;color:var(--oa-blue);margin-bottom:12px}
.oa .sb{color:var(--oa-muted);font-size:1.05rem;max-width:600px;margin:0 auto;line-height:1.9}

.oa .sw-wrap{position:relative}
.oa .fade-l,.oa .fade-r{position:absolute;top:0;bottom:0;width:60px;z-index:5;pointer-events:none}
.oa .fade-l{left:0;background:linear-gradient(to right,#fff,transparent)}
.oa .fade-r{right:0;background:linear-gradient(to left,#fff,transparent)}
.oa .sw{
  overflow-x:auto;overflow-y:hidden;padding:var(--hp-space-2) 0 var(--hp-space-3);direction:ltr;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--oa-blue) #e2e8f0;
}
.oa .sw.dragging{cursor:grabbing}
.oa .sw::-webkit-scrollbar{height:8px}
.oa .sw::-webkit-scrollbar-track{background:#e2e8f0;border-radius:var(--hp-radius-pill)}
.oa .sw::-webkit-scrollbar-thumb{background:var(--oa-blue);border-radius:var(--hp-radius-pill)}
.oa .tr{display:flex;gap:var(--hp-space-3);width:max-content;padding:0 40px}

.oa .cd{
  flex:0 0 320px;background:#fff;border-radius:var(--hp-radius-lg);box-shadow:var(--hp-shadow-sm);
  overflow:hidden;direction:rtl;display:block;text-decoration:none;color:inherit;
  -webkit-user-select:none;user-select:none;transition:box-shadow .3s;
}
.oa .cd:hover{box-shadow:var(--hp-shadow-md)}
.oa .im{position:relative;height:260px;overflow:hidden;background:#fff}
.oa .im img{width:100%;height:100%;object-fit:contain;object-position:center;padding:12px;background:#fff}
.oa .bg{position:absolute;top:12px;right:12px;background:var(--oa-blue);color:#fff;padding:6px 14px;border-radius:var(--hp-radius-pill);font-size:.78rem;font-weight:700;z-index:2}
.oa .yr{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.95);color:var(--oa-blue);padding:6px 12px;border-radius:var(--hp-radius-sm);font-size:.82rem;font-weight:800;z-index:2}
.oa .bd{padding:var(--hp-space-3) var(--hp-space-3) 16px}
.oa .tt{font-size:1rem;color:var(--oa-blue);margin-bottom:10px;line-height:1.8;font-weight:700}
.oa .ds{font-size:.88rem;color:var(--oa-muted);line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.oa .ft{padding:12px var(--hp-space-3);border-top:1px solid #e2e8f0;background:#f8fafc;display:flex;align-items:center;justify-content:space-between}
.oa .tg2{display:inline-block;background:rgba(var(--hp-gold-rgb),.15);color:var(--oa-text);padding:5px 12px;border-radius:var(--hp-radius-pill);font-size:.78rem;font-weight:600}
.oa .lk{color:var(--oa-blue);font-size:.82rem;font-weight:700}

.oa .st{display:flex;justify-content:center;gap:var(--hp-space-5);margin-top:var(--hp-space-5);padding-top:var(--hp-space-4);border-top:2px solid #e2e8f0;flex-wrap:wrap}
.oa .si{text-align:center;padding:0 var(--hp-space-2)}
.oa .sn{font-size:2.2rem;font-weight:800;color:var(--oa-blue);display:block}
.oa .sl{font-size:.9rem;color:var(--oa-muted);margin-top:5px}

.oa .cta{text-align:center;margin-top:var(--hp-space-4)}
.oa .cta a{
  display:inline-block;background:var(--oa-blue);color:#fff;padding:14px 40px;border-radius:var(--hp-radius-md);
  font-size:1rem;font-weight:700;text-decoration:none;box-shadow:var(--hp-shadow-sm);transition:background .3s;
}
.oa .cta a:hover{background:var(--oa-gold)}

@media(max-width:768px){
  .oa{padding:var(--hp-space-5) 0}
  .oa .cd{flex:0 0 280px}
  .oa .im{height:220px}
  .oa h2{font-size:1.4rem}
  .oa .sb{font-size:.95rem}
  .oa .st{gap:var(--hp-space-3)}
  .oa .sn{font-size:1.5rem}
  .oa .si{padding:0 15px}
}

/* ==========================================================================
   4. Partners / sponsors strip (.sp)
   ========================================================================== */
.sp{
  --sp-blue:var(--hp-brand);
  --sp-muted:var(--hp-muted);
  background:transparent;padding:var(--hp-section-py) 0;overflow:hidden;
}
.sp *{box-sizing:border-box;margin:0;padding:0}
.sp .ct{max-width:1200px;margin:0 auto;padding:0 var(--hp-section-px)}
.sp .hd{text-align:center;margin-bottom:var(--hp-space-5)}
.sp .tg{display:inline-block;background:var(--sp-blue);color:#fff;padding:10px 28px;border-radius:var(--hp-radius-pill);font-size:.9rem;font-weight:700;margin-bottom:var(--hp-space-2)}
.sp h2{font-size:2rem;color:var(--sp-blue);margin-bottom:12px}
.sp .sb{color:var(--sp-muted);font-size:1.05rem;max-width:550px;margin:0 auto;line-height:1.9}

.sp .sw{overflow:hidden;position:relative;padding:10px 0;direction:ltr}
.sp .sw-rtl{margin-bottom:var(--hp-space-2)}
.sp .sw-ltr{margin-top:10px}
.sp .tr{display:flex;gap:var(--hp-space-3);width:max-content}

.sp .cd{
  flex:0 0 200px;height:100px;border-radius:var(--hp-radius-sm);overflow:hidden;background:#fff;
  box-shadow:var(--hp-shadow-sm);transition:transform .3s,box-shadow .3s;display:block;
}
.sp .cd:hover{transform:translateY(-5px) scale(1.05);box-shadow:var(--hp-shadow-md)}
.sp .cd img{width:100%;height:100%;object-fit:contain;padding:15px;transition:transform .3s}
.sp .cd:hover img{transform:scale(1.1)}

@media(max-width:768px){
  .sp{padding:var(--hp-section-py-sm) 0}
  .sp .cd{flex:0 0 150px;height:80px}
  .sp .cd img{padding:10px}
  .sp h2{font-size:1.4rem}
}

/* ==========================================================================
   5. Homepage sections wrapper (.omid-home-page)
   ========================================================================== */
.omid-home-page{direction:rtl;color:var(--hp-text);background:#fff;overflow:hidden;font-family:var(--site-font,Vazirmatn,IRANSans,system-ui,sans-serif)}
.omid-home-page *{box-sizing:border-box}

.omid-story__eyebrow,.omid-blog__eyebrow,.omid-faq-shell__eyebrow{
  display:inline-block;background:var(--hp-brand);color:#fff;border-radius:var(--hp-radius-pill);padding:8px 18px;font-size:.84rem;font-weight:800;margin-bottom:var(--hp-space-2);
}
.omid-story__title,.omid-blog__title,.omid-faq-shell__title{
  margin:0 0 12px;color:var(--hp-brand);font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.45;font-weight:900;
}

/* --- 5a. Story section --- */
.omid-story{padding:var(--hp-section-py) var(--hp-section-px);background:linear-gradient(135deg,#f8fcfb 0%,#eef7f5 100%)}
.omid-story__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);align-items:center;gap:42px}
.omid-story__copy{margin:0;color:#52636a;font-size:1rem;line-height:2.15;max-width:580px}
.omid-story__link{display:block;overflow:hidden;border-radius:var(--hp-radius-xl);box-shadow:var(--hp-shadow-md);background:#fff;transition:transform .3s ease,box-shadow .3s ease}
.omid-story__link:hover{transform:translateY(-7px);box-shadow:var(--hp-shadow-lg)}
.omid-story__link img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s ease}
.omid-story__link:hover img{transform:scale(1.04)}

/* --- 5b. Blog section --- */
.omid-blog{padding:var(--hp-section-py) var(--hp-section-px);background:#fff}
.omid-blog__inner{max-width:1200px;margin:0 auto}
.omid-blog__head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:var(--hp-space-5)}
.omid-blog__intro{margin:0;color:var(--hp-muted);line-height:2;max-width:620px}
.omid-blog .omid-blog__all{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;color:#fff;background:var(--hp-brand);
  border-radius:var(--hp-radius-sm);padding:12px 20px;text-decoration:none;font-weight:800;transition:background .25s ease,transform .25s ease;
}
.omid-blog .omid-blog__all:hover{background:var(--hp-gold);transform:translateY(-2px)}
.omid-blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hp-space-3)}

.omid-post{
  display:flex;flex-direction:column;min-width:0;border:1px solid rgba(var(--hp-brand-rgb),.1);border-radius:var(--hp-radius-lg);
  overflow:hidden;background:#fff;box-shadow:var(--hp-shadow-sm);transition:transform .3s ease,box-shadow .3s ease;
}
.omid-post:hover{transform:translateY(-7px);box-shadow:var(--hp-shadow-md)}
.omid-post__image{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef7f5}
.omid-post__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.omid-post:hover .omid-post__image img{transform:scale(1.05)}
.omid-post__image--empty{display:none}
.omid-post__body{display:flex;flex:1;flex-direction:column;padding:var(--hp-space-3)}
.omid-post__date{color:var(--hp-gold);font-size:.82rem;font-weight:800;margin-bottom:10px}
.omid-post__title{margin:0 0 10px;color:var(--hp-brand);font-size:1.06rem;line-height:1.9;font-weight:900}
.omid-post__title a{color:inherit;text-decoration:none}
.omid-post__excerpt{margin:0;color:var(--hp-muted);font-size:.9rem;line-height:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.omid-post .omid-post__more{display:inline-flex;width:max-content;margin-top:auto;padding-top:18px;color:var(--hp-brand);text-decoration:none;font-size:.88rem;font-weight:900}
.omid-post .omid-post__more:hover{color:var(--hp-gold)}

.omid-blog__imageOnly{margin:0 0 var(--hp-space-4);text-align:center}
.omid-blog__imageOnly a{
  display:block;overflow:hidden;border-radius:var(--hp-radius-xl);background:#eef7f5;box-shadow:var(--hp-shadow-md);
  transition:transform .3s ease,box-shadow .3s ease;
}
.omid-blog__imageOnly a:hover{transform:translateY(-5px);box-shadow:var(--hp-shadow-lg)}
.omid-blog__imageOnly img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;transition:transform .4s ease}
.omid-blog__imageOnly a:hover img{transform:scale(1.025)}
.omid-blog__imageOnly .tg{
  display:inline-block;background:var(--hp-brand);color:#fff;padding:10px 28px;border-radius:var(--hp-radius-pill);
  font-size:.9rem;font-weight:700;margin:0 0 18px;margin-right:auto;margin-left:auto;
}
.omid-blog__imageTitle{margin:0 0 16px;color:var(--hp-brand);text-align:center;font-size:clamp(1.45rem,2.8vw,2rem);font-weight:900;line-height:1.7}

.omid-blog__footerLink{display:flex;justify-content:center;margin-top:var(--hp-space-4)}
.omid-blog__footerLink a{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:1.5px solid var(--hp-brand);
  border-radius:var(--hp-radius-sm);color:var(--hp-brand);background:#fff;text-decoration:none;font-size:.92rem;font-weight:900;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.omid-blog__footerLink a:hover{background:var(--hp-brand);color:#fff;transform:translateY(-2px)}

/* ==========================================================================
   5c. WooCommerce featured products strip (.omid-products)
   Pairs with the [omid_products] shortcode.

   v3 — SELF-CONTAINED. This section used to just lay out `.om-pcard`
   in a grid and depend on the shop-archive's own stylesheet
   (omid-catalog.css) being loaded on the homepage for the card's own
   look (border, badge, title, price, button...). That dependency
   turned out to be unreliable in practice (page cache / Elementor CSS
   cache / the theme's conditional enqueue could all cause the
   homepage to render the cards unstyled). So every rule the card
   needs now lives right here, in the stylesheet that's already
   guaranteed to load on the homepage — no other file required.

   Layout: cards are always in a SINGLE row (flex, no wrap). If the
   viewport is too narrow to fit every card at a reasonable width, the
   row scrolls horizontally instead of wrapping to a second row.
   ========================================================================== */
.omid-products{
  --op-blue:var(--hp-brand);
  --op-muted:var(--hp-muted);
  background:#fff;padding:var(--hp-section-py) 0;overflow:hidden;
}
.omid-products .ct{max-width:1200px;margin:0 auto;padding:0 var(--hp-section-px)}
.omid-products .hd{text-align:center;margin-bottom:var(--hp-space-5)}
.omid-products .tg{display:inline-block;background:var(--op-blue);color:#fff;padding:10px 28px;border-radius:var(--hp-radius-pill);font-size:.9rem;font-weight:700;margin-bottom:var(--hp-space-2)}
.omid-products h2{font-size:2rem;color:var(--op-blue);margin-bottom:12px}
.omid-products .sb{color:var(--op-muted);font-size:1.05rem;max-width:600px;margin:0 auto;line-height:1.9}

.omid-products__grid{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scroll-snap-type:x proximity;
}

.omid-products .om-pcard{
  flex:1 1 0;
  min-width:190px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(var(--hp-brand-rgb),.14);
  border-radius:var(--hp-radius-lg);
  box-shadow:var(--hp-shadow-sm);
  text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.omid-products .om-pcard:hover{
  border-color:var(--hp-gold);
  box-shadow:var(--hp-shadow-md);
  transform:translateY(-3px);
}
.omid-products .om-pcard__thumb{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  background:#f3f6f5;
  overflow:hidden;
}
.omid-products .om-pcard__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0;
}
.omid-products .om-pcard__badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:var(--hp-radius-pill);
  font-size:12px;
  font-weight:800;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.omid-products .om-pcard__badge--sale{ background:#c0392b; }
.omid-products .om-pcard__badge--new{ background:var(--hp-gold); }
.omid-products .om-pcard__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  flex:1 1 auto;
}
.omid-products .om-pcard__availability{ display:flex; }
.omid-products .om-pcard__stock-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:var(--hp-radius-pill);
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}
.omid-products .om-pcard__stock-badge--reserved{ color:#075b5d; background:#eaf8f3; border-color:#8bc8ba; }
.omid-products .om-pcard__stock-badge--unavailable{ color:#9e2934; background:#fff3f4; border-color:#efb3ba; }
.omid-products .om-pcard__cat{
  font-size:12.5px;
  color:var(--hp-muted);
  text-decoration:none;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.omid-products .om-pcard__cat:hover{ color:var(--hp-gold); }
.omid-products .om-pcard__title{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  line-height:1.8;
  color:var(--hp-brand);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.omid-products .om-pcard__title a{ color:inherit; text-decoration:none; }
.omid-products .om-pcard__rating{ display:flex; gap:2px; }
.omid-products .om-pcard__rating svg{ width:14px; height:14px; }
.omid-products .om-pcard__rating svg.on{ fill:var(--hp-gold); }
.omid-products .om-pcard__rating svg.half{ fill:#c9bd85; }
.omid-products .om-pcard__rating svg.off{ fill:#e2e8f0; }
.omid-products .om-pcard__footer{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(var(--hp-brand-rgb),.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.omid-products .om-pcard__price{ font-size:13.5px; font-weight:800; color:var(--hp-brand); white-space:nowrap; }
.omid-products .om-pcard__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1.5px solid var(--hp-brand);
  border-radius:var(--hp-radius-pill);
  color:var(--hp-brand);
  font-size:12.5px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.omid-products .om-pcard__btn:hover{ background:var(--hp-brand); color:#fff; }

/* Mobile (≤640px): the single-row horizontal-scroll strip is dropped
   in favour of a wrapping 2-column grid — same pattern the rest of the
   homepage uses on mobile (.omid-grid, .omid-blog__grid). In real-world
   testing the "shrink to min-width, overflow-x scroll" version above
   was being fought by a competing rule elsewhere in the theme (most
   likely a WooCommerce/Elementor product-loop reset with `!important`
   loaded after this file) that collapsed `min-width` back toward 0, so
   every card just shrank to fit one packed, unreadable row instead of
   actually scrolling. Rather than keep chasing that specificity fight,
   every sizing property here carries `!important` so this rule wins
   regardless of what loads after it — the same defensive pattern
   already used for the header buttons and the FAQ questions. */
@media(max-width:640px){
  .omid-products{padding:var(--hp-section-py-sm) 0}
  .omid-products .ct{padding:0 var(--hp-section-px-sm)}
  .omid-products h2{font-size:1.4rem}
  .omid-products .sb{font-size:.95rem}

  .omid-products__grid{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    scroll-snap-type:none!important;
    gap:12px!important;
  }
  .omid-products .om-pcard{
    flex:0 0 calc(50% - 6px)!important;
    min-width:0!important;
    max-width:calc(50% - 6px)!important;
  }
  .omid-products .om-pcard__body{padding:10px;gap:6px}
  .omid-products .om-pcard__cat{font-size:11px}
  .omid-products .om-pcard__title{font-size:13px;line-height:1.65}
  .omid-products .om-pcard__badge{font-size:10.5px;padding:3px 8px;top:8px;right:8px}
  .omid-products .om-pcard__stock-badge{font-size:10.5px;padding:3px 8px}

  /* price + button no longer fit on one row at this card width — stack them */
  .omid-products .om-pcard__footer{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .omid-products .om-pcard__price{ text-align:center; font-size:13px; }
  .omid-products .om-pcard__btn{ width:100%; padding:8px 10px; font-size:11.5px; }
}

/* Very small phones (≤380px): 2 columns gets too tight for
   title + price + button to stay readable, so drop to a single
   full-width column instead. Thumbnail stays at its natural 1:1
   ratio (same as desktop/2-col) — do NOT force a wider aspect-ratio
   here, since these product photos are framed artwork shot roughly
   square; cropping to 16:9 cuts the frame off and looks broken. */
@media(max-width:380px){
  .omid-products .om-pcard{
    flex:0 0 100%!important;
    max-width:100%!important;
  }
  /* full card width now — price and button fit on one row again */
  .omid-products .om-pcard__footer{ flex-direction:row; align-items:center; }
  .omid-products .om-pcard__price{ text-align:right; }
  .omid-products .om-pcard__btn{ width:auto; }
}

/* --- 5d. FAQ section (gold-themed) ---
   NOTE: every rule below is scoped with the `.omid-faq-shell` ancestor —
   this is the fix for the bug in the screenshot. See the header comment. */
.omid-faq-shell{padding:var(--hp-section-py) var(--hp-section-px);background:linear-gradient(135deg,#f8fcfb 0%,#edf7f5 100%)}
.omid-faq-shell__inner{max-width:920px;margin:0 auto}
.omid-faq-shell__head{text-align:center;margin-bottom:var(--hp-space-5)}
.omid-faq-shell__subtitle{margin:0 auto;color:var(--hp-muted);font-size:1rem;line-height:2;max-width:620px}

.omid-faq-shell .omid-faq{display:grid;gap:12px;width:100%;min-width:0}
.omid-faq-shell .omid-faq__item{
  width:100%;min-width:0;max-width:100%;border-radius:var(--hp-radius-md);overflow:hidden;
  border:1.5px solid var(--hp-gold);background:#fffdf8;box-shadow:0 6px 20px rgba(var(--hp-gold-rgb),.1);
}
.omid-faq-shell .omid-faq__q{
  width:100%;min-width:0;max-width:100%;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:18px 20px;border:0;background:#fffdf8;color:var(--hp-brand)!important;font:inherit;font-weight:900;
  font-size:1rem;line-height:1.9;text-align:right;cursor:pointer!important;
}
.omid-faq-shell .omid-faq__qtext{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal}
.omid-faq-shell .omid-faq__icon{position:relative;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:rgba(var(--hp-gold-rgb),.16)}
.omid-faq-shell .omid-faq__icon::before,.omid-faq-shell .omid-faq__icon::after{content:"";position:absolute;top:9px;left:5px;width:10px;height:2px;border-radius:2px;background:var(--hp-gold);transition:transform .25s ease}
.omid-faq-shell .omid-faq__icon::after{transform:rotate(90deg)}
.omid-faq-shell .omid-faq__q[aria-expanded="true"]{background:rgba(var(--hp-gold-rgb),.1)}
.omid-faq-shell .omid-faq__q[aria-expanded="true"] .omid-faq__icon{background:var(--hp-gold)}
.omid-faq-shell .omid-faq__q[aria-expanded="true"] .omid-faq__icon::before,
.omid-faq-shell .omid-faq__q[aria-expanded="true"] .omid-faq__icon::after{background:#fff}
.omid-faq-shell .omid-faq__q[aria-expanded="true"] .omid-faq__icon::after{transform:rotate(0)}

.omid-faq-shell .omid-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.omid-faq-shell .omid-faq__a.is-open{grid-template-rows:1fr}
.omid-faq-shell .omid-faq__aInner{min-height:0;overflow:hidden;padding:0 20px;color:#52636a;line-height:2.1;font-size:.95rem}
.omid-faq-shell .omid-faq__aInner,.omid-faq-shell .omid-faq__aInner *{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal}
.omid-faq-shell .omid-faq__a.is-open .omid-faq__aInner{padding:0 20px 20px}
.omid-faq-shell .omid-faq__aInner p{margin:0 0 14px}
.omid-faq-shell .omid-faq__aInner p:last-child{margin-bottom:0}
.omid-faq-shell .omid-faq__aInner ul{margin:0 0 14px;padding-right:22px}
.omid-faq-shell .omid-faq__aInner li{margin-bottom:5px}
.omid-faq-shell .omid-faq__aInner a{color:var(--hp-gold);font-weight:800}

/* --- 5e. Responsive breakpoints for the homepage sections ---
   Unified to a single mobile breakpoint (640px) and a single tablet
   breakpoint (900px) used consistently across every section. */
@media(max-width:900px){
  .omid-story__inner{grid-template-columns:1fr}
  .omid-story__content{text-align:center}
  .omid-story__copy{margin-right:auto;margin-left:auto}
  .omid-blog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .omid-story__link{max-width:680px;margin:0 auto}
}
@media(max-width:640px){
  .omid-story,.omid-blog,.omid-faq-shell{padding:var(--hp-section-py-sm) var(--hp-section-px-sm)}
  .omid-blog__head{align-items:flex-start;flex-direction:column}
  .omid-blog .omid-blog__all{width:100%}
  .omid-blog__grid{grid-template-columns:1fr}
  .omid-story__title,.omid-blog__title,.omid-faq-shell__title{font-size:1.55rem}

  .omid-blog__imageOnly{margin-bottom:22px}
  .omid-blog__imageOnly a{border-radius:var(--hp-radius-md)}
  .omid-blog__imageOnly img{min-height:0;height:auto;object-fit:contain}
  .omid-blog__imageOnly .tg{margin-bottom:14px;padding:9px 20px;font-size:.84rem}
  .omid-blog__imageTitle{margin-bottom:12px;font-size:1.35rem}
  .omid-blog__footerLink{margin-top:22px}
  .omid-blog__footerLink a{width:100%;padding:12px 18px}

  .omid-faq-shell .omid-faq__q{padding:15px 16px;font-size:.94rem;gap:12px}
  .omid-faq-shell .omid-faq__qtext{font-size:.92rem;line-height:1.95}
  .omid-faq-shell .omid-faq__aInner{padding-right:16px;padding-left:16px;font-size:.9rem;line-height:2}
  .omid-faq-shell .omid-faq__aInner ul{padding-right:18px}
  .omid-faq-shell .omid-faq__a.is-open .omid-faq__aInner{padding-right:16px;padding-left:16px;padding-bottom:16px}
}