/*  WooCommerce module styles
    Single stylesheet for the whole inc/woocommerce/ module (no bundler).
    Add new component styles under their own section divider below.
————————————————————————————————————————————————*/

:root {
  --woo-layout-gap: 16px 32px;
  --woo-layout-direction: column;

  --woo-layout-width-content: 100%;
  --woo-layout-width-sidebar: 100%;

  /* Sticky-summary offset = the live header height (published by template.js as
     --masthead-h / --masthead-panel-h on :root) plus a small gap. No magic
     numbers: it tracks the real header across breakpoints and i18n. The
     fallbacks match the default desktop header, so it still clears the header if
     the JS never runs. */
  --woo-summary-gap: 16px;
  --woo-summary-top: calc(var(--masthead-h, 221px) + var(--woo-summary-gap));
}

/* Scrolling down: the top panel tucks above the viewport, so the visible header
   is shorter by the panel height and the summary follows it up in lock-step. */
body.is-masthead-collapsed {
  --woo-summary-top: calc(var(--masthead-h, 221px) - var(--masthead-panel-h, 65px) + var(--woo-summary-gap));
}

:is(.cart, .checkout) {
  display: flex;
  gap: var(--woo-layout-gap);
  flex-direction: var(--woo-layout-direction);
}

:is(.cart-list, .checkout-form) {
  display: flex;
  flex-direction: column;
  width: var(--woo-layout-width-content);
}

:is(.cart-summary, .checkout-summary) {
  width: var(--woo-layout-width-sidebar);
}

@media (min-width: 1080px) {
  :root {
    --woo-layout-direction: row;

    --woo-layout-width-content: 70%;
    --woo-layout-width-sidebar: 30%;
  }

  /* Sidebar sticks while the long content column scrolls past. align-self keeps
     it at its own height (a stretched flex item has no room to stick). */
  :is(.cart-summary, .checkout-summary) {
    position: sticky;
    top: var(--woo-summary-top);
    align-self: flex-start;
    /* Match .masthead's top transition so the two move together as the panel
       collapses/expands, instead of the summary snapping 65px. */
    transition: top 0.3s;
  }
}

/* Woo Checkout Form */
.checkout-form {
  gap: 32px;
}

/*  Cart / Checkout List
————————————————————————————————————————————————*/
:is(.cart-list, .checkout-list) {
  display: flex;
  flex-direction: column;
}

/* shared row template: thumb | product | qty | price | subtotal | remove */
:is(.cart-list__head, .cart-list__item, .checkout-list__head, .checkout-list__item) {
  display: grid;
  gap: 32px;
  align-items: center;
}

:is(.cart-list__head, .cart-list__item) {
  grid-template-columns: 96px 1fr 128px 96px 96px 24px;
}

:is(.checkout-list__head, .checkout-list__item) {
  grid-template-columns: 96px 1fr 128px 96px;
}

/* */
:is(.cart-list__head, .checkout-list__head) {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray);
}

:is(.cart-list__head-column, .checkout-list__head-column) {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--color-gray-dark);
}

:is(
  .cart-list__head-column--qty,
  .cart-list__head-column--price,
  .cart-list__head-column--subtotal,
  .checkout-list__head-column--qty,
  .checkout-list__head-column--price,
  .checkout-list__head-column--subtotal
) {
  text-align: center;
}

:is(.cart-list__item, .checkout-list__item):not(:first-child) {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray-light);
}

/* «+ додати ще товар» link under the checkout items list */
.checkout-list__add {
  margin-top: 16px;
  text-decoration: underline;
  color: var(--color-accent);
}

/* thumb + info are direct grid items of the row (thumb = col 1, info = col 2),
   regrouped on mobile by the explicit grid placement below. They used to be
   wrapped in a .cart-list__product / .checkout-list__product with
   display:contents, but that broke grid-item promotion on Safari < 16 (iOS 15)
   and piled the cells on top of each other — so the wrapper was removed. */

:is(.cart-list__thumb, .checkout-list__thumb) {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid var(--color-gray);
}

:is(.cart-list__thumb, .checkout-list__thumb) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(.cart-list__info, .checkout-list__info) {
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

:is(.cart-list__name, .checkout-list__name) {
  font-weight: 600;
  color: var(--color-black);
}

:is(.cart-list__sku, .checkout-list__sku) {
  font-size: 12px;
  color: var(--color-gray-dark);
}

/* price / subtotal */
:is(.cart-list__price, .checkout-list__price, .cart-list__subtotal, .checkout-list__subtotal) {
  text-align: center;
}

:is(.cart-list__price, .checkout-list__price) {
  color: var(--color-gray-dark);
}

:is(.cart-list__subtotal, .checkout-list__subtotal) {
  font-weight: 600;
  color: var(--color-black);
}

/* remove (×) */
:is(.cart-list__remove, .checkout-list__remove) {
  display: flex;
  align-items: center;
  justify-self: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  transition: 0.16s;

  font-size: 24px;
  line-height: 0;

  border-radius: 100%;
  border: 1px solid var(--color-gray);

  background: var(--color-white);
}

:is(.cart-list__remove, .checkout-list__remove):hover {
  background: var(--color-accent-trans);
}

/* no-JS fallback submit — hidden (qty/remove are live via AJAX) */
:is(.cart-list__update, .checkout-list__update) {
  display: none;
}

/* AJAX in-flight */
:is(.cart, .checkout).is-loading {
  opacity: 0.56;
  pointer-events: none;
}

@media (max-width: 1280px) {
  :is(.cart-list__head, .checkout-list__head) {
    display: none;
  }

  /* Shared styles for both containers */
  :is(.cart-list__item, .checkout-list__item) {
    position: relative;
    grid-template-rows: auto auto;
    gap: 16px 16px;

    border-top: 1px solid var(--color-gray-light);
    border-bottom: none;
  }

  :is(.cart-list__price, .checkout-list__price, .cart-list__subtotal, .checkout-list__subtotal) {
    text-align: right;
  }

  /* Individual grids */
  .cart-list__item {
    /* Cart: 3 columns (thumb, price, subtotal) */
    grid-template-columns: 96px max-content 1fr;
  }

  .checkout-list__item {
    /* Checkout: 2 columns (thumb, price) */
    grid-template-columns: 96px 1fr;
  }

  /* Shared positioning: Row 1 */
  :is(.cart-list__thumb, .checkout-list__thumb) {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  :is(.cart-list__info, .checkout-list__info) {
    /* -1 stretches to the end in both grid types */
    grid-column: 2 / -1;
    grid-row: 1;
  }

  /* Shared positioning: Row 2 */
  :is(.cart-list__qty, .checkout-list__qty) {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  :is(.cart-list__price, .checkout-list__price) {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  /* Checkout specific alignment */
  .checkout-list__price {
    /* Align right to fill the space of missing subtotal */
    justify-self: end;
  }

  /* Elements present ONLY in the cart */
  .cart-list__subtotal {
    grid-column: 3 / 4;
    grid-row: 2;
    justify-self: end;
  }

  .cart-list__remove {
    position: absolute;
    right: 0;
    top: -16px;
  }
}

/* Cart / Checkout Summary
————————————————————————————————————————————————*/
:is(.cart-summary, .checkout-summary) {
  gap: 16px;
  display: flex;
  flex-direction: column;

  padding: 32px;

  border-radius: 8px;
  border: 1px solid var(--color-gray);
}

:is(.cart-summary__title, .checkout-summary__title) {
  margin: 0 !important;

  font-size: 20px;
  font-weight: 600;
}

/* summary list */
:is(.cart-summary__list, .checkout-summary__list) {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

/* summary item */
:is(.cart-summary__item, .checkout-summary__item) {
  display: flex;
  justify-content: space-between;
}

:is(.cart-summary__item--lg, .checkout-summary__item--lg) {
  font-size: 20px;
  font-weight: 600;
}

:is(.cart-summary__item--muted, .checkout-summary__item--muted) {
  color: var(--color-gray-dark);
}

:is(.cart-summary__label, .checkout-summary__label) {
  gap: 4px;
  display: flex;
  align-items: center;

  color: var(--color-gray-dark);
}

:is(.cart-summary__label--black, .checkout-summary__label--black) {
  color: var(--color-black);
}

/* applied coupon name (styleable separately from the label) */
:is(.cart-summary__coupon, .checkout-summary__coupon) {
  padding: 4px 8px;
  border-radius: 8px;

  font-size: 12px;
  text-transform: lowercase;

  color: var(--color-black);
  background: rgba(172, 255, 47, 0.32);
}

/* summary separator */
:is(.cart-summary__separator, .checkout-summary__separator) {
  border: navajowhite;
  border-bottom: 1px solid var(--color-gray);
}

:is(.cart-summary__actions, .checkout-summary__actions) {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

/* Cart coupon */
.cart-coupon {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.cart-coupon__title {
  font-weight: 600;
  color: var(--color-accent);
}

.cart-coupon__form {
  gap: 8px;
  display: flex;
}

.cart-coupon__remove {
  cursor: pointer;
  font-size: 24px;
  line-height: 0;
  transition: ease-in-out 0.16s;
}

.cart-coupon__remove:hover {
  color: var(--color-accent);
}

/*  Cart Limit
————————————————————————————————————————————————*/
.cart-limit {
  gap: var(--woo-layout-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 8px;
  background: var(--color-accent-trans);

  padding: 32px;
}

/* Reached the minimum-order amount → the bar stays visible (accent colour, full
   progress bar) as a confirmation, instead of being hidden. */
.cart-limit__text .iconify {
  font-size: 18px;
}

.cart-limit:not(:last-child) {
  margin-bottom: 32px;
}

.cart-limit__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cart-limit__text {
  margin: 0 !important;
  gap: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--color-accent);
}

.cart-limit__bar,
.cart-limit__bar-fill {
  height: 8px;
  border-radius: 32px;
}

.cart-limit__bar {
  overflow: hidden;
  background: var(--color-accent-trans);
}

.cart-limit__bar-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.16s ease;
}

@media (max-width: 576px) {
  /* On mobile the "minimum reached" confirmation is redundant (the summary below
     already shows the total + checkout CTA), so hide it once reached — but keep
     the "add more" nudge visible while the cart is still below the minimum. */
  .cart-limit.is-reached {
    display: none;
  }

  .cart-limit {
    flex-direction: column;
  }

  .cart-limit__content,
  .cart-limit__sidebar {
    width: 100%;
  }
}

/*  Checkout Card
————————————————————————————————————————————————*/
.checkout-card {
  gap: 16px;
  display: flex;
  flex-direction: column;

  padding: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-gray);
}

.checkout-card__head {
  gap: 16px;
  display: flex;
  align-items: center;
}

.checkout-card__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  font-weight: 600;

  color: var(--color-white);
  background: var(--color-accent);

  border-radius: 100%;
}

.checkout-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

/*  Cart / Checkout · form controls (base)
    The theme's global input{} was removed (it leaked into other areas); this is
    the single source for our field look. Covers WC-rendered fields (inside
    .form-row of the checkout / cart / login form), the Nova Poshta inputs
    (.checkout-input) and the coupon input (.cart-coupon__input) with the same
    tokens: 48px tall, 8px radius, gray border, accent focus. Quantity steppers
    and the radio cards are intentionally out of scope (not in .form-row, no
    matching class), so this never touches them.
————————————————————————————————————————————————*/

/* single-line controls */
:is(.checkout, .cart, .woocommerce-form-login) .form-row :is(input.input-text, select),
.checkout-input,
.cart-coupon__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;

  font: inherit;
  color: var(--color-black);

  border-radius: 8px;
  border: 1px solid var(--color-gray);
  background: var(--color-white);

  transition: border-color 0.16s;
}

/* multi-line control (order comment) */
:is(.checkout, .cart) .form-row textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  resize: vertical;

  font: inherit;
  color: var(--color-black);

  border-radius: 8px;
  border: 1px solid var(--color-gray);
  background: var(--color-white);
}

/* placeholder */
:is(.checkout, .cart, .woocommerce-form-login) .form-row :is(input.input-text, textarea)::placeholder,
.checkout-input::placeholder,
.cart-coupon__input::placeholder {
  color: var(--color-gray-dark);
}

/* focus */
:is(.checkout, .cart, .woocommerce-form-login) .form-row :is(input.input-text, select, textarea):focus,
.checkout-input:focus,
.cart-coupon__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* fields grid */
.checkout-fields {
  gap: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.checkout-fields .form-row {
  gap: 8px;
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;
}

.checkout-fields .form-row-wide {
  grid-column: 1 / -1;
}

.checkout-fields label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
}

.checkout-fields .required {
  color: var(--color-accent);
  text-decoration: none;
}

.checkout-fields .woocommerce-input-wrapper {
  width: 100%;
}

/* field look comes from the form-controls base above */

.checkout-login-hint {
  display: none !important;
  margin: 16px 0 0 !important;
  font-size: 14px;
  color: var(--color-gray-dark);
}

.checkout-login-hint__link {
  font-weight: 600;
  color: var(--color-accent);
}

@media (max-width: 576px) {
  .checkout-fields {
    grid-template-columns: 1fr;
  }
}

/*  Checkout Shipping (Nova Poshta picker)
————————————————————————————————————————————————*/
[x-cloak] {
  display: none !important;
}

.checkout-shipping {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

/* The subtype radio cards (.checkout-shipping__types / .checkout-radio) share
   their styles with the payment method cards — see the «option cards» section
   below, after the NP fields. */

/* NP fields */
.checkout-fields--np {
  grid-template-columns: 1fr;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
}

/* .checkout-input look comes from the form-controls base above */

/* autocomplete dropdown */
.checkout-autocomplete {
  position: relative;
}

.checkout-autocomplete__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 256px;
  overflow-y: auto;
  border-radius: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.checkout-autocomplete__item {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
}

.checkout-autocomplete__item:hover {
  background: var(--color-accent-trans);
}

.checkout-autocomplete__loader {
  position: absolute;
  top: 40px;
  right: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-gray);
  border-top-color: var(--color-accent);
  animation: starlab-spin 0.7s linear infinite;
}

@keyframes starlab-spin {
  to {
    transform: rotate(360deg);
  }
}

/* courier address row */
.checkout-courier {
  gap: 16px 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 576px) {
  .checkout-courier {
    grid-template-columns: 1fr;
  }
}

/*  Checkout · shipping & payment — option cards (shared)
    Two structures, one look. Shipping renders each option as a single
    .checkout-radio (the card IS the clickable label). Payment splits the card
    (.checkout-pay) from its header (.checkout-pay__label) because a chosen
    method expands a box below it — so .checkout-radio appears in both the
    «frame» and the «row» groups. Shared frame / layout / typography live here;
    the per-block deltas (gaps, radio size, list reset) are grouped under the two
    comments below. Canonical values follow the refactored shipping block.
————————————————————————————————————————————————*/

/* option list */
:is(.checkout-shipping__types, .checkout-payment__methods) {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

/* card frame */
:is(.checkout-radio, .checkout-pay) {
  border-radius: 8px;
  border: 1px solid var(--color-gray);
  transition:
    border-color 0.16s,
    background 0.16s;
}

/* selected card */
:is(.checkout-radio.is-active, .checkout-pay:has(.checkout-pay__radio:checked)) {
  border-color: var(--color-accent);
  background: var(--color-accent-trans);
}

/* clickable row */
:is(.checkout-radio, .checkout-pay__label) {
  gap: 16px;
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

/* radio input */
:is(.checkout-radio input, .checkout-pay__radio) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

/* option body */
:is(.checkout-radio__body, .checkout-pay__body) {
  display: flex;
  flex-direction: column;
}

/* option title */
:is(.checkout-radio__title, .checkout-pay__title) {
  font-weight: 600;
  color: var(--color-black);
}

/* option subtitle */
:is(.checkout-radio__sub, .checkout-pay__sub) {
  font-size: 12px;
  color: var(--color-gray-dark);
}

/* payment-only: neutralize the <ul> browser defaults so it matches the <div>
   list — spacing/sizing is already shared above, this is not a visual delta */
.checkout-payment__methods {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*  Checkout · payment — method box & legal entity
————————————————————————————————————————————————*/

/* conditional box (description / ЄДРПОУ) */
.checkout-pay__box {
  padding: 0 16px 16px;
}

/* legal-entity details (company + ЄДРПОУ) */
.checkout-legal {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.checkout-legal__head {
  gap: 8px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-accent);
}

.checkout-legal__fields {
  gap: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.checkout-legal .form-row {
  margin: 0;
  padding: 0;
}

.checkout-legal label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
}

.checkout-legal .required {
  border: none;
  color: var(--color-accent);
  text-decoration: none;
}

/* legal input look comes from the form-controls base above */

.checkout-legal__note {
  margin: 0;
  font-size: 13px;
  color: #8a8a8a;
}

@media (max-width: 576px) {
  .checkout-legal__fields {
    grid-template-columns: 1fr;
  }
}

/* order-comment textarea look comes from the form-controls base above */

/*  Checkout · «no call» confirmation (instant-payment methods only)
————————————————————————————————————————————————*/
/* Shown under the comment for WayForPay / cash-on-delivery; JS toggles [hidden]
   per the selected payment method. */
.checkout-nocall {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-gray);
  background: var(--color-gray-light);
}

.checkout-nocall[hidden] {
  display: none;
}

.checkout-nocall__label {
  gap: 12px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.checkout-nocall__label input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.checkout-nocall__body {
  gap: 2px;
  display: flex;
  flex-direction: column;
}

.checkout-nocall__title {
  font-weight: 600;
  color: var(--color-black);
}

.checkout-nocall__sub {
  font-size: 13px;
  color: var(--color-gray-dark);
}

/*  Checkout · place order (inside the summary card)
————————————————————————————————————————————————*/
/* The button reuses the .button button--sm button--fw look (cart-consistent);
   only the inner total needs a no-wrap so it never breaks the label. */
.checkout-place__total {
  white-space: nowrap;
}

.checkout-place__consent {
  margin: 16px 0 0 !important;
  text-align: center;
  font-size: 13px;
  color: #8a8a8a;
}

.checkout-place__consent a {
  color: var(--color-accent);
}

/*  Checkout · order received (thank-you)
    Skins WC's default order-received markup (no template override) to the
    cart/checkout look: a success banner, an overview card, the details table
    styled like our list, and bordered address cards. Scoped to .woocommerce-order.
————————————————————————————————————————————————*/
.woocommerce-order {
  display: flex;
  flex-direction: column;
  gap: 32px;

  max-width: 992px;
  margin-inline: auto;
}

.woocommerce-order section {
  padding: 0;
}

/* success banner */
.woocommerce-order .woocommerce-thankyou-order-received {
  margin: 0;
  padding: 24px 28px;

  font-size: 18px;
  font-weight: 600;
  color: var(--color-black);

  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent-trans);
}

/* overview card: order number / email / total / payment method */
.woocommerce-order .woocommerce-order-overview {
  margin: 0;
  padding: 24px 32px;
  gap: 12px;
  display: flex;
  flex-direction: column;

  list-style: none;
  border-radius: 8px;
  border: 1px solid var(--color-gray);
}

.woocommerce-order .woocommerce-order-overview li {
  gap: 16px;
  display: flex;
  justify-content: space-between;

  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-light);

  text-transform: none;
  color: var(--color-gray-dark);
}

.woocommerce-order .woocommerce-order-overview li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.woocommerce-order .woocommerce-order-overview li strong {
  text-align: right;
  color: var(--color-black);
}

/* column / customer-details titles */
.woocommerce-order .woocommerce-customer-details > h2,
.woocommerce-order .woocommerce-column__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
}

/* «Подробиці замовлення» is dropped on the thank-you page: the overview card
   above already carries the essentials and the full breakdown is emailed. The
   table and its heading live in the same .woocommerce-order-details section, so
   hiding the section removes both while the customer addresses (a separate
   section) stay. */
.woocommerce-order .woocommerce-order-details {
  display: none;
}

/* customer addresses */
.woocommerce-order .woocommerce-customer-details {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.woocommerce-order .woocommerce-columns--addresses {
  gap: 24px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
  width: auto;
  margin: 0;
  float: none;
  padding: 0;
}

.woocommerce-order .woocommerce-customer-details address {
  padding: 24px 32px;

  font-style: normal;
  line-height: 1.6;
  color: var(--color-black);

  border-radius: 8px;
  border: 1px solid var(--color-gray);

  p {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .woocommerce-order .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}

/*  Component
————————————————————————————————————————————————*/
.quantity {
  width: 100%;
  max-width: 128px;

  display: flex;
  align-items: stretch;

  overflow: hidden;

  border-radius: 4px;
  border: 1px solid var(--color-gray);
}

/* .quantity input[type="number"] */
.quantity input[type="number"] {
  padding: 0 !important;

  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: none !important;

  height: auto !important;
  text-align: center;

  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* quantity__button */
.quantity__button {
  cursor: pointer;
  height: 32px;
  width: 64px;

  font-size: 24px;
  font-weight: 300;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.16s;
}

.quantity__button::selection {
  background: transparent;
}

.quantity__button:hover {
  color: var(--color-accent);
  background: var(--color-accent-trans);
}

/*  Notices · toasts (bottom-right)
————————————————————————————————————————————————*/
.woo-toasts {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 99999;

  gap: 12px;
  display: flex;
  flex-direction: column-reverse;

  width: calc(100% - 48px);
  max-width: 360px;

  pointer-events: none;
}

.woo-toast {
  gap: 12px;
  display: flex;
  align-items: flex-start;

  padding: 14px 16px;
  border-radius: 8px;

  background: var(--color-white);
  border-left: 4px solid var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

  opacity: 0;
  transform: translateY(-16px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;

  pointer-events: auto;
}

.woo-toast.is-visible {
  opacity: 1;
  transform: none;
}

.woo-toast--success {
  border-left-color: #12af0a;
}

.woo-toast--error {
  border-left-color: #e2401c;
}

.woo-toast--info {
  border-left-color: var(--color-accent);
}

.woo-toast__body {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.woo-toast__body a {
  font-weight: 600;
  color: var(--color-accent);
}

.woo-toast__close {
  border: none;
  cursor: pointer;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #9aa0a6;
}

@media (max-width: 576px) {
  .woo-toasts {
    left: 16px;
    right: 16px;
    top: 16px;
    width: auto;
    max-width: none;
  }
}

/*  Checkout tooltip (disabled "go to checkout" → why)
————————————————————————————————————————————————*/
.checkout-tooltip {
  position: relative;
}

.checkout-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);

  z-index: 10;
  width: max-content;
  max-width: 240px;

  padding: 8px 12px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;

  color: var(--color-white);
  background: var(--color-black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.checkout-tooltip[data-tooltip]::before {
  content: "";

  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);

  z-index: 10;
  border: 6px solid transparent;
  border-top-color: var(--color-black);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.checkout-tooltip[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.checkout-tooltip[data-tooltip]:hover::before {
  opacity: 1;
}

/*  Required-field error highlight (place-order attempt)
————————————————————————————————————————————————*/
/* Added by the place-order gate (index.js) to each required field the customer
   left empty when they click the still-disabled button, and removed live as
   each field is filled. Covers the WC contact inputs (.input-text) and the Nova
   Poshta picker inputs (.checkout-input via [data-np-field]); box-shadow keeps it
   visible even where the base input border is subtle. */
.starlab-field-error {
  border-color: #e2401c !important;
  box-shadow: 0 0 0 2px rgba(226, 64, 28, 0.18) !important;
}

/*  Cart · mini (header)
————————————————————————————————————————————————*/
.cart-mini {
  display: flex;
  position: relative;
  align-items: center;
}

.cart-mini .cart-amount {
  margin: 0 0 0 15px;
  padding: 0 0 0 15px;
  border-left: 1px solid var(--color-gray-light);
}

.cart-mini .cart-count {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 10px;
  border-radius: 100%;
  color: var(--color-white);
  background: var(--color-accent);
}

@media only screen and (max-width: 576px) {
  .cart-mini .cart-amount {
    display: none;
  }
}

/*  Cart · empty
————————————————————————————————————————————————*/
.cart-empty {
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 24px;
}

.cart-empty__icon {
  font-size: 72px;
  color: var(--color-gray);
}

.cart-empty__text {
  margin: unset !important;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
}

.cart-empty__link {
  gap: 8px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  border-radius: 32px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  transition: 0.2s;
}

.cart-empty__link:hover {
  opacity: 0.9;
}