/* --- 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 { width: auto; min-width: 190px; }
.theme-candan-saka .ng-shop__select .ng-select__trigger { min-height: 44px; padding: 10px 18px; border-color: #ececec; }
.theme-candan-saka .ng-shop__select .ng-select__trigger:hover,
.theme-candan-saka .ng-shop__select[data-open] .ng-select__trigger { border-color: var(--ng-color-text); }
.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__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 ────────────────────────────────────────────────────────────────────
   shop-default's layout, at every width: the results take the WHOLE row and the filters live
   in an off-canvas drawer opened by the control bar's Filter button (.tf-btn-filter +
   #canvasFilter in the template). One element whatever the width, so a colour ticked on a
   phone is still ticked when the window is widened. The side-by-side quarter-panel look was
   the template's shop-left-sidebar VARIANT, deliberately retired in favour of the default. */
.theme-candan-saka .ng-shop__row { display: block; }
.theme-candan-saka .ng-shop__content { width: 100%; min-width: 0; }

.theme-candan-saka .ng-shop__panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  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; }

/* .tf-btn-filter - always on show, because the drawer is now the only home the filters have. */
.theme-candan-saka .ng-shop__filter-btn {
  display: inline-flex;
  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;
}

/* Nothing to sell, said across the foot of the picture. Top-left would fight the saving flag,
   and a shop that hides empty products never draws this at all - it is the OTHER shop's answer,
   the one that keeps the shelf and tells the customer where it stands. Muted rather than loud:
   it is bad news, not an offer. */
.theme-candan-saka .ng-product-card__stock {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--ng-color-bg) 88%, transparent);
  text-align: center;
  /* The actions rise from the same edge on hover; the badge steps aside rather than stacking. */
  transition: opacity 0.2s ease;
}
.theme-candan-saka .ng-product-card__media:hover .ng-product-card__stock { opacity: 0; }
.theme-candan-saka .ng-product-card__media[data-age-covered="true"] .ng-product-card__stock { display: none; }
/* Left in the case the dictionary wrote it. Upper-casing here looked tidier and was wrong: CSS
   upper-cases "i" to "I", so a Turkish shop's own word came out misspelt, and every language has
   its own such trap. The dictionaries already capitalise their entries properly. */
.theme-candan-saka .ng-product-card__stock-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ng-color-text-soft);
}

/* 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; }
/* The word over a button - .tooltip: a black pill above the square, drawn from the button's own
   data-tip so the four buttons need no markup of their own for it. */
.theme-candan-saka .ng-product-card__actions > [data-tip] { position: relative; }
.theme-candan-saka .ng-product-card__actions > [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 30;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ng-color-bg);
  white-space: nowrap;
  pointer-events: none;
  background: var(--ng-color-text);
  border-radius: 3px;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-candan-saka .ng-product-card__actions > [data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 30;
  border: 6px solid transparent;
  border-top-color: var(--ng-color-text);
  border-bottom: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}
.theme-candan-saka .ng-product-card__actions > [data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.theme-candan-saka .ng-product-card__actions > [data-tip]:hover::before { opacity: 1; }
.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; }

/* The sizes - .size-list: a translucent strip along the picture's bottom edge that rises on
   hover, the codes in white. A fact about the product, so it is not a set of buttons. */
.theme-candan-saka .ng-product-card__sizes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: 0.4s ease 0.1s;
}
.theme-candan-saka .ng-product-card:hover .ng-product-card__sizes {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
/* The action buttons rise out of the same edge; with sizes on the card they sit above the strip. */
.theme-candan-saka .ng-product-card__media:has(.ng-product-card__sizes) .ng-product-card__actions { bottom: 40px; }

.theme-candan-saka .ng-product-card__info { display: grid; gap: 12px; padding-top: 20px; }

/* The colours - .list-color-product: 26px rings holding an 18px disc, the pressed one ringed in
   the text colour. A swatch without a hex shows that colour's own front shot in the disc. */
.theme-candan-saka .ng-product-card__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-candan-saka .ng-product-card__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 3px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--ng-color-line);
  border-radius: 50%;
  transition: border-color 0.4s ease-in-out;
}
.theme-candan-saka .ng-product-card__swatch:hover,
.theme-candan-saka .ng-product-card__swatch[data-active] { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-product-card__swatch-value {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: cover;
  border: 1px solid var(--ng-color-swatch-ring);
  border-radius: 50%;
}
.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;
}

/* ── Drawer type on narrower screens ─────────────────────────────────────────────────────
   The drawer itself is width-independent now (see the base rules above); only the facet
   titles grow a step on touch-sized screens, as the template's canvas filter does. */
@media (max-width: 1200px) {
  .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 { min-width: 0; }
  .theme-candan-saka .ng-shop__select .ng-select__trigger,
  .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; }
  .theme-candan-saka .ng-product-card__sizes { display: none; }
  .theme-candan-saka .ng-product-card__media:has(.ng-product-card__sizes) .ng-product-card__actions { bottom: 5px; }
  .theme-candan-saka .ng-product-card__swatch { width: 22px; height: 22px; padding: 2px; }
  .theme-candan-saka .ng-product-card__swatch-value { width: 14px; height: 14px; }
}

/* ── 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);
}

/* The facet's content while it is open (see shop-filters' ng-facet__body wrapper). */
.theme-candan-saka .ng-facet__body { padding: 2px 0 18px; }

/* ==========================================================================================
   Comparison — the strip that follows the visitor while products are held, and the table
   page itself.
   ========================================================================================== */
.theme-candan-saka .ng-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--ng-color-text);
  color: var(--ng-color-bg);
  border-radius: var(--ng-radius-pill);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.theme-candan-saka .ng-compare-bar__count { font-weight: 600; }
.theme-candan-saka .ng-compare-bar__hint { opacity: 0.7; }
.theme-candan-saka .ng-compare-bar__open {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.theme-candan-saka .ng-compare-bar__clear,
.theme-candan-saka .ng-compare-bar__undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  opacity: 0.8;
  transition: opacity .2s ease;
}
.theme-candan-saka .ng-compare-bar__clear:hover,
.theme-candan-saka .ng-compare-bar__undo:hover { opacity: 1; }

.theme-candan-saka .ng-compare {
  display: grid;
  gap: 40px;
  max-width: var(--ng-container-width);
  margin: 40px auto;
  padding: 0 var(--ng-container-pad);
}
.theme-candan-saka .ng-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.theme-candan-saka .ng-compare__table th,
.theme-candan-saka .ng-compare__table td {
  padding: 12px 16px;
  border: 1px solid var(--ng-color-line);
  text-align: left;
  vertical-align: top;
}
.theme-candan-saka .ng-compare__table thead th {
  position: relative;
  padding-right: 40px;
  background: var(--ng-color-bg-alt);
}
.theme-candan-saka .ng-compare__table tbody th {
  width: 220px;
  font-weight: 600;
  background: var(--ng-color-bg-alt);
}
.theme-candan-saka .ng-compare__name { font-weight: 600; color: var(--ng-color-text); }
.theme-candan-saka .ng-compare__name:hover { color: var(--ng-color-primary); }
.theme-candan-saka .ng-compare__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ng-color-muted);
  transition: background-color .2s ease, color .2s ease;
}
.theme-candan-saka .ng-compare__remove:hover { background: var(--ng-color-field); color: var(--ng-color-text); }
.theme-candan-saka .ng-compare__blank { color: var(--ng-color-muted); }

.theme-candan-saka .ng-compare__empty,
.theme-candan-saka .ng-compare__loading {
  max-width: var(--ng-container-width);
  margin: 80px auto;
  padding: 0 var(--ng-container-pad);
  text-align: center;
  color: var(--ng-color-text-soft);
}
.theme-candan-saka .ng-compare__browse {
  display: inline-flex;
  margin-top: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--ng-radius-pill);
  background: var(--ng-color-text);
  color: var(--ng-color-bg);
  transition: background-color .2s ease;
}
.theme-candan-saka .ng-compare__browse:hover { background: var(--ng-color-primary); color: var(--ng-color-on-primary); }

@media (max-width: 767px) {
  .theme-candan-saka .ng-compare-bar {
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: space-between;
    white-space: normal;
  }
}

/* ── Quick add / quick view ────────────────────────────────────────────────────────────
   The product in a window over the shelf - the template's quick_view modal, behind the eye. */
.theme-candan-saka .ng-quick-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(2px);
}
.theme-candan-saka .ng-quick {
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 30px;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  padding: 30px;
  overflow-y: auto;
  background: var(--ng-color-bg);
  border-radius: var(--ng-radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.theme-candan-saka .ng-quick__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ng-color-text);
  cursor: pointer;
  background: var(--ng-color-bg);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.theme-candan-saka .ng-quick__close svg { width: 16px; height: 16px; }
.theme-candan-saka .ng-quick__media { display: grid; gap: 10px; align-content: start; }
.theme-candan-saka .ng-quick__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ng-color-bg-alt);
  border-radius: var(--ng-radius-md);
}
.theme-candan-saka .ng-quick__thumbs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.theme-candan-saka .ng-quick__thumb {
  display: block;
  width: 64px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ng-color-bg-alt);
  border-radius: var(--ng-radius-sm);
}
.theme-candan-saka .ng-quick__info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.theme-candan-saka .ng-quick__title {
  margin-right: 32px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ng-color-text);
  text-decoration: none;
}
.theme-candan-saka .ng-quick__title:hover { color: var(--ng-color-primary); }
.theme-candan-saka .ng-quick__price { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 18px; font-weight: 600; }
.theme-candan-saka .ng-quick__price-old { font-size: 14px; font-weight: 400; color: var(--ng-color-muted); text-decoration: line-through; }
.theme-candan-saka .ng-quick__option { display: grid; gap: 10px; }
.theme-candan-saka .ng-quick__label { font-size: 14px; color: var(--ng-color-text-soft); }
.theme-candan-saka .ng-quick__label b { font-weight: 600; color: var(--ng-color-text); }
.theme-candan-saka .ng-quick__swatches,
.theme-candan-saka .ng-quick__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.theme-candan-saka .ng-quick__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 3px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--ng-color-line);
  border-radius: 50%;
  transition: border-color 0.3s ease;
}
.theme-candan-saka .ng-quick__swatch:hover,
.theme-candan-saka .ng-quick__swatch[data-active] { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-quick__swatch-value {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: cover;
  border: 1px solid var(--ng-color-swatch-ring);
  border-radius: 50%;
}
.theme-candan-saka .ng-quick__size {
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ng-color-text);
  cursor: pointer;
  background: var(--ng-color-bg);
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-control);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.theme-candan-saka .ng-quick__size:hover { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-quick__size[data-active] { color: var(--ng-color-on-primary); background: var(--ng-color-text); border-color: var(--ng-color-text); }
.theme-candan-saka .ng-quick__size[data-soldout] { color: var(--ng-color-muted); text-decoration: line-through; }
.theme-candan-saka .ng-quick__buy { display: flex; gap: 10px; align-items: stretch; }
.theme-candan-saka .ng-quick__qty {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 46px;
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-pill);
}
.theme-candan-saka .ng-quick__qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: 0;
  color: var(--ng-color-text);
  cursor: pointer;
  background: none;
  border: 0;
}
.theme-candan-saka .ng-quick__qty svg { width: 14px; height: 14px; }
.theme-candan-saka .ng-quick__qty span { min-width: 24px; font-size: 14px; font-weight: 600; text-align: center; }
.theme-candan-saka .ng-quick__add { display: inline-flex; flex: 1; gap: 8px; align-items: center; justify-content: center; height: 46px; }
.theme-candan-saka .ng-quick__add svg { width: 16px; height: 16px; }
.theme-candan-saka .ng-quick__wish {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--ng-color-text);
  cursor: pointer;
  background: var(--ng-color-bg);
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-candan-saka .ng-quick__wish:hover { color: var(--ng-color-on-primary); background: var(--ng-color-text); border-color: var(--ng-color-text); }
.theme-candan-saka .ng-quick__wish svg { width: 18px; height: 18px; }
.theme-candan-saka .ng-quick__note { margin: 0; font-size: 13px; color: var(--ng-color-text-soft); }
.theme-candan-saka .ng-quick__more {
  font-size: 14px;
  font-weight: 500;
  color: var(--ng-color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.theme-candan-saka .ng-quick__more:hover { color: var(--ng-color-primary); }
@media (max-width: 767px) {
  .theme-candan-saka .ng-quick-backdrop { align-items: flex-end; padding: 0; }
  .theme-candan-saka .ng-quick {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    max-height: 92vh;
    padding: 20px 16px 24px;
    border-radius: var(--ng-radius-md) var(--ng-radius-md) 0 0;
  }
  .theme-candan-saka .ng-quick__photo { max-height: 42vh; aspect-ratio: auto; }
  .theme-candan-saka .ng-quick__thumbs { display: none; }
}

/* ---------------------------------------------------------------------------
   The covering a tag can put over a product's pictures ("18+").

   Two halves, and both are needed. The blur is applied to the PICTURES rather
   than to the frame, so the panel drawn on top of them stays sharp: blurring
   the frame would blur its own message and its own button along with the
   photograph. The panel is the second half, and it sits above everything the
   frame holds - the flags, the hover actions, the size strip, the gallery
   arrows - all of which would otherwise still be legible, and usable, through
   a blur.

   scale() is not decoration: a blur of N pixels pulls the transparent page in
   from every edge, and a picture left at its own size shows a pale border all
   the way round. Growing it past the frame puts those edges outside the crop.

   A display rule, never a guard. The address of the photograph is in the
   payload the shop drew this card from; anyone who wants it has it. This is
   the cloth over the shelf.
   --------------------------------------------------------------------------- */

.theme-candan-saka [data-age-covered="true"] .ng-product-card__photo,
.theme-candan-saka [data-age-covered="true"] .ng-product-media__slide img,
.theme-candan-saka [data-age-covered="true"] .ng-product-media__thumb-item img,
.theme-candan-saka [data-age-covered="true"] .ng-quick__photo,
.theme-candan-saka [data-age-covered="true"] .ng-quick__thumb {
  filter: blur(18px);
  transform: scale(1.12);
}

/* The quick-view's pictures are a plain grid; the veil needs something to be
   absolute inside. */
.theme-candan-saka .ng-quick__media { position: relative; }

/* The hover swap is a second look at the product, which is the thing being
   withheld - so a covered card simply does not turn over. */
.theme-candan-saka .ng-product-card__media[data-age-covered="true"]:hover .ng-product-card__photo { opacity: 1; }
.theme-candan-saka .ng-product-card__media[data-age-covered="true"] .ng-product-card__photo--hover { opacity: 0; }

/* The magnifier is switched off in the component as well; this is the pane it
   would have drawn into, kept shut in case one is left open by a resize. The
   slider arrows go too: the veil already swallows the press, so leaving them
   drawn is a pair of buttons that look alive and do nothing. */
.theme-candan-saka .ng-product-media[data-age-covered="true"] .ng-product-media__pane,
.theme-candan-saka .ng-product-media[data-age-covered="true"] .ng-product-media__nav,
.theme-candan-saka .ng-product-media[data-age-covered="true"] .ng-product-media__lens { display: none; }

.theme-candan-saka .ng-agegate {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
}

.theme-candan-saka .ng-agegate__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border: 2px solid var(--ng-color-text);
  border-radius: var(--ng-radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--ng-color-text);
}

.theme-candan-saka .ng-agegate__note {
  max-width: 22ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ng-color-text);
}

.theme-candan-saka .ng-agegate__confirm { padding: 8px 18px; font-size: 13px; }

/* A card on a phone is a frame about 160px wide, and the panel has to fit
   inside it without the button wrapping into three lines. The note is the
   first thing to give up - the mark says the same thing in two characters -
   and the button shrinks to match. It does NOT go to nowrap: the longest
   wording here is Turkish ("18 yasindan buyugum"), and forcing one line makes
   it overflow the frame instead of fitting in two. */
@media (max-width: 575px) {
  .theme-candan-saka .ng-product-card__media .ng-agegate { gap: 6px; padding: 8px; }
  .theme-candan-saka .ng-product-card__media .ng-agegate__note { display: none; }
  .theme-candan-saka .ng-product-card__media .ng-agegate__mark {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
    border-width: 1px;
  }
  .theme-candan-saka .ng-product-card__media .ng-agegate__confirm {
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.25;
  }

  /* A saving badge over a covered picture is a second thing shouting from a
     frame that has no room for the first one. The price row under the card
     still states it. */
  .theme-candan-saka .ng-product-card__media[data-age-covered="true"] .ng-product-card__flags { display: none; }
}