/* ==========================================================================
   HOME & BEAUTY - WordPress additions
   Single product, page shells, cart drawer controls, WooCommerce notices.
   Uses the same tokens as the master stylesheet, which stays untouched.
   ========================================================================== */

/* ------------------------------- Page shell ----------------------------- */
.page-hero { background: var(--color-cream); padding-block: clamp(36px, 4vw, 60px); }
.page-hero .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.page-hero__title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; line-height: 1.1; margin-top: 14px; }
.page-content { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(40px, 4.4vw, 72px) var(--gutter); }
.page-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 1.6em 0 0.6em; }
.page-content h3 { font-size: 1.25rem; margin: 1.4em 0 0.5em; }
.page-content p { max-width: 68ch; color: var(--color-muted); }

/* ----------------------------- Single product --------------------------- */
.product-single { padding-block: clamp(28px, 3vw, 44px) clamp(48px, 5vw, 80px); background: var(--color-white); }
.product-single .breadcrumbs { margin-bottom: 28px; }
.product-single__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 4vw, 72px); align-items: start; }

.product-single__gallery { position: sticky; top: 104px; }
.product-gallery__main { position: relative; overflow: hidden; background: var(--color-cream-deep); aspect-ratio: 4 / 5; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.product-gallery__thumb { display: block; width: 100%; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; transition: border-color var(--t-fast), opacity var(--t-fast); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover { opacity: 0.85; }
.product-gallery__thumb.is-active { border-color: var(--color-sage); }

.product-single__summary { padding-top: 6px; }
.product-single__summary .eyebrow a { color: inherit; }
.product-single__title { font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: 300; line-height: 1.1; margin-bottom: 16px; }
.product-single__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; font-size: 1.125rem; letter-spacing: 0.03em; }
.product-single__intro { margin-bottom: 28px; color: var(--color-muted); max-width: 52ch; }
.product-single__intro p { margin-bottom: 0.8em; }

.product-form { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.product-form .btn { flex: 1 1 220px; }
.qty-field { display: inline-flex; align-items: stretch; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-white); }
.qty-field__step { width: 40px; border: 0; background: none; color: var(--color-charcoal); font-size: 1rem; cursor: pointer; transition: color var(--t-fast); }
.qty-field__step:hover { color: var(--color-sage); }
.qty-field__input { width: 46px; border: 0; border-inline: 1px solid var(--color-line); background: none; text-align: center; font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-charcoal); -moz-appearance: textfield; }
.qty-field__input::-webkit-outer-spin-button,
.qty-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-meta { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--color-line); display: grid; gap: 8px; }
.product-meta > div { display: flex; gap: 10px; font-size: var(--fs-small); }
.product-meta dt { color: var(--color-muted); min-width: 108px; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-micro); padding-top: 2px; }
.product-meta dd { margin: 0; color: var(--color-charcoal); }

.product-accordion { margin-top: 30px; border-top: 1px solid var(--color-line); }
.product-accordion details { border-bottom: 1px solid var(--color-line); }
.product-accordion summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; transition: color var(--t-fast); }
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary::after { content: '+'; font-size: 1rem; font-weight: 300; color: var(--color-muted); }
.product-accordion details[open] summary::after { content: '\2212'; }
.product-accordion summary:hover { color: var(--color-sage); }
.product-accordion details > div { padding-bottom: 22px; color: var(--color-muted); font-size: var(--fs-small); line-height: 1.8; }
.product-accordion details > div p { margin-bottom: 0.8em; }

.related-products { background: var(--color-white); }
.related-products .product-grid--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------- Cart drawer controls ------------------------ */
.cart-item__qty { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.cart-item__step { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-white); color: var(--color-charcoal); font-size: 0.75rem; line-height: 1; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.cart-item__step:hover { border-color: var(--color-sage); color: var(--color-sage); }
.cart-item__name a:hover { color: var(--color-sage); }
.cart-drawer__continue { display: block; margin-top: 4px; text-align: center; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); transition: color var(--t-fast); }
.cart-drawer__continue:hover { color: var(--color-sage); }

/* --------------------------- WooCommerce notices ------------------------ */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error { margin: 0 0 24px; padding: 14px 18px; border-left: 2px solid var(--color-sage); background: var(--color-cream); font-size: var(--fs-small); list-style: none; }
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: #A85A47; }
.pagination__link--prev svg, .pagination__link--next svg { width: 15px; height: 15px; }
.pagination__dots { min-width: 20px; text-align: center; color: var(--color-muted); }

/* -------------------------------- Responsive ---------------------------- */
@media (max-width: 1023px) {
  .product-single__layout { grid-template-columns: 1fr; gap: 30px; }
  .product-single__gallery { position: static; }
  .related-products .product-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .product-single__layout { gap: 24px; }
  .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .product-form { flex-direction: column; align-items: stretch; }
  .qty-field { align-self: flex-start; }
  .related-products .product-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-meta dt { min-width: 92px; }
}
/* ==========================================================================
   CART DRAWER LAYOUT - actions stay pinned, item list scrolls
   --------------------------------------------------------------------------
   The drawer is a flex column, but WooCommerce fragments replace an inner
   wrapper (.cart-drawer__inner) that sat unstyled between the drawer and its
   body/foot. Without a height constraint on that wrapper the list grew past
   the viewport and pushed Checkout, Order via WhatsApp and Continue shopping
   out of reach. Constraining it here fixes that at any cart length.
   ========================================================================== */
.cart-drawer { max-height: 100dvh; }
.cart-drawer__head { flex: 0 0 auto; }

.cart-drawer__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}
.cart-drawer__body::-webkit-scrollbar { width: 6px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }

.cart-drawer__foot {
  flex: 0 0 auto;
  background: var(--color-white);
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------ Tidier items ---------------------------- */
.cart-item { align-items: start; padding: 16px 0; }
.cart-item:last-child { border-bottom: 0; }
.cart-item img { background: var(--color-cream-deep); }

.cart-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.cart-item__qty { margin-right: 0; }
.cart-item__qty > span {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-drawer__total {
  align-items: baseline;
  padding-bottom: 2px;
}
.cart-drawer__total [data-cart-total] {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--color-charcoal);
}

/* Empty state sits in the middle rather than clinging to the top edge. */
.cart-drawer__body:has(.cart-drawer__empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 767px) {
  .cart-drawer__body { padding: 16px 20px; }
  .cart-drawer__foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* ==========================================================================
   ELEMENTOR PRODUCT LOOPS - responsive behaviour per the design brief
   --------------------------------------------------------------------------
   Elementor's Products widget reuses the theme loop, so every grid arrives as
   .product-grid--archive (4 / 3 / 2 columns). That is correct for the standard
   sections, but the compact row is meant to be six across on desktop and a
   swipeable carousel on mobile.
   ========================================================================== */

/* Elementor wraps the loop in .woocommerce - neutralise its column classes. */
.hb-product-loop .woocommerce { width: 100%; }

@media (min-width: 1024px) {
  .hb-product-loop--compact ul.product-grid--archive {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hb-product-loop--compact ul.product-grid--archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: swipeable carousel, matching the master .product-grid--six feel. */
@media (max-width: 767px) {
  .hb-product-loop--compact ul.product-grid--archive {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hb-product-loop--compact ul.product-grid--archive::-webkit-scrollbar { display: none; }
  .hb-product-loop--compact ul.product-grid--archive > li {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }
}

@media (max-width: 380px) {
  .hb-product-loop--compact ul.product-grid--archive > li { flex: 0 0 56%; }
}

/* Touch devices: reveal card actions that rely on hover on desktop. */
@media (hover: none) {
  .product-card--archive .product-card__actions { opacity: 1; transform: none; }
}
/* ==========================================================================
   FIVE-CATEGORY GRID
   The approved grid was built for four categories. The catalogue now has five
   (Decor, Beauty, Bedroom Essentials, Cleaning Essentials, Accessories), so the
   desktop track count is widened and the tablet step lands on three.
   ========================================================================== */
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* Longer names (Bedroom Essentials) must not knock the tiles out of line. */
.category-card__title { text-wrap: balance; }

/* ==========================================================================
   SINGLE PRODUCT - WHATSAPP CTA
   Sits directly beneath Add to Cart and spans the full width of the
   quantity + button row above it.
   ========================================================================== */
.product-single__wa { margin-top: 12px; }

.product-single__wa .btn--wa-soft,
.product-single__wa .whatsapp-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 32px;
  background: var(--color-soft-btn, #F4ECE4);
  color: var(--color-wa, #3E7D58);
  border: 1px solid #E8DED6;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.product-single__wa .btn--wa-soft:hover,
.product-single__wa .whatsapp-order-btn:hover {
  background: #EFE4DA;
  color: #356A4B;
}
.product-single__wa .icon-wa {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   The Add to Cart widget is set to alignment: justify, which is Elementor's
   own mechanism for making the button fill the row (it sets flex-basis:100%
   on the button and margin-inline-end:auto on the quantity). Only the gap and
   margins are adjusted here - overriding the widths from this stylesheet lost
   the specificity battle against the widget's bundled CSS.
   -------------------------------------------------------------------------- */
.product-single__summary .elementor-add-to-cart form.cart {
  gap: 10px;
  margin: 0;
}
.product-single__summary .elementor-add-to-cart form.cart .quantity { margin: 0; }

/* ==========================================================================
   STICKY HEADER
   The announcement bar scrolls away; the logo / menu / cart bar stays pinned.

   Implemented on the Theme Builder wrapper rather than on .site-header itself.
   A sticky element cannot outlive its containing block, and .site-header's
   block is the wrapper - so sticking the wrapper and offsetting it upward by
   exactly the announcement bar's height leaves the main bar at the top.

   This lives in the stylesheet on purpose: settings written into the Elementor
   document are lost whenever the header is re-saved from the editor.
   ========================================================================== */
:root { --hb-announce-h: 34px; }

.announcement-bar {
  height: var(--hb-announce-h);
  overflow: hidden;
}

header.elementor-location-header {
  position: sticky;
  top: calc(var(--hb-announce-h) * -1);
  z-index: 100;
}

/* The inner bar must not also be sticky, or it fights the wrapper. */
header.elementor-location-header .site-header { position: relative; }

/* script.js adds .is-stuck past 40px; the design's frosted treatment follows. */
.site-header.is-stuck {
  background: rgba(251, 246, 242, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-line, #E8DED6);
  box-shadow: 0 6px 26px rgba(34, 26, 21, 0.05);
}
.site-header.is-stuck .site-header__inner { min-height: 68px; }

@media (max-width: 767px) {
  :root { --hb-announce-h: 32px; }
  .site-header.is-stuck .site-header__inner { min-height: 64px; }
}

/* Drawers and the search panel must clear the pinned bar. */
.overlay, .cart-drawer, .mobile-nav { z-index: 120; }

/* ==========================================================================
   ARCHIVE HERO - solid background, centred text, no image
   The stylesheet's default is a gradient with the copy in a 52% column and a
   photograph bleeding off the right. The image markup is gone, so the column
   width and gradient are overridden here rather than left to collapse oddly.
   ========================================================================== */
.shop-hero {
  background: var(--color-cream-deep, #F7EFE9);
  border-bottom: 1px solid var(--color-line, #E8DED6);
}

.shop-hero__inner {
  min-height: 0;
  justify-content: center;
}

.shop-hero__content {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(48px, 5vw, 76px);
}

.shop-hero__title { margin-inline: auto; }

.shop-hero__text {
  max-width: 52ch;
  margin-inline: auto;
}

.shop-hero .eyebrow { display: block; }

@media (max-width: 1023px) {
  .shop-hero__content { padding-block: clamp(36px, 5vw, 56px); }
}

@media (max-width: 767px) {
  .shop-hero__content { padding-block: 32px; }
}

/* ==========================================================================
   PRODUCT SPECS - Additional Information beneath the gallery
   Rendered as a clean two-column spec list rather than WooCommerce's default
   striped table.
   ========================================================================== */
.product-single__specs { margin-top: 28px; }

.product-single__specs .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-line, #E8DED6);
}

.product-single__specs .woocommerce-product-attributes-item {
  border-bottom: 1px solid var(--color-line, #E8DED6);
}

.product-single__specs .woocommerce-product-attributes-item th,
.product-single__specs .woocommerce-product-attributes-item td {
  padding: 12px 0;
  text-align: left;
  vertical-align: top;
  background: none;
  font-size: var(--fs-body, 15px);
}

.product-single__specs .woocommerce-product-attributes-item th {
  width: 38%;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charcoal, #221A15);
}

.product-single__specs .woocommerce-product-attributes-item td {
  color: var(--color-muted, #6E625B);
}

.product-single__specs .woocommerce-product-attributes-item td p { margin: 0; }

@media (max-width: 767px) {
  .product-single__specs .woocommerce-product-attributes-item th { width: 44%; }
}

/* ==========================================================================
   RELATED PRODUCTS
   The widget reuses the theme's product card, so the grid is aligned to the
   archive rather than left to Elementor's own loop styling. Cards are made
   equal height so the row reads as a clean band.
   ========================================================================== */
.hb-product-loop .related > h2,
.hb-product-loop h2.elementor-products-heading {
  margin: 0 0 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--color-charcoal, #221A15);
}

.hb-product-loop ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Equal-height cards so prices and buttons line up across the row. */
.hb-product-loop ul.products > li {
  display: flex;
  flex-direction: column;
}
.hb-product-loop ul.products > li > * { height: 100%; }

.hb-product-loop .product-card--archive {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hb-product-loop .product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.hb-product-loop .product-card__actions { margin-top: auto; }

@media (max-width: 767px) {
  .hb-product-loop .related > h2,
  .hb-product-loop h2.elementor-products-heading { margin-bottom: 20px; }
}

/* ==========================================================================
   PROMO CARD CONTACT
   The sidebar promo card now ends in contact numbers rather than a photo.
   ========================================================================== */
.promo-card__contact {
  padding: 22px 24px 26px;
  border-top: 1px solid var(--color-line, #E8DED6);
  background: var(--color-white, #FFFDFB);
}

.promo-card__text--sm {
  font-size: 13px;
  margin-bottom: 14px;
}

.promo-card__numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-card__numbers a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--color-line, #E8DED6);
  border-radius: 2px;
  background: var(--color-soft-btn, #F6EEE7);
  color: var(--color-wa, #3E7D58);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, color 0.3s ease;
}

.promo-card__numbers a:hover {
  background: #EFE4DA;
  color: #356A4B;
}

.promo-card__numbers .icon-wa {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   CATEGORY CARD LINKS
   Elementor's container-level link does not render an anchor here, so the
   image and title carry the link instead. The title's anchor is then stretched
   across the whole card, which keeps one link per card for screen readers
   while making the entire tile clickable.
   ========================================================================== */
.category-card { position: relative; }

.category-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.category-card__title a {
  color: inherit;
  text-decoration: none;
}

.category-card:hover .category-card__title a { color: var(--color-sage, #5F5B3B); }

/* The image link sits under the stretched anchor and would otherwise be dead. */
.category-card__media a { display: block; }

.category-card:focus-within {
  outline: 2px solid var(--color-sage, #5F5B3B);
  outline-offset: 3px;
}
.category-card__title a:focus { outline: none; }

.category-card__media img { transition: transform 0.6s ease; }
.category-card:hover .category-card__media img { transform: scale(1.03); }
.category-card__media { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .category-card__media img,
  .category-card:hover .category-card__media img { transition: none; transform: none; }
}