/* ============================================================
   HCM WooCommerce — Brand Skin
   ------------------------------------------------------------
   Goal: Apply HCM brand identity (fonts, colors, buttons) onto
   WooCommerce default UI. NO layout overrides. NO !important
   structural rules. WC's own templates and CSS own the layout
   so plugin updates won't break the site.
   ============================================================ */

/* ── Page background — give WC pages the brand page tone ─── */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received {
  background: var(--color-page-bg, #f8f0fa);
}

/* ── Page container — give WC content a comfortable outer gutter ──
   WC's cart/checkout blocks render edge-to-edge by default. We give the
   page.php <main> wrapper a max-width + padding so content doesn't sit
   flush against the viewport edge. WC's internal layout untouched. */
.woocommerce-cart .page-shell,
.woocommerce-checkout .page-shell,
.woocommerce-account .page-shell,
.woocommerce-order-received .page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .woocommerce-cart .page-shell,
  .woocommerce-checkout .page-shell,
  .woocommerce-account .page-shell,
  .woocommerce-order-received .page-shell {
    padding: 32px 20px 60px;
  }
}

/* ── Order received (thank-you) — center the status + order summary row ──
   Covers both the block Order Confirmation markup and classic order_details.
   The classic list lays items out with float:left, so we force a centered
   flex row and cancel the float. */
.woocommerce-order-received .wc-block-order-confirmation-status,
.woocommerce-order-received .woocommerce-thankyou-order-received {
  text-align: center;
  margin-bottom: 32px;
  color: #189C7D;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list,
.woocommerce-order-received .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.woocommerce-order-received .woocommerce-order-overview li,
.woocommerce-order-received .wc-block-order-confirmation-summary-list li {
  float: none;
}

/* WC content typography uses body font + brand text color */
.woocommerce,
.woocommerce-page {
  font-family: var(--font-body);
  color: var(--color-text, #333333);
}

/* Scope heading font to WC content containers only (NOT body-level
   classes — those would change the footer headings too). */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-cart h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text, #333333);
}

/* ── Notices (success / error / info) ─────────────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--font-body);
  border-radius: 10px;
}
.woocommerce-message { border-left-color: #4caf50; }
.woocommerce-error   { border-left-color: #f44336; }
.woocommerce-info    { border-left-color: var(--color-purple, #9728b8); }

/* ── Form inputs — brand border + focus color ─────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--font-body);
  border-radius: 8px;
  border-color: #e0d0ea;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-purple, #9728b8);
  outline: none;
}

/* ── Buttons — brand gradient pill ────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  font-weight: 700;
  background-image: var(--gradient-btn-pill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border: 0;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.18s;
}
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before,
.woocommerce #place_order::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-btn-pill);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce #place_order::after {
  content: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  opacity: 0.86;
}

/* ── Primary CTA buttons — match the newsletter Subscribe button ──
   Targets both Place Order (checkout) and Proceed to Checkout (cart),
   block and classic variants. Style mirrors .newsletter-btn in main.css. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce #place_order {
  position: relative !important;
  isolation: isolate !important;
  flex-shrink: 0 !important;
  padding: 14px 36px !important;
  background-image: var(--gradient-btn-pill) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 200px;
  height: auto !important;
  transition: opacity 0.2s;
}
.wc-block-components-checkout-place-order-button::before,
.wc-block-cart__submit-button::before,
.wc-proceed-to-checkout .checkout-button::before,
.woocommerce #place_order::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px !important;
  background: var(--gradient-btn-pill) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  pointer-events: none;
}

.wc-block-components-checkout-place-order-button::after,
.wc-block-cart__submit-button::after,
.wc-proceed-to-checkout .checkout-button::after,
.woocommerce #place_order::after {
  content: none;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus-visible,
.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:focus-visible,
.woocommerce #place_order:hover,
.woocommerce #place_order:focus-visible {
  opacity: 0.88;
}

/* Separator line on top, then terms text (left) + Place Order button (right) on one row.
   The terms is a separate block above .wc-block-checkout__actions, so the button row is
   pulled up to overlap the terms' text band; matched min-heights keep them aligned. */
.wc-block-checkout__terms {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid #e2d6ea !important;
}
/* constrain just the text so it wraps to ~2 lines, leaving the right side clear for the button */
.wc-block-checkout__terms > * {
  max-width: 460px;
}
.wc-block-checkout__terms--with-separator::before,
.wc-block-checkout__terms--with-separator::after {
  display: none !important;
}
.wc-block-checkout__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 56px;
  margin-top: -44px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.wc-block-checkout__actions_row {
  flex: 0 0 auto;
  width: auto;
  margin: 0 !important;
  pointer-events: auto;
}

/* Right-align the Proceed to Checkout button — block cart + classic cart */
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit-container,
.wc-proceed-to-checkout {
  display: flex !important;
  justify-content: flex-end;
  width: 100%;
}

/* Tablet & below — stack the terms/button row (cancel the desktop overlap trick)
   so the text and button never collide in the narrow ~600–760px range. */
@media (max-width: 767px) {
  .wc-block-checkout__terms {
    min-height: 0;
    display: block;
  }
  .wc-block-checkout__terms > * { max-width: none; }
  .wc-block-checkout__actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    min-height: 0;
    margin-top: 16px !important;
    pointer-events: auto;
  }
}

/* Phone — full-width button (matches newsletter mobile spec 152x48) */
@media (max-width: 600px) {
  .wc-block-checkout__actions { align-items: stretch; }
  .wc-block-components-checkout-place-order-button,
  .wc-block-cart__submit-button,
  .wc-proceed-to-checkout .checkout-button,
  .woocommerce #place_order {
    width: 100% !important;
    min-width: 0;
    padding: 12px 24px !important;
  }
}

/* ── Links inside WC content ──────────────────────────────── */
.woocommerce a:not(.button) { color: var(--color-purple, #9728b8); }
.woocommerce a:not(.button):hover { opacity: 0.8; }

/* ── Remove duplicate per-item price under product name ───
   Block cart line items show: name + unit-price-under-name + total-column.
   Hide the unit-price-under-name; keep the total column. */
.wc-block-cart-item__prices,
.wc-block-components-order-summary-item__individual-prices {
  display: none !important;
}

/* ── Empty cart: vertically center the block in the viewport ──────
   The block sits inside WC's main content wrapper. Give it a viewport-
   height min and flex-center its contents so the sad-face + message +
   CTA sit in the middle of the page instead of pinned to the top. */
.wp-block-woocommerce-empty-cart-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height, 80px));
  border: 0;
  outline: 0;
}

/* ── Empty cart: swap the default WC sad-face for the mall cart icon ──
   WC renders the icon as a mask-image on the title's ::before; override
   just the mask so it keeps WC's sizing/positioning. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iX3gzNF8yX0NhcnQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNTAuMSAxOTkuNmMtNS41IDAtMTAgNC41LTEwIDEwczQuNSAxMCAxMCAxMCAxMC00LjUgMTAtMTAtNC41LTEwLTEwLTEwem0wIDBjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMjYwLjUtODMuMmMtMS4xLTEuMy0yLjgtMi4xLTQuNS0yLjFoLTQyMi4xbC0xMi45LTUzLjljLS42LTIuNi0zLTQuNS01LjctNC41aC01OS41Yy0zLjMuMS01LjkgMi43LTUuOSA1LjlzMi42IDUuOSA1LjkgNS45aDU0LjlsMTIuOSA1My43IDQyLjggMjU1LjhjLjUgMi44IDIuOSA0LjkgNS44IDQuOWgzNDEuMWMyLjkgMCA1LjMtMi4xIDUuOC00LjlsNDIuOC0yNTUuOWMuMi0xLjktLjMtMy42LTEuNC00Ljl6bS0yODIuMiA5My4yYzAtMTEuOSA5LjgtMjEuNyAyMS43LTIxLjdzMjEuNyA5LjggMjEuNyAyMS43LTkuNyAyMS43LTIxLjcgMjEuN2MtMTEuOSAwLTIxLjctOS44LTIxLjctMjEuN3ptMTEzIDk4LjRjLTMuMyAwLTUuOS0yLjYtNS45LTUuOSAwLTEzLjEtMy4zLTI1LjktNDMuMS0yNS45cy00My4xIDEyLjgtNDMuMSAyNS45YzAgMy4yLTIuNiA1LjktNS45IDUuOXMtNS45LTIuNi01LjktNS45Yy4yLTI2IDE3LjEtMzcuNiA1NS0zNy42czU0LjggMTEuNiA1NC44IDM3LjZjMCAzLjItMi42IDUuOS01LjkgNS45em0tNS4zLTc2LjdjLTEyIDAtMjEuNy05LjgtMjEuNy0yMS43czkuOC0yMS43IDIxLjctMjEuNyAyMS43IDkuOCAyMS43IDIxLjctOS43IDIxLjctMjEuNyAyMS43em0wLTMxLjdjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptLTc2IDEwYzAtNS41LTQuNS0xMC0xMC0xMHMtMTAgNC41LTEwIDEwIDQuNSAxMCAxMCAxMCAxMC00LjUgMTAtMTB6bS0zMi4zIDE4MmMtMTcuOCAwLTMyLjIgMTQuNS0zMi4yIDMyLjIgMCAxNy44IDE0LjUgMzIuMiAzMi4yIDMyLjJzMzIuMi0xNC41IDMyLjItMzIuMmMwLTE3LjgtMTQuNC0zMi4yLTMyLjItMzIuMnptMTMwIDBjLTE3LjggMC0zMi4yIDE0LjUtMzIuMiAzMi4yIDAgMTcuOCAxNC41IDMyLjIgMzIuMiAzMi4yczMyLjItMTQuNSAzMi4yLTMyLjJjMC0xNy44LTE0LjUtMzIuMi0zMi4yLTMyLjJ6bS0xMDcuNy0xOTJjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMCAwYy01LjUgMC0xMCA0LjUtMTAgMTBzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMC00LjUtMTAtMTAtMTB6bTg2IDBjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMCAwYy01LjUgMC0xMCA0LjUtMTAgMTBzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMC00LjUtMTAtMTAtMTB6Ii8+PC9zdmc+") !important;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iX3gzNF8yX0NhcnQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNTAuMSAxOTkuNmMtNS41IDAtMTAgNC41LTEwIDEwczQuNSAxMCAxMCAxMCAxMC00LjUgMTAtMTAtNC41LTEwLTEwLTEwem0wIDBjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMjYwLjUtODMuMmMtMS4xLTEuMy0yLjgtMi4xLTQuNS0yLjFoLTQyMi4xbC0xMi45LTUzLjljLS42LTIuNi0zLTQuNS01LjctNC41aC01OS41Yy0zLjMuMS01LjkgMi43LTUuOSA1LjlzMi42IDUuOSA1LjkgNS45aDU0LjlsMTIuOSA1My43IDQyLjggMjU1LjhjLjUgMi44IDIuOSA0LjkgNS44IDQuOWgzNDEuMWMyLjkgMCA1LjMtMi4xIDUuOC00LjlsNDIuOC0yNTUuOWMuMi0xLjktLjMtMy42LTEuNC00Ljl6bS0yODIuMiA5My4yYzAtMTEuOSA5LjgtMjEuNyAyMS43LTIxLjdzMjEuNyA5LjggMjEuNyAyMS43LTkuNyAyMS43LTIxLjcgMjEuN2MtMTEuOSAwLTIxLjctOS44LTIxLjctMjEuN3ptMTEzIDk4LjRjLTMuMyAwLTUuOS0yLjYtNS45LTUuOSAwLTEzLjEtMy4zLTI1LjktNDMuMS0yNS45cy00My4xIDEyLjgtNDMuMSAyNS45YzAgMy4yLTIuNiA1LjktNS45IDUuOXMtNS45LTIuNi01LjktNS45Yy4yLTI2IDE3LjEtMzcuNiA1NS0zNy42czU0LjggMTEuNiA1NC44IDM3LjZjMCAzLjItMi42IDUuOS01LjkgNS45em0tNS4zLTc2LjdjLTEyIDAtMjEuNy05LjgtMjEuNy0yMS43czkuOC0yMS43IDIxLjctMjEuNyAyMS43IDkuOCAyMS43IDIxLjctOS43IDIxLjctMjEuNyAyMS43em0wLTMxLjdjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptLTc2IDEwYzAtNS41LTQuNS0xMC0xMC0xMHMtMTAgNC41LTEwIDEwIDQuNSAxMCAxMCAxMCAxMC00LjUgMTAtMTB6bS0zMi4zIDE4MmMtMTcuOCAwLTMyLjIgMTQuNS0zMi4yIDMyLjIgMCAxNy44IDE0LjUgMzIuMiAzMi4yIDMyLjJzMzIuMi0xNC41IDMyLjItMzIuMmMwLTE3LjgtMTQuNC0zMi4yLTMyLjItMzIuMnptMTMwIDBjLTE3LjggMC0zMi4yIDE0LjUtMzIuMiAzMi4yIDAgMTcuOCAxNC41IDMyLjIgMzIuMiAzMi4yczMyLjItMTQuNSAzMi4yLTMyLjJjMC0xNy44LTE0LjUtMzIuMi0zMi4yLTMyLjJ6bS0xMDcuNy0xOTJjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMCAwYy01LjUgMC0xMCA0LjUtMTAgMTBzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMC00LjUtMTAtMTAtMTB6bTg2IDBjLTUuNSAwLTEwIDQuNS0xMCAxMHM0LjUgMTAgMTAgMTAgMTAtNC41IDEwLTEwLTQuNS0xMC0xMC0xMHptMCAwYy01LjUgMC0xMCA0LjUtMTAgMTBzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMC00LjUtMTAtMTAtMTB6Ii8+PC9zdmc+") !important;
}

/* ── Empty cart: hide the WC "dots" separator (··· above the CTA) ── */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  display: none !important;
}

/* ── Empty cart CTA ("Check our new events") ──────────────────────
   Mirrors the .newsletter-btn gradient look (text + ring pill) but sizes
   to its own text, so the two-word label never clips. Kept as its own
   class so .newsletter-btn (the footer Subscribe button) is untouched. */
.empty-cart-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 28px;
  background-image: var(--gradient-btn-pill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  border: 0;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.empty-cart-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-btn-pill);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.empty-cart-cta:hover,
.empty-cart-cta:focus-visible {
  opacity: 0.88;
}