/* ==========================================================
   WC Cart - OurChapter reskin
   Loads after main-v2.css. Scoped to .pg-cart-page.
   Warm bone/card palette; clay brass accents throughout.
   ========================================================== */

/* ---- Page wrapper ---- */
.pg-cart-page {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 40px);
}

/* ---- Step indicator ---- */
.pg-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
}

.pg-steps__item {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pg-steps__badge {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--pg-brass);
  color: #fff;
  line-height: 1;
}

.pg-steps__badge--future {
  background: transparent;
  border: 1.5px solid rgba(27, 26, 23, 0.2);
  color: var(--pg-warm-grey-text);
}

.pg-steps__badge--done {
  background: var(--pg-midnight);
  color: var(--pg-bone);
  font-size: 13px;
}

.pg-steps__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pg-ink);
}

.pg-steps__label--muted {
  font-weight: 500;
  color: var(--pg-warm-grey-text);
}

.pg-steps__line {
  flex: 1 1 auto;
  height: 1.5px;
  min-width: 20px;
  background: rgba(27, 26, 23, 0.15);
  display: block;
}

/* ---- USP / trust strip (bottom of cart) ---- */
.pg-cart-usp {
  list-style: none;
  margin: clamp(48px, 7vw, 88px) 0 clamp(8px, 2vw, 24px);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 36px);
  background: var(--pg-card);
  border: 1px solid var(--pg-hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}

.pg-cart-usp__item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.pg-cart-usp__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(176, 135, 91, 0.1);
  color: var(--pg-brass-text);
}

.pg-cart-usp__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pg-cart-usp__text strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--pg-ink);
  line-height: 1.25;
}

.pg-cart-usp__text span {
  font-size: 12.5px;
  color: var(--pg-warm-grey-text);
  line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 859px) {
  .pg-cart-usp {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .pg-cart-usp {
    grid-template-columns: 1fr;
  }
}

/* ---- Items header ---- */
.pg-cart-items-header {
  margin-bottom: 24px;
}

.pg-cart-items-header .pg-eyebrow {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-brass-text);
  font-weight: 700;
  font-family: var(--font-body);
  margin-bottom: 6px;
}

.pg-cart-items-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--pg-ink);
  margin: 0;
}

/* ---- Two-column page layout ---- */
.pg-cart-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

/* Left column: items + coupon */
.pg-cart-left {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Section cards (losse kaarten met eigen achtergrond) ---- */
.pg-cart-section {
  background: var(--pg-card);
  border: 1px solid rgba(27, 26, 23, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Items section: witte kaart die afsteekt tegen de creme pagina */
.pg-cart-section--items {
  background: var(--pg-card);
  padding: 24px clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-md);
  border-color: rgba(27, 26, 23, 0.08);
}

/* Kortingscode sectie: subtiel, iets lichter */
.pg-cart-section--coupon {
  background: var(--pg-card);
  padding: 18px 24px;
}

/* Totalen sectie (rechterkolom) */
.pg-cart-section--totals {
  flex: 1 1 290px;
  min-width: 0;
}

/* ---- Coupon section head ---- */
.pg-cart-section__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--pg-warm-grey-text);
}

.pg-cart-section__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pg-ink);
}

/* ---- Cart table ---- */
.woocommerce-cart-form.pg-cart-items-form {
  /* reset: all styling via section card wrapper */
}

.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

/* WooCommerce core (.woocommerce table.shop_table) ships a 1px border +
   5px radius + separate border-collapse + td/th top-borders that out-specify
   the plain .shop_table.cart rules and produce a boxed, double-bordered table.
   Scope under the card to win specificity and strip that frame. */
.pg-cart-section--items .shop_table.cart {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
}

.pg-cart-section--items .shop_table.cart thead th,
.pg-cart-section--items .shop_table.cart tbody td {
  border-top: 0;
}

.pg-cart-section--items .shop_table.cart tbody td {
  border-bottom: 1px solid rgba(27, 26, 23, 0.07);
}

.pg-cart-section--items .shop_table.cart thead th {
  border-bottom: 1.5px solid rgba(27, 26, 23, 0.1);
}

.pg-cart-section--items .shop_table.cart tbody tr:last-child td {
  border-bottom: 0;
}

.shop_table.cart thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pg-warm-grey-text);
  padding: 0 0 14px;
  border-bottom: 1.5px solid rgba(27, 26, 23, 0.1);
  text-align: left;
}

.shop_table.cart thead th.product-remove,
.shop_table.cart thead th.product-thumbnail {
  width: 40px;
}

.shop_table.cart thead th.product-quantity {
  text-align: center;
}

.shop_table.cart thead th.product-subtotal {
  text-align: right;
}

.shop_table.cart tbody td {
  padding: 16px 8px;
  vertical-align: top;
  border-bottom: 1px solid rgba(27, 26, 23, 0.07);
}

.shop_table.cart tbody tr:last-child td {
  border-bottom: none;
}

/* Thumbnail cell */
.product-thumbnail {
  width: 88px;
  padding: 16px 4px;
}

.pg-cart-item__thumb {
  width: 72px;
  background: var(--pg-paper);
  border: 1px solid rgba(27, 26, 23, 0.1);
  border-radius: 2px;
  padding: 4px;
  flex-shrink: 0;
}

.pg-cart-item__thumb img,
.woocommerce-cart-form__cart-item td.product-thumbnail img {
  width: 64px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}

/* ============================================================
   Cart items — flex/grid line-item cards (replaces the WC table)
   ============================================================ */
.pg-cart-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-cart-item {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 16px 18px;
  background: var(--pg-card);
  border: 1px solid var(--pg-hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.pg-cart-item__image {
  width: 88px;
  background: var(--pg-paper);
  border: 1px solid var(--pg-hairline);
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(42, 37, 31, 0.06);
}

.pg-cart-item__image a {
  display: block;
}

.pg-cart-item__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.pg-cart-item__info {
  min-width: 0;
}

/* Cart item meta (poster config / Uitvoering) */
.pg-cart-item__meta {
  margin-top: 0;
}

.pg-cart-item__meta dl.variation {
  margin: 0;
}

.pg-cart-item__meta dl.variation dt {
  display: inline;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pg-warm-grey-text);
}

.pg-cart-item__meta dl.variation dd {
  display: inline;
  margin: 0 0 0 4px;
  font-size: 12.5px;
  color: var(--pg-ink);
}

/* WC wraps the value in a <p>; keep it inline so "Uitvoering: Fysieke print"
   stays on one line (no block paragraph margins pushing the Bewerk link down) */
.pg-cart-item__meta dl.variation dd p {
  display: inline;
  margin: 0;
}

/* One meta pair per line */
.pg-cart-item__meta dl.variation dt {
  clear: both;
}

/* Stepper column */
.pg-cart-item__stepper {
  display: flex;
  justify-content: center;
}

/* Quantity stepper pill (− input +) */
.pg-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--pg-hairline, #E4DBCB);
  border-radius: var(--radius-pill, 999px);
  background: #FFFDF9;
  padding: 3px;
}

.pg-qty-stepper__btn {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--pg-ink);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s, color 0.18s;
}

.pg-qty-stepper__btn:hover {
  background: rgba(176, 135, 91, 0.12);
  color: var(--pg-brass-text, #8A6336);
}

.pg-qty-stepper__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pg-qty-stepper__input {
  width: 34px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--pg-ink);
  padding: 0;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.pg-qty-stepper__input::-webkit-inner-spin-button,
.pg-qty-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pg-qty-stepper__input:focus {
  outline: none;
}

/* Live-update feedback while the AJAX call resolves */
.pg-cart-page.is-cart-updating .pg-cart-items,
.pg-cart-page.is-cart-updating .pg-cart-section--totals {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pg-qty-stepper__btn { transition: none; }
}

/* Price + remove column (right) */
.pg-cart-item__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.pg-cart-item__line-price {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--pg-ink);
  line-height: 1;
  white-space: nowrap;
}

/* Action chips row under the meta: Bewerken / Bewaar / Deel (plugin) + Verwijder */
.pg-cart-item__links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Plugin wraps its 3 buttons in .pd-cart-poster__actions; flatten it so all
   four chips line up in one row with equal spacing. */
.pg-cart-item__links .pd-cart-poster__actions {
  display: contents;
}

.pg-cart-item__links .pd-cart-poster__action-btn,
.pg-cart-item__links a.remove.pg-cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pg-hairline);
  background: #FFFDF9;
  color: var(--pg-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.pg-cart-item__links .pd-cart-poster__action-btn:hover {
  border-color: var(--pg-brass);
  color: var(--pg-brass-text);
  background: rgba(176, 135, 91, 0.06);
}

/* Verwijder — same chip shape, red affordance on hover (overrides WC a.remove) */
.pg-cart-item__links a.remove.pg-cart-item__remove {
  color: var(--pg-warm-grey-text) !important;
}

.pg-cart-item__links a.remove.pg-cart-item__remove:hover {
  border-color: var(--pg-error);
  color: var(--pg-error) !important;
  background: rgba(178, 58, 72, 0.05);
}

.pg-cart-item__links svg {
  flex: 0 0 auto;
}

/* ============================================================
   Save / Share modals (rendered by the poster-designer plugin's
   cart-poster-actions.js, portaled to <body>). The plugin's app.css
   scopes its sg-* atoms to .sg-configurator, which the body-portaled
   modal sits outside of — so style the atoms here, on the dialog.
   Colours come from the --sg-* tokens the plugin injects at :root.
   ============================================================ */
body.woocommerce-cart [role="dialog"] .sg-eyebrow {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-brass-text);
}

body.woocommerce-cart [role="dialog"] .sg-script {
  font-family: var(--font-script, "Sacramento", cursive);
}

body.woocommerce-cart [role="dialog"] .sg-p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pg-warm-grey-text);
}

body.woocommerce-cart [role="dialog"] .sg-caption {
  font-family: var(--font-body);
}

body.woocommerce-cart [role="dialog"] .sg-label {
  display: block;
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-warm-grey-text);
  margin-bottom: 8px;
}

body.woocommerce-cart [role="dialog"] .sg-input {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--pg-hairline);
  border-radius: 12px;
  background: #FFFDF9;
  font: 15px var(--font-body);
  color: var(--pg-ink);
  box-sizing: border-box;
}

body.woocommerce-cart [role="dialog"] .sg-input:focus {
  outline: none;
  border-color: var(--pg-brass);
  box-shadow: 0 0 0 3px rgba(182, 137, 63, 0.15);
}

body.woocommerce-cart [role="dialog"] .sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font: 700 14px var(--font-body);
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: filter 0.2s, border-color 0.2s, color 0.2s, background-color 0.2s;
}

body.woocommerce-cart [role="dialog"] .sg-btn-primary {
  background: var(--pg-brass);
  color: #fff;
}

body.woocommerce-cart [role="dialog"] .sg-btn-primary:hover {
  filter: brightness(1.06);
}

body.woocommerce-cart [role="dialog"] .sg-btn-ghost {
  background: transparent;
  border-color: var(--pg-hairline);
  color: var(--pg-ink);
}

body.woocommerce-cart [role="dialog"] .sg-btn-ghost:hover {
  border-color: var(--pg-brass);
  color: var(--pg-brass-text);
  background: rgba(176, 135, 91, 0.06);
}

body.woocommerce-cart [role="dialog"] .sg-btn-lg {
  padding: 15px 22px;
  font-size: 15px;
}

/* Update-cart actions row (below items) */
.pg-cart-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Product name */
.product-name a,
a.pg-cart-item__name,
.pg-cart-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--pg-ink);
  text-decoration: none;
  line-height: 1.2;
  display: block;
}

.product-name a:hover,
a.pg-cart-item__name:hover {
  color: var(--pg-brass);
}

/* WC meta -- DO NOT add dt::after content, WC already adds ": " */
.product-name dl.variation {
  margin: 8px 0 0;
}

.product-name dl.variation dt {
  display: inline;
  font-size: 12px;
  font-weight: 600;
  color: var(--pg-warm-grey-text);
}

.product-name dl.variation dt::after {
  content: "";
}

.product-name dl.variation dd {
  display: inline;
  margin: 0;
  font-size: 12px;
  color: var(--pg-ink);
}

.product-name dl.variation dd::after {
  content: "\a";
  white-space: pre;
}

/* Edit link (sits in the .pg-cart-item__links row beside Verwijder) */
.pg-cart-item__edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-warm-grey-text);
  text-decoration: none;
  transition: color 0.2s;
}

.pg-cart-item__edit-link svg {
  flex: 0 0 auto;
}

.pg-cart-item__edit-link:hover {
  color: var(--pg-brass-text);
}

@media (prefers-reduced-motion: reduce) {
  .pg-cart-item__edit-link { transition: none; }
}

/* Price columns */
.product-price,
.product-subtotal {
  font-size: 15px;
  font-weight: 600;
  color: var(--pg-ink);
  white-space: nowrap;
}

.product-subtotal {
  text-align: right;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
}

/* Quantity stepper */
.product-quantity {
  text-align: center;
}

.product-quantity .qty,
.quantity .qty {
  border: 1px solid rgba(27, 26, 23, 0.16);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  width: 60px;
  color: var(--pg-ink);
  background: var(--pg-bone);
  -moz-appearance: textfield;
}

.product-quantity .qty:focus,
.quantity .qty:focus {
  outline: none;
  border-color: var(--pg-brass);
  box-shadow: 0 0 0 3px rgba(182, 137, 63, 0.15);
}

/* Remove button */
.product-remove .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  color: var(--pg-warm-grey-text);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}

.product-remove .remove:hover {
  color: var(--pg-error);
  background: rgba(178, 58, 72, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .product-remove .remove { transition: none; }
}

/* ---- Actions row (update-knop) ---- */
.actions {
  text-align: left;
  padding-top: 16px !important;
  border-top: 1.5px solid rgba(27, 26, 23, 0.1) !important;
}

.pg-btn-update-cart {
  background: transparent;
  border: 1.5px solid rgba(27, 26, 23, 0.2);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--pg-warm-grey-text);
  cursor: pointer;
  transition: opacity 0.2s;
}

.pg-btn-update-cart:not([disabled]):hover {
  color: var(--pg-ink);
  border-color: rgba(27, 26, 23, 0.4);
}

.pg-btn-update-cart[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .pg-btn-update-cart { transition: none; }
}

/* ---- Kortingscode kaart ---- */
.pg-cart-coupon-form {
  margin: 0;
}

.pg-cart-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pg-cart-coupon__input,
.pg-cart-coupon input[type="text"] {
  border: 1.5px solid rgba(27, 26, 23, 0.18);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--pg-ink);
  background: var(--pg-bone);
  outline: none;
  flex: 1 1 180px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pg-cart-coupon__input:focus,
.pg-cart-coupon input[type="text"]:focus {
  border-color: var(--pg-brass);
  box-shadow: 0 0 0 3px rgba(182, 137, 63, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .pg-cart-coupon__input,
  .pg-cart-coupon input[type="text"] { transition: none; }
}

.pg-btn-apply-coupon {
  background: transparent;
  border: 1.5px solid rgba(27, 26, 23, 0.2);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--pg-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.pg-btn-apply-coupon:hover {
  border-color: var(--pg-brass);
  color: var(--pg-brass);
}

@media (prefers-reduced-motion: reduce) {
  .pg-btn-apply-coupon { transition: none; }
}

/* ---- "Verder winkelen" link ---- */
.pg-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pg-warm-grey-text);
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.2s;
}

.pg-cart-continue:hover {
  color: var(--pg-brass);
}

@media (prefers-reduced-motion: reduce) {
  .pg-cart-continue { transition: none; }
}

/* ---- Totalen sidebar (rechterkolom) ---- */
.pg-cart-totals {
  position: sticky;
  top: 100px;
  background: var(--pg-card);
  border: 1px solid rgba(27, 26, 23, 0.1);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.pg-cart-totals__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--pg-ink);
  margin: 0 0 14px;
}

/* ---- Custom samenvattings-rijen (vervangt WC cart_totals tabel) ---- */
.pg-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 14.5px;
  color: #5A554C;
}
.pg-sum-row--coupon span:last-child { color: var(--pg-brass-text); font-weight: 700; }
.pg-sum-row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1.5px solid rgba(27, 26, 23, 0.1);
  font-size: 15px;
  color: var(--pg-ink);
  font-weight: 700;
}
.pg-sum-total,
.pg-sum-total .woocommerce-Price-amount {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--pg-ink);
}
.pg-sum-note { font-size: 12px; color: var(--pg-warm-grey-text); margin: 2px 0 18px; }
.pg-sum-checkout {
  display: block;
  text-align: center;
  background: var(--pg-btn-brass);
  color: var(--pg-bone);
  padding: 15px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-body);
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(144, 103, 38, 0.3);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pg-sum-checkout:hover {
  background: var(--pg-btn-brass-hover);
  color: var(--pg-bone);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(144, 103, 38, 0.45);
}
.pg-sum-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--pg-warm-grey-text);
}
@media (prefers-reduced-motion: reduce) {
  .pg-sum-checkout { transition: none; }
  .pg-sum-checkout:hover { transform: none; }
}

.pg-cart-totals__divider {
  height: 1px;
  background: rgba(27, 26, 23, 0.08);
  margin: 16px 0;
}

/* WC totals table reset */
.cart_totals table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin-bottom: 20px;
}

.cart_totals table th,
.cart_totals table td {
  padding: 9px 0;
  font-size: 14px;
  border: none;
  vertical-align: middle;
}

.cart_totals table th {
  font-weight: 600;
  color: var(--pg-warm-grey-text);
  text-align: left;
}

.cart_totals table td {
  text-align: right;
  color: var(--pg-ink);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  font-weight: 700;
  font-size: 15px;
  border-top: 1.5px solid rgba(27, 26, 23, 0.1);
  padding-top: 14px;
}

.cart_totals .order-total .amount {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--pg-ink);
}

/* Checkout button (rendered by WC inside cart totals) -- beat woocommerce.css */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button,
.wc-proceed-to-checkout a.button.checkout-button,
.cart_totals .wc-proceed-to-checkout a.button {
  display: block;
  text-align: center;
  background: var(--pg-btn-brass) !important;
  color: var(--pg-bone) !important;
  padding: 15px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-body);
  box-shadow: 0 14px 40px rgba(144, 103, 38, 0.3);
  text-decoration: none;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button:hover,
.wc-proceed-to-checkout a.button.checkout-button:hover,
.cart_totals .wc-proceed-to-checkout a.button:hover {
  background: var(--pg-btn-brass-hover) !important;
  color: var(--pg-bone) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(144, 103, 38, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .wc-proceed-to-checkout .checkout-button,
  .wc-proceed-to-checkout a.button {
    transition: none;
  }

  .wc-proceed-to-checkout .checkout-button:hover,
  .wc-proceed-to-checkout a.button:hover {
    transform: none;
  }
}

/* --- Globale WC-knopoverschrijvingen (beat woocommerce.css op alle WC-pagina's) ---
   Primary: .button.alt, .single_add_to_cart_button, #place_order
   Secondary: plain .button (non-alt)
   ----------------------------------------------------------------- */

/* Primary WC knoppen -- brass background, bone text */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt.disabled,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
  background-color: var(--pg-btn-brass) !important;
  color: var(--pg-bone) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  padding: 13px 22px !important;
  transition: background 0.2s, transform 0.2s !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background-color: var(--pg-btn-brass-hover) !important;
  color: var(--pg-bone) !important;
}

/* Secundaire WC knoppen -- ghost/outline behandeling */
.woocommerce a.button:not(.alt):not(.checkout-button),
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt),
.woocommerce-page a.button:not(.alt):not(.checkout-button),
.woocommerce-page button.button:not(.alt),
.woocommerce-page input.button:not(.alt) {
  background-color: transparent !important;
  color: var(--pg-ink) !important;
  border: 1.5px solid rgba(27, 26, 23, 0.22) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  transition: border-color 0.2s, color 0.2s !important;
  box-shadow: none !important;
}

.woocommerce a.button:not(.alt):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):hover,
.woocommerce-page a.button:not(.alt):not(.checkout-button):hover,
.woocommerce-page button.button:not(.alt):hover {
  background-color: transparent !important;
  color: var(--pg-brass-text) !important;
  border-color: var(--pg-brass) !important;
}

/* ---- Samenvattingsitems (binnen totalen kaart) ---- */
.pg-cart-summary-items {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-cart-summary-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pg-cart-summary-item__thumb {
  flex: 0 0 42px;
  width: 42px;
}

.pg-cart-summary-item__thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.pg-cart-summary-item__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pg-cart-summary-item__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pg-ink);
  line-height: 1.3;
}

.pg-cart-summary-item__name a {
  color: inherit;
  text-decoration: none;
}

.pg-cart-summary-item__name a:hover {
  color: var(--pg-brass);
}

.pg-cart-summary-item__meta {
  font-size: 11.5px;
  color: var(--pg-warm-grey-text);
}

.pg-cart-summary-item__qty-price {
  font-size: 13px;
  color: var(--pg-warm-grey-text);
  display: flex;
  gap: 6px;
}

.pg-cart-summary-item__price {
  font-weight: 700;
  color: var(--pg-ink);
}

.pg-cart-summary-item__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--pg-warm-grey-text);
  text-decoration: none;
  transition: color 0.2s;
}

.pg-cart-summary-item__edit:hover {
  color: var(--pg-brass);
}

@media (prefers-reduced-motion: reduce) {
  .pg-cart-summary-item__edit { transition: none; }
}

/* ---- Lege winkelwagen staat ---- */
.woocommerce-cart-empty {
  text-align: center;
  padding: 52px 24px;
  color: var(--pg-warm-grey-text);
}

.woocommerce-cart-empty p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* ---- Backorder / berichten ---- */
.backorder_notification {
  font-size: 12px;
  color: var(--pg-warning);
  margin: 6px 0 0;
}

/* ---- Gratis-verzendingsbalk ---- */
.pg-cart-shipping-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pg-bone);
  border: 1px solid rgba(27, 26, 23, 0.1);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 28px;
}

.pg-cart-shipping-band[hidden] {
  display: none;
}

.pg-cart-shipping-band__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-ink);
  line-height: 1.4;
}

.pg-cart-shipping-band__text strong {
  font-weight: 700;
  color: var(--pg-brass-text);
}

.pg-cart-shipping-band__text--done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--pg-success, #2F7D5B);
}

.pg-cart-shipping-band__check {
  flex-shrink: 0;
  color: var(--pg-success, #2F7D5B);
}

/* Free-shipping reached: progress bar turns green too */
.pg-cart-shipping-band__text--done ~ .pg-cart-shipping-band__track .pg-cart-shipping-band__fill {
  background: var(--pg-success, #2F7D5B);
}

.pg-cart-shipping-band__track {
  height: 6px;
  background: rgba(27, 26, 23, 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.pg-cart-shipping-band__fill {
  height: 100%;
  background: var(--pg-brass);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
  min-width: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pg-cart-shipping-band__fill {
    transition: none;
  }
}

/* ---- Responsive ---- */
@media (max-width: 859px) {
  .pg-cart-layout {
    flex-direction: column;
  }

  .pg-cart-section--totals {
    width: 100%;
  }

  .pg-cart-totals {
    position: static;
  }

  /* Item cards reflow: image left, info/stepper stacked, price full-width below */
  .pg-cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "image info"
      "image stepper"
      "price price";
    gap: 10px 14px;
    align-items: start;
    padding: 14px;
  }

  .pg-cart-item__image { grid-area: image; width: 72px; }
  .pg-cart-item__info { grid-area: info; }

  .pg-cart-item__stepper {
    grid-area: stepper;
    justify-content: flex-start;
  }

  .pg-cart-item__price-col {
    grid-area: price;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border-top: 1px solid var(--pg-hairline);
    padding-top: 10px;
  }

  .pg-cart-actions {
    justify-content: stretch;
  }

  .pg-cart-actions .pg-btn-update-cart {
    width: 100%;
  }
}

/* ============================================================
   LEGE WINKELWAGEN STAAT (.pg-cart-empty) - branded override
   ============================================================ */
.pg-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 540px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 88px) 0 clamp(40px, 6vw, 64px);
}

.pg-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(182, 137, 63, .1);
	color: var(--pg-brass-text, #8A621E);
	margin-bottom: 26px;
}

.pg-cart-empty__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.08;
	color: var(--pg-ink);
	margin: 0 0 12px;
	text-wrap: balance;
}

.pg-cart-empty__text {
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.6;
	color: #5A554C;
	margin: 0 0 30px;
	max-width: 40ch;
}

.pg-cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

body.woocommerce-cart .pg-cart-empty { min-height: 28vh; justify-content: center; }