/* Generated by scripts/build-rtl.js (rtlcss). Do not edit; edit the LTR source and rebuild. */
/*
 * RIVISTA — product cards
 *
 * 1. Product card (woocommerce/content-product.php): shop, categories,
 *    "Pair with", upsells, cross-sells and the [rivista_products] section.
 * 2. Static card markup used by showcase pages (sizes, trust note, CTA).
 * 3. WooCommerce Blocks product grid fallback.
 * 4. Cart page cards, mini-cart drawer and card layout variations.
 */

:root {
  --cgc-bg: var(--paper, #ffffff);
  --cgc-text-dark: var(--ink, #14130f);
  --cgc-text-light: var(--ink-3, #5e5c56);
  --cgc-border: var(--line, #e9e6dc);
  --cgc-accent: var(--accent, #c4452a);
  --cgc-btn-bg: var(--ink, #14130f);
  --cgc-btn-text: var(--paper, #ffffff);
}

/* =========================================
   1. Product card
   ========================================= */

/* The loop <li> also carries .product-card, which main.css styles as the
   front page's butter hero card (grid, padding, 440px cap): reset that. */
.custom-grid-card {
  position: relative;
  display: block;
  grid-template-columns: none;
  gap: 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  text-align: right;
}

/* Scroll-reveal safety net. rivista-premium.js hides product-grid items
   (.rv) until an IntersectionObserver reports them; with smooth scrolling a
   quick fling (or a full-page capture) can pass a row before the observer
   runs, leaving blank cards. Items still waiting shortly after load settle
   on their own, with the same rise, so a card can never stay invisible.
   A later .rv-on simply removes this animation (the end state matches). */
ul.products > .rv:not(.rv-on) {
  animation: cgc-settle 850ms cubic-bezier(.22, 1, .36, 1) calc(1200ms + var(--rv-delay, 0ms)) forwards;
}

@keyframes cgc-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

/* The photograph and the add-to-bag control share the first grid row, so
   the control can sit on the image's bottom edge while staying last in the
   DOM (after the title and price) for keyboard and screen-reader order. */
.cgc-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  height: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.cgc-media-wrap {
  grid-area: 1 / 1;
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2, #f7f5f0);
}

.cgc-media-link {
  position: absolute;
  inset: 0;
  display: block;
}

/* Four classes so WooCommerce's `.woocommerce ul.products li.product a img`
   (height:auto and a bottom margin) cannot letterbox the photograph. */
.cgc-shell .cgc-media-wrap .cgc-media-link .cgc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

@media (hover: hover) {
  .cgc-shell:hover .cgc-img {
    transform: scale(1.03);
  }
}

/* ---- Badge: a small paper chip, ink text ---- */
.cgc-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px 3px;
  background: var(--paper, #fff);
  color: var(--ink, #14130f);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.cgc-badge.sale {
  color: var(--accent, #c4452a);
}

.cgc-badge.sold-out {
  color: var(--ink-3, #5e5c56);
}

/* ---- Info: name + price, then category ---- */
.cgc-info {
  grid-area: 2 / 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 14px;
}

.cgc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  min-width: 0;
  margin: 0;
}

.cgc-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink, #14130f);
}

.cgc-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur) var(--ease);
}

.cgc-shell:hover .cgc-title a,
.cgc-title a:focus-visible {
  text-decoration-color: currentColor;
}

.cgc-title a:focus-visible {
  outline: 2px solid var(--ink, #14130f);
  outline-offset: 3px;
}

.cgc-price {
  flex: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 6px;
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #14130f);
  white-space: nowrap;
}

.cgc-price del {
  color: var(--ink-3, #5e5c56);
  font-weight: 400;
  text-decoration-thickness: 1px;
  opacity: 1;
}

.cgc-price ins {
  color: var(--accent, #c4452a);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
}

.cgc-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.cgc-category {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #5e5c56);
}

.cgc-rating {
  flex: none;
  display: inline-flex;
}

.cgc-rating .star-rating {
  margin: 0;
  font-size: 10px;
  color: var(--ink, #14130f);
}

/* ---- Add to bag: ink bar on hover, round "+" on touch ---- */
.cgc-quick-add {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* WooCommerce core sets `.woocommerce ul.products li.product .button`
   (display + top margin) at this exact weight; this file loads later. */
ul.products li.product .cgc-quick-add .button,
ul.products li.product .cgc-quick-add .added_to_cart {
  display: flex;
  margin: 0;
}

.cgc-shell .cgc-quick-add .button {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--ink, #14130f);
  color: var(--paper, #fff);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.cgc-shell .cgc-quick-add .button:hover {
  background: color-mix(in srgb, var(--ink, #14130f) 86%, var(--paper, #fff));
  color: var(--paper, #fff);
}

.cgc-shell .cgc-quick-add .button:focus-visible {
  outline: 2px solid var(--paper, #fff);
  outline-offset: -6px;
}

.cgc-quick-add .cgc-add-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cgc-add-icon {
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.cgc-add-icon--done {
  display: none;
}

.cgc-shell .cgc-quick-add .button:hover .cgc-add-icon--plus {
  transform: rotate(-90deg);
}

.cgc-shell .cgc-quick-add .button.added .cgc-add-icon--plus {
  display: none;
}

.cgc-shell .cgc-quick-add .button.added .cgc-add-icon--done {
  display: block;
}

/* AJAX states: WooCommerce dims the button and draws icon-font glyphs. */
.cgc-shell .cgc-quick-add .button.loading {
  opacity: 1;
  padding-left: 16px;
}

.cgc-shell .cgc-quick-add .button.loading .cgc-add-icon {
  opacity: 0;
}

.cgc-shell .cgc-quick-add .button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  right: auto;
  width: 14px;
  height: 14px;
  margin: -7px 0 0;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  font-family: inherit;
  animation: cgc-spin .7s linear infinite;
}

.cgc-shell .cgc-quick-add .button.added::after {
  content: none;
}

@keyframes cgc-spin {
  to { transform: rotate(-360deg); }
}

/* "View cart", inserted by WooCommerce after a successful AJAX add. */
.cgc-shell .cgc-quick-add .added_to_cart {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border-right: 1px solid color-mix(in srgb, var(--paper, #fff) 22%, transparent);
  background: var(--ink, #14130f);
  color: var(--paper, #fff);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  pointer-events: auto;
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}

.cgc-shell .cgc-quick-add .added_to_cart:focus-visible {
  outline: 2px solid var(--paper, #fff);
  outline-offset: -6px;
}

@media (hover: hover) {
  .cgc-shell:hover .cgc-quick-add .button,
  .cgc-shell:hover .cgc-quick-add .added_to_cart,
  .cgc-shell:focus-within .cgc-quick-add .button,
  .cgc-shell:focus-within .cgc-quick-add .added_to_cart,
  .cgc-quick-add:has(.added_to_cart) .button,
  .cgc-quick-add:has(.added_to_cart) .added_to_cart {
    transform: none;
  }
}

@media (hover: none) {
  .cgc-quick-add {
    justify-self: end;
    margin: 0 0 12px 12px;
    overflow: visible;
  }

  /* A small 34px paper disc so the photograph stays first; the transparent
     ::before ring below keeps a 40px touch target. */
  .cgc-shell .cgc-quick-add .button {
    flex: none;
    justify-content: center;
    gap: 0;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--paper, #fff);
    color: var(--ink, #14130f);
    overflow: visible;
    transform: none;
  }

  .cgc-shell .cgc-quick-add .button::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
  }

  .cgc-shell .cgc-quick-add .button:hover {
    background: var(--paper, #fff);
    color: var(--ink, #14130f);
  }

  .cgc-shell .cgc-quick-add .button:focus-visible {
    outline: 2px solid var(--ink, #14130f);
    outline-offset: 2px;
  }

  .cgc-shell .cgc-quick-add .button.loading {
    padding-left: 0;
  }

  .cgc-shell .cgc-quick-add .button.loading::after {
    left: 50%;
    margin: -7px 0 0 -7px;
  }

  /* The label stays the link's accessible name; only the "+" is drawn. */
  .cgc-quick-add .cgc-add-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cgc-add-icon {
    width: 14px;
    height: 14px;
  }

  /* No room for a second control beside the round button; the header bag
     count already confirms the add. */
  .cgc-shell .cgc-quick-add .added_to_cart {
    display: none;
  }
}

/* Phones: two narrow columns leave no room for the price beside the name,
   so the price sits under it. The name always reserves two lines (longer
   names are clamped), keeping price and category on shared baselines
   across every row of the grid. */
@media (max-width: 640px) {
  .cgc-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .cgc-title {
    flex: none;
    align-self: stretch;
    min-height: calc(2em * 1.25);
    font-size: 14px;
    line-height: 1.25;
  }

  .cgc-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-underline-offset: 2px;
  }

  .cgc-price {
    justify-content: flex-start;
    font-size: 13px;
  }

  .cgc-category {
    font-size: 10px;
    letter-spacing: .12em;
  }

  .cgc-info {
    gap: 4px;
    padding-top: 10px;
  }

  .cgc-badge {
    top: 8px;
    right: 8px;
  }

  @media (hover: none) {
    .cgc-quick-add {
      margin: 0 0 8px 8px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ul.products > .rv:not(.rv-on) {
    animation: none;
  }

  .cgc-shell .cgc-media-wrap .cgc-media-link .cgc-img,
  .cgc-title a,
  .cgc-add-icon,
  .cgc-shell .cgc-quick-add .button,
  .cgc-shell .cgc-quick-add .added_to_cart {
    transition: none;
  }

  .cgc-shell:hover .cgc-img,
  .cgc-shell .cgc-quick-add .button:hover .cgc-add-icon--plus {
    transform: none;
  }

  .cgc-shell .cgc-quick-add .button.loading::after {
    animation-duration: 1.6s;
  }
}

/* =========================================
   2. Static card markup (showcase pages)
   ========================================= */

.cgc-colors {
  display: flex;
  gap: 4px;
}

.cgc-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--line, rgba(0,0,0,0.1));
}

.cgc-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.cgc-size-guide-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cgc-text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.cgc-sizes-wrap {
  margin-bottom: 16px;
}

.cgc-sizes-label {
  display: block;
  font-size: 13px;
  color: var(--cgc-text-dark);
  margin-bottom: 8px;
}

.cgc-sizes {
  display: flex;
  gap: 6px;
}

.cgc-size-btn {
  background: transparent;
  border: 1px solid var(--cgc-border);
  border-radius: 0;
  padding: 6px 0;
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--cgc-text-dark);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cgc-size-btn:hover {
  border-color: var(--cgc-text-dark);
}

.cgc-size-btn.is-active {
  border-color: var(--cgc-text-dark);
  background: var(--cgc-text-dark);
  color: var(--paper);
}

.cgc-trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cgc-trust-text {
  display: flex;
  flex-direction: column;
}

.cgc-trust-text strong {
  font-size: 13px;
  color: var(--cgc-text-dark);
}

.cgc-trust-text span {
  font-size: 12px;
  color: var(--cgc-text-light);
}

.cgc-actions {
  margin-top: auto;
}

.cgc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: var(--cgc-btn-bg);
  color: var(--cgc-btn-text);
  font-family: var(--display, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.cgc-add-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* =========================================
   3. WooCommerce Blocks product grid fallback
   (the classic loop always uses the card above)
   ========================================= */

.wc-block-grid__product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
}

/* WooCommerce Blocks' own stylesheet centres and pads these; the block
   rules use the same class chain, so the overrides below need !important. */
.wc-block-grid__product-image,
.wc-block-grid__product-image a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2, #f7f5f0);
}

.wc-block-grid__product-image img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  transition: transform 900ms var(--ease);
}

@media (hover: hover) {
  .wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.03);
  }
}

.wc-block-grid__product-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--display, inherit) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink, #14130f) !important;
  text-align: right !important;
}

.wc-block-grid__product-price {
  margin: 0 !important;
  font-family: var(--display, inherit) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #14130f) !important;
  text-align: right !important;
}

.wc-block-grid__product-add-to-cart,
.wc-block-grid__product-add-to-cart.wp-block-button {
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink, #14130f) !important;
  color: var(--paper, #fff) !important;
  font-family: var(--display, inherit) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
  outline: 2px solid var(--ink, #14130f);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-grid__product-image img { transition: none; }
  .wc-block-grid__product:hover .wc-block-grid__product-image img { transform: none; }
}

/* ============================================================
   HEADER SCROLL & ADMIN BAR FIXES
   ============================================================ */

/* Fix WordPress Admin Bar overlapping the sticky header */
body.admin-bar .header.sticky {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .header.sticky {
    top: 46px !important;
  }
}

/* =========================================
   4. Cart Page Cards (Matching Mockup)
   ========================================= */

.rivista-cart-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.rivista-cart-card {
    background-color: var(--paper-2, #ffffff);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--line); /* hairline instead of a drop shadow */
    display: flex;
    flex-direction: column;
}

.rivista-cart-card-top {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.rivista-cart-card-image {
    width: 120px;
    height: 120px;
    background-color: var(--paper, #f7f7f7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.rivista-cart-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.rivista-cart-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.rivista-cart-card-title-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rivista-cart-card-title-row a {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #111111);
    text-decoration: none;
}

.rivista-cart-card-title-row dl.variation {
    margin: 0;
    font-size: 14px;
    color: var(--ink-3, #888888);
    display: flex;
    gap: 4px;
}
.rivista-cart-card-title-row dl.variation dt {
    font-weight: normal;
}
.rivista-cart-card-title-row dl.variation p {
    margin: 0;
}

.rivista-cart-card-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.rivista-cart-card-unit-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #111111);
}

.rivista-cart-card-quantity .quantity {
    display: flex;
    align-items: center;
}

.rivista-cart-card-quantity .qty {
    width: 60px;
    height: 36px;
    border: 1px solid var(--line, #eaeaea);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-2, #888888);
    background: transparent;
    padding: 0;
}

.rivista-cart-card-divider {
    border: 0;
    height: 1px;
    background-color: var(--line, #eaeaea);
    margin: 24px 0;
}

.rivista-cart-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.rivista-cart-card-total-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rivista-cart-card-total-label {
    font-size: 14px;
    color: var(--ink-3, #888888);
}

.rivista-cart-card-total-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #111111);
}

.rivista-cart-card-actions {
    display: flex;
    gap: 12px;
}

.rivista-cart-remove-btn {
    background-color: var(--ink, #111111);
    color: var(--paper, #ffffff) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 30px; /* Pill shape */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.rivista-cart-remove-btn:hover {
    background-color: var(--ink-2, #333333);
}

/* Actions Row at the bottom of the list */
.rivista-cart-actions-row {
    margin-top: 24px;
    padding: 24px;
    background-color: var(--paper-2, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--line); /* hairline instead of a drop shadow */
}

.rivista-cart-actions-row .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.rivista-cart-actions-row .coupon {
    display: flex;
    gap: 12px;
}

.rivista-cart-actions-row .coupon input {
    height: 44px;
    border: 1px solid var(--line, #eaeaea);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    padding: 0 16px;
    min-width: 200px;
}

.rivista-cart-actions-row .button {
    height: 44px;
    background-color: var(--paper, #f7f7f7);
    color: var(--ink, #111111);
    border: 1px solid var(--line, #eaeaea);
    border-radius: 8px;
    padding: 0 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rivista-cart-actions-row .button:hover {
    background-color: var(--line, #eaeaea);
}

/* Hide WooCommerce default cart table headers if any leak through */
.woocommerce-cart-form__contents thead {
    display: none !important;
}

/* Refined Off-Canvas Cart Layout */
.off-canvas-cart .cart-panel {
    width: min(440px, 100vw);
    background-color: var(--paper);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.off-canvas-cart .cart-header {
    padding: 32px 36px 24px;
    border-bottom: 1px solid var(--line);
}

.off-canvas-cart .cart-header h3 {
    font-family: var(--serif) !important;
    font-size: 28px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    margin-top: 4px !important;
}

.off-canvas-cart .cart-eyebrow {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.off-canvas-cart .close-cart {
    border: none;
    width: auto;
    height: auto;
    background: none;
    color: var(--ink);
    font-size: 28px;
    padding: 0;
    cursor: pointer;
}

.off-canvas-cart .close-cart:hover {
    color: var(--accent) !important;
}

.off-canvas-cart .cart-progress-card {
    margin: 0 36px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

.off-canvas-cart .cart-progress-track {
    height: 3px !important;
    background: var(--paper-2) !important;
    border-radius: 99px !important;
}

.off-canvas-cart .cart-progress-track span {
    background: var(--accent) !important;
    height: 100% !important;
}

.off-canvas-cart .cart-perks {
    padding: 12px 36px !important;
    background: var(--paper-2) !important;
    border-bottom: 1px solid var(--line) !important;
    display: flex;
    justify-content: space-between;
    font-family: var(--display) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
    color: var(--ink-3) !important;
}

.off-canvas-cart .cart-body {
    padding: 24px 36px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.off-canvas-cart .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* List elements */
.off-canvas-cart ul.woocommerce-mini-cart {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mini-cart item layout is handled by the grid rules in _shared.css.
   The previous display:block !important overrides here broke that grid
   (image, name, price and remove stacked on top of each other). */

/* Item details inner structures */
.minicart-item-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.minicart-item-img {
    width: 80px;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--paper-2);
    flex-shrink: 0;
}

.minicart-item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

.minicart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.minicart-item-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.minicart-item-title {
    margin: 0 !important;
    font-family: var(--display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.minicart-item-title a {
    color: var(--ink) !important;
    text-decoration: none !important;
}

.minicart-item-title a:hover {
    color: var(--accent) !important;
}

/* Attributes variations like Size: M */
.minicart-item-meta dl.variation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 8px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-family: var(--display) !important;
    font-size: 11px !important;
    color: var(--ink-3) !important;
    border: none !important;
    background: transparent !important;
}

.minicart-item-meta dl.variation dt,
.minicart-item-meta dl.variation dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.minicart-item-meta dl.variation dt::after {
    content: ":";
}

.minicart-item-pricing {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--display);
    font-size: 13px;
    margin-top: 4px;
}

.minicart-item-qty {
    color: var(--ink-3);
}

.minicart-item-price {
    font-weight: 700;
    color: var(--ink);
}

.minicart-item-remove {
    margin-top: 6px;
}

.minicart-remove-link,
.off-canvas-cart .minicart-remove-link.remove {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    color: var(--ink-3) !important;
    font-family: var(--display) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: underline !important;
    cursor: pointer;
    display: inline-block !important;
    position: static !important;
}

.minicart-remove-link:hover,
.off-canvas-cart .minicart-remove-link.remove:hover {
    color: var(--accent) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

/* Totals and Buttons */
.off-canvas-cart .woocommerce-mini-cart__total,
.off-canvas-cart .total {
    margin: auto 0 0;
    padding: 24px 0 16px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--display);
    font-size: 16px;
    color: var(--ink);
}

.off-canvas-cart .woocommerce-mini-cart__total strong,
.off-canvas-cart .total strong {
    font-weight: 700;
}

.off-canvas-cart .woocommerce-mini-cart__buttons,
.off-canvas-cart .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button,
.off-canvas-cart .buttons .button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 0 !important; /* Sharp luxury edges */
    font-family: var(--display) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
    border: 1px solid var(--ink) !important;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button:not(.checkout),
.off-canvas-cart .buttons .button:not(.checkout) {
    background: transparent;
    color: var(--ink);
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout,
.off-canvas-cart .buttons .button.checkout {
    background: var(--ink);
    color: var(--paper);
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button:hover,
.off-canvas-cart .buttons .button:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--paper) !important;
}

/* Deprecated mini-cart styles removed to avoid conflicts */

/* Fallback for Gutenberg Mini Cart Block if used */
.off-canvas-cart .wp-block-woocommerce-mini-cart-contents,
.off-canvas-cart .wc-block-mini-cart__items {
    flex: 1 1 auto !important;
    min-height: 50px !important;
    overflow-y: auto !important;
}

/* =========================================
   Fix for Vertical Cramping on Small Screens
   ========================================= */
.off-canvas-cart .cart-body {
    min-height: 0; /* Ensure the body can shrink */
}

/* Hide secondary elements when vertical space is limited */
@media (max-height: 750px) {
    .off-canvas-cart .cart-perks {
        display: none !important;
    }
}

@media (max-height: 600px) {
    .off-canvas-cart .cart-progress-card {
        display: none !important;
    }
    .off-canvas-cart .cart-body {
        padding-top: 12px;
    }
}

/* ============================================================
   NEW CUSTOM CARD VARIATIONS (MINIMAL & SPLIT)
   ============================================================ */

/* --- 1. Minimal Layout (Quick Add hover overlay) --- */
.cgc-layout-minimal .cgc-media-wrap {
  position: relative;
}

.cgc-hover-btn {
  position: absolute;
  right: 12px; left: 12px; bottom: 12px;
  padding: 11px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
  z-index: 3;
  cursor: pointer;
  text-decoration: none;
}

.cgc-layout-minimal:hover .cgc-hover-btn {
  opacity: 1;
  transform: translateY(0);
}

.cgc-hover-btn:hover {
  background: var(--terra);
  color: var(--paper);
}

.cgc-minimal-info {
  margin-top: 14px;
}

.cgc-minimal-info .cgc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
}

.cgc-minimal-info .cgc-title {
  font-size: 16px;
  font-weight: 500;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgc-minimal-info .cgc-price {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- 2. Split/Editorial Layout (Flex Row) --- */
.cgc-layout-split {
  display: flex !important;
  flex-direction: row !important;
  gap: 40px !important;
  align-items: center !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.cgc-split-left {
  flex: 1.1;
  min-width: 0;
}

.cgc-split-left .cgc-media-wrap {
  margin-bottom: 0;
}

.cgc-split-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cgc-layout-split .cgc-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cgc-layout-split .cgc-title {
  font-family: var(--display) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  margin: 0;
}

.cgc-layout-split .cgc-title i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
}

.cgc-layout-split .cgc-desc {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}

.cgc-layout-split .cgc-add-btn {
  align-self: flex-start;
  width: auto;
  min-width: 180px;
}

@media (max-width: 760px) {
  .cgc-layout-split {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .cgc-split-left, .cgc-split-right {
    width: 100%;
  }
  .cgc-layout-split .cgc-title {
    font-size: 28px !important;
  }
}

/* Force spotlight grid to use 1 column when displaying split card layouts */
.lx-grid.cgc-grid-split {
  grid-template-columns: 1fr !important;
  gap: 60px !important;
}