/* ============================================================================
   Core Research - template layer
   Everything that is not the homepage. Styles the real WooCommerce and picostrap
   classes with the brand tokens so the shop, categories and product pages carry
   the same dark/light rhythm as the front page.
   Tokens come from core-research.css (--cr-*).
   ========================================================================== */

body.cr-template {
  background: var(--cr-cream);
  color: var(--cr-ink);
  font-family: var(--cr-body);
}

body.cr-template h1,
body.cr-template h2,
body.cr-template h3,
body.cr-template h4 {
  font-family: var(--cr-disp);
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--cr-ink);
}

/* picostrap wraps content in a padded column; the bands supply their own space */
body.cr-template main > .mt-3 { margin-top: 0 !important; }
body.cr-template main .container > .row > [class*='col-'],
body.cr-template main .container > .row > .col { padding-top: 0; }

/* ---------------------------------------------------------------- page head band */
.cr-phead {
  background: var(--cr-night);
  color: var(--cr-dm);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(28px, 4vw, 56px) 0 clamp(30px, 4.5vw, 62px);
  position: relative;
  overflow: hidden;
}
.cr-phead::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -60%;
  width: min(620px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124, 58, 237, .30), transparent 66%);
  pointer-events: none;
}
.cr-phead__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  position: relative;
  z-index: 1;
}

.cr-phead__crumb { margin: 0 0 1.15rem; }
.cr-phead__crumb,
.cr-phead__crumb a,
.cr-phead__crumb span {
  font: 500 12px/1.6 var(--cr-mn);
  color: var(--cr-dm2);
  text-decoration: none;
}
.cr-phead__crumb a:hover { color: var(--cr-violet3); }
.cr-phead__crumb span[aria-hidden] { padding: 0 .45rem; opacity: .5; }

.cr-phead__eyebrow {
  display: block;
  font: 600 11.5px/1 var(--cr-mn);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cr-violet3);
  margin-bottom: .75rem;
}
.cr-phead__title {
  color: #fff !important;
  font-size: clamp(28px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
.cr-phead__lead {
  margin: 1rem 0 0;
  max-width: 64ch;
  color: var(--cr-dm);
  font-size: 16.5px;
  line-height: 1.62;
}
.cr-phead__meta {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 8px 13px;
  border-radius: 20px;
  background: rgba(124, 58, 237, .16);
  color: var(--cr-violet3);
  font: 600 11px/1 var(--cr-mn);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- archive grid */
/* Hide only the duplicate title. The whole header must stay visible: WooCommerce
   nests the shop page's own content (the A-Z index) inside it. */
body.cr-template .woocommerce-products-header__title{display:none}
body.cr-template .woocommerce-products-header{margin:0}
body.cr-template .woocommerce-products-header .page-description{padding-top:clamp(30px,4vw,52px)}

body.cr-template .woocommerce-result-count {
  font: 500 12px/1 var(--cr-mn);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cr-ink3);
  margin: clamp(26px, 3.4vw, 44px) 0 0;
}
body.cr-template .woocommerce-ordering select {
  font: 500 13px/1 var(--cr-body);
  border: 1px solid var(--cr-lline);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--cr-white);
  color: var(--cr-ink);
  min-height: 44px;
}

body.cr-template ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 clamp(48px, 6vw, 88px);
  padding: 0;
  list-style: none;
}
@media (max-width: 1000px) { body.cr-template ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { body.cr-template ul.products { grid-template-columns: 1fr; } }

body.cr-template ul.products li.product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 14px;
  width: auto !important;
  float: none !important;
  background: var(--cr-white);
  border: 1px solid var(--cr-lline);
  border-radius: var(--cr-r, 16px);
  transition: transform .22s var(--cr-e), border-color .22s var(--cr-e), box-shadow .22s var(--cr-e);
}
body.cr-template ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: var(--cr-violet);
  box-shadow: 0 22px 46px -26px rgba(124, 58, 237, .42);
}
body.cr-template ul.products li.product::before,
body.cr-template ul.products li.product::after { content: none; }

/* the image sits on a dark tile, exactly like the homepage rail */
body.cr-template li.product a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
body.cr-template li.product img {
  display: block;
  width: auto !important;
  height: 168px !important;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}
body.cr-template li.product .cr-tile,
body.cr-template li.product a.woocommerce-loop-product__link > img {
  border-radius: 12px;
  background: linear-gradient(160deg, #17131f, #0c0a13);
  padding: 12px 0;
  width: 100% !important;
  object-fit: contain;
}

body.cr-template li.product .woocommerce-loop-product__title {
  font: 700 15.5px/1.25 var(--cr-disp) !important;
  letter-spacing: -.022em;
  color: var(--cr-ink) !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
body.cr-template li.product a:hover .woocommerce-loop-product__title { color: var(--cr-violet) !important; }

body.cr-template li.product .price {
  font: 800 19px/1 var(--cr-disp) !important;
  letter-spacing: -.03em;
  color: var(--cr-ink) !important;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
body.cr-template li.product .price del { opacity: .5; font-weight: 500; }

/* ---------------------------------------------------------------- buttons */
body.cr-template .button,
body.cr-template a.button,
body.cr-template button.button,
body.cr-template .wp-element-button,
body.cr-template input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 20px !important;
  margin-top: auto;
  background: var(--cr-violet) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font: 700 12px/1 var(--cr-body) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s var(--cr-e), transform .2s var(--cr-e), box-shadow .2s var(--cr-e);
}
body.cr-template .button:hover,
body.cr-template a.button:hover,
body.cr-template button.button:hover,
body.cr-template input[type="submit"]:hover {
  background: #6d2fdb !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -16px rgba(124, 58, 237, .9);
}
body.cr-template .button.added::after { display: none; }
body.cr-template .added_to_cart {
  display: inline-block;
  margin-top: 8px;
  font: 600 11px/1 var(--cr-mn);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cr-violet);
}

/* ---------------------------------------------------------------- single product */
body.cr-template.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
  padding: clamp(30px, 4vw, 56px) 0 0;
}
@media (max-width: 900px) { body.cr-template.single-product div.product { grid-template-columns: 1fr; } }

body.cr-template.single-product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: linear-gradient(160deg, #17131f, #0c0a13);
  border-radius: var(--cr-r, 16px);
  padding: clamp(18px, 3vw, 38px);
}
body.cr-template.single-product .woocommerce-product-gallery img {
  border-radius: 8px;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6));
}
body.cr-template.single-product .woocommerce-product-gallery__trigger { display: none; }

body.cr-template.single-product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
body.cr-template.single-product .summary .product_title { display: none; }   /* the band carries it */
body.cr-template.single-product .summary .price {
  font: 800 36px/1 var(--cr-disp) !important;
  letter-spacing: -.035em;
  color: var(--cr-ink) !important;
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.1rem;
}
body.cr-template.single-product .woocommerce-product-details__short-description,
body.cr-template.single-product .summary p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cr-ink2);
  max-width: 52ch;
}
body.cr-template.single-product .quantity input.qty {
  min-height: 48px;
  width: 78px;
  border: 1px solid var(--cr-lline);
  border-radius: 12px;
  text-align: center;
  font: 600 15px/1 var(--cr-body);
  font-variant-numeric: tabular-nums;
}
body.cr-template.single-product form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 1.4rem 0; }
body.cr-template.single-product .product_meta {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cr-lline);
  font: 500 12px/1.8 var(--cr-mn);
  color: var(--cr-ink3);
}
body.cr-template.single-product .product_meta a { color: var(--cr-violet); text-decoration: none; }
body.cr-template.single-product .stock.in-stock {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 20px;
  background: rgba(10, 102, 64, .12); color: var(--cr-mint);
  font: 600 10.5px/1 var(--cr-mn); letter-spacing: .11em; text-transform: uppercase;
}
body.cr-template.single-product .stock.out-of-stock {
  background: rgba(122, 81, 6, .13); color: var(--cr-amber);
  display: inline-flex; padding: 8px 12px; border-radius: 20px;
  font: 600 10.5px/1 var(--cr-mn); letter-spacing: .11em; text-transform: uppercase;
}

/* tabs */
body.cr-template .woocommerce-tabs { margin: clamp(40px, 5vw, 72px) 0 0; }
body.cr-template .woocommerce-tabs ul.tabs {
  display: flex; gap: 0; padding: 0 !important; margin: 0 0 0 !important;
  border-bottom: 1px solid var(--cr-lline); list-style: none;
}
body.cr-template .woocommerce-tabs ul.tabs::before { content: none !important; }
body.cr-template .woocommerce-tabs ul.tabs li {
  margin: 0 !important; padding: 0 !important; background: none !important;
  border: 0 !important; border-radius: 0 !important;
}
body.cr-template .woocommerce-tabs ul.tabs li::before,
body.cr-template .woocommerce-tabs ul.tabs li::after { content: none !important; }
body.cr-template .woocommerce-tabs ul.tabs li a {
  display: block; padding: 16px 22px !important;
  font: 600 11.5px/1 var(--cr-mn) !important; letter-spacing: .15em; text-transform: uppercase;
  color: var(--cr-ink3) !important; text-decoration: none; position: relative;
}
body.cr-template .woocommerce-tabs ul.tabs li.active a { color: var(--cr-ink) !important; }
body.cr-template .woocommerce-tabs ul.tabs li.active a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--cr-violet);
}
body.cr-template .woocommerce-tabs .panel { padding-top: 26px; }
body.cr-template .woocommerce-tabs .panel h2 { display: none; }
body.cr-template .shop_attributes th { font: 600 11.5px/1.6 var(--cr-mn); text-transform: uppercase; letter-spacing: .08em; color: var(--cr-ink3); }
body.cr-template .shop_attributes td { font-size: 15px; color: var(--cr-ink); }

/* related products heading */
body.cr-template .related > h2, body.cr-template .upsells > h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin: 0 0 4px;
}

/* ---------------------------------------------------------------- links + notices */
body.cr-template a { color: var(--cr-violet); }
body.cr-template a:hover { color: #6d2fdb; }
body.cr-template .woocommerce-message,
body.cr-template .woocommerce-info {
  border-top-color: var(--cr-violet) !important;
  background: var(--cr-white);
  font-family: var(--cr-body);
  border-radius: 12px;
}
body.cr-template .woocommerce-message::before,
body.cr-template .woocommerce-info::before { color: var(--cr-violet) !important; }

/* ---------------------------------------------------------------- footer */
body.cr-template .site-footer,
body.cr-template footer.site-footer {
  background: var(--cr-night);
  color: var(--cr-dm2);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(40px, 5vw, 68px) clamp(16px, 4vw, 48px) clamp(26px, 3vw, 38px);
  margin-top: clamp(48px, 6vw, 90px);
}
body.cr-template .site-footer a { color: var(--cr-dm); text-decoration: none; }
body.cr-template .site-footer a:hover { color: #fff; }

/* ---------------------------------------------------------------- fixes */
/* grid clearfix: WooCommerce puts ::before/::after on ul.products for float
   clearing. Under grid they become items and take the first cell, which
   offsets the whole catalogue by one. */
body.cr-template ul.products::before,
body.cr-template ul.products::after{content:none!important;display:none!important}

/* result count + ordering on one line above the grid */
body.cr-template .woocommerce-notices-wrapper+.woocommerce-result-count,
body.cr-template .woocommerce-result-count{float:none!important;display:inline-block}
body.cr-template .woocommerce-ordering{float:none!important;margin:0!important}
body.cr-template .woocommerce-ordering,
body.cr-template .woocommerce-result-count{vertical-align:middle}
body.cr-template.archive .woocommerce-result-count{margin-right:1rem}

/* cards stretch to equal height so the buttons line up */
body.cr-template ul.products li.product{height:100%}
body.cr-template li.product .woocommerce-loop-product__title{min-height:2.5em}

/* toolbar row: result count left, ordering right, on one line */
body.cr-template .woocommerce-notices-wrapper{margin:0}
body.cr-template.archive .woocommerce-result-count{margin:clamp(26px,3.4vw,44px) 0 0}
body.cr-template .woocommerce-ordering{display:inline-block;float:right!important;margin:clamp(20px,3vw,38px) 0 0!important;width:auto!important}
body.cr-template .woocommerce-ordering select{width:auto;min-width:190px}

/* the tile: fixed height, image letterboxed inside it so nothing is cropped */
body.cr-template li.product a.woocommerce-loop-product__link>img,
body.cr-template li.product img{width:100%!important;height:190px!important;object-fit:contain!important;padding:14px 10px;border-radius:12px;background:linear-gradient(160deg,#17131f,#0c0a13)}

/* full-width rows inside the single-product grid: tabs, related and upsells
   are siblings of the gallery and summary, so without this they land in a
   column and the related cards get squeezed to a third of their width. */
body.cr-template.single-product div.product>.woocommerce-tabs,
body.cr-template.single-product div.product>.related,
body.cr-template.single-product div.product>.upsells,
body.cr-template.single-product div.product>.woocommerce-product-gallery+.summary~*{grid-column:1/-1}
body.cr-template .related ul.products,
body.cr-template .upsells ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){body.cr-template .related ul.products,
body.cr-template .upsells ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.cr-template .related,body.cr-template .upsells{margin-top:clamp(40px,5vw,72px)}

/* picostrap title banner: the band replaces it everywhere, not only on home */
body.cr-template main .bg-light-subtle{display:none!important}
body.cr-template .display-4{display:none!important}

/* ---------------------------------------------------------------- prose pages */
.cr-prose{max-width:none;padding:clamp(30px,4vw,54px) 0 clamp(20px,3vw,40px);font-family:var(--cr-body);color:var(--cr-ink)}
.cr-prose>*{max-width:68ch}
.cr-lede{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--cr-ink2);margin:0 0 2rem;max-width:62ch}
.cr-prose h2{font:700 clamp(21px,2.5vw,29px)/1.15 var(--cr-disp);letter-spacing:-.028em;margin:2.4rem 0 .8rem}
.cr-prose h3{font:700 clamp(16px,1.7vw,19px)/1.25 var(--cr-disp);letter-spacing:-.02em;margin:1.7rem 0 .5rem}
.cr-prose p{font-size:16.5px;line-height:1.68;margin:0 0 1rem;color:var(--cr-ink2)}
.cr-prose strong{color:var(--cr-ink);font-weight:700}
.cr-prose ul{margin:0 0 1.2rem;padding-left:1.1rem}
.cr-prose li{font-size:16.5px;line-height:1.65;color:var(--cr-ink2);margin-bottom:.5rem}
.cr-prose a{color:var(--cr-violet);text-decoration:underline;text-underline-offset:2px}

/* callout */
.cr-note{background:var(--cr-white);border-left:3px solid var(--cr-violet);border-radius:0 12px 12px 0;padding:18px 22px;margin:1.8rem 0;max-width:68ch}
.cr-note p{margin:0 0 .6rem;font-size:15px}
.cr-note p:last-child{margin:0}
.cr-tbc{font:600 10.5px/1 var(--cr-mn);letter-spacing:.1em;color:var(--cr-amber);background:rgba(122,81,6,.13);padding:4px 8px;border-radius:6px;white-space:nowrap}

/* guide cards */
.cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:1.6rem 0 2rem;max-width:none}
.cr-card{display:block;padding:22px;background:var(--cr-white);border:1px solid var(--cr-lline);border-radius:var(--cr-r,16px);text-decoration:none!important;transition:.22s var(--cr-e)}
.cr-card:hover{transform:translateY(-3px);border-color:var(--cr-violet);box-shadow:0 22px 46px -26px rgba(124,58,237,.42)}
.cr-card__k{display:block;font:600 10px/1 var(--cr-mn);letter-spacing:.16em;text-transform:uppercase;color:var(--cr-violet);margin-bottom:.7rem}
.cr-card h3{font:700 17px/1.25 var(--cr-disp);letter-spacing:-.022em;margin:0 0 .5rem;color:var(--cr-ink)}
.cr-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--cr-ink2)}

/* table */
.cr-table{width:100%;max-width:none;border-collapse:collapse;margin:1.2rem 0 1.8rem;display:block;overflow-x:auto}
.cr-table th,.cr-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--cr-lline);font-size:15px}
.cr-table thead th{font:600 11px/1.4 var(--cr-mn);letter-spacing:.1em;text-transform:uppercase;color:var(--cr-ink3);border-bottom:1px solid var(--cr-ink3)}
.cr-table td:first-child{font-weight:600;color:var(--cr-ink)}

/* calculator */
.cr-calc{background:var(--cr-white);border:1px solid var(--cr-lline);border-radius:var(--cr-r,16px);padding:clamp(20px,3vw,32px);margin:0 0 2.2rem;max-width:640px}
.cr-calc__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.cr-calc__row label{font:600 13.5px/1.3 var(--cr-body);color:var(--cr-ink)}
.cr-calc__field{display:flex;align-items:center;gap:8px}
.cr-calc input{width:130px;min-height:48px;padding:0 12px;border:1px solid var(--cr-lline);border-radius:12px;font:600 16px/1 var(--cr-body);font-variant-numeric:tabular-nums;color:var(--cr-ink);background:var(--cr-cream)}
.cr-calc input:focus-visible{outline:2px solid var(--cr-violet2);outline-offset:2px}
.cr-calc__unit{font:500 12px/1 var(--cr-mn);color:var(--cr-ink3);min-width:34px}
.cr-calc__out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--cr-lline)}
@media(max-width:560px){.cr-calc__out{grid-template-columns:1fr}}
.cr-calc__lbl{display:block;font:600 10px/1.3 var(--cr-mn);letter-spacing:.12em;text-transform:uppercase;color:var(--cr-ink3);margin-bottom:6px}
.cr-calc__stat strong{font:800 24px/1 var(--cr-disp);letter-spacing:-.03em;color:var(--cr-ink);font-variant-numeric:tabular-nums}
.cr-calc__warn{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:rgba(122,81,6,.1);color:var(--cr-amber);font-size:14px;line-height:1.5}

/* band flush to header on page templates: the band is emitted inside the
   padded content column, so pull it up over that padding. */
body.cr-template.page main .container>.row>[class*='col-']>.cr-phead:first-child,
body.cr-template main .cr-phead:first-child{margin-top:0}
body.cr-template.page main>.mt-3{margin-top:0!important;padding-top:0!important}
body.cr-template.page main .container>.row>[class*='col-']{padding-top:0!important}
body.cr-template .cr-prose>*{max-width:68ch}