/*
Theme Name: Heatwave Transfers
Theme URI: https://www.heatwavetransfers.ca
Author: Heatwave Transfers
Author URI: https://www.heatwavetransfers.ca
Description: A conversion-focused WooCommerce theme for Alberta custom DTF transfers and apparel decorators. Requires the Heatwave Core companion plugin for the gangsheet builder and apparel customizer.
Version: 1.6.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: heatwave-transfers
*/

:root {
  --hw-ink: #111113;
  --hw-paper: #fbfaf7;
  --hw-muted: #67646a;
  --hw-line: #e4e0dc;
  --hw-orange: #ff5a1f;
  --hw-orange-dark: #c83e0f;
  --hw-yellow: #ffd34e;
  --hw-purple: #7045c6;
  --hw-green: #b6e05a;
  --hw-radius: 18px;
  --hw-shadow: 0 18px 48px rgba(17, 17, 19, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hw-paper);
  color: var(--hw-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.hw-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.hw-skip-link { position: absolute; left: -9999px; }
.hw-skip-link:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 10px 14px; }
.hw-site-header { position: sticky; top: 0; z-index: 20; background: rgba(251,250,247,.93); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hw-line); }
.hw-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.hw-brand { text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: 10px; }
.hw-logo { display: block; width: 96px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.hw-logo--footer { width: 132px; height: 96px; }
.hw-brand .custom-logo-link { display: block; line-height: 0; }
.hw-brand .custom-logo { display: block; width: 96px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.hw-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 3px; background: var(--hw-orange); color: #fff; font-weight: 900; font-size: 20px; transform: rotate(-7deg); }
.hw-brand-copy { display: grid; gap: 3px; }
.hw-brand-name { font-size: 18px; font-weight: 900; letter-spacing: -.06em; }
.hw-brand-tagline { color: var(--hw-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.hw-primary-nav ul { list-style: none; display: flex; align-items: center; gap: 22px; padding: 0; margin: 0; }
.hw-primary-nav a { text-decoration: none; font-weight: 800; font-size: 13px; }
.hw-primary-nav a:hover { color: var(--hw-orange-dark); }
.hw-header-cta, .hw-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--hw-orange); color: #fff; border: 1px solid var(--hw-orange); text-decoration: none; font-weight: 900; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.hw-header-cta:hover, .hw-button:hover { color: #fff; background: var(--hw-orange-dark); transform: translateY(-2px); }
.hw-button--dark { background: var(--hw-ink); border-color: var(--hw-ink); }
.hw-button--dark:hover { background: #343238; }
.hw-button--ghost { background: transparent; color: var(--hw-ink); border-color: var(--hw-ink); }
.hw-button--ghost:hover { color: var(--hw-ink); background: rgba(17,17,19,.06); }
.hw-hero { padding: 92px 0 78px; overflow: hidden; background: radial-gradient(circle at 12% 22%, rgba(255,211,78,.5), transparent 28%), radial-gradient(circle at 92% 4%, rgba(112,69,198,.35), transparent 28%); }
.hw-hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 64px; }
.hw-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 900; color: var(--hw-orange-dark); }
.hw-hero h1 { margin: 14px 0 18px; max-width: 720px; font-size: clamp(48px, 7vw, 88px); line-height: .92; letter-spacing: -.08em; }
.hw-hero h1 em { color: var(--hw-orange); font-style: normal; }
.hw-lede { max-width: 550px; font-size: 19px; color: var(--hw-muted); }
.hw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hw-proof-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: var(--hw-muted); font-size: 12px; font-weight: 800; }
.hw-proof-row span::before { content: "•"; color: var(--hw-orange); margin-right: 7px; }
.hw-hero-art { position: relative; min-height: 420px; }
.hw-art-sheet { position: absolute; inset: 28px 22px 0 10px; border: 2px dashed rgba(17,17,19,.25); border-radius: 20px; transform: rotate(3deg); background: rgba(255,255,255,.55); }
.hw-art-sheet::before { content: "23″ GANGSHEET"; position: absolute; top: -28px; left: 4px; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.hw-sticker { position: absolute; display: grid; place-items: center; text-align: center; font-weight: 950; line-height: .9; text-transform: uppercase; letter-spacing: -.06em; box-shadow: 0 12px 24px rgba(17,17,19,.16); }
.hw-sticker--one { width: 188px; height: 188px; top: 44px; left: 56px; border-radius: 44% 56% 58% 42%; background: var(--hw-orange); color: #fff; transform: rotate(-11deg); font-size: 32px; }
.hw-sticker--two { width: 145px; height: 145px; right: 34px; top: 32px; border-radius: 55% 45% 36% 64%; background: var(--hw-purple); color: #fff; transform: rotate(9deg); font-size: 24px; }
.hw-sticker--three { width: 122px; height: 122px; bottom: 46px; left: 140px; border-radius: 50%; background: var(--hw-yellow); color: var(--hw-ink); transform: rotate(10deg); font-size: 24px; }
.hw-sticker--four { width: 172px; height: 172px; bottom: 4px; right: 20px; border-radius: 40% 60% 50% 50%; background: var(--hw-green); color: var(--hw-ink); transform: rotate(-8deg); font-size: 30px; }
.hw-section { padding: 92px 0; }
.hw-section--ink { background: var(--hw-ink); color: #fff; }
.hw-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.hw-section h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: .98; letter-spacing: -.07em; }
.hw-section-heading p { max-width: 430px; color: var(--hw-muted); }
.hw-section--ink .hw-section-heading p { color: #bdb9bf; }
.hw-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hw-card { border: 1px solid var(--hw-line); border-radius: var(--hw-radius); padding: 28px; background: rgba(255,255,255,.72); }
.hw-card:hover { box-shadow: var(--hw-shadow); transform: translateY(-3px); }
.hw-card, .hw-product-card { transition: transform .2s ease, box-shadow .2s ease; }
.hw-product-card { border-radius: var(--hw-radius); overflow: hidden; background: #fff; border: 1px solid var(--hw-line); }
.hw-product-art { min-height: 230px; display: grid; place-items: center; padding: 24px; background: var(--hw-yellow); }
.hw-product-art--purple { background: var(--hw-purple); }
.hw-product-art--green { background: var(--hw-green); }
.hw-product-art-label { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 45% 55% 52% 48%; background: #fff; color: var(--hw-ink); text-align: center; font-weight: 950; font-size: 25px; line-height: .9; letter-spacing: -.06em; transform: rotate(-7deg); }
.hw-product-content { padding: 24px; }
.hw-product-content h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.05em; }
.hw-product-content p { color: var(--hw-muted); margin: 0 0 18px; }
.hw-price-list { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--hw-line); }
.hw-price-list li { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--hw-line); font-size: 13px; }
.hw-price-list strong { font-weight: 900; }
.hw-builder-banner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; background: var(--hw-orange); color: #fff; border-radius: 26px; padding: 42px; }
.hw-builder-banner h2 { margin: 0 0 10px; }
.hw-builder-banner p { margin: 0; max-width: 630px; color: rgba(255,255,255,.82); }
.hw-builder-banner .hw-button { background: #fff; color: var(--hw-ink); border-color: #fff; }
.hw-builder-banner .hw-button:hover { color: var(--hw-ink); background: #fff5d4; }
.hw-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; counter-reset: step; }
.hw-step { padding: 20px 0; border-top: 2px solid var(--hw-orange); }
.hw-step-number { color: var(--hw-orange); font-size: 12px; font-weight: 900; }
.hw-step h3 { margin: 14px 0 8px; font-size: 19px; letter-spacing: -.04em; }
.hw-step p { color: var(--hw-muted); font-size: 14px; }
.hw-site-footer { padding: 52px 0 24px; border-top: 1px solid var(--hw-line); }
.hw-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.hw-footer-grid h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.hw-footer-grid ul { list-style: none; padding: 0; margin: 0; color: var(--hw-muted); font-size: 14px; }
.hw-footer-grid li { margin: 8px 0; }
.hw-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hw-line); color: var(--hw-muted); font-size: 12px; }
.hw-page-header { padding: 70px 0 44px; background: radial-gradient(circle at 90% 0, rgba(255,211,78,.48), transparent 28%); }
.hw-page-header h1 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .95; letter-spacing: -.08em; }
.hw-content { padding: 48px 0 90px; }
.hw-content > * { max-width: 780px; }
.hw-content h2, .hw-content h3 { letter-spacing: -.05em; line-height: 1; }
.hw-mobile-toggle { display: none; }

/* WooCommerce and builder shared controls */
.hw-form { display: grid; gap: 18px; }
.hw-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.hw-field { display: grid; gap: 7px; }
.hw-field label { font-weight: 900; font-size: 13px; }
.hw-field input, .hw-field select, .hw-field textarea { width: 100%; border: 1px solid var(--hw-line); border-radius: 10px; padding: 12px 13px; background: #fff; color: var(--hw-ink); }
.hw-field input:focus, .hw-field select:focus, .hw-field textarea:focus { outline: 3px solid rgba(255,90,31,.18); border-color: var(--hw-orange); }
.hw-field-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.hw-muted { color: var(--hw-muted); font-size: 12px; font-weight: 700; }
.hw-print-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)) auto; align-items: end; gap: 12px; padding: 14px; margin: 10px 0; border: 1px solid var(--hw-line); border-radius: 12px; background: #fff; }
.hw-print-custom-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.hw-remove-print { border: 0; background: transparent; color: #b42318; cursor: pointer; font-weight: 800; padding: 12px 0; }
.hw-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: 24px; align-items: start; }
.hw-builder-panel { min-width: 0; background: #fff; border: 1px solid var(--hw-line); border-radius: var(--hw-radius); padding: 24px; box-shadow: 0 10px 30px rgba(17,17,19,.05); }
.hw-canvas-wrap { overflow: auto; padding: 28px; background: #f1eeeb; border-radius: 14px; }
.hw-gangsheet-canvas { position: relative; width: 460px; min-height: 720px; margin: 0 auto; background-color: #fff; background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%), linear-gradient(-45deg, #f2f2f2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f2f2f2 75%), linear-gradient(-45deg, transparent 75%, #f2f2f2 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; border: 1px dashed #aaa; }
.hw-gangsheet-canvas::before { content: "23″ WIDE"; position: absolute; top: -23px; left: 0; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.hw-artwork-chip { position: absolute; display: grid; place-items: center; min-width: 88px; min-height: 72px; padding: 8px; background: rgba(255,90,31,.9); color: #fff; border: 2px solid #fff; box-shadow: 0 7px 16px rgba(17,17,19,.2); font-size: 11px; text-transform: uppercase; font-weight: 900; text-align: center; }
.hw-artwork-chip:nth-child(2n) { background: rgba(112,69,198,.9); border-radius: 50%; }
.hw-artwork-chip:nth-child(3n) { background: rgba(182,224,90,.95); color: var(--hw-ink); border-radius: 14px; }
.hw-upload-zone { display: grid; place-items: center; min-height: 126px; border: 2px dashed #c8c2bd; border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; background: #fbfaf7; }
.hw-upload-zone:hover { border-color: var(--hw-orange); background: #fff8f3; }
.hw-upload-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hw-upload-zone strong { display: block; }
.hw-upload-zone small { color: var(--hw-muted); }
.hw-estimate { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--hw-line); border-bottom: 1px solid var(--hw-line); }
.hw-estimate strong { font-size: 20px; }
.hw-notice { padding: 12px 14px; border-radius: 10px; background: #fff5d4; color: #5f4800; font-size: 13px; }
.hw-builder-product-cta { margin: 20px 0; }

@media (max-width: 980px) {
  .hw-builder-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hw-primary-nav, .hw-header-cta { display: none; }
  .hw-mobile-toggle { display: inline-flex; border: 0; background: transparent; font-size: 24px; }
  .hw-hero-grid { grid-template-columns: 1fr; }
  .hw-hero-art { min-height: 340px; max-width: 560px; width: 100%; margin: 0 auto; }
  .hw-card-grid { grid-template-columns: 1fr; }
  .hw-steps { grid-template-columns: repeat(2,1fr); }
  .hw-footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .hw-shell { width: min(100% - 28px, 1180px); }
  .hw-hero { padding: 60px 0; }
  .hw-section { padding: 64px 0; }
  .hw-hero h1 { font-size: 52px; }
  .hw-form-grid, .hw-steps, .hw-footer-grid, .hw-print-row, .hw-print-custom-fields { grid-template-columns: 1fr; }
  .hw-builder-banner { grid-template-columns: 1fr; padding: 28px; }
  .hw-footer-bottom { flex-direction: column; }
  .hw-canvas-wrap { padding: 24px 6px; }
}