/*
 * Shop pages (phase 8.4): one-link product cards, the sticky buy bar on product pages,
 * price notes and the order status page. Linked only on shop pages
 * (templates/pages/_shop_assets.html); the older shop rules stay in site.css.
 */

/* ---------- Cards: the title link covers the whole card (one link, one accessible name) ---------- */
.shop-card > .shop-card-title {
  /* static, so the link's ::after is placed against the card (position: relative) */
  position: static;
  margin: 0;
}

.shop-card-link {
  color: inherit;
  text-decoration: none;
}

.shop-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-lg);
}

/* The focus ring goes round the whole card (inside it: the card clips overflow). */
.shop-card-link:focus-visible {
  outline: none;
}

.shop-card-link:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

@media (hover: hover) {
  .shop-card:hover .shop-card-link {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.shop-card-status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

/* ---------- Prices ---------- */
.shop-price-note {
  margin: 0;
  font-size: var(--fs-sm);
  hyphens: manual;
}

.shop-detail-head + .shop-price-note {
  margin-top: var(--space-2);
}

/* ---------- Product page buy block (#buy, target of the sticky bar) ---------- */
.shop-buy {
  display: grid;
  gap: 12px;
}

/* ---------- Sticky buy bar: phones only, above the dock, hidden while #buy is on screen ---------- */
.shop-buy-bar {
  display: none;
}

@media (max-width: 860px) {
  .shop-buy-bar {
    position: fixed;
    inset-inline: calc(8px + var(--safe-left)) calc(8px + var(--safe-right));
    bottom: var(--above-dock);
    /* under the dock (92) and the cookie banner (90) */
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* 7 + 48 (button) + 7 + 2 (border) = 64 px */
    height: 64px;
    padding-block: 7px;
    padding-inline: var(--space-4) 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }

  .shop-buy-bar.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
  }

  .shop-buy-bar__price {
    min-width: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .shop-buy-bar__btn {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: var(--space-6);
  }

  /* The page (footer included) ends above the bar: nothing is left under it. */
  body:has(.shop-buy-bar) .container {
    padding-bottom: calc(var(--above-dock) + 64px + var(--space-4));
  }

  html:has(.shop-buy-bar) {
    scroll-padding-bottom: calc(var(--above-dock) + 64px + var(--cookie-ui-h) + var(--space-2));
  }

  /* Same slot as the cookie banner / notice; the dock hides while a form field is edited. */
  .cookie-banner-open .shop-buy-bar,
  .cookie-notice-open .shop-buy-bar,
  body.is-mobile-form-editing .shop-buy-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-buy-bar {
    transition: none;
  }
}

/* ---------- Order status page ---------- */
.order-status__id {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}