/* ========================================
   CATEGORY PAGE COMPONENTS
   ======================================== */

/* Collection Band
   The old hero gave a title and two numbers six hundred pixels — two thirds of a
   laptop screen — and then the products started. Here the same information is
   set in the space its content needs, so the first row of goods is on screen
   before the shopper scrolls. */
.collection-band {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(1.25rem, 2.4vw, 2.25rem);
  background: var(--color-cream);
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

/* The ring the storefront opening is known for, worn here as a reminder that
   this is the same shop rather than a different one. */
.collection-band__accent {
  position: absolute;
  top: 50%;
  right: -7%;
  width: clamp(13rem, 26vw, 22rem);
  height: clamp(13rem, 26vw, 22rem);
  border: clamp(2.5rem, 5vw, 4.5rem) solid rgba(212, 165, 165, 0.2);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* The trail is part of this band, not a white strip laid across it: one place
   to read where the shopper is, instead of two. */
.collection-band .breadcrumb {
  padding: var(--space-md) 0 0;
  margin-bottom: 6px;
  background: none;
  border-bottom: 0;
}

.collection-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 19vw, 270px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.collection-band__eyebrow {
  margin-bottom: 6px;
  color: var(--color-terracotta-strong);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
}

.collection-band__title {
  margin-bottom: var(--space-xs);
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(2rem, 3.9vw, 2.9rem);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

.collection-band__lede {
  max-width: 58ch;
  margin-bottom: var(--space-sm);
  color: var(--color-gray-600);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: var(--line-height-relaxed);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* One line of figures instead of a plinth each. They read as what they are: a
   description of the shelf, not three headlines. */
.collection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--color-gray-600);
}

.collection-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.collection-meta__item::after {
  margin-left: 12px;
  color: var(--color-gray-300);
  content: "·";
}

.collection-meta__item:last-child::after {
  content: none;
}

.collection-meta__item strong {
  color: var(--color-charcoal);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.collection-meta__item--stock strong {
  color: var(--color-success-strong);
}

.collection-band__media {
  position: relative;
  aspect-ratio: var(--aspect-portrait);
  overflow: hidden;
  background: var(--gradient-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.collection-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   CATALOG SHELL — filters beside goods
   ======================================== */
.catalog {
  display: grid;
  grid-template-columns: clamp(252px, 20vw, 296px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

/* The rail keeps up as the grid scrolls past it, so a shopper three rows down
   can still change their mind without a trip back to the top. It is a frame,
   not a scroller: the height limit and the scroll live inside the panel, where
   the head and the way out of the filters stay put while the list moves. */
/* A listing with nothing to narrow does not get a column, and the goods take the row. */
.catalog--no-aside {
  grid-template-columns: minmax(0, 1fr);
}

.catalog__aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-sm));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-height) - var(--space-lg));
}

.catalog__aside .facet-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.catalog__main {
  min-width: 0;
}

.catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

/* The two ends of the toolbar group themselves, so a narrow screen folds them into two lines
   instead of scattering four controls across three. */
.catalog__toolbar-head,
.catalog__toolbar-tail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.catalog__toolbar-tail {
  margin-left: auto;
}

/* Grid or rows.
   A control a shopper uses twice and then stops noticing, so it stays quiet: a pill of two words
   that fills with the softest colour in the system when it is the one they are looking at. Both
   halves are links, so the shelf can be reshaped with no script in the way. */
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-pill);
}

.view-switch__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-gray-600);
  font-size: 0.82rem;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.view-switch__option:hover {
  background: var(--color-gray-100);
  color: var(--color-charcoal);
}

.view-switch__option--on,
.view-switch__option--on:hover {
  background: var(--color-dusty-rose);
  color: var(--color-charcoal);
  font-weight: var(--font-weight-semibold);
}

.view-switch__option:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
}

/* Once the words no longer fit, the two marks carry the choice on their own. */
@media (max-width: 559px) {
  .view-switch__option {
    padding: 7px 10px;
  }

  .view-switch__option span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.catalog__count {
  font-size: 0.9rem;
  color: var(--color-gray-600);
}

.catalog__count strong {
  color: var(--color-charcoal);
  font-variant-numeric: tabular-nums;
}

.catalog__sort {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.catalog__sort-form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.catalog__sort-label {
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

/* Only a phone is short of width; on anything larger the panel stays where it
   is and the grid keeps three columns. */
.catalog__filters-btn {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

.catalog__filters-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-terracotta-strong);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
}

.catalog__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.catalog__clear {
  margin-left: auto;
  font-size: 0.83rem;
  color: var(--color-gray-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.catalog__clear:hover {
  color: var(--color-terracotta-strong);
}

/* Products Grid
   The columns are bought by the width that is left, not promised in advance: a sidebar has already
   spent a quarter of the row, and the shelf should hold as many things as it can without pushing a
   catalogue name onto a third line. `auto-fill` rather than `auto-fit`, because a shelf is a ruler
   and not a rummage: the goods are measured by the shelf, never by how few of them are on it today.
   A collapsed track would hand a single search hit the whole row, and a card that wide is neither a
   card nor a price anyone can compare against its neighbours. Empty tracks therefore stay, and a
   short row simply ends early. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.9rem, 1.5vw, 1.4rem);
  margin-bottom: var(--space-lg);
}

/* Narrower tracks inside the shell, where the rail has taken its share first — but not so narrow
   that a name like "Čaukstošās austiņas un kvadrātiņa komplekts — Zvaigznes piparmētru krāsā"
   loses its last word on every tablet. */
.products-grid--catalog {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* The same goods, laid out as a stack of rows.
   A list is not a denser grid — it asks a different question. In a grid a shopper scans pictures;
   in a row they compare a thing against its neighbours: the name, the choice in it, the price, and
   whether it is waiting in the cupboard. So the row keeps the photograph large — this is a handmade
   shop, and the picture is the argument — and spends the room beside it on everything a card had no
   width for. */
.products-grid--list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.products-grid--list .product-card {
  align-items: center;
  flex-direction: row;
}

.products-grid--list {
  /* One number for the width of a row's picture, so the heart that hangs off it and the picture
     itself cannot be moved apart by a later rule that knows only one of them. */
  --row-image: clamp(124px, 12vw, 164px);
}

.products-grid--list .product-card__image {
  flex: 0 0 var(--row-image);
  width: var(--row-image);
  margin: var(--space-sm);
}


/* A row is read, not browsed: the name gets the size a line of reading wants, and the three lines
   a card allows are two here, where the row is wide enough for a whole name. */
.products-grid--list .product-card__title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: clamp(1.18rem, 1.6vw, 1.34rem);
}

.products-grid--list .product-card__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

/* The two halves stop being contents and become the columns of the row. */
.products-grid--list .product-card__details,
.products-grid--list .product-card__aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.products-grid--list .product-card__details {
  gap: 6px;
}

/* A column of prices is the reason to open the list at all, so it stands at the right edge behind
   a hairline — the line of a ledger, without the ledger. */
.products-grid--list .product-card__aside {
  align-items: flex-end;
  gap: 5px;
  padding-left: var(--space-md);
  border-left: var(--border-width) solid var(--color-gray-200);
  text-align: right;
}

.products-grid--list .product-card__price {
  margin-top: 0;
  font-size: 1.18rem;
}

.products-grid--list .product-card__stock {
  display: inline-flex;
}

/* The row says it in words, in the column the eye runs down; the picture keeps its colour and
   only its faded look says what the label used to shout. */
.products-grid--list .product-card__soldout {
  display: none;
}

.products-grid--list .product-card__cta {
  display: inline-flex;
  margin-top: 4px;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-white);
  color: var(--color-charcoal);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-fast);
}

.pagination__link:hover {
  background: var(--color-cream);
  border-color: var(--color-dusty-rose);
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  background: var(--color-white);
  color: var(--color-charcoal);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  transition: var(--transition-fast);
}

.pagination__page:hover {
  background: var(--color-cream);
  border-color: var(--color-dusty-rose);
}

.pagination__link:focus-visible,
.pagination__page:focus-visible {
  outline: var(--border-width-focus) solid var(--color-dusty-rose-strong);
  outline-offset: 2px;
}

.pagination__page--active {
  background: var(--color-dusty-rose);
  color: var(--color-charcoal);
  font-weight: var(--font-weight-semibold);
  border-color: var(--color-dusty-rose);
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  color: var(--color-gray-600);
  font-size: 0.9rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

.empty-state__icon {
  margin: 0 auto var(--space-md);
  color: var(--color-dusty-rose);
  opacity: var(--opacity-icon-soft);
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
}

.empty-state__text {
  font-size: 1rem;
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
}

/* ========================================
   STOREFRONT LANDING AND CATEGORY BROWSING
   ======================================== */
.storefront-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: var(--color-cream);
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.storefront-intro__accent {
  position: absolute;
  width: clamp(14rem, 30vw, 26rem);
  height: clamp(14rem, 30vw, 26rem);
  top: 50%;
  right: -5%;
  border: clamp(2.5rem, 6vw, 5rem) solid rgba(212, 165, 165, 0.24);
  border-radius: 50%;
  transform: translateY(-50%);
}

.storefront-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.storefront-intro__label,
.storefront-section__label {
  margin-bottom: var(--space-xs);
  color: var(--color-terracotta-strong);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
}

.storefront-intro__title,
.storefront-section__title {
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
}

.storefront-intro__title {
  max-width: 42rem;
  margin-bottom: var(--space-sm);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: var(--line-height-tight);
}

.storefront-intro__text {
  max-width: 39rem;
  color: var(--color-gray-600);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: var(--line-height-relaxed);
}

.storefront-section,
.category-browse {
  padding: var(--space-xl) 0;
}

.storefront-section--offers {
  background: var(--color-white);
}

.storefront-section--categories,
.category-browse {
  background: var(--color-cream);
}

.storefront-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.storefront-section__header--centered {
  justify-content: center;
  text-align: center;
}

.storefront-section__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--line-height-tight);
}

/* The landing page has the whole row to itself, so four across stays. */
.category-browse__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.products-grid--preview {
  margin-bottom: 0;
}

/* On a desk the toolbar stays within reach.
   Twenty-four goods is a long scroll, and the two controls that decide what the scroll shows —
   the shape of the shelf and the order of its goods — should not be the first thing it leaves
   behind. It rides the cream the page is written on, so it reads as part of the shelf and not as
   a bar laid over it. */
@media (min-width: 1024px) {
  .catalog__toolbar {
    position: sticky;
    /* The header is fixed, so this is the line it ends at: anything less leaves a seam the goods
       show through on their way up. */
    top: var(--header-height);
    z-index: 5;
    /* Widened to the edges of the container and painted the page's own cream, because a bar that
       only covers its own column lets the goods peek past it on both sides. */
    margin-inline: calc(var(--space-md) * -1);
    padding-inline: var(--space-md);
    padding-top: var(--space-xs);
    margin-top: calc(var(--space-xs) * -1);
    background: var(--color-cream);
  }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1023px) {
  /* Below the tablet line the panel has no column of its own. It moves into a
     sheet the shopper opens on purpose, which is also why the button appears
     here and nowhere else. */
  .catalog {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .catalog__main {
    order: 1;
  }

  .catalog__aside {
    /* Without script the panel simply stays in the document, after the goods it
       describes, rather than in front of them. */
    position: static;
    max-height: none;
    order: 2;
  }

  /* Set by catalog.js once the panel has been carried into the sheet: an empty
     column would otherwise still spend its gap between the goods and the footer. */
  .catalog__aside--void {
    display: none;
  }

  .catalog__filters-btn {
    display: inline-flex;
  }

  /* The goods keep counting their own columns: with the rail gone the row is wider than it was,
     and the shelf fills it rather than holding to a number chosen for a narrower page. */
  .category-browse__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .collection-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  /* A photo of the collection is worth less than the first row of it. */
  .collection-band__media {
    display: none;
  }

  .collection-band__accent {
    right: -18%;
    opacity: 0.7;
  }

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

  /* A row on a phone: the picture shrinks to a thumbnail, the price steps out from behind its
     hairline and lies down beside the call to action, and the goods keep the line that is left. */
  .products-grid--list {
    --row-image: clamp(104px, 30vw, 132px);
  }

  .products-grid--list .product-card__image {
    flex: 0 0 var(--row-image);
    width: var(--row-image);
    margin: var(--space-xs);
  }


  .products-grid--list .product-card__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) var(--space-sm) 0;
  }

  .products-grid--list .product-card__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    border-left: 0;
    text-align: left;
  }

  .products-grid--list .product-card__mark {
    margin-top: 0;
    margin-left: auto;
  }

  .products-grid--list .product-card__cta {
    margin-top: 0;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .pagination__pages {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: var(--space-xs);
  }

  .catalog__toolbar {
    align-items: flex-start;
  }
}

@media (max-width: 479px) {
  /* Two small cards beat one large one at this width: a shopper thumbing a catalogue wants to see
     that there is more, and a name that runs to three lines is still a name they can read. The
     rows are left out of it on purpose — a row that is half as wide as the screen is not a row. The
     tracks are counted, not stretched: one lonely result is still one card wide, not a poster. */
  .products-grid:not(.products-grid--list) {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  }

  .products-grid {
    gap: var(--space-xs);
  }

  .storefront-intro {
    padding: var(--space-xl) 0;
  }

  .storefront-intro__accent {
    display: none;
  }

  .storefront-section,
  .category-browse {
    padding: var(--space-lg) 0;
  }

  /* Two page arrows plus a row of numbers does not fit in 320px; the numbers
     take the whole second line instead of squeezing the arrows. */
  .pagination__link {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
}