/* =========================================================
   LangoLearn — winkelwagen, checkout en mini-winkelwagen
   =========================================================
   Zelfde tokens als de productpagina (--ll-*, uit de sitebrede
   WPCode-snippet). Blocksy stuurt knoppen en formulieren aan via
   CSS-variabelen; die zetten we hier waar het kan, en overschrijven
   alleen expliciet waar Blocksy vaste waarden gebruikt.
   ========================================================= */


/* ---------- 0. Pagina: breedte, typografie, Blocksy-variabelen ---------- */

/* Alleen de content smaller (header/footer houden hun eigen breedte) */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main { --theme-normal-container-max-width: var(--ll-shell, 1240px); }

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  --theme-button-background-initial-color: var(--ll-blue);
  --theme-button-background-hover-color: var(--ll-blue-700);
  --theme-button-text-initial-color: var(--ll-white);
  --theme-button-text-hover-color: var(--ll-white);
  --theme-button-border-radius: var(--ll-r-pill);
  --theme-button-min-height: 52px;
  --theme-form-field-height: 52px;
  --theme-form-field-border-radius: var(--ll-r-sm);
  --theme-form-field-border-initial-color: var(--ll-line);
  --theme-form-field-border-focus-color: var(--ll-blue);
  --theme-form-field-background-initial-color: var(--ll-white);
  --theme-form-field-background-focus-color: var(--ll-white);
}

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
  font-family: var(--ll-font-body);
  color: var(--ll-ink-80, #1A1A22);
}

body.woocommerce-cart .site-main .page-title,
body.woocommerce-cart .site-main .entry-title,
body.woocommerce-checkout .site-main .page-title,
body.woocommerce-checkout .site-main .entry-title {
  font-family: var(--ll-font-display) !important;
  font-size: clamp(2rem, 3.6vw, 2.9rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
  color: var(--ll-ink) !important;
  margin-top: clamp(12px, 2vw, 28px) !important;
}

.woocommerce-cart .site-main h2,
.woocommerce-cart .site-main h3,
.woocommerce-checkout .site-main h2,
.woocommerce-checkout .site-main h3 {
  font-family: var(--ll-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ll-ink) !important;
}

/* Knoppen: vlak, merkblauw, zonder schaduw */
.woocommerce-cart .site-main .button,
.woocommerce-checkout .site-main .button,
.woocommerce-checkout #place_order {
  font-family: var(--ll-font-display) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--ll-r-pill) !important;
  box-shadow: none !important;
  transform: none !important;
  padding-inline: 24px !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

/* Secundaire knoppen (coupon, winkelwagen bijwerken): rand-knop */
.woocommerce-cart .site-main .actions .button,
.woocommerce-cart .site-main .coupon .button,
.woocommerce-checkout .checkout_coupon .button {
  background: var(--ll-white) !important;
  color: var(--ll-blue) !important;
  border: 1.5px solid var(--ll-blue) !important;
}
.woocommerce-cart .site-main .actions .button:hover:not(:disabled),
.woocommerce-cart .site-main .coupon .button:hover,
.woocommerce-checkout .checkout_coupon .button:hover { background: var(--ll-blue-50) !important; }
.woocommerce-cart .site-main .actions .button:disabled { opacity: .45; }

/* Invoervelden */
.woocommerce-cart .site-main input.input-text,
.woocommerce-checkout .site-main input.input-text,
.woocommerce-checkout .site-main textarea,
.woocommerce-checkout .site-main select,
.woocommerce-checkout .select2-container .select2-selection {
  font-family: var(--ll-font-body) !important;
  font-size: .95rem !important;
  color: var(--ll-ink) !important;
  background: var(--ll-white) !important;
  border: 1px solid var(--ll-line) !important;
  border-radius: var(--ll-r-sm) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.woocommerce-cart .site-main input.input-text:focus,
.woocommerce-checkout .site-main input.input-text:focus,
.woocommerce-checkout .site-main textarea:focus,
.woocommerce-checkout .site-main select:focus,
.woocommerce-checkout .select2-container--open .select2-selection,
.woocommerce-checkout .select2-container--focus .select2-selection {
  border-color: var(--ll-blue) !important;
  box-shadow: 0 0 0 4px var(--ll-blue-50) !important;
  outline: none !important;
}
.woocommerce-checkout .site-main input::placeholder,
.woocommerce-checkout .site-main textarea::placeholder,
.woocommerce-cart .site-main input::placeholder { color: var(--ll-ink-40) !important; opacity: 1; }

/* Meldingen (info, succes, fout) als zachte kaarten */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
  font-family: var(--ll-font-body) !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
  color: var(--ll-ink-80, #1A1A22) !important;
  background: var(--ll-blue-25) !important;
  border: 1px solid var(--ll-blue-100) !important;
  border-radius: var(--ll-r-sm) !important;
  box-shadow: none !important;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error { background: #FFF5F5 !important; border-color: #F6D3D3 !important; }
.woocommerce-cart .woocommerce-info a,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a { color: var(--ll-blue) !important; font-weight: 600; }


/* ---------- 1. Winkelwagen ---------- */

/* Twee kolommen: producten links, totaal rechts (sticky) */
.woocommerce-cart .ct-woocommerce-cart-form { gap: clamp(24px, 3.5vw, 48px) !important; align-items: start; }

.woocommerce-cart .woocommerce-cart-form {
  background: var(--ll-white);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-lg);
  padding: clamp(8px, 1.5vw, 16px) clamp(18px, 2.4vw, 30px);
}

.woocommerce-cart table.shop_table.cart { border: 0 !important; margin: 0 !important; }
.woocommerce-cart table.shop_table.cart thead th {
  font-family: var(--ll-font-display) !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ll-ink-40) !important;
  border-bottom: 1px solid var(--ll-line) !important;
  padding-block: 18px 14px !important;
}
.woocommerce-cart table.shop_table.cart td {
  border-color: var(--ll-line) !important;
  padding-block: 22px !important;
  vertical-align: middle;
}
.woocommerce-cart table.shop_table.cart tr:last-child td { border-bottom: 0 !important; }

/* Boekomslag als "boek": kleine rug-radius en zachte schaduw */
.woocommerce-cart td.product-thumbnail img {
  width: 64px !important;
  height: auto !important;
  border-radius: 8px 4px 4px 8px !important;
  box-shadow: var(--ll-shadow-sm);
}

.woocommerce-cart td.product-name,
.woocommerce-cart td.product-name a {
  font-family: var(--ll-font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ll-ink) !important;
  text-decoration: none !important;
}
.woocommerce-cart td.product-name a:hover { color: var(--ll-blue) !important; }
.woocommerce-cart td.product-name .woocommerce-Price-amount {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--ll-font-body);
  font-size: .88rem;
  font-weight: 400;
  color: var(--ll-ink-40);
}
.woocommerce-cart td.product-subtotal,
.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
  font-family: var(--ll-font-display) !important;
  font-weight: 600 !important;
  color: var(--ll-ink) !important;
}

/* Aantal: pill-veld zoals op de productpagina, cijfer gecentreerd */
.woocommerce-cart td.product-quantity .quantity input.qty,
.woocommerce-cart td.product-quantity input.qty {
  width: 84px !important;
  height: 46px !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--ll-font-display) !important;
  font-weight: 600 !important;
  border-radius: var(--ll-r-pill) !important;
  border: 1.5px solid var(--ll-line) !important;
}

/* Verwijderen: rond icoon, rood bij hover */
.woocommerce-cart td.product-remove a.remove {
  width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 50% !important;
  color: var(--ll-ink-40) !important;
  background: transparent !important;
  transition: background-color .2s ease, color .2s ease;
}
.woocommerce-cart td.product-remove a.remove:hover { color: #D12F2F !important; background: #FFF1F1 !important; }
.woocommerce-cart td.product-remove a.remove svg { fill: currentColor !important; width: 14px; height: 14px; }

/* Coupon + bijwerken */
.woocommerce-cart table.cart td.actions { padding-top: 22px !important; border-top: 1px solid var(--ll-line) !important; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 10px; align-items: stretch; }
.woocommerce-cart table.cart td.actions .coupon input.input-text { min-width: 200px; height: 52px !important; padding-inline: 18px !important; }

/* Totaalkaart */
.woocommerce-cart .cart_totals {
  position: sticky;
  top: 110px;
  background: var(--ll-white) !important;
  border: 1px solid var(--ll-line) !important;
  border-radius: var(--ll-r-lg) !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
  box-shadow: none !important;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 1.2rem !important;
  margin: 0 0 12px !important;
}
.woocommerce-cart .cart_totals table.shop_table { border: 0 !important; margin: 0 0 22px !important; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  font-family: var(--ll-font-body) !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  color: var(--ll-ink-60) !important;
  border-color: var(--ll-line) !important;
  padding-block: 14px !important;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td,
.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount {
  font-family: var(--ll-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ll-ink) !important;
  border-bottom: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin: 0 !important;
  font-size: 1rem !important;
}

/* Lege winkelwagen */
.woocommerce-cart .wc-empty-cart-message .cart-empty {
  text-align: center;
  padding: 28px !important;
  font-size: 1rem !important;
}
.woocommerce-cart .return-to-shop { text-align: center; margin-top: 18px; }


/* ---------- 2. Checkout ---------- */

.woocommerce-checkout form.ct-woocommerce-checkout { gap: clamp(28px, 4vw, 56px) !important; align-items: start; }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
  font-size: 1.25rem !important;
  margin: 0 0 18px !important;
}

.woocommerce-checkout .form-row { margin-bottom: 16px !important; }
.woocommerce-checkout .form-row label {
  font-family: var(--ll-font-display) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--ll-ink) !important;
  margin-bottom: 6px !important;
}
.woocommerce-checkout .form-row label .optional { color: var(--ll-ink-40); font-weight: 400; }
.woocommerce-checkout .form-row .required { color: var(--ll-blue) !important; text-decoration: none !important; }
.woocommerce-checkout .site-main input.input-text,
.woocommerce-checkout .site-main select { height: 52px; padding-inline: 16px !important; }
.woocommerce-checkout .site-main textarea { min-height: 110px; padding: 14px 16px !important; }
.woocommerce-checkout .select2-container .select2-selection { height: 52px !important; display: flex; align-items: center; }
.woocommerce-checkout .select2-container .select2-selection__rendered { padding-left: 16px !important; color: var(--ll-ink) !important; }
.woocommerce-checkout .select2-container .select2-selection__arrow { height: 50px !important; right: 10px !important; }

/* Bestelling: witte kaart, sticky */
.woocommerce-checkout .ct-order-review {
  position: sticky;
  top: 110px;
  background: var(--ll-white) !important;
  border: 1px solid var(--ll-line) !important;
  border-radius: var(--ll-r-lg) !important;
  padding: clamp(22px, 2.6vw, 34px) !important;
  box-shadow: none !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { border: 0 !important; margin: 0 0 20px !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  font-family: var(--ll-font-body) !important;
  font-size: .93rem !important;
  color: var(--ll-ink-60) !important;
  border-color: var(--ll-line) !important;
  padding-block: 13px !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: var(--ll-font-display) !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ll-ink-40) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { color: var(--ll-ink) !important; font-weight: 500; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity { color: var(--ll-ink-40); font-weight: 400 !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount {
  font-family: var(--ll-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ll-ink) !important;
  border-bottom: 0 !important;
}

/* Betaalmethodes */
.woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
.woocommerce-checkout #payment ul.payment_methods > li:not(.woocommerce-notice) {
  list-style: none;
  margin: 0 0 8px !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--ll-line);
  border-radius: var(--ll-r-sm);
  background: var(--ll-white);
}
.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) { border-color: var(--ll-blue); background: var(--ll-blue-25); }
.woocommerce-checkout #payment ul.payment_methods label { font-family: var(--ll-font-display); font-weight: 600; color: var(--ll-ink); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--ll-blue-25) !important;
  color: var(--ll-ink-60) !important;
  border-radius: var(--ll-r-sm) !important;
  font-size: .88rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: .82rem !important;
  line-height: 1.55;
  color: var(--ll-ink-40) !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--ll-blue) !important; }

.woocommerce-checkout #place_order {
  width: 100%;
  min-height: 58px;
  margin-top: 8px !important;
  font-size: 1rem !important;
  background: var(--ll-blue) !important;
  color: var(--ll-white) !important;
  border: 0 !important;
}
.woocommerce-checkout #place_order:hover { background: var(--ll-blue-700) !important; }


/* ---------- 3. Mini-winkelwagen in de header (dropdown bij hover) ---------- */

.ct-header-cart .ct-cart-content {
  --theme-text-color: var(--ll-ink-60);
  --theme-link-initial-color: var(--ll-ink);
  --theme-link-hover-color: var(--ll-blue);
  --theme-headings-color: var(--ll-ink);
  width: 360px !important;
  padding: 20px !important;
  background: var(--ll-white) !important;
  border: 1px solid var(--ll-line) !important;
  border-radius: var(--ll-r-md) !important;
  box-shadow: var(--ll-shadow-lg) !important;
  font-family: var(--ll-font-body);
  color: var(--ll-ink-60) !important;
}

.ct-header-cart .ct-cart-content .woocommerce-mini-cart {
  margin: 0 !important;
  padding: 0 !important;
  max-height: min(52vh, 360px);
  overflow-y: auto;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 12px 30px 12px 0 !important;
  border-bottom: 1px solid var(--ll-line) !important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item:first-child { padding-top: 0 !important; }
.ct-header-cart .ct-cart-content .ct-media-container {
  width: 48px !important;
  margin: 0 !important;
}
.ct-header-cart .ct-cart-content .ct-media-container img {
  width: 48px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 6px 3px 3px 6px !important;
  box-shadow: var(--ll-shadow-sm);
}
.ct-header-cart .ct-cart-content .product-data { min-width: 0; }
.ct-header-cart .ct-cart-content .product-title {
  display: block;
  font-family: var(--ll-font-display) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ll-ink) !important;
  text-decoration: none !important;
}
.ct-header-cart .ct-cart-content .product-title:hover { color: var(--ll-blue) !important; }
.ct-header-cart .ct-cart-content .quantity {
  display: block;
  margin-top: 4px;
  font-size: .82rem !important;
  color: var(--ll-ink-40) !important;
}
.ct-header-cart .ct-cart-content .quantity .woocommerce-Price-amount { color: var(--ll-ink-60) !important; font-weight: 500; }

/* Verwijderen: klein rond kruisje rechts */
.ct-header-cart .ct-cart-content a.remove {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: translateY(-50%);
  display: grid !important;
  place-items: center;
  border-radius: 50% !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--ll-ink-40) !important;
  background: transparent !important;
  opacity: 1 !important;
  transition: background-color .2s ease, color .2s ease;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item:first-child a.remove { top: calc(50% - 6px) !important; }
.ct-header-cart .ct-cart-content a.remove:hover { color: #D12F2F !important; background: #FFF1F1 !important; }

.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 !important;
  padding: 16px 0 !important;
  border: 0 !important;
  font-size: .9rem !important;
  color: var(--ll-ink-60) !important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total strong {
  font-family: var(--ll-font-body) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ll-ink-60) !important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family: var(--ll-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ll-ink) !important;
}

.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-family: var(--ll-font-display) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  border-radius: var(--ll-r-pill) !important;
  box-shadow: none !important;
  color: var(--ll-blue) !important;
  background: var(--ll-white) !important;
  border: 1.5px solid var(--ll-blue) !important;
  transition: background-color .2s ease, color .2s ease;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button:hover { background: var(--ll-blue-50) !important; }
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout {
  color: var(--ll-white) !important;
  background: var(--ll-blue) !important;
  border-color: var(--ll-blue) !important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--ll-blue-700) !important;
  border-color: var(--ll-blue-700) !important;
}

.ct-header-cart .ct-cart-content .woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: 8px 0 !important;
  text-align: center;
  font-size: .9rem !important;
  color: var(--ll-ink-40) !important;
}


/* ---------- 4. Mobiel ---------- */

@media (max-width: 689.98px) {
  .woocommerce-cart .woocommerce-cart-form { padding: 6px 16px; }
  .woocommerce-cart table.cart td.actions .coupon { flex-wrap: wrap; }
  .woocommerce-cart table.cart td.actions .coupon input.input-text { min-width: 0; flex: 1 1 100%; }
  .woocommerce-cart .cart_totals,
  .woocommerce-checkout .ct-order-review { position: static; }
}