/* Standalone cart page premium enhancements. Loaded after theme.css + theme-premium.css.
   Shares brand tokens with checkout-premium.css; the two never load on the same page. */

:root {
  --skt-pink: #d50075;
  --skt-pink-dark: #9e0056;
  --skt-pink-tint: #fef0f7;
  --skt-pink-border: #f0dce8;
  --skt-gold: #ffce54;
  --skt-ink: #1a0010;
}

/* ---------- Layout ---------- */
@media (min-width: 992px) {
  .cart-grid__right {
    position: sticky;
    top: 1.25rem;
    align-self: flex-start;
  }
}

/* .card.cart-summary, .cart-summary__totals, .cart-voucher* are already styled by
   checkout-premium.css's identical class names; nothing to duplicate here. */

/* ---------- Product list ---------- */
.cart-overview.js-cart {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}

.cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart__item {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}

.cart__item:last-child {
  border-bottom: none;
}

.product-line__title {
  color: var(--skt-ink);
  font-weight: 600;
  text-decoration: none;
}

.product-line__title:hover {
  color: var(--skt-pink);
}

.product-line__info .label {
  color: #8a8a92;
}

.product-line__current .price {
  font-weight: 700;
  color: var(--skt-ink);
}

.product-line__regular {
  color: #a9a9a9;
}

.product-line__basic .discount.badge {
  background: var(--skt-pink) !important;
  color: #fff !important;
}

.product-line__price {
  font-weight: 700;
  color: var(--skt-pink);
}

.product-line__actions .remove-from-cart {
  color: #8a8a92;
  transition: color 0.15s ease;
}

.product-line__actions .remove-from-cart:hover {
  color: #dc3545;
}

.gift-quantity .gift {
  background: var(--skt-pink-tint);
  color: var(--skt-pink);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Checkout CTA ---------- */
.cart-detailed__actions.js-cart-detailed-actions {
  padding: 1.25rem;
  background: #fafafa;
  border-top: 1px dashed #e5e5e5;
}

.cart-detailed__actions .btn.btn-primary,
.cart-detailed__actions .btn.btn-primary.disabled {
  width: 100%;
  padding: 0.85rem;
  font-weight: 700;
}

/* ---------- Empty cart ---------- */
.cart-overview .js-cart-line-product-quantity + p,
.cart-overview > p.mb-3 {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #6c6c73;
  font-size: 1.05rem;
}

.cart-grid__body h1 {
  font-family: 'Playfair Display', serif;
  color: var(--skt-ink);
}

/* ---------- Small-screen refinements ---------- */
@media (max-width: 767.98px) {
  .cart__item {
    padding: 0.9rem 1rem;
  }
}

/* ===========================================================================
   Cart page rebuild                                             (2026-08-28)

   Paired with the restructured checkout/_partials/cart-detailed-product-line.tpl.
   Same brand tokens and panel language as the PDP enquiry box, the menu drawer
   and the add-to-cart sheet, so the cart is not the one page that looks like a
   different store.

   The line item is a grid with named areas rather than a Bootstrap row padded
   out with empty spacer columns. Desktop and mobile differ only in how the
   areas are arranged, so there is one structure to reason about.
   ======================================================================== */

/* ---------- Page header ---------- */
.page-cart h1,
.page-cart .cart-grid__body > h1 {
  margin-bottom: 1.25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--skt-ink);
}

.page-cart .cart-grid__right > h2 {
  margin-bottom: 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--skt-ink);
}

/* ---------- Item list ---------- */
.cart-overview.js-cart {
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* The template emits an <hr> before the list and after every line. Separating
   with a border on the item itself gives one hairline per boundary instead of a
   rule plus the list's own edge, and no stray rule under the last item. */
.cart-overview.js-cart > hr,
.cart-overview .cart__item > hr { display: none; }

.cart__items { margin: 0; padding: 0; list-style: none; }

.cart__item { border-bottom: 1px solid var(--skt-pink-border); }
.cart__item:last-child { border-bottom: 0; }

/* ---------- Line item ---------- */
.product-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas:
    "alert   alert   alert"
    "image   content info"
    "image   actions info";
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 1.25rem;
}

.product-line__alert { grid-area: alert; }
.product-line__image { grid-area: image; align-self: start; }
.product-line__content { grid-area: content; min-width: 0; }
.product-line__informations { grid-area: info; }
.product-line__actions { grid-area: actions; }

.product-line__image a {
  display: block;
  border: 1px solid var(--skt-pink-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.product-line__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

a.product-line__title {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--skt-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

@media (hover: hover) {
  a.product-line__title:hover { color: var(--skt-pink); }
}

.product-line__info { color: #6c6c73; font-size: 0.82rem; }

.product-line__prices .price {
  color: #5c5c63;
  font-size: 0.9rem;
  font-weight: 600;
}

.product-line__regular { color: #9a94a0; text-decoration: line-through; font-size: 0.85rem; }

/* ---------- Quantity + line total ---------- */
/* The flex row is the INNER wrapper, not `__informations`. The stock markup
   nests the stepper and the line total inside a shared child (a Bootstrap `.row`
   before this rebuild), so flexing the outer element only laid out one child and
   the total kept stacking under the stepper. */
.product-line__informations { display: block; }

.product-line__qty-wrap {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* ---- Quantity stepper ----
   Measured at 40x38 per button on this page against the 44x44 minimum, while
   the product page's stepper is already 48px — the cart's was simply never
   sized. The `mb-3` Bootstrap class on the input group also pushed the control
   off the line's vertical centre. */
.product-line__qty-wrap .quantity-button { margin: 0; }

.product-line .quantity-button .input-group { margin-bottom: 0 !important; }

.product-line .quantity-button .btn {
  /* `flex: 0 0 44px` is the load-bearing part, not `width`. Bootstrap gives
     `.input-group > .btn` a `flex: 1 1 auto`, so inside the fixed-width group
     the buttons SHRANK past whatever width was set — measured 40px against a
     44px declaration. Pinning the basis and forbidding shrink is what actually
     holds the target size. */
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--skt-pink-border);
  color: var(--skt-ink);
}

@media (hover: hover) {
  .product-line .quantity-button .btn:hover {
    border-color: var(--skt-pink);
    color: var(--skt-pink);
  }
}

.product-line .quantity-button .form-control {
  height: 44px;
  min-width: 56px;
  border-color: var(--skt-pink-border);
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-line__total {
  min-width: 6.5rem;
  text-align: right;
  color: var(--skt-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Remove ----------
   Was a bare underlined link sitting two rows below the product it belonged to.
   Now a quiet icon+label directly under the item, and a real 44px target. */
a.remove-from-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: #8a8290;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.remove-from-cart__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  a.remove-from-cart:hover { color: #c0392b; }
}

a.remove-from-cart:active { color: #c0392b; }

/* ---------- Order summary ---------- */
.page-cart .card.cart-summary {
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(26, 0, 16, 0.04);
}

.page-cart .cart-summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  color: #5c5c63;
  font-size: 0.9rem;
}

.page-cart .cart-summary__value { font-variant-numeric: tabular-nums; }

/* One number on this page is the number. */
.page-cart .cart-summary__line.cart-total {
  margin-top: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--skt-pink-border);
  color: var(--skt-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.page-cart .cart-summary__line.cart-total .cart-summary__value { color: var(--skt-pink); }

.page-cart .cart-summary__label--sub { color: #8a8290; font-size: 0.82rem; }

/* The tax line is emitted AFTER the grand total by cart-summary-totals.tpl, so
   a supporting figure sat below the one number that should close the column.
   Reordered visually rather than by moving the markup — the template's blocks
   stay where modules expect to find them. */
.page-cart .cart-summary__totals { display: flex; flex-direction: column; }
.page-cart .cart-summary__totals .cart-summary__line { order: 1; }
.page-cart .cart-summary__totals .cart-summary__line.cart-total { order: 2; }

.page-cart .cart-detailed__actions { border-top: 0; background: var(--skt-pink-tint); }

.page-cart .cart-detailed__actions .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- Continue shopping ---------- */
.page-cart .cart-container > .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin-top: 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Reassurance / policies ---------- */
.page-cart .blockreassurance_product,
.page-cart #block-reassurance {
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  padding: 0.35rem 1rem;
  background: #fff;
}

.page-cart .blockreassurance_product .block-title,
.page-cart #block-reassurance .block-title {
  color: var(--skt-ink) !important;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Phones ----------
   Same four areas, restacked: the item reads image + name, then the remove
   link, then a full-width row with the stepper left and the line total right.
   Nothing is hidden and no element changes meaning between breakpoints. */
@media (max-width: 767.98px) {
  .product-line {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "alert   alert"
      "image   content"
      "image   actions"
      "info    info";
    gap: 0.25rem 1rem;
    padding: 1rem;
  }

  .product-line__qty-wrap {
    justify-content: space-between;
    gap: 1rem;
  }

  .product-line__informations {
    margin-top: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--skt-pink-border);
  }

  .product-line__total { min-width: 0; }

  .page-cart .cart-grid__right { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-cart * { transition-duration: 0.001ms !important; }
}

/* ---------- Remove link: pin the decoration ----------
   Measured as `text-decoration: none` already, but `theme.css` carries a bare
   `a { text-decoration: underline }` that is only undone by
   `a:not(.alert-link)`. That is one stylesheet edit away from underlining this
   link again, and a stale cached copy shows it underlined today. Pinned on the
   anchor AND its children so neither can pick the underline back up. */
.product-line__actions a.remove-from-cart,
.product-line__actions a.remove-from-cart:hover,
.product-line__actions a.remove-from-cart span,
.product-line__actions a.remove-from-cart svg {
  text-decoration: none;
}

/* ---------- Cart update alert ----------
   The "<product> has been removed from the cart" banner rendered as Bootstrap's
   stock `alert-success`: mint green, square corners, and the product name
   marked up as an <a> with `text-decoration: underline` in `rgb(10,54,34)` — so
   it looked like a link to somewhere, in a green that belongs to no part of
   this store.

   Restyled as a quiet confirmation strip: the shop's own success green for the
   icon, neutral ink for the text, and the product name emphasised by WEIGHT
   rather than by pretending to be a link. */
.js-cart-update-alert .alert {
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #cfe8db;
  border-radius: 12px;
  background: #f2faf6;
  color: var(--skt-ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

.js-cart-update-alert .alert .material-icons {
  color: #0f7a45;
  font-size: 20px;
  line-height: 1.4;
}

/* The product name is emphasis, not navigation. */
.js-cart-update-alert .alert a {
  color: var(--skt-ink);
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .js-cart-update-alert .alert a:hover { color: var(--skt-pink); }
}

.js-cart-update-alert .alert .btn-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  opacity: 0.45;
}

.js-cart-update-alert .alert .btn-close:hover { opacity: 0.9; }

.js-cart-update-alert .alert-heading:empty { display: none; }

/* =============================================================================
   Empty cart  (2026-08-30)

   Replaces a bare `<p>` in an outlined box, drawn next to an order summary for
   a cart with nothing in it. checkout/cart.tpl now drops that whole right column
   when there are no products, so this state gets the full width and is centred
   in it. See the note in _partials/cart-detailed.tpl.
   ========================================================================== */
.page-cart .sk-cart-empty {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
}

.page-cart .sk-cart-empty__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  color: var(--skt-pink, #d50075);
  opacity: .55;
}

.page-cart .sk-cart-empty__title {
  margin: 0 0 .5rem;
  color: var(--skt-ink, #1a0010);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  /* Playfair defaults to old-style figures and a low-slung look at display
     sizes; lining figures keep it level with the rest of the page. */
  font-variant-numeric: lining-nums;
  line-height: 1.2;
}

.page-cart .sk-cart-empty__text {
  margin: 0 auto 2rem;
  max-width: 30rem;
  color: #4b4550;
  font-size: 1rem;
  line-height: 1.65;
}

.page-cart .sk-cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.page-cart .sk-cart-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.75rem;
  /* Same pill as every other control on the site. */
  border: 1px solid var(--skt-pink, #d50075);
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .22s cubic-bezier(.2,.7,.3,1),
              border-color .22s cubic-bezier(.2,.7,.3,1),
              color .22s cubic-bezier(.2,.7,.3,1);
}

.page-cart .sk-cart-empty__btn--primary {
  background: var(--skt-pink, #d50075);
  color: #fff;
  box-shadow: 0 6px 18px rgba(213, 0, 117, .26);
}

.page-cart .sk-cart-empty__btn--ghost {
  background: #fff;
  color: var(--skt-pink, #d50075);
}

@media (hover: hover) {
  .page-cart .sk-cart-empty__btn--primary:hover {
    background: var(--skt-pink-dark, #9e0056);
    border-color: var(--skt-pink-dark, #9e0056);
    color: #fff;
  }
  .page-cart .sk-cart-empty__btn--ghost:hover {
    background: var(--skt-pink, #d50075);
    border-color: var(--skt-pink, #d50075);
    color: #fff;
  }
}

.page-cart .sk-cart-empty__btn-icon { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 400px) {
  .page-cart .sk-cart-empty__actions { flex-direction: column; }
  .page-cart .sk-cart-empty__btn { width: 100%; }
}

/* ---- Populated cart: the controls join the site's curve ------------------
   The checkout button and the minimum-purchase warning were still on Bootstrap
   defaults — a 4px rectangle and a raw tan `alert-warning` — beside a stepper
   that is now a pill. */
.page-cart .cart-detailed__actions .btn,
.page-cart .cart-summary .btn,
.page-cart .btn-with-icon {
  border-radius: 999px;
}

.page-cart .cart-detailed__actions .alert-warning {
  border: 1px solid #f0dce8;
  border-radius: 14px;
  background: #fef0f7;
  color: #7a3b1d;
  font-size: .875rem;
}

/* A disabled primary should not read as the loudest thing on the page. */
.page-cart .cart-detailed__actions .btn.disabled,
.page-cart .cart-detailed__actions .btn[disabled] {
  box-shadow: none;
  opacity: .45;
}

/* The list card's border/ground belongs to a list of cart lines. Empty, it was
   a 1296px outlined rectangle around a centred message. */
.page-cart .cart-overview--empty {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Set by cart-premium.js when the last line is removed without a page reload —
   the server-side gate in checkout/cart.tpl only runs on a full load. */
.page-cart .cart-grid--empty .cart-grid__right { display: none; }