.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-32e7550:#C9972C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   9-5 HAIRS — Loop Item Templates CSS
   Paste into: Elementor → Site Settings → Custom CSS
   OR into each Loop Item Template's Custom CSS box
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Bebas+Neue&family=DM+Sans:ital,wght@0,200;0,300;0,400;0,500;1,300&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --nh-black:      #0A0A0A;
  --nh-near-black: #141414;
  --nh-pearl:      #F5F0EB;
  --nh-white:      #ffffff;
  --nh-gold:       #C9972C;
  --nh-gold-grad:  linear-gradient(135deg, #8B6512 0%, #D4A830 25%, #F0CC5A 48%, #C9972C 65%, #8B6512 85%, #D4A830 100%);
  --nh-gold-text:  linear-gradient(135deg, #6B4A0A 0%, #C9972C 20%, #F5D878 40%, #E8B830 55%, #9B7220 70%, #D4A830 85%, #F0CC5A 100%);
  --nh-border:     #e8e2da;
}

/* ============================================================
   PRODUCT CARD LOOP ITEM
   ============================================================ */

.nh-product-card {
  background: var(--nh-white);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ── Image wrapper ── */
.nh-product-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.nh-product-img-wrap .elementor-widget-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.nh-product-img-wrap .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.nh-product-card:hover .nh-product-img-wrap .elementor-widget-image img {
  transform: scale(1.03);
}

/* ── Badge ── */
.nh-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 0.25em;
  padding: 4px 10px;
  text-transform: uppercase;
  z-index: 2;
  display: block;
}

/* Badge colour variants — driven by content */
.nh-product-img-wrap .elementor-widget-text-editor:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

/* Best Seller */
.nh-badge:not(:empty) {
  background: var(--nh-gold-grad);
  color: var(--nh-black);
}

/* Override per badge type using attribute text */
.nh-badge[data-value="New Stock"] {
  background: var(--nh-black);
  color: var(--nh-pearl);
}

.nh-badge[data-value="Low Stock"],
.nh-badge[data-value="Limited Edition"] {
  background: transparent;
  border: 0.5px solid #C97B2C;
  color: #C97B2C;
}

.nh-badge[data-value="Special Offer"] {
  background: var(--nh-gold-grad);
  color: var(--nh-black);
}

/* ── Quick Add button ── */
.nh-product-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nh-black);
  color: var(--nh-pearl);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  border: none;
  width: 100%;
  z-index: 2;
}

.nh-product-card:hover .nh-product-add {
  opacity: 1;
  transform: translateY(0);
}

/* Quick add widget positioning */
.nh-product-img-wrap .elementor-widget-text-editor:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* ── Product body ── */
.nh-product-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Hair Type label ── */
.nh-product-origin {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--nh-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

/* Elementor wraps dynamic output — target the p tag WooCommerce may add */
.nh-product-body .elementor-widget-text-editor:nth-child(1) p,
.nh-product-body .elementor-widget-text-editor:nth-child(1) span {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  color: var(--nh-gold) !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
  display: block;
}

/* ── Product name ── */
.nh-product-name {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--nh-black);
  line-height: 1.2;
  margin-bottom: 12px;
}

.nh-product-body .elementor-widget-text-editor:nth-child(2) p,
.nh-product-body .elementor-widget-text-editor:nth-child(2) a {
  font-family: 'Instrument Serif', serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--nh-black) !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
  text-decoration: none !important;
}

/* ── Lengths ── */
.nh-product-lengths {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* WooCommerce attribute output wraps in <p> with comma-separated values
   We style the whole block as a pill row via CSS */
.nh-product-body .elementor-widget-text-editor:nth-child(3) p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  color: #888 !important;
  margin: 0 0 16px !important;
  display: block;
  border: 0.5px solid var(--nh-border);
  padding: 3px 8px;
  width: fit-content;
}

/* ── Price ── */
.nh-product-price {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--nh-black);
}

.nh-product-body .elementor-widget-text-editor:nth-child(4) p,
.nh-product-body .elementor-widget-text-editor:nth-child(4) span,
.nh-product-body .elementor-widget-text-editor:nth-child(4) .woocommerce-Price-amount {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--nh-black) !important;
  margin: 0 !important;
}

/* ── Add to Cart widget ── */
.nh-add-to-cart .elementor-button {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background: var(--nh-black) !important;
  color: var(--nh-pearl) !important;
  border-radius: 0 !important;
  width: 100% !important;
  padding: 14px 20px !important;
  transition: background 0.3s ease, color 0.3s ease !important;
  margin-top: 12px;
}

.nh-add-to-cart .elementor-button:hover {
  background: var(--nh-gold) !important;
  color: var(--nh-black) !important;
}

/* ── Mobile: always show add button ── */
@media (max-width: 768px) {
  .nh-product-add {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   COLLECTION CARD LOOP ITEM
   ============================================================ */

.nh-collection-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

/* ── Real image ── */
.nh-collection-card .nh-collection-img,
.nh-collection-card .elementor-widget-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.nh-collection-card .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease;
}

.nh-collection-card:hover .elementor-widget-image img {
  transform: scale(1.04);
}

/* ── CSS gradient fallback (shows when no image assigned) ── */
.nh-collection-gradient-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, #e8e0d5 0%, #cbbfa9 100%);
  z-index: 0;
}

/* Hide fallback when real image is present and loaded */
.nh-collection-card:has(.elementor-widget-image img[src]:not([src=""])) .nh-collection-gradient-fallback {
  display: none;
}

/* ── Dark overlay ── */
.nh-collection-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.nh-collection-card:hover .nh-collection-overlay {
  opacity: 1;
}

/* ── Info block pinned to bottom ── */
.nh-collection-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 24px 20px !important;
  z-index: 3;
  background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 100%);
}

/* ── Texture label ── */
.nh-collection-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--nh-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

/* ── Collection name ── */
.nh-collection-name {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--nh-white);
  line-height: 1.1;
  transition: color 0.4s;
}

.nh-collection-info .elementor-widget-text-editor:nth-child(2) p,
.nh-collection-info .elementor-widget-text-editor:nth-child(2) a {
  font-family: 'Instrument Serif', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--nh-white) !important;
  line-height: 1.1 !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
  transition: color 0.4s;
}

/* ── Collection description ── */
.nh-collection-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #ddd;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.4s;
}

.nh-collection-info .elementor-widget-text-editor:nth-child(3) p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: #ddd !important;
  margin: 6px 0 0 !important;
  opacity: 0;
  transition: opacity 0.4s;
}

.nh-collection-card:hover .nh-collection-desc,
.nh-collection-card:hover .nh-collection-info .elementor-widget-text-editor:nth-child(3) p {
  opacity: 1;
}

/* ── Mobile: always show overlay info ── */
@media (max-width: 768px) {
  .nh-collection-overlay { opacity: 0.5; }
  .nh-collection-desc,
  .nh-collection-info .elementor-widget-text-editor:nth-child(3) p {
    opacity: 1 !important;
  }
}


/* ============================================================
   EDITOR VISIBILITY OVERRIDES
   (Makes hover states visible while editing in Elementor)
   ============================================================ */

.elementor-editor-active .nh-product-add {
  opacity: 1 !important;
  transform: none !important;
}

.elementor-editor-active .nh-collection-overlay {
  opacity: 0.4 !important;
}

.elementor-editor-active .nh-collection-desc,
.elementor-editor-active .nh-collection-info .elementor-widget-text-editor:nth-child(3) p {
  opacity: 1 !important;
}/* End custom CSS */