/* ============================================================
   Kaffeparken — brand skin for the WooCommerce pages
   ------------------------------------------------------------
   The homepage is ours. The shop, product, cart and checkout are
   Botiga's, and they looked like a different company.

   This does NOT replace any template. It restyles what Botiga
   already renders, so a WooCommerce or Botiga update cannot break
   a template override we do not have.

   IMPORTANT — what this targets and why:

   Everything here hangs off WOOCOMMERCE CORE classes — .product,
   .summary, .price, .variations, .single_add_to_cart_button,
   .woocommerce-tabs and so on. Those are part of WooCommerce's
   documented markup and are stable across themes and versions.

   It deliberately does NOT target Botiga's own class names. Those
   are internal to a third-party theme, they are not documented,
   and a selector written against one is a selector that breaks on
   an update with no warning and no error.

   Consequence: a few Botiga chrome elements are reached by element
   and role instead, and some are left alone on purpose. Better a
   page that is 90% ours and stays that way than 100% ours until
   the next theme update.
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
/* The same values as site/css/style.css. Duplicated rather than
   imported because this file is enqueued on pages that never load
   the homepage stylesheet — and a token that resolves to nothing
   silently paints black on black. */
.woocommerce, .woocommerce-page,
body.woocommerce, body.woocommerce-page {
  --kp-pink:      #AD4E72;
  --kp-pink-soft: #F3AFCB;
  --kp-pink-dark: #A34868;
  --kp-cream:     #FAF6F1;
  --kp-brown-600: #6B4226;
  --kp-brown-900: #4D280A;
  --kp-gold:      #975B23;
  --kp-bg:        #FAF6F1;
  --kp-card:      #FFFFFF;
  --kp-text:      #4D280A;
  --kp-muted:     #7A6357;
  --kp-border:    #E5DDD4;
  --kp-shadow:    rgba(77, 40, 10, .10);
  --kp-radius:    .5rem;
  --kp-radius-lg: 1rem;
  --kp-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --kp-display:   'Georgia', 'Times New Roman', serif;
}

body.woocommerce, body.woocommerce-page {
  background: var(--kp-bg);
  color: var(--kp-text);
  font-family: var(--kp-font);
}

/* --- Typography --------------------------------------------- */
.woocommerce div.product .product_title,
.woocommerce-page h1, .woocommerce-page h2,
.woocommerce div.product h2 {
  font-family: var(--kp-display);
  color: var(--kp-text);
  line-height: 1.15;
  text-wrap: balance;
}
.woocommerce div.product .product_title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }

/* --- Price -------------------------------------------------- */
/* The price is the second thing read after the name, so it gets the
   display face and tabular figures — a price that shifts width as
   the variation changes reads as the page glitching. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--kp-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  color: var(--kp-text);
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price del { color: var(--kp-muted); opacity: .7; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--kp-pink); }

/* --- Buttons ------------------------------------------------ */
/* One shape for every button WooCommerce renders, so Add to cart,
   Update basket and Place order stop looking like three different
   sites. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--kp-pink);
  color: #fff;
  border: none;
  border-radius: var(--kp-radius);
  font-family: var(--kp-font);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  min-height: 48px;              /* thumb-sized; the old button was not */
  box-shadow: 0 2px 10px var(--kp-shadow);
  transition: background .2s ease, transform .2s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--kp-pink-dark);
  color: #fff;
  transform: translateY(-1px);
}
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled[disabled] {
  background: var(--kp-border);
  color: var(--kp-muted);
  box-shadow: none;
}

/* The single add-to-cart is the page's whole job — it gets full
   width on a phone rather than sharing a line with the quantity. */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
  font-size: 1rem;
  padding: 1rem 2rem;
}

/* --- Variation selects -------------------------------------- */
/* Size, Grind and Roast Profile are three real decisions. They were
   rendering as bare browser selects, which is what made the page
   feel unfinished next to the homepage. */
.woocommerce div.product form.cart .variations {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-lg);
  background: var(--kp-card);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.woocommerce div.product form.cart .variations label {
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kp-muted);
}
.woocommerce div.product form.cart .variations select {
  width: 100%;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 2px solid var(--kp-border);
  border-radius: var(--kp-radius);
  background: var(--kp-bg);
  color: var(--kp-text);
  font-family: var(--kp-font);
  font-size: 1rem;
  transition: border-color .2s ease;
}
.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--kp-pink);
  outline: 3px solid rgba(173, 78, 114, .25);
  outline-offset: 1px;
}
.woocommerce div.product form.cart .reset_variations {
  color: var(--kp-pink);
  font-size: .8125rem;
  font-weight: 600;
}

/* --- Quantity ----------------------------------------------- */
.woocommerce .quantity .qty {
  min-height: 48px;
  border: 2px solid var(--kp-border);
  border-radius: var(--kp-radius);
  background: var(--kp-card);
  color: var(--kp-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* --- Tabs --------------------------------------------------- */
/* Description and Additional information. The pasted description
   lives in here, so it has to read like the homepage does. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--kp-border);
  padding-left: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 1.5rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--kp-font);
  font-weight: 600;
  color: var(--kp-muted);
  padding: .85rem 0;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--kp-text);
  border-bottom-color: var(--kp-pink);
}

/* The description body — this is where our pasted HTML renders. */
.woocommerce div.product .woocommerce-Tabs-panel {
  max-width: 42rem;              /* ~65 characters; the old width ran long */
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--kp-text);
}
.woocommerce div.product .woocommerce-Tabs-panel h3 {
  font-family: var(--kp-display);
  font-size: 1.5rem;
  margin-top: 2.25rem;
  color: var(--kp-text);
}
.woocommerce div.product .woocommerce-Tabs-panel p { margin-top: 1rem; }
.woocommerce div.product .woocommerce-Tabs-panel ul {
  margin: 1rem 0 0 1.25rem;
  list-style: disc;
}
.woocommerce div.product .woocommerce-Tabs-panel li { margin-top: .5rem; }
.woocommerce div.product .woocommerce-Tabs-panel strong { color: var(--kp-brown-600); }

/* --- Product image ------------------------------------------ */
.woocommerce div.product div.images img {
  border-radius: var(--kp-radius-lg);
  box-shadow: 0 8px 30px var(--kp-shadow);
}

/* --- Breadcrumb, meta --------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  font-size: .8125rem;
  color: var(--kp-muted);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--kp-pink); }
.woocommerce div.product .product_meta {
  font-size: .8125rem;
  color: var(--kp-muted);
  border-top: 1px solid var(--kp-border);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* --- Shop / catalogue cards --------------------------------- */
.woocommerce ul.products li.product {
  background: var(--kp-card);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-lg);
  padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--kp-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--kp-display);
  color: var(--kp-text);
}
.woocommerce ul.products li.product .price { color: var(--kp-text); }
.woocommerce span.onsale {
  background: var(--kp-pink);
  color: #fff;
  border-radius: 999px;
}

/* --- Notices ------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--kp-pink);
  background: var(--kp-card);
  color: var(--kp-text);
  border-radius: var(--kp-radius);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--kp-pink); }

/* --- Links -------------------------------------------------- */
.woocommerce a:not(.button) { color: var(--kp-pink); }
.woocommerce a:not(.button):hover { color: var(--kp-pink-dark); }

/* --- Dark theme --------------------------------------------- */
/* The homepage follows Malmö's clock and stamps data-theme on <html>.
   head-gate.js does that on every page it runs on, so if the shop
   pages ever load it, these keep the two in step. Tokens only — the
   rules above never name a colour directly. */
:root[data-theme="dark"] .woocommerce,
:root[data-theme="dark"] .woocommerce-page,
:root[data-theme="dark"] body.woocommerce {
  --kp-pink:   #E79BB8;
  --kp-bg:     #1B0F05;
  --kp-card:   #261708;
  --kp-text:   #F4EDE6;
  --kp-muted:  #A69084;
  --kp-border: #3A2614;
  --kp-shadow: rgba(0, 0, 0, .5);
}

/* --- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce a.button, .woocommerce button.button { transition: none; }
  .woocommerce ul.products li.product:hover,
  .woocommerce a.button:hover, .woocommerce button.button:hover { transform: none; }
}

/* --- Announcement bar (shop pages) -------------------------- */
/* Injected by functions.php on wp_body_open. Prefixed kp- so it can
   never collide with Botiga's own announcement feature, which has its
   own Customizer setting and may be switched on at the same time. */
.kp-announce {
  position: relative;
  z-index: 5;
  height: 2.1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--kp-brown-900, #4D280A);
  color: #FAF6F1;
  font-family: var(--kp-font);
  font-size: .8125rem;
  letter-spacing: .04em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kp-announce__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  padding-left: 3rem;
  animation: kp-announce-scroll 46s linear infinite;
}
.kp-announce__item { white-space: nowrap; }
/* A dot between claims, drawn rather than typed so it never wraps
   onto its own line. */
.kp-announce__item::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 3rem;
  border-radius: 50%;
  background: #F3AFCB;
  vertical-align: middle;
}
.kp-announce:hover .kp-announce__track,
.kp-announce:focus-within .kp-announce__track { animation-play-state: paused; }

@keyframes kp-announce-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kp-announce__track { animation: none; }
}