/* --- Catalogue listing ---------------------------------------------------------------------
   The template's shop page and the card it repeats.

   Its own layer rather than an addition to product.css: the detail page and the listing share a
   theme but not a screen, and a shop that wants one look for its cards and another for its
   product page should be able to replace one file. Every number is read off the template's
   stylesheet - the card is 1/1.4 with a 10px radius, the grid gaps 30, the control bar is three
   equal columns 40px above the first row - and where one looks arbitrary it is the template's,
   with the rule it came from named beside it.
   ------------------------------------------------------------------------------------------ */

.theme-candan-saka .ng-shop__title,
.theme-candan-saka .ng-shop__body {
  width: 100%;
  max-width: var(--ng-container-width);
  margin-inline: auto;
  padding-inline: var(--ng-container-pad);
}

/* ── The band a listing opens with ───────────────────────────────────────────────────────
   .tf-page-title carries a photograph in the template. There is no such asset here and a
   shop should not need one, so the band is the flat alternate ground instead - same height,
   same type, nothing to supply. */
.theme-candan-saka .ng-shop__title {
  max-width: none;
  padding-top: 69px;
  padding-bottom: 65px;
  background: var(--ng-color-bg-alt);
  text-align: center;
}
.theme-candan-saka .ng-shop__heading {
  margin: 0;
  font-size: 42px;
  font-weight: 400;
  line-height: 50px;
}
.theme-candan-saka .ng-shop__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 5px;
  color: var(--ng-color-text-soft);
}
.theme-candan-saka .ng-shop__crumbs-sep { display: inline-flex; }
.theme-candan-saka .ng-shop__crumbs-sep svg { width: 10px; height: 10px; stroke-width: 3; }

/* .flat-spacing-2 - the air a listing sits in. */
.theme-candan-saka .ng-shop__body { padding-top: 45px; padding-bottom: 70px; }

/* ── The control bar ─────────────────────────────────────────────────────────────────────
   Three equal columns (.tf-shop-control.grid-3): what narrows the list, how it is laid out,
   what orders it. Equal rather than sized to their contents so the layout switch sits on the
   page's centre line whatever the words either side of it are. */
.theme-candan-saka .ng-shop__control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 5px;
  margin-bottom: 40px;
}
.theme-candan-saka .ng-shop__control-start { display: flex; align-items: center; gap: 10px; }
.theme-candan-saka .ng-shop__control-end { display: flex; align-items: center; justify-content: flex-end; }

/* One control look for the pickers and the search box alike - .tf-dropdown-sort's box. */
.theme-candan-saka .ng-shop__select,
.theme-candan-saka .ng-shop__search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  /* A height rather than padding alone: a <select> resolves its own line box and would come out
     a few pixels shorter than the box beside it. */
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #ececec;
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-bg);
  color: var(--ng-color-text);
  font-size: 14px;
  line-height: 22px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-shop__select:hover,
.theme-candan-saka .ng-shop__search:focus-within { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-shop__search svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ng-color-muted); }
.theme-candan-saka .ng-shop__search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
}

/* ── The layout switch ───────────────────────────────────────────────────────────────────
   Each button draws the count it sets as that many bars, which is what the template's grid
   glyphs are. Dimmed until chosen (.tf-view-layout-switch .item is 0.4 opacity at rest). */
.theme-candan-saka .ng-shop__layouts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-candan-saka .ng-shop__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 5px;
  border: 0;
  background: none;
  color: var(--ng-color-text);
  opacity: 0.4;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-shop__layout:hover,
.theme-candan-saka .ng-shop__layout.is-active { opacity: 1; }
.theme-candan-saka .ng-shop__layout span {
  display: block;
  width: 3px;
  height: 14px;
  background: currentColor;
}

.theme-candan-saka .ng-shop__note,
.theme-candan-saka .ng-shop__empty { margin: 0; font-size: 14px; }
.theme-candan-saka .ng-shop__empty {
  padding: 60px 20px;
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-control);
  text-align: center;
  color: var(--ng-color-text-soft);
}

/* ── The filter panel ────────────────────────────────────────────────────────────────────
   .tf-row-flex: the panel and the results side by side with 30px between them, the panel a
   quarter of the row minus half that gap. Below the breakpoint the same element becomes a
   drawer over the page rather than a second panel elsewhere in the markup - one panel, so a
   choice made on a phone survives the window being widened. */
.theme-candan-saka .ng-shop__row { display: flex; flex-direction: row; column-gap: 30px; row-gap: 30px; }
.theme-candan-saka .ng-shop__panel { width: calc(25% - 15px); flex: 0 0 calc(25% - 15px); }
.theme-candan-saka .ng-shop__content { width: calc(75% - 15px); flex: 1 1 auto; min-width: 0; }
.theme-candan-saka .ng-shop__panel-head { display: none; }
/* The button that opens the drawer belongs to the widths that HAVE a drawer. */
.theme-candan-saka .ng-shop__filter-btn {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ececec;
  border-radius: var(--ng-radius-control);
  background: none;
  color: var(--ng-color-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-shop__filter-btn:hover { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-shop__filter-btn svg { width: 16px; height: 16px; }

.theme-candan-saka .ng-facet { margin-bottom: 26px; }
.theme-candan-saka .ng-facet:not(:last-child) { border-bottom: 1px solid var(--ng-color-line); }
.theme-candan-saka .ng-facet__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 25px;
  border: 0;
  background: none;
  color: var(--ng-color-text);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: start;
}
/* The chevron turns rather than swaps, so the group reads as folding shut. */
.theme-candan-saka .ng-facet__title svg { width: 12px; height: 12px; stroke-width: 3; transition: transform 0.35s linear; }
.theme-candan-saka .ng-facet__title.is-collapsed svg { transform: rotate(180deg); }

.theme-candan-saka .ng-facet__list { margin: 0 5px 36px 0; padding: 0; list-style: none; }
/* A long list scrolls inside the panel instead of pushing the ones below it off the screen. */
.theme-candan-saka .ng-facet__list--scroll { max-height: 200px; overflow-y: auto; }
.theme-candan-saka .ng-facet__list--scroll::-webkit-scrollbar { width: 2px; }
.theme-candan-saka .ng-facet__list--scroll::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.15); }
.theme-candan-saka .ng-facet__list--scroll::-webkit-scrollbar-thumb { background: var(--ng-color-text); }
.theme-candan-saka .ng-facet__list--colors { display: flex; flex-direction: column; gap: 15px; }
.theme-candan-saka .ng-facet__list--colors .ng-facet__row { margin: 0; }

.theme-candan-saka .ng-facet__cate:not(:first-child),
.theme-candan-saka .ng-facet__row:not(:first-child) { margin-top: 10px; }
.theme-candan-saka .ng-facet__cate button {
  display: flex;
  border: 0;
  background: none;
  color: var(--ng-color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: start;
}
.theme-candan-saka .ng-facet__cate.is-current button { color: var(--ng-color-primary); }
.theme-candan-saka .ng-facet__label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ng-color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
}
.theme-candan-saka .ng-facet__count { color: var(--ng-color-muted); font-weight: 400; }

/* A 16px box that fills with the brand colour and draws its own tick - no icon font needed. */
.theme-candan-saka .ng-check {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  border: 1px solid var(--ng-color-line);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-check:checked { border-color: var(--ng-color-primary); background: var(--ng-color-primary); }
.theme-candan-saka .ng-check::before {
  position: absolute;
  content: "";
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--ng-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-check:checked::before { opacity: 1; transform: rotate(45deg) scale(1); }

/* The colour swatch IS the control: 26px round, ringed when chosen. */
.theme-candan-saka .ng-check-color {
  position: relative;
  appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.theme-candan-saka .ng-check-color:checked { box-shadow: 0 0 0 2px var(--ng-color-bg), 0 0 0 3px var(--ng-color-text); }
.theme-candan-saka .ng-check-color::before {
  position: absolute;
  content: "";
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--ng-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-check-color:checked::before { opacity: 1; transform: rotate(45deg) scale(1); }
/* A pale swatch takes a dark tick, or the tick vanishes into it. */
.theme-candan-saka .ng-check-color[data-light] { border-color: var(--ng-color-line); }
.theme-candan-saka .ng-check-color[data-light]::before { border-color: var(--ng-color-text); }

/* ── The price range ─────────────────────────────────────────────────────────────────────
   Two native range inputs stacked on one track: each keeps its own keyboard and screen-reader
   behaviour, and the painted bar between them is a plain element rather than a library. */
.theme-candan-saka .ng-price { margin: 24px 0 35px; }
.theme-candan-saka .ng-price__track { position: relative; height: 4px; margin: 0 10px; background: var(--ng-color-line); border-radius: 999px; }
.theme-candan-saka .ng-price__fill { position: absolute; top: 0; bottom: 0; background: var(--ng-color-primary); border-radius: 999px; }
.theme-candan-saka .ng-price__track input {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  width: calc(100% + 20px);
  transform: translateY(-50%);
  margin: 0;
  appearance: none;
  background: none;
  /* The track itself must not swallow the pointer, or the lower thumb becomes unreachable
     wherever the two ranges overlap. */
  pointer-events: none;
}
.theme-candan-saka .ng-price__track input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ng-color-primary);
  cursor: pointer;
}
.theme-candan-saka .ng-price__track input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ng-color-primary);
  cursor: pointer;
}
.theme-candan-saka .ng-price__caption { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.theme-candan-saka .ng-price__label { font-size: 14px; }
/* The currency sits at the LEFT of the box and the number is pushed to the right, so a
   three-digit price and a one-digit one line up on the same edge. */
.theme-candan-saka .ng-price__val {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 68px;
  padding: 8px 10px;
  border: 1px solid var(--ng-color-line);
  border-radius: 5px;
  font-size: 14px;
  line-height: 22px;
}
.theme-candan-saka .ng-price__val::after {
  position: absolute;
  content: attr(data-currency);
  top: 50%;
  inset-inline-start: 10px;
  transform: translateY(-50%);
  font-weight: 400;
}

/* ── The row of what is currently chosen ─────────────────────────────────────────────────
   .meta-filter-shop: the count, then one removable chip per choice, then the press that
   clears them all. Not rendered at all while nothing is chosen. */
.theme-candan-saka .ng-shop__applied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.theme-candan-saka .ng-shop__applied-count {
  position: relative;
  padding-inline-end: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ng-color-muted);
}
.theme-candan-saka .ng-shop__applied-count::after {
  position: absolute;
  content: "";
  top: 4px;
  bottom: 4px;
  inset-inline-end: 0;
  width: 1px;
  background: var(--ng-color-line);
}
.theme-candan-saka .ng-shop__applied-count strong { color: var(--ng-color-text); font-weight: 400; }
.theme-candan-saka .ng-shop__chip,
.theme-candan-saka .ng-shop__clear {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--ng-color-line);
  border-radius: 999px;
  background: none;
  color: var(--ng-color-text);
  font-size: 14px;
  line-height: 22px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-shop__chip svg,
.theme-candan-saka .ng-shop__clear svg { width: 12px; height: 12px; }
.theme-candan-saka .ng-shop__chip:hover { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-shop__chip--color { gap: 8px; }
.theme-candan-saka .ng-shop__chip-color { display: block; width: 20px; height: 20px; border-radius: 999px; }
.theme-candan-saka .ng-shop__clear {
  border-color: var(--ng-color-text);
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
}
.theme-candan-saka .ng-shop__clear:hover {
  border-color: var(--ng-color-primary);
  background: var(--ng-color-primary);
}

/* ── The grid ────────────────────────────────────────────────────────────────────────────
   .tf-grid-layout: 30px between cards on a full screen, 15 once there is less room for them,
   and as many equal columns as asked for. The count comes down as an ATTRIBUTE rather than a
   class per number, so a shop that offers six needs no new rule - only a wider list of choices
   in the page. */
.theme-candan-saka .ng-product-list__grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.theme-candan-saka .ng-product-list[data-columns="2"] .ng-product-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-candan-saka .ng-product-list[data-columns="3"] .ng-product-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-candan-saka .ng-product-list[data-columns="4"] .ng-product-list__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-candan-saka .ng-product-list[data-columns="5"] .ng-product-list__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-candan-saka .ng-product-list[data-columns="6"] .ng-product-list__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ── The card ────────────────────────────────────────────────────────────────────────────
   .card-product-wrapper: a 1/1.4 frame with a 10px radius that clips everything inside it,
   so the hover picture can be scaled without leaving the card. */
.theme-candan-saka .ng-product-card__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1 / 1.4;
  background: var(--ng-color-bg-alt);
}
.theme-candan-saka .ng-product-card__img { display: flex; align-items: stretch; width: 100%; height: 100%; }
.theme-candan-saka .ng-product-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The template's own pair of timings: the swap is quick, the drift behind it is not. */
  transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}
.theme-candan-saka .ng-product-card__photo--hover { position: absolute; inset: 0; opacity: 0; }
.theme-candan-saka .ng-product-card__media:hover .ng-product-card__photo { opacity: 0; }
.theme-candan-saka .ng-product-card__media:hover .ng-product-card__photo--hover {
  z-index: 1;
  opacity: 1;
  transform: scale(1.09);
}
/* A card with no second picture must not fade its only one out on hover. */
.theme-candan-saka .ng-product-card__media:not(:has(.ng-product-card__photo--hover)):hover .ng-product-card__photo { opacity: 1; }

/* The saving, top-right over the picture - .on-sale-wrap.text-end. Stays put on hover, unlike
   the actions below: it is a fact about the product, not a control. */
.theme-candan-saka .ng-product-card__flags {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 15px;
  right: 15px;
  text-align: end;
}
.theme-candan-saka .ng-product-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 59px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ng-color-sale-badge);
  color: var(--ng-color-on-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  word-break: break-word;
}

/* The actions rise out of the picture rather than appearing on it, one after another. */
.theme-candan-saka .ng-product-card__actions {
  position: absolute;
  z-index: 10;
  bottom: 25px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.theme-candan-saka .ng-product-card__actions > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--ng-radius-control);
  /* White, not the field grey the base rule carries: every card in the template marks these
     bg_white, and a grey square on a photograph reads as part of the photograph. */
  background: var(--ng-color-bg);
  color: var(--ng-color-text);
  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease;
}
.theme-candan-saka .ng-product-card__actions > *:nth-child(2) { transition-delay: 0.1s; }
.theme-candan-saka .ng-product-card__actions > *:nth-child(3) { transition-delay: 0.2s; }
.theme-candan-saka .ng-product-card__actions > *:nth-child(4) { transition-delay: 0.3s; }
.theme-candan-saka .ng-product-card__actions > *:hover {
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
}
.theme-candan-saka .ng-product-card__actions svg { width: 16px; height: 16px; }
.theme-candan-saka .ng-product-card:hover .ng-product-card__actions > * {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* A touch screen has no hover to reveal them with, so they simply stay. */
@media (hover: none) {
  .theme-candan-saka .ng-product-card__actions > * { opacity: 1; visibility: visible; transform: none; }
}
.theme-candan-saka .ng-product-card__actions > .ng-compare-toggle[data-picked="true"] {
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
}
.theme-candan-saka .ng-product-card__actions > *:disabled { opacity: 0.4; }
.theme-candan-saka .ng-product-card:hover .ng-product-card__actions > *:disabled { opacity: 0.4; }

.theme-candan-saka .ng-product-card__info { display: grid; gap: 12px; padding-top: 20px; }
.theme-candan-saka .ng-product-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: var(--ng-color-text);
  /* Two lines and then an ellipsis: a long name must not push the price of one card below the
     price of the one beside it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-candan-saka .ng-product-card__title:hover { color: var(--ng-color-primary); }
.theme-candan-saka .ng-product-card__price { margin: 0; font-size: 14px; font-weight: 600; line-height: 14px; }
.theme-candan-saka .ng-product-card__price-old {
  display: inline-block;
  margin-inline-end: 5px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: line-through;
}
.theme-candan-saka .ng-product-card__price-new { color: var(--ng-color-primary); }

/* ── Pagination ──────────────────────────────────────────────────────────────────────────
   .tf-pagination-list: 45x39 boxes with an 11px gap, the current one filled. */
.theme-candan-saka .ng-pagination {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 40px;
}
.theme-candan-saka .ng-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 39px;
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-bg);
  color: var(--ng-color-text);
  font-size: 14px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-pagination__link svg { width: 12px; height: 12px; stroke-width: 3; }
.theme-candan-saka .ng-pagination__link:hover:not(:disabled) { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-pagination__link:disabled { opacity: 0.35; }
.theme-candan-saka .ng-pagination__link.is-active {
  background: var(--ng-color-text);
  border-color: var(--ng-color-text);
  color: var(--ng-color-on-primary);
  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 10px 0;
}

/* ── Where the panel no longer fits beside the results ───────────────────────────────────
   Below the template's xl breakpoint the panel leaves the row and becomes a drawer over the
   page, reached by the button in the control bar. It is the SAME element, so a colour ticked
   on a phone is still ticked when the window is widened. */
@media (max-width: 1200px) {
  .theme-candan-saka .ng-shop__row { display: block; }
  .theme-candan-saka .ng-shop__content { width: 100%; }
  .theme-candan-saka .ng-shop__filter-btn { display: inline-flex; }

  .theme-candan-saka .ng-shop__panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: auto;
    flex: none;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .theme-candan-saka .ng-shop__panel.is-open { opacity: 1; visibility: visible; }

  .theme-candan-saka .ng-shop__panel-inner {
    width: min(320px, 90vw);
    height: 100%;
    padding: 20px;
    overflow-y: auto;
    background: var(--ng-color-bg);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .theme-candan-saka .ng-shop__panel.is-open .ng-shop__panel-inner { transform: none; }

  .theme-candan-saka .ng-shop__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ng-color-line);
    font-size: 16px;
    font-weight: 600;
  }
  .theme-candan-saka .ng-shop__panel-head button { border: 0; background: none; color: inherit; }
  .theme-candan-saka .ng-shop__panel-head svg { width: 18px; height: 18px; }
  .theme-candan-saka .ng-facet__title { font-size: 16px; line-height: 24px; }
}

/* ── Narrower screens ────────────────────────────────────────────────────────────────────
   The template drops the wider layouts as the room for them goes; the grid follows, whatever
   count was asked for, because five columns on a tablet is five unreadable cards. */
@media (max-width: 1200px) {
  .theme-candan-saka .ng-product-list__grid { gap: 15px; }
  .theme-candan-saka .ng-product-list[data-columns="4"] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list[data-columns="5"] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list[data-columns="6"] .ng-product-list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .theme-candan-saka .ng-shop__layout[data-columns="5"],
  .theme-candan-saka .ng-shop__layout[data-columns="6"] { display: none; }
  .theme-candan-saka .ng-shop__heading { font-size: 32px; line-height: 38px; }
  .theme-candan-saka .ng-shop__select,
  .theme-candan-saka .ng-shop__search { min-width: 0; padding: 8px 12px; }
}

@media (max-width: 991px) {
  .theme-candan-saka .ng-shop__control { grid-template-columns: 1fr auto; row-gap: 12px; }
  .theme-candan-saka .ng-shop__control-start { grid-column: 1 / -1; }
  .theme-candan-saka .ng-shop__layouts { justify-content: flex-start; }
  .theme-candan-saka .ng-shop__layout[data-columns="4"] { display: none; }
  .theme-candan-saka .ng-product-list[data-columns="3"] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list[data-columns="4"] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list[data-columns="5"] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list[data-columns="6"] .ng-product-list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .theme-candan-saka .ng-shop__title { padding-top: 52px; padding-bottom: 49px; }
  .theme-candan-saka .ng-shop__heading { font-size: 22px; line-height: 26px; }
  .theme-candan-saka .ng-shop__control-start { flex-wrap: wrap; }
  /* Only the two-column choice is left at this width, and a switch with one option is not a
     switch - the whole strip goes rather than sitting there doing nothing. */
  .theme-candan-saka .ng-shop__layouts { display: none; }
  /* Written with the same attribute the wider rules use, so it WINS them rather than losing on
     specificity: a phone gets two across whatever count the page last asked for. */
  .theme-candan-saka .ng-product-list[data-columns] .ng-product-list__grid,
  .theme-candan-saka .ng-product-list .ng-product-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-candan-saka .ng-product-card__actions { bottom: 5px; left: 5px; right: 5px; }
  .theme-candan-saka .ng-product-card__flags { top: 5px; left: 5px; right: 5px; }
  .theme-candan-saka .ng-product-card__flag { min-width: 40px; padding: 0 6px; font-size: 12px; line-height: 22px; }
  .theme-candan-saka .ng-product-card__actions > * { width: 32px; height: 32px; min-width: 32px; }
  .theme-candan-saka .ng-product-card__info { padding-top: 10px; gap: 8px; }
}

/* ── Nothing here ────────────────────────────────────────────────────────────────────────
   The shop's own answer for a product that is gone or a path no module claims. Themed, and
   with the way back: a dead end inside a shop should still be a page of that shop. */
.theme-candan-saka .ng-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--ng-container-width);
  margin-inline: auto;
  padding: 100px var(--ng-container-pad);
  text-align: center;
}
.theme-candan-saka .ng-notfound__title { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; }
.theme-candan-saka .ng-notfound__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 14px 24px;
  border: 1px solid var(--ng-color-text);
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-notfound__action:hover {
  background: var(--ng-color-primary);
  border-color: var(--ng-color-primary);
}