/* ==========================================================================
   Cart — Estelia
   Loaded on: cart page only (inc/assets.php)

   Two jobs:
   1. Bring the empty-cart "Nyheter i butikken" grid in line with the shop
      archive cards (shop.css) — WooCommerce's product-new block ships a
      flex row of raw-ratio images, so the cards came out ragged.
   2. Keep the cart to a single call to action (see the express-payment
      section at the bottom).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Empty-cart headings
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-block-cart__empty-cart__title{
  font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--est-tracking-display, -0.02em);
  color: var(--est-ink, #131313);
}

/* Section heading above the product grid — matches "Handle etter kategori"
   on the front page. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title){
  font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--est-tracking-display, -0.02em);
  color: var(--est-ink, #131313);
  margin: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.25rem, 3vw, 2rem);
}

/* --------------------------------------------------------------------------
   Product grid — 2 mobile / 3 tablet / 4 desktop, same rhythm as shop.css.
   The block ships `display: flex` with percentage flex-basis on the items;
   both have to be overridden for the grid to take effect.
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-block-grid__products{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em){
  .woocommerce-cart .wc-block-grid__products{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 75em){
  .woocommerce-cart .wc-block-grid__products{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.woocommerce-cart .wc-block-grid__product{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  display: flex !important;
  flex-direction: column;
  text-align: left;
}

.woocommerce-cart .wc-block-grid__product-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Media — fixed 3:4 box so every card lines up regardless of source ratio */
.woocommerce-cart .wc-block-grid__product-image{
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 var(--est-space-m, 1rem);
  background: var(--est-surface, #F1F1EF);
  border-radius: var(--est-radius, 0);
}

.woocommerce-cart .wc-block-grid__product-image img{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 600ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}

@media (hover: hover) and (pointer: fine){
  .woocommerce-cart .wc-block-grid__product-link:hover .wc-block-grid__product-image img{
    transform: scale(1.03);
  }
}

/* Title */
.woocommerce-cart .wc-block-grid__product-title{
  font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--est-tracking-display, -0.02em);
  color: var(--est-ink, #131313);
  margin: 0 0 .5rem;
  padding: 0;
}

/* Price */
.woocommerce-cart .wc-block-grid__product-price,
.woocommerce-cart .wc-block-grid__product-price .woocommerce-Price-amount,
.woocommerce-cart .wc-block-grid__product-price bdi{
  font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--est-ink, #131313);
  margin: 0 0 1rem;
  text-decoration: none;
}

.woocommerce-cart .wc-block-grid__product-price del,
.woocommerce-cart .wc-block-grid__product-price del bdi{
  opacity: .5;
  font-weight: 400;
}

/* Colour swatches — injected into the block's card markup by
   inc/catalog-behaviour.php. The same dots the archive cards get, repeated
   here because shop.css scopes those to `ul.products li.product` and the
   block grid is neither. */
.woocommerce-cart .wc-block-grid__product .est-swatches{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.woocommerce-cart .wc-block-grid__product .est-swatches__item{
  margin: 0;
  padding: 0;
  line-height: 0;
}

.woocommerce-cart .wc-block-grid__product .est-swatch{
  display: block;
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background-color: var(--est-swatch-color, #CCC);
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .18);
}

.woocommerce-cart .wc-block-grid__product .est-swatches__more{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--est-ink, #131313);
  opacity: .6;
  line-height: 1;
  margin-left: .125rem;
}

/* Price left, swatches right, one line — the archive card's row
   (shop.css). inc/catalog-behaviour.php wraps the block's own price
   markup and the swatches in it together. */
.woocommerce-cart .wc-block-grid__product .est-card-pricerow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 1rem;
  /* A long "fra kr 1 299" beside five dots can outgrow a narrow card; let
     the swatches drop below, still right-aligned, rather than spill out. */
  flex-wrap: wrap;
}

.woocommerce-cart .wc-block-grid__product .est-card-pricerow .est-swatches{
  margin-inline-start: auto;
}

/* Inside the row both children carry their own spacing already. */
.woocommerce-cart .wc-block-grid__product .est-card-pricerow > *{
  margin: 0;
}

/* Ratings are dropped on archive cards (shop.css) — same here, so a
   half-populated star row cannot knock the cards out of alignment. */
.woocommerce-cart .wc-block-grid__product-rating{
  display: none;
}

/* Add to cart / Select options — pushed to the bottom so buttons align
   across cards whose titles wrap to different heights. */
.woocommerce-cart .wc-block-grid__product-add-to-cart{
  margin: auto 0 0 !important;
  width: 100%;
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
  font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
  font-size: clamp(.6875rem, 2vw, .8125rem);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--est-bg, #FFFFFF);
  background-color: var(--est-accent, #4A1F45);
  background-image: none;
  border: 1px solid var(--est-accent, #4A1F45);
  border-radius: var(--est-radius, 0);
  padding: .875rem .75rem;
  width: 100%;
  display: block;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  white-space: normal;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1)),
              border-color var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1));
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:focus{
  color: var(--est-bg, #FFFFFF);
  background-color: var(--est-accent-dark, #341530);
  border-color: var(--est-accent-dark, #341530);
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible{
  outline: 2px solid var(--est-accent, #4A1F45);
  outline-offset: 2px;
}

/* The "view cart" link the block appends after an ajax add — inline, quiet */
.woocommerce-cart .wc-block-grid__product-add-to-cart .added_to_cart{
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
  font-size: .8125rem;
  color: var(--est-ink-muted, #6A6A68);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   Express payment — cart only

   Apple Pay / Google Pay / Link shortcut the shopper straight past the cart,
   and offering them beside "Fortsett til kassen" gives three competing ways
   to pay before anyone has seen a total. The cart keeps one call to action;
   the same buttons still appear at checkout, where they belong.

   Scoped to the block's own --cart modifier, so the checkout slot
   (--checkout) is untouched. Stripe's express_checkout_button_locations is
   already set to ["checkout"] — these buttons come from the Blocks cart
   slot regardless, which is why this is done in CSS.
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-block-cart__payment-options{
  display: none !important;
}