/* ===========================================================================
   Nilades Products Category Grid
   ---------------------------------------------------------------------------
   Everything is scoped to `.npc`, so nothing here can reach the rest of the
   page. Only the accent colour and the column count are set from PHP, as
   custom properties on the section element.

   The caption is the idea. It steps across the left edge of the image in three
   moves — the small label pulled outside, the name pushed in, the rule pulled
   back out again — so the eye reads down a short diagonal instead of a stack.
   Logical properties (`inline-start`, not `left`) do that mirroring for Persian
   without a second set of rules.
   ======================================================================== */

.npc {
  --npc-accent: #f1a492;
  --npc-eyebrow: #9b9b9b;
  --npc-muted: #9a9a9a;
  --npc-gap: clamp(2rem, 5vw, 5rem);
  --npc-row: clamp(2.5rem, 4.2vw, 4.5rem);
  --npc-drop: clamp(1.25rem, 3.4vw, 3.5rem);
  --npc-caption: clamp(2rem, 4vw, 3.75rem);

  box-sizing: border-box;
  width: 100%;
}

.npc *,
.npc *::before,
.npc *::after {
  box-sizing: inherit;
}

.npc.is-light {
  --npc-eyebrow: #6f6f6f;
  --npc-muted: #6f6f6f;
}

.npc [hidden] {
  display: none !important;
}

.npc-heading {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}

/* A short accent rule under the title, the same mark the cards carry, so the
   heading reads as part of the grid rather than a stray line of text above it. */
.npc-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 1.1rem auto 0;
  background: var(--npc-accent);
}

.npc-heading.npc-arabic {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Filter bar
   ------------------------------------------------------------------------ */

.npc-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(2rem, 5vw, 4rem);
}

.npc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--npc-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Chip reset
   ---------------------------------------------------------------------------
   Themes style every <button> — a filled background, a border, and very often
   an animated `::before` wash that slides across on hover. On a filter chip
   that wash lands on top of the label, and because the theme also recolours
   button text on hover the label ends up the same colour as the fill and
   vanishes mid-interaction.

   So the chip states its own appearance rather than inheriting one. These are
   the only `!important` declarations in the file outside the RTL block, and
   they are scoped to `.npc-filters`, so no other button on the page is
   affected. The pseudo-elements are removed outright: the underline is a real
   `<span class="npc-chip-rule">`, not a pseudo-element, so nothing of ours is
   lost with them.
   ------------------------------------------------------------------------ */

.npc .npc-filters .npc-chip,
.npc .npc-filters .npc-chip:hover,
.npc .npc-filters .npc-chip:focus,
.npc .npc-filters .npc-chip:focus-visible,
.npc .npc-filters .npc-chip:active {
  padding: 0.25rem 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-text-fill-color: currentColor !important;
  outline: none !important;
}

/* Suppressing the theme's focus ring above would leave a keyboard user with
   nothing, so the chip puts its own back for the case that matters. */
.npc .npc-filters .npc-chip:focus-visible {
  outline: 2px solid var(--npc-accent) !important;
  outline-offset: 5px !important;
}

.npc .npc-filters .npc-chip::before,
.npc .npc-filters .npc-chip::after {
  content: none !important;
  display: none !important;
}

.npc .npc-filters .npc-chip-text {
  position: relative;
  z-index: 1;
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.npc-chip:hover,
.npc-chip:focus-visible {
  color: var(--npc-accent);
}

.npc-chip[aria-pressed="true"] {
  color: var(--npc-accent);
}

/* The underline is the whole hover gesture: it grows out from the centre and
   takes the text colour, so hovering reads as the same act as selecting,
   only lighter. The selected chip holds it at full strength. */
.npc-chip-rule {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.npc-chip:hover .npc-chip-rule,
.npc-chip:focus-visible .npc-chip-rule {
  opacity: 0.7;
  transform: scaleX(1);
}

.npc-chip[aria-pressed="true"] .npc-chip-rule {
  background: var(--npc-accent);
  opacity: 1;
  transform: scaleX(1);
}


/* ---------------------------------------------------------------------------
   Shared item
   ------------------------------------------------------------------------ */

.npc-item {
  position: relative;
  margin: 0;
}

.npc-media {
  position: relative;
  overflow: hidden;
}

/* Themes ship `img { height: auto }`, usually with `!important`. Against a box
   with a fixed aspect ratio that leaves the picture shorter than its frame and
   a strip of whatever is behind it showing along the bottom edge — the grey
   band under some cards. The frame carries the ratio, so the picture is told
   to fill it outright, and the frame itself is left transparent so that even
   if something does slip through there is nothing grey to see. */
.npc .npc-media .npc-image {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: none !important;
  vertical-align: top;
}

.npc-media-link {
  display: block;
  height: 100%;
  text-decoration: none;
}

.npc-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.npc-item:hover .npc-image {
  transform: scale(1.03);
}

.npc-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.npc-eyebrow {
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--npc-eyebrow);
  white-space: nowrap;
}

.npc-title {
  margin: 0.55rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--npc-accent);
}

.npc-title a {
  color: inherit;
  text-decoration: none;
  border: 0;
}

.npc-title a:focus-visible {
  outline: 2px solid var(--npc-accent);
  outline-offset: 4px;
}

.npc-rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-block-start: 0.9rem;
  background: var(--npc-accent);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.npc-item:hover .npc-rule,
.npc-item:focus-within .npc-rule {
  width: 5rem;
}

/* reorder mode: nothing leaves the page, so the cards that do not match step
   back rather than disappear. */
.npc-item.is-dimmed {
  opacity: 0.32;
  transition: opacity 0.4s ease;
}

.npc-item {
  transition: opacity 0.4s ease;
}

.npc-empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--npc-muted);
}

/* ---------------------------------------------------------------------------
   Persian
   The site's Additional CSS forces `direction: ltr !important` on the document
   and on headings, paragraphs and list items. That is unconditional, so it
   applies on /fa/ too and would flip this section back. These rules are scoped
   to `.npc.is-rtl` — a class this plugin adds and controls — and they are the
   only place `!important` appears in this file.

   `unicode-bidi: plaintext` lets each caption pick its own direction from its
   own first strong character, so a Latin product name still runs left to right
   inside a Persian page instead of arriving reversed.
   ------------------------------------------------------------------------ */

.npc.is-rtl {
  direction: rtl !important;
  text-align: right !important;
}

.npc.is-rtl .npc-heading,
.npc.is-rtl .npc-empty {
  text-align: center !important;
}

.npc-eyebrow,
.npc-title {
  unicode-bidi: plaintext;
}

.npc.is-rtl .npc-eyebrow,
.npc.is-rtl .npc-title {
  direction: rtl !important;
  text-align: start !important;
}

/* Arabic script is cursive and caseless. Wide tracking breaks the joins and
   `uppercase` does nothing, so both come off for any caption actually written
   in it — which is decided per string, not per page, so a Persian name in an
   English grid is handled too. */
.npc-eyebrow.npc-arabic,
.npc-title.npc-arabic {
  letter-spacing: normal;
  text-transform: none;
}

.npc-eyebrow.npc-arabic {
  font-size: 0.8125rem;
}

.npc-title.npc-arabic {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
}

/* ---------------------------------------------------------------------------
   Layout: stagger — the one in the brief
   Left column tall, right column wide and dropped, captions overhanging the
   image edge.
   ------------------------------------------------------------------------ */

/* The caption hangs outside the image by design, so the section reserves that
   much room on both sides. Without it the first column's label is the first
   thing a container with `overflow: hidden` clips. */
.npc-layout-stagger {
  padding-inline: 2.4rem;
}

.npc-cols {
  display: grid;
  grid-template-columns: repeat(var(--npc-columns, 2), minmax(0, 1fr));
  gap: var(--npc-gap);
  align-items: start;
}

.npc-col {
  display: flex;
  flex-direction: column;
  gap: var(--npc-row);
  min-width: 0;
}

/* Odd columns drop by the full step, even ones by half, so a three- or
   four-column grid keeps the staggered rhythm instead of falling back into a
   flat row. */
.npc-col[data-npc-col="1"],
.npc-col[data-npc-col="3"],
.npc-col[data-npc-col="5"] {
  padding-block-start: var(--npc-drop);
}

.npc-col[data-npc-col="2"],
.npc-col[data-npc-col="4"] {
  padding-block-start: calc(var(--npc-drop) * 0.45);
}

.npc-layout-stagger .npc-item.is-tall .npc-media {
  aspect-ratio: 2 / 3;
}

.npc-layout-stagger .npc-item.is-wide .npc-media {
  aspect-ratio: 4 / 3;
}

/* Every second card in a dropped column gets a little more air above it, so
   the two columns never settle into a regular repeating rhythm. */
.npc-col[data-npc-col="1"] .npc-item:nth-child(even),
.npc-col[data-npc-col="3"] .npc-item:nth-child(even) {
  margin-block-start: clamp(0.5rem, 2vw, 2rem);
}

.npc-layout-stagger .npc-label {
  position: absolute;
  inset-inline-start: 0;
  top: var(--npc-caption);
  z-index: 2;
  pointer-events: none;
}

/* The caption deliberately overhangs the image, so part of it always lands on
   the photograph — and the catalogue is full of pale tiles. A wash across the
   corner the caption occupies carries the contrast; the shadow is then only
   there to hold the thin letterforms together. */
.npc-layout-stagger .npc-eyebrow,
.npc-layout-stagger .npc-title {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.npc-layout-stagger.is-light .npc-eyebrow,
.npc-layout-stagger.is-light .npc-title {
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}

/* On the wash the caption is reading against a dark corner rather than the
   page, so the small label steps up to match it. */
.npc-layout-stagger.has-scrim .npc-eyebrow {
  color: rgba(255, 255, 255, 0.74);
}

.npc-layout-stagger.has-scrim.is-light .npc-eyebrow {
  color: rgba(0, 0, 0, 0.62);
}

.npc-layout-stagger.has-scrim .npc-media::after,
.npc-layout-grid.has-scrim .npc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.26) 30%,
    rgba(0, 0, 0, 0) 62%
  );
}

.npc-layout-stagger.has-scrim.is-rtl .npc-media::after,
.npc-layout-grid.has-scrim.is-rtl .npc-media::after {
  background: linear-gradient(
    242deg,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.26) 30%,
    rgba(0, 0, 0, 0) 62%
  );
}

.npc-layout-stagger.has-scrim.is-light .npc-media::after {
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.34) 30%,
    rgba(255, 255, 255, 0) 62%
  );
}

/* The caption is below the image in the grid layout, so it needs no wash. */
.npc-layout-grid.has-scrim .npc-media::after {
  content: none;
}

/* The three parts of the caption share one edge. An earlier version stepped
   them across the image, which reads well on a one-word name and badly on
   "Tenia Light Gray" — the title started further in than the label above it and
   the rule below, and the eye lost the line. One inset, one alignment. */
.npc-layout-stagger .npc-eyebrow,
.npc-layout-stagger .npc-title,
.npc-layout-stagger .npc-rule {
  margin-inline-start: var(--npc-caption-inset, -2.2rem);
}

.npc-layout-stagger .npc-title {
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   Layout: grid — caption below the image
   ------------------------------------------------------------------------ */

.npc-grid {
  display: grid;
  grid-template-columns: repeat(var(--npc-columns, 3), minmax(0, 1fr));
  gap: var(--npc-gap);
  align-items: start;
}

.npc-layout-grid .npc-media {
  aspect-ratio: 4 / 5;
}

.npc-layout-grid .npc-label {
  margin-block-start: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Layout: accordion — panels that open under the pointer or the focus
   ------------------------------------------------------------------------ */

.npc-accordion {
  display: flex;
  gap: 0.5rem;
  min-height: clamp(20rem, 46vh, 34rem);
}

.npc-layout-accordion .npc-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.npc-layout-accordion .npc-item:hover,
.npc-layout-accordion .npc-item:focus-within,
.npc-layout-accordion .npc-item.is-open {
  flex-grow: 3.2;
}

.npc-layout-accordion .npc-media,
.npc-layout-accordion .npc-media-link {
  height: 100%;
}

.npc-layout-accordion .npc-image {
  height: 100%;
  transform: none;
}

.npc-layout-accordion .npc-item:hover .npc-image {
  transform: none;
}

.npc-layout-accordion .npc-label {
  position: absolute;
  inset-inline-start: clamp(1rem, 2vw, 1.75rem);
  inset-block-end: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 2;
  padding-inline-end: 1rem;
}

.npc-layout-accordion .npc-eyebrow,
.npc-layout-accordion .npc-title {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.npc-layout-accordion .npc-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------------------------
   Narrow screens
   The overhanging caption needs room either side of the image. Below this
   width there is none, so the caption comes back inside and the columns
   collapse into one.
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .npc-layout-stagger {
    padding-inline: 0;
  }

  .npc-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 9vw, 4rem);
  }

  /* One column, in catalogue order. The column wrappers step out of the way
     with `display: contents` and each card takes its position from the order
     the server rendered it in, so folding two columns into one does not
     interleave the sequence. */
  .npc-cols {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 9vw, 4rem);
  }

  .npc-col {
    display: contents;
  }

  .npc-cols .npc-item {
    order: var(--npc-order, 0);
  }

  .npc-col[data-npc-col] {
    padding-block-start: 0;
  }

  .npc-col[data-npc-col] .npc-item {
    margin-block-start: 0;
  }

  .npc-layout-stagger .npc-item.is-tall .npc-media,
  .npc-layout-stagger .npc-item.is-wide .npc-media,
  .npc-layout-grid .npc-media {
    aspect-ratio: 4 / 3;
  }

  .npc-layout-stagger .npc-label {
    position: static;
    margin-block-start: 1.1rem;
  }

  .npc-layout-stagger .npc-eyebrow,
  .npc-layout-stagger .npc-title,
  .npc-layout-stagger .npc-rule {
    margin-inline-start: 0;
  }

  .npc-accordion {
    flex-direction: column;
    min-height: 0;
  }

  .npc-layout-accordion .npc-item {
    flex: 0 0 auto;
  }

  .npc-layout-accordion .npc-media {
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------------------------
   Motion preference
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .npc-image,
  .npc-rule,
  .npc-chip,
  .npc-chip-rule,
  .npc-layout-accordion .npc-item {
    transition: none;
  }

  .npc-item:hover .npc-image {
    transform: none;
  }

  .npc-item,
  .npc-item.is-dimmed {
    transition: none;
  }

  .npc-chip-rule,
  .npc-chip:hover .npc-chip-rule,
  .npc-chip[aria-pressed="true"] .npc-chip-rule {
    transform: none;
  }
}