/*
Theme Name: Peak Nootropics
Theme URI: https://peaknootropics.org
Description: Child theme of Astra. Replaces the shop catalogue with a client-rendered grid that reads from the PN Storefront Data plugin's JSON file. Checkout, account and the manual payment flow are untouched.
Author: Peak Nootropics
Template: astra
Version: 1.1
*/

/* =========================================================================
   DESIGN TOKENS
   -------------------------------------------------------------------------
   Change --pn-purple here and it updates everywhere. This is the one place
   the brand colour is defined.
   ========================================================================= */
:root {
  --pn-purple:       #8B3FC9;
  --pn-purple-deep:  #5E2A8C;
  --pn-ink:          #211A2E;
  --pn-body:         #453C56;
  --pn-muted:        #6E6580;
  --pn-faint:        #9A93A8;
  --pn-canvas:       #FAF9FC;
  --pn-line:         #E9E3F1;
  --pn-line-soft:    #F1EDF6;
  --pn-image-bg:     #F4F2F7;
  --pn-pass:         #1E9E63;
  --pn-wait:         #C8892A;

  --pn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pn-radius: 14px;
}

/* =========================================================================
   CATALOGUE
   ========================================================================= */

.pn-shop { max-width: 1240px; margin: 0 auto; padding: 8px 20px 80px; }

.pn-head { margin-bottom: 22px; }
.pn-head h1 {
  font-size: clamp(28px, 4.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--pn-ink);
  margin: 0 0 8px;
}
.pn-head p {
  margin: 0; max-width: 58ch;
  font-size: 14.5px; line-height: 1.55; color: var(--pn-body);
}

/* ---- search ---- */
.pn-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--pn-line); border-radius: 10px;
  background: #fff; padding: 0 14px; max-width: 420px; margin: 18px 0 14px;
}
.pn-search svg { flex-shrink: 0; opacity: .45; }
.pn-search input {
  flex: 1; border: 0; outline: 0; background: none;
  font-size: 14px; color: var(--pn-ink); padding: 11px 0;
}
.pn-search input::placeholder { color: var(--pn-faint); }

/* ---- filter chips ---- */
.pn-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.pn-chip {
  font-family: var(--pn-mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--pn-line); background: #fff; color: var(--pn-body);
  border-radius: 6px; padding: 7px 11px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  transition: border-color .14s, background .14s, color .14s;
}
.pn-chip:hover { border-color: var(--pn-purple); }
.pn-chip[aria-pressed="true"] {
  background: var(--pn-purple); border-color: var(--pn-purple); color: #fff;
}
.pn-chip .pn-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.pn-chip .pn-n { opacity: .6; }

/* ---- toolbar ---- */
.pn-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pn-muted);
  padding: 14px 0 9px; border-bottom: 1px solid var(--pn-line-soft);
  margin-bottom: 20px;
}
.pn-bar select {
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pn-purple);
  border: 0; background: none; cursor: pointer; padding: 0;
}

/* ---- grid ---- */
/* Width-driven, not breakpoint-driven: cards size themselves to the space,
   and the floor of 150px guarantees two across on any phone. */
.pn-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
@media (max-width: 780px) {
  .pn-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

.pn-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--pn-line); border-radius: var(--pn-radius);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.pn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(94, 42, 140, .12);
}

/* Image: 3:4 to match the photography, contained so nothing is cropped. */
.pn-shot {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--pn-image-bg); display: block;
}
.pn-shot img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Invisible overlay makes the whole image clickable without nesting links. */
.pn-shot-link { position: absolute; inset: 0; z-index: 1; }
.pn-shot-link:focus-visible { outline: 2px solid var(--pn-purple); outline-offset: -3px; }

.pn-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.94); border: 1px solid var(--pn-line);
  border-radius: 999px; padding: 4px 9px;
  font-family: var(--pn-mono); font-size: 10.5px; color: var(--pn-ink);
  text-decoration: none;
}
.pn-badge:hover { border-color: var(--pn-purple); }
.pn-badge i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pn-pass); display: block;
}

.pn-body { flex: 1; padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; }
.pn-title {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  margin: 0; color: var(--pn-ink);
}
.pn-title a { color: inherit; text-decoration: none; }
.pn-title a:hover { color: var(--pn-purple); }

.pn-mech {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; line-height: 1.4; color: var(--pn-muted);
}
.pn-mech:empty { display: none; }
.pn-mech i { width: 7px; height: 7px; border-radius: 2px; margin-top: 4px; flex-shrink: 0; }

.pn-dose {
  font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--pn-muted);
}

.pn-prices { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pn-now { font-size: 17px; font-weight: 700; color: var(--pn-ink); }
.pn-was { font-family: var(--pn-mono); font-size: 11px; color: var(--pn-faint); text-decoration: line-through; }
.pn-ea  { font-family: var(--pn-mono); font-size: 10.5px; color: var(--pn-faint); }

.pn-note {
  font-family: var(--pn-mono); font-size: 10px; line-height: 1.45;
  letter-spacing: .02em; color: var(--pn-wait);
}
.pn-note.pn-low { color: var(--pn-wait); }

.pn-buy {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  height: 36px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--pn-purple); color: var(--pn-purple);
  transition: background .15s, color .15s, border-color .15s;
}
.pn-buy:hover { background: var(--pn-purple); color: #fff; }
.pn-buy.pn-done { background: var(--pn-pass); border-color: var(--pn-pass); color: #fff; }
.pn-buy.pn-gone {
  border-color: var(--pn-line); color: var(--pn-faint);
  cursor: not-allowed; background: transparent;
}
.pn-buy:focus-visible { outline: 2px solid var(--pn-purple-deep); outline-offset: 2px; }

/* ---- skeletons ---- */
.pn-sk { border: 1px solid var(--pn-line); border-radius: var(--pn-radius); overflow: hidden; background: #fff; }
.pn-sk-shot { aspect-ratio: 3 / 4; }
.pn-sk-body { padding: 12px 13px 16px; }
.pn-sk-line { height: 10px; border-radius: 4px; margin-bottom: 9px; }
.pn-pulse {
  background: linear-gradient(100deg, #F1EEF6 20%, #F9F7FC 42%, #F1EEF6 62%);
  background-size: 220% 100%;
  animation: pn-shimmer 1.25s linear infinite;
}
@keyframes pn-shimmer { to { background-position: -220% 0; } }

.pn-empty {
  grid-column: 1 / -1; border: 1px dashed var(--pn-line);
  border-radius: var(--pn-radius); padding: 46px 20px; text-align: center;
  color: var(--pn-muted);
}
.pn-empty b { display: block; color: var(--pn-ink); font-size: 17px; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pn-card, .pn-card:hover, .pn-pulse { transition: none; transform: none; animation: none; }
}

/* Astra bits we don't want on the new catalogue page */
.woocommerce-shop .ast-woocommerce-container .woocommerce-products-header,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-products-header,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering { display: none; }

/* =========================================================================
   PRESERVED FROM ADDITIONAL CSS
   -------------------------------------------------------------------------
   Carried over from Appearance > Customize > Additional CSS, which does not
   follow a theme switch. The checkout rule below is load-bearing for the
   manual payment flow - it hides WooCommerce's payment method selector so
   customers are routed to the payment instructions page instead. Do not
   remove it. Duplicates merged and the stray backslash removed.
   ========================================================================= */

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.payment_box { display: none !important; }

.peak-pay-wrap { max-width: 850px; margin: 0 auto; }

.peak-warning {
  background: #f7efff;
  border-left: 5px solid #9b4dcc;
  padding: 18px; margin: 25px 0;
  font-size: 16px; border-radius: 14px;
}

.peak-pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 25px 0;
}

.peak-pay-grid button,
.back-btn {
  background: #9b4dcc; color: #fff; border: none;
  padding: 16px 20px; font-weight: 700; border-radius: 14px; cursor: pointer;
}

.peak-pay-box {
  border: 2px solid #9b4dcc; padding: 25px; margin-top: 25px;
  background: #fff; border-radius: 18px;
}

.peak-note { margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 12px; }

#payment-methods button,
.payment-btn { border-radius: 12px !important; padding: 14px 24px !important; }
#payment-content { border-radius: 16px !important; }
.notice-box { border-radius: 10px !important; }

/* Hide post meta / author bylines */
.product_meta .posted_in,
.product_meta .posted_by,
.woocommerce-product-details__short-description + p,
.woocommerce div.product .product-meta,
.product-meta,
.woocommerce div.product p.meta,
.search .entry-meta,
.search .posted-by,
.search .author,
.search .byline { display: none !important; }

/* ---- Legacy single-product CSS removed ----
   Those rules targeted Astra's product template with selectors like
   `.single-product div.product`, which outrank the new `.pn-` classes and
   forced the two-column layout back into a stack. The new product template
   carries its own styling. Payment-page and meta-hiding rules above are
   untouched.
   ------------------------------------------------------------------ */

.site-footer .ast-builder-grid-row {
  max-width: 1400px; margin: 0 auto; padding: 48px 32px;
}

/* =========================================================================
   SHOP + PRODUCT PAGE BACKGROUND
   -------------------------------------------------------------------------
   The purple gradient stays on the homepage. Catalogue and product pages go
   to a near-white canvas so the product photography and the white cards
   carry the page instead of competing with a gradient behind them.
   ========================================================================= */
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag,
body.single-product,
body.woocommerce-shop #page,
body.tax-product_cat #page,
body.single-product #page,
body.woocommerce-shop .site-content,
body.tax-product_cat .site-content,
body.single-product .site-content {
  background: var(--pn-canvas) !important;
  background-image: none !important;
}

/* =========================================================================
   MOBILE TUNING FOR THE CATALOGUE
   ========================================================================= */
@media (max-width: 780px) {
  .pn-shop { padding: 4px 14px 70px; }
  .pn-head h1 { font-size: 27px; }
  .pn-head p { font-size: 13.5px; }

  /* Chips scroll sideways instead of stacking into a tall wall. */
  .pn-chips {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 8px; padding: 0 14px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pn-chips::-webkit-scrollbar { display: none; }
  .pn-chip { font-size: 11px; padding: 6px 10px; }

  .pn-bar { font-size: 10px; letter-spacing: .06em; gap: 8px; }
  .pn-bar span { flex: 1; min-width: 0; }

  .pn-body { padding: 10px 10px 12px; gap: 6px; }
  .pn-title { font-size: 13.5px; }
  .pn-mech { font-size: 10.5px; }
  .pn-dose { font-size: 9.5px; }
  .pn-now { font-size: 15px; }
  .pn-ea { font-size: 9.5px; }
  .pn-badge { font-size: 9.5px; padding: 3px 7px; left: 6px; bottom: 6px; }
  .pn-buy { height: 33px; font-size: 11.5px; }
}

/* =========================================================================
   SINGLE PRODUCT
   ========================================================================= */

.pn-product {
  max-width: 1080px; margin: 0 auto; padding: 8px 20px 70px;
  display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
@media (max-width: 880px) {
  .pn-product { grid-template-columns: 1fr; gap: 18px; padding: 4px 14px 60px; }
}

.pn-back {
  grid-column: 1 / -1;
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pn-muted); text-decoration: none;
  margin-bottom: 2px; display: inline-block;
}
.pn-back:hover { color: var(--pn-purple); }

/* Box lives on .pn-gallery-main, not here. */

.pn-summary {
  background: #fff; border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius); padding: 26px 28px;
  box-shadow: 0 4px 18px rgba(94, 42, 140, .05);
}
@media (max-width: 880px) { .pn-summary { padding: 20px 18px; } }

.pn-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pn-purple); margin-bottom: 8px;
}
.pn-eyebrow i { width: 8px; height: 8px; border-radius: 2px; }

.pn-product h1 {
  font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -.03em;
  color: var(--pn-ink); margin: 0 0 8px; line-height: 1.1;
}

.pn-ident {
  font-family: var(--pn-mono); font-size: 11.5px; line-height: 1.7;
  color: var(--pn-muted); margin: 0 0 18px; word-break: break-word;
}

/* ---- analytics block ---- */
.pn-spec {
  border: 1px solid var(--pn-line); border-radius: 10px;
  overflow: hidden; margin-bottom: 18px; background: #fff;
}
.pn-spec-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; flex-wrap: wrap;
}
.pn-purity {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--pn-ink);
}
.pn-purity i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-pass); }
.pn-purity small {
  font-family: var(--pn-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: var(--pn-muted);
}
.pn-coa {
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pn-purple); text-decoration: none;
  white-space: nowrap;
}
.pn-coa:hover { text-decoration: underline; }

.pn-spec-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--pn-line-soft);
}
.pn-spec-grid div { padding: 11px 14px; }
.pn-spec-grid div + div { border-left: 1px solid var(--pn-line-soft); }
.pn-spec-grid dt {
  font-family: var(--pn-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pn-faint); margin: 0 0 3px;
}
.pn-spec-grid dd {
  font-family: var(--pn-mono); font-size: 12.5px; color: var(--pn-ink); margin: 0;
}

.pn-blurb { font-size: 14.5px; line-height: 1.6; color: var(--pn-body); margin: 0 0 20px; }

/* ---- price + buy ---- */
.pn-buyrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; padding-top: 16px; border-top: 1px solid var(--pn-line-soft);
  margin-bottom: 14px;
}
.pn-bigprice { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--pn-ink); line-height: 1.1; }
.pn-perunit {
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pn-muted); margin-top: 3px; display: block;
}
.pn-product .quantity input.qty {
  height: 44px; width: 74px; text-align: center;
  border: 1px solid var(--pn-line); border-radius: 999px;
  color: var(--pn-ink); background: #fff;
}
.pn-product form.cart { display: block; margin: 0 !important; }
.pn-product .pn-cart-row { display: flex; gap: 12px; align-items: center; }
.pn-product button.single_add_to_cart_button {
  flex: 1; height: 50px; border-radius: 999px;
  background: var(--pn-purple); border: 2px solid var(--pn-purple); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pn-product button.single_add_to_cart_button:hover {
  background: var(--pn-purple-deep); border-color: var(--pn-purple-deep);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(94, 42, 140, .25);
}

.pn-stockline {
  font-family: var(--pn-mono); font-size: 11px; line-height: 1.6;
  letter-spacing: .04em; color: var(--pn-wait); margin: 12px 0 0;
}
.pn-ruo {
  font-family: var(--pn-mono); font-size: 10.5px; line-height: 1.7;
  letter-spacing: .05em; text-transform: uppercase; color: var(--pn-faint);
  text-align: center; margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--pn-line-soft);
}

/* Description / tabs below the fold */
.pn-details { max-width: 1080px; margin: 0 auto; padding: 0 20px 70px; }
@media (max-width: 880px) { .pn-details { padding: 0 14px 60px; } }

/* Woo's add-to-cart form, laid out as a quantity + full-width button row */
.pn-cart-form form.cart {
  display: flex !important; gap: 12px; align-items: center; margin: 0 !important;
}
.pn-cart-form form.cart .quantity { flex: 0 0 auto; margin: 0; }
.pn-cart-form .stock { display: none; }
.pn-cart-form form.cart.variations_form { display: block !important; }

/* ---- Subscribe & save plans ---- */
.pn-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 480px) { .pn-plans { grid-template-columns: 1fr; } }
.pn-plan {
  display: block; cursor: pointer; position: relative;
  border: 1.5px solid var(--pn-line); border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s, background .15s;
}
.pn-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pn-plan:hover { border-color: #D6C8EA; }
.pn-plan:has(input:checked) { border-color: var(--pn-purple); background: #FBF7FF; }
.pn-plan--on { border-color: var(--pn-purple); background: #FBF7FF; }
.pn-plan-name { display: block; font-size: 13px; font-weight: 600; color: var(--pn-ink); }
.pn-plan-price { display: block; font-size: 16px; font-weight: 700; color: var(--pn-ink); margin-top: 2px; }
.pn-plan-note {
  display: block; font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--pn-muted); margin-top: 3px;
}

/* ---- Free shipping progress ---- */
.pn-ship { margin-top: 12px; }
.pn-ship-track {
  height: 4px; border-radius: 999px; background: var(--pn-line); overflow: hidden;
}
.pn-ship-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--pn-purple); transition: width .35s ease;
}
.pn-ship--done .pn-ship-fill { background: var(--pn-pass); }
.pn-ship-text {
  display: block; margin-top: 6px;
  font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pn-muted);
}
.pn-ship--done .pn-ship-text { color: var(--pn-pass); }

/* ---- Researchers also ordered ---- */
.pn-also { margin-top: 20px; }
.pn-also-head {
  display: block; font-family: var(--pn-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pn-muted);
  margin-bottom: 8px;
}
.pn-also-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid var(--pn-line); border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s;
}
.pn-also-item:hover { border-color: var(--pn-purple); }
.pn-also-item img {
  width: 44px; height: 59px; object-fit: contain;
  background: var(--pn-image-bg); border-radius: 6px; flex-shrink: 0;
}
.pn-also-body { flex: 1; min-width: 0; }
.pn-also-name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--pn-ink);
}
.pn-also-sub { display: block; font-size: 11.5px; color: var(--pn-muted); margin-top: 2px; }
.pn-also-price {
  font-size: 13.5px; font-weight: 600; color: var(--pn-ink); white-space: nowrap;
}
.pn-also-price del { display: none; }


/* =========================================================================
   MOBILE PRODUCT PAGE
   -------------------------------------------------------------------------
   A full 3:4 image eats most of a phone screen before the price and the
   button come into view. Capping its height by viewport rather than by a
   fixed pixel value keeps the whole buying decision close to the top.
   ========================================================================= */
@media (max-width: 880px) {
  .pn-product { gap: 14px; }
  .pn-back { margin-bottom: 0; font-size: 10.5px; }
  .pn-product h1 { font-size: 26px; }
  .pn-ident { font-size: 11px; line-height: 1.65; margin-bottom: 14px; }
  .pn-spec { margin-bottom: 14px; }
  .pn-spec-top { padding: 11px 12px; gap: 8px; }
  .pn-purity { font-size: 14px; }
  .pn-blurb { font-size: 13.5px; margin-bottom: 16px; }
  .pn-buyrow { padding-top: 13px; margin-bottom: 12px; }
  .pn-bigprice { font-size: 23px; }
  .pn-cart-form form.cart { gap: 10px; }
  .pn-product .quantity input.qty { height: 46px; width: 62px; }
  .pn-product button.single_add_to_cart_button { height: 46px; font-size: 14px; }
  .pn-also { margin-top: 16px; }
  .pn-ruo { margin-top: 14px; padding-top: 13px; font-size: 9.5px; }
}


/* =========================================================================
   CONTAINER WIDTH
   -------------------------------------------------------------------------
   Astra's container is narrower than the catalogue needs. These selectors
   are deliberately specific so they win against the theme's own rules
   without needing !important everywhere.
   ========================================================================= */
body.woocommerce-shop .site-content .ast-container,
body.tax-product_cat .site-content .ast-container,
body.tax-product_tag .site-content .ast-container,
body.single-product .site-content .ast-container,
body.woocommerce-shop .site-content > .ast-container,
body.single-product .site-content > .ast-container {
  max-width: 1360px;
  padding-left: 20px;
  padding-right: 20px;
}
body.woocommerce-shop #primary,
body.tax-product_cat #primary,
body.single-product #primary { max-width: none; width: 100%; margin: 0; }

/* Nothing should be able to push the page wider than the screen - horizontal
   overflow is what makes a phone open the page zoomed in. */
body.woocommerce-shop, body.tax-product_cat, body.single-product { overflow-x: hidden; }
.pn-shop, .pn-product { max-width: 100%; }

/* =========================================================================
   PRODUCT LAYOUT (specificity to beat Astra's own product rules)
   ========================================================================= */
.single-product div.product.pn-product {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 20px 70px;
  float: none;
}
.single-product div.product.pn-product > * { float: none; width: auto; }

/* ---- gallery with thumbnails ---- */
.pn-gallery { position: relative; }
.pn-gallery-main {
  background: var(--pn-image-bg); border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius); overflow: hidden;
}
.pn-gallery-main img {
  width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: contain; display: block;
}
.pn-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 8px;
}
.pn-thumb {
  background: var(--pn-image-bg); border: 1.5px solid var(--pn-line);
  border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0;
  aspect-ratio: 1 / 1; transition: border-color .15s;
}
.pn-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pn-thumb[aria-current="true"] { border-color: var(--pn-purple); }
.pn-thumb:hover { border-color: #D6C8EA; }

/* =========================================================================
   MOBILE PRODUCT: everything on one screen
   -------------------------------------------------------------------------
   The image and the identity block sit side by side, which buys back the
   vertical space the full-width image was eating. Below that the purity bar,
   description, price, button and the also-ordered row stack full width.
   ========================================================================= */
@media (max-width: 880px) {

  .single-product div.product.pn-product {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 4px 12px 50px;
  }

  /* Image + identity, side by side */
  .pn-product .pn-top {
    display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: start;
  }
  .pn-gallery-main img { aspect-ratio: 3 / 4; }
  .pn-thumbs { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 5px; }
  .pn-thumb { border-width: 1px; border-radius: 6px; }

  .pn-summary { padding: 0; border: 0; box-shadow: none; background: none; }
  .pn-eyebrow { font-size: 9.5px; margin-bottom: 4px; letter-spacing: .08em; }
  .pn-product h1 { font-size: 23px; margin-bottom: 5px; }
  .pn-ident { font-size: 10px; line-height: 1.55; margin-bottom: 0; }

  .pn-spec { margin: 10px 0; }
  .pn-spec-top { padding: 9px 11px; }
  .pn-purity { font-size: 13px; gap: 6px; }
  .pn-purity small { font-size: 9.5px; }
  .pn-coa { font-size: 10px; }

  .pn-blurb { font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }

  .pn-buyrow { padding-top: 10px; margin-bottom: 9px; }
  .pn-bigprice { font-size: 21px; }
  .pn-perunit { font-size: 10px; }
  .pn-product .quantity input.qty { height: 42px; width: 56px; }
  .pn-product button.single_add_to_cart_button { height: 42px; font-size: 14px; }

  .pn-ship { margin-top: 8px; }
  .pn-ship-text { font-size: 9.5px; margin-top: 4px; }

  .pn-also { margin-top: 10px; }
  .pn-also-head { font-size: 9.5px; margin-bottom: 5px; }
  .pn-also-item { padding: 7px 9px; gap: 9px; }
  .pn-also-item img { width: 34px; height: 45px; }
  .pn-also-name { font-size: 12.5px; }
  .pn-also-price { font-size: 12.5px; }

  .pn-ruo { margin-top: 10px; padding-top: 9px; font-size: 9px; line-height: 1.5; }
}

/* Desktop: gallery left, everything else right. One grid, two cells, so no
   leftover height gets distributed into gaps. */
@media (min-width: 881px) {
  .single-product div.product.pn-product { display: block; }
  .pn-product .pn-top {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .pn-product .pn-col { display: flex; flex-direction: column; gap: 16px; }
  .pn-summary { padding: 22px 24px; margin: 0; }
  .pn-gallery { position: sticky; top: 24px; }
}

/* =========================================================================
   MOBILE PRODUCT, TIGHTENED
   -------------------------------------------------------------------------
   Bigger image, less padding, no stray boxes.
   ========================================================================= */
@media (max-width: 880px) {
  .pn-product .pn-top {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 12px;
    align-items: start;
  }
  .pn-product .pn-col { display: contents; }
  .pn-product .pn-gallery  { grid-column: 1; grid-row: 1; }
  .pn-product .pn-identity { grid-column: 2; grid-row: 1; }
  .pn-product .pn-summary  { grid-column: 1 / -1; grid-row: 2; }

  .pn-gallery-main { border-radius: 10px; }
  .pn-thumbs { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }

  .pn-product h1 { font-size: 25px; line-height: 1.08; }
  .pn-ident { font-size: 10.5px; }
  .pn-summary { padding: 0; border: 0; background: none; box-shadow: none; margin: 0; }
}

/* =========================================================================
   WIDTH
   -------------------------------------------------------------------------
   Astra's .ast-container is a flex row (it exists to sit content beside a
   sidebar). Our catalogue is a single full-width child, and a flex item
   sizes to its content rather than filling the row - which is what collapsed
   the grid to two columns regardless of how wide the container was.

   Switching the container to block on these pages is enough; the catalogue
   then sets its own max-width and centres normally. Scoped to shop and
   product pages so the rest of the site keeps Astra's layout.
   ========================================================================= */
body.woocommerce-shop .site-content > .ast-container,
body.tax-product_cat .site-content > .ast-container,
body.tax-product_tag .site-content > .ast-container,
body.single-product .site-content > .ast-container {
  display: block !important;
}

/* Belt and braces: if the container stays flex for any reason, fill the row. */
.pn-shop,
.single-product div.product.pn-product {
  flex: 1 1 100%;
  min-width: 0;
}

body.woocommerce-shop #primary,
body.tax-product_cat #primary,
body.single-product #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

.pn-shop {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 24px 80px;
}
.single-product div.product.pn-product {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px 70px;
}

@media (max-width: 880px) {
  .pn-shop { padding: 4px 12px 60px; }
  .single-product div.product.pn-product { padding: 4px 12px 50px; }
}

/* =========================================================================
   MOBILE PRODUCT, TIGHTENED
   -------------------------------------------------------------------------
   Bigger image, less padding, no stray boxes.
   ========================================================================= */
@media (max-width: 880px) {
  .pn-product .pn-top {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 12px;
    align-items: start;
  }
  .pn-product .pn-col { display: contents; }
  .pn-product .pn-gallery  { grid-column: 1; grid-row: 1; }
  .pn-product .pn-identity { grid-column: 2; grid-row: 1; }
  .pn-product .pn-summary  { grid-column: 1 / -1; grid-row: 2; }

  .pn-gallery-main { border-radius: 10px; }
  .pn-thumbs { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }

  .pn-product h1 { font-size: 25px; line-height: 1.08; }
  .pn-ident { font-size: 10.5px; }
  .pn-summary { padding: 0; border: 0; background: none; box-shadow: none; margin: 0; }
}

/* =========================================================================
   WIDTH: UNCONSTRAIN THE WRAPPERS
   -------------------------------------------------------------------------
   Astra's shop wrappers are narrower than a catalogue needs, and which one
   applies the limit differs by layout setting. Rather than target a single
   selector, every wrapper between <body> and the catalogue is released, and
   the catalogue itself sets the real width. Scoped to shop and product pages
   only, so nothing else on the site is affected.

   `overflow: visible` matters as much as the width here: a wrapper that
   clips its overflow will hide anything wider than itself.
   ========================================================================= */
body.woocommerce-shop .site-content,
body.woocommerce-shop .site-content > .ast-container,
body.woocommerce-shop .ast-container,
body.woocommerce-shop #primary,
body.woocommerce-shop .site-main,
body.woocommerce-shop .ast-woocommerce-container,
body.woocommerce-shop .entry-content,
body.tax-product_cat .site-content,
body.tax-product_cat .site-content > .ast-container,
body.tax-product_cat .ast-container,
body.tax-product_cat #primary,
body.tax-product_cat .site-main,
body.tax-product_cat .ast-woocommerce-container,
body.tax-product_tag .ast-container,
body.tax-product_tag #primary,
body.single-product .site-content,
body.single-product .site-content > .ast-container,
body.single-product .ast-container,
body.single-product #primary,
body.single-product .site-main,
body.single-product .ast-woocommerce-container,
body.single-product .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The catalogue and product page set their own width, centred normally. */
.pn-shop {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 24px 80px;
}
.single-product div.product.pn-product {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px 70px;
}

@media (max-width: 880px) {
  .pn-shop { padding: 4px 12px 60px; }
  .single-product div.product.pn-product { padding: 4px 12px 50px; }
}

/* =========================================================================
   MOBILE PRODUCT: buying panel beside the image
   -------------------------------------------------------------------------
   `display: contents` on the two wrappers lets the summary's children become
   grid items in their own right, so the purity bar, price and button can sit
   in the right-hand column next to the photo while the wider blocks below
   still run full width.
   ========================================================================= */
@media (max-width: 880px) {

  .pn-product .pn-top {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 8px 12px;
    align-items: start;
  }
  .pn-product .pn-col,
  .pn-product .pn-summary { display: contents; }

  .pn-product .pn-gallery   { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .pn-product .pn-identity  { grid-column: 2; grid-row: 1; }
  .pn-product .pn-spec      { grid-column: 2; grid-row: 2; margin: 0; }
  .pn-product .pn-buyrow    { grid-column: 2; grid-row: 3; padding-top: 0; border-top: 0; margin: 0; }
  .pn-product .pn-cart-form { grid-column: 2; grid-row: 4; }

  /* Wider blocks run the full width underneath. */
  .pn-product .pn-blurb { grid-column: 1 / -1; grid-row: 5; margin: 4px 0 0; }
  .pn-product .pn-ship  { grid-column: 1 / -1; grid-row: 6; margin: 0; }
  .pn-product .pn-also  { grid-column: 1 / -1; grid-row: 7; margin: 0; }
  .pn-product .pn-stockline { grid-column: 1 / -1; grid-row: 8; margin: 0; }
  .pn-product .pn-ruo   { grid-column: 1 / -1; grid-row: 9; margin: 2px 0 0; padding-top: 8px; }

  /* The purity bar stacks its two halves at this width. */
  .pn-spec-top { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; }
  .pn-purity { font-size: 12.5px; }
  .pn-coa { font-size: 10px; }

  .pn-thumbs { grid-template-columns: repeat(3, 1fr); }
  .pn-buyrow .pn-bigprice { font-size: 19px; }
  .pn-cart-form form.cart { gap: 8px; }
  .pn-product .quantity input.qty { height: 40px; width: 50px; }
  .pn-product button.single_add_to_cart_button { height: 40px; font-size: 13.5px; }

  /* The store notice is fixed to the bottom of the screen and covers content. */
  body.single-product .pn-product { padding-bottom: 90px; }
  body.woocommerce-shop .pn-shop { padding-bottom: 90px; }
}

/* =========================================================================
   PRODUCT DETAILS PANEL
   ========================================================================= */
.pn-details {
  border-top: 1px solid var(--pn-line);
  margin-top: 44px; padding-top: 36px;
}
.pn-details-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
@media (max-width: 880px) {
  .pn-details { margin-top: 26px; padding-top: 22px; }
  .pn-details-inner { grid-template-columns: 1fr; gap: 26px; }
}
.pn-details-block h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--pn-ink); margin: 0 0 14px;
}
.pn-table { margin: 0; }
.pn-table > div {
  display: grid; grid-template-columns: 40% 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--pn-line-soft);
}
.pn-table dt {
  font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pn-muted); margin: 0;
}
.pn-table dd {
  font-family: var(--pn-mono); font-size: 12px; color: var(--pn-ink);
  margin: 0; word-break: break-word;
}
.pn-doc-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  border: 1.5px solid var(--pn-purple); border-radius: 999px;
  padding: 9px 20px; color: var(--pn-purple);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
}
.pn-doc-btn:hover { background: var(--pn-purple); color: #fff; }
.pn-longform { font-size: 14.5px; line-height: 1.7; color: var(--pn-body); }
.pn-longform p { margin: 0 0 1em; }
.pn-longform p:last-child { margin-bottom: 0; }

/* =========================================================================
   HOME + COA LIBRARY PAGES
   ========================================================================= */
body.page-template-template-home .site-content > .ast-container,
body.page-template-template-coa-library .site-content > .ast-container { display: block !important; }
body.page-template-template-home #primary,
body.page-template-template-coa-library #primary { width: 100% !important; max-width: 100% !important; }
body.page-template-template-home .entry-header,
body.page-template-template-coa-library .entry-header { display: none; }

.pn-home { max-width: 1280px; margin: 0 auto; padding: 8px 24px 90px; }
@media (max-width: 880px) { .pn-home { padding: 4px 14px 70px; } }

/* ---- hero ---- */
.pn-hero { padding: 40px 0 46px; max-width: 820px; }
@media (max-width: 880px) { .pn-hero { padding: 22px 0 30px; } }
.pn-hero-eyebrow {
  display: inline-block; font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pn-purple);
  margin-bottom: 16px;
}
.pn-hero h1 {
  font-size: clamp(32px, 5.4vw, 54px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.04; color: var(--pn-ink); margin: 0 0 16px; text-wrap: balance;
}
.pn-hero-sub {
  font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.6; color: var(--pn-body);
  max-width: 60ch; margin: 0 0 26px;
}
.pn-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .16s, color .16s, transform .16s;
}
.pn-btn-solid { background: var(--pn-purple); color: #fff; }
.pn-btn-solid:hover { background: var(--pn-purple-deep); color: #fff; transform: translateY(-1px); }
.pn-btn-ghost { border: 1.5px solid var(--pn-purple); color: var(--pn-purple); }
.pn-btn-ghost:hover { background: var(--pn-purple); color: #fff; }

.pn-stats {
  display: flex; gap: 44px; flex-wrap: wrap; margin: 40px 0 0;
  padding-top: 26px; border-top: 1px solid var(--pn-line);
}
@media (max-width: 880px) { .pn-stats { gap: 26px; margin-top: 26px; padding-top: 18px; } }
.pn-stats dt {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.03em;
  color: var(--pn-ink); margin: 0 0 4px;
}
.pn-stats dd {
  font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pn-muted); margin: 0;
}

/* ---- sections ---- */
.pn-section { padding: 40px 0 0; }
.pn-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.pn-section-head h2 {
  font-size: clamp(19px, 2.4vw, 24px); font-weight: 700;
  letter-spacing: -.02em; color: var(--pn-ink); margin: 0;
}
.pn-section-head a {
  font-family: var(--pn-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pn-purple); text-decoration: none;
  white-space: nowrap;
}
.pn-section-head a:hover { text-decoration: underline; }

.pn-class-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.pn-class-card {
  display: block; background: #fff; border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius); padding: 16px 17px; text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.pn-class-card:hover {
  border-color: var(--pn-purple); transform: translateY(-2px);
  box-shadow: 0 12px 28px -20px rgba(94, 42, 140, .5);
}
.pn-class-dot { display: block; width: 10px; height: 10px; border-radius: 3px; margin-bottom: 12px; }
.pn-class-name { display: block; font-size: 15px; font-weight: 600; color: var(--pn-ink); }
.pn-class-n {
  display: block; font-family: var(--pn-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pn-muted); margin-top: 4px;
}

.pn-promises {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--pn-line);
}
.pn-promise h3 { font-size: 15px; font-weight: 700; color: var(--pn-ink); margin: 0 0 7px; }
.pn-promise p { font-size: 13.5px; line-height: 1.6; color: var(--pn-body); margin: 0; }

/* ---- COA library ---- */
.pn-coa-intro p { font-size: 14.5px; line-height: 1.55; color: var(--pn-body); }
.pn-coa-list { display: flex; flex-direction: column; gap: 8px; }
.pn-coa-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  background: #fff; border: 1px solid var(--pn-line);
  border-radius: 11px; padding: 10px 14px; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.pn-coa-row:hover { border-color: var(--pn-purple); transform: translateX(2px); }
.pn-coa-shot {
  width: 46px; height: 58px; background: var(--pn-image-bg);
  border-radius: 6px; overflow: hidden; display: block;
}
.pn-coa-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pn-coa-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--pn-ink); }
.pn-coa-meta {
  display: block; font-family: var(--pn-mono); font-size: 10.5px;
  color: var(--pn-muted); margin-top: 3px;
}
.pn-coa-purity {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pn-mono); font-size: 12.5px; color: var(--pn-ink);
}
.pn-coa-purity i { width: 6px; height: 6px; border-radius: 50%; background: var(--pn-pass); }
.pn-coa-purity em { font-style: normal; color: var(--pn-muted); font-size: 10.5px; }
.pn-coa-open {
  font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pn-purple); white-space: nowrap;
}
@media (max-width: 680px) {
  .pn-coa-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 9px 11px; }
  .pn-coa-shot { width: 40px; height: 50px; }
  .pn-coa-name { font-size: 13.5px; }
  .pn-coa-open { display: none; }
  .pn-coa-purity { font-size: 11.5px; }
}

/* =========================================================================
   HOME REFINEMENTS
   ========================================================================= */

/* Hero: text left, product shot right. */
.pn-hero { max-width: none; }
@media (min-width: 981px) {
  .pn-hero--split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: 48px; align-items: center;
  }
  .pn-hero-text { max-width: 640px; }
}
.pn-hero-media { display: none; }
@media (min-width: 981px) {
  .pn-hero-media { display: block; }
  .pn-hero-media img {
    width: 100%; height: auto; max-height: 460px;
    object-fit: contain; display: block;
    filter: drop-shadow(0 24px 44px rgba(94, 42, 140, .22));
  }
}

/* Class grid: three across so six classes make two even rows. */
@media (min-width: 981px) {
  .pn-class-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 980px) {
  .pn-class-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile home: tighter hero, and class cards that don't eat the screen. */
@media (max-width: 880px) {
  .pn-hero { padding: 16px 0 20px; }
  .pn-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .pn-hero-sub { font-size: 14.5px; margin-bottom: 18px; }
  .pn-hero-cta { gap: 8px; }
  .pn-hero-cta .pn-btn { height: 44px; padding: 0 20px; font-size: 14px; flex: 1 1 auto; }
  .pn-stats { gap: 20px; margin-top: 22px; padding-top: 16px; }
  .pn-stats dt { font-size: 20px; }
  .pn-stats dd { font-size: 9px; letter-spacing: .08em; }

  .pn-section { padding: 26px 0 0; }
  .pn-section-head { margin-bottom: 12px; }

  /* Compact two-up cards instead of full-width blocks. */
  .pn-class-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pn-class-card { padding: 10px 11px; border-radius: 10px; }
  .pn-class-dot { width: 8px; height: 8px; margin-bottom: 7px; }
  .pn-class-name { font-size: 13px; line-height: 1.25; }
  .pn-class-n { font-size: 9px; margin-top: 2px; }

  .pn-promises { margin-top: 28px; padding-top: 22px; gap: 14px; }
}

/* =========================================================================
   MOBILE PRODUCT, REBUILT
   -------------------------------------------------------------------------
   Row 1: photo and identity side by side.
   Row 2: short description, full width.
   Row 3: one bordered card holding purity, price, button, shipping progress
          and the cross-sell - so everything involved in the decision is in
          a single visible block rather than scattered down the page.
   ========================================================================= */
@media (max-width: 880px) {

  .pn-product .pn-top {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 10px 12px;
  }
  .pn-product .pn-col,
  .pn-product .pn-summary { display: contents; }

  .pn-product .pn-gallery  { grid-column: 1; grid-row: 1; align-self: start; }
  .pn-product .pn-identity { grid-column: 2; grid-row: 1; align-self: start; }
  .pn-product .pn-blurb    { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 13px; }

  /* The buy card. Contents are laid out inside a single bordered box. */
  .pn-product .pn-spec      { grid-column: 1 / -1; grid-row: 3; }
  .pn-product .pn-buyrow    { grid-column: 1 / -1; grid-row: 4; }
  .pn-product .pn-cart-form { grid-column: 1 / -1; grid-row: 5; }
  .pn-product .pn-ship      { grid-column: 1 / -1; grid-row: 6; }
  .pn-product .pn-stockline { grid-column: 1 / -1; grid-row: 7; }
  .pn-product .pn-also      { grid-column: 1 / -1; grid-row: 8; }
  .pn-product .pn-ruo       { grid-column: 1 / -1; grid-row: 9; }

  /* Draw the box by giving the run of rows a shared background. */
  .pn-product .pn-spec,
  .pn-product .pn-buyrow,
  .pn-product .pn-cart-form,
  .pn-product .pn-ship,
  .pn-product .pn-stockline,
  .pn-product .pn-also,
  .pn-product .pn-ruo {
    background: #fff;
    border-left: 1px solid var(--pn-line);
    border-right: 1px solid var(--pn-line);
    margin: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
  .pn-product .pn-spec {
    border-top: 1px solid var(--pn-line);
    border-radius: 12px 12px 0 0;
    padding-top: 14px; padding-bottom: 0;
    margin-top: 4px;
  }
  .pn-product .pn-spec .pn-spec-top {
    border: 1px solid var(--pn-line); border-radius: 9px;
    flex-direction: row; align-items: center; padding: 9px 11px;
  }
  .pn-product .pn-buyrow {
    padding-top: 14px; padding-bottom: 0; border-top: 0;
  }
  .pn-product .pn-cart-form { padding-top: 10px; }
  .pn-product .pn-ship      { padding-top: 12px; }
  .pn-product .pn-also      { padding-top: 14px; }
  .pn-product .pn-ruo {
    border-bottom: 1px solid var(--pn-line);
    border-radius: 0 0 12px 12px;
    padding-top: 12px; padding-bottom: 14px; margin-top: 12px;
  }

  /* Price row: no empty column beside it. */
  .pn-product .pn-buyrow { display: block; }
  .pn-product .pn-bigprice { font-size: 22px; }
  .pn-product .pn-perunit { margin-top: 2px; }

  .pn-gallery-main img { aspect-ratio: 3 / 4; }
  .pn-product .pn-identity h1 { font-size: 24px; }
}

/* =========================================================================
   KILLING ASTRA'S CONTENT PADDING ON OUR PAGES
   -------------------------------------------------------------------------
   Astra pads #content and .ast-container generously. On pages where our own
   template controls the spacing that padding is just a gap under the header.
   ========================================================================= */
body.single-product #content.site-content,
body.woocommerce-shop #content.site-content,
body.tax-product_cat #content.site-content,
body.page-template-template-home #content.site-content,
body.page-template-template-coa-library #content.site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.single-product #content .ast-container,
body.woocommerce-shop #content .ast-container,
body.tax-product_cat #content .ast-container,
body.page-template-template-home #content .ast-container,
body.page-template-template-coa-library #content .ast-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.single-product .site-main,
body.woocommerce-shop .site-main,
body.page-template-template-home .site-main { padding: 0 !important; margin: 0 !important; }

/* =========================================================================
   MOBILE PRODUCT: cap the photo so the button stays on screen
   -------------------------------------------------------------------------
   A 3:4 image at 42% width is taller than the text beside it, which both
   pushes the buy card down and leaves empty space to the right of the
   identity block. Capping by viewport height fixes both at once.
   ========================================================================= */
@media (max-width: 880px) {
  .pn-product .pn-top { gap: 8px 12px; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }

  .pn-gallery-main { aspect-ratio: auto; }
  .pn-gallery-main img {
    aspect-ratio: auto;
    height: auto;
    max-height: 25vh;
    width: 100%;
    object-fit: contain;
  }
  .pn-thumbs { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
  .pn-thumb { border-radius: 5px; }

  .pn-product .pn-identity { align-self: start; }
  .pn-product .pn-identity h1 { font-size: 22px; margin-bottom: 4px; }
  .pn-ident { font-size: 10px; line-height: 1.5; }

  .pn-product .pn-blurb { margin: 0 !important; padding: 0; font-size: 12.5px; line-height: 1.45; }
  .pn-product .pn-spec { margin-top: 0 !important; }
}

/* =========================================================================
   ASTRA'S WOOCOMMERCE WRAPPER
   -------------------------------------------------------------------------
   Reported 40px top and bottom in the layout inspector. That is the gap
   between the header and "Catalog" on product pages.
   ========================================================================= */
body.single-product .ast-woocommerce-container,
body.woocommerce-shop .ast-woocommerce-container,
body.tax-product_cat .ast-woocommerce-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================================
   MOBILE PRODUCT: final layout
   -------------------------------------------------------------------------
   Measured from the inspector: identity is 100 tall, gallery about 245. The
   fix is to fill that column rather than shrink the photo - purity and price
   move up beside the image, which uses the height the photo already occupies
   and pulls Add to Cart higher at the same time.

   Row gap is zero through the card rows so the buy panel reads as one solid
   block instead of five separate cards.
   ========================================================================= */
@media (max-width: 880px) {

  .pn-product .pn-top {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    column-gap: 11px;
    row-gap: 0;
    align-items: start;
  }
  .pn-product .pn-col,
  .pn-product .pn-summary { display: contents; }

  /* Left: photo spans the three blocks stacked beside it. */
  .pn-product .pn-gallery { grid-column: 1; grid-row: 1 / span 3; }
  .pn-gallery-main img { max-height: 180px; height: auto; width: 100%; aspect-ratio: auto; object-fit: contain; }
  .pn-thumbs { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }

  /* Right: identity, purity, price. */
  .pn-product .pn-identity { grid-column: 2; grid-row: 1; }
  .pn-product .pn-spec     { grid-column: 2; grid-row: 2; margin: 9px 0 0; padding: 0; border: 0; background: none; }
  .pn-product .pn-buyrow   { grid-column: 2; grid-row: 3; margin: 9px 0 0; padding: 0; border: 0; background: none; display: block; }

  .pn-product .pn-spec .pn-spec-top {
    border: 1px solid var(--pn-line); border-radius: 9px; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px;
  }
  .pn-purity { font-size: 12.5px; }
  .pn-purity small { font-size: 9.5px; }
  .pn-coa { font-size: 10px; }
  .pn-bigprice { font-size: 21px; }
  .pn-perunit { font-size: 9.5px; margin-top: 1px; }

  /* Full width below: one continuous panel, no gaps between its rows. */
  .pn-product .pn-cart-form { grid-column: 1 / -1; grid-row: 4; margin-top: 13px; }
  .pn-product .pn-ship      { grid-column: 1 / -1; grid-row: 5; margin: 0; }
  .pn-product .pn-stockline { grid-column: 1 / -1; grid-row: 6; margin: 0; }
  .pn-product .pn-also      { grid-column: 1 / -1; grid-row: 7; margin: 0; }
  .pn-product .pn-ruo       { grid-column: 1 / -1; grid-row: 8; margin: 0; }
  .pn-product .pn-blurb     { grid-column: 1 / -1; grid-row: 9; margin: 14px 0 0; font-size: 12.5px; }

  .pn-product .pn-cart-form,
  .pn-product .pn-ship,
  .pn-product .pn-stockline,
  .pn-product .pn-also,
  .pn-product .pn-ruo {
    background: #fff;
    border-left: 1px solid var(--pn-line);
    border-right: 1px solid var(--pn-line);
    padding-left: 13px; padding-right: 13px;
  }
  .pn-product .pn-cart-form {
    border-top: 1px solid var(--pn-line);
    border-radius: 12px 12px 0 0;
    padding-top: 13px; padding-bottom: 0;
  }
  .pn-product .pn-ship      { padding-top: 12px; }
  .pn-product .pn-also      { padding-top: 14px; }
  .pn-product .pn-ruo {
    border-bottom: 1px solid var(--pn-line);
    border-radius: 0 0 12px 12px;
    padding-top: 12px; padding-bottom: 13px;
  }

  .pn-product .quantity input.qty { height: 44px; width: 58px; }
  .pn-product button.single_add_to_cart_button { height: 44px; font-size: 14.5px; }
  .pn-product .pn-identity h1 { font-size: 22px; margin-bottom: 4px; }
  .pn-ident { font-size: 10px; line-height: 1.5; }
}

/* =========================================================================
   MOBILE: price line, and the description given room
   -------------------------------------------------------------------------
   Per-unit price sits beside the headline price rather than under it, which
   saves a line in a narrow column. The short description moves above the buy
   panel: it stays full width, so a long description on another product can't
   unbalance the two columns the way it would if it sat beside the photo.
   ========================================================================= */
@media (max-width: 880px) {

  .pn-product .pn-buyrow > div {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  }
  .pn-product .pn-perunit { margin-top: 0; }

  /* Description above the card, not trailing off the end of the page. */
  .pn-product .pn-blurb {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 13px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .pn-product .pn-cart-form { grid-row: 5; margin-top: 12px; }
  .pn-product .pn-ship      { grid-row: 6; }
  .pn-product .pn-stockline { grid-row: 7; }
  .pn-product .pn-also      { grid-row: 8; }
  .pn-product .pn-ruo       { grid-row: 9; }

  /* Clearance for the fixed store notice at the bottom of the screen. */
  body.single-product .pn-details { padding-bottom: 80px; }
}

/* A little breathing room above the short description on mobile. */
@media (max-width: 880px) {
  .pn-product .pn-blurb { margin-top: 22px; }
}