/* Halfpix canonical visual system. Keep this stylesheet last in the cascade. */
:root {
  --celadon: #276b60;
  --celadon-deep: #1d5047;
  --kiln-blue: #52748a;
  --clay: var(--celadon);
  --clay-dark: var(--celadon-deep);
  --clay-soft: #ddefe7;
  --cream: #f5f8f7;
  --porcelain: #ffffff;
  --ink: #22332e;
  --muted: #62716b;
  --line: #dae4df;
  --sage: #527d68;
  --coral-soft: var(--clay-soft);
  --green-soft: #ebf1ed;
  --navy-soft: #e5eef5;
  --danger: #985b52;
  --warning: #846b35;
  --shadow-sm: 0 4px 16px rgb(34 51 46/0.035);
  --shadow-md: 0 8px 24px rgb(34 51 46/0.055);
  --shadow: var(--shadow-md);
  --font-sans: "DM Sans", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: "DM Serif Display", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-caption: 0.75rem;
  --text-small: 0.8125rem;
  --text-body: 0.9375rem;
  --text-body-mobile: 1rem;
  --text-button: 0.875rem;
  --text-card-title: 0.9375rem;
  --text-product-title: 1.375rem;
  --text-section-title: clamp(1.75rem, 2.5vw, 2rem);
  --text-page-title: clamp(2rem, 3.2vw, 2.625rem);
  --text-display: clamp(2.5rem, 4.2vw, 3.375rem);
  --text-xs: var(--text-caption);
  --text-sm: var(--text-button);
  --text-base: var(--text-body);
  --text-lg: 1.125rem;
  --text-xl: var(--text-product-title);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;

  /* Compatibility aliases used by the native WordPress shell. */
  --hp-canvas: var(--cream);
  --hp-surface: var(--porcelain);
  --hp-surface-soft: var(--green-soft);
  --hp-ink: var(--ink);
  --hp-muted: var(--muted);
  --hp-line: var(--line);
  --hp-primary: var(--clay);
  --hp-primary-deep: var(--clay-dark);
  --hp-primary-soft: var(--clay-soft);
  --hp-clay: var(--clay);
  --hp-clay-soft: var(--clay-soft);
  --hp-danger: var(--danger);
  --hp-shadow: var(--shadow);
  --hp-font-sans: var(--font-sans);
  --hp-font-display: var(--font-display);
  --hp-radius-sm: var(--radius-md);
  --hp-radius-md: var(--radius-lg);
  --hp-radius-lg: 22px;
  --hp-green: var(--clay);
  --hp-deep: var(--clay-dark);
  --hp-soft: var(--clay-soft);
  --hp-bg: var(--cream);
  --hp-card: var(--porcelain);
  --hp-blue: var(--kiln-blue);
  --hp-warn: var(--warning);
}

html { background: var(--cream); }
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 92% -8%, rgb(39 107 96 / 0.07) 0, transparent 34rem),
    radial-gradient(circle at 4% 100%, rgb(82 125 104 / 0.05) 0, transparent 36rem),
    var(--cream);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.75;
  letter-spacing: 0;
}

h1,
h2,
h3,
p { color: inherit; }
.hp-title,
.hp-page-title,
.stream-heading h1,
.post-copy h1,
.discover-detail__panel > h1,
.product-reference-summary > h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: -0.035em;
}
.hp-title,
.hp-page-title,
.stream-heading h1 { font-size: var(--text-page-title); line-height: 1.08; }
.stream-card__title,
.feed-card__title,
.shop-card h2 { font-size: var(--text-card-title); line-height: 1.4; font-weight: var(--weight-semibold); }
.stream-card__summary,
.feed-card__description,
.shop-card__body p { color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.stream-card__meta,
.feed-card__stats,
.shop-card__kind,
.hp-meta { color: var(--muted); font-size: var(--text-caption); }

.app-button,
.hp-button,
.hp-chip,
.stream-tabs button,
.content-actions button { font-size: var(--text-button); font-weight: var(--weight-semibold); }
.app-button,
.hp-button { border-radius: var(--radius-lg); }
.hp-chip,
.stream-tabs button,
.content-badge,
.discover-chip { border-radius: var(--radius-pill); }
.app-button,
.hp-button,
.stream-tabs button[aria-selected="true"],
.stream-tabs button.is-active { background: var(--clay); color: var(--porcelain); }

.hp-panel,
.feed-card,
.discover-card,
.shop-card,
.info-card,
.comment-composer,
.product-detail-tabs { border-color: var(--line); background: var(--porcelain); box-shadow: var(--shadow-sm); }
.feed-card,
.discover-card,
.shop-card { border-radius: var(--radius-lg); }

.media-image,
.feed-card__image,
.discover-card__media img,
.shop-card__media img,
.product-related-card img,
.hp-card-media img {
  display: block;
  width: 100%;
  background: var(--clay-soft);
  object-fit: cover;
}
.feed-card__media,
.discover-card__media,
.shop-card__media { overflow: hidden; background: var(--clay-soft); }
.feed-card__image,
.discover-card__media img,
.shop-card__media img { transition: transform 220ms ease; }
.feed-card__media:hover .feed-card__image,
.discover-card__media:hover img,
.shop-card__media:hover img { transform: scale(1.018); }
.post-media-image,
.post-video,
.media-gallery__open,
.media-gallery__open > img { width: 100%; height: 100%; object-fit: contain; background: #171310; }
.avatar,
.hp-avatar,
.feed-card__author img,
.comment-avatar { border-radius: 50%; object-fit: cover; background: var(--clay-soft); }
.app-icon,
.hp-nav svg,
.hp-bottom-nav svg { color: currentColor; stroke-width: 1.8; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--clay) 35%, transparent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Cross-page component contract. This is the final authority for shared UI. */
:root {
  --control-height: 46px;
  --control-padding: 12px 14px;
  --media-backdrop: #171310;
}

:where(
  .discover-page,
  .shop-page,
  .cart-page,
  .checkout-page,
  .astra-checkout-page,
  .creation-page,
  .journal-page,
  .kiln-page,
  .me-page,
  .orders-page,
  .order-detail,
  .post-detail,
  .product-detail
) {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}

:where(
  .commerce-heading,
  .creation-heading,
  .journal-heading,
  .create-hub,
  .checkout-header,
  .cart-page-header,
  .astra-cart-header,
  .astra-checkout-header,
  .shop-heading
) :is(.eyebrow, .hp-eyebrow) {
  color: var(--clay-dark);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

:where(
  .commerce-heading,
  .creation-heading,
  .journal-heading,
  .create-hub,
  .checkout-header,
  .cart-page-header,
  .astra-cart-header,
  .astra-checkout-header,
  .shop-heading
) h1,
.post-copy h1,
.discover-detail__panel > h1,
.product-reference-summary > h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--weight-regular);
  letter-spacing: -.035em;
  line-height: 1.08;
}

:where(
  .creation-section,
  .creation-preview,
  .hp-panel,
  .info-card,
  .journal-card,
  .kiln-card,
  .me-section,
  .address-card,
  .order-summary,
  .order-list > a,
  .astra-cart-table,
  .astra-cart-totals,
  .astra-order-table,
  .checkout-section,
  .cart-item,
  .empty-state
) {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--porcelain);
  box-shadow: var(--shadow-sm);
}

:where(
  .hp-field,
  .creation-section label,
  .checkout-section label,
  .astra-field-grid label,
  .astra-order-note,
  .address-form label
) {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

:where(
  .hp-field,
  .creation-section,
  .checkout-section,
  .astra-field-grid,
  .astra-order-note,
  .address-form,
  .discover-filters
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  box-shadow: none;
}

:where(
  .hp-field,
  .creation-section,
  .checkout-section,
  .astra-field-grid,
  .astra-order-note,
  .address-form,
  .discover-filters
) :is(input, select, textarea):focus {
  border-color: var(--clay);
  outline: 3px solid color-mix(in srgb, var(--clay) 16%, transparent);
  outline-offset: 1px;
}

:where(
  .app-button,
  .hp-button,
  .astra-place-order,
  .astra-checkout-button,
  .creation-actions button[type="submit"],
  .comment-submit
) {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--clay);
  color: var(--porcelain);
  font-family: var(--font-sans);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  line-height: 1;
  box-shadow: none;
}

:where(
  .hp-chip,
  .stream-tabs button,
  .choice-row button,
  .tag-editor button,
  .journal-filters button,
  .content-badge,
  .discover-chip,
  .sale-chip
) {
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  line-height: 1;
}

:where(.app-button, .hp-button, .comment-submit) > .app-icon,
:where(.app-button, .hp-button, .comment-submit) > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex: 0 0 var(--icon-size-sm);
}

:where(
  .feed-card__stats,
  .discover-card__meta,
  .shop-card__kind,
  .comment-actions,
  .product-sku,
  .hp-meta
) {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

:where(.feed-card, .discover-card, .shop-card, .journal-card) {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--porcelain);
  box-shadow: var(--shadow-sm);
}

:where(.feed-card__title, .discover-card h2, .shop-card h2, .journal-card h2) {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-card-title);
  font-weight: var(--weight-semibold);
  letter-spacing: -.012em;
  line-height: 1.4;
}

:where(.feed-card__description, .discover-card p, .shop-card p, .journal-card p) {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: 1.55;
}

:where(.comment-composer, .hp-auth-card, body.login form) {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--porcelain);
  box-shadow: var(--shadow-sm);
}

.hp-comments,
.hp-comments :is(button, input, textarea) {
  font-family: var(--font-sans);
}

.hp-comments .comment-composer textarea {
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.6;
}

.hp-comments .comment-submit {
  min-height: 38px;
  padding-inline: 14px;
}

:where(.post-media-image, .post-video, .media-gallery__open, .media-gallery__open > img) {
  background: var(--media-backdrop);
}

body.login,
body.login :is(input, button) {
  font-family: var(--font-sans);
}

body.login h1 a {
  color: var(--clay-dark);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--weight-regular);
}

body.login :is(input[type="text"], input[type="password"], input[type="email"]) {
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--porcelain);
  color: var(--ink);
  font-size: var(--text-body);
}

@media (max-width: 599px) {
  :where(
    .commerce-heading,
    .creation-heading,
    .journal-heading,
    .create-hub,
    .checkout-header,
    .cart-page-header,
    .astra-cart-header,
    .astra-checkout-header,
    .shop-heading
  ) h1,
  .post-copy h1,
  .discover-detail__panel > h1,
  .product-reference-summary > h1 {
    font-size: 2rem;
    line-height: 1.15;
  }
}

/* Route-level guarantees where older parity rules used !important or view scoping. */
.hp-main[data-view="cart"] :is(.cart-page-header, .astra-cart-header) h1,
.hp-main[data-view="checkout"] :is(.checkout-header, .astra-checkout-header) h1,
.hp-main[data-view="create"] .creation-heading h1 {
  font-family: var(--font-display) !important;
  font-size: var(--text-page-title) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
}

.hp-main[data-view="create"] :is(.creation-section, .creation-preview) {
  border-color: var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--porcelain) !important;
  box-shadow: var(--shadow-sm) !important;
}

.hp-main[data-view="checkout"] :is(button, .app-button, .hp-button, .astra-place-order),
.hp-main[data-view="create"] :is(button, .app-button, .hp-button) {
  font-family: var(--font-sans) !important;
  font-size: var(--text-button) !important;
}

@media (max-width: 599px) {
  .hp-main[data-view="cart"] :is(.cart-page-header, .astra-cart-header) h1,
  .hp-main[data-view="checkout"] :is(.checkout-header, .astra-checkout-header) h1,
  .hp-main[data-view="create"] .creation-heading h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
}

/* Product detail layout follows available shell width instead of viewport alone. */
.hp-main[data-view="product"] .product-detail.product-detail--reference {
  width: min(100%, 1500px);
}

.hp-main[data-view="product"] .product-purchase-row .product-quantity-stepper {
  width: auto;
  min-width: 132px;
  min-height: 50px;
  display: grid;
  grid-template-columns: 40px minmax(32px, 1fr) 40px;
  align-items: center;
  gap: 2px;
  padding: 3px;
}

.hp-main[data-view="product"] .product-purchase-row .product-quantity-stepper button {
  width: 40px;
  height: 42px;
  display: grid;
  place-items: center;
}

.hp-main[data-view="product"] .product-purchase-row .product-quantity-stepper > strong {
  min-width: 32px;
  line-height: 1;
  text-align: center;
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hp-main[data-view="product"] .product-reference-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
    gap: clamp(22px, 3vw, 34px);
  }

  .hp-main[data-view="product"] .product-reference-gallery {
    width: 100%;
  }

  .hp-main[data-view="product"] .product-reference-summary {
    width: 100%;
    padding-top: 0;
  }

  .hp-main[data-view="product"] .product-purchase-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

@media (min-width: 1100px) {
  .hp-main[data-view="product"] .product-reference-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: clamp(34px, 4.5vw, 72px);
  }
}

@media (max-width: 599px) {
  .hp-main[data-view="product"] .product-purchase-row {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .hp-main[data-view="product"] .product-purchase-row .product-quantity-stepper {
    min-width: 124px;
    grid-template-columns: 38px minmax(28px, 1fr) 38px;
  }

  .hp-main[data-view="product"] .product-purchase-row .product-quantity-stepper button {
    width: 38px;
  }
}

/* Product description/specification reading panel. */
.hp-main[data-view="product"] .hp-product-bottom {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.hp-main[data-view="product"] .product-detail-tabs {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  margin-top: clamp(38px, 5vw, 56px);
  overflow: hidden !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--porcelain);
  box-shadow: var(--shadow-sm);
}

.hp-main[data-view="product"] .product-tab-list {
  min-height: 62px;
  align-items: stretch;
  gap: clamp(22px, 3vw, 36px);
  overflow: hidden;
  padding-inline: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 42%, var(--porcelain));
}

.hp-main[data-view="product"] .product-tab-list button {
  min-height: 62px;
  font-size: var(--text-button);
}

.hp-main[data-view="product"] .product-tab-panel {
  width: 100%;
  max-width: none;
  min-height: 220px;
  height: auto !important;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px);
  overflow: visible !important;
}

.hp-main[data-view="product"] .product-tab-panel > :is(article, dl, p) {
  width: min(100%, 860px);
}

.hp-main[data-view="product"] .product-tab-panel h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

.hp-main[data-view="product"] .product-tab-panel article > p,
.hp-main[data-view="product"] .product-tab-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.75;
}

@media (max-width: 599px) {
  .hp-main[data-view="product"] .product-detail-tabs {
    margin-top: 30px;
  }

  .hp-main[data-view="product"] .product-tab-list {
    min-height: 54px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 18px;
  }

  .hp-main[data-view="product"] .product-tab-list button {
    min-height: 54px;
  }

  .hp-main[data-view="product"] .product-tab-panel {
    min-height: 180px;
    padding: 26px 18px 30px;
  }
}

/* Specificity bridge for legacy page styles that predate the shared tokens. */
.hp-main :is(
  .commerce-heading,
  .creation-heading,
  .journal-heading,
  .create-hub,
  .checkout-header,
  .cart-page-header,
  .astra-cart-header,
  .astra-checkout-header,
  .shop-heading
) h1,
.hp-main .post-copy h1,
.hp-main .discover-detail__panel > h1,
.hp-main .product-reference-summary > h1 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--weight-regular);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.hp-main :is(
  .creation-section,
  .creation-preview,
  .hp-panel,
  .info-card,
  .journal-card,
  .kiln-card,
  .me-section,
  .address-card,
  .order-summary,
  .order-list > a,
  .astra-cart-table,
  .astra-cart-totals,
  .astra-order-table,
  .checkout-section,
  .cart-item,
  .empty-state
) {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--porcelain);
  box-shadow: var(--shadow-sm);
}

.hp-main :is(
  .app-button,
  .hp-button,
  .astra-place-order,
  .astra-checkout-button,
  .creation-actions button[type="submit"],
  .comment-submit
) {
  color: var(--porcelain);
  font-family: var(--font-sans);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
}

.hp-main :is(
  .hp-chip,
  .stream-tabs button,
  .choice-row button,
  .tag-editor button,
  .journal-filters button,
  .content-badge,
  .discover-chip,
  .sale-chip
) {
  font-family: var(--font-sans);
  font-size: var(--text-button);
}

@media (max-width: 599px) {
  .hp-main :is(
    .commerce-heading,
    .creation-heading,
    .journal-heading,
    .create-hub,
    .checkout-header,
    .cart-page-header,
    .astra-cart-header,
    .astra-checkout-header,
    .shop-heading
  ) h1,
  .hp-main .post-copy h1,
  .hp-main .discover-detail__panel > h1,
  .hp-main .product-reference-summary > h1 {
    font-size: 2rem;
    line-height: 1.15;
  }
}