/**
 * Homepage discovery
 * Category shortcuts + age-filter handoff below the hero, then the product
 * rails. Loaded on the front page only, after every component file, so it can
 * tune shared components (.nk-rail-section, .nk-product-rail) for this page
 * without out-specifying them anywhere else.
 */

.nk-home-discovery {
  display: grid;
  gap: var(--nk-space-5);
  padding-block: var(--nk-space-5) var(--nk-section-gap);
}

.nk-home-categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nk-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nk-home-category {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: start;
  gap: var(--nk-space-2);
  min-inline-size: 0;
  min-block-size: var(--nk-touch-target);
  color: var(--nk-text-strong);
  text-decoration: none;
  border: var(--nk-border-width) solid transparent;
  border-radius: var(--nk-radius-lg);
  transition: color var(--nk-transition-base),
    background-color var(--nk-transition-base),
    border-color var(--nk-transition-base),
    box-shadow var(--nk-transition-base),
    transform var(--nk-transition-base);
}

.nk-home-category__media {
  display: grid;
  place-items: center;
  inline-size: calc(var(--nk-space-12) + var(--nk-space-2));
  aspect-ratio: var(--nk-ratio-square);
  overflow: hidden;
  flex: none;
  border-radius: var(--nk-radius-md);
  background-color: var(--nk-surface-sunken);
  box-shadow: var(--nk-shadow-xs);
  transition: transform var(--nk-duration-normal) var(--nk-ease-out),
    box-shadow var(--nk-transition-base);
}

.nk-home-category__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.nk-home-category__label {
  max-inline-size: 100%;
  overflow: hidden;
  font-size: var(--nk-text-xs);
  font-weight: var(--nk-weight-semibold);
  line-height: var(--nk-leading-snug);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nk-home-category__body {
  display: grid;
  justify-items: center;
}

.nk-home-category__view {
  display: none;
}

.nk-home-category-item--sale {
  display: none;
}

@media (hover: hover) {
  .nk-home-category:hover {
    color: var(--nk-text-accent);
  }
}

@media (hover: hover) {
  .nk-home-category:hover .nk-home-category__media {
    box-shadow: var(--nk-shadow-sm);
    transform: translateY(calc(var(--nk-space-half) * -1));
  }
}

.nk-home-category:focus-visible,
.nk-home-age:focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--nk-focus-ring-color);
  outline-offset: var(--nk-focus-ring-offset);
}

.nk-home-category:active {
  transform: scale(0.98);
}

.nk-home-category[aria-disabled="true"],
.nk-home-age[aria-disabled="true"] {
  border-color: var(--nk-action-disabled-bg);
  background-color: var(--nk-action-disabled-bg);
  color: var(--nk-action-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

.nk-home-ages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--nk-space-1);
}

.nk-home-age {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: var(--nk-touch-target);
  padding-inline: var(--nk-space-half);
  border: var(--nk-border-width) solid var(--nk-border-default);
  border-radius: var(--nk-radius-md);
  background-color: var(--nk-surface-raised);
  color: var(--nk-text-default);
  font-size: var(--nk-text-xs);
  font-weight: var(--nk-weight-semibold);
  line-height: var(--nk-leading-snug);
  text-align: center;
  text-decoration: none;
  transition: color var(--nk-transition-base),
    background-color var(--nk-transition-base),
    border-color var(--nk-transition-base),
    transform var(--nk-transition-base);
}

@media (hover: hover) {
  .nk-home-age:hover {
    border-color: var(--nk-border-accent);
    color: var(--nk-text-accent);
  }
}

.nk-home-age:active {
  transform: scale(0.98);
}

.nk-home-age[aria-current="true"] {
  border-color: var(--nk-action-primary);
  background-color: var(--nk-action-primary);
  color: var(--nk-text-on-accent);
}

.nk-home-age[aria-current="true"]:active {
  border-color: var(--nk-action-primary-hover);
  background-color: var(--nk-action-primary-hover);
  color: var(--nk-text-on-accent);
}
@media (hover: hover) {
  .nk-home-age[aria-current="true"]:hover {
    border-color: var(--nk-action-primary-hover);
    background-color: var(--nk-action-primary-hover);
    color: var(--nk-text-on-accent);
  }
}

.nk-home-age__full { display: none; }

@media (min-width: 768px) {
  .nk-home-discovery {
    gap: var(--nk-space-4);
    padding-block-start: var(--nk-space-6);
  }

  .nk-home-categories {
    gap: var(--nk-grid-gap);
  }

  .nk-home-category {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-inline: var(--nk-space-3);
    padding-block: var(--nk-space-half);
    background-color: var(--nk-surface-raised);
    border-color: var(--nk-border-subtle);
    box-shadow: var(--nk-shadow-sm);
  }

  @media (hover: hover) {
    .nk-home-category:hover {
      border-color: var(--nk-border-accent);
      box-shadow: var(--nk-shadow-md);
      transform: translateY(calc(var(--nk-space-half) * -1));
    }
  }

  .nk-home-category__media {
    inline-size: calc(var(--nk-space-12) + var(--nk-space-2));
    background: none;
    box-shadow: none;
  }

  .nk-home-category__media img {
    transform: scale(1.12);
  }

  @media (hover: hover) {
    .nk-home-category:hover .nk-home-category__media {
      box-shadow: none;
      transform: none;
    }
  }

  .nk-home-category__body {
    justify-items: start;
    align-content: center;
    gap: var(--nk-space-hair);
  }

  .nk-home-category__label {
    font-size: var(--nk-text-base);
    text-align: start;
  }

  .nk-home-category__view {
    display: inline-flex;
    align-items: center;
    gap: var(--nk-space-hair);
    color: var(--nk-text-accent);
    font-size: var(--nk-text-2xs);
    font-weight: var(--nk-weight-medium);
    line-height: var(--nk-leading-snug);
  }

  @media (hover: hover) {
    .nk-home-category:hover .nk-home-category__view {
      text-decoration: underline;
    }
  }

  .nk-home-ages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .nk-home-age {
    min-inline-size: calc(var(--nk-space-20) + var(--nk-space-8));
    padding-inline: var(--nk-space-4);
    font-size: var(--nk-text-base);
  }

  .nk-home-age__full { display: inline; }
  .nk-home-age__compact { display: none; }
}

@media (min-width: 1024px) {
  .nk-home-categories {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--nk-space-3);
  }

  .nk-home-category-item--sale {
    display: block;
  }

  .nk-home-category--sale {
    background-color: var(--nk-surface-accent);
    border-color: var(--nk-border-accent);
  }

  .nk-home-category--sale .nk-home-category__label,
  .nk-home-category--sale .nk-home-category__view {
    color: var(--nk-text-accent);
  }
}

@media (min-width: 1280px) {
  .nk-home-category__media {
    inline-size: var(--nk-space-16);
  }
}

/* =======================================================================
 * HOMEPAGE PRODUCT RAILS — .nk-home-rail
 * The shared .nk-rail-section / .nk-product-rail, told how deep this page's
 * rows are. Only the column count changes; every other value comes from the
 * component.
 * ===================================================================== */

/**
 * Homepage rhythm below the hero.
 *
 * `--nk-section-gap` (40/64/80px) is the distance between *sections of the
 * page*. Discovery is not one — it is a navigation strip attached to the hero,
 * and a full section gap under it read as a hole between the age chips and the
 * first rail. The strip closes on `--nk-space-6`, and the rails carry
 * `--nk-space-8` between one another, which keeps the whole run on the same
 * 4px scale as everything else instead of inventing a homepage-only value.
 */
.nk-home-discovery {
  padding-block-end: var(--nk-space-6);
}

.nk-home-rail {
  padding-block-end: var(--nk-space-8);
}

/* Discovery and the rail above already carry that spacing, so the section
   starts flush rather than adding the component's own top margin to it. */
.nk-home-rail .nk-rail-section {
  margin-block-start: 0;
}

/* «پرفروش‌ترین کالاها» is a section of the page like the rails around it, and
   carries the same rhythm — the component's own top margin is theirs, not the
   homepage's. */
.nk-home-bestsellers {
  padding-block-end: var(--nk-space-8);
}

.nk-home-bestsellers .nk-bestsellers-section {
  margin-block-start: 0;
}

/**
 * Two cards on a phone, with the third breaking the edge of the screen — the
 * sliver is what says the row scrolls, and it costs less than an arrow. Held
 * to 768px rather than widening at 480: a 3-up card on a 480px screen puts the
 * product photograph below the size at which a parent can judge a garment.
 *
 * **42%, not the component's 46%**, at the shop owner's request: the homepage
 * rails were reading as two big cards rather than a row that continues. At
 * 360px that is a 138px card instead of 151px — still two across, with a wider
 * sliver of the third doing the work the arrows do on desktop. The product
 * page's own rails keep the component default; this is a homepage judgement
 * about a page that already carries a lot above the fold.
 */
.nk-home-rail .nk-product-rail { grid-auto-columns: 42%; }

@media (min-width: 480px) and (max-width: 767px) {
  .nk-home-rail .nk-product-rail { grid-auto-columns: 42%; }
}

@media (min-width: 768px) {
  .nk-home-rail .nk-product-rail { grid-auto-columns: 30%; }

  /* One step up on a wider screen, the way --nk-gutter and --nk-grid-gap do. */
  .nk-home-discovery { padding-block-end: var(--nk-space-8); }
  .nk-home-rail { padding-block-end: var(--nk-space-10); }
}

/* Six up from the desktop line, exactly — the gaps are subtracted rather than
   approximated with a percentage, so the sixth card ends on the container edge
   instead of a pixel or two past it. */
@media (min-width: 1024px) {
  .nk-home-rail .nk-product-rail {
    grid-auto-columns: calc((100% - (5 * var(--nk-grid-gap))) / 6);
  }
}

/* =======================================================================
 * FREE SHIPPING BAND — .nk-promo--ship
 *
 * The commerce component's promo shell (`.nk-promo`, commerce.css) with a
 * homepage-only skin: a patterned band with a clay object at each side. The
 * variant lives here, not in commerce.css, because it renders on exactly one
 * page and commerce.css is on every route in the store — a homepage banner is
 * not worth 40 lines in the checkout's stylesheet.
 *
 * The ground is a flat pastel with a seamless 120px tile over it
 * (assets/images/patterns/confetti.svg, built by tools/build-pattern.py). It
 * replaced a two-stop gradient, which at this width was a band that simply
 * looked unevenly lit. The pattern is what layout.md's "never a shadow on a
 * flat pastel block" is about: the surface is no longer flat, so the lift
 * reads as depth. The objects are photographic clay renders and bring their
 * own shading — they carry no plate and no --nk-shadow-clay, which would give
 * them a second light source.
 * ===================================================================== */

.nk-home-ship {
  padding-block-end: var(--nk-space-8);
}

.nk-promo--ship {
  /* The object, sized once and stepped up at each breakpoint, so nothing
     downstream has to repeat the number. */
  --nk-ship-object: calc(var(--nk-space-16) + var(--nk-space-2)); /* 72px */

  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--nk-space-4);
  padding: var(--nk-space-5) var(--nk-space-4);
  background-color: var(--nk-pastel-sky);
  /* The tile is drawn for this ground and this ground only — its marks are
     white and navy-200 at low alpha. On any other surface, rebuild it. */
  background-image: url("../../images/patterns/confetti.svg");
  background-repeat: repeat;
  /* Half the authored tile: at 120px the marks read as confetti, at 60 they
     read as texture, which is what a band behind a sentence should be. */
  background-size: 120px 120px;
  /* Shadow, no border — layout.md: a raised block gets one or the other. The
     inset hairline is the band's own top edge catching the light. */
  box-shadow:
    var(--nk-shadow-lg),
    inset 0 var(--nk-space-hair) 0 var(--nk-white);
}

/* One decorative object per side. `--lead` is at the inline start, so in RTL
   the tote sits on the right and the bow on the left. */
.nk-promo__object {
  display: block;
  inline-size: var(--nk-ship-object);
  flex: none;
}

.nk-promo__object img {
  inline-size: 100%;
  block-size: auto;
  /* The renders are square and transparent; this keeps a stray non-square
     source from stretching rather than being letterboxed. */
  aspect-ratio: var(--nk-ratio-square);
  object-fit: contain;
}

.nk-promo__object--trail {
  /* Hidden on a phone: two objects around a two-line Persian sentence at 360px
     leave the sentence about 190px, and the promise is what matters.
     Decoration is the first thing to go, never the copy. */
  display: none;
}

.nk-promo--ship .nk-promo__body {
  display: grid;
  gap: var(--nk-space-1);
  min-inline-size: 0;
}

.nk-promo--ship .nk-promo__title {
  font-size: var(--nk-text-lg);
  font-weight: var(--nk-weight-bold);
  line-height: var(--nk-leading-snug);
}

.nk-promo__amount {
  color: var(--nk-text-accent);
  white-space: nowrap;
}

.nk-promo--ship .nk-promo__text {
  font-size: var(--nk-text-sm);
}

@media (min-width: 480px) {
  .nk-promo--ship {
    --nk-ship-object: var(--nk-space-20); /* 80px */
  }

  .nk-promo--ship .nk-promo__title { font-size: var(--nk-text-xl); }
  .nk-promo--ship .nk-promo__text { font-size: var(--nk-text-base); }
}

@media (min-width: 768px) {
  .nk-home-ship { padding-block-end: var(--nk-space-10); }

  .nk-promo--ship {
    --nk-ship-object: calc(var(--nk-space-20) + var(--nk-space-4)); /* 96px */

    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--nk-space-6) var(--nk-space-8);
    gap: var(--nk-space-6);
  }

  /* Both objects present, so the copy sits centred between them rather than
     drifting to one side of a very wide band. */
  .nk-promo--ship .nk-promo__body { justify-items: center; text-align: center; }
  .nk-promo__object--trail { display: block; }
  .nk-promo--ship .nk-promo__title { font-size: var(--nk-text-2xl); }

  /* A few degrees off axis, once there is room for it: a render sitting
     perfectly upright reads as a pasted-in icon, and this is meant to be an
     object resting on the band. Both tilt away from the copy, so the eye is
     pushed back to the sentence. Not on a phone, where the object is small and
     the tilt only costs it width. */
  .nk-promo__object--lead { transform: rotate(-5deg); }
  .nk-promo__object--trail { transform: rotate(5deg); }
}

@media (min-width: 1024px) {
  .nk-promo--ship {
    --nk-ship-object: calc(var(--nk-space-24) + var(--nk-space-2)); /* 104px */

    padding-block: var(--nk-space-6);
  }
}

/* =======================================================================
 * BRANDS — .nk-brand-rail / .nk-brand-card
 * «برندها», rendered by nk_home_brands(). A row of compact logo cards, each
 * one a link to that brand's own WooCommerce archive.
 *
 * Homepage-scoped, like .nk-promo--ship above and for the same reason: it
 * renders on exactly one page today, and commerce.css is loaded on every route
 * in the store including the checkout. If a second template ever wants a brand
 * row, this block moves to commerce.css in that change — not before.
 *
 * The overflow is the same native scroll-snap track the product rails use:
 * `overflow-x: auto` plus `scroll-snap-type`, which is the whole mechanism.
 * Touch gets the platform's own gesture, a keyboard reaches every card because
 * every card is a link, and it all works with JavaScript off. `data-nk-rail` in
 * the markup opts into initRails() for the mouse pointer-drag only — there are
 * no arrows here: a logo is recognised, not paged through.
 * ===================================================================== */

.nk-home-brands {
  padding-block-end: var(--nk-space-8);
}

/* The rails above carry the rhythm between sections; the component's own top
   margin would add to it. Same treatment as .nk-home-bestsellers. */
.nk-brand-rail-section {
  margin-block-start: 0;
}

/*
 * One heading size for the whole run of sections.
 *
 * The two rails head themselves with `.nk-rail-section__title` (`--nk-text-xl`);
 * «پرفروش‌ترین کالاها» and «برندها» use the shared SectionTitle, whose default is
 * a page-level 24px growing to 28px at 768. Stacked one after another they read
 * as two levels of heading on a page that only has one — the sections are peers,
 * so they get the rail's size. The component keeps its own default everywhere
 * else; this is the homepage tuning a shared component, which is what this
 * stylesheet is for.
 */
.nk-home-bestsellers .nk-section-title__text,
.nk-home-brands .nk-section-title__text {
  font-size: var(--nk-text-xl);
}

.nk-home-bestsellers .nk-section-title__sub,
.nk-home-brands .nk-section-title__sub {
  font-size: var(--nk-text-sm);
}

/* The progress bar is the row's only "there is more" cue, so it sits close
   enough to the track to read as part of it. */
.nk-brand-rail-section .nk-rail-progress {
  margin-block-start: var(--nk-space-2);
}

/*
 * Three cards to a phone with the fourth breaking the edge — the sliver is the
 * only affordance the row needs, exactly as on the product rails.
 *
 * Two classes, not one: `ul[class], ol[class]` in base.css is (0,1,1) and zeroes
 * margin and padding, so a single-class rule would lose its bleed. See
 * .claude/rules/css.md.
 */
.nk-brand-rail-section .nk-brand-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 30%;
  gap: var(--nk-space-3);
  overflow-x: auto;

  /*
   * `proximity`, not `mandatory`.
   *
   * A row of logos is browsed, not paged: with `mandatory` every release was
   * yanked to the nearest card — "you let go and it moves on its own" — and a
   * flick that ended between two cards was overruled. `proximity` tidies up a
   * release that is already almost aligned and leaves every other one alone.
   * `initRails()` reads this: it only forces an alignment on a mandatory track.
   */
  scroll-snap-type: x proximity;

  /* Bleed to the screen edge, exactly as .nk-product-rail does. */
  padding-inline: var(--nk-gutter);
  margin-inline: calc(var(--nk-gutter) * -1);

  /*
   * The snapport has to be inset by the same gutter the track is padded with.
   * Without this the first card's snap position sits one gutter inside the
   * scrollport, so the browser scrolls the row **on load** to satisfy it: the
   * track opened already nudged off its start edge, with the first logo cropped
   * against the right edge in RTL. Measured at 1280: a 32px offset before
   * anything had been touched.
   */
  scroll-padding-inline: var(--nk-gutter);

  /*
   * Room above and below for the cards' shadow and their 2px hover lift.
   * `overflow-x: auto` computes `overflow-y` to `auto` as well, so the track
   * clips vertically no matter what the y value says — a lifted card was being
   * cut off along its top edge. Padding is the only way to give it room, and
   * 16px is `--nk-shadow-md`'s 20px blur minus its 6px downward offset, so the
   * soft edge lands inside the box at both ends.
   */
  padding-block: var(--nk-space-4);

  scrollbar-width: none;
  overscroll-behavior-x: contain;
  list-style: none;
}
.nk-brand-rail::-webkit-scrollbar { display: none; }
.nk-brand-rail > * { scroll-snap-align: start; }

/* ui.js suspends the snap for a mouse drag; the cursor says the row can be
   pulled and text must not start selecting mid-drag. Touch never reaches this. */
.nk-brand-rail.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }

@media (min-width: 480px) { .nk-brand-rail-section .nk-brand-rail { grid-auto-columns: 24%; } }
@media (min-width: 768px) {
  .nk-home-brands { padding-block-end: var(--nk-space-10); }
  .nk-brand-rail-section .nk-brand-rail { grid-auto-columns: 18%; gap: var(--nk-space-3); }
}

/*
 * Eight across the container exactly — the gaps are subtracted rather than
 * approximated, so the eighth card ends on the container edge and the ninth is
 * the one that says there is more.
 *
 * Six was the first pass and the cards came out 183px wide holding a 96px
 * wordmark: a logo chip blown up to the size of a product card. A brand row is
 * a strip of marks a parent recognises in passing, not a grid of destinations,
 * so on desktop the card gets smaller as the screen gets larger, not bigger.
 */
@media (min-width: 1024px) {
  .nk-brand-rail-section .nk-brand-rail {
    grid-auto-columns: calc((100% - (7 * var(--nk-space-3))) / 8);
  }
}

/*
 * The card. Compact by intent: a logo, a name, nothing else. No product count —
 * a number beside a wordmark reads as a price at a glance, and the ranking is
 * already expressed by the order.
 *
 * **White card, and the depth comes from the shadow.** A cream card with a
 * white plate inside it was tried and reads as two boxes rather than one
 * object; the logos are flattened onto white by `build-brand-logos.py`, so
 * white is also the only ground that cannot print a rectangle around them. The
 * card sits *on* the cream page instead of being cut out of it: a resting
 * shadow, a hairline, and a deeper shadow with a 2px lift under the pointer.
 */
.nk-brand-card {
  /* One number for the logo row, so the box and the image inside it can never
     disagree about how tall a logo is. */
  --nk-brand-logo: var(--nk-space-12); /* 48px */

  display: grid;
  gap: var(--nk-space-2);
  justify-items: center;
  align-content: center;
  padding: var(--nk-space-3) var(--nk-space-2);
  background-color: var(--nk-surface-raised);
  border: var(--nk-border-hairline);
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--nk-shadow-xs);
  text-decoration: none;
  block-size: 100%;
  transition:
    transform var(--nk-transition-base),
    border-color var(--nk-transition-base),
    box-shadow var(--nk-transition-base);
}

@media (hover: hover) {
  .nk-brand-card:hover { border-color: var(--nk-border-default); box-shadow: var(--nk-shadow-md); }
}
.nk-brand-card:focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--nk-focus-ring-color);
  outline-offset: var(--nk-focus-ring-offset);
}
.nk-brand-card:active { border-color: var(--nk-border-strong); }

/*
 * The same 2px lift the product and category cards use — `motion.css` owns that
 * rule for the global components, and this one is homepage-scoped, so it carries
 * its own copy including the reduced-motion reset. Deliberately no more than
 * that: the tell of a cheap storefront is UI that bounces.
 */
@media (hover: hover) {
  .nk-brand-card:hover { transform: translateY(-2px); }
}
.nk-brand-card:active { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .nk-brand-card:hover,
  .nk-brand-card:active { transform: none; }
}

/* No disabled state: the card is a link to a brand archive, and a brand with
   nothing in stock is not rendered at all rather than shown greyed out. */

/*
 * A fixed logo *height*, not an aspect ratio. The artwork arrives at wildly
 * different proportions — a wide wordmark, a stacked lockup — and it is equal
 * optical height that makes eight logos read as one set. The width is whatever
 * `contain` gives them inside the plate.
 */
.nk-brand-card__media {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: var(--nk-brand-logo);
}

/*
 * The height is stated on the **image**, in a length, and `object-fit: contain`
 * letterboxes the artwork inside it. Two obvious ways to write this are both
 * wrong, and both were measured in Chrome rather than guessed:
 *
 *   - `block-size: auto` with `max-block-size: 100%` — the intrinsic 600×400
 *     gives the img an aspect ratio, the width cap settles it at the card's
 *     width, and the height that ratio implies (104px) simply ignored the cap.
 *   - `block-size: 100%` against a box with a definite height — the percentage
 *     never resolved either; the img stayed at its aspect-ratio height and
 *     printed the wordmark over the brand's name.
 *
 * A length has no containing block to resolve against and cannot do either.
 *
 * Two classes: `.woocommerce-page img { height: auto }` is (0,1,1), and this row
 * renders inside our own chrome today but must not break if the section is ever
 * dropped onto a commerce route. See .claude/rules/css.md.
 */
.nk-brand-card__media .nk-brand-card__img {
  inline-size: 100%;
  block-size: var(--nk-brand-logo);
  object-fit: contain;
}

/*
 * No artwork: the brand's wordmark set in the display face, muted, on the same
 * surface the card already has. A missing logo should look like a quiet
 * typographic card, never like a failed image or a generic grey placeholder.
 */
.nk-brand-card__fallback {
  font-family: var(--nk-font-display);
  font-size: var(--nk-text-base);
  font-weight: var(--nk-weight-bold);
  line-height: var(--nk-leading-tight);
  color: var(--nk-text-muted);
  text-align: center;
  /* Two words of a long label wrap rather than pushing the card wider. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*
 * The last item in the row: a text link with an arrow, not a card.
 *
 * It sits in a full-width grid track like everything else — the track keeps the
 * row's rhythm — but paints nothing of its own, so it reads as the row ending
 * rather than as one more brand. Deliberately not a filled button either: the
 * homepage's one `--primary` action belongs to the hero.
 */
.nk-brand-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nk-space-1);
  block-size: 100%;
  min-block-size: var(--nk-touch-target);
  padding-inline: var(--nk-space-2);
  color: var(--nk-text-accent);
  font-size: var(--nk-text-sm);
  font-weight: var(--nk-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--nk-transition-base);
}

@media (hover: hover) {
  .nk-brand-more:hover { color: var(--nk-action-primary-hover); text-decoration: underline; }
}
.nk-brand-more:active { color: var(--nk-action-primary-active); }
.nk-brand-more:focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--nk-focus-ring-color);
  outline-offset: var(--nk-focus-ring-offset);
  border-radius: var(--nk-radius-sm);
}

@media (hover: hover) {
  /* A nudge toward where the arrow points. `translate` is physical, and that is
     deliberate here: the site is `fa_IR` and RTL-only, so "forward" is negative
     X. If an LTR locale ever ships, this flips. */
  .nk-brand-more:hover .nk-icon { translate: calc(var(--nk-space-1) * -1) 0; }
}
.nk-brand-more .nk-icon { transition: translate var(--nk-transition-base); }

@media (prefers-reduced-motion: reduce) {
  .nk-brand-more:hover .nk-icon { translate: none; }
}

/* Always present, artwork or not — a logo alone is a guess for anyone who does
   not already know the mark, and it is the only text the link carries. */
.nk-brand-card__name {
  inline-size: 100%;
  font-size: var(--nk-text-xs);
  font-weight: var(--nk-weight-medium);
  line-height: var(--nk-leading-snug);
  color: var(--nk-text-default);
  text-align: center;
  /* One line at every width — it is what keeps the cards the same height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * One step up on a tablet, and no further. The logo grew to 64px at 768 and
 * stayed there while the card kept getting wider, which is how a compact chip
 * turns into a poster; 56px with the smaller desktop card holds the row at the
 * size a mark is read at.
 */
@media (min-width: 768px) {
  .nk-brand-card {
    --nk-brand-logo: calc(var(--nk-space-12) + var(--nk-space-2)); /* 56px */

    padding: var(--nk-space-3);
  }
  .nk-brand-card__fallback { font-size: var(--nk-text-base); }
  .nk-brand-card__name { font-size: var(--nk-text-sm); }
}

/* =======================================================================
 * SEASONAL BANNERS — .nk-home-banners
 * The band below «برندها», rendered by nk_home_banners().
 *
 * Homepage-scoped, like .nk-promo--ship and .nk-brand-rail above and for the
 * same reason: it renders on exactly one page today.
 *
 * The component is almost nothing, and deliberately: each banner is a finished
 * studio composition with its own headline and its own button painted into the
 * pixels, so everything this file does is give the picture a box of the right
 * shape, round its corners and make the whole of it pressable. Anything drawn
 * on top of, or around, that artwork competes with a design that is already
 * complete.
 *
 * 16:9 at every width, one file. The band shipped with an art-directed square
 * crop below 768px and the shop owner asked for the wide frame on the phone as
 * well — so there is no ratio swap, no <picture> and nothing here that has to
 * stay in step with a media query in PHP. If a second crop ever comes back,
 * that agreement comes back with it.
 * ===================================================================== */

.nk-home-banners {
  padding-block-end: var(--nk-space-8);
}

/* A list with a class, so it needs two classes to beat base.css's
   `ul[class] { margin: 0; padding: 0 }` reset — see .claude/rules/css.md. */
.nk-home-banners .nk-home-banners__list {
  display: grid;
  gap: var(--nk-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nk-home-banner,
.nk-home-banners .nk-home-banner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--nk-radius-xl);
  /* Reserved before the picture decodes, so nothing below it ever jumps.
     One ratio at every width — the artwork is the wide campaign frame on a
     phone too, at the shop owner's instruction. */
  aspect-ratio: var(--nk-ratio-banner);
  background-color: var(--nk-surface-sunken);
  color: inherit;
  text-decoration: none;
}

.nk-home-banner__img,
.nk-home-banner .nk-home-banner__img {
  /* Two classes: `.woocommerce-page img { height: auto }` would collapse this
     to intrinsic height if the band ever renders on a commerce route. */
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--nk-transition-base);
}

/*
 * Hover does nothing to the frame — no ring, no border, no coral edge.
 *
 * This is the second time that has been asked for on this artwork, so it is
 * written down rather than left to taste: these compositions carry their own
 * button, and an outline appearing around the whole picture on hover reads as
 * a rendering fault rather than as an affordance. The cursor is the
 * affordance; the acknowledgement is a whisper of brightness on the picture.
 */
@media (hover: hover) {
  a.nk-home-banner:hover .nk-home-banner__img {
    filter: brightness(1.04);
  }
}

a.nk-home-banner:active .nk-home-banner__img {
  filter: brightness(0.97);
}

/* Focus is the one state that does draw a ring, and it is never optional. It
   sits inside the banner's own clip so a rounded corner cannot crop it. */
a.nk-home-banner:focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--nk-focus-ring-color);
  outline-offset: calc(-1 * (var(--nk-focus-ring-width) + var(--nk-focus-ring-offset)));
}

/* ≥768 — two banners across. Below it they stack, because a 16:9 banner at
   360px is already only 184px tall and two side by side would be unreadable. */
@media (min-width: 768px) {
  .nk-home-banners .nk-home-banners__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nk-space-6);
  }
}