/*
Theme Name:   Aesthetic Aminos — Black Rite
Theme URI:    https://aestheticamino.com
Description:  Astra child theme implementing the "Black Rite" (direction 2A) design system for Aesthetic Aminos. Four-value palette, Archivo Black + IBM Plex Mono, zero radius, zero shadow, near-zero motion.
Author:       FIE Consults
Author URI:   https://fieconsults.com
Template:     astra
Version:      1.0.0
Text Domain:  aesthetic-aminos
*/

/* --------------------------------------------------------------------------
   Fonts.

   Currently loaded from the Google Fonts CDN, enqueued in functions.php.

   The self-hosted path is below, commented out. It is the better end state, but
   it needs three .woff2 files that have to be downloaded by hand (see
   fonts/README.txt). To switch: drop the files into /fonts/, uncomment this
   block, and flip AA_SELF_HOST_FONTS to true in functions.php. Do not do one
   without the other — two live @font-face sources for the same family means the
   browser may try the missing local file first and flash unstyled text.

   Archivo Black 400; IBM Plex Mono 400 + 500. Both OFL, free to self-host.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   Tokens — four values, no fifth. No accent. No status hue.
   -------------------------------------------------------------------------- */

:root {
  --pitch:    #08080A;
  --card:     #0D0D10;
  --slate:    #2B2B30;
  --hairline: #1D1D21;
  --edge:     #26262A;
  --ash:      #8A8A92;
  --ash-dim:  #6D6D75;
  --legal:    #4E4E56;
  --body:     #C9C9CD;
  --bone:     #F2F2F0;

  --display: "Archivo Black", "Arial Black", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --t: 120ms;
}

/* --------------------------------------------------------------------------
   Global reset over Astra
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body,
body.woocommerce,
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background-color: var(--pitch);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
}

/* Radius 0 everywhere. No shadows. No gradients. Depth is 1px borders only. */
*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Motion budget is deliberately near zero. */
*, *::before, *::after {
  transition-duration: var(--t) !important;
  animation-duration: 0s !important;
}

a { color: var(--ash); text-decoration: none; transition: color var(--t) ease; }
a:hover, a:focus { color: var(--bone); }

:focus-visible { outline: 1px solid var(--bone) !important; outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

h1 { font-size: 44px; line-height: .98; letter-spacing: -.04em; }
h2 { font-size: 44px; line-height: .98; letter-spacing: -.04em; }
h3 { font-size: 30px; line-height: 1;   letter-spacing: -.035em; }

p { color: var(--body); }

.ast-container, .site-content .ast-container { max-width: 1280px; }

/* --------------------------------------------------------------------------
   Utility classes — mirror of the prototype's black-rite.css
   -------------------------------------------------------------------------- */

.aa-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ash); line-height: 1.6;
}

.aa-legal {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--legal); line-height: 1.8;
}
.aa-legal--xs { font-size: 8px; letter-spacing: .10em; }

.aa-body { color: var(--body); font-size: 13px; line-height: 1.85; }

/* The hyphen inside a compound name is always dimmed. */
.aa-hy { color: var(--ash-dim); }

/* Compound names are never force-uppercased — "GHK-Cu" is copper,
   "GHK-CU" is meaningless. Author names in correct chemical form. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--display);
  text-transform: none;
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   The seal — square on point, pierced.
   Stroke = 1/40 of the diagonal. Inner square = 35% of the outer edge.
   -------------------------------------------------------------------------- */

.aa-seal {
  display: inline-block; flex: none; position: relative;
  transform: rotate(45deg);
  border: 3px solid currentColor;
  width: 120px; height: 120px;
}
.aa-seal::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 35%; height: 35%; background: currentColor;
}
.aa-seal--nav { width: 20px; height: 20px; border-width: 1.5px; }
.aa-seal-slot { display: inline-flex; align-items: center; justify-content: center; }
.aa-seal-slot--nav { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header, .ast-primary-header-bar, .main-header-bar {
  background-color: var(--pitch) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 14px 22px;
}

.ast-site-identity .site-title,
.site-title a {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone);
}

.main-header-menu a,
.ast-header-break-point .main-navigation a {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
}
.main-header-menu a:hover { color: var(--bone); }

/* Cart count always visible, "Cart (0)" format — see functions.php */
.aa-cart-link { color: var(--bone) !important; }

/* --------------------------------------------------------------------------
   Hero (front page)
   -------------------------------------------------------------------------- */

.aa-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; padding: 66px 40px 46px; text-align: center;
}
.aa-hero-line {
  font-family: var(--display); font-size: 88px; line-height: .86;
  letter-spacing: -.05em; text-transform: uppercase; margin: 0; color: var(--bone);
}
.aa-hero-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ash); margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.aa-btn-outline,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  border: 1.5px solid var(--bone);
  background: transparent;
  color: var(--bone);
  padding: 13px 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--t) ease, color var(--t) ease;
}
.aa-btn-outline:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--bone);
  color: var(--pitch);
}

/* The one bone-filled element per touchpoint: add to cart. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  display: block;
  width: 100%;
  border: 0;
  background: var(--bone);
  color: var(--pitch);
  padding: 13px;
  font-size: 10px;
  letter-spacing: .20em;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover { background: var(--body); color: var(--pitch); }

/* --------------------------------------------------------------------------
   Catalog grid — hairline pattern
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 0; padding: 0; list-style: none;
}

.woocommerce ul.products li.product {
  background: var(--card);
  margin: 0 !important;
  padding: 22px;
  width: auto !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 150px;
  transition: background var(--t) ease;
}
.woocommerce ul.products li.product:hover { background: #141418; }

/* The catalog cell now carries the product tile. The tile is already a
   1:1 pitch-ground render, so it needs no frame, no radius and no padding
   of its own — it sits flush inside the cell's hairline. */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 18px;
  border: 1px solid var(--hairline);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { margin: 0; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 20px; line-height: .95; letter-spacing: -.03em;
  padding: 0; margin: 0;
}

/* Stock state is carried by words, never hue. */
.aa-cell-meta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ash);
}

/* Price belongs on the card: a shopper should not have to open a product
   to learn what it costs. Set in the display face, quiet, no colour. */
.woocommerce ul.products li.product .price {
  display: block !important;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -.03em;
  color: var(--bone);
  margin: 10px 0 0;
}
.woocommerce ul.products li.product .price del { display: none; }

/* No buttons and no icons in a cell. Astra injects an icon-bag "add to cart"
   control on hover; the brand has no icon set, so it goes. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .ast-card-action-tooltip,
.woocommerce ul.products li.product .ahfb-svg-iconset,
.woocommerce ul.products li.product .onsale { display: none !important; }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.woocommerce div.product {
  border: 1px solid var(--edge);
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.woocommerce div.product div.images {
  border: 1px solid var(--edge);
  min-height: 240px;
  margin: 0;
  width: auto;
  float: none;
}

.woocommerce div.product div.summary {
  margin: 0; width: auto; float: none;
  display: flex; flex-direction: column; gap: 16px;
}

.woocommerce div.product .product_title {
  font-size: 34px; line-height: .95; letter-spacing: -.045em;
}

.aa-specs {
  display: grid; grid-template-columns: 1fr auto; gap: 7px 14px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; margin: 0;
}
.aa-specs dt { color: var(--ash); text-transform: uppercase; margin: 0; }
.aa-specs dd { color: var(--bone); margin: 0; text-align: right; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--display); font-size: 24px; letter-spacing: -.03em;
  color: var(--bone);
}

/* No reviews, no related products, no benefit copy, no dosage language. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce .woocommerce-product-rating,
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none !important; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--slate);
  background: transparent;
  color: var(--bone);
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
}
::placeholder { color: var(--ash-dim); }

/* --------------------------------------------------------------------------
   Notices — inline, mono, no color. There is no red.
   -------------------------------------------------------------------------- */

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  background: var(--card) !important;
  border: 1px solid var(--slate) !important;
  border-top: 1px solid var(--slate) !important;
  color: var(--body) !important;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 14px 18px;
}
.woocommerce-message::before, .woocommerce-info::before,
.woocommerce-error::before { display: none !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer, .ast-small-footer, .footer-adv {
  background: var(--pitch) !important;
  border-top: 1px solid var(--hairline);
  color: var(--ash);
  padding: 40px 22px 56px;
}
.site-footer a { color: var(--ash); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Age gate — restyled to Black Rite.
   The gate is a legal requirement and stays, but it reads as brand, not chrome.
   -------------------------------------------------------------------------- */

.age-gate, .age-gate__wrapper, #age-gate {
  background: var(--pitch) !important;
  color: var(--bone) !important;
  font-family: var(--mono);
}
.age-gate__heading, .age-gate h1, .age-gate h2 {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: -.04em; color: var(--bone);
}
.age-gate__submit, .age-gate button[type="submit"] {
  background: var(--bone); color: var(--pitch); border: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .20em;
  text-transform: uppercase; padding: 13px 30px;
}

/* --------------------------------------------------------------------------
   Responsive — three breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .ast-container { padding-left: 40px; padding-right: 40px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .aa-hero-line { font-size: 56px; }
}

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ast-container { padding-left: 24px; padding-right: 24px; }
  .aa-hero-line { font-size: 40px; line-height: .9; }
  .aa-hero { padding: 44px 8px 34px; }

  .woocommerce ul.products { grid-template-columns: 1fr; }
  .woocommerce ul.products li.product {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 18px; min-height: 0; padding: 18px 20px;
  }
}


/* --------------------------------------------------------------------------
 *    Astra leftovers
 *    -------------------------------------------------------------------------- */

/* Gallery zoom trigger is an icon, and the brand has no icon set. Theme support
 *    for zoom is already removed in functions.php; Astra re-adds the trigger. */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }

/* The theme credit in the footer is Astra's, not the client's. */
.ast-small-footer .ast-footer-site-title,
.site-footer .ast-footer-copyright a[href*="wpastra"],
.ast-small-footer a[href*="wpastra"] { display: none !important; }