/* =========================================================================
   HELIX ADVENTURES — storefront design system
   Display: Instrument Serif   ·   UI: Archivo
   Palette: basalt / slate / ember / stone / paper / moss
   ========================================================================= */

:root {
  --hx-basalt: #14171a;
  --hx-slate:  #232a2e;
  --hx-slate-2:#313a3f;
  --hx-ember:  #d9552b;
  --hx-ember-d:#b8431f;
  --hx-moss:   #55685c;
  --hx-stone:  #e8e3da;
  --hx-paper:  #f8f6f2;
  --hx-mist:   #a8b0ad;
  --hx-line:   #ddd7cc;
  --hx-radius: 4px;
  --hx-shadow: 0 18px 44px -26px rgba(20, 23, 26, .45);
  --hx-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --hx-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--hx-ui);
  color: var(--hx-basalt);
  background: var(--hx-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .hx-display {
  font-family: var(--hx-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--hx-basalt);
}

.hx-kicker {
  font-family: var(--hx-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hx-ember);
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.hx-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  font-family: var(--hx-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--hx-basalt);
  color: #fff;
  border: 0;
  border-radius: var(--hx-radius);
  padding: 14px 26px;
  line-height: 1;
  transition: background .18s ease, transform .18s ease;
}
.hx-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--hx-ember);
  color: #fff;
}
.hx-btn--ember { background: var(--hx-ember); }
.hx-btn--ember:hover { background: var(--hx-ember-d); }
.hx-btn--ghost {
  background: transparent;
  color: var(--hx-basalt);
  border: 1px solid var(--hx-basalt);
}
.hx-btn--ghost:hover { background: var(--hx-basalt); color: #fff; }

/* ── homepage: hero ─────────────────────────────────────────────────────── */
.hx-hero {
  position: relative;
  min-height: clamp(460px, 62vw, 660px);
  display: flex;
  align-items: flex-end;
  background: var(--hx-slate) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,23,26,.10) 0%, rgba(20,23,26,.30) 45%, rgba(20,23,26,.86) 100%);
}
.hx-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.hx-hero h1 {
  color: #fff;
  font-size: clamp(40px, 6.6vw, 76px);
  line-height: 1.02;
  margin: 12px 0 14px;
  max-width: 15ch;
}
.hx-hero p {
  color: rgba(255,255,255,.86);
  font-size: clamp(15px, 1.5vw, 18px);
  max-width: 52ch;
  margin: 0 0 26px;
  line-height: 1.6;
}
.hx-hero .hx-kicker { color: #f2b49a; }
.hx-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hx-hero__cta .hx-btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hx-hero__cta .hx-btn--ghost:hover { background: #fff; color: var(--hx-basalt); }

/* ── shared section shell ───────────────────────────────────────────────── */
.hx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hx-section { padding: clamp(56px, 7vw, 96px) 0; }
.hx-section--stone { background: var(--hx-stone); }
.hx-section--basalt { background: var(--hx-basalt); color: var(--hx-paper); }
.hx-section--basalt h2, .hx-section--basalt h3 { color: #fff; }
.hx-section--basalt p { color: rgba(248,246,242,.76); }
.hx-section__head { max-width: 62ch; margin: 0 0 38px; }
.hx-section__head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin: 10px 0 12px; }
.hx-section__head p { color: #5c635f; font-size: 16px; line-height: 1.7; margin: 0; }

/* ── marquee strip ──────────────────────────────────────────────────────── */
.hx-strip {
  background: var(--hx-basalt);
  color: var(--hx-paper);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}
.hx-strip__inner {
  max-width: 1180px; margin: 0 auto; padding: 13px 24px;
  display: flex; gap: 34px; justify-content: center; flex-wrap: wrap;
}
.hx-strip span { opacity: .82; white-space: nowrap; }

/* ── category tiles ─────────────────────────────────────────────────────── */
.hx-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hx-cat {
  position: relative; display: block; padding: 26px 22px 22px;
  background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-radius);
  text-decoration: none; color: var(--hx-basalt);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-height: 128px;
}
.hx-cat:hover { border-color: var(--hx-basalt); transform: translateY(-2px); box-shadow: var(--hx-shadow); }
.hx-cat__n { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--hx-mist); }
.hx-cat__t { font-family: var(--hx-display); font-size: 22px; line-height: 1.15; margin: 8px 0 6px; display: block; }
.hx-cat__b { font-size: 13px; color: #5c635f; line-height: 1.55; }

/* ── product grid (hand-built + WooCommerce loop) ───────────────────────── */
.hx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hx-card {
  background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hx-card:hover { border-color: var(--hx-basalt); transform: translateY(-3px); box-shadow: var(--hx-shadow); }
.hx-card__img { aspect-ratio: 1 / 1; background: var(--hx-stone) center/cover no-repeat; display: block; }
.hx-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hx-card__cat { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-mist); font-weight: 600; }
.hx-card__t { font-family: var(--hx-display); font-size: 19px; line-height: 1.2; }
.hx-card__k { font-size: 12.5px; color: #6b726e; line-height: 1.5; }
.hx-card__p { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15px; }

/* ── editorial split ────────────────────────────────────────────────────── */
.hx-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hx-split__media { aspect-ratio: 4 / 3; background: var(--hx-slate) center/cover no-repeat; border-radius: var(--hx-radius); }
.hx-split h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; margin: 10px 0 14px; }
.hx-split p { color: #5c635f; line-height: 1.75; margin: 0 0 14px; font-size: 15.5px; }

/* ── promises row ───────────────────────────────────────────────────────── */
.hx-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hx-promise > div { border-top: 2px solid var(--hx-ember); padding-top: 16px; }
.hx-promise h3 { font-family: var(--hx-ui); font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 0 0 6px; }
.hx-promise p { font-size: 13.5px; color: #6b726e; line-height: 1.6; margin: 0; }
.hx-section--basalt .hx-promise p { color: rgba(248,246,242,.7); }
.hx-section--basalt .hx-promise h3 { color: #fff; }

/* ── footer note ────────────────────────────────────────────────────────── */
.hx-foot { border-top: 1px solid var(--hx-line); padding: 30px 0; font-size: 13px; color: #6b726e; }

/* ═════════ WooCommerce / Astra structural belts ═════════
   Astra absolutely-positions the loop add-to-cart AND renders a separate on-card button,
   both of which overlap the price on /shop/ and category archives. Force a flex column and
   kill the on-card variant. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  position: static !important;
  float: none !important;
  transform: none !important;
}
.astra-shop-summary-wrap { display: flex !important; flex-direction: column !important; }
.ast-on-card-button,
.ast-card-action-tooltip,
.ast-select-options-trigger { display: none !important; }

/* LiteSpeed JS-defer leaves the single-product gallery at opacity 0 */
.woocommerce-product-gallery { opacity: 1 !important; }

/* product card polish inside the Woo loop */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  padding: 0 0 16px;
  overflow: hidden;
}
.woocommerce ul.products li.product img { margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--hx-display) !important;
  font-size: 19px !important;
  line-height: 1.2;
  padding: 0 14px !important;
}
.woocommerce ul.products li.product .price { padding: 0 14px; font-weight: 700; color: var(--hx-basalt); }
.woocommerce ul.products li.product .button { margin: 12px 14px 0; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hx-cats, .hx-grid { grid-template-columns: repeat(3, 1fr); }
  .hx-promise { grid-template-columns: repeat(2, 1fr); }
  .hx-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hx-cats, .hx-grid { grid-template-columns: repeat(2, 1fr); }
  .hx-strip__inner { gap: 18px; font-size: 10px; }
  .hx-hero__inner { padding-bottom: 44px; }
}
@media (max-width: 480px) {
  .hx-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hx-cats { grid-template-columns: 1fr; }
  .hx-promise { grid-template-columns: 1fr; }
}

/* ── theme chrome we don't want on hand-built pages ─────────────────────── */
/* every hand-built page carries its own <h1>; Astra's entry-title duplicates it */
.page .ast-article-single > .entry-header,
.page .entry-header.ast-no-thumbnail,
.page-id-166 .entry-header { display: none !important; }
.page .ast-article-single { padding: 0 !important; border: 0 !important; }
.page .site-content > .ast-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
.page .entry-content.clear { margin: 0 !important; }
/* full-bleed sections inside Astra's constrained content column */
.page .entry-content > .hx-hero,
.page .entry-content > .hx-strip,
.page .entry-content > .hx-section { width: 100%; }
/* footer: brand line only */
.ast-footer-copyright { font-size: 13px; color: #6b726e; }

/* ── header: the logo IS the wordmark ───────────────────────────────────── */
.ast-site-title-wrap,
.site-header .site-title,
.site-header .site-description { display: none !important; }
.site-header { background: #fff; }
.ast-site-identity { padding: 10px 0; }

/* ── kill inherited link underlines inside our own cards/tiles ──────────── */
.hx-cat, .hx-cat:hover, .hx-cat *,
.hx-card, .hx-card:hover, .hx-card *,
.hx-hero__cta a, .hx-btn { text-decoration: none !important; }
.hx-cat__t, .hx-card__t { text-decoration: none !important; }

/* ── woo loop: no underlines either ─────────────────────────────────────── */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:hover { text-decoration: none !important; }

/* ── woo pagination + breadcrumb, on-brand ─────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  background: #fff;
  color: var(--hx-basalt) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  min-width: 40px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--hx-basalt);
  color: #fff !important;
  border-color: var(--hx-basalt);
}
.woocommerce .woocommerce-breadcrumb { font-size: 12px; letter-spacing: .04em; color: var(--hx-mist); }
.woocommerce .woocommerce-breadcrumb a { color: var(--hx-mist); text-decoration: none; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select { font-size: 13px; color: #6b726e; }

/* ── logo scale + kill the gap between header and hero ──────────────────── */
.site-header .custom-logo { max-width: 460px !important; width: 460px !important; height: auto !important; }
@media (max-width: 921px) { .site-header .custom-logo { max-width: 260px !important; width: 260px !important; } }
@media (max-width: 480px) { .site-header .custom-logo { max-width: 210px !important; width: 210px !important; } }

/* Astra puts padding above the content column; the hero must sit flush under the header */
.page .site-content,
.page #primary,
.page .ast-container { padding-top: 0 !important; margin-top: 0 !important; }
.page .site-content .ast-container > #primary { margin-top: 0 !important; }
.page-id-166 .site-content { padding-top: 0 !important; }
.page .entry-content > .hx-hero:first-child { margin-top: 0 !important; }