/*
Theme Name:   Dissolve Blocksy Child
Theme URI:    https://dissolve-release-peace.com
Description:  Dissolve design language applied to Blocksy + WooCommerce.
              Cormorant Garamond + Jost typography, plum/cream/gold palette.
              Visual continuity layer between hand-coded pages and commerce surfaces.
Author:       Dissolve Movement LTDA
Author URI:   https://dissolve-release-peace.com
Template:     blocksy
Version:      1.0.0
Text Domain:  dissolve-blocksy-child
*/


/* =============================================================================
   1. DESIGN TOKENS
   Mirrors the locked Dissolve homepage v4 design system.
   Single source of truth — every override below references these variables.
   ============================================================================= */

:root {
  /* Plum tier */
  --d-plum:        #3A1F2E;
  --d-plum-deep:   #28131F;

  /* Brown tier */
  --d-brown:       #3D2A1F;
  --d-brown-deep:  #2B1C13;

  /* Cream tier */
  --d-cream:       #F4EBDC;
  --d-cream-warm:  #E8DCC5;
  --d-cream-rich:  #EFE1C9;

  /* Gold tier */
  --d-gold:        #C9A66B;
  --d-gold-bright: #D9B778;
  --d-gold-deep:   #A6864D;

  /* Taupe tier */
  --d-taupe:       #2A1D15;
  --d-taupe-mid:   #4B3A2D;

  /* Typography */
  --d-font-heading: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --d-font-body:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --d-fs-base:      1.0625rem;   /* 17px body */
  --d-fs-sm:        0.9375rem;   /* 15px small */
  --d-fs-lg:        1.25rem;     /* 20px lead */
  --d-fs-h1:        clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --d-fs-h2:        clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --d-fs-h3:        clamp(1.375rem, 1.5vw + 1rem, 2rem);
  --d-fs-h4:        1.375rem;

  /* Letter spacing */
  --d-tracking-tight: -0.01em;
  --d-tracking-body:   0;
  --d-tracking-wide:   0.04em;
  --d-tracking-eyebrow: 0.18em;

  /* Line heights */
  --d-lh-tight:  1.15;
  --d-lh-body:   1.65;
  --d-lh-loose:  1.8;

  /* Spacing scale */
  --d-space-2xs: 0.375rem;
  --d-space-xs:  0.625rem;
  --d-space-sm:  1rem;
  --d-space-md:  1.5rem;
  --d-space-lg:  2.5rem;
  --d-space-xl:  4rem;
  --d-space-2xl: 6rem;

  /* Borders */
  --d-radius-sm: 2px;
  --d-radius-md: 4px;
  --d-radius-lg: 8px;
  --d-border-thin: 1px solid var(--d-gold-deep);

  /* Transitions */
  --d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-dur:  280ms;
}


/* =============================================================================
   2. GLOBAL TYPOGRAPHY (commerce surfaces only)
   Scoped to body.woocommerce, body.woocommerce-page, and FunnelKit pages
   so we don't accidentally restyle Blocksy's homepage rendering.
   ============================================================================= */

body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body[class*="wcfn-"],
body[class*="funnelkit-"] {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-base);
  line-height: var(--d-lh-body);
  letter-spacing: var(--d-tracking-body);
  color: var(--d-taupe);
  background-color: var(--d-cream);
}

body.woocommerce h1,
body.woocommerce h2,
body.woocommerce h3,
body.woocommerce h4,
body.woocommerce-page h1,
body.woocommerce-page h2,
body.woocommerce-page h3,
body.woocommerce-page h4,
body.woocommerce-cart h1,
body.woocommerce-cart h2,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-account h1,
body.woocommerce-account h2 {
  font-family: var(--d-font-heading);
  font-weight: 500;
  letter-spacing: var(--d-tracking-tight);
  line-height: var(--d-lh-tight);
  color: var(--d-plum);
}

body.woocommerce h1,
body.woocommerce-page h1 { font-size: var(--d-fs-h1); }
body.woocommerce h2,
body.woocommerce-page h2 { font-size: var(--d-fs-h2); }
body.woocommerce h3,
body.woocommerce-page h3 { font-size: var(--d-fs-h3); }
body.woocommerce h4,
body.woocommerce-page h4 { font-size: var(--d-fs-h4); }


/* =============================================================================
   3. SINGLE PRODUCT PAGE
   The most visible commerce surface. Course landing where visitors
   click "Begin Dissolve" / "Add to cart".
   ============================================================================= */

.woocommerce div.product {
  padding: var(--d-space-lg) 0;
}

.woocommerce div.product .product_title {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h1);
  font-weight: 500;
  color: var(--d-plum);
  letter-spacing: var(--d-tracking-tight);
  line-height: var(--d-lh-tight);
  margin: 0 0 var(--d-space-md);
}

/* Price — the moment of decision. Make it feel intentional, not loud. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--d-font-heading);
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--d-gold-deep);
  letter-spacing: var(--d-tracking-tight);
  margin: var(--d-space-md) 0;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--d-taupe-mid);
  opacity: 0.6;
  font-size: 0.75em;
  margin-right: var(--d-space-xs);
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  background: transparent;
  text-decoration: none;
  color: var(--d-gold-deep);
}

/* Short description — the locked v4 voice copy lands here. */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-lg);
  line-height: var(--d-lh-loose);
  color: var(--d-taupe);
  margin: var(--d-space-lg) 0;
  max-width: 60ch;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
  margin-bottom: var(--d-space-md);
}

/* Product gallery — soft border, restrained shadow. */
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--d-radius-md);
  overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image {
  border-radius: var(--d-radius-md);
}

/* Tabs (Description / Reviews) — restyled away from the WooCommerce default tab look */
.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--d-space-2xl);
  border-top: var(--d-border-thin);
  padding-top: var(--d-space-xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: var(--d-border-thin);
  padding: 0;
  margin: 0 0 var(--d-space-lg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 var(--d-space-md) -1px 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(--d-font-body);
  font-size: var(--d-fs-sm);
  font-weight: 500;
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--d-taupe-mid);
  padding: var(--d-space-sm) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
  color: var(--d-plum);
  border-bottom-color: var(--d-gold);
}

.woocommerce div.product .woocommerce-tabs .panel {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-base);
  line-height: var(--d-lh-body);
  color: var(--d-taupe);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h3);
  color: var(--d-plum);
  margin-bottom: var(--d-space-md);
}

/* Stock status — quiet confidence */
.woocommerce div.product .stock {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-sm);
  letter-spacing: var(--d-tracking-wide);
  color: var(--d-gold-deep);
}

.woocommerce div.product .stock.out-of-stock {
  color: var(--d-brown-deep);
}


/* =============================================================================
   4. ADD TO CART BUTTON ("Begin Dissolve")
   The single most important conversion surface.
   Restrained, gold, confident — never loud.
   ============================================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-sm);
  font-weight: 500;
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;

  background-color: var(--d-plum);
  color: var(--d-cream);
  border: 1px solid var(--d-plum);
  border-radius: var(--d-radius-sm);

  padding: 0.95rem 2.25rem;
  min-height: auto;

  cursor: pointer;
  transition: background-color var(--d-dur) var(--d-ease),
              color var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              transform var(--d-dur) var(--d-ease);
  text-shadow: none;
  box-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--d-gold-deep);
  color: var(--d-cream);
  border-color: var(--d-gold-deep);
  transform: translateY(-1px);
}

/* Quantity selector — subtle, takes a back seat to the CTA */
.woocommerce .quantity .qty {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-base);
  border: 1px solid var(--d-gold-deep);
  border-radius: var(--d-radius-sm);
  background-color: var(--d-cream-warm);
  color: var(--d-plum);
  padding: 0.85rem var(--d-space-sm);
  min-height: auto;
}

.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--d-plum);
}


/* =============================================================================
   5. MINI CART (slide-out / dropdown)
   Visible across the site once a course is added. Has to feel like Dissolve.
   ============================================================================= */

.woocommerce ul.cart_list,
.woocommerce ul.product_list_widget,
.widget_shopping_cart .cart_list {
  background-color: var(--d-cream);
  font-family: var(--d-font-body);
  padding: var(--d-space-md);
}

.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li,
.widget_shopping_cart .cart_list li {
  padding: var(--d-space-md) 0;
  border-bottom: 1px solid var(--d-cream-warm);
}

.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a,
.widget_shopping_cart .cart_list li a {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h4);
  color: var(--d-plum);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: var(--d-tracking-tight);
}

.woocommerce ul.cart_list li .quantity,
.woocommerce ul.product_list_widget li .quantity {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-sm);
  color: var(--d-taupe-mid);
  letter-spacing: var(--d-tracking-wide);
}

.woocommerce ul.cart_list li .quantity .amount,
.woocommerce ul.product_list_widget li .quantity .amount {
  color: var(--d-gold-deep);
  font-weight: 500;
}

.widget_shopping_cart .total {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h3);
  color: var(--d-plum);
  border-top: var(--d-border-thin);
  padding-top: var(--d-space-md);
  margin-top: var(--d-space-md);
}

.widget_shopping_cart .total strong {
  font-weight: 500;
}

.widget_shopping_cart .total .amount {
  color: var(--d-gold-deep);
}

.widget_shopping_cart .buttons {
  margin-top: var(--d-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--d-space-sm);
}

.widget_shopping_cart .buttons a {
  display: block;
  text-align: center;
}


/* =============================================================================
   6. CART PAGE
   Where visitors land after clicking "View Cart". Prepares them for checkout.
   ============================================================================= */

.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart table.cart {
  background-color: var(--d-cream);
  border: var(--d-border-thin);
  border-radius: var(--d-radius-md);
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--d-font-body);
}

.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-cart table.cart th {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-sm);
  font-weight: 500;
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--d-taupe-mid);
  background-color: var(--d-cream-warm);
  padding: var(--d-space-md);
  border: none;
}

.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-cart table.cart td {
  padding: var(--d-space-md);
  border-top: 1px solid var(--d-cream-warm);
  font-family: var(--d-font-body);
  color: var(--d-taupe);
  vertical-align: middle;
}

.woocommerce-cart .woocommerce table.shop_table .product-name a,
.woocommerce-cart table.cart .product-name a {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h4);
  color: var(--d-plum);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: var(--d-tracking-tight);
}

.woocommerce-cart .woocommerce table.shop_table .product-name a:hover,
.woocommerce-cart table.cart .product-name a:hover {
  color: var(--d-gold-deep);
}

.woocommerce-cart .woocommerce table.shop_table .product-price,
.woocommerce-cart .woocommerce table.shop_table .product-subtotal,
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-lg);
  color: var(--d-gold-deep);
  font-weight: 500;
}

.woocommerce-cart .woocommerce table.shop_table .product-remove a.remove,
.woocommerce-cart table.cart .product-remove a.remove {
  background-color: transparent;
  color: var(--d-taupe-mid);
  font-size: 1.25rem;
  width: 28px;
  height: 28px;
  line-height: 26px;
  border: 1px solid var(--d-taupe-mid);
  border-radius: 50%;
  font-weight: 300;
}

.woocommerce-cart .woocommerce table.shop_table .product-remove a.remove:hover,
.woocommerce-cart table.cart .product-remove a.remove:hover {
  background-color: var(--d-plum);
  color: var(--d-cream);
  border-color: var(--d-plum);
}

/* Coupon row */
.woocommerce-cart .coupon {
  display: flex;
  gap: var(--d-space-sm);
  align-items: stretch;
}

.woocommerce-cart .coupon input.input-text {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-base);
  border: 1px solid var(--d-gold-deep);
  border-radius: var(--d-radius-sm);
  padding: 0.85rem var(--d-space-sm);
  background-color: var(--d-cream-warm);
  color: var(--d-plum);
}

.woocommerce-cart .coupon input.input-text:focus {
  outline: none;
  border-color: var(--d-plum);
}

/* Cart totals box (right column) */
.woocommerce-cart .cart_totals {
  background-color: var(--d-cream-warm);
  padding: var(--d-space-lg);
  border-radius: var(--d-radius-md);
  border: var(--d-border-thin);
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h3);
  color: var(--d-plum);
  margin: 0 0 var(--d-space-md);
}

.woocommerce-cart .cart_totals table.shop_table {
  background-color: transparent;
  border: none;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background-color: transparent;
  padding: var(--d-space-sm) 0;
  border: none;
  border-bottom: 1px solid var(--d-cream-rich);
}

.woocommerce-cart .cart_totals .order-total .amount {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h3);
  color: var(--d-gold-deep);
  font-weight: 500;
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding-top: var(--d-space-md);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--d-plum);
  color: var(--d-cream);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--d-gold-deep);
}


/* =============================================================================
   7. WOOCOMMERCE NOTICES
   Success / error / info messages need to feel like part of Dissolve, not bolted on.
   ============================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-base);
  background-color: var(--d-cream-warm);
  color: var(--d-plum);
  border: none;
  border-left: 3px solid var(--d-gold);
  border-radius: var(--d-radius-sm);
  padding: var(--d-space-md) var(--d-space-lg);
  box-shadow: none;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--d-gold-deep);
}

.woocommerce-error {
  border-left-color: var(--d-brown);
}

.woocommerce-error::before {
  color: var(--d-brown);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  background-color: var(--d-plum);
  color: var(--d-cream);
  margin-left: var(--d-space-md);
}


/* =============================================================================
   8. RELATED PRODUCTS / UPSELLS
   Bottom of product page. Soft, not pushy.
   ============================================================================= */

.woocommerce .related,
.woocommerce .upsells {
  margin-top: var(--d-space-2xl);
  padding-top: var(--d-space-xl);
  border-top: var(--d-border-thin);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h3);
  color: var(--d-plum);
  text-align: center;
  margin-bottom: var(--d-space-lg);
  letter-spacing: var(--d-tracking-tight);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--d-font-heading);
  font-size: var(--d-fs-h4);
  color: var(--d-plum);
  font-weight: 500;
  letter-spacing: var(--d-tracking-tight);
}

.woocommerce ul.products li.product .price {
  font-family: var(--d-font-heading);
  color: var(--d-gold-deep);
  font-size: var(--d-fs-lg);
}


/* =============================================================================
   9. RESPONSIVE — Mobile commerce surfaces
   ============================================================================= */

@media (max-width: 768px) {
  .woocommerce div.product .product_title {
    font-size: 2rem;
  }

  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 1.5rem;
  }

  .woocommerce div.product .single_add_to_cart_button,
  .woocommerce a.button,
  .woocommerce button.button {
    width: 100%;
    padding: 1rem 1.5rem;
  }

  .woocommerce-cart .coupon {
    flex-direction: column;
  }

  .woocommerce-cart .cart_totals {
    margin-top: var(--d-space-lg);
  }
}