/**
 * wavePRESS — shop.css (WooCommerce, every page)
 *
 * The bits of the shop that show on every page: header search / account / cart
 * icons, the mini cart drawer or dropdown, the free shipping bar and the action
 * bar's cart count. Shop pages also load woocommerce.css.
 *
 * Colours, fonts and buttons all come from the theme's variables, so presets and
 * the Cartoon button style carry through.
 */

/* ── Header layout with shop icons ─────────────────────────────────────────── */

/* The icons and the CTA button travel together at the end of the header row */
.header-end {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Logo left / Nav centre / CTA right: the icons (and button) take the right-hand
   side, balancing the logo, so the menu stays centred */
.header-layout--logo-left-nav-center .header-end {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: flex-end;
}

.header-layout--logo-left-nav-center .header-end > .header-cta {
  flex: 0 0 auto;
}

.header-layout--logo-left-nav-center.header-layout--has-shop::after {
  content: none;
}

/* ── Icons ── */
.header-shop {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.header-shop__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--border-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.header-shop__btn .wavepress-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.header-shop__btn:hover,
.header-shop__btn:focus-visible,
.header-shop__btn[aria-expanded="true"] {
  color: var(--nav-hover-text, var(--color-primary));
}

.wavepress-nav-bg .header-shop__btn:hover,
.wavepress-nav-bg .header-shop__btn[aria-expanded="true"] {
  background-color: var(--nav-hover-bg);
}

/* The count bubble sits on the icon's top-right corner; hidden when the cart is empty */
.header-cart__meta {
  display: inline-flex;
  align-items: center;
}

.header-cart__count {
  position: absolute;
  top: 0.1rem;
  left: calc(50% + 0.2rem);
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.header-cart__meta[data-count="0"] .header-cart__count {
  display: none;
}

/* "1 item – $100.00" left of the cart icon; it replaces the count bubble */
.header-cart__summary {
  order: -1;
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.header-cart__summary del {
  display: none;
}

.header-cart__sep {
  opacity: 0.6;
}

.header-cart--summary .header-cart__count {
  display: none;
}

/* Over a transparent header the bubble keeps its colours; the icons follow the header text */
.wavepress-btn-cartoon .header-cart__count {
  outline: 2px solid var(--ink);
}

/* ── Product search panel (drops below the header) ── */
.header-search__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  padding: var(--space-md) var(--gutter);
  background: var(--header-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.header-search__panel[hidden] {
  display: none;
}

.header-search__panel .woocommerce-product-search {
  display: flex;
  gap: var(--space-sm);
  max-width: 640px;
  margin-inline: auto;
}

.header-search__panel .search-field {
  flex: 1;
  min-width: 0;
}

.header-search__panel button[type="submit"] {
  padding: 0.6em 1.2em;
  border: 2px solid var(--btn-border);
  border-radius: var(--button-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-button);
  font-weight: var(--font-weight-button);
  cursor: pointer;
}

.wavepress-btn-cartoon .header-search__panel button[type="submit"] {
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Phones: the icons stay in the header bar, just before the menu button */
@media (max-width: 768px) {
  .header-layout--has-shop .header-actions {
    display: flex;
    order: 2;
    margin-left: auto;
    gap: 0;
  }

  .header-layout--has-shop .header-actions > :not(.header-end),
  .header-layout--has-shop .header-end > .header-cta {
    display: none;
  }

  .header-layout--has-shop .main-navigation {
    order: 3;
    margin-left: var(--space-xs);
  }

  .header-shop__btn {
    min-width: 2.5rem;
    padding: 0 0.4rem;
  }

  .header-cart__summary {
    display: none;
  }

  .header-cart--summary .header-cart__meta:not([data-count="0"]) .header-cart__count {
    display: block;
  }
}

/* ── Mini cart: drawer (default) or dropdown ───────────────────────────────── */

.mini-cart {
  --mini-cart-pad: var(--space-lg);
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.mini-cart[open] {
  display: flex;
  flex-direction: column;
}

.mini-cart::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .mini-cart[open]:not(.is-dropdown) {
    animation: wavepress-drawer-in 0.25s ease-out;
  }

  .mini-cart[open]::backdrop {
    animation: wavepress-fade-in 0.25s ease-out;
  }
}

@keyframes wavepress-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes wavepress-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* No page scrolling behind the open drawer */
html.mini-cart-open {
  overflow: hidden;
}

/* Dropdown: a panel under the cart icon (placed by shop.js); phones get the drawer */
.mini-cart.is-dropdown {
  --mini-cart-pad: var(--space-md);
  inset: auto;
  z-index: 1001;
  width: 380px;
  height: auto;
  max-height: min(70vh, 640px);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.wavepress-btn-cartoon .mini-cart.is-dropdown {
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.wavepress-btn-cartoon .mini-cart:not(.is-dropdown) {
  border-left: 3px solid var(--ink);
}

.mini-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--mini-cart-pad);
  border-bottom: 1px solid var(--color-border);
}

.mini-cart__title {
  margin: 0;
  font-size: 1.25rem;
}

.mini-cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.mini-cart__close:hover,
.mini-cart__close:focus-visible {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.mini-cart__close .wavepress-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.mini-cart__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* #wavepress-mini-cart: WooCommerce's widget styles also apply on shop pages and are
   fairly specific, so these rules start with the dialog's id */
#wavepress-mini-cart .widget_shopping_cart_content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The items scroll; the total and buttons stay at the bottom */
#wavepress-mini-cart .woocommerce-mini-cart {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-sm) var(--mini-cart-pad);
  list-style: none;
}

#wavepress-mini-cart .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: var(--space-2xl) var(--mini-cart-pad);
  text-align: center;
  color: var(--color-text-muted);
}

#wavepress-mini-cart .mini_cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 2rem var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  transition: opacity 0.2s ease;
}

#wavepress-mini-cart .mini_cart_item.is-removing {
  opacity: 0.4;
  pointer-events: none;
}

/* Product link wraps the image and name: image in column 1, name beside it */
#wavepress-mini-cart .mini_cart_item > a:not(.remove) {
  display: contents;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

#wavepress-mini-cart .mini_cart_item img {
  grid-row: 1 / span 3;
  float: none;
  margin: 0;
  box-shadow: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

#wavepress-mini-cart .mini_cart_item > a:not(.remove):hover {
  text-decoration: underline;
}

#wavepress-mini-cart .mini_cart_item .variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.4em;
  margin: 0.15rem 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

#wavepress-mini-cart .mini_cart_item .variation dt,
#wavepress-mini-cart .mini_cart_item .variation dd,
#wavepress-mini-cart .mini_cart_item .variation p {
  margin: 0;
}

#wavepress-mini-cart .mini_cart_item .quantity {
  grid-column: 2;
  margin-top: 0.15rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

#wavepress-mini-cart .mini_cart_item .quantity .amount {
  color: var(--color-text);
  font-weight: 600;
}

/* Remove (×) in the top-right corner of each item */
#wavepress-mini-cart a.remove {
  position: absolute;
  left: auto;
  top: var(--space-md);
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--color-text-muted) !important;   /* WooCommerce makes it red with !important */
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

#wavepress-mini-cart a.remove:hover,
#wavepress-mini-cart a.remove:focus-visible {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text) !important;
}

#wavepress-mini-cart .woocommerce-mini-cart__total,
#wavepress-mini-cart .woocommerce-mini-cart__buttons {
  margin: 0;
  padding-inline: var(--mini-cart-pad);
}

#wavepress-mini-cart .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
}

#wavepress-mini-cart .woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding-bottom: calc(var(--mini-cart-pad) + env(safe-area-inset-bottom));
}

#wavepress-mini-cart .woocommerce-mini-cart__buttons .btn {
  text-align: center;
}

/* Woo blocks its own UI while removing; keep it subtle */
#wavepress-mini-cart .blockUI.blockOverlay {
  background: var(--color-bg) !important;
}

/* ── Free shipping bar ─────────────────────────────────────────────────────── */

.wavepress-freeship[hidden],
.mini-cart__freeship:has(> .wavepress-freeship[hidden]) {
  display: none;
}

.wavepress-freeship {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  color: var(--color-text);
}

.wavepress-freeship__text {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
}

.wavepress-freeship__track {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
  overflow: hidden;
}

.wavepress-freeship__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 0.4s ease;
}

.wavepress-freeship.is-complete .wavepress-freeship__text {
  font-weight: 600;
}

.wavepress-btn-cartoon .wavepress-freeship {
  border: 2px solid var(--ink);
}

.wavepress-btn-cartoon .wavepress-freeship__track {
  border: 2px solid var(--ink);
  height: 0.85rem;
}

.mini-cart__freeship {
  padding: var(--space-sm) 0 0;
}

.mini-cart__freeship .wavepress-freeship {
  margin: 0;
}

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

/* ── Mobile action bar: Cart button count ──────────────────────────────────── */

.action-bar__link--cart {
  position: relative;
}

.action-bar__count {
  position: absolute;
  top: 0.45rem;
  left: calc(50% + 0.35rem);
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.action-bar__count[data-count="0"] {
  display: none;
}

/* ── "Added to cart" banner ───────────────────────────────────────────────────
   Covers the header (top and height set by shop.js), sliding down from behind its
   top edge and back up. Primary colour with the button text colour. */

.atc-banner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1002;  /* over the header (1000) and the skip link (1001) */
  overflow: hidden;
  pointer-events: none;
}

.atc-banner[hidden] {
  display: none;
}

.atc-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  height: 100%;
  padding: 0 var(--gutter);
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-body);
  pointer-events: auto;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.atc-banner.is-open .atc-banner__inner {
  transform: none;
}

.atc-banner__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.atc-banner__icon .wavepress-icon {
  width: 0.8rem;
  height: 0.8rem;
}

.atc-banner__text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atc-banner__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;  /* 44px tap target */
  padding: 0 var(--space-sm);
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.atc-banner__link:hover,
.atc-banner__link:focus-visible {
  color: inherit;
  text-decoration-thickness: 2px;
}

.atc-banner__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* Phones: a smaller line, and the name gives way before View cart does */
@media (max-width: 768px) {
  .atc-banner__inner {
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
  }

  .atc-banner__icon {
    width: 1.35rem;
    height: 1.35rem;
  }
}

.wavepress-btn-cartoon .atc-banner__inner {
  border-bottom: 3px solid var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .atc-banner__inner {
    opacity: 0;
    transform: none;
    transition: opacity 0.2s ease;
  }

  .atc-banner.is-open .atc-banner__inner {
    opacity: 1;
  }
}