/*
 * The shop.
 *
 * Reference: canvas-c/Main.dc.html sections 7.1 to 7.3, measured at the 1440px
 * width the boards were drawn at. Content width there is 1288px: an 840px product
 * column, a 40px gap and a 408px cart panel.
 *
 * @package COF
 */

/* ------------------------------------------------------------ 7.1 Layout --- */

.cof-shop { padding-block: 76px 60px; background: var(--cof-cream); }

.cof-shop__grid {
  display: grid;
  grid-template-columns: minmax(0, 840fr) minmax(0, 408fr);
  gap: 40px;
  align-items: start;
}

.cof-shop__main { display: flex; flex-direction: column; gap: 36px; }
/*
 * WooCommerce prints an empty notices wrapper on every load. As a flex child it
 * claims a gap slot of its own, so the 36px between the intro and the grid became
 * 72px. Hidden only while empty, so a real notice still appears and is styled.
 */
.cof-shop__main > .woocommerce-notices-wrapper:empty { display: none; }

.cof-shop__head { display: flex; flex-direction: column; gap: 14px; }
.cof-shop__title {
  font-family: var(--cof-serif);
  /* 54px at 1440. The board sets this one heavier than the site's other h1s. */
  font-size: clamp(34px, 3.75vw, 54px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.cof-shop__intro { font-size: 16px; line-height: 1.7; color: var(--cof-body); max-width: 420px; }

/* ------------------------------------------------------- 7.1 Product card --- */

/*
 * Scoped to .cof-shop AND .cof-products-grid. The related-products and upsell
 * sections on a single product page render the same content-product.php card but
 * sit outside .cof-shop, so they picked up the card markup without the grid that
 * makes it work. Those sections are unhooked in inc/shop.php as well, since the
 * design has no related-products block; the second selector is the belt to that
 * pair of braces.
 */
.cof-products-grid ul.products,
.cof-shop ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cof-products-grid ul.products::before,
.cof-products-grid ul.products::after,
.cof-shop ul.products::before,
.cof-shop ul.products::after { content: none; }

/*
 * WooCommerce lays its loop out with floats and percentage widths. Inside a grid
 * those percentages resolve against the grid CELL, so each card came out at 48%
 * of its own column and the two products rendered half-width with a canyon
 * between them.
 *
 * The [class*="columns-"] in the selector is doing real work. WooCommerce's
 * winning rule is `.woocommerce ul.products.columns-2 li.product`, which carries
 * four classes; a plain `.cof-shop ul.products li.product` carries three and
 * loses on specificity no matter what order the sheets load in. The attribute
 * selector brings this to four and covers every columns-N at once.
 */
.cof-products-grid ul.products[class*="columns-"] li.product,
.cof-shop ul.products[class*="columns-"] li.product,
.cof-shop ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  clear: none;
}

.cof-card-product { margin: 0; }
.cof-card-product__form { display: flex; flex-direction: column; gap: 16px; }

.cof-card-product__media {
  display: block;
  /* 406 x 680 in the board. */
  aspect-ratio: 406 / 680;
  border-radius: var(--cof-r-card);
  overflow: hidden;
}
/*
 * The extra classes are load-bearing, the same trap as the li width above.
 * WooCommerce ships `.woocommerce ul.products li.product a img { height: auto }`,
 * which outranks a plain `.cof-card-product__media img` and left a 52px band of
 * cream under every product photo.
 */
.cof-shop ul.products li.product a.cof-card-product__media img,
.cof-card-product__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Uppercased in CSS, not in the product name. The board sets these in caps, but
 * the client types the name in wp-admin and a German product name uppercased in
 * PHP hits the same problem as the Cafe address did: strtoupper() is byte-based
 * and turns "Koln" spelled with an umlaut into a broken word.
 */
.cof-card-product__title { font-size: 17px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.cof-card-product__title a { color: inherit; }
.cof-card-product__title a:hover { color: var(--cof-flag); }

.cof-card-product__price { font-size: 17px; color: var(--cof-body); }
/* WooCommerce wraps every amount in <bdi>; it must not pick up a bold. */
.cof-card-product__price .woocommerce-Price-amount { font-weight: inherit; }

.cof-card-product__oos { font-size: 14px; color: var(--cof-muted); }

/* ---------------------------------------------------------- The stepper --- */

.cof-stepper {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid var(--cof-control);
  border-radius: var(--cof-r-input);
}
.cof-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cof-ink);
  /* The board's control is 38px tall, so the two buttons inside it cannot be
     44px without changing the drawing. The hit area is grown instead. */
  position: relative;
}
/*
 * The hit areas are sized from the glyph, not from a single inset: the minus is
 * 13x2 and the plus is 13x13, so the same inset gave one a 24px-tall target and
 * the other a 35px one. Both now clear 44px. The stepper's own 20px gaps keep
 * their centres far enough apart that the two areas do not overlap.
 */
.cof-stepper__btn[data-cof-step="down"]::after { content: ''; position: absolute; inset: -21px -16px; }
.cof-stepper__btn[data-cof-step="up"]::after { content: ''; position: absolute; inset: -16px -16px; }
/*
 * A disabled control still has to be legible: opacity 0.35 took the minus to
 * 2.07:1. The muted token is visibly weaker than the enabled ink without
 * disappearing, and the hit area stays so the target does not move under a
 * finger that is already on it.
 */
.cof-stepper__btn[disabled] { color: var(--cof-muted); opacity: 1; cursor: default; }
.cof-stepper__value { font-size: 15px; min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }

.cof-card-product__form[aria-busy="true"] .cof-stepper,
.cof-cartline__form[aria-busy="true"] .cof-stepper { opacity: 0.5; }

/* --------------------------------------------------------- 7.2 Cart panel --- */

.cof-cartpanel {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: start;
  padding: 32px 30px;
  border: 1px solid var(--cof-hairline);
  border-radius: var(--cof-r-card);
}
.cof-cartpanel__head { display: flex; align-items: center; justify-content: space-between; }
.cof-cartpanel__title { font-size: 16px; font-weight: 600; letter-spacing: 0.1em; }
.cof-cartpanel__empty { font-size: 14px; line-height: 1.7; color: var(--cof-muted); }
.cof-cartpanel__rule { height: 1px; background: var(--cof-hairline); border: 0; margin: 0; }

.cof-cartpanel__items { display: flex; flex-direction: column; gap: 22px; list-style: none; margin: 0; padding: 0; }

.cof-cartline__form { display: flex; gap: 16px; }
.cof-cartline__media { flex: none; width: 74px; aspect-ratio: 74 / 123; border-radius: var(--cof-r-thumb); overflow: hidden; }
.cof-cartline__media img { width: 100%; height: 100%; object-fit: cover; }

.cof-cartline__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
.cof-cartline__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cof-cartline__title { font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.cof-cartline__oos { font-size: 12px; color: var(--cof-flag); }
.cof-cartline__price { font-size: 14px; color: var(--cof-body); }

.cof-cartline__remove {
  position: relative;
  flex: none;
  color: var(--cof-control);
  line-height: 0;
}
/* The glyph is 13px, so -16px on each side makes the target 45px. At -15px it
   measured 43x43 and missed the 44px minimum by a pixel. */
.cof-cartline__remove::after { content: ''; position: absolute; inset: -16px; }
.cof-cartline__remove:hover { color: var(--cof-ink); }

.cof-carttotals { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cof-carttotals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cof-carttotals__row dt { font-size: 14px; letter-spacing: 0.07em; }
.cof-carttotals__row dd { font-size: 14px; margin: 0; }
.cof-carttotals__pending { font-size: 13px; color: var(--cof-muted); }

.cof-carttotal { display: flex; flex-direction: column; gap: 4px; }
.cof-carttotal__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cof-carttotal__label,
.cof-carttotal__value { font-size: 17px; font-weight: 600; }
.cof-carttotal__label { letter-spacing: 0.07em; }
.cof-carttotal__note { font-size: 12px; color: var(--cof-muted); }

/* The board's button fills the panel rather than hugging its label. */
/* The board's button has no border and fills the panel edge to edge. */
.cof-cartpanel__cta { justify-content: center; gap: 46px; padding: 18px 0; border: 0; width: 100%; }

.cof-paylogos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cof-paylogos img { height: 24px; width: auto; }

/* -------------------------------------------------------- 7.3 Trust strip --- */

.cof-trust { padding-block: 0 64px; background: var(--cof-cream); }
.cof-trust__panel {
  display: grid;
  grid-template-columns: repeat(var(--cof-trust-cols, 3), minmax(0, 1fr));
  padding-block: 26px;
  border: 1px solid var(--cof-hairline);
  border-radius: var(--cof-r-card);
  list-style: none;
  margin: 0;
}
.cof-trust__item { display: flex; align-items: center; gap: 18px; padding-inline: 32px; }
.cof-trust__item > svg { flex: none; }
.cof-trust__body { display: flex; flex-direction: column; gap: 5px; }
.cof-trust__title { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; }
.cof-trust__text { font-size: 13px; color: var(--cof-body); }
.cof-trust__text .woocommerce-Price-amount { font-weight: inherit; }

/* ---------------------------------------------------------------- Notices --- */

/*
 * WooCommerce's own notices are the one place the shop speaks to the visitor
 * about something going wrong, so they are brought into the palette rather than
 * left in WooCommerce's blue and green.
 */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  background: var(--cof-card);
  border-top: 0;
  border-left: 3px solid var(--cof-control);
  border-radius: var(--cof-r-input);
  color: var(--cof-ink);
  font-size: 15px;
  line-height: 1.6;
  padding: 16px 20px;
}
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: #8B2F1F; color: #7A2818; }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before { content: none; }

/* WooCommerce puts a "View cart" button inside its own notice. */
.woocommerce-notices-wrapper .button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--cof-espresso);
  border-radius: 0;
  color: var(--cof-on-dark);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.woocommerce-notices-wrapper .button:hover { background: var(--cof-ink); color: var(--cof-on-dark); }

/* ------------------------------------------------------------ Responsive --- */

@media (max-width: 1180px) {
  /* The panel stops fitting beside a two-up grid before the grid stops fitting. */
  .cof-shop__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .cof-cartpanel { max-width: 520px; }
}

@media (max-width: 900px) {
  .cof-shop { padding-block: var(--cof-section) 40px; }
  .cof-trust__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .cof-trust__item { padding-inline: 24px; }
}

@media (max-width: 560px) {
  .cof-shop ul.products { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cof-cartpanel { padding: 24px 20px; }
}