body { background: var(--cream-light); direction: rtl; }
.filter-bar { padding: 0 var(--pad-x); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); background: var(--white); position: sticky; top: 96px; z-index: 90; height: 64px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.filter-pill { padding: 8px 20px; font-size: 13px; font-family: 'Vazirmatn', sans-serif; color: var(--muted); cursor: pointer; background: none; border: 1.5px solid transparent; transition: all .2s; white-space: nowrap; letter-spacing: .3px; flex-shrink: 0; }
.filter-pill:hover { color: var(--text); border-color: var(--border); }
.filter-pill.active { color: var(--green); border-color: var(--green); background: #FFF5F4; font-weight: 500; }
.search-empty { padding: 64px var(--pad-x); text-align: center; color: var(--muted); font-size: 16px; }
.cat-section { padding: 40px var(--pad-x) 32px; }
.cat-section + .cat-section { border-top: 1px solid var(--border); }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.cat-title { font-family: 'Gandom', serif; font-size: 32px; font-weight: 400; color: var(--green); }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.product-card { background: var(--white); border: 1px solid var(--border); cursor: pointer; position: relative; transition: box-shadow .3s, transform .3s; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: 0 14px 48px rgba(89,12,6,.11); transform: translateY(-5px); }
.card-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.product-card:hover .card-img img { transform: scale(1.06); }
.card-badge { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--green); color: var(--cream); font-size: 9px; padding: 4px 10px; letter-spacing: 1.5px; font-family: 'Vazirmatn', sans-serif; }
.card-badge.new { background: var(--gold); color: #3A2810; }
.card-badge.sale { background: #C0392B; }
.card-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(89,12,6,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.product-card:hover .card-overlay { opacity: 1; }
.overlay-label { color: var(--cream); font-size: 13px; letter-spacing: 1px; border: 1px solid rgba(247,238,223,.6); padding: 10px 22px; font-family: 'Vazirmatn', sans-serif; }
.card-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.card-name { font-family: 'Gandom', serif; font-size: 18px; font-weight: 400; color: var(--text); }
.card-weight { font-size: 11px; color: #B5A898; letter-spacing: .5px; }
.card-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.card-price { font-size: 16px; font-weight: 700; color: var(--green); }
.card-price-old { font-size: 12px; color: #CCC; text-decoration: line-through; }
.card-footer { padding: 0 18px 18px; display: flex; gap: 8px; }
.btn-cart { flex: 1; padding: 11px 0; background: var(--green); color: var(--cream); font-size: 12px; font-family: 'Vazirmatn', sans-serif; border: none; cursor: pointer; letter-spacing: .5px; transition: background .2s; }
.btn-cart:hover { background: var(--green-mid); }
@media (max-width: 640px) {
  /* The sticky category-filter pill row ("box that has category of products") --
     removed on mobile, the bottom tab bar + each section's own heading already orient you. */
  .filter-bar { display: none !important; }
  .cat-section { padding: 24px 16px 20px !important; }
  .cat-title { font-size: 20px !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .card-body { padding: 12px 12px 10px !important; gap: 3px !important; }
  .card-name { font-size: 12.5px !important; }
  .card-weight { font-size: 10px !important; }
  .card-price { font-size: 13px !important; }
  .card-price-old { font-size: 10.5px !important; }
  /* Add to Cart centered instead of stretched flex:1 full-width -- sits in the middle of
     the card footer now, same treatment as the single product page's buttons. */
  .card-footer { padding: 0 12px 12px !important; gap: 6px !important; justify-content: center !important; }
  .btn-cart { flex: 0 0 auto !important; font-size: 10.5px !important; padding: 9px 22px !important; }
  .card-badge { font-size: 8px !important; padding: 3px 8px !important; }
}
/* filter-bar overflow-x scroll landed wherever the layout happened to put it -- usually
   mid-pill, with the cut one's background/border just stopping dead at the screen edge.
   Read as "uneven spacing" (user: distance between Date Truffles and Gift Boxes looked
   bigger than the rest) because that's exactly where the clip fell, not an actual gap --
   every pill-to-pill gap is the same uniform 8px (verified live). scroll-snap-align stops
   it ever resting mid-pill again; the edge fade (symmetric, so one rule works for both
   RTL and LTR -- no "to left"/"to right" direction to get backwards) softens the one that's
   still mid-scroll instead of a hard cut, and hints there's more to scroll to.
   Desktop isn't touched: .filter-bar only overflows at phone widths to begin with. */
@media (max-width: 640px) {
  .filter-bar {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  }
  .filter-pill { scroll-snap-align: start; }
}

body { background: var(--cream-light); direction: rtl; }
.breadcrumb { padding: 14px var(--pad-x); font-size: 12px; color: #AAA; display: flex; align-items: center; gap: 8px; background: var(--cream-light); border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { color: #CCC; font-size: 10px; }
.breadcrumb strong { color: var(--text); font-weight: 500; }
.product-main { display: grid; grid-template-columns: 55% 45%; background: var(--white); border-bottom: 1px solid var(--border); min-height: 620px; }
.image-side { padding: 48px 40px 48px 56px; display: flex; flex-direction: column; gap: 14px; }
.main-img-wrap { position: relative; overflow: hidden; background: var(--cream-light); height: 480px; }
.main-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s; }
.badge-main { position: absolute; top: 18px; right: 18px; background: var(--green); color: var(--cream); font-size: 10px; letter-spacing: 1.5px; padding: 5px 14px; font-family: 'Vazirmatn', sans-serif; }
.thumb-row { display: flex; gap: 10px; }
.thumb { width: 76px; height: 76px; overflow: hidden; cursor: pointer; flex-shrink: 0; border: 2px solid transparent; transition: border-color .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { border-color: var(--cream-dark); }
.thumb.active { border-color: var(--green); }
.info-side { padding: 48px 56px 48px 40px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.product-label { font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-bottom: 10px; display: block; }
.product-name { font-family: 'Gandom', serif; font-size: 42px; font-weight: 400; color: var(--text); line-height: 1.25; margin-bottom: 8px; }
.product-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.price-main { font-size: 34px; font-weight: 700; color: var(--green); }
.price-unit { font-size: 14px; color: var(--muted); font-weight: 400; }
.price-old { font-size: 16px; color: #CCC; text-decoration: line-through; }
.stock-badge { font-size: 11px; color: #2D8A4E; background: #EAF7EF; padding: 3px 10px; border-radius: 2px; margin-bottom: 24px; display: inline-block; }
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.field-label { font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; display: block; }
.variant-options { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.variant-btn { padding: 9px 18px; border: 1.5px solid var(--border); font-size: 13px; font-family: 'Vazirmatn', sans-serif; color: var(--text); cursor: pointer; background: var(--white); transition: border-color .2s, color .2s, background .2s; }
.variant-btn:hover { border-color: var(--muted); }
.variant-btn.active { border-color: var(--green); color: var(--green); background: #FFF5F4; }
.qty-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.qty-control { display: flex; align-items: center; border: 1.5px solid var(--border); overflow: hidden; width: fit-content; }
.qty-btn { width: 40px; height: 42px; background: var(--cream); border: none; font-size: 18px; color: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; font-family: monospace; }
.qty-btn:hover { background: var(--cream-dark); }
.qty-num { width: 50px; height: 42px; text-align: center; font-size: 16px; font-weight: 500; color: var(--text); border-right: 1.5px solid var(--border); border-left: 1.5px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; }
.btn-add-cart { width: 100%; padding: 17px 0; background: var(--green); color: var(--cream); font-size: 15px; font-family: 'Vazirmatn', sans-serif; font-weight: 500; letter-spacing: 1px; border: 2px solid var(--green); cursor: pointer; transition: background .25s; margin-bottom: 10px; }
.btn-add-cart:hover { background: var(--green-mid); border-color: var(--green-mid); }
.btn-buy-now { width: 100%; padding: 15px 0; background: transparent; color: var(--green); font-size: 14px; font-family: 'Vazirmatn', sans-serif; letter-spacing: 1px; border: 2px solid var(--green); cursor: pointer; transition: background .25s, color .25s; margin-bottom: 20px; }
.btn-buy-now:hover { background: var(--green); color: var(--cream); }
.quick-specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: auto; }
.spec-cell { background: var(--cream-light); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.spec-label { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.spec-val { font-size: 13px; font-weight: 500; color: var(--text); }
.spec-val.good { color: var(--sage); }
.product-tabs { padding: 0 var(--pad-x); background: var(--white); border-bottom: 1px solid var(--border); display: flex; }
.tab-btn { padding: 20px 32px; font-size: 14px; font-family: 'Vazirmatn', sans-serif; color: var(--muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; letter-spacing: .5px; }
.tab-btn:hover { color: var(--green); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); font-weight: 500; }
.tab-panel { display: none; background: var(--white); }
.tab-panel.active { display: block; }
.desc-inner { display: grid; grid-template-columns: 1fr 340px; gap: 64px; padding: 56px var(--pad-x); }
.desc-lead { font-size: 16px; color: var(--muted); line-height: 1.9; margin-bottom: 32px; }
.desc-section { margin-bottom: 24px; }
.desc-section h3 { font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.desc-section ul { list-style: none; }
.desc-section ul li { font-size: 14px; color: var(--muted); padding: 6px 18px 6px 0; position: relative; line-height: 1.7; }
.desc-section ul li::before { content: '—'; position: absolute; right: 0; color: var(--sage); }
.desc-section p { font-size: 14px; color: var(--muted); line-height: 1.75; }
.aside-img { width: 100%; aspect-ratio: 3/4; overflow: hidden; margin-bottom: 20px; }
.aside-img img { width: 100%; height: 100%; object-fit: cover; }
.aside-caption { font-size: 12px; color: var(--muted); line-height: 1.7; }
.nutrition-inner { padding: 56px var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.nutrition-title { font-family: 'Gandom', serif; font-size: 26px; font-weight: 400; color: var(--text); margin-bottom: 8px; }
.nutrition-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.nutrition-table { width: 100%; border-collapse: collapse; }
.nutrition-table th { text-align: right; font-size: 11px; letter-spacing: 1px; color: var(--muted); padding: 10px 0; border-bottom: 2px solid var(--border); font-weight: 500; }
.nutrition-table td { padding: 11px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); }
.nutrition-table td:last-child { text-align: left; font-weight: 500; color: var(--green); }
.nutrition-table tr:last-child td { border-bottom: none; }
.benefits-list { display: flex; flex-direction: column; gap: 16px; }
.benefit-row { display: flex; align-items: flex-start; gap: 14px; }
.benefit-icon { width: 38px; height: 38px; flex-shrink: 0; background: var(--cream); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.benefit-text h4 { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.benefit-text p { font-size: 12px; color: var(--muted); line-height: 1.6; }
.reviews-inner { padding: 56px var(--pad-x); }
.rating-summary { display: flex; align-items: center; gap: 32px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.rating-big { font-size: 56px; font-weight: 700; color: var(--text); line-height: 1; }
.stars { font-size: 20px; color: var(--gold); letter-spacing: 2px; margin-bottom: 4px; }
.rating-count { font-size: 12px; color: var(--muted); }
.no-reviews { font-size: 14px; color: var(--muted); text-align: center; padding: 40px 0; }
.related-section { padding: 56px var(--pad-x); background: var(--cream-light); border-top: 1px solid var(--border); }
.related-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.related-eyebrow { font-size: 10px; letter-spacing: 3px; color: var(--muted); }
.related-title { font-family: 'Gandom', serif; font-size: 28px; font-weight: 400; color: var(--text); margin-top: 4px; }
.view-all-link { font-size: 13px; color: var(--green); text-decoration: none; border-bottom: 1px solid var(--green); padding-bottom: 2px; transition: opacity .2s; }
.view-all-link:hover { opacity: .65; }
.related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.r-card { background: var(--white); border: 1px solid var(--border); cursor: pointer; text-decoration: none; display: block; transition: box-shadow .25s, transform .25s; }
.r-card:hover { box-shadow: 0 8px 32px rgba(89,12,6,.09); transform: translateY(-3px); }
.r-img { height: 160px; overflow: hidden; }
.r-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.r-card:hover .r-img img { transform: scale(1.04); }
.r-body { padding: 16px; }
.r-name { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.r-price { font-size: 13px; font-weight: 700; color: var(--green); }
/* Single product page had NO mobile rules at all until now -- the desktop 55%/45% two-column
   grid and 34px price font were rendering as-is on a 390px phone, which is what clipped the
   price text off the right edge of its box ("price... go out of box in mobile"). Stacks to one
   column and scales every font/spacing down, same pattern as the shop-grid mobile block above. */
@media (max-width: 640px) {
  /* Breadcrumb ("Home > Products > Category > Name") reads as a redundant top nav on a
     phone-width product page, now that the bottom tab bar already covers Home/Shop. */
  .breadcrumb { display: none !important; }
  .product-main { grid-template-columns: 1fr !important; min-height: auto !important; }
  .image-side { padding: 20px 16px 0 !important; gap: 8px !important; }
  .main-img-wrap { height: auto !important; aspect-ratio: 3/2 !important; }
  .thumb { width: 56px !important; height: 56px !important; }
  .info-side { padding: 16px 16px 24px !important; border: none !important; }
  .product-name { font-size: 20px !important; margin-bottom: 4px !important; }
  .product-sub { font-size: 13px !important; margin-bottom: 12px !important; }
  .price-row { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 4px !important; }
  .price-main { font-size: 22px !important; }
  .price-unit { font-size: 12px !important; }
  .price-old { font-size: 13px !important; }
  .stock-badge { font-size: 10px !important; margin-bottom: 10px !important; }
  .divider { margin: 12px 0 !important; }
  .field-label { margin-bottom: 6px !important; }
  .variant-options { margin-bottom: 14px !important; }
  .variant-btn { padding: 7px 14px !important; font-size: 12px !important; }
  .qty-row { gap: 12px !important; margin-bottom: 14px !important; }
  .qty-btn { width: 34px !important; height: 38px !important; }
  .qty-num { width: 42px !important; height: 38px !important; }
  /* "Add to Cart" (and Buy Now, to match) centered instead of stretched full-width --
     reads as sitting in the middle of the card rather than a stretched bar edge-to-edge. */
  .btn-add-cart, .btn-buy-now { width: 72% !important; max-width: 280px !important; display: block !important; margin-left: auto !important; margin-right: auto !important; }
  .btn-add-cart { padding: 14px 0 !important; font-size: 13px !important; margin-bottom: 8px !important; }
  .btn-buy-now { padding: 13px 0 !important; font-size: 13px !important; margin-bottom: 14px !important; }
  .spec-cell { padding: 10px 12px !important; }
  .product-tabs { padding: 0 16px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .tab-btn { padding: 14px 16px !important; font-size: 12px !important; white-space: nowrap !important; }
  .desc-inner { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px 16px !important; }
  .nutrition-inner { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 16px !important; }
  .rating-summary { gap: 16px !important; margin-bottom: 28px !important; padding-bottom: 24px !important; }
  .rating-big { font-size: 40px !important; }
  .related-section { padding: 32px 16px !important; }
  .related-title { font-size: 20px !important; }
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .r-img { height: 120px !important; }
  .r-body { padding: 12px !important; }
}

/* --- WooCommerce override (not part of the original productTemplates.js CSS) ---
   WooCommerce's own core stylesheet styles real <a>/<button> elements with
   ".woocommerce a.button, .woocommerce button.button, ..." (specificity 0,0,2,1),
   which otherwise beats the plain ".btn-cart"/".btn-detail" class rules above and
   silently overrides them with WC's default grey button look. */
.woocommerce a.button.btn-cart, a.btn-cart.button, a.btn-cart {
  background: var(--green) !important; color: var(--cream) !important; border: none !important;
}
.woocommerce a.button.btn-cart:hover, a.btn-cart.button:hover, a.btn-cart:hover {
  background: var(--green-mid) !important;
}
.woocommerce a.button.btn-detail, a.btn-detail.button, a.btn-detail {
  background: transparent !important; color: var(--green) !important; border: 1.5px solid var(--green) !important;
}
.woocommerce a.button.btn-detail:hover, a.btn-detail.button:hover, a.btn-detail:hover {
  background: var(--green) !important; color: var(--cream) !important;
}

/* Footer legal links (Privacy / Terms) -- were the browser's default blue underline. */
.footer-bottom a { color: var(--muted); text-decoration: none; padding: 6px 4px; }
.footer-bottom a:hover { color: var(--green); }

/* After a shop-grid AJAX add, WooCommerce injects a "View cart" link and a tick into the card;
   the cart drawer opens instead, so hide both (the link showed in default blue and squeezed the button). */
.product-card .added_to_cart { display: none !important; }
.product-card a.btn-cart.added::after, .product-card a.btn-cart.loading::after { display: none !important; }

/* Package photography must retain the full box, including portrait labels. */
.product-card.package-photo .card-img, .package-photo .main-img-wrap,
.package-photo .thumb, .r-card.package-photo .r-img { background: #fff; }
.product-card.package-photo .card-img img,
.package-photo .main-img-wrap img, .package-photo .thumb img,
.r-card.package-photo .r-img img { object-fit: contain; padding: 8px; }
.product-card.package-photo:hover .card-img img,
.r-card.package-photo:hover .r-img img { transform: none; }
@media (max-width: 640px) {
  .breadcrumb { flex-wrap: wrap; overflow-wrap: anywhere; }
  .product-main, .info-side, .image-side { min-width: 0; }
  .thumb-row { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .qty-btn, .variant-btn, .btn-cart { min-height: 44px; }
  .card-price-row { flex-wrap: wrap; }
}

.info-side > a.btn-buy-now { display: block; text-align: center; text-decoration: none; }
.call-for-price { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .qty-btn { min-width: 44px; } }

/* Small-phone cards must shrink to their grid tracks, including stock labels. */
.product-card { min-width: 0; }
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card-footer { flex-wrap: wrap; }
  .card-footer .stock { flex-basis: 100%; margin: 0; text-align: center; font-size: 11px; }
  .card-footer .btn-cart { max-width: 100%; padding: 10px 8px !important; white-space: normal; line-height: 1.5; text-align: center; }
  .overlay-label { max-width: calc(100% - 16px); padding: 8px; font-size: 11px; text-align: center; }
}

/* Product cards with a gallery photo crossfade on mouse hover; touch users keep the
   first image and open the product normally. */
.card-img img.card-img-primary,
.card-img img.card-img-secondary { position: absolute; inset: 0; transition: opacity .35s ease, transform .5s ease; }
.card-img img.card-img-secondary { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .product-card.has-secondary-photo:hover .card-img-secondary,
  .product-card.has-secondary-photo:focus-within .card-img-secondary { opacity: 1; }
  .product-card.has-secondary-photo:hover .card-img-primary,
  .product-card.has-secondary-photo:focus-within .card-img-primary { opacity: 0; }
  .product-card.has-secondary-photo:hover .card-overlay,
  .product-card.has-secondary-photo:focus-within .card-overlay { opacity: 0; }
}

/* Native product links retain card layout and keyboard focus. */
.product-permalink { color: inherit; text-decoration: none; }
a.card-img { display: block; }
.product-permalink:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }