/*
Theme Name: Integratide
Theme URI: https://integratide.com
Author: Integratide Family Homestead Labs
Description: Custom WooCommerce theme for the Integratide research-peptide store. Replicates the Integratide brand: warm paper tones, pine green, ochre, the homestead seal, and clean research-lab typography. Includes WooCommerce support styled to match.
Version: 1.8.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: integratide
*/

:root{
  --pine:#1d3b2a; --pine2:#2f5a40; --paper:#f4ecdc; --paper2:#ece0c8;
  --cream:#fbf6ea; --ochre:#c79234; --ochre-d:#a9781f; --oxblood:#803131;
  --ink:#2a2118; --sage:#9bae8f; --muted:#5f5544;
  --display:'Fraunces',Georgia,serif; --body:'Public Sans',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --maxw:1180px; --r:14px; --shadow:0 1px 0 rgba(42,33,24,.06),0 12px 30px -18px rgba(29,59,42,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-d)}
.mono{font-family:var(--mono)}

/* ---------- announcement ---------- */
.announce{background:var(--pine);color:#f1e8d6;font-family:var(--mono);font-size:13px;
  letter-spacing:.02em;text-align:center;padding:8px 14px}
.announce b{color:var(--ochre)}

/* ---------- header ---------- */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(244,236,220,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--paper2)}
.nav{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:46px;height:46px}
.brand .name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--pine)}
.brand .name small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.nav .links{display:flex;gap:22px;margin-left:auto;align-items:center;list-style:none;margin-block:0;padding:0}
.nav .links a{font-size:14.5px;font-weight:500;padding:6px 2px;border-bottom:2px solid transparent}
.nav .links a:hover,.nav .links li.current-menu-item>a{border-color:var(--ochre)}
.cartbtn{display:flex;align-items:center;gap:7px;background:var(--pine);color:var(--cream);
  border:none;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px}
.cartbtn .count{background:var(--ochre);color:var(--pine);border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;padding:0 5px}
.menutoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--pine);
  border-radius:9px;padding:7px 10px;color:var(--pine);font-weight:600}
/* header product search */
.header-search{display:flex;align-items:center;gap:7px;background:var(--cream);border:1.5px solid var(--paper2);
  border-radius:999px;padding:7px 14px;color:var(--muted)}
.header-search:focus-within{border-color:var(--pine)}
.header-search__go{display:flex;align-items:center;justify-content:center;padding:0;background:none;
  border:none;color:inherit;line-height:0}
.header-search__go:hover{color:var(--pine)}
.header-search input[type=search]{border:none;background:none;outline:none;font-family:var(--body);
  font-size:14px;color:var(--ink);width:150px}
.header-search input[type=search]::placeholder{color:var(--muted)}

/* ---------- buttons (also map WooCommerce buttons) ---------- */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;font-weight:600;
  font-size:15px;padding:13px 24px;border:1.6px solid var(--pine);background:var(--pine);
  color:var(--cream);transition:transform .12s ease, background .2s;line-height:1.1}
.btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  transform:translateY(-1px);background:var(--pine2);color:var(--cream)}
.btn.alt{background:transparent;color:var(--pine)}
.btn.alt:hover{background:var(--pine);color:var(--cream)}
.btn.gold,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--ochre);border-color:var(--ochre);color:var(--pine)}
.btn.gold:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--ochre-d);border-color:var(--ochre-d);color:var(--pine)}
.btn.block{width:100%;justify-content:center}
.btn.sm{padding:9px 16px;font-size:13.5px}
/* WooCommerce "Place order" — full-width, large and easy to find at the end of
   checkout (centre the label; text-align has no effect on flex content). */
.woocommerce #place_order{justify-content:center;width:100%;font-size:17px;padding:16px 28px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(140% 120% at 80% -10%, #2f5a40 0%, #1d3b2a 46%, #16301f 100%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding:70px 22px 84px;color:#f3ead8}
.hero h1{font-size:clamp(40px,6vw,72px);color:#fbf6ea;font-weight:600}
.hero h1 em{font-style:italic;color:var(--ochre)}
.hero p.lead{font-size:18px;max-width:46ch;color:#dcd0b8;margin:20px 0 30px}
.hero .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero .pill{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(243,234,216,.28);border-radius:999px;padding:7px 13px;color:#e7dcc4}
.hero-art{filter:drop-shadow(0 26px 40px rgba(0,0,0,.4))}
.hero-seal{width:min(360px,80%);margin:0 auto}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .ctas .btn{border-color:transparent}

/* ---------- trust ticker ---------- */
.trust{background:var(--cream);border-bottom:1px solid var(--paper2)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper2)}
.trust .cell{background:var(--cream);padding:22px 20px}
.trust .cell p{margin:0;font-size:13.5px;color:var(--muted)}

/* ---------- sections ---------- */
section.pad{padding:72px 0}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sechead h2{font-size:clamp(28px,4vw,42px);color:var(--pine)}
.sechead p{margin:8px 0 0;color:var(--muted);max-width:54ch}

/* ---------- story strip ---------- */
.story{background:var(--pine);color:#ece1cb}
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:74px 22px}
.story h2{color:var(--cream);font-size:clamp(28px,4vw,44px)}
.story p{color:#d5c9b1;margin:16px 0 0}
.story .quote{font-family:var(--display);font-style:italic;font-size:22px;color:var(--ochre);
  border-left:3px solid var(--ochre);padding-left:18px;margin-top:24px}
.story-card{background:#16301f;border:1px solid #2f5a40;border-radius:18px;padding:30px}
.story-card .row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px dashed #34543f;font-size:14px}
.story-card .row:last-child{border:none}
.story-card .row span:first-child{color:#bdae90}
.story-card .row span:last-child{font-family:var(--mono);color:var(--cream)}

/* ---------- newsletter ---------- */
.news{background:var(--ochre);color:var(--pine)}
.news .wrap{padding:54px 22px;text-align:center}
.news h2{font-size:clamp(26px,4vw,40px)}
.news p{margin:10px auto 22px;max-width:50ch;color:#5b4d24}
.news form{display:flex;gap:10px;max-width:430px;margin:0 auto}
/* The email field mirrors the header search box's structure: a rounded cream
   shell holds a transparent, square-cornered input. On focus the shell border
   turns pine and the global *:focus-visible glow renders as a SQUARE ochre ring
   on the cream interior — the exact look of the search box. */
.news .news-field{flex:1;display:flex;align-items:center;background:var(--cream);
  border:1.5px solid var(--paper2);border-radius:999px;padding:13px 18px}
.news .news-field:focus-within{border-color:var(--pine)}
.news input{flex:1;min-width:0;border:none;border-radius:0;background:none;outline:none;
  font-family:var(--body);font-size:14px;color:var(--ink)}
.news input::placeholder{color:var(--muted)}
/* "Get my code" button: pine green so it stands out from the ochre band */
.news-submit{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.news-submit:hover{background:var(--pine2);border-color:var(--pine2);color:var(--cream)}

/* ---------- generic page ---------- */
.site-main>.page{padding:54px 0 72px;min-height:50vh}
.page .entry-content{font-size:16px;color:#4a4234;max-width:820px}
.page .entry-content h2{color:var(--pine);font-size:clamp(26px,4vw,40px);margin:28px 0 12px}
.page .entry-content h3{color:var(--pine);font-size:22px;margin:22px 0 10px}
.breadcrumb,.woocommerce-breadcrumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:18px}
.breadcrumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--ochre-d)}
h1.entry-title,.page-title{font-size:clamp(30px,4.5vw,46px);color:var(--pine);margin:6px 0 18px}

/* ---------- research-use notice ---------- */
.ruobox{margin-top:22px;background:#f6ece1;border:1px solid var(--oxblood);border-left-width:4px;
  border-radius:10px;padding:14px 16px;font-size:13px;color:#5e3a30}
.ruobox b{color:var(--oxblood);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.purity{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  color:var(--pine);background:#e4ecdf;border:1px solid var(--sage);border-radius:999px;padding:3px 9px}

/* ============================================================
   WooCommerce — make the default markup match the brand
   ============================================================ */
.woocommerce .wrap-wc{max-width:var(--maxw);margin:0 auto;padding:54px 22px 72px}
.woocommerce-products-header__title.page-title{margin-bottom:8px}
.term-description,.woocommerce-products-header{color:var(--muted)}

/* product loop */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:22px;margin:0}
.woocommerce ul.products li.product{background:var(--cream);border:1px solid var(--paper2);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);padding:0 0 16px;
  transition:transform .14s ease,box-shadow .2s;width:auto!important;margin:0!important;float:none!important}
.woocommerce ul.products li.product:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px rgba(29,59,42,.55)}
.woocommerce ul.products li.product a img{margin:0;background:linear-gradient(180deg,#f7efe0,#efe3cd);padding:18px;aspect-ratio:1/1;object-fit:contain}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);
  font-size:20px;color:var(--pine);padding:6px 16px 0}
.woocommerce ul.products li.product .price{display:block;font-family:var(--mono);font-weight:600;
  font-size:17px;color:var(--ink);padding:4px 16px 10px}
.woocommerce ul.products li.product .button{display:flex;justify-content:center;margin:8px 16px 0}

/* single product */
.woocommerce div.product div.images,.woocommerce div.product div.summary{margin-bottom:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--mono);
  font-size:30px;font-weight:600;color:var(--ink)}
.woocommerce div.product .product_title{font-size:clamp(30px,4.5vw,46px);color:var(--pine)}
.woocommerce div.product .woocommerce-product-details__short-description{color:#4a4234;font-size:15.5px}
.woocommerce-tabs .panel h2{color:var(--pine)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--cream);border-bottom-color:var(--cream)}

/* forms / fields (cart, checkout, account, affiliate) */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,.woocommerce .select2-container .select2-selection,
.woocommerce table.cart input,.woocommerce #content table.cart input{
  border:1.5px solid var(--paper2);border-radius:11px;padding:12px 14px;font-family:var(--body);
  font-size:15px;background:var(--cream)}
.woocommerce form .form-row label{font-size:13px;font-weight:600;color:var(--pine)}
.woocommerce table.shop_table{border-radius:14px;border-color:var(--paper2)}
/* cart: widen the coupon code input so the "Coupon code" placeholder isn't clipped */
.woocommerce .cart .actions .coupon .input-text,
.woocommerce-cart .cart .actions .coupon #coupon_code{width:200px;max-width:60vw}
/* cart: vertically centre the coupon input with its "Apply coupon" button */
.woocommerce .cart .actions .coupon{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content,.woocommerce-info,.woocommerce-message{
  background:var(--cream);border:1px solid var(--paper2);border-radius:16px;padding:20px}
.woocommerce-info,.woocommerce-message{border-top:3px solid var(--ochre)}
.woocommerce .woocommerce-message{border-top-color:var(--pine2)}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;border:1px solid var(--paper2);border-radius:14px;overflow:hidden}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--paper2)}
.woocommerce-MyAccount-navigation li a{display:block;padding:12px 16px;font-weight:600;color:var(--pine)}
.woocommerce-MyAccount-navigation li.is-active a{background:#e4ecdf}

/* tracking info block from Advanced Shipment Tracking */
.ast-tracking-wrapper,.wc-ast-tracking-wrapper{background:var(--cream);border:1px solid var(--paper2);
  border-radius:12px;padding:14px 16px;margin:10px 0}

/* ---------- footer ---------- */
footer.site-footer{background:#16301f;color:#cdbfa3;margin-top:10px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding:56px 22px 30px;max-width:var(--maxw);margin:0 auto}
.fcols .name{font-family:var(--display);color:var(--cream);font-size:23px;font-weight:700}
.fcols p{font-size:13.5px;color:#a99c80;max-width:34ch;margin:12px 0 0}
.fcols h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre);margin:0 0 14px}
.fcols a{display:block;font-size:14px;color:#cdbfa3;padding:5px 0}
.fcols a:hover{color:var(--cream)}
.fcols .menu{list-style:none;margin:0;padding:0}
.disclaimer{border-top:1px solid #2f5a40;padding:26px 0;font-size:11.5px;color:#8c8068;line-height:1.7}
.disclaimer .wrap{max-width:var(--maxw);margin:0 auto}
.legalbar{border-top:1px solid #2f5a40;padding:16px 0;font-size:12px;color:#8c8068}
.legalbar .wrap{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  width:100%;flex-wrap:wrap;gap:10px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero .wrap,.story .wrap{grid-template-columns:1fr}
  .hero-art{order:-1}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav .links{display:none}
  .nav .links.open{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--cream);
    flex-direction:column;padding:14px 22px 16px;border-bottom:1px solid var(--paper2);gap:6px}
  .menutoggle{display:block}
  .nav{gap:12px}
  /* On phones the brand shows just "Integratide" next to the menu (drop the tagline). */
  .brand .name small{display:none}
  /* Search is relocated into the menu panel by main.js; hide the stray header
     copy, and show it full-width once it's inside the open menu. */
  .header-search{display:none}
  .nav .links.open .header-search.in-menu{display:flex;width:100%;margin-top:8px}
  .header-search.in-menu input[type=search]{width:auto;flex:1}
  .trust .wrap{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
}
/* Keyboard focus ring: pine reads on light/ochre backgrounds; the ochre glow
   keeps it visible on the dark pine/footer sections too. */
*:focus-visible{outline:2px solid var(--pine);outline-offset:2px;box-shadow:0 0 0 4px rgba(199,146,52,.55)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   v1.1 fixes — layout + WooCommerce polish
   ============================================================ */

/* (#3) The WooCommerce clearfix ::before/::after on ul.products become
   grid items in our grid layout, pushing the first product into column 2
   and leaving a blank leading cell. Remove them and clear floats instead. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products{clear:both}

/* (#4) Shop archive + (#6) single product are now wrapped by woocommerce.php
   in .wrap-wc, so the title / result count / ordering line up with the grid. */
.woocommerce-wrap .page-title{margin-top:0}
.woocommerce-result-count{color:var(--muted);font-size:14px;margin:0 0 6px}
.woocommerce-ordering{margin-bottom:18px}

/* (#7 message + #9 coupon "blue box") The WooCommerce icon webfont glyphs
   (::before) render as stray boxes and overlap the text. Hide them — the
   theme already gives notices a coloured top border for emphasis. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before{display:none!important;content:""!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  padding:16px 20px!important;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce-message>.button,.woocommerce-info>.button{margin-left:auto}
.woocommerce-form-coupon-toggle .woocommerce-info{cursor:pointer;margin:0}

/* (#6) Single product: brand "stage + summary" two-column layout */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.woocommerce div.product>div.images,
.woocommerce div.product>div.summary{float:none!important;width:auto!important;margin:0}
.woocommerce div.product>.clear{display:none}
.woocommerce div.product div.images img{
  background:linear-gradient(180deg,#f7efe0,#ece0c8);border:1px solid var(--paper2);
  border-radius:18px;padding:30px}
.woocommerce div.product .woocommerce-product-gallery__trigger{top:1rem;right:1rem}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{grid-column:1 / -1;margin-top:14px}
.woocommerce div.product form.cart{margin-bottom:18px}
/* flexslider mis-measures the single-image gallery inside the grid column and
   collapses it to ~1px; force the gallery + slide + image to fill the column. */
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery,
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images ul.slides,
.woocommerce div.product div.images ul.slides>li,
.woocommerce div.product div.images .woocommerce-product-gallery__image{width:100%!important;float:none!important}
.woocommerce div.product div.images .woocommerce-product-gallery{opacity:1!important}
.woocommerce div.product div.images img{width:100%!important;height:auto!important;position:static!important}
@media(max-width:780px){.woocommerce div.product{grid-template-columns:1fr}}

/* Item page: Add to cart + Buy now in the theme green (override the gold .alt) */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.alt{
  background:var(--pine)!important;border-color:var(--pine)!important;color:var(--cream)!important}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.alt:hover{
  background:var(--pine2)!important;border-color:var(--pine2)!important;color:var(--cream)!important}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled{opacity:.45}

/* Item page: quantity box matches the site's input style */
.woocommerce div.product form.cart .quantity .qty{
  border:1.5px solid var(--paper2);border-radius:11px;background:var(--cream);
  font-family:var(--body);font-size:15px;color:var(--ink);padding:11px 10px;width:74px;text-align:center}
.woocommerce div.product form.cart .quantity .qty:focus{outline:2px solid var(--pine2);border-color:var(--pine)}

/* Item page: uniform spacing between qty box + buttons */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
  display:flex!important;align-items:center;gap:12px;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{margin:0!important}
.woocommerce div.product form.cart .single_add_to_cart_button{margin:0!important}

/* Shop: ordering dropdown matches the site's box style (not plain white/sharp) */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select.orderby{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1.5px solid var(--paper2);border-radius:11px;background-color:var(--cream);
  font-family:var(--body);font-size:14px;color:var(--ink);padding:10px 38px 10px 14px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d3b2a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.woocommerce .woocommerce-ordering select:focus{outline:2px solid var(--pine2);border-color:var(--pine)}

/* Certificates page wants the full content width (not the 820px prose cap).
   Keyed to a stable body class (see integratide_body_classes) instead of a
   hard-coded page ID so it survives the page being recreated. */
.ig-page-certificates .entry-content{max-width:none}

/* Contact form (functional) */
.integratide-contact{max-width:560px}
.integratide-contact .field{margin-bottom:15px}
.integratide-contact label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--pine)}
.integratide-contact input,.integratide-contact textarea{width:100%;border:1.5px solid var(--paper2);
  border-radius:11px;padding:12px 14px;font-family:var(--body);font-size:15px;background:var(--cream)}
.integratide-contact input:focus,.integratide-contact textarea:focus{outline:2px solid var(--pine2);border-color:var(--pine)}
.integratide-contact .cf-turnstile{margin:4px 0 18px}

/* Certificates grid */
.coa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin-top:24px;list-style:none;padding:0}
.coa-card{background:var(--cream);border:1px solid var(--paper2);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.coa-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-d)}
.coa-card h3{font-size:20px;color:var(--pine);margin:4px 0 10px}
.coa-card .row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--paper2);font-size:14px}
.coa-card .row span:first-child{color:var(--muted)}
.coa-card .row span:last-child{font-family:var(--mono)}
.coa-card .coa-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.coa-card .coa-actions .btn{flex:1 1 0;min-width:110px;justify-content:center;padding:9px 12px}

/* In-page PDF viewer (certificates) */
.ig-pdf-modal{position:fixed;inset:0;z-index:9999;display:none}
.ig-pdf-modal.open{display:block}
.ig-pdf-backdrop{position:absolute;inset:0;background:rgba(22,48,31,.82)}
.ig-pdf-dialog{position:absolute;inset:3vh 4vw;background:var(--cream);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.ig-pdf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--pine);color:var(--cream)}
.ig-pdf-title{font-family:var(--display);font-weight:600;font-size:16px}
.ig-pdf-actions{display:flex;align-items:center;gap:10px}
.ig-pdf-actions a{font-size:13px;font-weight:600;color:var(--cream);border:1px solid rgba(251,246,234,.4);
  border-radius:999px;padding:6px 14px}
.ig-pdf-actions a:hover{background:rgba(251,246,234,.15)}
.ig-pdf-close{background:none;border:none;color:var(--cream);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.ig-pdf-frame{flex:1;width:100%;border:0;background:#525659}
@media(max-width:680px){.ig-pdf-dialog{inset:0;border-radius:0}.ig-pdf-title{font-size:14px}.ig-pdf-actions a{padding:6px 10px}}

/* Affiliates page — the GoAffPro portal is embedded as an iframe (SliceWP was
   removed). Keyed to a stable body class, not a hard-coded page ID. Giving the
   iframe a defined size + brand background avoids the blank-white flash while
   the portal SPA loads. */
.ig-page-affiliates .entry-content{max-width:none}
.ig-page-affiliates iframe{width:100%;min-height:840px;border:1px solid var(--paper2);
  border-radius:14px;background:var(--cream)}

/* Age Gate (18+) — brand styling */
.age-gate__wrapper{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:none!important;border:0!important;box-shadow:none!important;padding:20px!important;margin:0!important}
.age-gate__background,.age-gate__background-color{position:fixed!important;inset:0!important;width:100%!important;height:100%!important}
.age-gate__background-color{background:rgba(22,48,31,.93)!important}
.age-gate{position:relative!important;z-index:3!important;background:var(--cream)!important;border:1px solid var(--paper2)!important;
  border-radius:18px!important;max-width:520px!important;width:100%!important;padding:42px 36px!important;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5)!important;text-align:center!important;font-family:var(--body)!important}
.age-gate__heading-title{font-family:var(--display)!important;color:var(--pine)!important;font-size:24px!important;font-weight:700!important;margin-bottom:4px!important}
.age-gate__headline{font-family:var(--display)!important;color:var(--ochre-d)!important;
  font-size:34px!important;font-weight:700!important;margin:4px 0!important}
.age-gate__subheadline{color:var(--muted)!important;font-size:15px!important;max-width:42ch;margin:6px auto 22px!important;line-height:1.5}
.age-gate__challenge,.age-gate__fields legend{font-weight:600!important;color:var(--pine)!important;margin-bottom:16px!important}
.age-gate__buttons{display:flex!important;gap:12px!important;justify-content:center!important;flex-wrap:wrap;margin-top:6px}
.age-gate__submit{border-radius:999px!important;font-weight:600!important;font-size:15px!important;
  padding:13px 26px!important;border:1.6px solid var(--pine)!important;cursor:pointer;transition:background .2s}
.age-gate__submit--yes{background:var(--ochre)!important;border-color:var(--ochre)!important;color:var(--pine)!important}
.age-gate__submit--yes:hover{background:var(--ochre-d)!important;border-color:var(--ochre-d)!important}
.age-gate__submit--no{background:transparent!important;color:var(--pine)!important}
.age-gate__submit--no:hover{background:var(--pine)!important;color:var(--cream)!important}
.age-gate__remember,.age-gate__remember-wrapper{margin-top:18px!important;color:var(--muted)!important;font-size:13px!important;
  display:flex;align-items:center;justify-content:center;gap:8px}

/* ============================================================
   v1.2 — single-product variation dropdown + button spacing
   ============================================================ */
/* Brand-styled "Choose an option" variation <select> with a custom arrow */
/* WooCommerce renders the attribute label cell as <th class="label">, so target
   that (not td) to put a gap between "Size" and the dropdown. */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.label{padding-right:20px;vertical-align:middle;text-align:left}
.woocommerce div.product form.cart .variations th.label label,
.woocommerce div.product form.cart .variations td.label label{color:var(--pine);font-weight:600;margin:0}
/* Centre the dropdown cell so the "Size" label lines up with it vertically. */
.woocommerce div.product form.cart .variations td.value{vertical-align:middle}
/* Hide the WooCommerce "Clear" (reset selection) link — not needed; buyers just
   pick a different option, and removing it keeps "Size" centred on the dropdown. */
.woocommerce div.product form.cart .reset_variations{display:none!important}
/* "Quantity" label before the quantity box, mirroring the "Size" label.
   Scoped to the single-product cart form so the cart page's qty inputs are untouched. */
.woocommerce div.product form.cart .quantity{display:flex;align-items:center;gap:18px}
.woocommerce div.product form.cart .quantity::before{content:"Quantity";color:var(--pine);font-weight:600}
.woocommerce div.product form.cart .variations select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1.5px solid var(--paper2);border-radius:11px;background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231d3b2a' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding:12px 40px 12px 14px;min-height:46px;min-width:240px;
  font-family:var(--body);font-size:15px;color:var(--ink);cursor:pointer;line-height:1.2}
.woocommerce div.product form.cart .variations select:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 2px var(--pine2)}
.woocommerce div.product form.cart .variations select:hover{border-color:var(--ochre)}

/* breathing room between Add to cart and Buy Now */
.woocommerce div.product form.cart .wc-buy-now-btn{margin-left:12px}

/* On phones, drop the quantity onto its own row so "Add to cart" and "Buy now"
   sit side by side instead of Buy now wrapping below on its own. Both buttons
   carry .single_add_to_cart_button, so they share the row equally. */
@media(max-width:680px){
  .woocommerce div.product form.cart .quantity{flex:0 0 100%;margin:0 0 12px!important}
  /* flex:1 widens the buttons past their text, so centre the label inside each. */
  .woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 0;min-width:0;margin:0!important;justify-content:center;text-align:center}
}

/* Google Places address autocomplete on the checkout (custom brand dropdown) */
.integratide-ac{position:relative}
.integratide-ac-list{position:absolute;left:0;right:0;top:100%;z-index:9999;display:none;
  margin:3px 0 0;padding:4px;list-style:none;background:var(--cream);border:1.5px solid var(--paper2);
  border-radius:11px;box-shadow:0 16px 34px -16px rgba(29,59,42,.5);max-height:280px;overflow:auto}
.integratide-ac-item{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);line-height:1.3}
.integratide-ac-item:hover,.integratide-ac-item.is-active{background:#efe3cd}
.integratide-ac-item .ac-sec{color:var(--muted);font-size:12.5px}

/* Checkout payment methods: vertically centre the radio, gateway logo and
   title (the 28px logos were baseline-aligned, leaving the radio sitting low).
   The payment_box description wraps to its own full-width row below. */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{display:flex;flex-wrap:wrap;align-items:center;padding:9px 0}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method>input.input-radio{margin:0 .5em 0 0;float:none}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method>label{display:inline-flex;align-items:center;gap:.45em;margin:0;line-height:1.2}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method>label img{margin:0;vertical-align:middle}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box{flex:0 0 100%;margin-top:9px}

/* ---------- checkout: two-column layout with sticky order summary (desktop only) ----------
   v1.8.3 — wider checkout; billing on the left (1.72fr), "Your order" (heading + box) on
   the right as ONE unit (wrapped by integratide_checkout_order_col_* in
   functions.php) so it sits level with billing and follows the scroll together,
   returning fully to the top. Desktop only (>=901px, the theme's existing
   breakpoint); below that everything keeps the default stacked single-column flow. */
/* The order-attribution element holds only hidden inputs; left visible it forms an
   empty inline line box that pushed "Billing details" down out of line with "Your
   order". (Hidden inputs still submit when their wrapper is display:none.) */
.woocommerce-checkout wc-order-attribution-inputs{display:none}
@media (min-width:901px){
  /* Widen the checkout to use the side space. Checkout renders via page.php (NOT
     woocommerce.php), so the real constraints are .page>.wrap (1180) and
     .entry-content (820) — override both, scoped to the checkout page only. The
     `.page>` keeps the header/footer .wrap at the brand-standard 1180. */
  body.woocommerce-checkout .page>.wrap{max-width:min(1760px,95vw)}
  body.woocommerce-checkout .entry-content{max-width:none}

  .woocommerce-checkout form.checkout.woocommerce-checkout{
    display:grid;
    grid-template-columns:minmax(0,1.64fr) minmax(340px,1fr);
    column-gap:60px;
    align-items:start;
  }
  .woocommerce-checkout form.checkout #customer_details{grid-column:1;min-width:0}
  /* stack billing + additional-info so the left reads as one "Billing details" column */
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2{float:none;width:100%;max-width:none}
  .woocommerce-checkout #customer_details .col-2{margin-top:8px}
  /* The wrapped heading + order box are the right column. assets/checkout-sticky.js
     drives a "follow the scroll" sticky (rides the page, pinning bottom-then-top so
     a tall summary's Place order stays reachable) — it overrides position/top inline
     at runtime. The position:sticky;top:90px below is the no-JS fallback. No
     max-height/overflow guard, so there is no inner scrollbar. */
  .woocommerce-checkout form.checkout .integratide-order-col{
    grid-column:2;
    align-self:start;
    position:sticky;
    top:90px;                        /* clears the 74px sticky header + a small gap */
  }
  /* match the billing heading's 22px top margin so "Your order" sits level with
     "Billing details" — one line below the coupon box, not jammed against it. */
  .woocommerce-checkout form.checkout #order_review_heading{margin:22px 0 12px}
}

/* ============================================================
   v1.6 — CRO/a11y pass (AA contrast, COA on PDP, hero CTA, footer contact)
   ============================================================ */
:root{ --ochre-text:#7a5712; }

/* Contrast AA: darker ochre for small text on light backgrounds (eyebrow,
   COA tag, breadcrumb hover all failed 4.5:1). Keep bright ochre on dark. */
.eyebrow{ color:var(--ochre-text); }
.hero .eyebrow{ color:var(--ochre); }
.coa-card .tag{ color:var(--ochre-text); }
.breadcrumb a:hover,.woocommerce-breadcrumb a:hover{ color:var(--ochre-text); }
/* Footer disclaimer + legal bar were #8c8068 (3.66:1 on pine) — lift to AA. */
.disclaimer,.legalbar{ color:#a99c80; }

/* Screen-reader-only (the trust section's section heading, for heading order). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.trust .cell h3{font-size:17px;color:var(--pine);margin-bottom:5px}

/* Secondary "ghost" hero CTA so "Shop the catalog" is the one dominant button. */
.hero .ctas .btn.ghost{background:transparent;border-color:rgba(243,234,216,.55);color:#f3ead8}
.hero .ctas .btn.ghost:hover{background:rgba(243,234,216,.12);border-color:rgba(243,234,216,.85);color:#fbf6ea}

/* COA button on the product page (reuses the in-page PDF viewer). */
.pdp-coa{margin:14px 0 22px}
.pdp-coa a.coa-view{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:13px;font-weight:600;color:var(--pine);background:#e4ecdf;border:1px solid var(--sage);
  border-radius:999px;padding:9px 16px}
.pdp-coa a.coa-view:hover{background:#d9e6d2}
.pdp-coa__lab{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}

/* Freedom Diagnostics note at the top of the Certificates page. */
.coa-lab-note{font-size:15px;color:#4a4234;max-width:680px;margin:0 0 18px}

/* (Footer contact line styles removed — no markup uses them yet. If the footer
   support-email idea is greenlit later, restore .fcontact here.) */

/* Newsletter "join" band: status messages + mobile stacking.
   The form itself reuses the existing .news form / .news input rules above. */
.news-status{max-width:52ch;margin:14px auto 0;font-weight:600}
.news-status--ok{color:var(--pine)}
.news-status--err{color:#5b1d1d}
@media(max-width:520px){.news form{flex-direction:column}.news form .btn{justify-content:center}}

/* ============================================================
   v1.8 — design elements (hero vials, trust icons, card chips,
   how-it-works band, PDP trust stack, whitespace pass)
   ============================================================ */

/* (5) Hero product artwork in place of the seal. */
.hero-vials{width:min(380px,90%);margin:0 auto}
.hero-vials-svg{width:100%;height:auto;display:block}

/* (1) Trust-band icons + (7) a little more breathing room in the cells. */
.trust .cell{padding:30px 22px}
.trust .cell .ig-ic{display:block;color:var(--ochre-d);margin-bottom:10px}

/* (2) Shop-loop product-card trust chips. */
.woocommerce ul.products li.product .ig-card-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 2px}
.ig-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:11px;font-weight:600;border-radius:999px;padding:4px 10px;line-height:1.2}
.ig-chip--purity{background:#e4ecdf;border:1px solid var(--sage);color:var(--pine)}
.ig-chip--coa{background:#f3e7cf;border:1px solid var(--ochre);color:var(--ochre-text)}

/* (3) "How ordering works" band. */
.how{background:var(--cream);border-top:1px solid var(--paper2);border-bottom:1px solid var(--paper2);padding:60px 0}
.how-head{text-align:center;max-width:560px;margin:0 auto 34px}
.how-head h2{font-size:clamp(26px,4vw,38px);color:var(--pine);margin-top:6px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.how-step{text-align:center;padding:0 10px}
.how-step .how-ic{width:58px;height:58px;border-radius:50%;background:var(--paper);border:1.6px solid var(--ochre);
  color:var(--pine);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 14px}
.how-step h3{font-size:17px;color:var(--pine);margin-bottom:5px}
.how-step p{font-size:14px;color:var(--muted);margin:0 auto;max-width:30ch}
@media(max-width:680px){.how-grid{grid-template-columns:1fr;gap:24px}}

/* (4) PDP buy-box trust stack (under the COA link, above Add to cart). */
.ig-trust-stack{border-top:1px solid var(--paper2);border-bottom:1px solid var(--paper2);
  margin:0 0 20px;padding:14px 0;display:flex;flex-direction:column;gap:11px}
.ig-trust-stack .ts-row{display:flex;align-items:center;gap:11px;font-size:14px;color:#4a4234;line-height:1.35}
.ig-trust-stack .ts-row .ig-ic{color:var(--ochre-d);flex:none}
.ig-trust-stack .ts-row b{color:var(--pine);font-weight:600}