/* --- Product detail ----------------------------------------------------------------------
   The template's product page, rule for rule.

   Every number below was read off the template's own stylesheet rather than judged by eye:
   the two columns are 1fr/1fr inside a 1540-wide container with 50px of air, the rail is
   14% of the media column minus the 10px gap, the info column is inset 25px and separates
   its blocks by 30px, and every control is rounded 3px. Where a value looks arbitrary it is
   the template's arbitrary value, and the comment says which of its rules it came from.

   Its own layer, so deleting this file leaves the page on the base look rather than breaking
   it.
   ---------------------------------------------------------------------------------------- */

/* One page width for every band on this page - .container in the template: max-width 1540
   with 50px of padding, dropping to 15px on a narrow screen. */
.theme-candan-saka .ng-product-crumbs,
.theme-candan-saka .ng-product-detail,
.theme-candan-saka .ng-product-tabs,
.theme-candan-saka .ng-product-shelf,
.theme-candan-saka .ng-product-sticky__inner {
  width: 100%;
  max-width: var(--ng-container-width);
  margin-inline: auto;
  padding-inline: var(--ng-container-pad);
}

/* .flat-spacing-4 with pt_0 - which every section on this page carries: NO padding above the
   product row, 100px below it. The air above it is the breadcrumb's own bottom padding and
   nothing else, so the picture starts 30px under the trail exactly as it does in the template.
   Adding a top here (or a gap on the page's root element) is what put a second gap between the
   two and pushed the product a screen further down. */
.theme-candan-saka .ng-product-detail {
  display: grid;
  gap: 30px;
  align-items: start;
  padding-top: 0;
  padding-bottom: 100px;
}

@media (min-width: 992px) {
  .theme-candan-saka .ng-product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Media ───────────────────────────────────────────────────────────────────────────────
   .thumbs-slider is a flex row with a 10px gap; the rail is calc(14% - 10px) and the frame
   the remaining 86%. A grid says the same thing and adds what flex cannot: the rail's track
   is told to take the ROW's height, and the row's height is the picture's - which is what
   makes the rail end exactly where the picture ends. */
.theme-candan-saka .ng-product-media {
  position: relative;
  display: grid;
  grid-template-columns: calc(14% - 10px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* The media stays while the words scroll - .tf-product-media-wrap carries sticky-top.
 *
 * AFTER the block above, not before it. Both rules are one class deep, so whichever comes last
 * wins `position` - and with the sticky declaration first, `position: relative` above won while
 * `top: 30px` survived, which does not make anything stick: it pushes the picture 30px down the
 * page and opens a gap under the breadcrumb that no other rule explains. */
@media (min-width: 992px) {
  .theme-candan-saka .ng-product-media { position: sticky; top: 30px; }
}

.theme-candan-saka .ng-product-media__main {
  grid-column: 2;
  position: relative;
  min-width: 0;
  overflow: hidden;
  /* .tf-product-media-main: 10px, not the theme's generic radius. */
  border-radius: 10px;
  background: var(--ng-color-bg-alt);
  cursor: crosshair;
}

/* The viewport holds a track as wide as the pictures it carries; stepping moves the track. */
.theme-candan-saka .ng-product-media__track {
  display: grid;
  transition: transform 0.3s ease;
  will-change: transform;
}
/* One cell, every slide in it: the frame takes the height of the picture being shown and the
   others are simply not painted. A row of slides would make the frame as tall as the tallest
   of them, which is what spilled over the tabs below. */
.theme-candan-saka .ng-product-media__slide {
  grid-area: 1 / 1;
  /* The frame is a KNOWN shape rather than whatever the first photograph happens to be: the
     theme's productMediaRatio decides it, every picture is cropped to it, and the template's
     846px ceiling stops a tall one from pushing the row past the words beside it. Without a
     declared shape the rail beside it has no height to match and the page reflows as each
     picture loads. */
  aspect-ratio: 3 / 4;
  max-height: 846px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* The shape the manifest asked for - the same knob the product cards read, so a shelf and the
   page it links to crop their photographs alike. */
.theme-candan-saka .ng-product-media[data-media-ratio="1:1"] .ng-product-media__slide { aspect-ratio: 1 / 1; }
.theme-candan-saka .ng-product-media[data-media-ratio="2:3"] .ng-product-media__slide { aspect-ratio: 2 / 3; }
.theme-candan-saka .ng-product-media[data-media-ratio="3:4"] .ng-product-media__slide { aspect-ratio: 3 / 4; }
.theme-candan-saka .ng-product-media[data-media-ratio="4:5"] .ng-product-media__slide { aspect-ratio: 4 / 5; }
.theme-candan-saka .ng-product-media__slide.is-active { opacity: 1; }
.theme-candan-saka .ng-product-media__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The selection box over the frame: a pale wash with a thin dark line INSET, so the outline
   sits on the picture rather than beside it. */
.theme-candan-saka .ng-product-media__lens {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}

/* While the pane is open everything AROUND the picture being read fades back - the template
   dims its thumbs and the words to 0.3 for exactly this reason. */
.theme-candan-saka .ng-product-media__thumbs { transition: opacity 0.3s ease; }
.theme-candan-saka .ng-product-media.is-zoom-active .ng-product-media__thumbs { opacity: 0.3; }

/* 46px white circles that turn the brand colour under the pointer, with the arrow going
   white - the template's own arrow buttons, transitions included. */
.theme-candan-saka .ng-product-media__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ng-color-bg);
  color: var(--ng-color-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in-out;
  z-index: 2;
}
.theme-candan-saka .ng-product-media__nav:hover {
  background: var(--ng-color-primary);
  color: var(--ng-color-on-primary);
}
.theme-candan-saka .ng-product-media__nav--prev { inset-inline-start: 14px; }
.theme-candan-saka .ng-product-media__nav--next { inset-inline-end: 14px; }
/* An 11px glyph inside a 46px circle - the arrow is a hint, not a control the eye lands on. */
.theme-candan-saka .ng-product-media__nav svg { width: 12px; height: 12px; stroke-width: 3; }

/* The pane starts where the frame ends and covers the column beside it while open -
   .tf-zoom-main sits sticky at top: 30px in the template, 520 square. */
.theme-candan-saka .ng-product-media__pane {
  position: absolute;
  inset-inline-start: calc(100% + 30px);
  top: 30px;
  width: 520px;
  max-width: 520px;
  height: 520px;
  /* Measurable while closed, so the box can be sized from it before the first move. */
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  background-color: var(--ng-color-bg-alt);
  background-repeat: no-repeat;
  border: 1px solid var(--ng-color-line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.theme-candan-saka .ng-product-media__pane.is-open { visibility: visible; opacity: 1; }

.theme-candan-saka .ng-product-media__thumbs {
  grid-column: 1;
  grid-row: 1;
  /* Zero minimum plus the template's own 846px cap: the track fills the row and never
     lengthens it, so the rail is exactly as tall as the picture and the rest scrolls. */
  min-height: 0;
  max-height: 846px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  /* No visible scrollbar, as in the template: the rail is moved with the wheel or by
     dragging, and a bar beside the thumbs is not part of the look. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.theme-candan-saka .ng-product-media__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* A slide is as tall as its own picture (height: max-content), and the active one is marked
   by a 2px ring drawn over the item rather than by a border that would shift the layout. */
.theme-candan-saka .ng-product-media__thumb {
  flex: 0 0 auto;
  height: max-content;
  padding: 0;
  border: 0;
  background: none;
}
.theme-candan-saka .ng-product-media__thumb-item { position: relative; display: block; height: 100%; }
.theme-candan-saka .ng-product-media__thumb-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.theme-candan-saka .ng-product-media__thumb-item::after {
  position: absolute;
  content: "";
  inset: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-media__thumb.is-active .ng-product-media__thumb-item::after {
  border-color: var(--ng-color-text);
}

/* ── Info column ─────────────────────────────────────────────────────────────────────────
   .tf-product-info-list: inset 25px, and every block but the last separated by 30px. The
   title and the badge row are the two exceptions the template names itself (20 and 18). */
.theme-candan-saka .ng-product-info { padding-inline-start: 25px; }
.theme-candan-saka .ng-product-info > * { margin-bottom: 30px; }
.theme-candan-saka .ng-product-info > *:last-child { margin-bottom: 0; }

.theme-candan-saka .ng-product-info__title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.theme-candan-saka .ng-product-info__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* A hairline capsule with the label set very small and very bold - 10px/700 on a 29px line. */
.theme-candan-saka .ng-product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--ng-color-text);
  border-radius: var(--ng-radius-control);
  font-size: 10px;
  font-weight: 700;
  line-height: 29px;
}
.theme-candan-saka .ng-product-info__urgency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
/* The template flashes this icon rather than leaving it still: it is the one thing on the
   page saying the stock is moving. */
.theme-candan-saka .ng-product-info__urgency svg {
  width: 20px;
  height: 20px;
  color: var(--ng-color-primary);
  animation: ng-product-flash 2s infinite;
}
@keyframes ng-product-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.theme-candan-saka .ng-product-info__price-row { display: flex; align-items: center; gap: 10px; }
.theme-candan-saka .ng-product-info__price {
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ng-color-primary);
}
.theme-candan-saka .ng-product-info__was {
  font-size: 20px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: line-through;
}
/* The discount pill is a full capsule in its own orange, not a small square in the brand red. */
.theme-candan-saka .ng-product-info__off {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 28px;
  background: var(--ng-color-sale-badge);
  color: var(--ng-color-on-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

.theme-candan-saka .ng-product-info__liveview { display: flex; align-items: center; gap: 10px; }
.theme-candan-saka .ng-product-info__liveview-count {
  display: flex;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  line-height: 24px;
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
  border-radius: var(--ng-radius-control);
  font-weight: 600;
}

/* An inline-block box with a floor under its width, so a short clock does not shrink the
   frame around it - .countdown-wrap: 16px/30px of padding, 367px minimum. */
.theme-candan-saka .ng-product-countdown {
  display: inline-block;
  min-width: 367px;
  padding: 16px 30px;
  border: 1px solid var(--ng-color-primary);
  border-radius: 2.5px;
  text-align: center;
}
.theme-candan-saka .ng-product-countdown__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
.theme-candan-saka .ng-product-countdown__title svg { width: 14px; height: 14px; }
.theme-candan-saka .ng-product-countdown__clock {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: var(--ng-color-primary);
}

/* ── Pickers ─────────────────────────────────────────────────────────────────────────────
   Colour and size are ONE block in the template (.tf-product-info-variant-picker, a column
   with a 20px gap), which is why they sit closer to each other than to the quantity below. */
.theme-candan-saka .ng-product-variants { display: flex; flex-direction: column; gap: 20px; }

.theme-candan-saka .ng-product-picker__label { margin: 0 0 15px; font-size: 14px; font-weight: 400; }
.theme-candan-saka .ng-product-picker__label span { font-weight: 600; }
.theme-candan-saka .ng-product-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.theme-candan-saka .ng-product-picker__head .ng-product-picker__label { margin-bottom: 0; }
.theme-candan-saka .ng-product-findsize {
  border: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.theme-candan-saka .ng-product-picker__swatches,
.theme-candan-saka .ng-product-picker__options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* A 36px target with 5px of padding, so the 24px disc inside it has room to show a ring
   without the row moving when one is chosen. */
.theme-candan-saka .ng-product-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--ng-color-line-soft);
}
.theme-candan-saka .ng-product-swatch:hover { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-product-swatch.is-active {
  border-color: var(--ng-color-text);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
}

.theme-candan-saka .ng-product-picker__option {
  min-width: 45px;
  width: max-content;
  height: 38px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  border: 1px solid var(--ng-color-line-soft);
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-bg);
  color: inherit;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-picker__option:hover { border-color: var(--ng-color-text); }
.theme-candan-saka .ng-product-picker__option.is-active {
  border-color: var(--ng-color-text);
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
}

/* ── Quantity ────────────────────────────────────────────────────────────────────────────
   A filled 127x46 field rather than an outlined pill: one grey ground, the number centred
   between two 38px presses. Its label sits 5px above it, not 15 like a picker's. */
.theme-candan-saka .ng-product-quantity__label { margin: 0 0 5px; font-size: 14px; }
.theme-candan-saka .ng-product-qty {
  display: flex;
  justify-content: space-between;
  width: 127px;
  border: 0;
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-field);
  overflow: hidden;
}
.theme-candan-saka .ng-product-qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--ng-color-text);
  font-size: 24px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-qty button:hover { background: none; color: var(--ng-color-primary); }
.theme-candan-saka .ng-product-qty span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 46px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

/* ── Buying ──────────────────────────────────────────────────────────────────────────────
   A row that wraps: the main press grows to fill it and the icon squares keep their 49px. */
.theme-candan-saka .ng-product-buy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Whatever a module puts in the buying slot wears the template's press: 49 tall, 16/600,
   square-cornered at 3px, white on black. It GROWS to fill what the squares beside it leave. */
.theme-candan-saka .ng-product-buy > button,
.theme-candan-saka .ng-product-buy > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  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;
  line-height: 19px;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-buy > button:hover,
.theme-candan-saka .ng-product-buy > a:hover {
  background: var(--ng-color-primary);
  border-color: var(--ng-color-primary);
}

/* The square actions beside it - a heart and a compare mark, outlined rather than filled, and
   fixed at 49 so the press keeps the rest of the row. */
.theme-candan-saka .ng-product-buy > .ng-product-buy__icon,
.theme-candan-saka .ng-product-buy > .ng-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 49px;
  width: 49px;
  height: 49px;
  min-height: 49px;
  padding: 0;
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-control);
  background: var(--ng-color-bg);
  color: var(--ng-color-text);
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-buy > .ng-product-buy__icon svg,
.theme-candan-saka .ng-product-buy > .ng-compare-toggle svg { width: 18px; height: 18px; }
.theme-candan-saka .ng-product-buy > .ng-product-buy__icon:hover,
.theme-candan-saka .ng-product-buy > .ng-compare-toggle:hover {
  background: var(--ng-color-bg);
  border-color: var(--ng-color-text);
}
/* Already comparing: the square fills, the way a chosen size does. */
.theme-candan-saka .ng-product-buy > .ng-compare-toggle[data-picked="true"] {
  border-color: var(--ng-color-text);
  background: var(--ng-color-text);
  color: var(--ng-color-on-primary);
}
.theme-candan-saka .ng-product-buy > .ng-compare-toggle:disabled { opacity: 0.4; }

/* Whatever the cart says back sits under the row on its own line, not squeezed into it. */
.theme-candan-saka .ng-product-buy__message {
  flex: 1 0 100%;
  margin: 0;
  font-size: 14px;
  color: var(--ng-color-text-soft);
}

/* The express press below the row: full width, its own yellow, 44 tall. */
.theme-candan-saka .ng-product-buy__express {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border: 0;
  border-radius: var(--ng-radius-control);
  background: #ffc520;
  color: rgb(37, 59, 128);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-buy__express:hover { background: #f6b600; }
.theme-candan-saka .ng-product-buy__more {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: none;
  font-size: 14px;
  color: rgb(134, 134, 134);
  text-align: center;
  text-decoration: underline;
}

/* ── The four small links ────────────────────────────────────────────────────────────────
   One wrapping row with 30px between entries and 10px between wrapped lines. */
.theme-candan-saka .ng-product-extra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.theme-candan-saka .ng-product-extra button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-extra svg { width: 18px; height: 18px; }
.theme-candan-saka .ng-product-extra button:hover { color: var(--ng-color-primary); }

/* ── Delivery and returns ────────────────────────────────────────────────────────────────
   Two framed cards side by side, generously padded and centred, with a large icon over the
   words - .tf-product-delivery: 30px/28px, a 2.5px radius, a 29px glyph. */
.theme-candan-saka .ng-product-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding: 0;
  border: 0;
}
.theme-candan-saka .ng-product-note-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 28px;
  text-align: center;
  border: 1px solid var(--ng-color-line);
  border-radius: 2.5px;
}
.theme-candan-saka .ng-product-note-card__icon { width: 29px; height: 29px; color: var(--ng-color-text); }
.theme-candan-saka .ng-product-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--ng-color-text); }

.theme-candan-saka .ng-product-trust { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.theme-candan-saka .ng-product-trust__icon { width: 21px; height: 21px; color: var(--ng-color-text); }
.theme-candan-saka .ng-product-trust__marks { display: flex; gap: 6px; margin-inline-start: auto; }
.theme-candan-saka .ng-product-trust__mark {
  padding: 4px 8px;
  border: 1px solid var(--ng-color-line);
  border-radius: var(--ng-radius-control);
  font-size: 11px;
  color: var(--ng-color-muted);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────────────────────
   .tf-breadcrumb-wrap: 30px of air, a 6px gap, an 8px chevron with 10px either side. The
   trail's LINKS are black and the current page is the dimmer body colour - the opposite of
   the usual arrangement, and the template's. */
.theme-candan-saka .ng-product-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 14px;
  color: var(--ng-color-text);
}
.theme-candan-saka .ng-product-crumbs__sep {
  display: inline-flex;
  margin: 0 10px;
  font-size: 8px;
  font-weight: 700;
}
.theme-candan-saka .ng-product-crumbs__sep svg { width: 8px; height: 8px; }
.theme-candan-saka .ng-product-crumbs__current { color: var(--ng-color-text-soft); }
.theme-candan-saka .ng-product-crumbs__steps { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; font-size: 17px; }
.theme-candan-saka .ng-product-crumbs__steps button { border: 0; background: none; color: inherit; }
.theme-candan-saka .ng-product-crumbs__steps svg { width: 17px; height: 17px; }

/* ── Tabs ────────────────────────────────────────────────────────────────────────────────
   One bordered block: the strip of titles carries the box's top and sides, the panel its
   sides and foot, so the two together draw the single frame the template does with
   .widget-tabs.style-has-border. */
.theme-candan-saka .ng-product-tabs { padding-top: 0; padding-bottom: 80px; }

.theme-candan-saka .ng-product-tabs__titles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 50px;
  margin: 0 38px;
  padding: 0;
  border-bottom: 1px solid var(--ng-color-line);
  overflow-x: auto;
}

.theme-candan-saka .ng-product-tabs__title {
  position: relative;
  padding: 15px 0;
  min-width: max-content;
  border: 0;
  background: none;
  color: var(--ng-color-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
/* The mark under the chosen title grows from nothing rather than appearing, which is why it
   is a pseudo-element with a width and not a border. */
.theme-candan-saka .ng-product-tabs__title::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ng-color-text);
  transition: all 0.3s ease-in-out;
}
.theme-candan-saka .ng-product-tabs__title.is-active::after { width: 100%; }

.theme-candan-saka .ng-product-tabs__panel {
  padding: 35px;
  font-size: 14px;
  line-height: 22px;
}

/* The frame around the whole block, drawn in two halves so the markup needs no wrapper. */
.theme-candan-saka .ng-product-tabs__titles {
  border-top: 1px solid var(--ng-color-line);
  border-inline: 1px solid var(--ng-color-line);
  margin-inline: 0;
  padding-inline: 38px;
}
.theme-candan-saka .ng-product-tabs__panel {
  border: 1px solid var(--ng-color-line);
  border-top: 0;
}

/* .tf-pr-attrs: hidden cell borders with a ring drawn by a shadow, so the 5px radius is not
   cut into squares by the row lines. */
.theme-candan-saka .ng-product-attrs {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;
  border-radius: 5px;
  box-shadow: 0 0 0 0.1rem var(--ng-color-line);
  color: var(--ng-color-muted);
  font-size: 14px;
}
.theme-candan-saka .ng-product-attrs tr { border: 1px solid var(--ng-color-line); vertical-align: middle; }
.theme-candan-saka .ng-product-attrs td { padding: 10px; }
.theme-candan-saka .ng-product-attrs td:first-child {
  width: 30%;
  border-right: 1px solid var(--ng-color-line);
  font-weight: 700;
}

/* ── Shelves ─────────────────────────────────────────────────────────────────────────────
   .flat-spacing-1 under the tabs, and the template's own section heading. */
.theme-candan-saka .ng-product-shelf { padding-top: 0; padding-bottom: 70px; }
.theme-candan-saka .ng-product-shelf__title {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 32px;
}

.theme-candan-saka .ng-product-shelf__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.theme-candan-saka .ng-shelf-card__media {
  overflow: hidden;
  border-radius: 5px;
  background: var(--ng-color-bg-alt);
  aspect-ratio: 3 / 4;
}
.theme-candan-saka .ng-shelf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.theme-candan-saka .ng-shelf-card:hover .ng-shelf-card__media img { transform: scale(1.04); }
.theme-candan-saka .ng-shelf-card__name { margin: 12px 0 4px; font-size: 14px; }
.theme-candan-saka .ng-shelf-card__price { margin: 0; font-size: 14px; font-weight: 600; }

/* ── The bar that rides at the foot of the page ──────────────────────────────────────────
   .tf-sticky-btn-atc: a 12px row with a 190px floor under its press. */
.theme-candan-saka .ng-product-sticky {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--ng-color-bg);
  border-top: 1px solid var(--ng-color-line);
}
.theme-candan-saka .ng-product-sticky__inner {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.theme-candan-saka .ng-product-sticky__title { font-size: 16px; line-height: 19px; }
.theme-candan-saka .ng-product-sticky__variant { color: var(--ng-color-text-soft); font-size: 14px; }
.theme-candan-saka .ng-product-sticky__actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; min-width: 190px; }

/* ── Narrower screens ────────────────────────────────────────────────────────────────────
   Under 1150px the template lays the rail horizontally beneath the picture (its Swiper
   switches direction at that breakpoint), and each thumb becomes 119px wide. */
@media (max-width: 1150px) {
  .theme-candan-saka .ng-product-media { grid-template-columns: minmax(0, 1fr); }
  .theme-candan-saka .ng-product-media__main { grid-column: 1; grid-row: 1; }
  .theme-candan-saka .ng-product-media__thumbs {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .theme-candan-saka .ng-product-media__thumb { width: 119px; flex: 0 0 119px; }
  .theme-candan-saka .ng-product-media__pane { display: none; }
}

@media (max-width: 991px) {
  /* One column: the inset that separated the words from the picture has nothing left to
     separate them from. */
  .theme-candan-saka .ng-product-info { padding-inline-start: 0; }
  .theme-candan-saka .ng-product-countdown { min-width: 0; width: 100%; }
  .theme-candan-saka .ng-product-detail { padding-bottom: 85px; }
  .theme-candan-saka .ng-product-tabs { padding-bottom: 67px; }
}

@media (max-width: 767px) {
  .theme-candan-saka .ng-product-notes { grid-template-columns: 1fr; gap: 15px; }
  .theme-candan-saka .ng-product-tabs__titles { gap: 10px 25px; padding-inline: 15px; }
  .theme-candan-saka .ng-product-tabs__title { padding: 12px 0; font-size: 14px; line-height: 18px; }
  .theme-candan-saka .ng-product-tabs__panel { padding: 20px 15px; }
  .theme-candan-saka .ng-product-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .theme-candan-saka .ng-product-detail { padding-bottom: 60px; }
  .theme-candan-saka .ng-product-tabs { padding-bottom: 23px; }
  .theme-candan-saka .ng-product-shelf { padding-bottom: 52px; }
}

@media (max-width: 640px) {
  .theme-candan-saka .ng-product-sticky__title,
  .theme-candan-saka .ng-product-sticky__variant { display: none; }
  .theme-candan-saka .ng-product-sticky__actions { width: 100%; }
}