/* ===========================================================================
   Our Products — sidebar, grid, pagination
   ---------------------------------------------------------------------------
   Every rule is scoped to `.ncrop`. The markup also carries ArcPrime's class
   names, so where ArcPrime's own stylesheet is present on the page it styles
   this too, and `fa-rtl.css` from the repair plugin handles the Persian side.
   This file is what makes the page work when neither is loaded — it is written
   to be complete on its own rather than to depend on either.
   ======================================================================== */

/* The section sits inside the theme's own container, so it takes the width it
   is given and never reaches past it. `min-width: 0` on the grid children is
   what stops a long term name from pushing the sidebar wider than its track
   and the whole page sideways with it. */
.ncrop {
  max-width: 100%;
  --ncrop-accent: #f1a492;
  --ncrop-text: #e8e6e3;
  --ncrop-muted: #9a9a9a;
  --ncrop-line: rgba(255, 255, 255, 0.12);
  --ncrop-panel: rgba(255, 255, 255, 0.03);
  --ncrop-gap: clamp(1.75rem, 3.5vw, 3.5rem);

  box-sizing: border-box;
  width: 100%;
  color: var(--ncrop-text);
}

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

.ncrop.is-light {
  --ncrop-text: #23211f;
  --ncrop-muted: #6f6f6f;
  --ncrop-line: rgba(0, 0, 0, 0.14);
  --ncrop-panel: rgba(0, 0, 0, 0.025);
}

/* The site's Additional CSS forces `direction: ltr !important` on the document
   and on headings, paragraphs and list items, unconditionally. These are the
   only `!important` declarations here that are not part of the input reset. */
.ncrop.is-rtl {
  direction: rtl !important;
  text-align: right !important;
}

.ncrop.is-rtl p,
.ncrop.is-rtl h1,
.ncrop.is-rtl h2,
.ncrop.is-rtl li,
.ncrop.is-rtl summary {
  direction: rtl !important;
}

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

/* Headings the plugin writes itself are always in the page language, so in
   Persian they are always Arabic script — tracking would pull the joins apart
   and `uppercase` has nothing to act on. Product names are excluded: they are
   Latin on this catalogue and keep their tracking, and the per-string
   `npc-arabic` class covers a Persian one. */
.ncrop.is-rtl .ncrop-filter-heading,
.ncrop.is-rtl .ncrop-summary > span,
.ncrop.is-rtl .ncrop-sort-label,
.ncrop.is-rtl .ncrop-eyebrow,
.ncrop.is-rtl .ncrop-apply,
.ncrop.is-rtl .ncrop-card-meta {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Page head
   ------------------------------------------------------------------------ */

.ncrop-head {
  position: relative;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  padding-inline-start: 1.5rem;
}

.ncrop-head-mark {
  position: absolute;
  inset-inline-start: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--ncrop-accent);
}

.ncrop-eyebrow {
  display: block;
  margin-block-end: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ncrop-muted);
}

.ncrop-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}

.ncrop-intro {
  max-width: 46ch;
  margin: 1rem 0 0;
  color: var(--ncrop-muted);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.ncrop-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: var(--ncrop-gap);
  align-items: start;
  transition: grid-template-columns 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Closing the sidebar takes the column away entirely rather than hiding its
   contents, so the grid gets the width back instead of leaving a gap. */
.ncrop.is-collapsed .ncrop-body {
  grid-template-columns: minmax(0, 1fr);
}

.ncrop.is-collapsed .ncrop-sidebar {
  display: none;
}

/* ---------------------------------------------------------------------------
   Sidebar toggle
   ------------------------------------------------------------------------ */

.ncrop .ncrop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.25rem !important;
  padding: 0.55rem 1rem !important;
  border: 1px solid var(--ncrop-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ncrop-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Themes paint an animated wash onto every button through these. */
.ncrop .ncrop-toggle::before,
.ncrop .ncrop-toggle::after {
  content: none !important;
}

.ncrop .ncrop-toggle:hover {
  color: var(--ncrop-accent) !important;
  border-color: var(--ncrop-accent) !important;
}

.ncrop .ncrop-toggle:focus-visible {
  outline: 2px solid var(--ncrop-accent) !important;
  outline-offset: 3px !important;
}

.ncrop-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 16px;
  height: 12px;
}

.ncrop-bars span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Open: the bars fold into a cross, which says "this closes" rather than
   leaving the same three lines in both states. */
.ncrop:not(.is-collapsed) .ncrop-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.ncrop:not(.is-collapsed) .ncrop-bars span:nth-child(2) {
  opacity: 0;
}

.ncrop:not(.is-collapsed) .ncrop-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.ncrop.is-rtl .ncrop-toggle {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------ */

.ncrop-sidebar {
  position: sticky;
  top: 1.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* The toggle above already says Filters, so repeating it at the top of the
   sidebar is noise on screen. The heading stays in the document for anyone
   navigating by headings. */
.ncrop-filter-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ncrop-group {
  border-block-end: 1px solid var(--ncrop-line);
}

.ncrop-group:first-child {
  border-block-start: 1px solid var(--ncrop-line);
}

.ncrop-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}

.ncrop-summary::-webkit-details-marker {
  display: none;
}

.ncrop-summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--ncrop-muted);
  transition: transform 0.2s ease;
}

.ncrop-group[open] > .ncrop-summary::after {
  content: "–";
}

.ncrop-summary:focus-visible {
  outline: 2px solid var(--ncrop-accent);
  outline-offset: 3px;
}

.ncrop-summary-value {
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ncrop-accent);
}

.ncrop-options {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 0 1rem;
}

/* The option is a label wrapping a radio. The radio stays in the accessibility
   tree and keeps keyboard and form behaviour; it is only moved out of sight. */
.ncrop .ncrop-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ncrop-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.5rem;
  margin: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ncrop-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ncrop-option:hover {
  color: var(--ncrop-text);
  background: var(--ncrop-panel);
}

.ncrop-option.is-selected {
  color: var(--ncrop-accent);
}

.ncrop-option:has(input:focus-visible) {
  outline: 2px solid var(--ncrop-accent);
  outline-offset: 2px;
}

/* The filter mark.
   ---------------------------------------------------------------------------
   The box itself is `.ncr-swatch` from catalogue.css: 1cm square, 2px radius,
   a hairline edge, a lift on hover, a detached ring when selected, and the
   rules that stop the theme washing every swatch peach on hover. Nothing of
   that is restated here — only the few things a filter mark needs that a
   product swatch does not.

   The selector carries `.ncrop-mark` so these additions cannot reach the
   product-page swatches. */
.ncrop .ncrop-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: inherit;
}

/* Artwork resolved for a term arrives as its own span with a background image,
   or as an inline SVG. Either way it fills the square. */
.ncrop .ncrop-mark > * {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-size: cover;
  background-position: center;
}

.ncrop .ncrop-mark img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* An empty square would read as an image that failed to load, so it is drawn
   as a faint hairline square instead of a filled box. */
.ncrop .ncrop-mark.is-empty {
  border-style: dashed;
  opacity: 0.55;
}

.ncrop-option.is-selected .ncrop-mark.is-empty {
  border-style: solid;
  opacity: 1;
}

/* The size rectangle is a line drawing, so it takes the row's text colour and
   changes with it rather than sitting there as a fixed grey. */
.ncrop .ncrop-diagram {
  width: 100% !important;
  height: 100% !important;
  padding: 2px;
  box-sizing: border-box;
}

.ncrop .ncrop-diagram rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

/* The selected mark gets a detached ring, the same idea catalogue.css uses for
   `.ncr-swatch.is-current`, so the colour underneath is never obscured.

   It is an `outline`, not a pseudo-element: the square sets `overflow: hidden`
   so an image fills it cleanly, and that clips a `::before` at a negative
   inset — the ring was drawn and then immediately cut away. An outline is
   painted outside the box and is not clipped. It also stays clear of
   catalogue.css's `box-shadow: none !important` on swatch hover, which would
   have taken a box-shadow ring away at exactly the wrong moment. */
.ncrop-option.is-selected > .ncrop-mark {
  outline: 1px solid var(--ncrop-accent);
  outline-offset: 3px;
}

.ncrop-option:hover > .ncrop-mark {
  transform: translateY(-2px) scale(1.04);
}

/* The count sits at the far end of the row and is the only thing on the right,
   so the numbers line up down the column whatever the label length. */
.ncrop-option-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ncrop-option-count {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ncrop-muted);
  opacity: 0.7;
}

.ncrop-option.is-selected .ncrop-option-count {
  color: var(--ncrop-accent);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ncrop-option:hover > .ncrop-mark {
    transform: none;
  }
}

.ncrop-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.ncrop .ncrop-apply {
  padding: 0.6rem 1.25rem !important;
  border: 1px solid var(--ncrop-accent) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ncrop-accent) !important;
  -webkit-text-fill-color: currentColor !important;
  cursor: pointer;
}

.ncrop .ncrop-apply::before,
.ncrop .ncrop-apply::after {
  content: none !important;
}

.ncrop-reset {
  font-size: 0.8125rem;
  color: var(--ncrop-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ncrop-reset:hover {
  color: var(--ncrop-accent);
}

/* With the script running, every change submits the form, so the button is
   redundant. It is removed only once that is true. */
.ncrop.is-live .ncrop-apply {
  display: none;
}

/* ---------------------------------------------------------------------------
   Results
   ------------------------------------------------------------------------ */

.ncrop-results {
  min-width: 0;
}

.ncrop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: 1px solid var(--ncrop-line);
}

.ncrop-counter {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ncrop-muted);
}

.ncrop-sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ncrop-muted);
}

.ncrop-sort-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ncrop .ncrop-sort select {
  padding: 0.4rem 1.75rem 0.4rem 0.6rem !important;
  border: 1px solid var(--ncrop-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.8125rem;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.ncrop-grid {
  display: grid;
  grid-template-columns: repeat(var(--ncrop-columns, 3), minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}

.ncrop.is-collapsed .ncrop-grid {
  grid-template-columns: repeat(var(--ncrop-columns-wide, 4), minmax(0, 1fr));
}

.ncrop-card {
  margin: 0;
}

.ncrop-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 0;
}

.ncrop-card-link:focus-visible {
  outline: 2px solid var(--ncrop-accent);
  outline-offset: 6px;
}

.ncrop-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* Themes ship `img { height: auto }`, often with `!important`, which leaves the
   picture short of a fixed-ratio frame and a strip of background showing under
   it. The frame holds the ratio; the picture is told to fill it. */
.ncrop .ncrop-card-media .ncrop-image {
  width: 100% !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;
  vertical-align: top;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ncrop-card-link:hover .ncrop-image {
  transform: scale(1.04);
}

.ncrop-card-copy {
  position: static;
  display: block;
  inset: auto;
  padding-block-start: 1rem;
  background: none;
}

.ncrop-card-title {
  display: block;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ncrop-accent);
}

.ncrop-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ncrop-muted);
}

.ncrop-card-price {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ncrop-text);
  unicode-bidi: plaintext;
}

.ncrop-empty {
  margin: 2rem 0;
  color: var(--ncrop-muted);
}

/* ---------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------ */

.ncrop-pagination {
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--ncrop-line);
}

.ncrop-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ncrop-pagination li {
  margin: 0;
}

.ncrop-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  color: var(--ncrop-muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a.ncrop-page:hover {
  color: var(--ncrop-accent);
  border-color: var(--ncrop-line);
}

.ncrop-page.is-current {
  color: var(--ncrop-accent);
  border-color: var(--ncrop-accent);
}

.ncrop-page:focus-visible {
  outline: 2px solid var(--ncrop-accent);
  outline-offset: 2px;
}

.ncrop-gap {
  border: 0;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   The sidebar becomes a collapsed panel above the results rather than a column
   beside them, so the products keep the full width.
   ------------------------------------------------------------------------ */

/* Between roughly a laptop and a wide desktop the sidebar is still worth its
   column, but four cards beside it would be four narrow ones — so the widened
   grid stops at three until there is room for more. */
@media (max-width: 1280px) {
  .ncrop.is-collapsed .ncrop-grid {
    grid-template-columns: repeat(min(var(--ncrop-columns-wide, 4), 3), minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ncrop-body {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  }

  .ncrop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ncrop.is-collapsed .ncrop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ncrop-body {
    grid-template-columns: 1fr;
  }

  .ncrop.is-collapsed .ncrop-sidebar {
    display: none;
  }

  /* As a panel above the products the sidebar can run longer than the screen,
     so it scrolls inside itself rather than pushing the grid out of sight. */
  .ncrop-sidebar {
    position: static;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ncrop-line);
    background: var(--ncrop-panel);
    overscroll-behavior: contain;
  }

  .ncrop-grid,
  .ncrop.is-collapsed .ncrop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ncrop-grid,
  .ncrop.is-collapsed .ncrop-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ncrop-body,
  .ncrop-bars span,
  .ncrop-image,
  .ncrop-option,
  .ncrop-page {
    transition: none;
  }

  .ncrop-card-link:hover .ncrop-image {
    transform: none;
  }
}

/* 1.12.1: transparent boxed catalogue, logical sidebar, overlay-free filters. */
body .ncrop.ncrop {
  --ncrop-max-width: 1140px;
  --ncrop-top-gap: 150px;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: var(--ncrop-max-width) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: var(--ncrop-top-gap) auto 64px !important;
  padding: clamp(12px, 2vw, 24px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-wrap: anywhere;
  direction: ltr !important;
  text-align: left !important;
}
body .ncrop.ncrop.is-rtl { direction: rtl !important; text-align: right !important; }
body .ncrop.ncrop .ncrop-body {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 28px !important;
  direction: ltr !important;
  transition: none !important;
}
body .ncrop.ncrop.is-rtl .ncrop-body { direction: rtl !important; }
body .ncrop.ncrop.is-collapsed .ncrop-body { grid-template-columns: minmax(0, 1fr) !important; }
body .ncrop.ncrop .ncrop-toggle { display: inline-flex !important; border-radius: 8px !important; }
body .ncrop.ncrop .ncrop-sidebar {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  border-inline-end: 1px solid var(--ncrop-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .ncrop.ncrop.is-rtl .ncrop-sidebar { padding: 0 0 0 18px !important; }
body .ncrop.ncrop.is-collapsed .ncrop-sidebar { display: none !important; }
body .ncrop.ncrop:not(.is-collapsed) .ncrop-sidebar { display: block !important; }
body .ncrop.ncrop .ncrop-options { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
body .ncrop.ncrop .ncrop-option { min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 8px; }
body .ncrop.ncrop .ncrop-option.is-selected { border-color: var(--ncrop-accent) !important; }
body .ncrop.ncrop .ncrop-mark.is-photo {
  width: 56px !important; height: 56px !important;
  flex: 0 0 56px !important; overflow: hidden; border-radius: 6px;
}
body .ncrop.ncrop .ncrop-option-photo {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; opacity: 1 !important; filter: none !important;
}
body .ncrop.ncrop .ncrop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
body .ncrop.ncrop.is-collapsed .ncrop-grid { grid-template-columns: repeat(var(--ncrop-columns, 3), minmax(0, 1fr)) !important; }
body .ncrop.ncrop :is(.ncrop-body, .ncrop-results, .ncrop-grid, .ncrop-card, .ncrop-card-link, .ncrop-card-copy, .ncrop-bar, .ncrop-pagination) {
  min-width: 0; background: transparent !important; box-shadow: none !important;
}
/* Neutralize theme hover washes without erasing swatch colours or photographs. */
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-summary, .ncrop-option, .ncrop-apply, .ncrop-page),
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-summary, .ncrop-option, .ncrop-apply, .ncrop-page):is(:hover, :focus, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  color: var(--ncrop-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
body .ncrop.ncrop .ncrop-sidebar :is(form, details, summary, label) { background: transparent !important; }
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-sidebar, .ncrop-pagination)::before,
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-sidebar, .ncrop-pagination)::after,
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-sidebar, .ncrop-pagination) *::before,
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-sidebar, .ncrop-pagination) *::after {
  content: none !important; display: none !important; background: none !important; box-shadow: none !important;
}
body .ncrop.ncrop .ncrop-summary::after {
  content: "+" !important; display: inline-block !important;
  position: static !important; inset: auto !important;
  width: auto !important; height: auto !important;
  transform: none !important; opacity: 1 !important;
}
body .ncrop.ncrop .ncrop-group[open] > .ncrop-summary::after { content: "−" !important; }
body .ncrop.ncrop :is(.ncrop-option-label, .ncrop-summary-value, .ncrop-toggle-text) {
  color: inherit !important; -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important; filter: none !important; background: transparent !important;
}
body .ncrop.ncrop :is(.ncrop-toggle, .ncrop-sidebar) :is(.overlay, .overlay-bg, .overlay-color, .hover-overlay) { display: none !important; }
body .ncrop.ncrop .ncrop-option:hover { border-color: var(--ncrop-line) !important; }
body .ncrop.ncrop .ncrop-option.is-selected:hover { border-color: var(--ncrop-accent) !important; }
body .ncrop.ncrop .ncrop-page {
  min-width: 44px; min-height: 44px; height: auto; padding: 9px 14px;
  border: 1px solid var(--ncrop-line) !important; border-radius: 10px;
  font-weight: 500; text-decoration: none !important;
}
body .ncrop.ncrop .ncrop-pagination ul { gap: 8px; }
body .ncrop.ncrop .ncrop-page:is(:hover, .is-current) {
  border-color: var(--ncrop-accent) !important;
  color: var(--ncrop-accent) !important;
}
body .ncrop.ncrop .ncrop-page.is-current { border-width: 2px !important; font-weight: 700; }
body .ncrop.ncrop .ncrop-page.ncrop-gap { border-color: transparent !important; min-width: 24px; padding-inline: 2px; }
body .ncrop.ncrop .ncrop-page-status { text-align: center; margin-bottom: 14px; color: var(--ncrop-muted); font-size: 12px; }
body .ncrop.ncrop :is(.ncrop-toggle, summary, .ncrop-page):focus-visible { outline: 2px solid var(--ncrop-accent) !important; outline-offset: 4px; }
@media (max-width: 767px) {
  body .ncrop.ncrop { --ncrop-top-gap: 120px; }
  body .ncrop.ncrop .ncrop-body { grid-template-columns: minmax(0, 1fr) !important; }
  /* A contained side panel on phones; no backdrop and no squeezed product grid. */
  body .ncrop.ncrop.is-live:not(.is-collapsed) .ncrop-results { display: none !important; }
  body .ncrop.ncrop .ncrop-sidebar { max-width: 340px !important; justify-self: start; border: 0 !important; }
  body .ncrop.ncrop .ncrop-grid,
  body .ncrop.ncrop.is-collapsed .ncrop-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 480px) {
  body .ncrop.ncrop .ncrop-grid,
  body .ncrop.ncrop.is-collapsed .ncrop-grid { grid-template-columns: minmax(0,1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .ncrop.ncrop * { transition: none !important; animation: none !important; }
}