/* ==========================================================================
   Kalles theme — product page (PDP)
   ========================================================================== */
.kalles-pdp { padding-block: 4rem; }
.kalles-pdp__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 992px) { .kalles-pdp__grid { grid-template-columns: 1fr; gap: 3rem; } }

/* Gallery */
.kalles-gallery { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; }
.kalles-gallery__thumbs { display: flex; flex-direction: column; gap: 1rem; max-height: 60rem; overflow-y: auto; }
.kalles-gallery__thumb { border: 1px solid rgb(var(--color-line-border)); cursor: pointer; overflow: hidden; border-radius: var(--radius-product-media); background: rgb(var(--color-background2)); }
.kalles-gallery__thumb.is-active { border-color: rgb(var(--color-base-text)); }
.kalles-gallery__thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.kalles-gallery__main { position: relative; overflow: hidden; border-radius: var(--radius-product-media); background: rgb(var(--color-background2)); }
.kalles-gallery__main img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; cursor: zoom-in; }
@media (max-width: 992px) { .kalles-gallery { grid-template-columns: 1fr; } .kalles-gallery__thumbs { flex-direction: row; max-height: none; } .kalles-gallery__thumb { width: 8rem; flex: 0 0 8rem; } }

/* Summary */
.kalles-pdp__title { font-family: var(--font-heading-family); font-weight: var(--font-normal); font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; }
.kalles-pdp__rating { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 1.3rem; color: rgb(var(--color-foreground2)); }
.kalles-pdp__stars { color: rgb(var(--color-accent)); }
.kalles-pdp__stars .fa-regular { color: rgb(var(--color-line-border)); }
.kalles-pdp__price { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.5rem; }
.kalles-pdp__price .new { font-size: 2.6rem; font-weight: var(--font-semibold); color: rgb(var(--color-pr-sale-price)); }
.kalles-pdp__price .now { font-size: 2.6rem; font-weight: var(--font-semibold); color: rgb(var(--color-pr-text)); }
.kalles-pdp__price .old { font-size: 1.8rem; text-decoration: line-through; color: rgb(var(--color-foreground2)); }
.kalles-pdp__meta { list-style: none; margin: 0 0 1.5rem; font-size: 1.35rem; color: rgb(var(--color-foreground2)); }
.kalles-pdp__meta li { margin-bottom: .5rem; }
.kalles-pdp__meta strong { color: rgb(var(--color-base-text)); font-weight: var(--font-medium); }
.kalles-pdp__meta .in-stock { color: #2e7d32; font-weight: var(--font-medium); }
.kalles-pdp__desc-short { font-size: 1.4rem; line-height: 1.8; color: rgb(var(--color-foreground2)); margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgb(var(--color-line-border)); }

/* Options */
.kalles-option { margin-bottom: 1.8rem; }
.kalles-option__label { display: block; font-size: 1.3rem; font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .8rem; }
.kalles-option .form-control, .kalles-option .form-select { border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-input); padding: 1rem 1.4rem; font-size: 1.4rem; width: 100%; background: rgb(var(--color-base-background)); color: rgb(var(--color-base-text)); }
.kalles-option__swatches { display: flex; flex-wrap: wrap; gap: .8rem; }
.kalles-option__swatch { position: relative; }
.kalles-option__swatch input { position: absolute; opacity: 0; }
.kalles-option__swatch label { display: inline-flex; align-items: center; gap: .5rem; min-width: 4rem; justify-content: center; padding: .9rem 1.4rem; border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-input); font-size: 1.3rem; cursor: pointer; transition: .15s; }
.kalles-option__swatch input:checked + label { border-color: rgb(var(--color-base-text)); background: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); }
.kalles-option__swatch img { width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: var(--radius-2xs); }

/* Add to cart row */
.kalles-pdp__cart { display: flex; gap: 1rem; margin: 2rem 0; align-items: stretch; }
.kalles-qty { display: inline-flex; align-items: center; border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-button); overflow: hidden; }
.kalles-qty button { width: 4rem; border: 0; background: none; font-size: 1.8rem; cursor: pointer; color: rgb(var(--color-base-text)); }
.kalles-qty input { width: 4.5rem; border: 0; text-align: center; font-size: 1.5rem; background: none; color: rgb(var(--color-base-text)); }
.kalles-qty input:focus { outline: none; }
.kalles-pdp__addcart { flex: 1; }
.kalles-pdp__secondary { display: flex; gap: 1rem; margin-bottom: 2rem; }
.kalles-pdp__icon-btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1.1rem 1.8rem; border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-button); background: none; cursor: pointer; font-size: 1.3rem; color: rgb(var(--color-base-text)); }
.kalles-pdp__icon-btn:hover { border-color: rgb(var(--color-base-text)); }
.kalles-pdp__share { display: flex; align-items: center; gap: 1.2rem; font-size: 1.8rem; color: rgb(var(--color-foreground2)); }
.kalles-pdp__share a:hover { color: rgb(var(--color-accent)); }

/* Tabs */
.kalles-tabs { margin-top: 5rem; }
.kalles-tabs__nav { display: flex; gap: 3rem; border-bottom: 1px solid rgb(var(--color-line-border)); margin-bottom: 2.5rem; flex-wrap: wrap; }
.kalles-tabs__tab { padding: 1.2rem 0; font-size: 1.6rem; font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: .03em; color: rgb(var(--color-foreground2)); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.kalles-tabs__tab.is-active { color: rgb(var(--color-base-text)); border-bottom-color: rgb(var(--color-base-text)); }
.kalles-tabs__panel { display: none; font-size: 1.4rem; line-height: 1.8; color: rgb(var(--color-foreground2)); }
.kalles-tabs__panel.is-active { display: block; }
.kalles-tabs__panel table { width: 100%; border-collapse: collapse; }
.kalles-tabs__panel table td { padding: 1rem 1.4rem; border: 1px solid rgb(var(--color-line-border)); }
.kalles-tabs__panel table td:first-child { font-weight: var(--font-medium); width: 30%; color: rgb(var(--color-base-text)); }

/* Related */
.kalles-related { margin-top: 5rem; }

/* ==========================================================================
   Category / collection listing
   ========================================================================== */
.kalles-collection { padding-block: 3rem 5rem; }
.kalles-collection__header { text-align: center; margin-bottom: 2.5rem; }
.kalles-collection__title { font-family: var(--font-heading-family); font-weight: var(--font-normal); font-size: 3.2rem; }
.kalles-collection__desc { max-width: 70rem; margin: 1rem auto 0; font-size: 1.4rem; line-height: 1.8; color: rgb(var(--color-foreground2)); }
.kalles-collection__body { display: grid; grid-template-columns: 26rem 1fr; gap: 3rem; align-items: start; }
.kalles-collection__body.is-full { grid-template-columns: 1fr; }
@media (max-width: 992px) { .kalles-collection__body { grid-template-columns: 1fr; } .kalles-collection__sidebar { display: none; } .kalles-collection__sidebar.is-open { display: block; } }

.kalles-collection__sidebar > * + * { margin-top: 2rem; }
.kalles-subcats { list-style: none; }
.kalles-subcats li { border-bottom: 1px solid rgb(var(--color-line-border)); }
.kalles-subcats a { display: block; padding: .9rem 0; font-size: 1.35rem; color: rgb(var(--color-base-text)); }
.kalles-subcats a:hover { color: rgb(var(--color-accent)); padding-inline-start: .5rem; }
.kalles-sidebar-title { font-size: 1.4rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 2px solid rgb(var(--color-base-text)); }

.kalles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgb(var(--color-line-border)); }
.kalles-toolbar__count { font-size: 1.3rem; color: rgb(var(--color-foreground2)); }
.kalles-toolbar__controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kalles-toolbar select { border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-input); padding: .8rem 1.2rem; font-size: 1.3rem; background: rgb(var(--color-base-background)); color: rgb(var(--color-base-text)); }
.kalles-toolbar__filter-btn { display: none; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-button); background: none; cursor: pointer; font-size: 1.3rem; color: rgb(var(--color-base-text)); }
@media (max-width: 992px) { .kalles-toolbar__filter-btn { display: inline-flex; } }
.kalles-view-toggle button { border: 1px solid rgb(var(--color-line-border)); background: none; width: 3.6rem; height: 3.6rem; cursor: pointer; color: rgb(var(--color-foreground2)); }
.kalles-view-toggle button.is-active { background: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); border-color: rgb(var(--color-base-text)); }

.kalles-collection__pagination { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgb(var(--color-line-border)); font-size: 1.3rem; color: rgb(var(--color-foreground2)); }
.kalles-collection__pagination .pagination { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kalles-collection__pagination .pagination a, .kalles-collection__pagination .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6rem; height: 3.6rem; padding: 0 .8rem; border: 1px solid rgb(var(--color-line-border)); color: rgb(var(--color-base-text)); border-radius: var(--radius-2xs); }
.kalles-collection__pagination .pagination .active span, .kalles-collection__pagination .pagination a:hover { background: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); border-color: rgb(var(--color-base-text)); }

/* list view */
.kalles-products__grid.is-list { grid-template-columns: 1fr; }
.kalles-products__grid.is-list .kalles-pcard { display: grid; grid-template-columns: 22rem 1fr; gap: 2rem; align-items: center; }
.kalles-products__grid.is-list .kalles-pcard__info { text-align: start; padding-top: 0; }
@media (max-width: 560px) { .kalles-products__grid.is-list .kalles-pcard { grid-template-columns: 12rem 1fr; } }

/* Filter module (facets) styled */
#column-left .list-group, .kalles-collection__sidebar .list-group { list-style: none; }
.kalles-collection__sidebar .card { border: 0; }
.kalles-collection__sidebar .card-body { padding: 0; }

/* column_left is rendered INSIDE the kalles sidebar, so its stock Bootstrap
   wrapper `col-3 d-none d-md-block` squeezes the category tree to 25% of the
   (already narrow) sidebar — every word wraps onto its own line — and hides it
   on small screens. Neutralize both: the kalles sidebar / refine-panel already
   owns layout and responsive visibility, so let column_left fill its width. */
.kalles-collection__sidebar #column-left {
  display: block !important;   /* beat .d-none's display:none !important on mobile */
  width: 100%; max-width: 100%;
  padding: 0; margin: 0;
}
.kalles-collection__sidebar #column-left .list-group {
  display: flex; flex-direction: column;
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgb(var(--color-line-border));
}
.kalles-collection__sidebar #column-left .list-group-item {
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* ============================================================
   Telesin faceted category sidebar (By Title / Price / Size / Color)
   + product-card percentage-off badge
   ============================================================ */

/* Percentage-off circular badge (top-right of the card media) */
.kalles-pcard__discount {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: #ff5a1f; color: #fff;
  font-size: 1.25rem; font-weight: var(--font-bold, 700); line-height: 1;
}

/* Sidebar facet blocks */
.kalles-facets .kalles-facet { padding-bottom: 2rem; }
.kalles-facets .kalles-facet + .kalles-facet { border-top: 1px solid rgb(var(--color-line-border)); padding-top: 2rem; }
.kalles-facet__title { font-size: 1.9rem; font-weight: var(--font-semibold); margin-bottom: 1.4rem; color: rgb(var(--color-base-text)); }

.kalles-facet__input {
  width: 100%; padding: 1rem 1.2rem; font-size: 1.3rem;
  border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-input);
  background: rgb(var(--color-base-background)); color: rgb(var(--color-base-text));
}
.kalles-facet__input:focus { outline: none; border-color: rgb(var(--color-base-text)); }

.kalles-facet__btn {
  margin-top: 1.2rem; display: inline-block; padding: 1rem 2.4rem;
  font-size: 1.25rem; font-weight: var(--font-semibold); letter-spacing: .04em;
  border: 1px solid rgb(var(--color-base-text)); border-radius: var(--radius-button);
  background: none; color: rgb(var(--color-base-text)); cursor: pointer;
  transition: background .2s, color .2s;
}
.kalles-facet__btn:hover { background: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); }

/* Checkbox facet list (Size / Color …) */
.kalles-facet__list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.kalles-facet__check { display: flex; align-items: center; gap: 1rem; cursor: pointer; font-size: 1.35rem; color: rgb(var(--color-base-text)); }
.kalles-facet__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.kalles-facet__box {
  flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-2xs, 3px);
  border: 1px solid rgb(var(--color-foreground2)); position: relative; transition: background .15s, border-color .15s;
}
.kalles-facet__check input:checked + .kalles-facet__box { background: rgb(var(--color-base-text)); border-color: rgb(var(--color-base-text)); }
.kalles-facet__check input:checked + .kalles-facet__box::after {
  content: ""; position: absolute; left: .55rem; top: .2rem; width: .5rem; height: 1rem;
  border: solid #fff; border-width: 0 .2rem .2rem 0; transform: rotate(45deg);
}
.kalles-facet__name em { color: rgb(var(--color-foreground2)); font-style: normal; }

/* Dual-thumb price slider */
.kalles-price { position: relative; height: 2.4rem; margin: 1.4rem 0 .6rem; }
.kalles-price__track { position: absolute; top: 50%; left: 0; right: 0; height: .4rem; transform: translateY(-50%); background: rgb(var(--color-line-border)); border-radius: 4px; }
.kalles-price__fill { position: absolute; top: 0; bottom: 0; background: rgb(var(--color-base-text)); border-radius: 4px; }
.kalles-price__thumb {
  -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0;
  width: 100%; height: 2.4rem; margin: 0; background: none; pointer-events: none;
}
.kalles-price__thumb::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: rgb(var(--color-base-background)); border: 2px solid rgb(var(--color-base-text));
}
.kalles-price__thumb::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: rgb(var(--color-base-background)); border: 2px solid rgb(var(--color-base-text));
}
.kalles-price__thumb::-webkit-slider-runnable-track { background: none; }
.kalles-price__thumb::-moz-range-track { background: none; }
.kalles-price__label { font-size: 1.3rem; color: rgb(var(--color-base-text)); }

/* "from" prefix on variable-priced (option) product cards */
.kalles-pcard__from { color: rgb(var(--color-foreground2)); font-size: .92em; }