/* ================================================================
   Resayil — Webshop app overlay (rs-webshop.css)
   Phase 24.9, Plan 24.9-02
   ----------------------------------------------------------------
   Scope: Webshop storefront + product-detail routes ONLY
     Portal: /all-products, /shop-by-category, /product/*,
             /product_search, /wishlist, /customer_reviews
     Desk:   /app/website-*, /app/webshop-*, /app/wishlist,
             /app/item-review
   NOT in scope here: /cart, /checkout, /orders, /order
     (those belong to Plan 24.9-03).
   Consumes --rs-* tokens from resayil-brand.css. No new custom
   properties. Activation of bento grid requires rs-webshop-bento.js
   to tag product-list containers with data-rs-webshop-bento="true".
   Webshop renders Jinja templates (SSR) so CSS can use strong
   selectors freely — no Vue reactivity, no innerHTML risk.
   Depends on: resayil-brand.css (tokens), rs-desk.css (chrome baseline),
   tabler-sprite.svg (Phase 24-01).
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   All 13 Webshop scope roots inherit the brand sans stack, foreground,
   subtle bg token, and brand line-height so every storefront,
   product-detail, wishlist, and Webshop Desk surface reads as
   "Resayil" regardless of where Frappe's default body styles apply.
   ----------------------------------------------------------------- */
body[data-path^="all-products"],
body[data-path^="shop-by-category"],
body[data-path^="product/"],
body[data-path^="product_search"],
body[data-path^="wishlist"],
body[data-path^="customer_reviews"],
body[data-route^="/all-products"],
body[data-route^="/shop-by-category"],
body[data-route^="/product"],
body[data-route^="website-"],
body[data-route^="webshop-"],
body[data-route^="wishlist"],
body[data-route^="item-review"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-path^="all-products"] h1,
body[data-path^="shop-by-category"] h1,
body[data-path^="product/"] h1,
body[data-path^="product_search"] h1,
body[data-route^="/all-products"] h1,
body[data-route^="/shop-by-category"] h1,
body[data-route^="/product"] h1,
body[data-route^="website-"] h1,
body[data-route^="webshop-"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  font-weight: 700;
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-path^="all-products"] h2,
body[data-path^="shop-by-category"] h2,
body[data-path^="product/"] h2,
body[data-route^="/all-products"] h2,
body[data-route^="/product"] h2,
body[data-route^="website-"] h2,
body[data-route^="webshop-"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S2 — Portal page surface + container chrome
   Storefront + product-detail outer wrappers pick up brand surface,
   respect the 8pt grid via --rs-space-*, and clamp to a readable
   1280px max-width so aisle-wide pages don't stretch on wide displays.
   ----------------------------------------------------------------- */
body[data-path^="all-products"] .all-products-container,
body[data-path^="all-products"] .product-container,
body[data-path^="shop-by-category"] .shop-by-category-page,
body[data-path^="shop-by-category"] .product-container,
body[data-path^="product/"] .item-main-container,
body[data-path^="product/"] .product-container,
body[data-path^="product_search"] .product-container,
body[data-path^="wishlist"] .wishlist-container,
body[data-path^="customer_reviews"] .reviews-container,
body[data-route^="/all-products"] .all-products-container,
body[data-route^="/shop-by-category"] .shop-by-category-page,
body[data-route^="/product"] .item-main-container {
  background: var(--rs-bg);
  padding: var(--rs-space-5);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--rs-fg);
}

/* Desk scope — Webshop-owned DocType list + form views. Pick up the
   same Resayil card chrome used by other vendor-app overlays so the
   admin Desk surfaces read as one coherent product. */
body[data-route^="website-"] .page-container,
body[data-route^="webshop-"] .page-container,
body[data-route^="wishlist"] .page-container,
body[data-route^="item-review"] .page-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="website-"] .layout-main-section,
body[data-route^="webshop-"] .layout-main-section,
body[data-route^="wishlist"] .layout-main-section,
body[data-route^="item-review"] .layout-main-section {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-5);
}

body[data-route^="website-"] .page-head,
body[data-route^="webshop-"] .page-head,
body[data-route^="wishlist"] .page-head,
body[data-route^="item-review"] .page-head {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-4) var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route^="website-"] .page-content,
body[data-route^="webshop-"] .page-content,
body[data-route^="wishlist"] .page-content,
body[data-route^="item-review"] .page-content {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S3 — Storefront product-card bento grid
   Tagged by rs-webshop-bento.js with data-rs-webshop-bento="true".
   `!important` on display + grid-template-columns only — Bootstrap's
   `.row` / `.col-md-4` specificity would otherwise win and produce
   a 3-column Bootstrap grid with gutters that fight our bento gap.
   We defeat Bootstrap's column rules here, scoped strictly to the
   tagged product-list container. `.col`/`.row` elsewhere on the page
   (filter sidebar, header) are not touched.
   ----------------------------------------------------------------- */
body[data-path^="all-products"] [data-rs-webshop-bento],
body[data-path^="shop-by-category"] [data-rs-webshop-bento],
body[data-path^="product_search"] [data-rs-webshop-bento],
body[data-path^="wishlist"] [data-rs-webshop-bento],
body[data-path^="customer_reviews"] [data-rs-webshop-bento],
body[data-route^="/all-products"] [data-rs-webshop-bento],
body[data-route^="/shop-by-category"] [data-rs-webshop-bento] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--rs-space-5) !important;
  margin: 0 !important;
  padding: var(--rs-space-2) 0;
}

/* Each product card (direct children of the bento container, plus
   literal .product-card / .category-card classes for the cases where
   Jinja renders them outside a tagged list). */
body[data-path^="all-products"] [data-rs-webshop-bento] > *,
body[data-path^="shop-by-category"] [data-rs-webshop-bento] > *,
body[data-path^="product_search"] [data-rs-webshop-bento] > *,
body[data-path^="wishlist"] [data-rs-webshop-bento] > *,
body[data-route^="/all-products"] [data-rs-webshop-bento] > *,
body[data-route^="/shop-by-category"] [data-rs-webshop-bento] > *,
body[data-path^="all-products"] .product-card,
body[data-path^="shop-by-category"] .category-card,
body[data-path^="shop-by-category"] .product-card,
body[data-route^="/all-products"] [class*="product-card"],
body[data-route^="/shop-by-category"] [class*="category-card"] {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  overflow: hidden;
  transition:
    transform var(--rs-duration) var(--rs-ease-brand),
    border-color var(--rs-duration) var(--rs-ease-brand),
    box-shadow var(--rs-duration) var(--rs-ease-brand);
  color: var(--rs-fg);
}

body[data-path^="all-products"] [data-rs-webshop-bento] > *:hover,
body[data-path^="shop-by-category"] [data-rs-webshop-bento] > *:hover,
body[data-path^="product_search"] [data-rs-webshop-bento] > *:hover,
body[data-route^="/all-products"] [data-rs-webshop-bento] > *:hover,
body[data-path^="all-products"] .product-card:hover,
body[data-path^="shop-by-category"] .category-card:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}

/* Product image inside card: square crop, rounded corners. */
body[data-path^="all-products"] .product-image,
body[data-path^="shop-by-category"] .product-image,
body[data-path^="shop-by-category"] .category-image,
body[data-path^="product_search"] .product-image,
body[data-route^="/all-products"] .product-image,
body[data-route^="/shop-by-category"] .category-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-surface);
}

body[data-path^="all-products"] .product-title,
body[data-path^="all-products"] .product-name,
body[data-path^="all-products"] .item-name,
body[data-path^="shop-by-category"] .category-title,
body[data-path^="product_search"] .product-title,
body[data-route^="/all-products"] .product-title,
body[data-route^="/shop-by-category"] .category-title {
  font-weight: 600;
  font-size: var(--rs-text-base);
  color: var(--rs-fg);
  margin-top: var(--rs-space-3);
  line-height: var(--rs-leading-tight);
}

body[data-path^="all-products"] .product-price,
body[data-path^="all-products"] .product-regular-price,
body[data-path^="shop-by-category"] .product-price,
body[data-path^="product_search"] .product-price,
body[data-route^="/all-products"] .product-price {
  color: var(--rs-accent);
  font-weight: 700;
  font-size: var(--rs-text-lg);
  margin-top: var(--rs-space-2);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  body[data-path^="all-products"] [data-rs-webshop-bento],
  body[data-path^="shop-by-category"] [data-rs-webshop-bento],
  body[data-path^="product_search"] [data-rs-webshop-bento],
  body[data-route^="/all-products"] [data-rs-webshop-bento],
  body[data-route^="/shop-by-category"] [data-rs-webshop-bento] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rs-space-4) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  body[data-path^="all-products"] [data-rs-webshop-bento],
  body[data-path^="shop-by-category"] [data-rs-webshop-bento],
  body[data-path^="product_search"] [data-rs-webshop-bento],
  body[data-route^="/all-products"] [data-rs-webshop-bento],
  body[data-route^="/shop-by-category"] [data-rs-webshop-bento] {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-3) !important;
  }
}

/* -----------------------------------------------------------------
   S4 — Product detail hero + info panel
   Two-column layout on desktop (image-left, info-right). Collapses
   to stacked on tablet/mobile. Hero image gets Resayil card chrome
   so the product photo reads as a first-class surface, not a bleed.
   ----------------------------------------------------------------- */
body[data-path^="product/"] .product-details,
body[data-route^="/product"] .product-details {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--rs-space-6);
  padding: var(--rs-space-5) 0;
  align-items: start;
}

@media (max-width: 768px) {
  body[data-path^="product/"] .product-details,
  body[data-route^="/product"] .product-details {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-4);
  }
}

body[data-path^="product/"] .product-main-image,
body[data-path^="product/"] .item-slideshow,
body[data-route^="/product"] .product-main-image,
body[data-route^="/product"] .item-slideshow {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-4);
  box-shadow: var(--rs-shadow-sm);
  overflow: hidden;
}

body[data-path^="product/"] .product-main-image img,
body[data-path^="product/"] .item-slideshow img,
body[data-route^="/product"] .product-main-image img {
  width: 100%;
  height: auto;
  border-radius: var(--rs-radius-sm);
  object-fit: contain;
}

body[data-path^="product/"] .product-info,
body[data-route^="/product"] .product-info {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  color: var(--rs-fg);
}

body[data-path^="product/"] .product-page-title,
body[data-route^="/product"] .product-page-title {
  font-size: var(--rs-text-3xl);
  font-weight: 700;
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
  line-height: var(--rs-leading-tight);
}

body[data-path^="product/"] .product-price,
body[data-path^="product/"] .regular-price,
body[data-path^="product/"] .price-container,
body[data-route^="/product"] .product-price,
body[data-route^="/product"] .regular-price {
  font-size: var(--rs-text-2xl);
  font-weight: 700;
  color: var(--rs-accent);
  margin-bottom: var(--rs-space-4);
}

body[data-path^="product/"] .sale-price,
body[data-route^="/product"] .sale-price {
  color: var(--rs-accent);
  font-weight: 700;
}

body[data-path^="product/"] .product-description,
body[data-route^="/product"] .product-description {
  color: var(--rs-fg-muted);
  line-height: var(--rs-leading-relaxed);
  margin-bottom: var(--rs-space-5);
  font-size: var(--rs-text-base);
}

/* Slider thumbnail strip */
body[data-path^="product/"] .slider-nav,
body[data-route^="/product"] .slider-nav {
  display: flex;
  gap: var(--rs-space-2);
  margin-top: var(--rs-space-3);
}

body[data-path^="product/"] .slider-nav img,
body[data-route^="/product"] .slider-nav img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-sm);
  cursor: pointer;
  transition: border-color var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="product/"] .slider-nav img:hover,
body[data-path^="product/"] .slider-nav img.active,
body[data-route^="/product"] .slider-nav img:hover,
body[data-route^="/product"] .slider-nav img.active {
  border-color: var(--rs-accent);
}

/* -----------------------------------------------------------------
   S5 — Tabbed sections (Website Item Tabbed Section)
   Pill-style tabs with accent-soft active state and an underline rail
   below the tab row. Tab content resolves text to --rs-fg with
   relaxed line-height for readable blocks of description copy.
   ----------------------------------------------------------------- */
body[data-path^="product/"] .item-tabs,
body[data-path^="product/"] .tabbed-section,
body[data-route^="/product"] .item-tabs,
body[data-route^="/product"] .tabbed-section {
  margin-top: var(--rs-space-6);
  border-top: 1px solid var(--rs-border);
  padding-top: var(--rs-space-4);
}

body[data-path^="product/"] .item-tabs .nav,
body[data-path^="product/"] .item-tabs .tab-list,
body[data-path^="product/"] .tabbed-section .nav,
body[data-route^="/product"] .item-tabs .nav,
body[data-route^="/product"] .tabbed-section .nav {
  display: flex;
  gap: var(--rs-space-2);
  border-bottom: 1px solid var(--rs-border);
  padding-bottom: var(--rs-space-2);
  margin-bottom: var(--rs-space-4);
  list-style: none;
}

body[data-path^="product/"] .item-tabs [data-tab],
body[data-path^="product/"] .item-tabs .nav-link,
body[data-path^="product/"] .tabbed-section [data-tab],
body[data-route^="/product"] .item-tabs [data-tab],
body[data-route^="/product"] .item-tabs .nav-link {
  padding: var(--rs-space-2) var(--rs-space-4);
  border-radius: var(--rs-radius-md);
  color: var(--rs-fg-muted);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--rs-duration-fast) var(--rs-ease),
    color var(--rs-duration-fast) var(--rs-ease),
    border-color var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="product/"] .item-tabs [data-tab]:hover,
body[data-path^="product/"] .item-tabs .nav-link:hover,
body[data-route^="/product"] .item-tabs [data-tab]:hover {
  color: var(--rs-accent);
}

body[data-path^="product/"] .item-tabs [data-tab].active,
body[data-path^="product/"] .item-tabs .nav-link.active,
body[data-path^="product/"] .tabbed-section [data-tab].active,
body[data-route^="/product"] .item-tabs .nav-link.active {
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
  border-color: var(--rs-accent);
}

body[data-path^="product/"] .tab-content,
body[data-path^="product/"] .item-tabs .tab-pane,
body[data-route^="/product"] .tab-content {
  padding: var(--rs-space-4) 0;
  color: var(--rs-fg);
  line-height: var(--rs-leading-relaxed);
}

/* -----------------------------------------------------------------
   S6 — Add to cart button + quantity spinner
   Resayil CTA: orange fill, rounded corners, white text, hover lift,
   subtle shadow on hover. Quantity spinner uses the shared input
   pill pattern (surface bg, border, rounded) with inline +/- buttons.
   ----------------------------------------------------------------- */
body[data-path^="product/"] .btn-add-to-cart,
body[data-path^="product/"] #btn-add-to-cart,
body[data-path^="product/"] .cart-btn,
body[data-path^="product/"] button[data-action="add-to-cart"],
body[data-route^="/product"] .btn-add-to-cart,
body[data-route^="/product"] #btn-add-to-cart,
body[data-route^="/product"] .cart-btn {
  background: var(--rs-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-5);
  font-weight: 600;
  font-size: var(--rs-text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  cursor: pointer;
  transition:
    background var(--rs-duration-fast) var(--rs-ease),
    box-shadow var(--rs-duration-fast) var(--rs-ease),
    transform var(--rs-duration-fast) var(--rs-ease);
  margin-top: var(--rs-space-3);
}

body[data-path^="product/"] .btn-add-to-cart:hover,
body[data-path^="product/"] #btn-add-to-cart:hover,
body[data-path^="product/"] .cart-btn:hover,
body[data-route^="/product"] .btn-add-to-cart:hover,
body[data-route^="/product"] .cart-btn:hover {
  background: var(--rs-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--rs-shadow-md);
}

body[data-path^="product/"] .btn-add-to-cart:disabled,
body[data-path^="product/"] #btn-add-to-cart:disabled,
body[data-path^="product/"] .cart-btn:disabled,
body[data-route^="/product"] .btn-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Quantity spinner — surfaces the qty input + stepper buttons as one
   pill-shaped control. */
body[data-path^="product/"] .number-spinner,
body[data-path^="product/"] .qty-input,
body[data-route^="/product"] .number-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  overflow: hidden;
  background: var(--rs-surface);
  margin-right: var(--rs-space-3);
}

body[data-path^="product/"] .number-spinner .btn-number,
body[data-path^="product/"] .number-spinner button,
body[data-route^="/product"] .number-spinner .btn-number {
  background: var(--rs-surface);
  color: var(--rs-fg);
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  transition: background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="product/"] .number-spinner .btn-number:hover,
body[data-route^="/product"] .number-spinner .btn-number:hover {
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
}

body[data-path^="product/"] .number-spinner input,
body[data-path^="product/"] .qty-input input,
body[data-route^="/product"] .number-spinner input {
  width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
  padding: var(--rs-space-1);
}

body[data-path^="product/"] .number-spinner input:focus,
body[data-route^="/product"] .number-spinner input:focus {
  outline: none;
}

/* -----------------------------------------------------------------
   S7 — Review cards + star rating
   Review entries render as small surface cards with author + date
   meta and a row of Tabler star icons. Uses color tokens only (no
   new icon registrations; sprite bake frozen from Phase 24-01).
   ----------------------------------------------------------------- */
body[data-path^="customer_reviews"] .review-card,
body[data-path^="product/"] .review-card,
body[data-path^="product/"] .item-reviews .review,
body[data-route^="/product"] .review-card {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  margin-bottom: var(--rs-space-3);
  color: var(--rs-fg);
}

body[data-path^="customer_reviews"] .review-card .author,
body[data-path^="product/"] .review-card .author,
body[data-path^="product/"] .item-reviews .review-author,
body[data-route^="/product"] .review-card .author {
  font-weight: 600;
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
}

body[data-path^="customer_reviews"] .review-card .date,
body[data-path^="product/"] .review-card .date,
body[data-path^="product/"] .item-reviews .review-date,
body[data-route^="/product"] .review-card .date {
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-xs);
}

body[data-path^="customer_reviews"] .review-rating,
body[data-path^="product/"] .review-rating,
body[data-route^="/product"] .review-rating {
  color: var(--rs-accent);
  font-size: var(--rs-text-base);
  margin-top: var(--rs-space-1);
}

body[data-path^="customer_reviews"] .review-rating .star-empty,
body[data-path^="product/"] .review-rating .star-empty,
body[data-route^="/product"] .review-rating .star-empty {
  color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S8 — Filter sidebar + category tree + search + pagination
   Sidebar is a sticky card that follows the user as they scroll the
   product grid. Filter items are clickable rows that pick up accent
   color on hover/active. Search input follows the same pill pattern
   as the composer in other overlays.
   ----------------------------------------------------------------- */
body[data-path^="all-products"] .filters,
body[data-path^="all-products"] .filters-section,
body[data-path^="shop-by-category"] .filters,
body[data-path^="product_search"] .filters,
body[data-route^="/all-products"] .filters,
body[data-route^="/shop-by-category"] .filters {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  position: sticky;
  top: var(--rs-space-4);
  color: var(--rs-fg);
}

body[data-path^="all-products"] .filters .filter-title,
body[data-path^="all-products"] .filters-section .filter-title,
body[data-path^="shop-by-category"] .filters .filter-title,
body[data-route^="/all-products"] .filters .filter-title {
  font-weight: 600;
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-2);
  font-size: var(--rs-text-sm);
}

body[data-path^="all-products"] .category-tree a,
body[data-path^="all-products"] .filters .filter-item,
body[data-path^="shop-by-category"] .category-tree a,
body[data-route^="/all-products"] .category-tree a {
  display: block;
  padding: var(--rs-space-1) 0;
  color: var(--rs-fg-muted);
  cursor: pointer;
  transition: color var(--rs-duration-fast) var(--rs-ease);
  text-decoration: none;
}

body[data-path^="all-products"] .category-tree a:hover,
body[data-path^="all-products"] .filters .filter-item:hover,
body[data-path^="shop-by-category"] .category-tree a:hover,
body[data-route^="/all-products"] .category-tree a:hover {
  color: var(--rs-accent);
}

body[data-path^="all-products"] .category-tree a.active,
body[data-path^="all-products"] .filters .filter-item.active,
body[data-path^="shop-by-category"] .category-tree a.active {
  color: var(--rs-accent);
  font-weight: 500;
}

body[data-path^="all-products"] .search-input,
body[data-path^="product_search"] .search-input,
body[data-path^="all-products"] input[type="search"],
body[data-route^="/all-products"] input[type="search"] {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-full);
  padding: var(--rs-space-2) var(--rs-space-4);
  color: var(--rs-fg);
  font-family: var(--rs-font-sans);
  font-size: var(--rs-text-sm);
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="all-products"] .search-input:focus,
body[data-path^="product_search"] .search-input:focus,
body[data-route^="/all-products"] input[type="search"]:focus {
  outline: none;
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-soft);
}

/* Pagination + empty state */
body[data-path^="all-products"] .pagination,
body[data-path^="shop-by-category"] .pagination,
body[data-path^="product_search"] .pagination,
body[data-route^="/all-products"] .pagination {
  display: flex;
  gap: var(--rs-space-2);
  justify-content: center;
  margin-top: var(--rs-space-6);
}

body[data-path^="all-products"] .pagination a,
body[data-path^="all-products"] .pagination .page-link,
body[data-route^="/all-products"] .pagination a {
  padding: var(--rs-space-2) var(--rs-space-3);
  border-radius: var(--rs-radius-sm);
  border: 1px solid var(--rs-border);
  color: var(--rs-fg);
  text-decoration: none;
  transition: background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="all-products"] .pagination a:hover,
body[data-path^="all-products"] .pagination .page-link:hover,
body[data-route^="/all-products"] .pagination a:hover {
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
  border-color: var(--rs-accent);
}

body[data-path^="all-products"] .empty-state,
body[data-path^="product_search"] .empty-state,
body[data-path^="shop-by-category"] .empty-state {
  text-align: center;
  padding: var(--rs-space-8) var(--rs-space-5);
  color: var(--rs-fg-muted);
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
}

/* Breadcrumbs */
body[data-path^="product/"] .breadcrumb,
body[data-path^="shop-by-category"] .breadcrumb,
body[data-route^="/product"] .breadcrumb {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-muted);
  margin-bottom: var(--rs-space-3);
}

body[data-path^="product/"] .breadcrumb a,
body[data-route^="/product"] .breadcrumb a {
  color: var(--rs-fg-muted);
  text-decoration: none;
  transition: color var(--rs-duration-fast) var(--rs-ease);
}

body[data-path^="product/"] .breadcrumb a:hover,
body[data-route^="/product"] .breadcrumb a:hover {
  color: var(--rs-accent);
}

/* Stock badge affordance */
body[data-path^="product/"] .stock-badge,
body[data-path^="all-products"] .stock-badge,
body[data-route^="/product"] .stock-badge {
  display: inline-block;
  padding: var(--rs-space-1) var(--rs-space-2);
  border-radius: var(--rs-radius-sm);
  font-size: var(--rs-text-xs);
  font-weight: 500;
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
}

/* -----------------------------------------------------------------
   S9 — Dark mode (scoped — inherits tokens from :root[data-theme=dark])
   The --rs-* surface/border tokens re-resolve automatically under the
   dark-theme block defined in resayil-brand.css. We only need to
   bump hover shadow (perceptually weaker in dark mode) and ensure
   product cards + detail hero pick up the surface token again in case
   a Jinja inline style wants to fight us.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-path^="all-products"] [data-rs-webshop-bento] > *,
body[data-theme="dark"][data-path^="shop-by-category"] [data-rs-webshop-bento] > *,
body[data-theme="dark"][data-path^="all-products"] .product-card,
body[data-theme="dark"][data-route^="/all-products"] [data-rs-webshop-bento] > * {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-path^="all-products"] [data-rs-webshop-bento] > *:hover,
body[data-theme="dark"][data-path^="shop-by-category"] [data-rs-webshop-bento] > *:hover,
body[data-theme="dark"][data-route^="/all-products"] [data-rs-webshop-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-path^="product/"] .product-main-image,
body[data-theme="dark"][data-path^="product/"] .product-info,
body[data-theme="dark"][data-route^="/product"] .product-main-image,
body[data-theme="dark"][data-route^="/product"] .product-info {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-route^="website-"] .layout-main-section,
body[data-theme="dark"][data-route^="webshop-"] .layout-main-section,
body[data-theme="dark"][data-route^="wishlist"] .layout-main-section,
body[data-theme="dark"][data-route^="item-review"] .layout-main-section {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S10 — RTL (Arabic, Hebrew)
   Apply Arabic font family + right-align text in the product info
   panel. CSS Grid auto-mirrors the 2-column hero (no explicit flip
   needed). Logical properties used where margin/padding direction
   matters so RTL reads naturally.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-path^="all-products"],
[dir="rtl"] body[data-path^="shop-by-category"],
[dir="rtl"] body[data-path^="product/"],
[dir="rtl"] body[data-path^="product_search"],
[dir="rtl"] body[data-route^="/all-products"],
[dir="rtl"] body[data-route^="/product"] {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-path^="all-products"] [data-rs-webshop-bento] > *,
[dir="rtl"] body[data-path^="shop-by-category"] [data-rs-webshop-bento] > *,
[dir="rtl"] body[data-route^="/all-products"] [data-rs-webshop-bento] > * {
  text-align: right;
}

[dir="rtl"] body[data-path^="product/"] .product-info,
[dir="rtl"] body[data-route^="/product"] .product-info {
  text-align: right;
}

[dir="rtl"] body[data-path^="product/"] .number-spinner,
[dir="rtl"] body[data-route^="/product"] .number-spinner {
  margin-right: 0;
  margin-left: var(--rs-space-3);
}

[dir="rtl"] body[data-path^="all-products"] .filters,
[dir="rtl"] body[data-path^="shop-by-category"] .filters,
[dir="rtl"] body[data-route^="/all-products"] .filters {
  text-align: right;
}

/* -----------------------------------------------------------------
   S11 — Reduced motion — kill transforms + transitions on all
   hover/card/button/spinner rules so users opting out of animation
   get a static surface.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-path^="all-products"] [data-rs-webshop-bento] > *,
  body[data-path^="shop-by-category"] [data-rs-webshop-bento] > *,
  body[data-path^="all-products"] .product-card,
  body[data-path^="product/"] .btn-add-to-cart,
  body[data-path^="product/"] .cart-btn,
  body[data-path^="product/"] .number-spinner .btn-number,
  body[data-path^="product/"] .slider-nav img,
  body[data-path^="all-products"] .category-tree a,
  body[data-path^="all-products"] .pagination a,
  body[data-route^="/all-products"] [data-rs-webshop-bento] > *,
  body[data-route^="/product"] .btn-add-to-cart,
  body[data-route^="/product"] .cart-btn {
    transition: none;
  }
  body[data-path^="all-products"] [data-rs-webshop-bento] > *:hover,
  body[data-path^="shop-by-category"] [data-rs-webshop-bento] > *:hover,
  body[data-path^="all-products"] .product-card:hover,
  body[data-path^="product/"] .btn-add-to-cart:hover,
  body[data-path^="product/"] .cart-btn:hover,
  body[data-route^="/all-products"] [data-rs-webshop-bento] > *:hover,
  body[data-route^="/product"] .btn-add-to-cart:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.9-02)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"]:not(...website-*|webshop-*|wishlist|item-review)
   - body[data-route^="/subscribe"] / loyalty / whatsapp / helpdesk
     / insights / builder / raven
   - /cart, /checkout, /orders, /order (those belong to Plan 24.9-03;
     this file does NOT emit rules for them)
   Enforced by scripts/verify_webshop_css_scope.py (Task 3).
   ----------------------------------------------------------------- */