/* ==========================================================================
   Zhwan Shop — Persian RTL storefront theme for Bagisto
   Design system ported from the "ژوان شاپ" WordPress theme
   (wp-content/themes/zhwan). Plain CSS layered over the default theme's
   compiled Tailwind bundle, so most brand rules need `!important`.
   ========================================================================== */

/* ---------- Self-hosted Persian fonts ---------- */
@font-face{font-family:'Vazir';src:url('fonts/Vazir-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Vazir';src:url('fonts/Vazir-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazir';src:url('fonts/Vazir-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazir';src:url('fonts/Vazir-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Design tokens (verbatim from the WordPress theme) ---------- */
:root{
  /* Brand */
  --z-brand:        #ff4c6c;
  --z-brand-dark:   #e23458;
  --z-brand-light:  #ffe7ec;
  --z-accent:       #2bb39a;

  /* Neutrals */
  --z-ink:          #1f2430;
  --z-ink-soft:     #5a6072;
  --z-line:         #ececf1;
  --z-bg:           #ffffff;
  --z-bg-soft:      #f7f7fa;

  /* Feedback */
  --z-success:      #2bb39a;
  --z-danger:       #e2452f;
  --z-warning:      #f0a500;

  /* Shape & motion */
  --z-radius:       14px;
  --z-radius-sm:    9px;
  --z-shadow:       0 6px 24px rgba(31, 36, 48, .08);
  --z-shadow-sm:    0 2px 10px rgba(31, 36, 48, .06);
  --z-container:    1240px;
  --z-header-h:     72px;
  --z-ease:         cubic-bezier(.4, 0, .2, 1);

  --z-font: "Vazir", "Vazirmatn", Tahoma, -apple-system, "Segoe UI", sans-serif;
}

/**
 * Bagisto's bundle sets Poppins with a `*` selector, so Vazir has to match that
 * reach. The icon font is excluded or every glyph turns into a box.
 */
*,
*::before,
*::after{
  font-family:var(--z-font) !important;
}

[class^="icon-"],[class*=" icon-"],
[class^="icon-"]::before,[class*=" icon-"]::before,
[class^="icon-"]::after,[class*=" icon-"]::after{
  font-family:"bagisto-shop" !important;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--z-ink);
  background:var(--z-bg);
  overflow-x:clip;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .2s var(--z-ease)}
a:hover{color:var(--z-brand)}
img{max-width:100%;height:auto}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--z-brand);outline-offset:2px}

.zh-container{width:100%;max-width:var(--z-container);margin-inline:auto;padding-inline:18px}

/* ---------- Topbar ---------- */
.zh-topbar{background:var(--z-ink);color:#fff;font-size:12.5px}
.zh-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.zh-topbar__text{margin:0;opacity:.9}
.zh-topbar__phones{display:flex;align-items:center;gap:16px}
.zh-topbar__phone{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700}
.zh-topbar__phone:hover{color:var(--z-brand-light)}

@media (max-width:767px){
  .zh-topbar__text{display:none}
  .zh-topbar__inner{justify-content:center}
}

/* ---------- Buttons: re-point Bagisto's palette at the brand ---------- */
.primary-button,
.secondary-button{
  background:var(--z-brand) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:500 !important;
  box-shadow:0 6px 16px rgba(255,76,108,.28);
  transition:transform .15s var(--z-ease),background .2s var(--z-ease) !important;
}
.primary-button:hover,
.secondary-button:hover{
  background:var(--z-brand-dark) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.primary-button:disabled,
.secondary-button:disabled{background:#d8d8e0 !important;box-shadow:none;cursor:not-allowed}

/* Inputs and focus rings pick up the brand colour. */
input:focus,select:focus,textarea:focus{
  border-color:var(--z-brand) !important;
  box-shadow:0 0 0 3px rgba(255,76,108,.12) !important;
  outline:none !important;
}

/* ---------- Header ---------- */
header .sticky,
header.sticky{box-shadow:var(--z-shadow-sm)}

/**
 * The channel logo is a 500×500 PNG, but Bagisto ships it with `width="131"
 * height="29"` attributes. The blanket `img{height:auto}` above outranks the
 * height attribute, so the browser fell back to the intrinsic ratio and drew it
 * 131×131 — which stretched the header to 132px and, on mobile, dropped the
 * logo straight through the search field below it.
 *
 * Height is pinned and the width left to follow, so the square canvas keeps its
 * ratio instead of being squashed into 131×29. Matched on the width/height
 * attribute pair, which the logo carries and the mini-cart thumbnails (the only
 * other `header a > img`) do not.
 */
header a > img[width][height]{
  height:44px;
  width:auto;
  max-width:160px;
  object-fit:contain;
}

@media (max-width:1023px){
  header a > img[width][height]{height:38px}
}

/* The search field becomes the pill from the WordPress header. */
input[type="search"],
.search-container input[type="text"]{
  border-radius:999px !important;
  background:var(--z-bg-soft) !important;
  border:1px solid var(--z-line) !important;
}

/* ---------- Section headings ---------- */
main h1,main h2,main h3,main h4{line-height:1.35;font-weight:700}

/**
 * The parent theme centres its section titles under a serif display font. Zhwan
 * uses the WordPress theme's right-aligned title with the brand rule beside it.
 */
main .text-center > h2,
main h2.text-3xl{
  position:relative;
  padding-inline-start:14px;
  text-align:start;
  font-size:22px !important;
}
main .text-center > h2::before,
main h2.text-3xl::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:22px;
  background:var(--z-brand);
  border-radius:4px;
}

/* ---------- Product cards ---------- */
.product-card,
[class*="product-card"]{
  background:#fff;
  border:1px solid var(--z-line);
  border-radius:var(--z-radius);
  transition:box-shadow .2s var(--z-ease),transform .2s var(--z-ease),border-color .2s var(--z-ease);
}
.product-card:hover,
[class*="product-card"]:hover{
  box-shadow:var(--z-shadow);
  transform:translateY(-4px);
  border-color:transparent;
}

/* Product images sit on the soft grey the WordPress cards used. */
.product-card img,
[class*="product-card"] img{
  border-radius:var(--z-radius-sm);
  background:var(--z-bg-soft);
  aspect-ratio:1;
  object-fit:cover;
}

/* Two-line clamp on product titles keeps every card the same height. */
.product-card a[href] > p,
.product-card .text-sm{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.7;
}

/* Sale badge */
.sale-badge,
span[class*="onsale"]{
  background:var(--z-brand) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-size:12px;
  font-weight:700;
  padding:5px 10px;
  line-height:1;
}

/* ---------- Prices ---------- */
.price,[class*="price"]{color:var(--z-ink)}
del,[class*="line-through"]{color:var(--z-ink-soft);font-weight:400;opacity:.8}
ins,.special-price{text-decoration:none;color:var(--z-brand)}

/* ---------- Cards, panels, tables ---------- */
.card,
[class*="rounded"].border{border-color:var(--z-line)}

table th{background:var(--z-bg-soft);color:var(--z-ink);font-weight:700}
table td,table th{border-color:var(--z-line)}

/**
 * Product descriptions and the imported `features` lists arrive as real HTML
 * (ul/li/strong), but Tailwind's preflight flattens them, so article typography
 * is reapplied inside those blocks.
 */
.zh-prose ul,
[id*="description"] ul,
[class*="description"] ul{list-style:disc;padding-inline-start:1.4em;margin:0 0 1em}
.zh-prose ol,
[id*="description"] ol,
[class*="description"] ol{list-style:decimal;padding-inline-start:1.4em;margin:0 0 1em}
.zh-prose li,
[id*="description"] li,
[class*="description"] li{margin-bottom:.35em}
.zh-prose p,
[id*="description"] p,
[class*="description"] p{margin:0 0 1em;line-height:1.9}
.zh-prose strong,
[id*="description"] strong,
[class*="description"] strong{font-weight:700;color:var(--z-ink)}
.zh-prose h2,[id*="description"] h2{font-size:19px;margin:1.4em 0 .5em}
.zh-prose h3,[id*="description"] h3{font-size:17px;margin:1.2em 0 .5em}

/* ---------- Category tiles ---------- */
.category-card,
[class*="category-card"]{
  background:#fff;
  border:1px solid var(--z-line);
  border-radius:var(--z-radius);
  transition:box-shadow .2s var(--z-ease),transform .2s var(--z-ease);
}
.category-card:hover,
[class*="category-card"]:hover{box-shadow:var(--z-shadow);transform:translateY(-4px)}

/* Round category thumbnails on the brand tint, as in the WordPress theme. */
.category-card img,
[class*="category-card"] img{
  border-radius:50%;
  background:var(--z-brand-light);
  aspect-ratio:1;
  object-fit:cover;
}

/* ---------- Filter sidebar ---------- */
aside,
[class*="filter"]{font-size:13.5px}
aside .border-b,
[class*="filter"] .border-b{border-color:var(--z-line)}

/**
 * Product grid on tablets.
 *
 * Bagisto drops its listing to two columns below 1060px because it assumes the
 * filter sidebar is still taking a third of the row. `patchCategoryBreakpoint()`
 * in zhwan.js moves that sidebar into the drawer at 1024 instead of 768, so from
 * 768 up the grid now has the full width — and two 350px cards left it looking
 * half-empty. The column count is put back to three for that band only.
 */
@media (min-width:768px) and (max-width:1023px){
  .grid.grid-cols-3.max-1060\:grid-cols-2{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/**
 * ---------- Footer ----------
 * Scoped to `.zh-footer`. A bare `footer { background: … !important }` also hit
 * the `<footer>` inside each testimonial card, painting the reviewer's name on a
 * dark block. The site footer's own styling lives further down this file.
 */

/* ---------- Pagination ---------- */
[class*="pagination"] a:hover,
[class*="pagination"] [aria-current="page"]{
  background:var(--z-brand) !important;
  color:#fff !important;
  border-color:var(--z-brand) !important;
}

/* ---------- Skip link ---------- */
.skip-to-main-content-link{
  position:absolute;
  right:-9999px;
  top:8px;
  z-index:1000;
  background:var(--z-brand);
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
}
.skip-to-main-content-link:focus{right:12px}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--z-bg-soft)}
::-webkit-scrollbar-thumb{background:#d3d3dd;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--z-brand)}

/* ==========================================================================
   Blog — archive, article and pagination
   ========================================================================== */
/**
 * `.zh-blog` shares an element with `.zh-container` on both blog views, so the
 * four-value `padding` shorthand this used to carry also reset the container's
 * `padding-inline`. Every viewport under 1240px lost its gutters: the breadcrumb
 * and the section title's accent bar were cut off at the start edge and the post
 * cards ran under both edges of the screen. Only the block axis is set here.
 */
.zh-blog{padding-block:24px 56px}

.zh-breadcrumb{font-size:13px;color:var(--z-ink-soft);padding:14px 0}
.zh-breadcrumb a:hover{color:var(--z-brand)}
.zh-breadcrumb .zh-sep{margin:0 6px;opacity:.5}

.zh-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.zh-section-title{
  font-size:22px;margin:0;position:relative;padding-inline-start:14px;font-weight:700;
}
.zh-section-title::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:5px;height:22px;background:var(--z-brand);border-radius:4px;
}
.zh-count-badge{
  background:var(--z-brand-light);color:var(--z-brand);
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap;
}

/* Category chips */
.zh-blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.zh-blog-cat{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1px solid var(--z-line);border-radius:999px;background:#fff;
  font-size:13.5px;font-weight:500;transition:all .2s var(--z-ease);
}
.zh-blog-cat:hover{border-color:var(--z-brand);color:var(--z-brand)}
.zh-blog-cat.is-active{background:var(--z-brand);border-color:var(--z-brand);color:#fff}
.zh-blog-cat__count{
  background:var(--z-bg-soft);color:var(--z-ink-soft);
  font-size:11.5px;padding:1px 7px;border-radius:999px;
}
.zh-blog-cat.is-active .zh-blog-cat__count{background:rgba(255,255,255,.24);color:#fff}

/**
 * Post grid.
 *
 * The column count is a custom property rather than a literal so the page-builder
 * blog widget can ask for a different one without an inline
 * `grid-template-columns`, which would outrank every media query below — a
 * four-column widget was still four columns on a phone, at 65px each.
 * `min()` lets the breakpoints cap whatever the widget asked for.
 */
.zh-blog-grid{display:grid;grid-template-columns:repeat(var(--zh-cols,3),1fr);gap:24px}
@media (max-width:1023px){.zh-blog-grid{grid-template-columns:repeat(min(var(--zh-cols,3),2),1fr)}}
@media (max-width:639px){.zh-blog-grid{grid-template-columns:1fr}}

.zh-post-card{
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--z-line);border-radius:var(--z-radius);
  transition:box-shadow .2s var(--z-ease),transform .2s var(--z-ease),border-color .2s var(--z-ease);
}
.zh-post-card:hover{box-shadow:var(--z-shadow);transform:translateY(-4px);border-color:transparent}
.zh-post-thumb{display:block;aspect-ratio:16/10;background:var(--z-bg-soft)}
.zh-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--z-ease)}
.zh-post-card:hover .zh-post-thumb img{transform:scale(1.04)}
.zh-post-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.zh-post-cat{
  align-self:flex-start;background:var(--z-brand-light);color:var(--z-brand);
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
}
.zh-post-title{
  font-size:15px;font-weight:700;line-height:1.7;color:var(--z-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zh-post-title:hover{color:var(--z-brand)}
.zh-post-excerpt{
  margin:0;font-size:13px;color:var(--z-ink-soft);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.zh-post-meta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:6px;
  font-size:12px;color:var(--z-ink-soft);
}

/* Single article */
.zh-post{max-width:860px;margin-inline:auto}
.zh-post__hero{
  width:100%;border-radius:var(--z-radius);margin-bottom:24px;
  aspect-ratio:16/9;object-fit:cover;background:var(--z-bg-soft);
}
.zh-post__title{font-size:28px;line-height:1.5;margin:0 0 12px}
@media (max-width:639px){.zh-post__title{font-size:22px}}
.zh-post__meta{
  display:flex;flex-wrap:wrap;gap:14px;padding-bottom:18px;margin-bottom:24px;
  border-bottom:1px solid var(--z-line);font-size:13px;color:var(--z-ink-soft);
}
.zh-post__meta a{color:var(--z-brand);font-weight:500}
.zh-post__entry img{border-radius:var(--z-radius-sm);margin:18px auto}
.zh-post__entry h2,.zh-post__entry h3{scroll-margin-top:calc(var(--z-header-h) + 16px)}

.zh-related{margin-top:56px}

/* Pagination */
.zh-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:36px}
.zh-pagination a,.zh-pagination span{
  min-width:40px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--z-line);border-radius:10px;background:#fff;
  font-size:13.5px;font-weight:500;transition:all .2s var(--z-ease);
}
.zh-pagination a:hover{background:var(--z-brand);border-color:var(--z-brand);color:#fff}
.zh-pagination .is-current{background:var(--z-brand);border-color:var(--z-brand);color:#fff}
.zh-pagination .is-disabled{opacity:.4}

.zh-empty{padding:40px 0;text-align:center;color:var(--z-ink-soft)}

/* ==========================================================================
   Home page — hero, section rails, testimonials, journal
   ========================================================================== */
.zh-home-section{padding:44px 0}
.zh-home-section--alt{background:var(--z-bg-soft)}
.zh-section-more{color:var(--z-brand);font-size:13.5px;font-weight:500;white-space:nowrap}

/* ---------- Hero: one large slider + two stacked banners ---------- */
.zh-hero{padding:22px 0 8px}
.zh-hero__grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
.zh-hero__side{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:0}

.zh-hero__main{
  position:relative;border-radius:var(--z-radius);overflow:hidden;
  aspect-ratio:1004 / 475;
}
.zh-hero__track{display:flex;height:100%;transition:transform .5s var(--z-ease)}
.zh-hero__track > .zh-hero__slide{flex:0 0 100%;height:100%;display:block}
.zh-hero__slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--z-ease)}
.zh-hero__main:hover .zh-hero__slide img{transform:scale(1.03)}

.zh-hero__banner{
  position:relative;display:block;border-radius:var(--z-radius);overflow:hidden;
  box-shadow:var(--z-shadow-sm);min-height:0;
}
.zh-hero__banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--z-ease)}
.zh-hero__banner:hover img{transform:scale(1.03)}

.zh-hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.85);color:var(--z-ink);
  display:grid;place-items:center;box-shadow:var(--z-shadow-sm);
  opacity:0;transition:opacity .2s var(--z-ease),background .2s var(--z-ease),color .2s var(--z-ease);
}
.zh-hero__main:hover .zh-hero__nav{opacity:1}
.zh-hero__nav:hover{background:var(--z-brand);color:#fff}
.zh-hero__nav--prev{inset-inline-end:12px}
.zh-hero__nav--next{inset-inline-start:12px}

.zh-hero__dots{position:absolute;bottom:12px;inset-inline:0;display:flex;gap:7px;justify-content:center;z-index:3}
.zh-hero__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.6);transition:background .2s var(--z-ease),width .2s var(--z-ease);
}
.zh-hero__dots button.is-active{background:var(--z-brand);width:22px;border-radius:5px}

@media (max-width:900px){
  .zh-hero__grid{grid-template-columns:1fr}
  .zh-hero__side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .zh-hero__banner{aspect-ratio:512 / 337}
}

/* ---------- Horizontal rail with arrows ---------- */
.zh-rail{position:relative;display:flex;align-items:center;gap:6px}
.zh-rail__viewport{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.zh-rail__viewport::-webkit-scrollbar{display:none}
.zh-rail__items{display:flex;gap:16px;width:max-content;padding:4px 0}
.zh-rail__nav{
  flex:0 0 auto;width:40px;height:40px;border:1px solid var(--z-line);border-radius:50%;
  background:#fff;color:var(--z-ink);display:grid;place-items:center;
  box-shadow:var(--z-shadow-sm);transition:background .2s var(--z-ease),color .2s var(--z-ease);
}
.zh-rail__nav:hover{background:var(--z-brand);color:#fff;border-color:var(--z-brand)}
.zh-rail__nav:disabled{opacity:.35;background:#fff;color:var(--z-ink);cursor:default}

/* ---------- Testimonials ---------- */
.zh-testimonial{
  flex:0 0 clamp(260px,26vw,320px);width:clamp(260px,26vw,320px);
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--z-line);border-radius:var(--z-radius);padding:20px;
}
.zh-testimonial__stars{display:flex;gap:2px;color:var(--z-warning)}
.zh-testimonial__text{margin:0;font-size:13.5px;line-height:1.9;color:var(--z-ink-soft)}
.zh-testimonial__by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.zh-testimonial__avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;
  background:var(--z-brand-light);color:var(--z-brand);
}
.zh-testimonial__name{display:block;font-size:13.5px;font-weight:700;color:var(--z-ink)}
.zh-testimonial__meta{display:block;font-size:12px;color:var(--z-ink-soft)}

/* ---------- Journal grid ---------- */
.zh-blog-grid--four{--zh-cols:4}

/* ==========================================================================
   Product cards — actions visible without hover
   ========================================================================== */
/**
 * The parent theme keeps a product tile's controls in `.action-items`, held at
 * `opacity-0` and revealed by `group-hover`, while the tile body is pulled up by
 * `-mt-9` and pushed back down by `translate-y-9` so it slides on hover. Both
 * halves of that trick are undone here: the tile permanently sits in its hover
 * position with the actions on show, which is also the only way they are
 * reachable on touch.
 */
.action-items{
  opacity:1 !important;
  visibility:visible !important;
}

/**
 * `-mt-9` pulls the tile body up and `translate-y-9` pushes it back; hover drops
 * the transform so the body slides up over the image. Dropping only the transform
 * left the body 36px high, and the tile's `overflow-hidden` then ate the first
 * line of the product name — so the margin is zeroed as well and the body simply
 * sits where it belongs.
 */
div:has(> .action-items){
  transform:none !important;
  margin-top:0 !important;
}

/**
 * The wishlist/compare overlay is a second, nested `opacity-0` layer inside
 * `.action-items`, so unhiding the wrapper alone still left it invisible.
 */
.action-items [class*="opacity-0"],
div:has(> .action-items) [class*="opacity-0"]{
  opacity:1 !important;
}

/* The primary action spans the tile, as it did on the WordPress cards. */
.action-items .secondary-button,
.action-items .primary-button{
  width:100%;
  background:var(--z-brand) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
}
.action-items .secondary-button:hover,
.action-items .primary-button:hover{background:var(--z-brand-dark) !important}

/* ==========================================================================
   Breadcrumbs — start (right) aligned in RTL
   ========================================================================== */
.zh-breadcrumb,
nav[aria-label="Breadcrumb"],
[class*="breadcrumb"]{
  justify-content:flex-start !important;
  text-align:start !important;
}
[class*="breadcrumb"] ol,
[class*="breadcrumb"] ul{
  justify-content:flex-start !important;
  margin-inline-start:0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.zh-footer{background:var(--z-ink);color:#fff;margin-top:56px}
.zh-footer__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;
  padding-block:48px;
}
@media (max-width:1023px){.zh-footer__top{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:639px){.zh-footer__top{grid-template-columns:1fr;gap:28px;padding-block:32px}}

.zh-footer__title{
  font-size:15px;font-weight:700;color:#fff;margin:0 0 16px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14);
}
.zh-footer__logo img{max-height:52px;width:auto;background:#fff;border-radius:10px;padding:6px}
.zh-footer__text{margin:14px 0 16px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.72)}

.zh-footer__social{display:flex;gap:10px}
.zh-footer__social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:all .2s var(--z-ease);
}
.zh-footer__social a:hover{background:var(--z-brand);color:#fff}

.zh-footer__links,.zh-footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.zh-footer__links a,.zh-footer__contact a{font-size:13.5px;color:rgba(255,255,255,.78)}
.zh-footer__links a:hover,.zh-footer__contact a:hover{color:var(--z-brand-light)}
.zh-footer__contact li{font-size:13px;color:rgba(255,255,255,.6);display:flex;gap:6px;flex-wrap:wrap}
.zh-footer__contact span{color:rgba(255,255,255,.55)}

.zh-footer__enamad{display:inline-block;margin-top:18px;background:#fff;border-radius:10px;padding:8px}
.zh-footer__enamad img{display:block;height:auto}

.zh-footer__bar{border-top:1px solid rgba(255,255,255,.12)}
.zh-footer__bar-inner{padding-block:16px}
.zh-footer__bar p{margin:0;font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.6);text-align:center}
.zh-footer__bar strong{color:#fff}

/* Back-to-top */
.zh-to-top{
  position:fixed;inset-inline-start:18px;bottom:18px;z-index:90;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--z-brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(255,76,108,.35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--z-ease),transform .2s var(--z-ease),visibility .2s;
}
.zh-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.zh-to-top:hover{background:var(--z-brand-dark)}

/* ==========================================================================
   Primary navigation
   One "دسته‌بندی‌ها" mega trigger plus flat links, replacing Bagisto's inline
   list of every top-level category — those long Persian names wrapped onto two
   lines and made the bar ragged.
   ========================================================================== */

/**
 * Bagisto's own category bar is superseded by `.zh-nav`.
 *
 * The `<v-desktop-category>` element cannot be targeted — Vue replaces it with
 * its rendered output on mount — so the wrapper is matched by the shape of what
 * it renders: a row of `.group.relative.h-[77px]` items. `.zh-nav` lives in a
 * different wrapper, so it is not caught by this.
 */
div:has(> div.group.relative.h-\[77px\]){display:none !important}

.zh-nav{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}

.zh-nav__link,
.zh-nav__trigger{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:500;
  color:var(--z-ink);padding:9px 12px;border-radius:10px;white-space:nowrap;
  transition:background .2s var(--z-ease),color .2s var(--z-ease);
}
.zh-nav__link:hover,
.zh-nav__trigger:hover{background:var(--z-bg-soft);color:var(--z-brand)}

/* The categories trigger is the anchor of the bar, so it carries the brand. */
.zh-nav__trigger--primary{
  background:var(--z-brand);color:#fff;font-weight:700;padding-inline:16px;
}
.zh-nav__trigger--primary:hover{background:var(--z-brand-dark);color:#fff}

.zh-nav__chevron{transition:transform .25s var(--z-ease)}
.zh-nav__item--mega:hover .zh-nav__chevron{transform:rotate(180deg)}

.zh-nav__item{position:relative}

.zh-nav__panel{
  position:absolute;top:100%;inset-inline-start:0;transform:translateY(10px);
  z-index:80;margin-top:10px;width:min(760px,92vw);max-width:92vw;
  background:#fff;border:1px solid var(--z-line);border-radius:var(--z-radius);
  box-shadow:var(--z-shadow);padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .2s var(--z-ease),transform .2s var(--z-ease),visibility .2s;
}
.zh-nav__panel--wide{width:min(1080px,94vw)}

.zh-nav__item--mega:hover .zh-nav__panel,
.zh-nav__item--mega:focus-within .zh-nav__panel{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* ---------- Categories mega ---------- */
.zh-mega{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 28px}
@media (max-width:1200px){.zh-mega{grid-template-columns:repeat(3,1fr)}}

.zh-mega__col{display:flex;flex-direction:column;gap:8px;min-width:0}

.zh-mega__head{
  display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;
  color:var(--z-ink);padding-bottom:9px;border-bottom:1px solid var(--z-line);
}
.zh-mega__head:hover{color:var(--z-brand)}

.zh-mega__icon{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  border-radius:10px;background:var(--z-brand-light);color:var(--z-brand);
}

.zh-mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.zh-mega__list a{font-size:13px;color:var(--z-ink-soft);display:block;padding:2px 0}
.zh-mega__list a:hover{color:var(--z-brand);padding-inline-start:3px}

.zh-mega__all{margin-top:auto;color:var(--z-brand);font-weight:500;font-size:12.5px}

/* ---------- Brands mega ---------- */
.zh-brands-menu__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px 14px;
  max-height:min(60vh,420px);overflow-y:auto;
}
@media (max-width:900px){.zh-brands-menu__grid{grid-template-columns:repeat(2,1fr)}}

.zh-brands-menu__item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:13px;color:var(--z-ink-soft);
}
.zh-brands-menu__item:hover{background:var(--z-brand-light);color:var(--z-brand)}
.zh-brands-menu__count{
  font-size:11.5px;background:var(--z-bg-soft);color:var(--z-ink-soft);
  border-radius:999px;padding:1px 7px;flex:0 0 auto;
}
.zh-brands-menu__item:hover .zh-brands-menu__count{background:#fff}

@media (max-width:1100px){
  .zh-nav__link{display:none}
  .zh-nav{gap:2px}
}

/* ---------- Mobile drawer navigation ----------
   Injected after Bagisto's category list in the mobile drawer. Matches the
   drawer's own 16px gutter and row rhythm rather than the desktop bar's. */
.zh-mnav{display:flex;flex-direction:column;border-top:1px solid var(--z-line);padding:6px 0}
.zh-mnav__link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;font-size:15px;font-weight:500;color:var(--z-ink);
}
.zh-mnav__link:active{background:var(--z-bg-soft)}

.zh-mnav__summary{cursor:pointer;list-style:none}
.zh-mnav__summary::-webkit-details-marker{display:none}
.zh-mnav__chevron{transition:transform .2s var(--z-ease);flex:0 0 auto}
.zh-mnav__group[open] > .zh-mnav__summary .zh-mnav__chevron{transform:rotate(180deg)}

.zh-mnav__sub{
  list-style:none;margin:0;padding:0 0 6px;
  max-height:min(46vh,320px);overflow-y:auto;background:var(--z-bg-soft);
}
.zh-mnav__sub a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 28px 11px 16px;font-size:13.5px;color:var(--z-ink-soft);
}
.zh-mnav__sub a:active{color:var(--z-brand)}
.zh-mnav__count{
  font-size:11.5px;background:#fff;color:var(--z-ink-soft);
  border-radius:999px;padding:1px 8px;flex:0 0 auto;
}

/* ==========================================================================
   AJAX search suggestions
   ========================================================================== */
.zh-suggest{
  position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:120;
  background:#fff;border:1px solid var(--z-line);border-radius:var(--z-radius);
  box-shadow:var(--z-shadow);padding:8px;
  max-height:min(70vh,440px);overflow-y:auto;
}
.zh-suggest__item{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;
  transition:background .15s var(--z-ease);
}
.zh-suggest__item:hover{background:var(--z-bg-soft)}
.zh-suggest__thumb{
  width:48px;height:48px;flex:0 0 48px;border-radius:8px;overflow:hidden;
  background:var(--z-bg-soft);display:grid;place-items:center;
}
.zh-suggest__thumb img{width:100%;height:100%;object-fit:cover}
.zh-suggest__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.zh-suggest__name{
  font-size:13px;line-height:1.6;color:var(--z-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zh-suggest__price{font-size:12.5px;font-weight:700;color:var(--z-brand)}
.zh-suggest__all{
  display:block;margin-top:6px;padding:10px;text-align:center;
  border-top:1px solid var(--z-line);
  font-size:13px;font-weight:500;color:var(--z-brand);
}
.zh-suggest__all:hover{background:var(--z-brand-light)}
.zh-suggest__empty{margin:0;padding:16px;text-align:center;font-size:13px;color:var(--z-ink-soft)}

/* ==========================================================================
   Product page — brand line and specification table
   ========================================================================== */
.zh-product-brand{margin:0 0 10px;font-size:13.5px;color:var(--z-ink-soft)}
.zh-product-brand a{color:var(--z-brand);font-weight:700}

.zh-specs{margin-top:34px}
.zh-specs__title{
  font-size:20px;margin:0 0 16px;position:relative;padding-inline-start:14px;font-weight:700;
}
.zh-specs__title::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:5px;height:20px;background:var(--z-brand);border-radius:4px;
}
.zh-specs__wrap{overflow-x:auto;border:1px solid var(--z-line);border-radius:var(--z-radius)}
.zh-specs__table{width:100%;border-collapse:collapse;font-size:13.5px}
.zh-specs__table th,
.zh-specs__table td{padding:12px 16px;text-align:start;border-bottom:1px solid var(--z-line)}
.zh-specs__table tr:last-child th,
.zh-specs__table tr:last-child td{border-bottom:0}
.zh-specs__table th{
  width:190px;background:var(--z-bg-soft);color:var(--z-ink-soft);font-weight:500;
}
.zh-specs__table td{color:var(--z-ink);font-weight:500}
.zh-specs__table td a{color:var(--z-brand)}

/**
 * Product tiles tag the name with Tailwind's `break-all`, which breaks Persian
 * words mid-character and leaves names such as "م ۱۴۴۰ میل" on the card. Names
 * wrap on word boundaries instead, clamped to two lines so tiles stay level.
 */
div:has(.action-items) p.break-all,
div:has(> .action-items) p.break-all{
  word-break:normal !important;
  overflow-wrap:anywhere;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.7;
  min-height:3.4em;
}

/**
 * With wishlist and compare switched off, the tile keeps a second, now-empty
 * `.action-items` row that would still take up space.
 */
.action-items:not(:has(*)){
  display:none !important;
}

/* ==========================================================================
   Availability
   ========================================================================== */
.zh-availability{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:0 0 14px;font-size:13.5px;font-weight:500;
}
.zh-availability__dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.zh-availability.is-in-stock{color:var(--z-success)}
.zh-availability.is-in-stock .zh-availability__dot{background:var(--z-success)}
.zh-availability.is-out-of-stock{color:var(--z-danger)}
.zh-availability.is-out-of-stock .zh-availability__dot{background:var(--z-danger)}
.zh-availability__low{
  font-size:12px;font-weight:700;color:var(--z-warning);
  background:#fff6e0;border-radius:999px;padding:2px 9px;
}

/* Sold-out button on listing cards. */
.action-items button.zh-sold-out,
.action-items button[disabled]{
  background:var(--z-bg-soft) !important;
  color:var(--z-ink-soft) !important;
  box-shadow:none !important;
  cursor:not-allowed;
}
.action-items button.zh-sold-out:hover{
  background:var(--z-bg-soft) !important;
  transform:none !important;
}

/* Products with no price in the imported data. */
.zh-unpriced{color:var(--z-ink-soft) !important;font-weight:500 !important;font-size:14px}

/* ==========================================================================
   Page-builder shop widgets — matched to the theme
   The widgets ship neutral `bw-*` markup so they work in any theme; these rules
   give them the same look as the hand-built home page sections.
   ========================================================================== */
.bw-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:18px;
}
@media (max-width:1200px){.bw-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){.bw-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:479px){.bw-grid{grid-template-columns:repeat(2,1fr)}}

/**
 * On phones the category tiles become a single scrolling row instead of a grid.
 * Stacked two-up they pushed the first product carousel a full screen down; as a
 * rail the whole set is reachable with a thumb swipe, and a partly visible tile
 * at the end signals there is more.
 *
 * Same treatment for the journal on the home page — scoped to `.zh-home-section`
 * so the blog archive at /blog keeps its vertical grid, where a rail would hide
 * most of the posts the page exists to list.
 *
 * Both follow `.bw-carousel`, the product rail already on this page, so the home
 * page reads as one pattern rather than three.
 */
@media (max-width:767px){
  .bw-grid:has(.bw-cat),
  .zh-home-section .zh-blog-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }

  .bw-grid:has(.bw-cat){gap:12px}
  .bw-grid > .bw-cat{flex:0 0 132px;scroll-snap-align:start}

  .zh-home-section .zh-blog-grid{gap:16px}
  .zh-home-section .zh-blog-grid > .zh-post-card{flex:0 0 240px;scroll-snap-align:start}
}

.bw-cat{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:18px 10px;background:#fff;border:1px solid var(--z-line);
  border-radius:var(--z-radius);
  transition:box-shadow .2s var(--z-ease),transform .2s var(--z-ease),border-color .2s var(--z-ease);
}
.bw-cat:hover{box-shadow:var(--z-shadow);transform:translateY(-4px);border-color:transparent}

.bw-cat__img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  background:var(--z-brand-light);
}

/* Icon tiles: brand-tinted circle, filling with brand colour on hover. */
.bw-cat__icon{
  width:68px;height:68px;flex:0 0 68px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--z-brand-light);color:var(--z-brand);
  transition:background .2s var(--z-ease),color .2s var(--z-ease);
}
.bw-cat:hover .bw-cat__icon{background:var(--z-brand);color:#fff}
.bw-cat__name{font-size:14px;font-weight:500;color:var(--z-ink);line-height:1.6}
.bw-cat__count{font-size:12px;color:var(--z-ink-soft)}

/* Product carousel widget cards. */
.bw-carousel .bw-card,
.bw-grid .bw-card{
  background:#fff;border:1px solid var(--z-line);border-radius:var(--z-radius);
  transition:box-shadow .2s var(--z-ease),transform .2s var(--z-ease);
}
.bw-carousel .bw-card:hover,
.bw-grid .bw-card:hover{box-shadow:var(--z-shadow);transform:translateY(-4px)}

.bw-add-to-cart,
.bw-cart-btn{
  background:var(--z-brand) !important;color:#fff !important;
  border:0 !important;border-radius:999px !important;font-weight:500;
}
.bw-add-to-cart:hover,
.bw-cart-btn:hover{background:var(--z-brand-dark) !important}

.bw-empty{
  padding:28px;text-align:center;color:var(--z-ink-soft);
  border:1px dashed var(--z-line);border-radius:var(--z-radius);
}

/* ==========================================================================
   Free-shipping nudge in the mini-cart
   ========================================================================== */
.zh-freeship{
  margin-top:10px;padding:12px 14px;border-radius:12px;
  background:var(--z-brand-light);
}
.zh-freeship__text{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:13px;color:var(--z-ink);
}
.zh-freeship__amount{font-weight:700;color:var(--z-brand)}
.zh-freeship__text.is-reached{color:var(--z-success);font-weight:700}

.zh-freeship__bar{
  margin-top:9px;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.75);
}
.zh-freeship__bar > span{
  display:block;height:100%;border-radius:999px;
  background:var(--z-brand);transition:width .35s var(--z-ease);
}