/*
 * Nilades — catalogue and single-product corrections.
 *
 * Loaded in both languages. Direction-specific rules live in fa-site-rtl.css
 * and fa-rtl.css; nothing here changes text direction.
 */

/* ===========================================================================
   1. No decorative dot grids
   ArcPrime paints three dotted panels with radial-gradient pseudo-elements:
     .aps-page-head::after       220x105, behind the page heading
     .aps-signature-panel::after 115x74,  in the product summary
     .aps-modular-copy::before   112x72,  in the modular panel
   All three are removed. The band of dots that showed under the product cards
   came from the first one: it is absolutely positioned against .aps-page-head,
   and once the heading block is short the panel overhangs into the grid.
   ======================================================================== */

.aps-page-head::after,
.aps-page-head::before,
.aps-signature-panel::after,
.aps-signature-panel::before,
.aps-modular-copy::before,
.aps-modular-copy::after,
.aps-catalogue .aps-page-head-copy::before,
.aps-catalogue .aps-page-head-copy::after,
.aps-catalogue .aps-filters::before,
.aps-catalogue .aps-filters::after,
.aps-catalogue .aps-filter-sidebar::before,
.aps-catalogue .aps-filter-sidebar::after,
.aps-catalogue .aps-results::before,
.aps-catalogue .aps-results::after,
.aps-catalogue .aps-grid::before,
.aps-catalogue .aps-grid::after,
.aps-catalogue .aps-card::after {
  content: none !important;
  background-image: none !important;
}

/* Anything else painting a dot pattern inside the catalogue or on a product
   page, including the About-section grids if a template pulls them in. */
.aps-catalogue [class*="dot"],
.aps-catalogue .aps-dots,
.aps-catalogue .dot-grid,
body.nilades-products-dark .elementor-widget-bdevs-about .arcprime-about-img::after,
body.nilades-products-dark .elementor-widget-bdevs-about .col-md-3::after {
  background-image: none !important;
  content: none !important;
}

/* ===========================================================================
   2. Single product: tab row centred
   "Description", "Specifications", "Modular" — and their Persian equivalents —
   read as a centred set rather than a left-hung row.
   ======================================================================== */

/* Only the tab row is centred. An earlier version also centred and narrowed
   the description copy, which pulled the heading and standfirst away from the
   text edge and made both languages look indented. The copy is left to the
   column it sits in; only its measure is widened so it fills that column. */
.aps-single .aps-tabs,
.aps-tabs-wrap .aps-tabs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px;
  text-align: center !important;
}

.aps-description-layout > .aps-description-heading h2 {
  max-width: 820px;
}

.aps-single .aps-description-lead {
  margin-inline: auto;
  max-width: 120ch;
}

/* ===========================================================================
   3. Single product: highlight rows
   Markup is <div><span>Label</span><strong>Value</strong></div>.

   Two problems in Persian. The row is a flex line, so the browser paints the
   <strong> first and it reads "قهوه‌ای  رنگ" instead of "رنگ  قهوه‌ای". And the
   labels do not line up with one another, because each column is sized to its
   own content, which leaves the block drifting in the middle of the container
   instead of sitting against the text edge.

   Fixed by giving the label a fixed column and letting the value take the rest,
   so every row starts at the same place and the block aligns with the paragraph
   above it.
   ======================================================================== */

.aps-editorial-specs {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
  gap: 10px;
}

.aps-editorial-specs > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 16px;
  width: 100%;
}

.aps-editorial-specs > div > span {
  order: 0 !important;
  flex: 0 0 clamp(70px, 8vw, 104px);
  width: clamp(70px, 8vw, 104px);
}

.aps-editorial-specs > div > strong {
  order: 1 !important;
  flex: 1 1 auto;
  min-width: 0;
  /* Latin values — "60 × 120 cm", face counts — keep their own run order
     inside a Persian row so the numbers are not reversed. */
  unicode-bidi: plaintext;
}

/* ===========================================================================
   4. Face grid
   The panel is hidden until its tab is chosen, so it must not be given a
   display value here. Only the grid inside it is styled.
   ======================================================================== */

.aps-single .aps-face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.aps-single .aps-face {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.aps-single .aps-face img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.aps-single .aps-face span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

/* ===========================================================================
   5. Filter artwork drawn by this plugin
   Sized and cropped exactly like ArcPrime's own marks so the cards keep their
   dimensions, hover and responsive behaviour.
   ======================================================================== */

.ncr-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ncr-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ncr-art svg [fill="none"],
.ncr-art svg path,
.ncr-art svg rect,
.ncr-art svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ncr-art svg .ncr-solid {
  fill: currentColor;
  stroke: none;
}

.ncr-art svg .ncr-ray {
  stroke-width: 1.2;
  opacity: 0.7;
}

.ncr-art svg .ncr-sheen {
  stroke-width: 2.4;
  opacity: 0.45;
}

.ncr-art svg .ncr-hair {
  stroke-width: 1;
  opacity: 0.5;
}

.ncr-art-unknown {
  opacity: 0.4;
}

/* Photographic term images use ArcPrime's own thumbnail treatment; only the
   background behaviour is stated here in case the class is absent. */
.ncr-term-thumb {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* ===========================================================================
   6. Colour swatches
   One square per colour the collection is made in, inserted after the
   highlights block. Squares are a true 1cm: `cm` is a real CSS unit and is the
   size that was asked for, so it is used literally rather than approximated in
   pixels.
   ======================================================================== */

.ncr-swatches {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 26px 0 4px;
  padding-block: 4px;
}

.ncr-swatches-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}

.ncr-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Asked for explicitly: the row sits at the right in English and at the left
     in Persian — the opposite of each language's text edge. `direction: ltr`
     is set first so `flex-end` always means the physical right here, and the
     Persian layer overrides it with `flex-start`. */
  direction: ltr;
  justify-content: flex-end;
  padding-inline: 2px 0;
}

.ncr-swatch {
  position: relative;
  width: 1cm;
  height: 1cm;
  padding: 0;
  border: 1px solid var(--ncr-swatch-edge, rgba(255, 255, 255, 0.14));
  border-radius: 2px;
  background: var(--ncr-swatch-fill, #6e6e6e);
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* The theme's Additional CSS turns every button and link peach on hover:
     body:not(.wp-admin) button:hover { background-color:#F1A492 !important }
     body:not(.wp-admin) a:hover      { color:#F1A492 !important }
   That is what painted a pink wash over the swatch. The fill and border are
   restated here so the square keeps its own colour, and hover is left as pure
   movement — no overlay, no border change, no shadow. */
.ncr-swatch:hover,
.ncr-swatch:focus,
.ncr-swatch:focus-visible,
.ncr-swatch.is-current,
.ncr-swatch:active {
  background: var(--ncr-swatch-fill, #6e6e6e) !important;
  background-color: var(--ncr-swatch-fill, #6e6e6e) !important;
  border-color: var(--ncr-swatch-edge, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* No tint on any colour element anywhere: the filter-panel colour swatches and
   the product swatches both have to show the true colour on hover, or the
   shopper is judging a shade that is not the one they would receive. */
.aps-color-swatch,
.aps-color-swatch > i,
.aps-filter-option:hover .aps-color-swatch,
.aps-filter-option:hover .aps-color-swatch > i,
.aps-filter-option:focus-within .aps-color-swatch,
.aps-filter-option:focus-within .aps-color-swatch > i,
label:hover > .aps-option-visual,
label:focus-within > .aps-option-visual,
.aps-option-visual:hover,
.ncr-swatch > *,
.ncr-swatch:hover > * {
  background-color: inherit;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.aps-filter-option:hover .aps-color-swatch::before,
.aps-filter-option:hover .aps-color-swatch::after,
.aps-filter-option:hover .aps-option-visual::before,
.aps-filter-option:hover .aps-option-visual::after,
.ncr-swatch:hover::before,
.ncr-swatch:hover::after {
  background-color: transparent;
}

/* `::after` on an unavailable swatch is the diagonal score, not a tint, so it
   is put back after the rule above clears everything else. */
.ncr-swatch.is-unavailable:hover::after {
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(255, 255, 255, 0.55) calc(50% - 1px),
    rgba(255, 255, 255, 0.55) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.ncr-swatch:hover,
.ncr-swatch:focus-visible {
  transform: translateY(-3px) scale(1.06);
}

/* The selected swatch is marked with a detached ring rather than a coloured
   border, so the square itself still shows the true colour. */
.ncr-swatch.is-current::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  pointer-events: none;
}

/* Keyboard focus still needs to be visible; it sits outside the square. */
.ncr-swatch:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}

/* Stocked but not shown as a link: the swatch is a control, not navigation. */
.ncr-swatch.is-unavailable {
  cursor: not-allowed;
  opacity: 0.38;
}

.ncr-swatch.is-unavailable:hover,
.ncr-swatch.is-unavailable:focus-visible {
  transform: none;
}

/* A diagonal score, so "not stocked" is legible without relying on opacity
   alone — that would read as a styling choice on a dark background. */
.ncr-swatch.is-unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(255, 255, 255, 0.55) calc(50% - 1px),
    rgba(255, 255, 255, 0.55) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.ncr-swatches .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ncr-swatch {
    transition: none;
  }

  .ncr-swatch:hover,
  .ncr-swatch:focus-visible {
    transform: none;
  }
}

/* ===========================================================================
   7. Breadcrumb
   Markup order is Home / Products / Title. The container must carry the page
   direction, or on a Persian page "Home" lands on the far left and the line
   reads backwards to anyone reading right to left.
   ======================================================================== */

html[lang^="fa"] .aps-breadcrumb,
html[dir="rtl"] .aps-breadcrumb {
  direction: rtl !important;
  text-align: right !important;
}