/* ============================================================
   TED Digital - cart: Add to basket on product cards, and SureCart's
   slide-out drawer brought into the kit (type, ink, pill buttons).
   Loads on every page with the cart (the drawer is site-wide).
   ============================================================ */

/* ---- product card: price (inc. VAT) + Add to basket, pinned to the card foot ---- */
.product-card .ted-buy { margin-top: auto; }
.product-card .ted-buy .product-card__price { margin-top: 0; }
.ted-buy__vat { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--ink-50); letter-spacing: 0; }
.ted-buy form { margin: var(--gap-sm) 0 0; }
.ted-buy button.wp-block-button__link { border: 1px solid transparent; }
.ted-buy button[aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* ---- SureCart's drawer, in the kit. Its template part carries inline styles (grey #4b5563 text, 4px
        button radius, 15px base): the overrides below need !important to reach past them. ---- */
.sc-cart-drawer { font-family: var(--font-body); color: var(--ink); }
.sc-cart-drawer .wp-block-group:has(> .wp-block-surecart-cart-close-button) {
  display: flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-sm) var(--gap-md) !important;
  border-bottom: 1px solid var(--line-soft);
}
.sc-cart-drawer .wp-block-surecart-cart-close-button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-circle); color: var(--ink) !important; cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.sc-cart-drawer .wp-block-surecart-cart-close-button:hover { border-color: var(--ink); }
.sc-cart-drawer .wp-block-surecart-cart-close-button svg { width: var(--icon-xs); height: var(--icon-xs); }
.sc-cart-drawer .wp-block-group:has(> .wp-block-surecart-cart-close-button) > p {
  font-family: var(--font-heading); font-size: var(--text-sm) !important; font-weight: 500 !important;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink) !important;
}
.sc-cart-drawer .wp-block-surecart-cart-count {
  min-width: var(--gap-sm); height: var(--gap-sm); padding: 0 var(--gap-3xs) !important; border-radius: var(--radius-full) !important;
  background: var(--ted-teal); color: var(--ted-black); font-family: var(--font-heading); font-size: var(--text-xs) !important;
  font-weight: 500 !important; line-height: var(--gap-sm) !important; text-align: center;
}
.sc-cart-drawer .wp-block-surecart-slide-out-cart-line-items { padding: var(--gap-sm) var(--gap-md) !important; }
.sc-cart-drawer .wp-block-surecart-slide-out-cart-items-subtotal p,
.sc-cart-drawer .wp-block-surecart-cart-subtotal-amount { color: var(--ink) !important; }
.sc-cart-drawer .wp-block-surecart-slide-out-cart-items-subtotal p + p { color: var(--ink-50) !important; font-size: var(--text-sm) !important; }
.sc-cart-drawer .wp-block-group:has(> .wp-block-surecart-slide-out-cart-items-subtotal) { padding: var(--gap-sm) var(--gap-md) var(--gap-md) !important; border-top-color: var(--line-soft) !important; }
.sc-cart-drawer .sc-cart-items-submit__wrapper { margin-top: var(--gap-sm); }
.sc-cart-drawer .sc-cart-items-submit__wrapper .wp-block-button__link {
  width: 100%; justify-content: center; border-radius: var(--radius-full) !important;
  background: var(--ted-teal); color: var(--ted-black);
}
.sc-cart-drawer .sc-cart-items-submit__wrapper .wp-block-button__link:hover { background: var(--ted-teal-dark); }

/* Line items. The theme turns off core's generated layout CSS for groups (inc/editor.php), and SureCart's
   cart template is built from flex groups - so the rows are laid out here: photo | details, then
   title + amount and quantity + remove as two justified rows. */
.sc-cart-drawer [role="list"] { display: grid; gap: var(--gap-sm); align-content: start; }
.sc-cart-drawer .sc-product-line-item__content > .wp-block-group > .wp-block-group { display: flex; gap: var(--gap-sm); align-items: flex-start; }
.sc-cart-drawer .sc-cart-line-item-image-wrap { flex: none; width: var(--gap-xl); margin: 0; }
.sc-cart-drawer .sc-cart-line-item-image-wrap img { width: 100%; height: auto; border-radius: var(--radius) !important; border-color: var(--line-soft) !important; }
.sc-cart-drawer .sc-product-line-item__content > .wp-block-group > .wp-block-group > .wp-block-group { flex: 1; min-width: 0; display: grid; gap: var(--gap-xs); }
.sc-cart-drawer .sc-product-line-item__content > .wp-block-group > .wp-block-group > .wp-block-group > .wp-block-group { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-xs); }
.sc-cart-drawer .wp-block-surecart-cart-line-item-title { color: var(--ink) !important; font-weight: 500 !important; }
.sc-cart-drawer .wp-block-surecart-cart-line-item-price-name,
.sc-cart-drawer .wp-block-surecart-cart-line-item-remove { color: var(--ink-50) !important; font-size: var(--text-sm) !important; }
.sc-cart-drawer .wp-block-surecart-cart-line-item-amount { color: var(--ink) !important; white-space: nowrap; }
.sc-cart-drawer .wp-block-surecart-cart-line-item-remove { cursor: pointer; gap: var(--gap-3xs); }
.sc-cart-drawer .wp-block-surecart-cart-line-item-remove:hover { color: var(--ink) !important; }
.sc-cart-drawer .sc-cart-items-submit__wrapper .wp-block-button__link { display: flex; align-items: center; }

/* ---- store pages (templates/page-shop.html, page-checkout.html): the header sits in the flow here, so the
        page head needs none of the clearance the over-image heads carry; the store content comes up close ---- */
.page-head.store-head { padding-block: var(--gap-lg); }
.store-page { padding-block: var(--gap-md) var(--gap-2xl); }