/* ==========================================================================
   NOVARA — storefront design system
   Mobile-first, logical-properties based (works correctly under dir="rtl").
   ========================================================================== */

/* Self-hosted Vazirmatn (OFL-licensed, see wwwroot/fonts/vazirmatn/OFL.txt) -
   --font-base below already named this font as the first choice, but until
   now no real font file backed it, so every page silently fell back to
   Tahoma/system sans-serif. Single variable-weight woff2 covers 100-900. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn[wght].woff2") format("woff2 supports variations"),
       url("../fonts/vazirmatn/Vazirmatn[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #171717;
  --ink-soft: #3a3936;
  --paper: #f7f5f1;
  --surface: #ffffff;
  --muted: #767066;
  --border: #e6e1d8;
  --border-strong: #d3ccbf;
  --accent: #b0492e;
  --accent-dark: #8f3a24;
  --accent-tint: #f3e3dc;
  --success: #3f6b4f;
  --success-tint: #e5efe8;
  --danger: #b23a3a;

  --font-base: "Vazirmatn", "IRANSans", Tahoma, "Segoe UI", Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.08);
  --shadow-md: 0 8px 24px rgba(23, 23, 23, 0.10);
  --shadow-lg: 0 20px 48px rgba(23, 23, 23, 0.16);

  --container-w: 1240px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 15.5px;
  /* The off-canvas mobile nav (.mobile-nav) is deliberately translated past the viewport
     edge to hide it; without this, that transformed box still counts toward the page's
     scrollable area and lets visitors scroll/see a horizontal gap on narrow screens. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.muted { color: var(--muted); }

.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 999; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 0; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Announcement bar ---------- */
.announce-bar {
  background: var(--ink);
  color: #f2ede4;
  text-align: center;
  font-size: .8rem;
  padding: .5rem 1rem;
  letter-spacing: .02em;
}
.announce-bar p { margin: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-row {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-inline-end: auto;
}
@media (min-width: 900px) {
  .brand { margin-inline-end: 1.5rem; }
}

.main-nav { display: none; }
@media (min-width: 900px) {
  .main-nav { display: block; margin-inline-end: auto; }
  .main-nav ul { display: flex; gap: 1.75rem; }
  .main-nav a { font-weight: 600; font-size: .95rem; position: relative; padding: .35rem 0; }
  .main-nav a:hover { color: var(--accent); }
}

.header-actions { display: flex; align-items: center; gap: .35rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: transparent; border: none; cursor: pointer; color: var(--ink);
  position: relative;
}
.icon-btn:hover { background: var(--border); }

.nav-toggle { display: inline-flex; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.search-form {
  display: none;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding-inline-start: .9rem;
  overflow: hidden;
}
@media (min-width: 700px) { .search-form { display: flex; } }
.search-form input {
  border: none; background: transparent; outline: none; font-family: inherit;
  width: 160px; font-size: .88rem; padding-block: .5rem;
}
@media (min-width: 1100px) { .search-form input { width: 220px; } }
.search-form button { border-radius: var(--radius-pill); }

.cart-toggle .cart-count {
  position: absolute; top: 2px; inset-inline-end: 2px;
  background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; padding-inline: 3px;
}

.account-menu { display: flex; align-items: center; gap: .25rem; }
.admin-link {
  font-size: .8rem; font-weight: 700; background: var(--ink); color: #fff;
  padding: .4rem .8rem; border-radius: var(--radius-pill);
}
.logout-form { display: inline-flex; }
.link-btn {
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: .85rem;
  padding: .4rem .5rem; font-family: inherit;
}
.link-btn:hover { color: var(--accent); }

/* The admin badge + logout text take up too much width next to the search/cart icons on
   narrow headers, so below 900px they live in the off-canvas menu (.mobile-account-links)
   instead of the sticky header. */
.desktop-only { display: none; }
@media (min-width: 900px) {
  .desktop-only { display: inline-flex; }
}

.mobile-account-links {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.mobile-account-links a, .mobile-account-links .link-btn {
  display: block; padding: .8rem .25rem; font-weight: 600; text-align: start;
  border-bottom: 1px solid var(--border); font-size: .95rem; width: 100%;
}
.mobile-account-links form { display: contents; }

/* ---------- Mobile off-canvas nav ---------- */
.mobile-nav {
  /* inset-inline-start:0 anchors this to the right edge under dir="rtl" (the only mode this
     app uses). translateX(110%) always pushes further in the positive-x direction, i.e. off
     the right edge of the viewport from that anchor - correctly hidden regardless of anchor
     side, so no RTL-specific override is needed here (an earlier translateX(-110%) override
     did the opposite: for viewports wider than ~2x the panel, it left the panel on-screen). */
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px);
  background: var(--surface); z-index: 70; transform: translateX(110%);
  transition: transform .3s ease; box-shadow: var(--shadow-lg);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-inner { padding: 1.25rem; }
.mobile-nav .main-nav { display: block; margin-top: 1rem; }
.mobile-nav .main-nav ul { display: flex; flex-direction: column; gap: 0; }
.mobile-nav .main-nav a { display: block; padding: .9rem .25rem; border-bottom: 1px solid var(--border); font-weight: 600; }

.mobile-nav-backdrop {
  position: fixed; inset: 0; background: rgba(23,23,23,.45); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.mobile-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 900px) {
  .mobile-nav, .mobile-nav-backdrop { display: none; }
}

/* ---------- Flash messages ---------- */
.flash { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-md); font-size: .92rem; }
.flash-success { background: var(--success-tint); color: var(--success); border: 1px solid #cfe3d6; }
.flash-error { background: #f6e2e2; color: var(--danger); border: 1px solid #eecccc; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .92rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent-dark); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-block { width: 100%; }
.btn-sm { padding: .55rem 1.1rem; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .25rem .55rem; border-radius: var(--radius-sm); letter-spacing: .02em; }
.badge-sale { background: var(--accent); color: #fff; }
.badge-new { background: var(--ink); color: #fff; }
.badge-outline { border: 1px solid var(--border-strong); color: var(--muted); background: #fff; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-trail { padding-block: 1rem .5rem; }
.breadcrumb-trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--muted, #6b7280); }
.breadcrumb-trail li { display: flex; align-items: center; gap: .4rem; }
.breadcrumb-trail li:not(:last-child)::after { content: "/"; color: var(--muted, #9ca3af); }
.breadcrumb-trail a { color: inherit; text-decoration: none; }
.breadcrumb-trail a:hover { text-decoration: underline; }
.breadcrumb-trail span[aria-current="page"] { color: var(--ink, #111827); font-weight: 600; }

/* ---------- Section header ---------- */
.section { padding-block: 3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }
.section-head h2 { font-size: 1.5rem; }
.section-head .view-all { font-size: .85rem; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  margin: 1.25rem; background: linear-gradient(135deg, #23201d 0%, #3a2c22 55%, var(--accent-dark) 100%);
  color: #fdf9f2; min-height: 60vh; display: flex; align-items: center;
}
@media (min-width: 900px) { .hero { margin: 1.5rem auto; max-width: calc(var(--container-w) + 3rem); min-height: 68vh; } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.10), transparent 55%);
}
.hero-content { position: relative; z-index: 1; padding: 3rem 1.5rem; max-width: 620px; }
.hero-content .eyebrow { color: #e7c9b7; }
.hero-content h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-block: .4rem .9rem; }
.hero-content p { color: #e9e2d6; max-width: 460px; }
.hero-actions { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ---------- Category tiles ---------- */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
.category-tile {
  position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4;
  background: var(--surface); border: 1px solid var(--border);
}
.category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-tile:hover img { transform: scale(1.06); }
.category-tile .label {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: #fff; font-weight: 700; font-size: 1.05rem;
}

/* ---------- Product grid & card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1rem; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { position: relative; }
.product-card .thumb {
  position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4;
  background: var(--surface); border: 1px solid var(--border);
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.product-card:hover .thumb img.img-primary { opacity: 0; }
.product-card .thumb img.img-secondary { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .thumb img.img-secondary { opacity: 1; }
.product-card .badges { position: absolute; top: .6rem; inset-inline-start: .6rem; display: flex; flex-direction: column; gap: .3rem; z-index: 1; }
.product-card .quick-add {
  position: absolute; inset-inline: .6rem; bottom: .6rem; z-index: 1;
  opacity: 0; transform: translateY(6px); transition: all .2s ease;
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.product-card .info { padding-top: .7rem; }
.product-card .brand-name { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.product-card .name { font-weight: 600; font-size: .92rem; margin: .2rem 0 .35rem; }
.product-card .price-row { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.price { font-weight: 700; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: .82rem; font-weight: 500; }
.rating { display: flex; align-items: center; gap: .25rem; font-size: .76rem; color: var(--muted); margin-top: .2rem; }
.rating .stars { color: #d9a441; letter-spacing: 1px; }

/* ---------- Brand strip ---------- */
.brand-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; padding-block: 1rem; }
.brand-strip span { font-weight: 700; letter-spacing: .08em; color: var(--muted); font-size: 1.05rem; }

/* ---------- Promo split ---------- */
.promo-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .promo-split { grid-template-columns: 1fr 1fr; } }
.promo-card {
  border-radius: var(--radius-md); padding: 2.5rem; min-height: 260px;
  display: flex; flex-direction: column; justify-content: center; gap: .75rem;
}
.promo-card.dark { background: var(--ink); color: #fff; }
.promo-card.tint { background: var(--accent-tint); color: var(--ink); }

/* ---------- Newsletter (footer form) ---------- */
.newsletter-form { display: flex; gap: .5rem; margin-top: .5rem; }
.newsletter-form input {
  flex: 1; padding: .65rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  font-family: inherit; min-width: 0;
}

/* ---------- Footer ---------- */
.site-footer { background: #efe9df; border-top: 1px solid var(--border); margin-top: 4rem; padding-block: 3rem 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }
.footer-col h4 { font-size: .95rem; margin-bottom: .9rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a:hover { color: var(--accent); }
.footer-brand .brand { font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; margin-bottom: .6rem; }
.footer-bottom { border-top: 1px solid var(--border-strong); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .8rem; color: var(--muted); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .82rem; color: var(--muted); padding-block: 1.25rem; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin-inline: .4rem; }

/* ---------- Shop layout: filters + grid ---------- */
.shop-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 240px 1fr; } }

.filters { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 1.25rem; }
.filter-group { border-bottom: 1px solid var(--border); padding-block: 1rem; }
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }
.filter-group h5 { font-size: .85rem; margin-bottom: .7rem; }
.filter-option { display: flex; align-items: center; gap: .5rem; font-size: .87rem; padding-block: .3rem; cursor: pointer; }
.filter-option input { accent-color: var(--ink); }
.color-swatch-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; display: inline-block;
}
.color-swatch-btn.is-active { border-color: var(--accent); }
.swatch-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.size-btn {
  min-width: 40px; padding: .35rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .82rem; cursor: pointer;
}
.size-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.toolbar select {
  padding: .5rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-family: inherit; background: var(--surface);
}

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2.5rem; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .85rem;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Product detail ---------- */
.product-detail { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-block: 1.5rem 3rem; }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1fr 1fr; } }

.gallery-main { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--border); margin-bottom: .75rem; }
.gallery-thumbs { display: flex; gap: .6rem; }
.gallery-thumbs button { width: 76px; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); padding: 0; cursor: pointer; background: none; }
.gallery-thumbs button.is-active { border-color: var(--ink); }

.pd-brand { color: var(--muted); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.pd-title { font-size: 1.7rem; margin-block: .3rem .6rem; }
.pd-price { display: flex; align-items: center; gap: .7rem; font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.pd-desc { color: var(--ink-soft); margin-bottom: 1.5rem; }

.option-group { margin-bottom: 1.25rem; }
.option-group h5 { font-size: .85rem; margin-bottom: .6rem; display: flex; gap: .4rem; }
.option-group h5 .value { font-weight: 400; color: var(--muted); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.qty-stepper button { width: 38px; height: 38px; border: none; background: none; font-size: 1.1rem; cursor: pointer; }
.qty-stepper input { width: 42px; text-align: center; border: none; background: none; font-family: inherit; font-size: .95rem; }

.pd-actions { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pd-actions .btn { flex: 1; min-width: 180px; }

.trust-row { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.trust-row span { display: flex; align-items: center; gap: .4rem; }

.tabs { margin-top: 3rem; }
.tab-nav { display: flex; gap: 1.75rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-nav button { background: none; border: none; padding-block: .8rem; font-weight: 700; font-size: .92rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-nav button.is-active { color: var(--ink); border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.review-item { border-bottom: 1px solid var(--border); padding-block: 1.25rem; }
.review-item:first-child { padding-top: 0; }

/* ---------- Cart page ---------- */
.cart-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-block: 2rem 4rem; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 2fr 1fr; } }

.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--border); align-items: center; }
.cart-item img { width: 84px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.cart-item .name { font-weight: 600; margin-bottom: .2rem; }
.cart-item .meta { font-size: .82rem; color: var(--muted); }
.cart-item .remove-btn { color: var(--danger); font-size: .8rem; background: none; border: none; cursor: pointer; padding: 0; margin-top: .4rem; }
.cart-item .line-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; text-align: end; }

.summary-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.summary-row { display: flex; justify-content: space-between; font-size: .92rem; padding-block: .5rem; }
.summary-row.total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--border); margin-top: .5rem; padding-top: 1rem; }
.empty-state { text-align: center; padding-block: 4rem; }
.empty-state svg { margin-bottom: 1rem; color: var(--border-strong); }

/* ---------- Forms (checkout / auth) ---------- */
.form-card { max-width: 520px; margin-inline: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 2rem; }
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .93rem; background: var(--surface);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.form-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.field-error { color: var(--danger); font-size: .78rem; margin-top: .3rem; }
.form-links { text-align: center; margin-top: 1.25rem; font-size: .88rem; }
.form-links a { font-weight: 700; color: var(--accent); }

.checkout-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-block: 2rem 4rem; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1.6fr 1fr; } }

/* ---------- Order / account ---------- */
.order-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.order-card-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.status-pill { padding: .25rem .7rem; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 700; }
.status-Pending { background: #fbeed4; color: #8a5a1a; }
.status-Processing { background: #dce7f6; color: #2a4d80; }
.status-Shipped { background: #e2e6fb; color: #3c3d92; }
.status-Delivered { background: var(--success-tint); color: var(--success); }
.status-Cancelled { background: #f6e2e2; color: var(--danger); }

/* ---------- Page hero / titles ---------- */
.page-title-bar { padding-block: 2rem; }
.page-title-bar h1 { font-size: 1.9rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.d-none { display: none; }

/* ---------- Admin (kept minimal, separate visual language) ---------- */
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--ink); color: #f2ede4; padding: 1.5rem 1rem; }
.admin-sidebar .brand { display: block; font-weight: 800; letter-spacing: .06em; margin-bottom: 2rem; font-size: 1.2rem; }
.admin-sidebar a { display: block; padding: .65rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; color: #d8d2c6; }
.admin-sidebar a:hover, .admin-sidebar a.is-active { background: rgba(255,255,255,.08); color: #fff; }
.admin-main { padding: 2rem; max-width: 1100px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 2rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; }
.stat-card .value { font-size: 1.6rem; font-weight: 800; }
.stat-card .label { color: var(--muted); font-size: .82rem; }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--border); font-size: .88rem; }
.data-table th { background: #f0ece3; font-weight: 700; }
.data-table tr:last-child td { border-bottom: none; }
@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; align-items: center; gap: 1rem; overflow-x: auto; padding: 1rem; }
  .admin-sidebar .brand { margin: 0; }
}

/* ---------- Landing page builder ---------- */
.builder-shell { display: grid; grid-template-columns: 200px 1fr 300px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .builder-shell { grid-template-columns: 1fr; } }

/* Page builder screen with the inline SEO panel added as a 4th, left-most column (see
   Pages/Edit.cshtml) - kept as its own modifier so the plain 3-column builder-shell (used nowhere
   else today, but a reasonable future case) is untouched. */
.builder-shell.has-seo-panel { grid-template-columns: 200px 1fr 300px 380px; }
@media (max-width: 1400px) { .builder-shell.has-seo-panel { grid-template-columns: 1fr; } }

.builder-palette, .builder-settings-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem;
}
.builder-settings-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.builder-palette h4, .builder-settings-panel h4 { font-size: .85rem; margin-bottom: .85rem; }

.builder-palette-item {
  padding: .6rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  margin-bottom: .5rem; cursor: pointer; font-size: .82rem; background: var(--surface); text-align: start; width: 100%;
}
.builder-palette-item:hover { border-color: var(--ink); background: var(--paper); }

.builder-canvas {
  background: #ece7dc; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  min-height: 420px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem;
}
.builder-canvas.is-empty::before {
  content: "بلاکی از پنل سمت راست اضافه کنید"; display: block; text-align: center; color: var(--muted); padding: 3rem 1rem; font-size: .85rem;
}

.builder-block-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: grab; overflow: hidden; }
.builder-block-card.is-selected { border-color: var(--ink); }
.builder-block-card.is-dragging { opacity: .4; }
.builder-block-card.drag-over-top { border-top: 3px solid var(--accent); }
.builder-block-card.drag-over-bottom { border-bottom: 3px solid var(--accent); }

.builder-block-header {
  display: flex; justify-content: space-between; align-items: center; padding: .5rem .85rem;
  background: #f0ece3; font-size: .78rem; font-weight: 700; border-bottom: 1px solid var(--border);
}
.builder-block-header button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: .78rem; font-family: inherit; }

.builder-block-preview { pointer-events: none; max-height: 240px; overflow: hidden; position: relative; font-size: .7rem; }
.builder-block-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 65%, rgba(255,255,255,.95)); }
.builder-block-preview .container { padding-inline: .5rem; }

.builder-field { margin-bottom: 1rem; }
.builder-field label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .35rem; }
.builder-field input, .builder-field textarea {
  width: 100%; padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: .85rem;
}
.builder-field textarea { min-height: 90px; resize: vertical; }
.builder-empty-settings { color: var(--muted); font-size: .82rem; text-align: center; padding: 2rem 0; }

/* ---------- Dynamic route-pattern editor (Pages builder) ---------- */
.route-pattern-editor {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.route-pattern-toggle { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.route-pattern-toggle code, .route-pattern-editor code {
  background: var(--paper); padding: .1rem .4rem; border-radius: 4px; font-size: .82rem; direction: ltr; display: inline-block;
}

/* ---------- SEO editor (Yoast-style) ---------- */
.seo-editor-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .seo-editor-grid { grid-template-columns: 1fr; } }

/* Host entity edit screens (Product/Category/Page...) embedding the inline SEO panel: the panel's
   own field set needs more room than the analysis-only aside above, so it gets a wider track. In
   this RTL layout the first grid track renders on the visual right, so the host form (first child)
   stays on the right and the SEO panel (second child) lands on the left, per the required layout. */
.entity-edit-with-seo-grid { display: grid; grid-template-columns: 1fr 420px; gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .entity-edit-with-seo-grid { grid-template-columns: 1fr; } }

.seo-snippet-preview {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1.5rem; background: var(--surface);
}
.seo-snippet-title { color: #1a0dab; font-size: 1.1rem; line-height: 1.3; margin-bottom: .2rem; }
.seo-snippet-url { color: #006621; font-size: .82rem; direction: ltr; text-align: right; }
.seo-snippet-desc { color: #545454; font-size: .85rem; margin-top: .3rem; }

.seo-char-counter { font-size: .76rem; color: var(--muted); margin-top: .25rem; }
.seo-char-counter.is-over { color: var(--danger); }

.seo-analysis-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; position: sticky; top: 1rem;
}
.seo-analysis-panel h4 { font-size: .85rem; margin-bottom: .5rem; }
.seo-score-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; margin-bottom: .85rem; }

.seo-check-row { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem 0; border-bottom: 1px solid var(--paper); font-size: .8rem; }
.seo-check-row:last-child { border-bottom: none; }
.seo-check-dot { width: .65rem; height: .65rem; border-radius: 50%; margin-top: .3rem; flex: none; }
.seo-check-dot.good { background: #3ba676; }
.seo-check-dot.ok { background: #e0a63a; }
.seo-check-dot.bad { background: var(--danger); }

.seo-inline-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.seo-inline-panel > h4:first-child { margin-top: 0; }
.seo-inline-panel .seo-analysis-panel { position: static; }

/* ---------- Inline media picker ---------- */
.media-picker {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.media-picker > h4:first-child { margin-top: 0; }

.media-picker-cover {
  width: 100%; max-width: 260px; aspect-ratio: 4 / 3; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: .85rem; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.media-picker-cover img { width: 100%; height: 100%; object-fit: cover; }
.media-picker-empty { color: var(--muted); font-size: .82rem; }

.media-picker-gallery { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .85rem; }
.media-picker-thumb {
  position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
}
.media-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-picker-thumb-remove {
  position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px; line-height: 18px;
  border-radius: 50%; border: none; background: rgba(23,23,23,.72); color: #fff; cursor: pointer;
  font-size: .8rem; padding: 0;
}

.media-picker-modal-backdrop {
  position: fixed; inset: 0; background: rgba(23,23,23,.55); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.media-picker-modal {
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  width: min(920px, 100%); max-height: 88vh; display: flex; flex-direction: column; padding: 1.25rem;
}
.media-picker-modal-body { display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; flex: 1; min-height: 0; }
@media (max-width: 760px) { .media-picker-modal-body { grid-template-columns: 1fr; } }

.media-picker-modal-main { display: flex; flex-direction: column; min-height: 0; }
.media-picker-modal-toolbar { display: flex; gap: .6rem; margin-bottom: .85rem; }
.media-picker-modal-toolbar input[type="text"] { flex: 1; }

.media-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.1rem;
  overflow-y: auto; padding: .3rem .4rem .6rem .2rem; align-content: start;
}
.media-picker-grid-item {
  aspect-ratio: 1; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  box-shadow: 0 1px 4px rgba(23,23,23,.12); cursor: pointer; background: #fff; position: relative;
  display: flex; align-items: center; justify-content: center; padding: .5rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.media-picker-grid-item:hover { border-color: var(--ink); box-shadow: 0 4px 10px rgba(23,23,23,.18); transform: translateY(-1px); }
/* contain (not cover) - these are icon-style SVGs with their own baked-in aspect ratio and canvas
   color; "cover" cropped them at the card's edges, which read as broken/cut-off images rather than
   distinct product thumbnails. */
.media-picker-grid-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.media-picker-grid-item.is-selected { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }

/* align-self: start (not the grid's default stretch) so a tall image grid on the other column
   never forces this panel to grow past its own short content - see .media-picker-modal-footer
   below for why the Use/Close buttons don't live in here (this panel has no overflow of its own,
   so it should never need its own scrollbar). */
.media-picker-modal-side { border-inline-start: 1px solid var(--border); padding-inline-start: 1.1rem; align-self: start; }
.media-picker-modal-side h4 { margin-top: 0; font-size: .85rem; }
.media-picker-modal-side .form-row { margin-bottom: .7rem; }
.media-picker-side-preview {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm);
  margin-bottom: .7rem; background: var(--paper);
}

/* Always-visible footer (Use + Close) - a sibling of .media-picker-modal-body, never inside
   either scrollable column, so it can't be scrolled out of view regardless of how tall the grid
   or the side panel get. */
.media-picker-modal-footer {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.media-picker-modal-footer .media-picker-footer-actions { display: flex; gap: .6rem; }
.media-picker-modal-footer .btn-danger-outline {
  background: none; border: 1px solid var(--danger); color: var(--danger);
}
.media-picker-modal-footer .btn-danger-outline:hover { background: var(--danger); color: #fff; }
.media-picker-modal-footer .btn-danger-outline:disabled { opacity: .45; cursor: default; background: none; color: var(--danger); }

/* ---------- Inline rich-text editor (TinyMCE, self-hosted - see wwwroot/lib/tinymce) ---------- */
.tox-tinymce { border-radius: var(--radius-sm) !important; margin-top: .2rem; }

/* Storefront rendering of admin-authored rich-editor HTML (Product.Description, Page HtmlModule) */
.rich-text-content h2 { font-size: 1.25rem; margin: 1.1rem 0 .5rem; }
.rich-text-content h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.rich-text-content p { margin: 0 0 .75rem; line-height: 1.7; }
.rich-text-content ul, .rich-text-content ol { margin: 0 0 .75rem; padding-inline-start: 1.4rem; }
.rich-text-content li { margin-bottom: .3rem; }
.rich-text-content blockquote {
  margin: 0 0 .75rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--border-strong); color: var(--muted);
}

/* ---------- Content CMS (blog/magazine): listing cards, article detail, tag feed, comments ---------- */
.content-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.content-card { display: block; }
.content-card-thumb { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper); }
.content-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.content-card:hover .content-card-thumb img { transform: scale(1.04); }
.content-card-info { padding-top: .7rem; }
.content-card-type { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; margin-bottom: .2rem; }
.content-card-title { font-weight: 700; margin: 0 0 .3rem; }
.content-card-excerpt { font-size: .88rem; line-height: 1.6; margin-bottom: .3rem; }
.content-card-date { font-size: .78rem; }

.content-detail { max-width: 760px; padding-block: 2.5rem 1.5rem; }
.content-detail-title { font-size: 1.9rem; margin: .5rem 0 .3rem; }
.content-detail-meta { margin-bottom: 1.5rem; }
.content-detail-cover { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 1.5rem; }
.content-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.content-detail-body { font-size: 1.02rem; }
.content-detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: 1.5rem 0; }
.content-detail-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.content-detail-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag-pill { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; }
.tag-pill:hover { background: var(--paper); }

.tag-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.tag-feed-card { display: block; }
.tag-feed-thumb { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper); }
.tag-feed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tag-feed-info { padding-top: .6rem; }
.tag-feed-title { font-weight: 700; margin: 0 0 .25rem; }
.tag-feed-excerpt { font-size: .85rem; margin-bottom: .2rem; }
.tag-feed-date { font-size: .76rem; }

.comments-section { max-width: 760px; padding-block: 2rem 3rem; }
.comments-title { font-size: 1.3rem; margin-bottom: 1.25rem; }
.comments-empty { margin-bottom: 1.25rem; }
.comment-node { padding-block: 1rem; border-bottom: 1px solid var(--border); }
.comment-body-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.comment-author { font-size: .92rem; }
.comment-date { font-size: .76rem; }
.comment-body { line-height: 1.7; margin-bottom: .4rem; white-space: pre-wrap; }
.comment-reply-btn { background: none; border: none; color: var(--accent); font-size: .82rem; font-weight: 600; padding: 0; }
.comment-replies { margin-inline-start: 1.5rem; margin-top: .5rem; border-inline-start: 2px solid var(--border); padding-inline-start: 1rem; }
.comment-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.comment-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .8rem; font-family: inherit; resize: vertical; }
.comment-reply-form { margin-top: .6rem; }
.comment-status { font-size: .82rem; }
.rich-text-content a { color: var(--accent); }