/* theme-extra part 4/5 (CF-46105 split of theme-extra.css, rules unchanged and in original order): mobile buy bar, PDP polish, cart empty-state, WooCommerce Blocks cart + checkout theming. */
/* ---------- Mobile sticky purchase bar (P0, 2026-07-12) ----------
   Brings the buying action above the fold on mobile without touching the
   real add-to-cart form: shown only while that form is scrolled out of view
   (theme.js), bottom-anchored above iOS safe areas, own stacking layer so a
   future cookie-consent banner can sit above or below without collision. */
.mobile-buy-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: color-mix(in srgb, var(--oat-soft) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(46, 41, 37, .12);
  padding: .65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform .25s ease;
}
.mobile-buy-bar.is-visible { transform: translateY(0); }
/* GPT-5.6 audit (P2): don't cover the footer's final links — theme.js adds
   .at-footer while the footer is in the viewport. */
.mobile-buy-bar.at-footer { transform: translateY(110%); }
@media (max-width: 860px) {
  .single-product .mobile-buy-bar { display: block; }
}
.mobile-buy-bar__inner { display: flex; align-items: center; gap: .9rem; max-width: var(--maxw); margin: 0 auto; }
.mobile-buy-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mobile-buy-bar__name {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-buy-bar__price { font-family: var(--font-body); font-weight: 700; color: var(--clay-ink); font-size: 1.05rem; }
.mobile-buy-bar__cta {
  flex: 0 0 auto; min-height: 48px; min-width: 44px; padding: 0 1.3rem;
  background: var(--moss); color: #fff; border: 0; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; cursor: pointer;
}
.mobile-buy-bar__cta:hover, .mobile-buy-bar__cta:focus-visible { background: var(--moss-deep); }
.mobile-buy-bar__cta:active { background: var(--moss-deep); transform: scale(.98); }
.mobile-buy-bar__cta[disabled] { opacity: .75; cursor: default; }

/* Cart-count pulse (2026-07-12, QA audit) — small confirmation animation on
   the header badge whenever an add/remove changes the cart. Used by
   minicart.js now; the "capy-toast" floating banner this used to live
   alongside is REMOVED (2026-07-13) — the mini-cart drawer replaces it. */
.cart-count.pulse { animation: capy-pulse .45s ease 2; }
@keyframes capy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* ============================================================
   P2 UX fixes (2026-07-13): mobile PDP polish — a separate audit round from
   items 36/37/39 (P0/P1). Explicitly does NOT touch the gallery/mat frame
   CSS above (that block is a different session's active work, see
   capyonsen/AGENTS.md item 38) or the eco-data-block/typography (iterated
   3 rounds already, item 33/34/35).
   ============================================================ */

/* ---------- 1. Mobile tab -> accordion ----------
   Panels are built into <details>/<summary> by theme.js (moves the real WC
   panel nodes, doesn't clone them). Desktop stays exactly as before: the
   accordion summary is hidden and the wrapper adds no visual chrome, so
   ul.tabs + WooCommerce's own click-to-switch JS is the only thing a desktop
   visitor sees. Only <=768px switches on the accordion look/behavior. */
.pdp-accordion__item { border: 0; background: none; margin: 0; }
.pdp-accordion__summary { display: none; }
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
  .pdp-accordion { display: block; margin-top: .4rem; }
  .pdp-accordion__item {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--oat-soft); margin-bottom: .7rem; overflow: hidden;
  }
  .pdp-accordion__summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    cursor: pointer; list-style: none; min-height: 44px;
    padding: .85rem 1.1rem; font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem; color: var(--cocoa);
  }
  .pdp-accordion__summary::-webkit-details-marker { display: none; }
  .pdp-accordion__summary::after {
    content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--clay);
    transition: transform .2s ease; flex: 0 0 auto; line-height: 1;
  }
  .pdp-accordion__item[open] .pdp-accordion__summary::after { transform: rotate(45deg); }
  .pdp-accordion__summary:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
  .pdp-accordion__summary:active { background: var(--oat-deep); }
  /* Force display off WooCommerce's own inline per-tab style (set for the
     desktop tab-switch) so every item can be independently opened/closed
     here regardless of which tab WC considered "active" on load. */
  .pdp-accordion__item:not([open]) > .panel { display: none !important; }
  .pdp-accordion__item[open] > .panel { display: block !important; }
  .pdp-accordion .panel { padding-left: 1.1rem; padding-right: 1.1rem; padding-bottom: 1.1rem; }
}

/* ---------- 2. Section rhythm ----------
   The tabs/accordion block and the "Complete your ritual" cross-sell both sat
   directly on the plain --oat page background, back to back with the buy box
   above — a long flat stretch. Quiet, on-palette tone changes only (existing
   tokens, no new colors): the details/facts/reviews area gets a soft raised
   card, the recommendations area gets a slightly deeper card, so the eye gets
   a beat between "product details" and "recommendations" without any busy
   texture or a hard line. */
.single-product .woocommerce-tabs {
  background: transparent; border-radius: 0; border-top: 1px solid var(--line);
  padding: .65rem 0 0; margin-top: 1rem; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: .25rem 1.6rem; border-bottom: 1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: .85rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 0; border-bottom: 2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cocoa); border-bottom-color: var(--moss); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
}
.woocommerce div.product .product-top-grid .summary form.cart { margin: .65rem 0 .55rem; }
.woocommerce div.product .product-top-grid .summary .purchase-reassurance { font-size: .9rem; }
.woocommerce div.product .product-top-grid .summary .pdp-notify { margin: .65rem 0 .55rem; padding: .85rem; }

.complete-ritual {
  background: var(--oat-deep); border-radius: var(--radius);
  padding: 2.2rem clamp(1.2rem, 4vw, 2.5rem) 2.4rem; margin-top: 2.5rem; border-top: 0;
}

/* ---------- 3. Gallery zoom/magnifier control discoverability ----------
   WooCommerce's own trigger (a plain unicode glyph, default styling from
   woocommerce-photoswipe.css) reads as a pale, barely-visible mark on top of
   the product photo. Does NOT touch .product-gallery-frame or
   .woocommerce-product-gallery__image (out of scope — active photo work,
   item 38) — this targets only the trigger control itself, a separate
   element layered on top. */
.woocommerce-product-gallery__trigger {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: flex !important; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cocoa) 78%, transparent) !important;
  border-radius: 50%; box-shadow: var(--shadow-lift);
  opacity: 1 !important; color: #fff !important; font-size: 1.1rem; line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.woocommerce-product-gallery__trigger:hover {
  background: var(--cocoa) !important; transform: scale(1.06);
}
.woocommerce-product-gallery__trigger:active { transform: scale(.96); }
.woocommerce-product-gallery__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oat) 90%, transparent), 0 0 0 5px var(--clay);
}
.woocommerce-product-gallery__trigger img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* ---------- 4. Related-products ("Complete your ritual") polish ----------
   Ritual-order context already existed (the .product-kicker "Ritual step N"
   pill, functions.php capyonsen_merch_map). Added: a concise per-card benefit
   line reusing each product's own existing short description (real approved
   copy, same text used as that product's own PDP lead line — nothing
   invented), and — only where real bundle-pricing data confirms an actual
   saving (computed live from WC prices, see capyonsen_complete_ritual_module)
   — a bundle-saving note. Kept visually secondary to the primary buy box:
   small/muted type, no competing button styling. */
.ritual-card-benefit {
  font-size: .82rem; color: var(--muted); margin: .2rem 0 .6rem; line-height: 1.4;
}
.ritual-bundle-note {
  display: block; width: fit-content; margin: 1.6rem auto 0; max-width: 46em; text-align: center;
  font-size: .88rem; color: var(--muted); background: var(--oat-soft);
  border-radius: 999px; padding: .65rem 1.3rem;
}
.ritual-bundle-note a { color: var(--clay-ink); font-weight: 600; }

/* Branded Cart empty-state (2026-07-13, sitewide QA audit — item 5): the default
   WooCommerce-Blocks empty cart was unstyled generic copy with no way back into the
   catalogue. Cart and Checkout share this markup — Woo redirects an empty Checkout to
   /cart/ by default, so this is the only empty-state surface that needs branding. */
.capy-empty-cart { text-align: center; padding-block: 1rem; }
.capy-empty-cart .wc-block-cart__empty-cart__title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--text);
}
.capy-empty-cart-sub { color: var(--muted); margin-top: -.4rem; margin-bottom: 1.4rem; }
.capy-empty-cart .wp-block-buttons { margin-bottom: 1.8rem; }
.capy-empty-cart .wp-block-woocommerce-product-category ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin-top: 1.2rem;
}
@media (max-width: 720px) { .capy-empty-cart .wp-block-woocommerce-product-category ul.products { grid-template-columns: 1fr; } }

/* ---------- WooCommerce Blocks cart + checkout: brand theming (GPT-5.6
   audit, P1 — beyond the primary button these screens read as a stock
   plugin after a highly branded shop). Scope: inputs, panels, headings,
   focus/error states, coupon controls. ---------- */

/* Form fields — oat surfaces, brand line, pill-adjacent radius */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-select .components-custom-select-control__button,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
  background: var(--oat-soft) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--cocoa) !important;
  font-family: var(--font-body) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox input:focus {
  border-color: var(--clay) !important;
  box-shadow: 0 0 0 1px var(--clay) !important;
  outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label {
  color: var(--muted) !important; font-family: var(--font-body) !important;
}

/* Step + section headings in Fraunces */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wc-block-cart__totals-title {
  font-family: var(--font-display) !important;
  font-weight: 550 !important;
  color: var(--cocoa) !important;
  letter-spacing: -.01em;
  text-transform: none !important;
}
.wc-block-components-checkout-step__description { color: var(--muted) !important; }

/* Order summary / totals panel as a raised oat card */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart .wc-block-cart__totals-wrapper {
  background: var(--oat-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.wc-block-components-totals-wrapper { border-top-color: var(--line) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-display) !important; color: var(--cocoa) !important;
}

/* Buttons — primary clay, consistent radius/hover with the shop */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--clay) !important; color: var(--cocoa) !important;
  border-radius: 999px !important; border: 0 !important;
  font-family: var(--font-body) !important; font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .15s ease;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--clay-ink) !important; color: #fff !important; transform: translateY(-1px);
}
.wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid var(--cocoa) !important; outline-offset: 2px !important;
}

/* Coupon + inline links */
.wc-block-components-totals-coupon-link,
.wc-block-components-express-payment-continue-rule,
.wc-block-checkout__terms a,
.wp-block-woocommerce-cart a:not(.wc-block-components-button) {
  color: var(--clay-ink);
}
.wc-block-components-totals-coupon__button {
  border-radius: 999px !important; border: 1.5px solid var(--cocoa) !important;
  color: var(--cocoa) !important; background: transparent !important; font-weight: 600 !important;
}
.wc-block-components-totals-coupon__button:hover { background: var(--cocoa) !important; color: var(--oat) !important; }

/* Validation / error states — keep them visible but on-brand */
.wc-block-components-validation-error p { color: #B3492F !important; }
.wc-block-components-validation-error,
.has-error .wc-block-components-text-input input {
  border-color: #B3492F !important;
}
.wc-block-components-notice-banner.is-error { border-radius: var(--radius-sm); }
.wc-block-components-notice-banner.is-success { border-radius: var(--radius-sm); }

/* Radio/checkbox accents */
.wc-block-components-radio-control__option input[type="radio"]:checked,
.wc-block-components-checkbox input[type="checkbox"]:checked {
  accent-color: var(--clay);
}