/* =========================================================
 * Category Hub styles (LOLUIS)
 *
 * Targets the category-page header (H1 + breadcrumb + description), the
 * injected hub H2, and the subcategory tile title/count.
 *
 * Why the H1/breadcrumb overrides exist: Flatsome's outer wrapper div uses
 * the same class name as the inner H1 (`.shop-page-title`). Without these
 * scoped rules the breadcrumb inherits oversize text from the wrapper while
 * the H1's `is-xlarge` collapses to a smaller computed size — flipping the
 * visual hierarchy. We pin H1 large and breadcrumb small explicitly.
 * ====================================================== */

/* --- Category header hierarchy fix ---------------------------------- */

/* H1 — visually dominant, all-caps, brand-led, centered.
   !important required because the WP Rocket combined CSS occasionally
   ends up loaded *after* this file when used-CSS optimisation reorders
   stylesheets, and Flatsome's .is-xlarge would otherwise win the cascade
   for font-size. */
.category-page-title h1.shop-page-title,
.category-page-title h1.shop-page-title.is-xlarge{
  font-size: 2.25rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin: 24px auto 12px !important;
}

@media (min-width: 850px){
  .category-page-title h1.shop-page-title,
  .category-page-title h1.shop-page-title.is-xlarge{
    font-size: 3.5rem !important;
    letter-spacing: 0.015em !important;
    margin: 32px auto 16px !important;
  }
}

/* Center the flex column holding the H1 so the centered text reads as
   intentional layout rather than orphaned alignment. */
body.loluis-hide-breadcrumb .category-page-title .page-title-inner{
  justify-content: center;
}
body.loluis-hide-breadcrumb .category-page-title .flex-col.flex-grow{
  text-align: center;
}

/* Breadcrumb on a category archive is a *sub*-element under H1 — small,
   muted, never bigger than body text. Flatsome's breadcrumb_size theme mod
   wraps the nav in `<div class="is-medium">` (or .is-large), and that
   wrapper's font-size cascades into the nav. We override at both the
   wrapper *and* the nav, with !important to defeat the inline customizer
   rules Flatsome emits per breadcrumb_size setting.

   On top-level parent terms (e.g. /motivational-quotes-wall-art/) the
   breadcrumb only contains the current term name — completely redundant
   with the H1 directly above. The `.loluis-hide-breadcrumb` body class
   added from inc/category-hub.php suppresses the breadcrumb wrapper there.
*/
.category-page-title .is-small,
.category-page-title .is-medium,
.category-page-title .is-large,
.category-page-title .is-xlarge,
.category-page-title .woocommerce-breadcrumb.breadcrumbs,
.category-page-title nav.woocommerce-breadcrumb{
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  opacity: 0.65;
  margin: 0;
}

.category-page-title .woocommerce-breadcrumb a{
  font-weight: 500 !important;
  color: inherit;
}

/* Hide breadcrumb entirely on parent hub pages (body class set from PHP). */
body.loluis-hide-breadcrumb .category-page-title .woocommerce-breadcrumb,
body.loluis-hide-breadcrumb .category-page-title .is-small,
body.loluis-hide-breadcrumb .category-page-title .is-medium,
body.loluis-hide-breadcrumb .category-page-title .is-large{
  display: none;
}

/* --- Hub intro block (parent hubs only): image left | desc right ---- */

/* On parent hub pages we wrap the term thumbnail + term description in a
   flex row so the page feels like a real "landing" intro instead of a
   single centred paragraph of body text floating above the tile grid.
   The wrapper is injected by inc/category-hub.php at priorities 5 and 11
   on woocommerce_archive_description; the default
   woocommerce_taxonomy_archive_description fires between them at 10.

   Background colour is a warm cream tuned to complement LOLUIS's dark
   brand-primary (#1b1717) without competing with the warm-toned interior
   photography used on category thumbnails. Padding + radius give the
   block a "card hero" feel instead of two floating elements. */
.loluis-hub-intro{
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1180px;
  margin: 24px auto 32px;
  padding: 28px 24px;
  background-color: #faf6f0;
  border-radius: 16px;
}

@media (min-width: 850px){
  .loluis-hub-intro{
    padding: 48px 56px;
    gap: 48px;
    margin: 32px auto 48px;
  }
}

.loluis-hub-intro__image{
  flex: 0 0 38%;
  max-width: 38%;
}

.loluis-hub-intro__image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(34, 31, 31, 0.08);
}

/* When the term description is inside the hub intro, it stops being
   centered / max-width-constrained and becomes the right column instead. */
.loluis-hub-intro > .term-description{
  flex: 1;
  margin: 0;
  text-align: left;
  max-width: none;
  padding: 0;
}

.loluis-hub-intro > .term-description p{
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--brand-ink, #221f1f);
  opacity: 0.88;
}

@media (max-width: 720px){
  .loluis-hub-intro{
    flex-direction: column;
    gap: 16px;
    margin: 16px auto 8px;
  }
  .loluis-hub-intro__image{
    flex: none;
    max-width: 100%;
  }
  .loluis-hub-intro > .term-description{
    text-align: center;
  }
}

/* --- Standalone term description (leaf categories) ------------------ */

/* On leaf pages there's no image wrapper — fall back to the centered,
   constrained paragraph layout so long copy stays scannable. */
.woocommerce .term-description,
.woocommerce-page .term-description,
.term-description{
  max-width: 720px;
  margin: 18px auto 8px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brand-ink, #221f1f);
  opacity: 0.85;
}

.term-description p{
  margin: 0 0 8px;
}

/* --- Hub H2 (Shop by Theme) ---------------------------------------- */

/* Hub heading sits ABOVE the subcategory grid. Smaller than H1 so the
   hierarchy reads H1 -> H2 -> H3-tiles. Was previously rendering larger
   than H1 due to default Flatsome H2 sizing competing with our shrunk H1. */
.loluis-cat-hub__heading{
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 24px 0 16px;
  text-align: center;
  color: var(--brand-ink, #221f1f);
  opacity: 0.85;
}

@media (min-width: 850px){
  .loluis-cat-hub__heading{
    font-size: 1.25rem;
    margin: 32px 0 20px;
  }
}

/* --- Long description (below products) ----------------------------- */

/* The SEO best-practice "long content below products" section. Hidden by
   default until per-term content is populated via the admin field; this
   block defines how it renders when present. Constrained measure for
   readability + slight separator margin so it visually anchors as
   below-the-fold supporting content rather than primary navigation. */
.loluis-long-desc{
  max-width: 820px;
  margin: 56px auto 32px;
  padding: 32px 24px 0;
  border-top: 1px solid rgba(34, 31, 31, 0.08);
}

.loluis-long-desc__heading{
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 24px;
  color: var(--brand-ink, #221f1f);
}

@media (min-width: 850px){
  .loluis-long-desc__heading{
    font-size: 1.75rem;
  }
}

.loluis-long-desc__body{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brand-ink, #221f1f);
}

.loluis-long-desc__body p{
  margin: 0 0 16px;
}

.loluis-long-desc__body h2,
.loluis-long-desc__body h3{
  font-size: 1.25rem;
  font-weight: 700;
  margin: 32px 0 12px;
  text-transform: none;
  letter-spacing: 0;
}

.loluis-long-desc__body h3{
  font-size: 1.1rem;
}

.loluis-long-desc__body ul,
.loluis-long-desc__body ol{
  margin: 0 0 16px 24px;
  padding: 0;
}

.loluis-long-desc__body li{
  margin: 0 0 8px;
}

.loluis-long-desc__body a{
  color: var(--brand-price, #7b2e2f);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.loluis-long-desc__body a:hover{
  text-decoration-thickness: 2px;
}

/* --- Subcategory tile title + count -------------------------------- */

/* Tile heading overridden from H5 to H3 in
   woocommerce/content-product-cat.php. Keep the original Flatsome visual
   weight so the page doesn't look jarring against the rest of the theme. */
.loluis-cat-tile__title{
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Per-tile product count — small muted line under the title. */
.loluis-cat-tile__count{
  font-size: 0.7rem;
  line-height: 1.2;
  margin: 4px 0 0;
  opacity: 0.65;
  letter-spacing: 0.04em;
}