/*
 * Homepage-only styles — hero marquee, category tabs, trust grid
 * (the reviews section is currently commented out in front-page.php,
 * pending real testimonials — same "keep the CSS, disable the content"
 * treatment already used for the offer-grid/"پیشنهادهای ویژه" section).
 *
 * Depends on shop-components.css (.product-card, .badge*, .cat-grid,
 * .cat-empty, .best-row, review carousel) being enqueued first — those
 * are shared with the shop/category archive and single-product pages,
 * not homepage-specific. The generic content-section container (bare
 * `section{}` + `.section-head`) lives in base.css since single-
 * product.php needs it too.
 */

.hero-banner{ position:relative; width:100vw; margin-inline:calc(50% - 50vw); margin-top:var(--sp-3); min-height:420px; overflow:hidden; display:flex; align-items:center; }
.marquee-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:8px; direction:ltr; pointer-events:none; }
.reel-row{ display:flex; gap:8px; width:max-content; will-change:transform; }
.reel-row.left{ animation:mqLeft 70s linear infinite; }
.reel-row.right{ animation:mqRight 70s linear infinite; }
.reel-item{ width:156px; height:156px; border-radius:var(--r-sm); background-size:cover; background-position:center; flex-shrink:0; background-color:var(--surface-variant); }
@keyframes mqLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mqRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* Hybrid scrim: a dark gradient concentrated on the text side (right, in
   RTL) guarantees h1 legibility regardless of which photo happens to be
   scrolling behind it (verified: >=8:1 contrast at the text zone even over
   a worst-case light photo patch — a flat coral wash alone dropped to
   ~2:1 there), plus a coral "halo" glow on the opposite side for the
   requested brand-color identity. */
.hero-banner .scrim{
	position:absolute; inset:0; pointer-events:none;
	background:
		linear-gradient(to left, rgba(9,34,32,.78) 0%, rgba(9,34,32,.55) 35%, rgba(9,34,32,.15) 60%, transparent 80%),
		radial-gradient(circle at 25% 45%, rgba(232,115,92,.55), rgba(232,115,92,.2) 50%, transparent 72%);
}
.hero{ position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:var(--sp-8) var(--sp-6); width:100%; }
.scroll-cue{ position:absolute; z-index:3; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; opacity:.9; pointer-events:none; animation:scrollBounce 1.8s ease-in-out infinite; }
.scroll-cue svg{ width:26px; height:26px; display:block; }
@keyframes scrollBounce{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .scroll-cue{ animation:none; } .reel-row{ animation:none; } }
.hero-text{ max-width:640px; }
.hero h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.28; color:#FFFFFF; }
@media (max-width:520px){ .reel-item{ width:112px; height:112px; } .hero-banner{ min-height:300px; } .hero{ padding:var(--sp-6) var(--sp-6); } }

/* .best-row moved to shop-components.css — single-product.php's related-
   products row uses it too, not just the homepage's bestsellers row. */

/* category tabs */
.cat-tabs{ display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--outline-soft); cursor:grab; }
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tabs.dragging{ cursor:grabbing; user-select:none; }
.cat-tab{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 16px 11px; background:none; border:none; cursor:pointer; color:var(--on-surface-variant); position:relative; font-family:var(--body-face); }
.cat-tab svg{ width:23px; height:23px; }
.cat-tab .lbl{ font-size:12.5px; font-weight:600; white-space:nowrap; }
.cat-tab::after{ content:""; position:absolute; right:10px; left:10px; bottom:-1px; height:2px; background:transparent; border-radius:2px; }
.cat-tab:hover{ color:var(--on-surface); }
.cat-tab.active{ color:var(--primary); }
.cat-tab.active::after{ background:var(--primary); }

.cat-panels{ position:relative; margin-top:var(--sp-6); min-height:120px; }
.cat-panel{ display:none; }
.cat-panel.active{ display:block; }
.cat-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); font-size:13px; color:var(--on-surface-variant); flex-wrap:wrap; }

/* "مشاهده همه" tile — last grid cell in a category tab when more real
   products exist than the 9 shown, styled distinctly from a real
   product card so it never reads as an actual item. */
.product-card.cat-viewall{ background:var(--surface-variant); border-style:dashed; }
.product-card.cat-viewall .art{ display:flex; align-items:center; justify-content:center; background-color:transparent; }
.product-card.cat-viewall .art svg{ width:36px; height:36px; color:var(--primary); transform:rotate(180deg); }
.product-card.cat-viewall .body{ align-items:center; text-align:center; }
.product-card.cat-viewall .name{ color:var(--primary); }
.product-card.cat-viewall .desc{ text-align:center; }
@media (hover:hover) and (pointer:fine){
	.product-card.cat-viewall:hover{ background:var(--outline-soft); }
}
.btn-tonal-sm{ border:none; cursor:pointer; border-radius:var(--r-sm); background:var(--surface-variant); color:var(--primary); font-weight:600; font-size:12.5px; padding:8px 14px; }

.cat-skeleton{ display:none; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-4); }
.cat-skeleton.showing{ display:grid; }
.sk-card{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--outline-soft); background:var(--surface-high); }
.sk-card .art{ aspect-ratio:1; background:var(--surface-variant); animation:skPulse 1.1s ease-in-out infinite; }
.sk-card .ln{ height:9px; margin:10px 12px 0; border-radius:4px; background:var(--surface-variant); animation:skPulse 1.1s ease-in-out infinite; }
.sk-card .ln.short{ width:55%; margin-bottom:12px; }
@keyframes skPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* exclusive offers (currently unused — see the commented-out section in front-page.php) */
.offer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-4); }
.offer-card{ background:var(--primary); color:var(--on-primary); border-radius:var(--r-lg); padding:var(--sp-6); position:relative; overflow:hidden; }
.offer-card .ribbon{ position:absolute; top:14px; inset-inline-end:14px; background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:var(--r-sm); }
.offer-card h3{ font-size:18px; margin-top:6px; max-width:22ch; }
.offer-card p{ font-size:12.5px; opacity:.85; margin-top:8px; max-width:28ch; }
.offer-card .price-row{ margin-top:var(--sp-4); display:flex; align-items:center; justify-content:space-between; }
.offer-card .price{ font-weight:700; font-size:16px; }

/* trust */
.trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-6); }
.trust-item{ display:flex; flex-direction:column; gap:8px; }
.trust-item svg{ width:24px; height:24px; color:var(--accent); }
.trust-item b{ font-size:14px; font-weight:700; }
.trust-item span{ font-size:12.5px; color:var(--on-surface-variant); }

/* review carousel rules moved to shop-components.css — single-product.php
   uses them for real reviews, not just this (currently dormant) section. */