/* Generated by scripts/build-rtl.js (rtlcss). Do not edit; edit the LTR source and rebuild. */
/* ============================================================
   RIVISTA — WooCommerce product archives
   Shop page, product categories and product tags
   (woocommerce/archive-product.php). The cards themselves are styled
   in custom-cards.css so the shop, "Pair with" and the product
   sections share one component.
   ============================================================ */

/* ---- Page frame: aligned to the header shell ---- */
.woocommerce-shop #main-content,
.tax-product_cat #main-content,
.tax-product_tag #main-content,
.post-type-archive-product #main-content {
  width: auto;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(64px, 6vw, 80px);
}

/* The fixed compare tray (commerce.js sets body.has-compare-bar) needs its
   own height of paper under the last line of the loop, so the end line and
   pagination can always scroll clear of it. */
.has-compare-bar.woocommerce-shop #main-content,
.has-compare-bar.tax-product_cat #main-content,
.has-compare-bar.tax-product_tag #main-content,
.has-compare-bar.post-type-archive-product #main-content {
  padding-bottom: max(clamp(64px, 6vw, 80px), var(--cf-cbar-space, 112px));
}

/* The page ends on the grid's own spacing; no second gap from the footer. */
.woocommerce-shop .footer,
.tax-product_cat .footer,
.tax-product_tag .footer,
.post-type-archive-product .footer {
  margin-top: 0;
}

.shop-archive .woocommerce-notices-wrapper {
  width: auto;
  margin: 0;
}

.shop-archive .woocommerce-notices-wrapper:not(:empty) {
  margin-top: 32px;
}

/* ---- Breadcrumb ---- */
.shop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: clamp(28px, 3.4vw, 44px) 0 0;
  font-family: var(--display);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink-3);
}

.shop-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.shop-breadcrumb a:hover {
  color: var(--ink);
}

.shop-breadcrumb a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.shop-breadcrumb .current {
  color: var(--ink);
}

/* ---- Header: title with the piece count, description ---- */
.shop-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
  align-items: end;
  gap: 20px 64px;
  margin: 0;
  padding: clamp(18px, 2.4vw, 28px) 0 0;
  border: 0;
  text-align: right;
}

.shop-header > :only-child {
  grid-column: 1 / -1;
}

.shop-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 108px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ink);
}

.shop-count {
  position: relative;
  top: .35em;
  margin-right: .14em;
  vertical-align: top;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.shop-desc {
  padding-bottom: .5em;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-2);
}

.shop-desc p,
.shop-desc .term-description,
.shop-desc .page-description {
  margin: 0;
}

.shop-desc p + p {
  margin-top: .6em;
}

/* ---- Toolbar: category tabs + result count and sort ---- */
.shop-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin: clamp(32px, 4vw, 52px) 0 clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}

/* Horizontal scroller. The inline padding (cancelled by the negative
   margin, so tabs at rest still start on the shell edge) holds the edge
   fade and focus rings; the 1px bottom padding lets the active underline
   sit on the toolbar hairline. */
.shop-cats {
  --shop-cats-fade: 24px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 -24px -1px;
  padding: 0 24px 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--shop-cats-fade);
  scrollbar-width: none;
  /* Tabs fade out at both ends (symmetric, so it reads the same in RTL) to
     hint that the row scrolls. The second layer keeps the bottom 2px, the
     hairline and the active underline, fully drawn. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--shop-cats-fade), #000 calc(100% - var(--shop-cats-fade)), transparent), linear-gradient(#000, #000);
  mask-image: linear-gradient(to right, transparent, #000 var(--shop-cats-fade), #000 calc(100% - var(--shop-cats-fade)), transparent), linear-gradient(#000, #000);
  -webkit-mask-size: 100% calc(100% - 2px), 100% 2px;
  mask-size: 100% calc(100% - 2px), 100% 2px;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.shop-cats::-webkit-scrollbar {
  display: none;
}

.shop-cats-list {
  display: flex;
  gap: clamp(20px, 2.4vw, 32px);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-cats-list li {
  flex: none;
  margin: 0;
  padding: 0;
}

.shop-cat {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  padding: 15px 0 16px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.shop-cat::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}

.shop-cat:hover,
.shop-cat.is-active {
  color: var(--ink);
}

.shop-cat.is-active::after {
  transform: scaleX(1);
}

.shop-cat:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.shop-cat-count {
  position: relative;
  top: -.2em;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-3);
}

.shop-sort {
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: -1px;
}

.shop-sort .woocommerce-result-count {
  float: none;
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
  white-space: nowrap;
}

.shop-sort .woocommerce-ordering {
  position: relative;
  float: none;
  margin: 0;
}

/* Chevron for the custom select (the form has no other generated content). */
.shop-sort .woocommerce-ordering::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
  pointer-events: none;
}

.shop-sort .woocommerce-ordering select.orderby {
  -webkit-appearance: none;
  appearance: none;
  field-sizing: content;
  min-width: 9.5em;
  height: 50px;
  margin: 0;
  padding: 0 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.shop-sort .woocommerce-ordering select.orderby:hover {
  border-bottom-color: var(--ink);
}

.shop-sort .woocommerce-ordering select.orderby:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.shop-sort .woocommerce-ordering select.orderby option {
  background: var(--paper);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Grid ---- */
.shop-grid {
  width: 100%;
}

/* Column count and gutters are tokens so the story tile can sit on exactly
   the same tracks as the cards. */
.woocommerce .shop-grid ul.products,
.woocommerce-page .shop-grid ul.products {
  --shop-cols: 4;
  --shop-gap-x: 24px;
  --shop-gap-y: 56px;
  display: grid;
  grid-template-columns: repeat(var(--shop-cols), minmax(0, 1fr));
  gap: var(--shop-gap-y) var(--shop-gap-x);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce .shop-grid ul.products::before,
.woocommerce .shop-grid ul.products::after,
.woocommerce-page .shop-grid ul.products::before,
.woocommerce-page .shop-grid ul.products::after {
  content: none;
  display: none;
}

/* Core float grid (woocommerce-layout / -smallscreen) sets widths and
   margins per column count; grid placement replaces all of it. */
.woocommerce .shop-grid ul.products[class*="columns-"] li.product,
.woocommerce-page .shop-grid ul.products[class*="columns-"] li.product,
.woocommerce .shop-grid ul.products li.product,
.woocommerce-page .shop-grid ul.products li.product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* ---- Editorial story tile (first shop page, after four pieces) ----
   The tile repeats the product grid's own tracks: the photograph spans
   exactly two card columns (one on tablets), the copy takes the rest,
   centred on the photograph. Equal breathing room above and below. */
.shop-grid ul.products li.shop-story {
  grid-column: 1 / -1;
  width: auto;
  float: none;
  margin: clamp(8px, 1.4vw, 20px) 0;
  padding: 0;
  list-style: none;
}

.shop-story-in {
  display: grid;
  grid-template-columns: repeat(var(--shop-cols, 4), minmax(0, 1fr));
  align-items: center;
  column-gap: var(--shop-gap-x, 24px);
}

.shop-story-media {
  position: relative;
  display: block;
  grid-column: 1 / 3;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}

.shop-story .shop-story-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 38% 38%;
  transition: transform 900ms var(--ease);
}

.shop-story-copy {
  grid-column: 3 / -1;
  max-width: 30rem;
  padding-inline-start: clamp(0px, 3.2vw, 48px);
}

.shop-story-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shop-story-eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--terra);
}

.shop-story-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
}

.shop-story-title i,
.shop-story-title em {
  font-style: italic;
}

.shop-story-text {
  max-width: 38ch;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Shared text link: story tile and end-of-collection line. */
.shop-story-link,
.shop-end-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.shop-story-link svg,
.shop-end-link svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.shop-story-link:hover svg,
.shop-end-link:hover svg {
  transform: translateX(-4px);
}

.shop-story-link:focus-visible,
.shop-end-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .shop-story-in:hover .shop-story-media img {
    transform: scale(1.03);
  }
}

/* ---- End of the loop ---- */
.shop-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: clamp(48px, 5vw, 64px) 0 0;
  text-align: center;
}

.shop-end::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--terra);
}

.shop-end-line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-style: italic;
  line-height: 1.2;
  color: var(--ink-2);
}

.shop-pagination {
  display: flex;
  justify-content: center;
  margin: clamp(48px, 5vw, 64px) 0 0;
}

.shop-pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-pagination-list li {
  margin: 0;
  padding: 0;
}

.shop-pagination .page-numbers {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.shop-pagination .page-numbers::after {
  content: "";
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.shop-pagination a.page-numbers:hover,
.shop-pagination .page-numbers.current {
  color: var(--ink);
}

.shop-pagination .page-numbers.current::after {
  transform: scaleX(1);
}

.shop-pagination .page-numbers.prev::after,
.shop-pagination .page-numbers.next::after,
.shop-pagination .page-numbers.dots::after {
  content: none;
}

.shop-pagination .page-numbers svg {
  display: block;
  width: 16px;
  height: 16px;
}

.shop-pagination a.page-numbers:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
[dir="rtl"] .shop-pagination .page-numbers svg,
[dir="rtl"] .shop-story-link svg,
[dir="rtl"] .shop-end-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .shop-story-link:hover svg,
[dir="rtl"] .shop-end-link:hover svg {
  transform: scaleX(-1) translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .woocommerce .shop-grid ul.products,
  .woocommerce-page .shop-grid ul.products {
    --shop-cols: 3;
    --shop-gap-x: 20px;
    --shop-gap-y: 48px;
  }
}

@media (max-width: 899px) {
  .woocommerce .shop-grid ul.products,
  .woocommerce-page .shop-grid ul.products {
    --shop-cols: 2;
    --shop-gap-x: 16px;
    --shop-gap-y: 44px;
  }

  .shop-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-desc {
    max-width: 46ch;
    padding-bottom: 0;
    font-size: 17px;
  }

  /* Two card columns: photograph and copy take one column each; the
     photograph keeps the card proportion. */
  .shop-story-media {
    grid-column: 1 / 2;
    aspect-ratio: 4 / 5;
  }

  .shop-story-copy {
    grid-column: 2 / -1;
    padding-inline-start: clamp(0px, 2.4vw, 24px);
  }
}

/* Tablets and phones: tabs get their own full-width row (beside the sort
   control they would already be scrolling at 768px). */
@media (max-width: 899px) {
  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 28px 0 24px;
    border-bottom: 0;
  }

  /* Tabs bleed to the screen edges; the hairline runs under the list. The
     edge fade covers the side gutter, so tabs at rest are never faded. */
  .shop-cats {
    --shop-cats-fade: var(--pad-x);
    margin: 0 calc(var(--pad-x) * -1);
    padding: 0;
  }

  .shop-cats-list {
    min-width: 100%;
    padding: 0 var(--pad-x);
    border-bottom: 1px solid var(--line);
    gap: 22px;
  }

  .shop-cat {
    padding: 13px 0 14px;
  }

  .shop-sort {
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding-top: 8px;
  }

  .shop-sort .woocommerce-ordering select.orderby {
    height: 44px;
  }
}

@media (max-width: 640px) {
  .woocommerce .shop-grid ul.products,
  .woocommerce-page .shop-grid ul.products {
    --shop-gap-x: 12px;
    --shop-gap-y: 36px;
  }

  .shop-count {
    top: .25em;
  }

  .shop-grid ul.products li.shop-story {
    margin: 4px 0;
  }

  .shop-story-in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .shop-story-media,
  .shop-story-copy {
    grid-column: 1 / -1;
  }

  .shop-story-media {
    aspect-ratio: 4 / 3;
  }

  .shop-story-copy {
    max-width: 36rem;
    padding-inline-start: 0;
  }

  .shop-story-eyebrow {
    margin-bottom: 14px;
  }

  .shop-story-title {
    margin-bottom: 12px;
  }

  .shop-story-text {
    margin-bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-cat,
  .shop-cat::after,
  .shop-sort .woocommerce-ordering select.orderby,
  .shop-story .shop-story-media img,
  .shop-story-link,
  .shop-story-link svg,
  .shop-end-link,
  .shop-end-link svg,
  .shop-pagination .page-numbers,
  .shop-pagination .page-numbers::after {
    transition: none;
  }

  .shop-story-in:hover .shop-story-media img,
  .shop-story-link:hover svg,
  .shop-end-link:hover svg {
    transform: none;
  }
}