/* =========================================================
   sasangraphic — shop (فروشگاه) styles
   Reuses the front-page design system (style.css): tokens,
   .hero + .hero .container grid (with the subtle grid-lines
   ::before), .section/.section-head/.eyebrow, .cta-btn,
   .hero-actions, .works-nav + .works-nav-btn, the wv-* gradient
   panels, reveal animations and the 980px/600px breakpoints.
   The .sg-shop scope (WC design-token remap + shell padding)
   comes from account.css, enqueued for every WooCommerce view.
   This file adds the shop-specific sections on top of the
   shared design: hero slider, store benefits, product
   categories (native WooCommerce terms), the product listing
   (canonical WooCommerce loop — only the card surfaces are
   styled here) and the closing CTA.
   ========================================================= */

/* The hero carries its own top padding (like .blog-hero), so the
   .sg-shop shell padding is reset for this page. */
.sg-shop--hero {
  padding-top: 0;
}

/* ===================== SHOP HERO ===================== */
.shop-hero {
  min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* subtle corner glow (same treatment as the blog hero, violet for the shop) */
.shop-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: -12%;
  top: -35%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow-violet), transparent 65%);
  filter: blur(12px);
  opacity: 0.28;
  pointer-events: none;
}

/* ---------- slide copy (RIGHT column in RTL) ---------- */
.shop-hero-copy {
  position: relative;
  display: grid; /* all slides share one cell → the column keeps the tallest slide's height */
}

.shop-hero-slide-copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
  pointer-events: none;
}
.shop-hero-slide-copy.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* slide badge → the eyebrow position, drawn as a pill (the same pill
   language as .account-btn / .sg-order-status) */
.shop-hero-badge {
  justify-self: start;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
}

.shop-hero-title {
  font-size: clamp(2.1rem, 3vw + 1.4rem, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.shop-hero-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 640px;
}

.shop-hero-actions {
  margin-top: 1.6rem;
}

/* ---------- slider (LEFT column in RTL) ---------- */
.shop-hero-slider {
  position: relative;
}

/* the glass frame + the grid-stack that makes the crossfade RTL-safe
   (no physical offset math) and keeps the height of the tallest slide */
.shop-hero-track {
  display: grid;
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  touch-action: pan-y; /* horizontal swipes are handled, vertical scroll stays native */
}

.shop-hero-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
  pointer-events: none;
}
.shop-hero-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* responsive images: fluid width, intrinsic ratio, themed frame */
.shop-hero-slide img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  user-select: none;
  -webkit-user-drag: none;
}

/* no image yet: gradient placeholder panel, reusing the works-card
   wv-1 … wv-6 gradients (already defined in style.css) */
.shop-hero-slide-ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
}
.shop-hero-slide-ph svg {
  width: clamp(3rem, 6vw, 4.5rem);
  height: auto;
  stroke: rgba(247, 247, 247, 0.85);
}

/* ---------- controls: dots + prev/next ---------- */
.shop-hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* pagination indicators — 22px hit area with a growing accent pill */
.shop-hero-dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.shop-hero-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.shop-hero-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border-strong);
  transition:
    background var(--dur-fast),
    width var(--dur-fast) var(--ease);
}
.shop-hero-dot:hover::before {
  background: var(--text-muted);
}
.shop-hero-dot.is-active::before {
  width: 22px;
  background: var(--accent);
}

/* ===================== STORE BENEFITS ===================== */
/* compact strip right after the hero — the same card language as the
   services grid (glass, accent icon chip, hover lift) */
.shop-benefits {
  padding-block: 0 clamp(0.5rem, 1.5vw, 1rem);
}

.shop-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.2rem;
}

.shop-benefit {
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.shop-benefit:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow:
    0 22px 44px -22px var(--accent-glow),
    var(--shadow-ambient);
}

.shop-benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.16));
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  transition: transform var(--dur-fast) var(--ease);
}
.shop-benefit:hover .shop-benefit-icon {
  transform: translateY(-2px) rotate(-4deg);
}
.shop-benefit-icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--accent);
}

.shop-benefit h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.shop-benefit p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ===================== PRODUCT LISTING ===================== */
/* the canonical WooCommerce loop (products, prices, add-to-cart rendered by
   WC itself) — only the card surfaces/buttons are themed with the site
   tokens. Selectors keep WC's specificity so they win the cascade. */
.shop-products .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-products ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  overflow: hidden;
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.shop-products ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 26px 54px -24px var(--accent-glow),
    var(--shadow-ambient);
}

.shop-products ul.products li.product > a.woocommerce-loop-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.shop-products ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
  border-radius: var(--radius-md);
  user-select: none;
  -webkit-user-drag: none;
}
.shop-products ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.shop-products ul.products li.product .price {
  display: block;
  color: var(--accent);
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
}

/* on-sale flash → accent pill (WC renders it; only the look is themed) */
.shop-products ul.products li.product .onsale {
  position: absolute;
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
}

/* add-to-cart (WC's own button + AJAX flow) — themed like .cta-btn */
.shop-products ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 0.62rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast),
    background var(--dur-fast);
}
.shop-products ul.products li.product .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px var(--accent-glow);
}
.shop-products ul.products li.product .button.loading {
  opacity: 0.75;
  pointer-events: none;
}

/* pagination (native WC markup) — themed with the site tokens */
.shop-products .woocommerce-pagination {
  margin-top: 2.4rem;
  text-align: center;
}
.shop-products .woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
.shop-products .woocommerce-pagination ul li {
  float: none;
  border: none;
}
.shop-products .woocommerce-pagination a,
.shop-products .woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast);
}
.shop-products .woocommerce-pagination a:hover {
  border-color: var(--accent);
  color: var(--text);
}
.shop-products .woocommerce-pagination span.current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* empty state — the same panel language as the blog's .no-results */
.shop-empty {
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  text-align: center;
}
.shop-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.2rem;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.16));
  border: 1px solid var(--border);
}
.shop-empty-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent);
}
.shop-empty h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.shop-empty p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ===================== PROMOTIONAL CTA ===================== */
.shop-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.8rem);
}
.shop-cta-text h3 {
  font-size: clamp(1.4rem, 2.4vw + 0.6rem, 2rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.shop-cta-text p {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 60ch;
}

/* ===================== FILTERING + SORTING ===================== */
/* glass bar above the grid — search, category, price range, product type
   and the native WC orderby sort. The form submits GET params that
   sg_woo_shop_filter_query() applies to the native product query. */
.shop-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 0.9rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  margin-bottom: 1.6rem;
}
.shop-filters.is-active {
  border-color: var(--accent);
}

.shop-filters-search {
  flex: 1 1 200px;
  min-width: 170px;
}
.shop-filters input[type="search"],
.shop-filters input[type="number"],
.shop-filters select {
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  /* SOLID backgrounds: translucent surfaces make the native select popup
     (and its options) unreadable in dark mode — --ink/--paper are the
     site's own solid surfaces and keep both modes readable */
  background-color: var(--ink);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  transition: border-color var(--dur-fast);
}
html[data-theme="day"] .shop-filters input[type="search"],
html[data-theme="day"] .shop-filters input[type="number"],
html[data-theme="day"] .shop-filters select {
  background-color: var(--paper);
}
/* the dropdown options: solid + mode-aware too (some browsers do not
   inherit the select's background into the popup list) */
.shop-filters select option {
  background-color: var(--ink);
  color: var(--text);
}
html[data-theme="day"] .shop-filters select option {
  background-color: var(--paper);
  color: var(--charcoal);
}
.shop-filters input:focus,
.shop-filters select:focus {
  outline: none;
  border-color: var(--accent);
}
.shop-filters input[type="search"] {
  width: 100%;
}
.shop-filters select {
  flex: 0 1 auto;
  width: auto;
  min-width: 130px;
  cursor: pointer;
}
.shop-filters-price {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 0.5rem;
}
.shop-filters-price input {
  width: 110px;
}
.shop-filters-apply {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast);
}
.shop-filters-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px var(--accent-glow);
}
.shop-filters-clear {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-strong);
  padding-bottom: 1px;
  transition: color var(--dur-fast);
}
.shop-filters-clear:hover {
  color: var(--accent);
}

/* filter toggle (mobile only): the filters collapse behind this button —
   a full-width pill with the same line-icon language as the works-nav */
.shop-filters-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease);
}
.shop-filters-toggle:hover {
  border-color: var(--accent);
}
.shop-filters-toggle svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
}
.shop-filters-toggle.open {
  border-color: var(--accent);
}

/* result count (native WC markup) */
.shop-products .woocommerce-result-count {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 1rem;
}

/* ----- card extras: digital badge, category pill, short description ----- */
/* digital badge — over the image, opposite corner from the sale pill */
.shop-products ul.products li.product .shop-badge {
  position: absolute;
  inset-inline-end: 1rem;
  top: 1rem;
  z-index: 2;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  /* solid (mode-aware): a translucent surface over a light product image
     would wash the badge out in day mode */
  background: var(--ink);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.6;
}
html[data-theme="day"] .shop-products ul.products li.product .shop-badge {
  background: var(--paper);
  color: var(--charcoal);
}

/* category pill — above the title (the works-card pattern) */
.shop-products ul.products li.product .shop-product-cat {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

/* short description */
.shop-products ul.products li.product .shop-product-excerpt {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.7;
  margin: 0 0 0.4rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  /* .hero .container already collapses to one column at this breakpoint;
     the slider moves above the copy (same order as the homepage hero) */
  .shop-hero-slider {
    order: -1;
    margin-top: 1.5rem;
  }
  .shop-hero-copy {
    padding-block: 0 1rem;
  }
  .shop-cta-box {
    justify-content: center;
    text-align: center;
  }
  .shop-cta-text p {
    margin-inline: auto;
  }
  /* the filters collapse behind the toggle button (mobile) — the bar opens
     by itself while filters are active, otherwise on toggle */
  .shop-filters-toggle {
    display: inline-flex;
    margin-bottom: 1rem;
  }
  .shop-filters {
    display: none;
  }
  .shop-filters.open,
  .shop-filters.is-active {
    display: flex;
  }
}

@media (max-width: 600px) {
  .shop-hero-title {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
  }
  .shop-hero-controls {
    justify-content: center;
  }
  .shop-cta-box {
    justify-content: center;
  }
  /* the open filter bar stacks into full-width rows so every control stays
     readable on small screens */
  .shop-filters select,
  .shop-filters-apply {
    flex: 1 1 100%;
  }
  .shop-filters-price {
    flex: 1 1 100%;
  }
}