/* Dictionary of Truth (DoT) Components
   Homepage is canonical.
   Do not add raw values. Add tokens first in dot.tokens.css.
*/

/* Base typography alignment to Divi globals */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--c-text);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--c-text);
  line-height: var(--lh-heading);
}

/* Links */
.link,
a {
  color: var(--c-link);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}

.link:hover,
a:hover {
  color: var(--c-link);
}

/* Buttons */
.btn,
.et_pb_button,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 500;
  line-height: 1.7 !important;
  border-radius: var(--radius-md);
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
  background: transparent;
  padding: 0.3em 1em;
  transition: all var(--dur-1) var(--ease-standard);
}

.btn:hover,
.et_pb_button:hover,
.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page input.button:hover {
  background: rgba(0,0,0,0.05);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-contrast);
}

.btn--secondary {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-secondary-contrast);
}

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}

.btn--lg { font-size: var(--fs-400); padding: 0.45em 1.2em; }
.btn--sm { font-size: var(--fs-200); padding: 0.2em 0.8em; }

/* Sections / containers */
.section,
.et_pb_section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section--spacious { padding-top: var(--space-10); padding-bottom: var(--space-10); }

.container,
.et_pb_row:not([class*="et_flex_column"]) {
  width: var(--container-width);
  max-width: var(--container-max);
}

/* Cards */
.card {
  border: var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}

.card--soft { box-shadow: var(--shadow-2); }
.card--elevated { box-shadow: var(--shadow-3); }

.card:hover {
  border-color: var(--c-border);
  transform: translateY(-2px);
}

/* Grid contracts */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Form contract */
.field { margin-bottom: var(--space-4); }
.field__label { display: block; margin-bottom: var(--space-2); color: var(--c-text); }
.field__input,
input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  border: var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  padding: var(--space-3) var(--space-4);
}

/* Fix double arrow on WooCommerce product variation selects.
   Woo's own woocommerce.css adds an SVG arrow at 0,4,1 specificity.
   gallery-woo.css adds another at 0,2,1. Combined background shorthand
   at higher specificity (0,5,1) ensures a single arrow wins. */
.woocommerce.single-product div.product form.cart .variations select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  background-size: 12px auto !important;
  padding: 10px 36px 10px 14px !important;
}

/* Hero contract */
.hero { text-align: center; }
.hero__title { font-size: var(--h1); letter-spacing: 0.2em; text-transform: uppercase; }
.hero__sub { color: var(--c-muted); max-width: 900px; margin: 0 auto; }

/* Apply DoT to existing custom modules already in use */
.page-id-2454 .sw-artwork-chooser__title { font-family: var(--font-heading) !important; color: var(--c-text) !important; }
.page-id-2454 .sw-artwork-chooser__intro { color: var(--c-muted) !important; }
.page-id-2454 .sw-artwork-card,
.page-id-2454 .sw-artwork-mini-card { border: var(--border-1) !important; background: var(--c-surface) !important; }
.page-id-2454 .sw-artwork-card__cta,
.page-id-2454 .sw-artwork-mini-card__cta { color: var(--c-link) !important; border-bottom: 1px solid var(--c-link) !important; }

.tax-product_cat .sw-archive-title,
.tax-product_cat .sw-archive-header .sw-archive-title {
  color: var(--c-text) !important;
}

.tax-product_cat nav.woocommerce-breadcrumb,
.single-product .sw-product-breadcrumb {
  color: var(--c-muted) !important;
  font-family: var(--font-body);
}