/* ==========================================================================
   SOLMAZ CERAMICS — Typography & Fluid Responsive System
   --------------------------------------------------------------------------
   Loaded last, after main.css / responsive.css / admin.css.

   Typefaces (both SIL OFL 1.1 — free for commercial use, self-hosted):
     Display  Estedad    — hero, page & section titles
     Body/UI  Vazirmatn  — paragraphs, navigation, cards, prices, forms, admin

   The scale is fluid between 360px and 1440px viewports; every step is a
   clamp() so there are no jumps at breakpoints. Line-heights are tuned for
   Persian, which needs more leading than Latin because of its deep
   descenders and dot-heavy letterforms.
   ========================================================================== */

:root {
  /* ---- Fluid type scale (min @360px  →  max @1440px) ------------------ */
  --step--2: clamp(0.688rem, 0.667rem + 0.09vw, 0.75rem);   /* 11 → 12  micro labels   */
  --step--1: clamp(0.781rem, 0.75rem + 0.14vw, 0.875rem);   /* 12.5 → 14  meta, badges */
  --step-0: clamp(0.938rem, 0.906rem + 0.14vw, 1.031rem);   /* 15 → 16.5  body         */
  --step-1: clamp(1rem, 0.938rem + 0.28vw, 1.188rem);       /* 16 → 19  lead           */
  --step-2: clamp(1.063rem, 0.979rem + 0.37vw, 1.313rem);   /* 17 → 21  card titles    */
  --step-3: clamp(1.188rem, 1.042rem + 0.65vw, 1.625rem);   /* 19 → 26  h3             */
  --step-4: clamp(1.375rem, 1.125rem + 1.11vw, 2.125rem);   /* 22 → 34  h2 / section   */
  --step-5: clamp(1.625rem, 1.25rem + 1.67vw, 2.75rem);     /* 26 → 44  h1 / page      */

  /* ---- Line heights (Persian-tuned) ----------------------------------- */
  --lh-display: 1.45;   /* large titles: compact but never clipping        */
  --lh-heading: 1.55;   /* smaller headings                                */
  --lh-ui: 1.7;         /* buttons, nav, labels                            */
  --lh-body: 1.9;       /* paragraphs                                      */
  --lh-relaxed: 2.02;   /* long-form article / description copy            */

  /* ---- Weights: used intentionally, not everywhere ---------------------
     Estedad 700 reads more refined than 800 at large sizes; 800 is kept
     for small display labels where extra weight aids legibility.          */
  --fw-display: 700;
  --fw-label: 800;
  --fw-strong: 600;
  --fw-body: 400;

  /* ---- Fluid spacing --------------------------------------------------- */
  --container-pad: clamp(0.875rem, 0.6rem + 1.2vw, 1.75rem);
  --section-y: clamp(2rem, 1.35rem + 2.9vw, 4rem);
  --grid-gap: clamp(0.65rem, 0.45rem + 0.9vw, 1.25rem);
  --flow-gap: clamp(0.75rem, 0.6rem + 0.67vw, 1.25rem);

  /* ---- Fluid grid sizing: the card minimum decides the column count ----
     Deliberately in rem, not vw: the shop grid sits beside a 220px filter
     sidebar, so viewport width is a poor proxy for the space the cards
     actually get. Context-specific values are set on the grids below.      */
  --card-min: 13rem;
  --cat-min: 13rem;
  --cols-max: 4;

  /* Comfortable measure for Persian prose */
  --measure: 68ch;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Persian digits and Latin fragments (emails, model codes, phone numbers)
   sit inside RTL text — keep them upright and evenly spaced. */
body {
  font-variant-numeric: proportional-nums;
}

p {
  line-height: var(--lh-body);
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ==========================================================================
   2. Heading hierarchy
   Explicit, single source of truth — supersedes the layered h1/h2 rules
   accumulated earlier in main.css.
   ========================================================================== */

h1,
h2,
h3,
h4,
.page-title,
.section-title {
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: break-word;
  letter-spacing: 0;
}

h1,
.page-title {
  font-size: var(--step-5);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  margin: 0 0 var(--flow-gap);
}

h2 {
  font-size: var(--step-4);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  margin: 0 0 var(--flow-gap);
}

h3 {
  font-size: var(--step-3);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  margin: 0 0 0.5rem;
}

h4 {
  font-size: var(--step-2);
  font-weight: var(--fw-strong);
  line-height: var(--lh-heading);
  margin: 0 0 0.5rem;
}

/* Section headers ------------------------------------------------------- */
.section-title {
  font-size: var(--step-4);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  margin: 0 0 0.35rem;
}

h3.section-title {
  font-size: var(--step-3);
}

.section-subtitle {
  font-size: var(--step-0);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: var(--measure);
  margin: 0 0 var(--flow-gap);
  text-wrap: pretty;
}

/* Interface headings stay on the body face — display type on a filter
   sheet or an empty state reads as decoration, not hierarchy. */
.empty-state h2,
.empty-state h3,
.filters-panel h3,
.order-detail-block h3,
.contact-info-card h2,
.contact-form-card h2,
.admin-card h2,
.admin-card h3 {
  font-family: var(--font);
  font-weight: var(--fw-strong);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  text-wrap: unset;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero-banner__overlay .hero-brand {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--fw-label);
  line-height: var(--lh-ui);
  letter-spacing: 0.02em;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.hero-banner__overlay h1,
.hero-content h1 {
  /* Restrained against the scale: the overlay is a narrow column, so the
     title has to stay on one line without crowding the ceramics. */
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: var(--fw-display);
  line-height: 1.4;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.hero-banner__overlay > p,
.hero-banner__overlay .hero-lead {
  max-width: none;
  margin: 0 0 1.25rem;
  font-family: var(--font);
  font-size: clamp(0.875rem, 0.79rem + 0.37vw, 1.063rem);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  direction: rtl;
  text-align: right;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ==========================================================================
   4. Fluid layout system
   ========================================================================== */

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

/* Grid children must be allowed to shrink, or long Persian words and wide
   images force the whole page into horizontal scroll. */
.product-grid > *,
.home-category-grid > *,
.shop-layout > *,
.cart-layout > *,
.checkout-layout > *,
.footer-grid > * {
  min-width: 0;
}

/* ---- Product grid: column count follows the card minimum --------------
   min(100%, …) keeps a single card from overflowing a container narrower
   than the minimum itself. The max(…) term raises the floor to one-Nth of
   the *container* so the grid never exceeds --cols-max columns — a plain
   auto-fill would keep adding narrow columns on wide displays.            */
.product-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(var(--card-min), (100% - (var(--cols-max) - 1) * var(--grid-gap)) / var(--cols-max))), 1fr)
  );
}

/* The shop grid shares its row with the filter sidebar, so its cards need a
   smaller floor to reach the same column count as the full-width grids. */
.shop-layout .product-grid,
.shop-results .product-grid {
  --card-min: 12rem;
}

/* ---- Category grid --------------------------------------------------- */
.home-category-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(var(--cat-min), (100% - (var(--cols-max) - 1) * var(--grid-gap)) / var(--cols-max))), 1fr)
  );
}

/* Phones: two readable columns rather than one oversized card. */
@media (max-width: 700px) {
  .product-grid,
  .shop-layout .product-grid,
  .shop-results .product-grid {
    --card-min: 9.5rem;
  }

  .home-category-grid {
    --cat-min: 9.5rem;
  }
}

/* Section rhythm */
.products-section,
.home-categories,
.about-section {
  padding-block: var(--section-y);
}

/* ==========================================================================
   5. Product cards
   ========================================================================== */

.product-card__title,
.product-card-title,
.product-card h3 {
  font-family: var(--font);
  font-size: var(--step-1);
  font-weight: var(--fw-strong);
  line-height: var(--lh-heading);
  color: var(--text);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Prices are compared column-to-column — tabular figures keep the digits
   aligned so the eye can scan down a grid of cards. */
.product-card__price,
.product-price,
.price,
.price-current,
.cart-total,
.order-total {
  font-family: var(--font);
  font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: var(--lh-ui);
}

.price-old,
.product-card__price--old {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-body);
}

.product-card__meta,
.home-category-card__meta,
.product-meta {
  font-size: var(--step--1);
  font-weight: var(--fw-body);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}

.home-category-card__name {
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: var(--fw-strong);
  line-height: var(--lh-heading);
}

.badge,
.product-badge,
.chip {
  font-size: var(--step--2);
  font-weight: var(--fw-strong);
  line-height: 1.6;
  letter-spacing: 0;
}

/* ==========================================================================
   6. Navigation, buttons, forms
   ========================================================================== */

.header-nav a,
.nav-desktop a,
.mobile-drawer a,
.footer a {
  font-size: var(--step-0);
  font-weight: 500;
  line-height: var(--lh-ui);
}

.btn {
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  letter-spacing: 0;
}

.btn-sm {
  font-size: var(--step--1);
}

/* Touch targets: anything tappable clears the 44px comfort threshold. */
.btn,
.icon-btn,
.bottom-nav a,
.pagination a,
.pagination span,
.qty-btn {
  min-height: 44px;
}

.icon-btn,
.qty-btn {
  min-width: 44px;
}

label,
.form-label {
  font-size: var(--step--1);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  color: var(--text);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--font);
  font-size: max(16px, var(--step-0)); /* ≥16px stops iOS zooming on focus */
  line-height: var(--lh-ui);
  min-height: 44px;
  max-width: 100%;
}

textarea {
  line-height: var(--lh-body);
}

.form-hint,
.form-error,
.help-text {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
}

/* Latin-only fields read wrong when forced RTL. */
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"] {
  direction: ltr;
  text-align: right;
}

.breadcrumb,
.breadcrumbs {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
}

/* ==========================================================================
   7. Long-form copy
   ========================================================================== */

.article-body,
.product-description,
.about-text,
.page-content {
  font-size: var(--step-0);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}

.article-body p,
.product-description p,
.about-text p {
  margin-block: 0 var(--flow-gap);
  line-height: var(--lh-relaxed);
}

.article-body h2,
.article-body h3 {
  margin-block: calc(var(--flow-gap) * 1.6) var(--flow-gap);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
  font-size: var(--step-0);
  line-height: var(--lh-body);
}

.site-footer h3,
.site-footer h4,
.footer-col-title {
  font-family: var(--font);
  font-size: var(--step-1);
  font-weight: var(--fw-strong);
  line-height: var(--lh-heading);
}

/* ==========================================================================
   9. Accessibility
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   10. Viewport-specific corrections
   ========================================================================== */

/* Very small phones — tighten without shrinking text below readability. */
@media (max-width: 380px) {
  :root {
    --container-pad: 0.75rem;
  }

  .product-grid,
  .shop-layout .product-grid,
  .shop-results .product-grid {
    --card-min: 8.75rem;
  }

  .home-category-grid {
    --cat-min: 8.75rem;
  }
}

/* Phone landscape: short viewports should not spend all their height on
   the hero before any product is visible. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-banner__img {
    aspect-ratio: 16 / 7;
  }

  .hero-banner__overlay {
    padding-block: 0.85rem;
  }
}

/* Tablet portrait gets its own composition rather than a squeezed desktop. */
@media (min-width: 700px) and (max-width: 1023px) {
  .product-grid,
  .shop-layout .product-grid,
  .shop-results .product-grid {
    --card-min: 11.5rem;
  }
}

/* Large desktop and ultrawide: hold the measure, let whitespace grow. */
@media (min-width: 1600px) {
  :root {
    --container-pad: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait (769–899px): the overlay column collapses to ~260–290px
   here, which forced the description into three cramped lines. Rather than
   widen the overlay over the ceramics, the hero keeps the stacked
   composition through this band — the banner stays fully visible and the
   sentence gets the full column width.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 899px) {
  .hero-banner {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hero-banner picture {
    display: block;
    width: 100%;
  }

  .hero-banner__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 72% center;
  }

  .hero-banner__overlay {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    /* !important is required to beat the unconditional
       `.hero-banner__overlay { width: min(42%,440px) !important }`
       that sits at the end of main.css. */
    width: 100% !important;
    max-width: none;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: #fff !important;
    border-top: 1px solid var(--border);
  }

  .hero-banner__overlay .hero-lead,
  .hero-banner__overlay > p {
    max-width: 62ch;
  }
}

/* --------------------------------------------------------------------------
   Short landscape viewports (phones turned sideways). The stacked hero
   composition is correct for tall screens but consumed ~700px of a 390px-tall
   landscape viewport — nearly two screenfuls before any product appeared.
   Here the banner is capped against viewport height instead of aspect ratio.
   Placed last so it wins over the mobile and tablet-portrait hero blocks.
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-banner__img {
    aspect-ratio: auto !important;
    height: 44vh !important;
    min-height: 140px;
    object-fit: cover;
    object-position: 72% center;
  }

  .hero-banner__overlay {
    padding-block: 0.8rem;
  }

  .hero-banner__overlay h1,
  .hero-content h1 {
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem);
    margin-bottom: 0.3rem;
  }

  .hero-banner__overlay .hero-lead,
  .hero-banner__overlay > p {
    margin-bottom: 0.8rem;
    line-height: 1.75;
  }
}

/* ==========================================================================
   11. Footer social links (Instagram / WhatsApp)
   Rendered only when the matching admin setting resolves to a real URL, so
   the markup never links somewhere invented.
   ========================================================================== */

/* Split copyright and socials only when the social block is actually present;
   otherwise the centred single-item layout is preserved. */
.footer-bottom:has(.footer-socials) {
  justify-content: space-between;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.footer-socials__label {
  font-size: var(--step--1);
  line-height: var(--lh-ui);
  color: var(--footer-muted);
}

.footer-socials__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Neutralise the footer's vertical list rhythm for this horizontal row. */
.site-footer .footer-socials__list li + li {
  margin-top: 0;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--footer-muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.footer-social svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-social:hover,
.footer-social:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}

.footer-social--instagram:hover {
  background: rgba(221, 116, 160, 0.22);
  border-color: rgba(221, 116, 160, 0.55);
}

.footer-social--whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.55);
}

.footer-social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .footer-bottom:has(.footer-socials) {
    justify-content: center;
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   The mobile bottom navigation is position:fixed with z-index 90, but the
   footer reserved no space for it, so the last row of footer content (the
   copyright, and now the social icons) sat underneath it and was unreachable.
   Reserve the nav's height — plus the iOS home-indicator inset — below the
   footer wherever that nav is on screen.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
}