/*
Theme Name: Jugmug
Theme URI: https://jugmugthela.com
Author: Jugmug Thela
Description: Jugmug Thela block theme. Child of Twenty Twenty-Five. Layout lives in theme.json and patterns; no page builder.
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: jugmug
*/

/* ---------------------------------------------------------------
   Jugmug layout and component styles.

   Colours, type sizes and spacing are tokens in theme.json — change
   them there, not here. This file carries structural treatments and
   the WooCommerce overrides theme.json cannot reach.
   --------------------------------------------------------------- */

/* --- Editorial bands --------------------------------------------
   Two uneven columns (47.7 / 52.3) that alternate side to side.    */

.jt-band {
  margin-block: var(--wp--preset--spacing--50);
}

/* Two stacked images where the second overlaps the first. Kept
   deliberately restrained — a heavy overlap turns two busy
   photographs into mud. Use it only where the lower image is calm. */
.jt-overlap-stack {
  position: relative;
}

.jt-overlap-stack > .wp-block-image:nth-child(2) {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  margin-inline-start: 10%;
  width: 72%;
}

.jt-overlap-stack > .wp-block-image:nth-child(2) img {
  box-shadow: 0 10px 24px rgba(36, 26, 16, 0.14);
}

/* --- Three-up cards --------------------------------------------- */

.jt-card {
  display: flex;
  flex-direction: column;
}

.jt-card h3 {
  margin-block-end: 0.6em;
}

.jt-card .wp-block-image {
  margin-block-end: 1.5em;
}

.jt-card ul {
  padding-inline-start: 1.15em;
  margin-block: 0;
}

.jt-card ul li {
  margin-block-end: 0.75em;
  line-height: 1.75;
}

/* --- A small uppercase kicker above a heading -------------------- */

.jt-kicker {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-block-end: 1rem;
}

/* --- Header and footer dark bands --------------------------------
   theme.json sets a global link colour (cocoa) that is designed for
   the cream page body. Inside the dark bands that colour is almost
   invisible, so links there inherit the band's own text colour.    */

.jt-header a,
.jt-footer a {
  color: inherit;
  text-decoration: none;
}

.jt-header a:hover,
.jt-footer a:hover {
  color: var(--wp--preset--color--gold);
}

.jt-header .wp-block-navigation {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jt-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.jt-logo .jt-logo-main {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--base);
}

.jt-logo .jt-logo-sub {
  font-size: 0.6875rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  margin-top: 6px;
  color: var(--wp--preset--color--gold);
}

.jt-footer h2,
.jt-footer h3 {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  margin-block-end: 1rem;
}

/* --- WooCommerce --------------------------------------------------
   The shop is the commercial surface and deserves more discipline
   than WooCommerce's defaults give it: equal card heights, prices
   and buttons aligned across a row whatever the title length.      */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem 2.5rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  margin: 0 0 1.25rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  flex-grow: 1;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.25;
  font-weight: 500;
  color: var(--wp--preset--color--heading);
  margin: 0 0 0.75rem;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  margin: 0 0 1.125rem;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .price del {
  color: var(--wp--preset--color--muted);
  margin-inline-end: 0.625rem;
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 500;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin-top: auto;
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--wp--preset--color--deep);
  color: var(--wp--preset--color--deep);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  padding: 0 1rem;
  text-decoration: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
}

/* Sale marker: a cocoa block in the image corner, not a floating pill */
.woocommerce span.onsale {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  margin: 0;
  padding: 7px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
  border-radius: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.woocommerce ul.products li.product {
  position: relative;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.08;
  font-weight: 500;
  color: var(--wp--preset--color--heading);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wp--preset--color--contrast);
  font-size: 1.375rem;
}

.woocommerce div.product form.cart .button {
  min-height: 52px;
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
  border-radius: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--wp--preset--color--deep);
  background: var(--wp--preset--color--surface);
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 781px) {
  .jt-overlap-stack > .wp-block-image:nth-child(2) {
    margin-top: -2rem;
    margin-inline-start: 2rem;
    width: 80%;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}
/* JT-HOME-START */

/* --- Dark bands anywhere in the page ------------------------------
   theme.json's link and heading colours are tuned for the cream body
   and vanish on cocoa. Any band carrying .jt-on-dark flips them.    */

.jt-on-dark :is(h1, h2, h3, h4) {
  color: var(--wp--preset--color--base);
}

.jt-on-dark a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 220, 194, 0.4);
}

.jt-on-dark a:hover {
  color: var(--wp--preset--color--gold);
  border-bottom-color: var(--wp--preset--color--gold);
}

/* --- Home hero, with the café film running behind it --------------- */

.jt-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 660px);
  overflow: hidden;
  background-color: var(--wp--preset--color--deepest);
}

.jt-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Scale a 16:9 frame until it covers the band, whatever its shape. */
.jt-hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

.jt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(44, 27, 5, 0.52) 0%, rgba(44, 27, 5, 0.78) 100%);
}

.jt-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--60);
}

.jt-hero-inner h1 {
  color: var(--wp--preset--color--base);
  max-width: 18ch;
  margin: 0;
}

.jt-hero-kicker {
  margin: 0 0 1.25rem;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
}

.jt-hero-lede {
  margin: 1.5rem 0 0;
  max-width: 44ch;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  color: var(--wp--preset--color--on-deep);
}

.jt-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.jt-hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2.25em;
  border: 1px solid var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.jt-cta-primary {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--deep);
}

.jt-cta-primary:hover {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--deepest);
}

.jt-cta-ghost {
  color: var(--wp--preset--color--base);
}

.jt-cta-ghost:hover {
  background: rgba(250, 244, 228, 0.14);
}

/* --- Category strip ------------------------------------------------ */

.jt-cat h3 {
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--large);
}

.jt-cat p {
  margin: 0 0 0.9rem;
  color: var(--wp--preset--color--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.jt-cat .jt-cat-link {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-bottom: 2px;
}

.jt-cat .jt-cat-link:hover {
  border-bottom-color: var(--wp--preset--color--heading);
}

/* --- A quiet rule under a section heading -------------------------- */

.jt-section-head {
  margin-bottom: var(--wp--preset--spacing--40);
}

.jt-section-head h2 {
  margin: 0;
}

.jt-section-head p.jt-sub {
  margin: 0.75rem 0 0;
  max-width: 56ch;
  color: var(--wp--preset--color--muted);
}

/* --- Shop-all link under the product grid -------------------------- */

.jt-shop-all {
  margin-top: 0.5rem;
}

.jt-shop-all a {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-bottom: 2px;
}

.jt-shop-all a:hover {
  border-bottom-color: var(--wp--preset--color--heading);
}

@media (max-width: 781px) {
  .jt-hero {
    min-height: 66vh;
  }
  .jt-hero-cta a {
    flex: 1 1 100%;
  }
}

/* Someone who asks for less motion gets the still band, not the film. */
@media (prefers-reduced-motion: reduce) {
  .jt-hero-media {
    display: none;
  }
}

/* JT-HOME-END */
/* JT-WOO-START */

/* ------------------------------------------------------------------
   WooCommerce ships a float-based product grid and its stylesheet is
   enqueued AFTER the theme's, so same-specificity rules here lose on
   source order. Adding the .type-product class that WooCommerce puts
   on every item wins on specificity instead, which is stable however
   the stylesheets end up ordered.
   ------------------------------------------------------------------ */

.woocommerce ul.products li.product.type-product {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}

.woocommerce ul.products li.product.type-product a img {
  width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}

.woocommerce ul.products li.product.type-product .woocommerce-loop-product__title {
  flex-grow: 1;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.25;
  font-weight: 500;
  color: var(--wp--preset--color--heading);
  margin: 0 0 0.75rem;
  padding: 0;
}

.woocommerce ul.products li.product.type-product .price {
  margin: 0 0 1.125rem;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--contrast);
  font-weight: 400;
}

.woocommerce ul.products li.product.type-product .price del {
  color: var(--wp--preset--color--muted);
  margin-inline-end: 0.625rem;
  opacity: 1;
}

.woocommerce ul.products li.product.type-product .price ins {
  text-decoration: none;
  font-weight: 500;
  background: none;
}

.woocommerce ul.products li.product.type-product .button,
.woocommerce ul.products li.product.type-product .added_to_cart {
  margin: auto 0 0;
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--wp--preset--color--deep);
  color: var(--wp--preset--color--deep);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  padding: 0 1rem;
  text-decoration: none;
}

.woocommerce ul.products li.product.type-product .button:hover,
.woocommerce ul.products li.product.type-product .added_to_cart:hover {
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
}

.woocommerce ul.products li.product.type-product span.onsale {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  margin: 0;
  padding: 7px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
  border-radius: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The grid container itself, likewise hardened against source order. */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem 2.5rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
  width: 100%;
}

@media (max-width: 1024px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* JT-WOO-END */
/* JT-TAIL-START */
.jt-home-main > .entry-content > :last-child { margin-block-end: 0; }
.jt-home-main > .entry-content > :first-child { margin-block-start: 0; }
/* JT-TAIL-END */
/* JT-PRESS-START */

/* --- Press wall ----------------------------------------------------
   Fifteen 158x119 plates from 2015, each on its own near-white ground
   (#fcf8ea). A darken blend drops that ground against the page cream,
   and a grey wash pulls a very mismatched set into one quiet block.
   Colour returns on hover.

   Fifteen logos divide exactly into five columns, so the columns are
   pinned here rather than left to the gallery block's own sizing, and
   each mark is capped at its native width so nothing is upscaled.   */

.jt-press {
  margin-block: var(--wp--preset--spacing--50);
}

.jt-press-wall.wp-block-gallery {
  gap: 2.5rem 1.75rem;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--wp--preset--spacing--40);
}

.jt-press-wall.wp-block-gallery .wp-block-image {
  width: calc(20% - 1.4rem) !important;
  flex-grow: 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jt-press-wall .wp-block-image img {
  display: block;
  width: 100%;
  max-width: 158px;
  height: auto;
  mix-blend-mode: darken;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.jt-press-wall .wp-block-image img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 1024px) {
  .jt-press-wall.wp-block-gallery .wp-block-image {
    width: calc(33.333% - 1.17rem) !important;
  }
}

@media (max-width: 600px) {
  .jt-press-wall.wp-block-gallery .wp-block-image {
    width: calc(50% - 0.875rem) !important;
  }
}

/* JT-PRESS-END */
/* JT-PAGES-START */

/* --- Interior page hero --------------------------------------------
   The homepage opens on film; interior pages open on a cocoa band of
   the same proportions, so the two read as one site.              */

.jt-page-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }

.jt-page-hero h1 { color: var(--wp--preset--color--base); max-width: 20ch; margin: 0; }

.jt-page-hero .jt-lede {
  margin: 1.5rem 0 0;
  max-width: 52ch;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  color: var(--wp--preset--color--on-deep);
}

/* --- Figures -------------------------------------------------------- */

.jt-figure { margin: 0; }
.jt-figure img { display: block; width: 100%; height: auto; }
.jt-figure.is-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.jt-figure.is-wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.jt-figure.is-square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* --- Pull quote ------------------------------------------------------
   The founder's own words. No decorative quote marks: the size and
   the attribution rule carry it.                                   */

.jt-quote p {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.35;
  font-weight: 400;
  color: var(--wp--preset--color--heading);
  margin: 0 0 1.5rem;
}

.jt-on-dark .jt-quote p { color: var(--wp--preset--color--base); }

.jt-attrib {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 1rem;
  margin: 0;
}

.jt-on-dark .jt-attrib {
  color: var(--wp--preset--color--gold);
  border-top-color: rgba(232, 220, 194, 0.28);
}

/* --- Offer list ------------------------------------------------------
   A named thing and what it is. Ruled rows rather than cards: there
   are a lot of them and boxes would turn the page into a grid of
   identical tiles.                                                  */

.jt-offer { border-top: 1px solid var(--wp--preset--color--line); padding-block: 1.15rem; }

.jt-offer h4 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
  margin: 0 0 0.4rem;
}

.jt-offer p { margin: 0; color: var(--wp--preset--color--muted); font-size: 1rem; line-height: 1.65; }

/* --- Named clients ---------------------------------------------------
   Real names, set as type. Stronger than a logo wall we cannot source. */

.jt-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
}

.jt-clients li {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  color: var(--wp--preset--color--heading);
  border: 1px solid var(--wp--preset--color--line);
  padding: 0.45rem 0.9rem;
  background: var(--wp--preset--color--base);
}

.jt-on-dark .jt-clients li {
  color: var(--wp--preset--color--base);
  background: transparent;
  border-color: rgba(232, 220, 194, 0.3);
}

/* --- Contact blocks --------------------------------------------------- */

.jt-contact h3 {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 0.75rem;
}

.jt-contact p { margin: 0 0 1rem; line-height: 1.7; }

.jt-contact .jt-big {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--heading);
}

.jt-on-dark .jt-contact h3 { color: var(--wp--preset--color--gold); }
.jt-on-dark .jt-contact .jt-big { color: var(--wp--preset--color--base); }

/* --- Long-form prose pages (policies) ---------------------------------- */

.jt-prose { max-width: 68ch; }
.jt-prose h2 { font-size: var(--wp--preset--font-size--large); margin-top: var(--wp--preset--spacing--40); }
.jt-prose p { margin: 0 0 1.1rem; }

/* --- A link that reads as an action ------------------------------------ */

.jt-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2.25em;
  border: 1px solid var(--wp--preset--color--deep);
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.jt-action:hover { background: var(--wp--preset--color--deepest); color: var(--wp--preset--color--base); }

.jt-on-dark .jt-action {
  background: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--deep);
  border-bottom-color: var(--wp--preset--color--base);
}

.jt-on-dark .jt-action:hover {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--deepest);
}

/* JT-PAGES-END */
/* JT-GAP-START */
/* Full-bleed bands butt against each other; the page's block gap would
   otherwise show a sliver of page background between them. */
.entry-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
/* JT-GAP-END */
/* JT-CHAI-START */

/* The showcase row carries the whole masala range, so it runs four up
   where the best-seller grid runs three. The different column count is
   doing work: it tells you one is a complete set and the other a
   selection.                                                        */

.jt-chai .woocommerce ul.products[class*="columns-"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 2rem;
}

/* Two up on phones, for every product grid. A full-width card per row
   turns six products into a very long scroll, and a four-up row would
   be worse. */

@media (max-width: 1024px) {
  .jt-chai .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products[class*="columns-"],
  .jt-chai .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }

  /* Titles here are long and keyword-heavy; at half width they need a
     ceiling or the card becomes a paragraph. */
  .woocommerce ul.products li.product.type-product .woocommerce-loop-product__title {
    font-size: 1rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .woocommerce ul.products li.product.type-product .price { font-size: 1rem; }

  .woocommerce ul.products li.product.type-product .button,
  .woocommerce ul.products li.product.type-product .added_to_cart {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0 0.5rem;
    min-height: 44px;
  }
}

/* JT-CHAI-END */
/* JT-IMGFIT-START */

/* Product shots are packaging photographs and the label is the point,
   so the box stays square for alignment but the picture is contained
   inside it rather than cropped. Matched on the image itself as well
   as a linked image, since not every card wraps its picture in a link. */

.woocommerce ul.products li.product.type-product img,
.woocommerce ul.products li.product.type-product a img {
  width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--wp--preset--color--surface);
  border-radius: 0;
}

/* The sale flag sat top-left, directly over the product name printed on
   every jar. Moved to the opposite corner, where these photographs are
   background. */

.woocommerce ul.products li.product.type-product span.onsale {
  top: 0;
  right: 0;
  left: auto;
  padding: 6px 10px;
  font-size: 0.625rem;
}

/* JT-IMGFIT-END */
/* JT-ROLE */
.jt-roles .jt-role { max-width: 62ch; }
.jt-roles .jt-role h3 { margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.jt-roles .jt-role p { margin: 0 0 0.9rem; }
.jt-roles .jt-role p:last-child { margin-bottom: 0; }
.jt-roles .jt-role + .jt-role { border-top: 1px solid rgba(81, 43, 25, 0.16); padding-top: 2.25rem; }
@media (max-width: 600px) {
  .jt-roles .jt-role + .jt-role { padding-top: 1.75rem; }
}
/* /JT-ROLE */
/* JT-LEGAL */
.jt-legal { padding-block: 4rem 5rem; }
.jt-legal > .jt-kicker { margin-bottom: 2.5rem; }
.jt-legal h2 { margin: 2.75rem 0 0.75rem; }
.jt-legal h2:first-of-type { margin-top: 0; }
.jt-legal p, .jt-legal li { max-width: 68ch; }
.jt-legal p { margin: 0 0 1rem; }
.jt-legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.jt-legal li { margin-bottom: 0.5rem; }
.jt-legal .jt-lede { margin-bottom: 1.5rem; }
@media (max-width: 600px) { .jt-legal { padding-block: 2.5rem 3.5rem; } }
/* /JT-LEGAL */