/* Custom menu styles matching the lashesfactory reference site */

/* Load the same typeface as the reference site — DISABLED.
   Google Fonts @import blocks page render when fonts.gstatic.com is slow.
   The 'DM Sans', system-ui, sans-serif stack in the rest of this file
   already falls back gracefully to system fonts on browsers that don't
   have DM Sans locally.
*/

/* --------------------------------------------------------------
   Header: fixed, frosted-glass (white) — always visible.
   -------------------------------------------------------------- */
.header-block,
.header-block-2,
.t4-header,
#t4-header.t4-section.t4-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
  height: 72px !important;
  min-height: 72px !important;
  background-color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(201, 160, 111, 0.2) !important;
  border-bottom: none !important;
  overflow: visible !important;
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

/* Make the content wrapper the positioning context for the hero */
.t4-wrapper,
.t4-content {
  position: relative !important;
}

/* Home page: same frosted glass, no special override needed */
body.item-101 #t4-header.t4-section.t4-header,
body.item-101 #t4-header.t4-section.t4-header .header-block,
body.item-101 #t4-header.t4-section.t4-header .header-block-2 {
  background-color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(201, 160, 111, 0.2) !important;
}

/* Keep header above the hero overlay */
.header-block,
.header-block-2 {
  position: relative;
  z-index: 1031;
}

/* Keep original logo colors, sized like the reference site */
.navbar-brand.logo-image img,
.t4-offcanvas .logo-img-sm,
.t4-offcanvas .logo-img {
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------
   Scrolled state: slightly more solid frosted glass.
   JS (template.js) toggles .header-sticky on #t4-header when scrollY > 10.
   -------------------------------------------------------------- */
#t4-header.header-sticky,
#t4-header.header-sticky .header-block,
#t4-header.header-sticky .header-block-2 {
  background-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(201, 160, 111, 0.3) !important;
  border-bottom: none !important;
}

/* Vertically center the header inner row */
.header-wrap {
  align-items: center !important;
  height: 72px !important;
}

/* Hide mobile/offcanvas toggler on desktop (reference site has no hamburger icon).
   IMPORTANT: only hide the toggler BUTTON, never the .navbar-expand-lg wrapper,
   because that wrapper also contains the desktop menu itself. */
@media (min-width: 992px) {
  .t4-header-r .navbar-toggler,
  .t4-header-r .t4-offcanvas-toggle,
  .t4-offcanvas-toggle,
  #triggerButton {
    display: none !important;
  }
}

/* Always keep toggle icon color consistent if visible on mobile */
.t4-header-r .toggle-bars,
.t4-offcanvas-toggle .toggle-bars {
  color: #c9a06f !important;
}

/* --------------------------------------------------------------
   Inner pages: same frosted glass header for consistency.
   -------------------------------------------------------------- */
body:not(.item-101) .header-block,
body:not(.item-101) .header-block-2,
body:not(.item-101) .t4-header {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Push inner-page content below the fixed header
body:not(.item-101) .t4-main-body {
  padding-top: 72px !important;
}
 */
/* --------------------------------------------------------------
   Main navigation: right-aligned, DM Sans, golden text
   -------------------------------------------------------------- */
/* Override T4's .mx-auto utility on the navbar so it sits on the right */
.header-wrap .t4-navbar.mx-auto,
.t4-navbar.mx-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 1 1 auto !important;
}

/* Make the inner nav element a flex container aligned to the right */
.header-wrap .t4-navbar .navbar,
.t4-navbar .navbar {
  float: right !important;
  justify-content: flex-end !important;
}

.t4-megamenu .navbar-nav {
  align-items: center;
  justify-content: flex-end;
}

.t4-megamenu .navbar-nav > li > a,
.t4-megamenu .navbar-nav > li > .nav-link {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.9px;
  color: #c9a06f !important;
  text-decoration: none;
  text-transform: none;
  padding: 0 15px 2px !important;
  line-height: 90px !important;
  height: 90px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

/* Hover / active / open: darker gold */
.t4-megamenu .navbar-nav > li > a:hover,
.t4-megamenu .navbar-nav > li > .nav-link:hover,
.t4-megamenu .navbar-nav > li > a:focus,
.t4-megamenu .navbar-nav > li > .nav-link:focus,
.t4-megamenu .navbar-nav > li.active > a,
.t4-megamenu .navbar-nav > li.active > .nav-link,
.t4-megamenu .navbar-nav > li.show > a,
.t4-megamenu .navbar-nav > li.show > .nav-link,
.t4-megamenu .navbar-nav > li.dropdown:hover > a,
.t4-megamenu .navbar-nav > li.dropdown:hover > .nav-link {
  color: #c9a06f  !important;
  background-color: transparent !important;
}

/* --------------------------------------------------------------
   Dropdown menu: cream background, rounded, soft shadow
   -------------------------------------------------------------- */
.t4-megamenu .dropdown-menu,
.t4-megamenu .dropdown-menu .dropdown-menu-inner {
  background-color: #faf6f0 !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12);
  border-radius: 8px;
  padding: 0;
  margin-top: 0 !important;
  min-width: 240px;
}

.t4-megamenu .dropdown-menu .dropdown-item,
.t4-megamenu .dropdown-menu li > a.dropdown-item,
.t4-megamenu .dropdown-menu .mega-nav > li > a,
.t4-megamenu .dropdown-menu-inner > ul > li > a {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  color: #c9a06f !important;
  text-decoration: none;
  padding: 10px 20px !important;
  line-height: 15px !important;
  transition: color 0.3s ease;
  background-color: transparent !important;
  display: block;
}

.t4-megamenu .dropdown-menu .dropdown-item:hover,
.t4-megamenu .dropdown-menu .dropdown-item:focus,
.t4-megamenu .dropdown-menu .mega-nav > li > a:hover,
.t4-megamenu .dropdown-menu .mega-nav > li > a:focus,
.t4-megamenu .dropdown-menu-inner > ul > li > a:hover,
.t4-megamenu .dropdown-menu-inner > ul > li > a:focus {
  color: #a07a4a !important;
  background-color: transparent !important;
}

/* Hide dropdown caret to match lashesfactory's clean look */
.t4-megamenu .dropdown-toggle .item-caret {
  display: none !important;
}

/* --------------------------------------------------------------
   Offcanvas / navbar toggler
   -------------------------------------------------------------- */
.navbar-toggler,
.offcanvas-toggler,
.t4-header .navbar-toggler,
.t4-header-r .toggle-bars,
.t4-offcanvas-toggle {
  color: #c9a06f !important;
}

.navbar-toggler:hover,
.offcanvas-toggler:hover,
.t4-header .navbar-toggler:hover,
.t4-header-r .toggle-bars:hover,
.t4-offcanvas-toggle:hover {
  color: #a07a4a !important;
}

/* --------------------------------------------------------------
   Mobile / breakpoint adjustments
   -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .t4-megamenu .navbar-nav > li > a,
  .t4-megamenu .navbar-nav > li > .nav-link {
    line-height: 60px !important;
    height: 60px;
  }

  .t4-navbar {
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  .t4-megamenu .dropdown-menu,
  .t4-megamenu .dropdown-menu .dropdown-menu-inner {
    background-color: #faf6f0 !important;
    box-shadow: none;
    border-radius: 0;
  }
}


/* ==========================================================
   REFERENCE SITE FULL STYLESHEET (lashesfactory custom.css)
   ========================================================== */

/* =========================================
   HOME BANNER — Hero Section
   Styles for module: Home-Banner (mod_custom, position: title)
   Reference: lamylash-cluster-lashes.html .hero section
========================================= */

/* ---- CSS Variables ---- */
:root {
  --hb-black-deep:    #0A0907;
  --hb-black-soft:    #141210;
  --hb-black-mid:     #1E1B17;
  --hb-cream:         #FAF6F0;
  --hb-rose-gold:     #C9A06F;
  --hb-rose-gold-lt:  #D4B88A;
  --hb-rose-gold-dk:  #A8784A;
  --hb-rose-gold-pale:#EDD9BE;
  --hb-white:         #FFFFFF;
  --hb-font-display:  'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --hb-font-heading:  'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --hb-font-body:     'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --hb-transition:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Override #sp-title default padding ---- */
#sp-title {
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* ---- Hero Banner Section Wrapper ---- */
.hero-banner {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--hb-black-deep);
  overflow: hidden;
  background-image: url('../../../images/banners/hongking-factory-banner.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---- Background Image Overlay (dark gradient) ---- */
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 9, 7, 0.90) 0%,
    rgba(10, 9, 7, 0.55) 50%,
    rgba(10, 9, 7, 0.20) 100%
  );
  z-index: 1;
}

/* ---- Decorative Particles ---- */
.hero-banner-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* ---- Main Content Wrapper ---- */
.hero-banner-content {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  width: 100%;
}

/* ---- Badge / Label above headline ---- */
.hero-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(201, 160, 111, 0.40);
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-lt);
  margin-bottom: 32px;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.2s both;
}

.hero-banner-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hb-rose-gold);
  animation: hbPulseDot 2s ease infinite;
  flex-shrink: 0;
}

@keyframes hbPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ---- Main Headline H1 ---- */
.hero-banner-content h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.07;
  color: var(--hb-white);
  max-width: 750px;
  margin-bottom: 28px;
  margin-top: 0;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.4s both;
}

.hero-banner-content h1 strong {
  font-weight: 600;
  color: var(--hb-rose-gold-lt);
}

/* ---- Subtitle / Sub-heading ---- */
.hero-banner-sub {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 520px;
  line-height: 1.8;
  margin-bottom: 48px;
  font-weight: 300;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.6s both;
}

/* ---- CTA Buttons Row ---- */
.hero-banner-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.8s both;
}

/* Primary Button */
.hero-banner-btn-primary {
  display: inline-block;
  padding: 13px 28px;
  background: var(--hb-rose-gold);
  color: var(--hb-white) !important;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--hb-rose-gold);
  text-decoration: none;
  transition: all 0.3s var(--hb-transition);
  cursor: pointer;
  white-space: nowrap;
}

.hero-banner-btn-primary:hover,
.hero-banner-btn-primary:focus {
  background: var(--hb-rose-gold-dk);
  border-color: var(--hb-rose-gold-dk);
  color: var(--hb-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(201, 160, 111, 0.40);
  text-decoration: none;
}

/* Outline / Ghost Button */
.hero-banner-btn-outline {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  color: var(--hb-white) !important;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s var(--hb-transition);
  cursor: pointer;
  white-space: nowrap;
}

.hero-banner-btn-outline:hover,
.hero-banner-btn-outline:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--hb-white);
  color: var(--hb-white) !important;
  text-decoration: none;
}

/* ---- Stats Row ---- */
.hero-banner-stats {
  margin-top: 72px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 1.0s both;
}

.hero-banner-stat-value {
  font-family: var(--hb-font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--hb-rose-gold-lt);
  line-height: 1;
}

.hero-banner-stat-label {
  font-family: var(--hb-font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---- Scroll Indicator (optional, if added in HTML) ---- */
.hero-banner-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--hb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-banner-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(201, 160, 111, 0.6), transparent);
  animation: hbScrollLine 2s ease infinite;
}


/* =========================================
   WHOLESALE QUOTE MODAL
   Triggered by "Request Wholesale Pricing" button on Home Banner
   ID: #wqModal  |  Toggle class: .wq-open
   ========================================= */

/* ---- Backdrop ---- */
.wq-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.wq-backdrop.wq-open {
  display: flex;
  animation: wqFadeIn 0.25s ease both;
}

@keyframes wqFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Dialog box ---- */
.wq-dialog {
  position: relative;
  background: #1a1714;
  border: 1px solid rgba(201, 160, 111, 0.20);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px 44px 40px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.60);
  animation: wqSlideUp 0.30s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,160,111,0.3) transparent;
}

@keyframes wqSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Close button ---- */
.wq-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.wq-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ---- Header ---- */
.wq-header {
  margin-bottom: 32px;
}
.wq-header-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(201, 160, 111, 0.12);
  border: 1px solid rgba(201, 160, 111, 0.30);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-lt, #D4B88A);
  margin-bottom: 12px;
}
.wq-header h2 {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.wq-header p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.50);
  margin: 0;
  line-height: 1.6;
}

/* ---- Form layout ---- */
.wq-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wq-row {
  display: flex;
  gap: 16px;
}
.wq-row-2 .wq-field {
  flex: 1;
  min-width: 0;
}
.wq-row:not(.wq-row-2) .wq-field {
  flex: 1;
}

/* ---- Field ---- */
.wq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wq-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
}
.wq-field label span {
  color: var(--hb-rose-gold, #C9A06F);
}
.wq-field input,
.wq-field select,
.wq-field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: #fff;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.wq-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.wq-field select option {
  background: #1a1714;
  color: #fff;
}
.wq-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}
.wq-field input::placeholder,
.wq-field textarea::placeholder {
  color: rgba(255,255,255,0.25);
}
.wq-field input:focus,
.wq-field select:focus,
.wq-field textarea:focus {
  border-color: rgba(201, 160, 111, 0.60);
  background: rgba(201, 160, 111, 0.05);
}

/* ---- Status message ---- */
.wq-status {
  display: none;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.wq-status.wq-status-ok {
  display: block;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.30);
  color: #6ee7b7;
}
.wq-status.wq-status-err {
  display: block;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}

/* ---- Submit button + privacy ---- */
.wq-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--hb-rose-gold, #C9A06F);
  border: 1px solid var(--hb-rose-gold, #C9A06F);
  border-radius: 4px;
  color: #fff;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
}
.wq-submit:hover:not(:disabled) {
  background: var(--hb-rose-gold-dk, #A8784A);
  border-color: var(--hb-rose-gold-dk, #A8784A);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(201, 160, 111, 0.35);
}
.wq-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
.wq-submit-icon {
  font-size: 14px;
  transition: transform 0.2s;
}
.wq-submit:hover:not(:disabled) .wq-submit-icon {
  transform: translateX(3px);
}
.wq-privacy {
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ---- Responsive: stack 2-col rows on mobile ---- */
@media (max-width: 540px) {
  .wq-dialog {
    padding: 36px 20px 28px;
  }
  .wq-row-2 {
    flex-direction: column;
  }
  .wq-header h2 {
    font-size: 1.4rem;
  }
  #sp-bottom .row div.col-lg-3{margin:auto 50px;}
}

/* ---- Particle Elements (JS-generated) ---- */
.hero-banner-particles .hb-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(201, 160, 111, 0.30);
  animation: hbFloatParticle linear infinite;
}

/* ---- Keyframe Animations ---- */
@keyframes hbFadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hbScrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes hbFloatParticle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ---- Responsive: Tablet (≤ 991px) ---- */
@media (max-width: 991px) {
  .hero-banner {
    min-height: 80vh;
  }
  .hero-banner-content {
    padding: 100px 30px 60px;
  }
  .hero-banner-stats {
    gap: 28px;
    margin-top: 48px;
  }
  .hero-banner-stat-value {
    font-size: 2.2rem;
  }
}

/* ---- Responsive: Mobile (≤ 767px) ---- */
@media (max-width: 767px) {
  .hero-banner {
    min-height: 70vh;
    background-position: 65% center;
  }
  .hero-banner-content {
    padding: 90px 30px 60px;
  }
  .hero-banner-content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    max-width: 100%;
  }
  .hero-banner-sub {
    font-size: 0.95rem;
    max-width: 100%;
  }
  .hero-banner-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hero-banner-btn-primary,
  .hero-banner-btn-outline {
    width: 70%;
    text-align: center;
    padding: 14px 20px;
    margin: 0 auto;
  }
  .hero-banner-stats {
    gap: 20px;
    margin-top: 36px;
  }
  .hero-banner-stat-value {
    font-size: 1.8rem;
  }
  .hero-banner-stat-label {
    font-size: 10px;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  .hero-banner-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    text-align: center;
  }
}

/* =========================================
   HOME PRODUCT CATEGORIES
   Styles for VirtueMart category-view inside #sp-main-body
   Reference: lamylash-cluster-lashes.html #categories section
   Scope: body.item-101 #sp-main-body .category-view
========================================= */

/* ---- Section Container ---- */
body.item-101 #sp-main-body {
  padding: 120px 0;
  background: var(--hb-cream);
}

body.item-101 #sp-main-body .container {
  max-width: 1280px;
}

/* ---- Category Header (.vendor-store-desc) ---- */
body.item-101 #sp-main-body .category-view .vendor-store-desc {
  margin-bottom: 60px;
}

/* Label */
body.item-101 #sp-main-body .category-view .vendor-store-desc .section-label {
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.item-101 #sp-main-body .category-view .vendor-store-desc .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--hb-rose-gold);
}

/* Title */
body.item-101 #sp-main-body .category-view .vendor-store-desc .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--hb-black-deep);
  margin: 0 0 20px 0;
}

body.item-101 #sp-main-body .category-view .vendor-store-desc .section-title em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* Description */
body.item-101 #sp-main-body .category-view .vendor-store-desc > p {
  max-width: 440px;
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0;
}

/* ---- Category Grid ---- */
body.item-101 #sp-main-body .vm-category-subcategories {
  margin-bottom: 0;
}

body.item-101 #sp-main-body .vm-category-subcategories .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-content: start;
}

/* ---- Individual Category Card ---- */
body.item-101 #sp-main-body .vm-subcategory {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3/4;
  text-align: left !important;
  background: var(--hb-black-mid);
  /* Override Bootstrap col sizing — grid children should stretch */
  flex: 0 0 auto;
  max-width: none;
  width: auto;
}

/* Reset Bootstrap col padding inside the grid card */
body.item-101 #sp-main-body .vm-subcategory {
  padding: 0 !important;
}

body.item-101 #sp-main-body .vm-subcategory a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* ---- Category Image ---- */
body.item-101 #sp-main-body .vm-subcategory .browseCategoryImage {
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s;
  margin: 0 !important;
  padding: 0;
  display: block;
  border: none;
  border-radius: 0;
}

body.item-101 #sp-main-body .vm-subcategory:hover .browseCategoryImage {
  transform: scale(1.07);
  filter: brightness(0.65);
}

/* ---- Dark Gradient Overlay (simulated via pseudo-element) ---- */
body.item-101 #sp-main-body .vm-subcategory a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,9,7,0.88) 0%, transparent 55%);
  z-index: 1;
  transition: background 0.4s;
  pointer-events: none;
}

body.item-101 #sp-main-body .vm-subcategory:hover a::after {
  background: linear-gradient(to top, rgba(10,9,7,0.92) 0%, rgba(10,9,7,0.15) 60%);
}

/* ---- Card Content Wrapper (title + desc + explore link) ---- */
body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  z-index: 2;
}

/* ---- Category Title — Reference: .category-card h3 ---- */
body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-title {
  font-family: var(--hb-font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--hb-white);
  margin-bottom: 6px;
  line-height: 1.2;
  padding: 0;
  border: none !important;
  border-top: none !important;
  background: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Category Description — Reference: .category-card p ---- */
body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-desc {
  font-family: var(--hb-font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 0;
}

/* ---- Explore Link — Reference: .category-card-link ---- */
body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-lt);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}

body.item-101 #sp-main-body .vm-subcategory:hover .vm-subcategory-link {
  opacity: 1;
  transform: translateY(0);
}

/* Shift content up on hover to make room for "Explore" text */
body.item-101 #sp-main-body .vm-subcategory:hover .vm-subcategory-content {
  transform: translateY(-12px);
}

/* ---- Decorative Card Number (optional visual) ---- */
/* Uncomment and add data-num attribute to subcategory divs if desired:
body.item-101 #sp-main-body .vm-subcategory::before {
  content: attr(data-num);
  font-family: var(--hb-font-display);
  font-size: 4.5rem;
  font-weight: 300;
  color: rgba(201,160,111,0.12);
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  line-height: 1;
  transition: color 0.4s;
  pointer-events: none;
}
body.item-101 #sp-main-body .vm-subcategory:hover::before {
  color: rgba(201,160,111,0.22);
}
*/

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.item-101 #sp-main-body .vm-category-subcategories .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
  body.item-101 #sp-main-body {
    padding: 80px 0;
  }

  body.item-101 #sp-main-body .category-view .vendor-store-desc {
    margin-bottom: 40px;
  }

  body.item-101 #sp-main-body .vm-category-subcategories .row {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-content {
    padding: 20px;
  }

  body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-title {
    font-size: 1.3rem;
  }

  body.item-101 #sp-main-body .vm-subcategory .vm-subcategory-link {
    font-size: 10px;
  }
}

/* =========================================
   HOME WHY US SECTION
   Styles for module: Home-Why Lamylash (mod_custom #122, position: sp-position1)
   Reference: lamylash-cluster-lashes.html #why-us section
   Scope: body.item-101 .why-us-section
========================================= */

/* ---- Section Background ---- */
body.item-101 .why-us-section {
  padding: 120px 0;
  background: var(--hb-black-deep);
  position: relative;
  overflow: hidden;
}

/* Decorative ambient glow (top-right) */
body.item-101 .why-us-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,111,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Hide default module title — we use our own header inside the content */
body.item-101 .why-us-section .sp-module-title {
  display: none;
}

/* Make sure content sits above the glow */
body.item-101 .why-us-section .sp-module-content {
  position: relative;
  z-index: 1;
}

/* ---- Header (section-label / section-title / intro) ---- */
body.item-101 .why-us-section .why-us-header {
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 0 40px;
  box-sizing: border-box;
}

body.item-101 .why-us-section .why-us-header .section-title,
body.item-101 .why-us-section .why-us-header .why-us-intro {
  max-width: 640px;
}

body.item-101 .why-us-section .why-us-header .section-label {
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.item-101 .why-us-section .why-us-header .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--hb-rose-gold);
}

body.item-101 .why-us-section .why-us-header .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--hb-white);
  margin-bottom: 20px;
  margin-top: 0;
}

body.item-101 .why-us-section .why-us-header .section-title em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

body.item-101 .why-us-section .why-us-header .why-us-intro {
  color: rgba(255,255,255,0.48);
  font-size: 1rem;
  max-width: 520px;
  margin-bottom: 0;
  line-height: 1.8;
}

/* ---- Grid ---- */
body.item-101 .why-us-section .why-us-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/* ---- Individual Card ---- */
body.item-101 .why-us-section .why-us-card {
  padding: 40px 32px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  transition: background 0.4s, border-color 0.4s, transform 0.4s;
  position: relative;
  overflow: hidden;
}

/* Gold top-line accent on hover */
body.item-101 .why-us-section .why-us-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--hb-rose-gold), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

body.item-101 .why-us-section .why-us-card:hover {
  background: rgba(201,160,111,0.055);
  border-color: rgba(201,160,111,0.18);
  transform: translateY(-4px);
}

body.item-101 .why-us-section .why-us-card:hover::before {
  opacity: 1;
}

/* ---- Icon ---- */
body.item-101 .why-us-section .why-us-card .why-us-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--hb-rose-gold);
}

/* ---- Card Title ---- */
body.item-101 .why-us-section .why-us-card .why-us-card-title {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--hb-white);
  margin-bottom: 12px;
  margin-top: 0;
}

/* ---- Card Description ---- */
body.item-101 .why-us-section .why-us-card .why-us-card-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.75;
  margin-bottom: 0;
}

/* ---- Stat Value ---- */
body.item-101 .why-us-section .why-us-card .why-us-stat {
  margin-top: 20px;
  font-family: var(--hb-font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--hb-rose-gold);
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.item-101 .why-us-section .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ask-a-question, body.view-productdetails .manufacturer{padding: 16px 5px;
  width: 45%;

  }
}

/* ---- Responsive: Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
  body.item-101 .why-us-section {
    padding: 80px 0;
  }

  body.item-101 .why-us-section .why-us-header,
  body.item-101 .why-us-section .why-us-grid {
    padding: 0 20px;
  }

  body.item-101 .why-us-section .why-us-header {
    margin-bottom: 40px;
  }

  body.item-101 .why-us-section .why-us-grid {
    grid-template-columns: 1fr;
  }

  body.item-101 .why-us-section .why-us-card {
    padding: 28px 24px;
  }
}

/* =========================================
   HOME TRUSTED WORLDWIDE SECTION
   Styles for module: Home-Trusted Worldwide (mod_custom #123)
   Reference: lamylash-cluster-lashes.html #trust section
   Universal styles for both SP PageBuilder and VirtueMart templates
========================================= */

/* ---- Section Background (for VirtueMart template wrapper) ---- */
.vm-position2-modules .trust-section {
  padding: 100px 0;
  background: #FAF6F0;
  position: relative;
  overflow: hidden;
}

/* Decorative ambient glow */
.vm-position2-modules .trust-section::before {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(201,160,111,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- .trust-section root wrapper ---- */
.vm-position2-modules .trust-section .trust-section-inner,
.vm-position2-modules .trust-section > div {
  position: relative;
  z-index: 1;
}

body.item-101 #sp-section-4 .trust-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- Top two-column layout: header left, logos right ---- */
.vm-position2-modules .trust-top,
body.item-101 #sp-section-4 .trust-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}

/* ---- Header block ---- */
.vm-position2-modules .section-label,
body.item-101 #sp-section-4 .trust-header .section-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9A06F;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vm-position2-modules .section-label::before,
body.item-101 #sp-section-4 .trust-header .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #C9A06F;
  flex-shrink: 0;
}

.vm-position2-modules .section-title,
body.item-101 #sp-section-4 .trust-header .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: #1A1714;
  margin-bottom: 20px;
}

.vm-position2-modules .section-title em,
body.item-101 #sp-section-4 .trust-header .section-title em {
  font-style: italic;
  color: #C9A06F;
}

.vm-position2-modules .trust-intro,
body.item-101 #sp-section-4 .trust-header .trust-intro {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 400px;
}

/* ---- Partner logo grid ---- */
.vm-position2-modules .trust-logos,
body.item-101 #sp-section-4 .trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.vm-position2-modules .trust-logo,
body.item-101 #sp-section-4 .trust-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 120px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.vm-position2-modules .trust-logo:hover,
body.item-101 #sp-section-4 .trust-logo:hover {
  border-color: rgba(201,160,111,0.5);
  box-shadow: 0 4px 20px rgba(10,9,7,0.08);
  transform: translateY(-2px);
}

.vm-position2-modules .trust-logo-icon,
body.item-101 #sp-section-4 .trust-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201,160,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-position2-modules .trust-logo-icon svg,
body.item-101 #sp-section-4 .trust-logo-icon svg {
  width: 20px;
  height: 20px;
  stroke: #C9A06F;
}

.vm-position2-modules .trust-logo span,
body.item-101 #sp-section-4 .trust-logo span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6B5E50;
  text-align: center;
}

/* ---- Testimonials 2×2 grid ---- */
.vm-position2-modules .trust-testimonials,
body.item-101 #sp-section-4 .trust-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 80px;
}

.vm-position2-modules .testimonial-card,
body.item-101 #sp-section-4 .testimonial-card {
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.vm-position2-modules .testimonial-card:hover,
body.item-101 #sp-section-4 .testimonial-card:hover {
  border-color: rgba(201,160,111,0.4);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
  transform: translateY(-3px);
}

.vm-position2-modules .testimonial-stars,
body.item-101 #sp-section-4 .testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.vm-position2-modules .testimonial-stars::before,
body.item-101 #sp-section-4 .testimonial-stars::before {
  content: "★★★★★";
  color: #C9A06F;
  font-size: 14px;
  letter-spacing: 2px;
}

.vm-position2-modules .testimonial-text,
body.item-101 #sp-section-4 .testimonial-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #1A1714;
  line-height: 1.7;
  margin-bottom: 20px;
}

.vm-position2-modules .testimonial-author,
body.item-101 #sp-section-4 .testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vm-position2-modules .testimonial-avatar,
body.item-101 #sp-section-4 .testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201,160,111,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.vm-position2-modules .testimonial-name,
body.item-101 #sp-section-4 .testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1714;
}

.vm-position2-modules .testimonial-role,
body.item-101 #sp-section-4 .testimonial-role {
  font-size: 11px;
  color: #9B8E7E;
  margin-top: 2px;
}

/* ---- Certifications block ---- */
.vm-position2-modules .trust-certs-wrap,
body.item-101 #sp-section-4 .trust-certs-wrap {
  padding-top: 60px;
  border-top: 1px solid #E8DDD0;
}

.vm-position2-modules .trust-certs-label,
body.item-101 #sp-section-4 .trust-certs-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9A06F;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.vm-position2-modules .trust-certs-label::before,
body.item-101 #sp-section-4 .trust-certs-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #C9A06F;
}

.vm-position2-modules .trust-certs,
body.item-101 #sp-section-4 .trust-certs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.vm-position2-modules .cert-badge,
body.item-101 #sp-section-4 .cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 160px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.vm-position2-modules .cert-badge:hover,
body.item-101 #sp-section-4 .cert-badge:hover {
  border-color: #C9A06F;
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
}

.vm-position2-modules .cert-badge-icon,
body.item-101 #sp-section-4 .cert-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,160,111,0.15), rgba(201,160,111,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-position2-modules .cert-badge-icon svg,
body.item-101 #sp-section-4 .cert-badge-icon svg {
  width: 22px;
  height: 22px;
  stroke: #C9A06F;
}

.vm-position2-modules .cert-badge-name,
body.item-101 #sp-section-4 .cert-badge-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B5E50;
}

.vm-position2-modules .cert-badge-desc,
body.item-101 #sp-section-4 .cert-badge-desc {
  font-size: 10px;
  color: #9B8E7E;
  line-height: 1.5;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .vm-position2-modules .trust-top,
  body.item-101 #sp-section-4 .trust-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vm-position2-modules .trust-testimonials,
  body.item-101 #sp-section-4 .trust-testimonials {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  .vm-position2-modules .trust-section {
    padding: 80px 0;
  }

  .vm-position2-modules .trust-section > div {
    padding: 0 20px;
  }

  body.item-101 #sp-section-4 .trust-section {
    padding: 0 20px;
  }

  .vm-position2-modules .trust-top,
  body.item-101 #sp-section-4 .trust-top {
    margin-bottom: 48px;
  }

  .vm-position2-modules .trust-testimonials,
  body.item-101 #sp-section-4 .trust-testimonials {
    grid-template-columns: 1fr;
    margin-bottom: 48px;
  }

  .vm-position2-modules .trust-certs,
  body.item-101 #sp-section-4 .trust-certs {
    gap: 12px;
  }

  .vm-position2-modules .cert-badge,
  body.item-101 #sp-section-4 .cert-badge {
    min-width: 140px;
    padding: 20px 24px;
  }
}

/* =========================================
   HOME CTA / START ORDER + CONTACT FORM SECTION
   position3 = Home-Start Order (mod_custom #124)
   position4 = Home-Contact Form (mod_sppagebuilder #118)
   Scope: body.item-101 #sp-section-5
   Reference: lamylash-cluster-lashes.html #contact .cta-copy + .cta-form-card
========================================= */

/* ---- Section Background ---- */
body.item-101 #sp-section-5 {
  padding: 120px 0;
  background: var(--hb-black-deep);
  position: relative;
  overflow: hidden;
}

/* Dual ambient glow */
body.item-101 #sp-section-5::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(201,160,111,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 50%, rgba(201,160,111,0.04) 0%, transparent 55%);
  pointer-events: none;
}

/* Hide default module titles */
body.item-101 #sp-section-5 .sp-module-title {
  display: none;
}

/* Ensure content is above glow */
body.item-101 #sp-section-5 .sp-module-content,
body.item-101 #sp-section-5 .sppb-section {
  position: relative;
  z-index: 1;
}

/* Remove SP PageBuilder's default section padding */
body.item-101 #sp-section-5 .sppb-section {
  padding: 0 !important;
  margin: 0 !important;
}

/* Override SP PageBuilder inline-injected padding on section */
body.item-101 #sp-section-5 .sp-page-builder .page-content .sppb-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.item-101 #sp-section-5 .sppb-row-container,
body.item-101 #sp-section-5 .sppb-row,
body.item-101 #sp-section-5 .sppb-row-column,
body.item-101 #sp-section-5 .sppb-column,
body.item-101 #sp-section-5 .sppb-column-addons {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- cta-copy (Start Order) ---- */
body.item-101 #sp-section-5 .cta-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 24px;
  height: 100%;
}

/* section-label — "Start Your Order" eyebrow */
body.item-101 #sp-section-5 .cta-copy .section-label {
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.item-101 #sp-section-5 .cta-copy .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--hb-rose-gold);
  flex-shrink: 0;
}

/* section-title — "Ready to Grow Your Lash Business?" */
body.item-101 #sp-section-5 .cta-copy .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--hb-white);
  margin-bottom: 20px;
}

body.item-101 #sp-section-5 .cta-copy .section-title em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* Body copy */
body.item-101 #sp-section-5 .cta-copy > p {
  color: rgba(255,255,255,0.5);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 36px;
}

/* ---- Feature checklist ---- */
body.item-101 #sp-section-5 .cta-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.item-101 #sp-section-5 .cta-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

body.item-101 #sp-section-5 .cta-feature-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201,160,111,0.15);
  border: 1px solid rgba(201,160,111,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hb-rose-gold);
}

/* ---- Vertical centering for two columns ---- */
body.item-101 #sp-section-5 .sp-row {
  display: flex;
  align-items: center;
}

body.item-101 #sp-section-5 .sp-column {
  display: flex;
  align-items: center;
}

body.item-101 #sp-section-5 #sp-position3 .sp-module,
body.item-101 #sp-section-5 #sp-position4 .sp-module {
  width: 100%;
  height: 100%;
}

/* ---- Contact Form card (position4 — SP PageBuilder addon) ---- */
body.item-101 #sp-section-5 #sp-position4 {
  padding-left: 8px;
}

body.item-101 #sp-section-5 #sp-position4 .sp-module-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 48px;
}

/* raw-html addon — form title + subtitle (Wholesale Inquiry header) */
body.item-101 #sp-section-5 .sppb-addon-raw-html {
  margin-bottom: 32px;
}

body.item-101 #sp-section-5 .sppb-addon-raw-html .sppb-addon-title {
  font-family: var(--hb-font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  color: var(--hb-white) !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

body.item-101 #sp-section-5 .sppb-addon-raw-html .sppb-addon-content {
  font-size: 13px !important;
  color: rgba(255,255,255,0.35) !important;
  line-height: 1.6 !important;
}

/* Form title */
body.item-101 #sp-section-5 .sppb-addon-ajax-contact .sppb-ajax-contact-title,
body.item-101 #sp-section-5 .sppb-addon-ajax-contact h3,
body.item-101 #sp-section-5 .sppb-addon-ajax-contact h2 {
  font-family: var(--hb-font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  color: var(--hb-white) !important;
  margin-bottom: 8px !important;
}

/* Form subtitle / description */
body.item-101 #sp-section-5 .sppb-addon-ajax-contact .sppb-ajax-contact-subtitle,
body.item-101 #sp-section-5 .sppb-addon-ajax-contact p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 32px !important;
}

/* Labels */
body.item-101 #sp-section-5 .sppb-form-group label {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 8px !important;
}

/* Input / Textarea fields */
body.item-101 #sp-section-5 .sppb-form-control,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input[type="text"],
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input[type="email"],
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input[type="tel"],
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  color: var(--hb-white) !important;
  font-family: var(--hb-font-body) !important;
  font-size: 14px !important;
  transition: border-color 0.3s, background 0.3s !important;
  outline: none !important;
  box-shadow: none !important;
}

body.item-101 #sp-section-5 .sppb-form-control::placeholder,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input::placeholder,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form textarea::placeholder {
  color: rgba(255,255,255,0.2) !important;
}

body.item-101 #sp-section-5 .sppb-form-control:focus,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input:focus,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form textarea:focus {
  border-color: var(--hb-rose-gold) !important;
  background: rgba(201,160,111,0.06) !important;
  box-shadow: none !important;
}

body.item-101 #sp-section-5 .sppb-ajaxt-contact-form textarea {
  resize: vertical !important;
  min-height: 100px !important;
}

/* Submit button */
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form .sppb-btn,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form button[type="submit"],
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  background: var(--hb-rose-gold) !important;
  color: var(--hb-white) !important;
  font-family: var(--hb-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s !important;
  box-shadow: none !important;
}

body.item-101 #sp-section-5 .sppb-ajaxt-contact-form .sppb-btn:hover,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form button[type="submit"]:hover,
body.item-101 #sp-section-5 .sppb-ajaxt-contact-form input[type="submit"]:hover {
  background: var(--hb-rose-gold-dk) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(201,160,111,0.4) !important;
}

/* Form group spacing */
body.item-101 #sp-section-5 .sppb-form-group {
  margin-bottom: 16px !important;
}

/* Submit button wrapper — full width */
body.item-101 #sp-section-5 .sppb-form-button {
  text-align: left !important;
}

/* Success / error messages */
body.item-101 #sp-section-5 .sppb-ajax-contact-response {
  font-size: 13px;
  margin-top: 16px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* Privacy note */
body.item-101 #sp-section-5 .sppb-ajax-contact-privacy,
body.item-101 #sp-section-5 .sppb-addon-ajax-contact .form-note {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  margin-top: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  body.item-101 #sp-section-5 {
    padding: 80px 0;
  }

  body.item-101 #sp-section-5 .cta-copy {
    padding-right: 0;
    margin-bottom: 48px;
  }

  /* On tablet stack, remove vertical centering */
  body.item-101 #sp-section-5 .sp-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.item-101 #sp-section-5 .sp-column {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  body.item-101 #sp-section-5 #sp-position4 .sp-module-content {
    padding: 28px 24px;
  }
}

/* =========================================
   FOOTER — #sp-bottom + #sp-footer
   bottom1 = LamyLash brand (mod_custom #126)
   bottom2 = Products (mod_virtuemart_category #128)
   bottom3 = Company (mod_menu #129)
   bottom4 = Contact Us (mod_custom #130)
   footer1 = Copyright bar (mod_custom #125)
   Reference: lamylash-cluster-lashes.html .footer
========================================= */

/* ---- sp-bottom section ---- */
#sp-bottom {
  background: var(--hb-black-deep) !important;
  border-top: none !important;
  padding: 80px 0 0 !important;
}

/* Override Helix section styling */
#sp-bottom .container-inner {
  padding: 0;
}

/* ---- Footer main grid (4 columns) ---- */
#sp-bottom .row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Reset Bootstrap col sizing in grid — must override col-lg-3 etc. */
#sp-bottom .sp-column,
#sp-bottom [class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* ---- Brand column (bottom1) ---- */
#sp-bottom .footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hb-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--hb-white);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.3s;
}

#sp-bottom .footer-brand-logo:hover {
  opacity: 0.85;
}

#sp-bottom .footer-brand-logo span {
  color: var(--hb-rose-gold);
}

#sp-bottom .footer-logo-icon {
  width: 36px;
  height: 36px;
}

#sp-bottom .footer-brand-desc {
  font-size: 1.1em;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
  max-width: 280px;
  margin-top: 20px;
}

/* ---- Social icons ---- */
#sp-bottom .footer-social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

#sp-bottom .footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

#sp-bottom .footer-social a:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  background: rgba(201,160,111,0.08);
}

/* ---- Column titles (h3.sp-module-title → styled as footer h4) ---- */
#sp-bottom .sp-module-title {
  font-family: var(--hb-font-body) !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #c9a96f !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ---- Category/Menu lists (bottom2, bottom3) ---- */
#sp-bottom .sp-module-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#section-id-65eca9ff-901f-4f90-a0ef-1788c93eddc6 .sppb-icons-group-list{
flex-direction: row !important;
}
#sp-bottom .sp-module-content ul li {
  padding: 0;
  margin: 0;
}

#sp-bottom .sp-module-content ul li a,
#sp-bottom .sp-module-content ul li div a {
  font-size: 1.1em;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.25s;
}

#sp-bottom .sp-module-content ul li a:hover {
  color: var(--hb-rose-gold-lt);
}

/* ---- Contact column (bottom4) ---- */
#sp-bottom .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

#sp-bottom .footer-contact-item:last-child {
  margin-bottom: 0;
}

#sp-bottom .footer-contact-item svg {
  color: var(--hb-rose-gold);
  flex-shrink: 0;
  margin-top: 1px;
}

#sp-bottom .footer-contact-item a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.25s;
}

#sp-bottom .footer-contact-item a:hover {
  color: var(--hb-rose-gold-lt);
}

/* ---- Footer bottom bar (#sp-footer) ---- */
#sp-footer {
  background: var(--hb-black-deep) !important;
  padding: 0 !important;
  border: none !important;
}

#sp-footer .container-inner {
  padding: 0;
}

#sp-footer .sp-module {
  padding: 0 !important;
  margin: 0 !important;
}

#sp-footer .sp-module-content {
  padding: 24px 0;
}

#sp-bottom .footer-bottom-bar,
#sp-footer .footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

#sp-bottom .footer-bottom-bar p,
#sp-footer .footer-bottom-bar p {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  margin: 0;
}

#sp-bottom .footer-bottom-links,
#sp-footer .footer-bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

#sp-bottom .footer-cert-links,
#sp-footer .footer-cert-links,
#sp-bottom .footer-legal-links,
#sp-footer .footer-legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#sp-bottom .footer-cert-links a,
#sp-footer .footer-cert-links a,
#sp-bottom .footer-legal-links a,
#sp-footer .footer-legal-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color 0.25s;
  padding: 0 16px;
  line-height: 1;
  border-right: 1px solid rgba(255,255,255,0.1);
}

#sp-bottom .footer-cert-links a:last-child,
#sp-footer .footer-cert-links a:last-child {
  border-right: 1px solid rgba(255,255,255,0.1);
}

#sp-bottom .footer-legal-links a:first-child,
#sp-footer .footer-legal-links a:first-child {
  border-left: 1px solid rgba(255,255,255,0.1);
}

#sp-bottom .footer-legal-links a:last-child,
#sp-footer .footer-legal-links a:last-child {
  border-right: none;
}

#sp-bottom .footer-bottom-links a:hover,
#sp-footer .footer-bottom-links a:hover {
  color: rgba(255,255,255,0.5);
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  #sp-bottom .row {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  #sp-bottom {
    padding: 60px 0 0 !important;
  }

  #sp-bottom .row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  #sp-bottom .footer-bottom-bar,
  #sp-footer .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  #sp-bottom .footer-brand-desc {
    max-width: 100%;
  }
}

/* =========================================
   HEADER — #sp-header
   Reference: lamylash-cluster-lashes.html .nav
   Sticky header handled by Helix Ultimate (.sticky-header body class)
   Helix HTML: #sp-header > .container > .container-inner > .row
     #sp-logo.col-auto > .sp-column > .logo > a > img.logo-image
     #sp-menu.col-auto.flex-auto > .sp-column
       nav.sp-megamenu-wrapper > ul.sp-megamenu-parent > li.sp-menu-item > a
       .header-modules
       a#offcanvas-toggler.offcanvas-toggler-secondary > .burger-icon
========================================= */

/* ---- Hide #sp-top-bar (design has no top bar) ---- */
#sp-top-bar {
  display: none;
}

/* ---- Base header bar — transparent, fixed ---- */
#sp-header,
body.sticky-header #sp-header,
#sp-header.header-sticky {
  background: transparent !important;
  background-color: transparent !important;
}

#sp-header {
  height: 72px;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--hb-transition),
              box-shadow 0.4s var(--hb-transition);
}

/* ---- Scrolled state (Helix adds .header-sticky to #sp-header) ---- */
#sp-header.header-sticky {
  background: rgba(250, 246, 240, 0.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--hb-border-light);
}

/* ---- Inner layout ---- */
#sp-header .container-inner {
  width: 100%;
}

#sp-header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  flex-wrap: nowrap;
}

/* ---- Logo ---- */
#sp-logo {
  flex-shrink: 0;
}

#sp-logo .logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ---- Menu wrapper ---- */
#sp-menu {
  flex: 1;
}

#sp-menu .sp-column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
}

/* ---- Nav menu items (desktop) ---- */
#sp-header ul.sp-megamenu-parent {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sp-header ul.sp-megamenu-parent > li.sp-menu-item > a {
  font-family: var(--hb-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #c9a06f;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.25s;
  white-space: nowrap;
}

/* Underline slide-in on hover */
#sp-header ul.sp-megamenu-parent > li.sp-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--hb-rose-gold);
  transition: width 0.3s var(--hb-transition);
}

/* Hover color + underline */
#sp-header ul.sp-megamenu-parent > li.sp-menu-item > a:hover {
  color: #a07a4a;
}

#sp-header ul.sp-megamenu-parent > li.sp-menu-item > a:hover::after {
  width: 100%;
}

/* Active/current: no underline, only color change */
#sp-header ul.sp-megamenu-parent > li.sp-menu-item.active > a,
#sp-header ul.sp-megamenu-parent > li.sp-menu-item.current-item > a {
  color: #c9a06f;
}

/* ---- Dropdown panel (sp-dropdown) — Products sub-menu ---- */
#sp-header .sp-dropdown.sp-dropdown-main {
  background: var(--hb-cream, #FAF6F0);
  border: 1px solid rgba(201, 160, 111, 0.2);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12);
  margin-top: 0;
}

#sp-header .sp-dropdown.sp-dropdown-main .sp-dropdown-inner {
  padding: 0;
  background: transparent;
}

#sp-header ul.sp-megamenu-parent .sp-dropdown-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown items: same font/style as main menu */
#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item > a {
  font-family: var(--hb-font-body) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #c9a06f !important;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  transition: color 0.25s;
  white-space: nowrap;
  position: relative;
}

/* Sliding highlight behind each dropdown item */
#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item > a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201, 160, 111, 0.12);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item > a:hover {
  color: #1a1008 !important;
}

#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item > a:hover::before {
  opacity: 1;
}

/* Dropdown panel: clean up template defaults */
#sp-header .sp-dropdown.sp-dropdown-main,
#sp-header .sp-dropdown.sp-dropdown-main .sp-dropdown-inner {
  border: none !important;
  background-image: none !important;
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12) !important;
}

#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item:last-child > a {
  border-bottom: none !important;
}

/* Dropdown items: remove list-style bullets */
#sp-header ul.sp-megamenu-parent .sp-dropdown-items li {
  list-style: none !important;
  background: none !important;
}

#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item.active > a,
#sp-header .sp-dropdown.sp-dropdown-main li.sp-menu-item.current-item > a {
  color: #c9a06f !important;
}

/* ---- Hide search & login in header (design doesn't have them) ---- */
#sp-header .header-modules {
  display: none !important;
}

/* ---- Hide offcanvas toggler on desktop (≥ 1025px) ---- */
#offcanvas-toggler {
  display: none !important;
}

@media (min-width: 1025px) {
    .ask-a-question, body.view-productdetails .manufacturer{width:30%;}
  #sp-header a.offcanvas-toggler-secondary {
    display: none !important;
  }
    .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;}
  .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container img{width: 100%;height:300px; object-fit: cover;}
.trust-w3 .trust-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 48px 0 0;
  max-width: 450px;
  justify-self: start;
  width: 100%;
}
.trust-w3 .trust-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 80px;
  padding: 0px 150px;
}
.trust-header .section-label {
    padding: 8px 20px;
	font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left:150px;
}
}

/* ---- Burger icon (mobile toggler) ---- */
#sp-header .burger-icon {
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  padding: 4px;
}

#sp-header .burger-icon span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--hb-black-deep);
  border-radius: 1px;
  transition: all 0.3s;
}

/* ---- Responsive: ≤ 1024px — show offcanvas toggler, hide desktop menu ---- */
@media (max-width: 1024px) {
  #sp-header ul.sp-megamenu-parent {
    display: none !important;
  }

  #sp-header .header-modules {
    display: none !important;
  }

  #sp-header a.offcanvas-toggler-secondary {
    display: flex !important;
  }
}

/* ---- Header spacer — keeps content below fixed header ---- */


/* ---- Responsive: ≤ 768px ---- */
@media (max-width: 768px) {
  #sp-header .container {
    padding: 0 20px;
  }
}

/* ---- Hero h1 — mod-custom119 ---- */
#mod-custom119 h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.25;
}

/* =========================================
   PRODUCTS PAGE BANNER
   Module Class Suffix: products-banner
   Reference: lamylash-products.html .hero
========================================= */
.products-banner {
  background: linear-gradient(135deg, #FAF6F0 0%, #F0EBE3 100%);
  padding: 80px 24px;
  text-align: center;
}

.products-banner h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 5vw, 56px);
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--hb-black-deep);
}

.products-banner p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================
   LASH CLUSTERS BANNER (Page Header)
   Module: Lash Clusters-Banner (mod-custom, position: title)
   Page: itemid-143
   Scope: body.itemid-143 #sp-title
   Reference: lamylash-category-lash-clusters.html .page-header
========================================= */

/* Section wrapper */
.view-category #sp-section-1 #sp-section-1 {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

/* Banner container */
.view-category #sp-section-1 #sp-title {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: var(--hb-cream, #FAF6F0) !important;
  border-bottom: 1px solid var(--hb-border-light, #E8DDD0) !important;
  display: block !important;
  min-height: auto !important;
}

/* Override all wrapper layers */
body.itemid-143 #sp-title > .container,
body.itemid-143 #sp-title > .container > .row,
body.itemid-143 #sp-title .sp-column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

body.itemid-143 #sp-title .sp-module,
body.itemid-143 #sp-title .sp-module-content {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* Page Header inner */
body.itemid-143 .page-header {
  padding: 140px 0 60px;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* Page header inner layout */
.view-category .page-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-top: 100px;
}

/* Breadcrumb */
body.itemid-143 .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

body.itemid-143 .breadcrumb a {
  font-size: 13px;
  color: #9B8E7E;
  transition: color 0.25s;
  text-decoration: none;
}

body.itemid-143 .breadcrumb a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-143 .breadcrumb span {
  font-size: 13px;
  color: #C4B5A5;
}

body.itemid-143 .breadcrumb-current {
  font-size: 13px;
  color: var(--hb-rose-gold, #C9A06F);
}

/* H1 Title */
body.itemid-143 .page-header h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--hb-black-deep, #0A0907);
  margin-bottom: 12px;
  line-height: 1.15;
}

body.itemid-143 .page-header h1 em {
  font-style: italic;
  color: var(--hb-rose-gold, #C9A06F);
}

/* Description */
body.itemid-143 .banner-desc {
  color: #6B5E50;
  max-width: 500px;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Meta (product count) */
body.itemid-143 .page-header-meta {
  text-align: right;
  flex-shrink: 0;
}

body.itemid-143 .page-header-meta span {
  display: block;
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 4px;
}

body.itemid-143 .page-header-meta strong {
  font-size: 28px;
  font-family: var(--hb-font-display);
  color: var(--hb-rose-gold, #C9A06F);
}

/* Responsive */
@media (max-width: 768px) {
  body.itemid-143 .page-header {
    padding: 120px 20px 50px;
  }

  body.itemid-143 .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  body.itemid-143 .page-header-meta {
    text-align: left;
  }
  .trust-w3 .trust-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 32px 0 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .trust-w3 .trust-logo {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
  }
}

/* =========================================
   LASH CLUSTERS PAGE — PRODUCTS SECTION (#sp-main-body)
   Page: itemid-143
   Scope: body.itemid-143 #sp-main-body
   Reference: lamylash-category-lash-clusters.html .products-section .product-card
========================================= */

/* ---- Main Body Container ---- */
body.itemid-143 #sp-main-body {
  padding: 60px 0 120px;
  background: var(--hb-cream, #FAF6F0);
}

/* ---- Browse View Container ---- */
body.itemid-143 #sp-main-body .browse-view {
  width: 100%;
}

/* ---- Products Grid ---- */
body.itemid-143 .products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Product Card ---- */
body.itemid-143 .product-card {
  background: var(--hb-white, #FFFFFF);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s var(--hb-transition), box-shadow 0.4s var(--hb-transition);
  display: flex;
  flex-direction: column;
}

body.itemid-143 .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(10, 9, 7, 0.12);
}

/* ---- Product Card Image ---- */
body.itemid-143 .product-card-image {
  position: relative;
  overflow: hidden;
  background: #F5EDE0;
}

body.itemid-143 .product-card-image a {
  display: block;
  width: 100%;
  height: 100%;
}

body.itemid-143 .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hb-transition);
  display: block;
}

body.itemid-143 .product-card:hover .product-card-image img {
  transform: scale(1.08);
}

/* ---- Product Card Badge ---- */
body.itemid-143 .product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-white, #FFFFFF);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
}

body.itemid-143 .product-card-badge.new {
  background: var(--hb-black-deep, #0A0907);
}

/* ---- Product Card Body ---- */
body.itemid-143 .product-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category */
body.itemid-143 .product-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-rose-gold, #C9A06F);
  margin-bottom: 8px;
}

/* Title */
body.itemid-143 .product-card-title {
  font-family: var(--hb-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  margin-bottom: 8px;
  line-height: 1.3;
}

body.itemid-143 .product-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
  font-size:0.8em;
}

body.itemid-143 .product-card-title a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

/* Description */
body.itemid-143 .product-card-desc {
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 16px;
  line-height: 1.6;
  flex: 1;
}

/* ---- Product Card Footer ---- */
body.itemid-143 .product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 221, 208, 0.5);
  margin-top: auto;
  display:none;
}

/* Price */
body.itemid-143 .product-card-price {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-143 .product-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: #9B8E7E;
  font-family: var(--hb-font-body);
}

/* Price from VM pricing system */
body.itemid-143 .product-card .vm-product-price-container {
  margin: 0;
}

body.itemid-143 .product-card .PricesalesPrice {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold, #C9A06F);
  display: block;
}

body.itemid-143 .product-card .product-price-display {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold, #C9A06F);
}

/* View Link */
body.itemid-143 .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  text-decoration: none;
  transition: color 0.25s;
}

body.itemid-143 .product-card-link:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-143 .product-card-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.25s;
}

body.itemid-143 .product-card-link:hover svg {
  transform: translateX(3px);
}

/* ---- Pagination (VirtueMart) ---- */
body.itemid-143 .vm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

body.itemid-143 .vm-pagination a,
body.itemid-143 .vm-pagination .pagenav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #6B5E50;
  border: 1px solid #E8DDD0;
  background: var(--hb-white, #FFFFFF);
  transition: all 0.25s;
  text-decoration: none;
}

body.itemid-143 .vm-pagination a:hover,
body.itemid-143 .vm-pagination .pagenav:hover {
  border-color: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-143 .vm-pagination .span,
body.itemid-143 .vm-pagination .vm-page-active {
  background: var(--hb-rose-gold, #C9A06F);
  border-color: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-white, #FFFFFF);
}

/* ---- Responsive: Tablet ---- */
@media (max-width: 1200px) {
  body.itemid-143 .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Responsive: Mobile ---- */
@media (max-width: 900px) {
  body.itemid-143 .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 600px) {
  body.itemid-143 #sp-main-body {
    padding: 40px 0 80px;
  }

  body.itemid-143 .products-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   PRODUCTS PAGE — CLUSTERS SECTION (body.item-101 #sp-section-4)
   Left:  #mod-custom132 (#sp-position1, col-lg-6) — background-image banner
   Right: #mod-custom134 (#sp-position5, col-lg-6) — content + product cards
   Reference: lamylash-products.html #clusters
========================================= */

/* ---- Section background ---- */
body.itemid-132 #sp-section-4 {
  background: var(--hb-cream) !important;
  padding: 100px 0 !important;
}

/* ---- Row: remove gutters for flush layout ---- */
body.itemid-132 #sp-section-4 > .container > .row,
body.itemid-132 #sp-section-4 > .container > .container-inner > .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Override Bootstrap col-lg-6 width/padding that conflicts with grid */
body.itemid-132 #sp-section-4 > .container > .row > [class*="col-"],
body.itemid-132 #sp-section-4 > .container > .container-inner > .row > [class*="col-"] {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Left banner (#mod-custom132) — product-banner style ---- */
body.itemid-132 #mod-custom132 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: box-shadow 0.3s ease;
}


/* ---- Right content (#mod-custom134) — product-content style ---- */
body.itemid-132 #mod-custom134 {
  padding: 20px 0;
}

/* h2 title (if added later) */
body.itemid-132 #mod-custom134 h2,
body.itemid-132 #sp-position5 h2 {
  font-family: var(--hb-font-display);
  font-size: clamp(1.8rem, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--hb-black-deep);
}

/* Subtitle */
body.itemid-132 #mod-custom134 .subtitle,
body.itemid-132 #sp-position5 .subtitle {
  font-size: 18px;
  color: var(--hb-rose-gold);
  font-weight: 500;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Description */
body.itemid-132 #mod-custom134 .description,
body.itemid-132 #sp-position5 .description {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
  line-height: 1.8;
}

/* Features list */
body.itemid-132 #mod-custom134 .features-list,
body.itemid-132 #sp-position5 .features-list {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}

body.itemid-132 #mod-custom134 .features-list li,
body.itemid-132 #sp-position5 .features-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: #444;
  font-size: 15px;
}

body.itemid-132 #mod-custom134 .features-list li::before,
body.itemid-132 #sp-position5 .features-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--hb-rose-gold);
  font-weight: 700;
}

/* ---- VirtueMart product cards in right column ---- */
body.itemid-132 #sp-position5 .vmgroup {
  margin-top: 16px;
}

body.itemid-132 #sp-position5 .vmproduct.productdetails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

body.itemid-132 #sp-position5 .vmproduct.productdetails li {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.itemid-132 #sp-position5 .vmproduct.productdetails li:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.itemid-132 #sp-position5 .vmproduct.productdetails li a:first-child img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

body.itemid-132 #sp-position5 .vmproduct.productdetails li a:last-child {
  display: block;
  padding: 12px 16px 16px;
  text-align: center;
  font-family: var(--hb-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.itemid-132 #sp-position5 .vmproduct.productdetails li .clear {
  display: none;
}

/* ---- View Details button (if added later) ---- */
body.itemid-132 #sp-position5 .btn-view {
  display: inline-block;
  background: var(--hb-rose-gold);
  color: var(--hb-black-deep);
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

body.itemid-132 #sp-position5 .btn-view:hover {
  background: var(--hb-rose-gold-dark);
  transform: translateY(-2px);
}

/* ---- Responsive: tablet ---- */
@media (max-width: 1024px) {
  body.itemid-132 #sp-section-4 > .container > .row,
body.itemid-132 #sp-section-4 > .container > .container-inner > .row {
    gap: 48px;
  }

body.itemid-132 #mod-custom132 .mod-custom {
    min-height: 350px;
    height: 350px;
  }

body.itemid-132 #sp-position5 .vmproduct.productdetails {
    grid-template-columns: repeat(2, 1fr);
  }
  body.itemid-132 #mod-custom132 {
  min-height: 450px;
  height: 450px;
}

}

/* ---- Responsive: mobile ---- */
@media (max-width: 768px) {
body.itemid-132 #sp-section-4 {
    padding: 60px 20px !important;
  }

  body.itemid-132 #sp-section-4 > .container > .row,
body.itemid-132 #sp-section-4 > .container > .container-inner > .row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

body.itemid-132 #mod-custom132 .mod-custom {
    min-height: 300px;
    height: 300px;
  }

body.itemid-132 #sp-position5 .vmproduct.productdetails {
    grid-template-columns: 1fr;
  }
  body.itemid-132 #mod-custom132 {
  min-height: 300px;
  height: 300px;
 }

}

/* =========================================
   PRODUCTS PAGE — BOND & SEAL SECTION (body.item-101 #sp-section-5)
   Layout: content on left, banner on right (reversed)
   Left:  #mod-custom137 (#sp-position2) — content
   Left:  product cards (#sp-position2 .vmgroup)
   Right: #mod-custom139 (#sp-position6) — banner
   Reference: lamylash-products.html #bond-seal
========================================= */

body.itemid-132 #sp-section-5 {
  background: #ffffff !important;
  padding: 100px 0 !important;
}

body.itemid-132 #sp-section-5 > .container > .row,
body.itemid-132 #sp-section-5 > .container > .container-inner > .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Override Bootstrap col-lg-6 */
body.itemid-132 #sp-section-5 > .container > .row > [class*="col-"],
body.itemid-132 #sp-section-5 > .container > .container-inner > .row > [class*="col-"] {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Left content (#sp-position2) — text on top, products below ---- */
body.itemid-132 #sp-section-5 #sp-position2 .sp-column {
  display: flex !important;
  flex-direction: column !important;
}

/* First module (text #mod-custom137) goes on top */
body.itemid-132 #sp-section-5 #sp-position2 .sp-module:first-child {
  order: 1;
}

/* Second module (products) goes below */
body.itemid-132 #sp-section-5 #sp-position2 .sp-module:last-child {
  order: 2;
}

body.itemid-132 #mod-custom137 {
  padding: 20px 0;
}

body.itemid-132 #mod-custom137 h2 {
  font-family: var(--hb-font-display);
  font-size: clamp(1.8rem, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--hb-black-deep);
}

body.itemid-132 #mod-custom137 .subtitle {
  font-size: 18px;
  color: var(--hb-rose-gold);
  font-weight: 500;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.itemid-132 #mod-custom137 .description {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
  line-height: 1.8;
}

body.itemid-132 #mod-custom137 .features-list {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}

body.itemid-132 #mod-custom137 .features-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: #444;
  font-size: 15px;
}

body.itemid-132 #mod-custom137 .features-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--hb-rose-gold);
  font-weight: 700;
}

/* ---- Product cards in left column (#sp-position2) ---- */
body.itemid-132 #sp-position2 .vmgroup {
  margin-top: 16px;
}

body.itemid-132 #sp-position2 .vmproduct.productdetails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

body.itemid-132 #sp-position2 .vmproduct.productdetails li {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.itemid-132 #sp-position2 .vmproduct.productdetails li:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.itemid-132 #sp-position2 .vmproduct.productdetails li a:first-child img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

body.itemid-132 #sp-position2 .vmproduct.productdetails li a:last-child {
  display: block;
  padding: 12px 16px 16px;
  text-align: center;
  font-family: var(--hb-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.itemid-132 #sp-position2 .vmproduct.productdetails li .clear {
  display: none;
}

/* ---- Right banner (#mod-custom139) — product-banner style ---- */
body.itemid-132 #mod-custom139 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 450px;
  height: 450px;
  transition: box-shadow 0.3s ease;
}

body.itemid-132 #mod-custom139 img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.itemid-132 #mod-custom139:hover img {
  transform: scale(1.05);
}

/* 若用 background-image 方式，可用以下规则替代上面的 img 规则
body.itemid-132 #mod-custom139 {
  background-size: cover !important;
  background-position: center !important;
}
body.itemid-132 #mod-custom139::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
body.itemid-132 #mod-custom139:hover::before {
  transform: scale(1.05);
}
*/

/* ---- Responsive: tablet ---- */
@media (max-width: 1024px) {
  body.itemid-132 #sp-section-5 > .container > .row,
body.itemid-132 #sp-section-5 > .container > .container-inner > .row {
    gap: 48px;
  }

  body.itemid-132 #mod-custom139,
body.itemid-132 #mod-custom139 img,
body.itemid-132 #mod-custom139 .mod-custom {
    height: 350px;
    min-height: 350px;
  }

body.itemid-132 #sp-position2 .vmproduct.productdetails {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 768px) {
body.itemid-132 #sp-section-5 {
    padding: 60px 20px !important;
  }

  body.itemid-132 #sp-section-5 > .container > .row,
body.itemid-132 #sp-section-5 > .container > .container-inner > .row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body.itemid-132 #mod-custom139,
body.itemid-132 #mod-custom139 img,
body.itemid-132 #mod-custom139 .mod-custom {
    min-height: 300px;
    height: 300px;
  }

body.itemid-132 #sp-position2 .vmproduct.productdetails {
    grid-template-columns: 1fr;
  }
body.itemid-132 .vmproduct.productdetails li a:first-child img{height: 260px !important;}
}

/* =========================================
   PRODUCTS PAGE — REMOVER SECTION (body.item-101 #sp-section-6)
   Layout: banner on left, content on right (normal order)
   Left:  banner module (#sp-position6 or dedicated) — product-banner style
   Right: #mod-custom140 (#sp-position4) — content
   Right: product cards (#sp-position4 .vmgroup)
   Background: cream-bg
   Reference: lamylash-products.html #remover
========================================= */

body.itemid-132 #sp-section-6 {
  background: var(--hb-cream) !important;
  padding: 100px 0 !important;
}

body.itemid-132 #sp-section-6 > .container > .row,
body.itemid-132 #sp-section-6 > .container > .container-inner > .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Override Bootstrap col classes */
body.itemid-132 #sp-section-6 > .container > .row > [class*="col-"],
body.itemid-132 #sp-section-6 > .container > .container-inner > .row > [class*="col-"] {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Left banner (#mod-custom142) — product-banner style ---- */
body.itemid-132 #mod-custom142 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: box-shadow 0.3s ease;
}

body.itemid-132 #mod-custom142 img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.itemid-132 #mod-custom142:hover img {
  transform: scale(1.05);
}

/* ---- Right content (#mod-custom140) — product-content style ---- */
/* Reset any inherited sp-position4 styles from other pages */
body.itemid-132 #sp-section-6 #sp-position4 {
  padding-left: 0 !important;
}

body.itemid-132 #sp-section-6 #sp-position4 .sp-module-content {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.itemid-132 #mod-custom140 {
  padding: 20px 0;
}

body.itemid-132 #mod-custom140 h2 {
  font-family: var(--hb-font-display);
  font-size: clamp(1.8rem, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--hb-black-deep);
}

body.itemid-132 #mod-custom140 .subtitle {
  font-size: 18px;
  color: var(--hb-rose-gold);
  font-weight: 500;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.itemid-132 #mod-custom140 .description {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
  line-height: 1.8;
}

body.itemid-132 #mod-custom140 .features-list {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}

body.itemid-132 #mod-custom140 .features-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: #444;
  font-size: 15px;
}

body.itemid-132 #mod-custom140 .features-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--hb-rose-gold);
  font-weight: 700;
}

/* ---- Product cards in right column (#sp-position4) ---- */
/* Ensure right column modules stack vertically */
body.itemid-132 #sp-section-6 #sp-position4 .sp-column {
  display: flex;
  flex-direction: column;
}

body.itemid-132 #sp-position4 .vmgroup {
  margin-top: 16px;
  clear: both;
}

body.itemid-132 #sp-position4 .vmproduct.productdetails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

body.itemid-132 #sp-position4 .vmproduct.productdetails li {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.itemid-132 #sp-position4 .vmproduct.productdetails li:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.itemid-132 #sp-position4 .vmproduct.productdetails li a:first-child img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

body.itemid-132 #sp-position4 .vmproduct.productdetails li a:last-child {
  display: block;
  padding: 12px 16px 16px;
  text-align: center;
  font-family: var(--hb-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.itemid-132 #sp-position4 .vmproduct.productdetails li .clear {
  display: none;
}

/* ---- Responsive: tablet ---- */
@media (max-width: 1024px) {
  body.itemid-132 #sp-section-6 > .container > .row,
body.itemid-132 #sp-section-6 > .container > .container-inner > .row {
    gap: 48px;
  }

body.itemid-132 #mod-custom142 img,
body.itemid-132 #mod-custom142 .mod-custom {
    height: 350px;
    min-height: 350px;
  }

body.itemid-132 #sp-position4 .vmproduct.productdetails {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 768px) {
body.itemid-132 #sp-section-6 {
    padding: 60px 20px !important;
  }

  body.itemid-132 #sp-section-6 > .container > .row,
body.itemid-132 #sp-section-6 > .container > .container-inner > .row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

body.itemid-132 #mod-custom142 img,
body.itemid-132 #mod-custom142 .mod-custom {
    height: 300px;
    min-height: 300px;
  }

body.itemid-132 #sp-position4 .vmproduct.productdetails {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   PRODUCTS PAGE — TWEEZERS SECTION (body.item-101 #sp-section-7)
   Layout: content on left, banner on right (reverse)
   Left:  #mod-custom143 (#sp-user1) — content + product cards
   Right: #mod-custom145 (#sp-position7) — banner
   Background: white-bg
   Reference: lamylash-products.html #tweezers
========================================= */

body.itemid-132 #sp-section-7 {
  background: #ffffff !important;
  padding: 100px 0 !important;
}

body.itemid-132 #sp-section-7 > .container > .row,
body.itemid-132 #sp-section-7 > .container > .container-inner > .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Override Bootstrap col classes */
body.itemid-132 #sp-section-7 > .container > .row > [class*="col-"],
body.itemid-132 #sp-section-7 > .container > .container-inner > .row > [class*="col-"] {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Left content (#mod-custom143) — product-content style ---- */
body.itemid-132 #mod-custom143 {
  padding: 20px 0;
}

body.itemid-132 #mod-custom143 h2 {
  font-family: var(--hb-font-display);
  font-size: clamp(1.8rem, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--hb-black-deep);
}

body.itemid-132 #mod-custom143 .subtitle {
  font-size: 18px;
  color: var(--hb-rose-gold);
  font-weight: 500;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body.itemid-132 #mod-custom143 .description {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
  line-height: 1.8;
}

body.itemid-132 #mod-custom143 .features-list {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}

body.itemid-132 #mod-custom143 .features-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: #444;
  font-size: 15px;
}

body.itemid-132 #mod-custom143 .features-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--hb-rose-gold);
  font-weight: 700;
}

/* Ensure left column modules stack vertically */
body.itemid-132 #sp-section-7 #sp-user1 .sp-column {
  display: flex;
  flex-direction: column;
}

/* ---- Product cards in left column (#sp-user1) ---- */
body.itemid-132 #sp-user1 .vmgroup {
  margin-top: 16px;
  clear: both;
}

body.itemid-132 #sp-user1 .vmproduct.productdetails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

body.itemid-132 #sp-user1 .vmproduct.productdetails li {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.itemid-132 #sp-user1 .vmproduct.productdetails li:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.itemid-132 #sp-user1 .vmproduct.productdetails li a:first-child img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

body.itemid-132 #sp-user1 .vmproduct.productdetails li a:last-child {
  display: block;
  padding: 12px 16px 16px;
  text-align: center;
  font-family: var(--hb-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.itemid-132 #sp-user1 .vmproduct.productdetails li .clear {
  display: none;
}

/* ---- Right banner (#mod-custom145) — product-banner style ---- */
body.itemid-132 #mod-custom145 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: box-shadow 0.3s ease;
}

body.itemid-132 #mod-custom145 img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.itemid-132 #mod-custom145:hover img {
  transform: scale(1.05);
}

/* ---- Responsive: tablet ---- */
@media (max-width: 1024px) {
  body.itemid-132 #sp-section-7 > .container > .row,
body.itemid-132 #sp-section-7 > .container > .container-inner > .row {
    gap: 48px;
  }

body.itemid-132 #mod-custom145 img,
body.itemid-132 #mod-custom145 .mod-custom {
    height: 350px;
    min-height: 350px;
  }

body.itemid-132 #sp-user1 .vmproduct.productdetails {
    grid-template-columns: repeat(2, 1fr);
  }
  body.itemid-132 #mod-custom145 {
  min-height: 450px;
  height: 450px;
}
}

/* ---- Responsive: mobile ---- */
@media (max-width: 768px) {
body.itemid-132 #sp-section-7 {
    padding: 60px 20px !important;
  }

  body.itemid-132 #sp-section-7 > .container > .row,
body.itemid-132 #sp-section-7 > .container > .container-inner > .row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

body.itemid-132 #mod-custom145 img,
body.itemid-132 #mod-custom145 .mod-custom {
    height: 300px;
    min-height: 300px;
  }

body.itemid-132 #sp-user1 .vmproduct.productdetails {
    grid-template-columns: 1fr;
  }
  body.itemid-132 #mod-custom145 {
  min-height: 300px;
  height: 300px;
}
}

/* =========================================
   OFFCANVAS MENU
   Reference: lamylash-cluster-lashes.html .nav-mobile
   Helix uses: .offcanvas-menu (side-slide by default)
   We override to full-width top dropdown, cream background
========================================= */

.offcanvas-menu {
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 72px);
  overflow-y: auto !important;
  background: var(--hb-cream) !important;
  padding: 0 !important;
  border-top: 1px solid var(--hb-border-light);
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 12px 40px var(--hb-shadow-mid);
  z-index: 10000 !important;
  transform: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  opacity: 0;
  visibility: hidden;
}

/* Active state (Helix adds .offcanvas-active to body) */
.offcanvas-active .offcanvas-menu {
  opacity: 1;
  visibility: visible;
}

/* Prevent body-wrapper slide */
.offcanvas-active .body-wrapper {
  transform: none !important;
  left: 0 !important;
  right: 0 !important;
}

/* Close button */
.offcanvas-menu .close-offcanvas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: static !important;
  padding: 16px 24px !important;
  text-decoration: none;
  color: transparent;
  font-size: 0;
}

.offcanvas-menu .close-offcanvas .burger-icon span {
  background: var(--hb-black-deep);
}

/* Offcanvas inner */
.offcanvas-menu .offcanvas-inner {
  padding: 0 24px 32px;
}

/* Menu list */
.offcanvas-menu .offcanvas-inner ul.menu {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.offcanvas-menu .offcanvas-inner ul.menu > li {
  border-bottom: 1px solid var(--hb-border-soft);
  overflow: visible !important;
  margin: 0;
  padding: 0;
}

.offcanvas-menu .offcanvas-inner ul.menu > li:last-child {
  border-bottom: none;
}

/* Menu links */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  display: block;
  font-family: var(--hb-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--hb-text-primary);
  text-decoration: none;
  padding: 16px 0;
  line-height: 1.4;
  opacity: 1;
  transition: color 0.25s;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li > span:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li.current-item.active > a {
  color: var(--hb-rose-gold);
}

/* Offcanvas overlay */
.offcanvas-overlay {
  background: rgba(10, 9, 7, 0.5) !important;
  z-index: 9999 !important;
}

/* Mobile: tighter padding */
@media (max-width: 575px) {
  .offcanvas-menu {
    top: 60px !important;
    max-height: calc(100vh - 60px);
  }

  .offcanvas-menu .offcanvas-inner {
    padding: 0 16px 24px;
  }
}

/* =========================================
   SERVICE PAGE BANNER
   Module: Service-Banner (mod-custom #147, position: sp-title)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-1 #sp-title
   Reference: lamylash-services.html .hero
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-1 {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

/* ---- Banner container ---- */
body.itemid-133 #sp-title {
  min-height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--hb-cream) 0%, #F5EFE6 40%, #EDE5D8 100%);
  position: relative;
}

/* Decorative ambient glow — top-right */
body.itemid-133 #sp-title::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,111,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative ambient glow — bottom-left */
body.itemid-133 #sp-title::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,111,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Inner content wrapper ---- */
body.itemid-133 #sp-title .sp-column {
  width: 100%;
  max-width: 100%;
}

body.itemid-133 #sp-title .sp-module,
body.itemid-133 #sp-title .sp-module-content {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100%;
  max-width: 100%;
}

/* ---- Hero layout: two-column grid ---- */
body.itemid-133 #mod-custom147 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  width: 100%;
}

body.itemid-133 #mod-custom147 .service-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Left column: text content ---- */
body.itemid-133 .service-hero-text {
  /* container for badge, h1, desc, buttons */
}

/* ---- Badge / Label ---- */
body.itemid-133 .service-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,160,111,0.12);
  color: var(--hb-rose-gold-dk);
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.itemid-133 .service-hero-badge svg {
  width: 16px;
  height: 16px;
}

/* ---- H1 Title ---- */
body.itemid-133 .service-hero h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--hb-black-deep);
  margin: 0 0 24px 0;
}

body.itemid-133 .service-hero h1 em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* ---- Description ---- */
body.itemid-133 .service-hero-desc {
  font-family: var(--hb-font-body);
  font-size: 1.1rem;
  color: #6B6358;
  line-height: 1.8;
  margin: 0 0 40px 0;
  max-width: 520px;
}

/* ---- Buttons row ---- */
body.itemid-133 .service-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

/* Primary button */
body.itemid-133 .service-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--hb-rose-gold);
  color: var(--hb-black-deep);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,160,111,0.3);
  transition: all 0.35s var(--hb-transition);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
}

body.itemid-133 .service-hero-btn-primary:hover {
  background: var(--hb-rose-gold-dk);
  box-shadow: 0 6px 30px rgba(201,160,111,0.4);
  transform: translateY(-2px);
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.itemid-133 .service-hero-btn-primary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--hb-transition);
}

body.itemid-133 .service-hero-btn-primary:hover svg {
  transform: translateX(3px);
}

/* Outline button */
body.itemid-133 .service-hero-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  color: var(--hb-black-deep);
  text-decoration: none;
  border: 1.5px solid #D1C8BC;
  cursor: pointer;
  transition: all 0.35s var(--hb-transition);
}

body.itemid-133 .service-hero-btn-outline:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold-dk);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---- Right column: visual / image ---- */
body.itemid-133 .service-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Image wrapper — rounded arch shape */
body.itemid-133 .service-hero-image-wrapper {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/5;
  border-radius: 200px 200px 24px 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,9,7,0.12);
  background: #E8DDD0;
  position: relative;
}

body.itemid-133 .service-hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image placeholder — real production photo replaces gradient */
body.itemid-133 .service-hero-image-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  color: #6B6358;
}

body.itemid-133 .service-hero-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

body.itemid-133 .service-hero-image-placeholder svg {
  width: 80px;
  height: 80px;
  color: var(--hb-rose-gold);
  opacity: 0.5;
}

body.itemid-133 .service-hero-image-placeholder span {
  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ---- Floating stat cards ---- */
body.itemid-133 .service-hero-stat {
  position: absolute;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}

body.itemid-133 .service-hero-stat-1 {
  top: 15%;
  right: -20px;
}

body.itemid-133 .service-hero-stat-2 {
  bottom: 15%;
  left: -20px;
}

body.itemid-133 .service-hero-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201,160,111,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.itemid-133 .service-hero-stat-icon svg {
  width: 22px;
  height: 22px;
  color: var(--hb-rose-gold);
}

body.itemid-133 .service-hero-stat-text strong {
  display: block;
  font-family: var(--hb-font-display);
  font-size: 1.2rem;
  color: var(--hb-black-deep);
}

body.itemid-133 .service-hero-stat-text span {
  font-family: var(--hb-font-body);
  font-size: 12px;
  color: #6B6358;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-133 #mod-custom147 .service-hero {
    grid-template-columns: 1fr;
    gap: 0px;
    text-align: center;
  }

  body.itemid-133 .service-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  body.itemid-133 .service-hero-buttons {
    justify-content: center;
  }

  body.itemid-133 .service-hero-visual {
    max-width: 400px;
    margin: 0 auto;
  }

  body.itemid-133 .service-hero-stat-1 {
    right: 0;
  }

  body.itemid-133 .service-hero-stat-2 {
    left: 0;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-title {
    min-height: auto;
  }

  body.itemid-133 #mod-custom147 {
    padding: 100px 20px 60px;
  }

  body.itemid-133 .service-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  body.itemid-133 .service-hero-desc {
    font-size: 0.95rem;
  }

  body.itemid-133 .service-hero-image-wrapper {
    border-radius: 24px;
    aspect-ratio: 3/4;
  }

  /* Hide stat cards on mobile */
  body.itemid-133 .service-hero-stat {
    display: none;
  }
}

/* =========================================
   PAGE HEADER INNER STYLES
   Reference: lamylash-category-lash-clusters.html .page-header-inner
   Page: itemid-138 bond-and-seal
   Scope: body.itemid-138 #sp-section-1 #sp-title .page-header-inner
========================================= */

/* ---- Page Header Container ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header {
  padding: 140px 0 60px;
  background: var(--hb-cream);
  border-bottom: 1px solid #E8DDD0;
}

/* ---- Inner Layout: Flexbox two-column ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

/* ---- Left: Text Content ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header-content {
  flex: 1;
  max-width: 600px;
}

/* ---- Breadcrumb ---- */
body.itemid-138 .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

body.itemid-138 .breadcrumb a {
  font-size: 13px;
  color: #9B8E7E;
  transition: color 0.25s;
  text-decoration: none;
}

body.itemid-138 .breadcrumb a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-138 .breadcrumb span {
  font-size: 13px;
  color: #C4B5A5;
}

body.itemid-138 .breadcrumb-current {
  font-size: 13px;
  color: var(--hb-rose-gold, #C9A06F);
}

/* ---- H1 Title ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header-inner h1,
body.itemid-138 #sp-section-1 #sp-title .page-header h1,body.itemid-143 #sp-section-1 #sp-title .page-header-inner h1,
body.itemid-143 #sp-section-1 #sp-title .page-header h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--hb-black-deep);
  margin: 0 0 12px 0;
}


body.itemid-138 #sp-section-1 #sp-title .page-header-inner h1 em,
body.itemid-138 #sp-section-1 #sp-title .page-header h1 em,body.itemid-143 #sp-section-1 #sp-title .page-header-inner h1 em,
body.itemid-143 #sp-section-1 #sp-title .page-header h1 em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* ---- Description ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header-inner p,
body.itemid-138 #sp-section-1 #sp-title .page-header p {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0;
  max-width: 500px;
}

/* ---- Right: Meta Info ---- */
body.itemid-138 #sp-section-1 #sp-title .page-header-meta {
  text-align: right;
  flex-shrink: 0;
}

body.itemid-138 #sp-section-1 #sp-title .page-header-meta span {
  display: block;
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 4px;
}

body.itemid-138 #sp-section-1 #sp-title .page-header-meta strong {
  font-size: 28px;
  font-family: var(--hb-font-display);
  color: var(--hb-rose-gold);
  font-weight: 400;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-138 #sp-section-1 #sp-title .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  body.itemid-138 #sp-section-1 #sp-title .page-header-meta {
    text-align: left;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-138 #sp-section-1 #sp-title .page-header {
    padding: 120px 0 40px;
  }

  body.itemid-138 #sp-section-1 #sp-title .page-header-inner h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* =========================================
   PRODUCTS SECTION STYLES
   Reference: lamylash-category-lash-clusters.html .products-section
   Page: itemid-138 bond-and-seal
   Scope: body.itemid-138 #sp-main-body
========================================= */

/* ---- Main Body Container ---- */
body.itemid-138 #sp-main-body {
  padding: 0;
  background: var(--hb-cream);
}

/* ---- Products Section ---- */
body.itemid-138 #sp-main-body .products-section {
  padding: 60px 0 120px;
  background: var(--hb-cream);
}

/* ---- Products Grid Container ---- */
body.itemid-138 #sp-main-body .browse-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- Products Grid ---- */
body.itemid-138 #sp-main-body .products-grid,
body.itemid-138 #sp-main-body .vm-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Product Card ---- */
body.itemid-138 #sp-main-body .product-card,
body.itemid-138 #sp-main-body .Product {
  background: var(--hb-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s var(--hb-transition), box-shadow 0.4s var(--hb-transition);
}

body.itemid-138 #sp-main-body .product-card:hover,
body.itemid-138 #sp-main-body .Product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(10, 9, 7, 0.12);
}

/* ---- Product Card Image ---- */
body.itemid-138 #sp-main-body .product-card-image,
body.itemid-138 #sp-main-body .browseProductImage {
  position: relative;
  aspect-ratio: 4/4;
  overflow: hidden;
  background: var(--hb-cream);
}

body.itemid-138 #sp-main-body .product-card-image img,
body.itemid-138 #sp-main-body .browseProductImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hb-transition);
}

body.itemid-138 #sp-main-body .product-card:hover .product-card-image img,
body.itemid-138 #sp-main-body .Product:hover .browseProductImage img {
  transform: scale(1.08);
}

/* ---- Product Card Badge ---- */
body.itemid-138 #sp-main-body .product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--hb-rose-gold);
  color: var(--hb-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
}

body.itemid-138 #sp-main-body .product-card-badge.new {
  background: var(--hb-black-deep);
}

/* ---- Product Card Actions ---- */
body.itemid-138 #sp-main-body .product-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.3s var(--hb-transition);
}

body.itemid-138 #sp-main-body .product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Product Card Body ---- */
body.itemid-138 #sp-main-body .product-card-body {
  padding: 20px;
}

/* ---- Product Category ---- */
body.itemid-138 #sp-main-body .product-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 8px;
}

/* ---- Product Title ---- */
body.itemid-138 #sp-main-body .product-card-title,
body.itemid-138 #sp-main-body .product-title {
  font-family: var(--hb-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* ---- Product Description ---- */
body.itemid-138 #sp-main-body .product-card-desc {
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ---- Product Card Footer ---- */
body.itemid-138 #sp-main-body .product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #F0E8DC;
  display:none;
}
body.itemid-138 #sp-main-body #sp-component {margin-top:50px;}
/* ---- Product Price ---- */
body.itemid-138 #sp-main-body .product-card-price,
body.itemid-138 #sp-main-body .Prices dl {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold);
}

body.itemid-138 #sp-main-body .product-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: #9B8E7E;
  font-family: var(--hb-font-body);
}

/* ---- MOQ ---- */
body.itemid-138 #sp-main-body .product-card-moq {
  font-size: 11px;
  color: #C4B5A5;
}

/* ---- Product Link ---- */
body.itemid-138 #sp-main-body .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  transition: color 0.25s;
}

body.itemid-138 #sp-main-body .product-card-link:hover {
  color: var(--hb-rose-gold);
}

/* ---- Pagination ---- */
body.itemid-138 #sp-main-body .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

body.itemid-138 #sp-main-body .pagination-btn,
body.itemid-138 #sp-main-body .pagination .pagenav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #6B5E50;
  border: 1px solid #E8DDD0;
  background: var(--hb-white);
  transition: all 0.25s;
}

body.itemid-138 #sp-main-body .pagination-btn:hover,
body.itemid-138 #sp-main-body .pagination .pagenav:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
}

body.itemid-138 #sp-main-body .pagination-btn.active,
body.itemid-138 #sp-main-body .pagination .pagenav.current {
  background: var(--hb-rose-gold);
  border-color: var(--hb-rose-gold);
  color: var(--hb-white);
}

/* ---- Responsive: Tablet (≤ 1200px) ---- */
@media (max-width: 1200px) {
  body.itemid-138 #sp-main-body .products-grid,
  body.itemid-138 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Responsive: Tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  body.itemid-138 #sp-main-body .products-grid,
  body.itemid-138 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
  body.itemid-138 #sp-main-body .browse-view {
    padding: 0 20px;
  }

  body.itemid-138 #sp-main-body .products-grid,
  body.itemid-138 #sp-main-body .vm-products-grid {
    grid-template-columns: 1fr;
  }

  body.itemid-138 #sp-main-body .products-section {
    padding: 40px 0 80px;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.itemid-133 .service-hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  body.itemid-133 .service-hero-btn-primary,
  body.itemid-133 .service-hero-btn-outline {
    width: 50%;
    justify-content: center;
  }
}

/* =========================================
   SERVICE PAGE — CUSTOM PACKAGING
   Module: Service-Custom Packaging (mod-custom #148, position: sp-position1)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-3 #sp-position1
   Reference: lamylash-services.html #packaging
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-3 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: none !important;
}

/* ---- Inner content full width ---- */
body.itemid-133 #sp-section-3 #sp-position1,
body.itemid-133 #sp-section-3 #sp-position1 .sp-column,
body.itemid-133 #sp-section-3 #sp-position1 .sp-module,
body.itemid-133 #sp-section-3 #sp-position1 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* ---- Section header ---- */
body.itemid-133 .pkg-section-header {
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.itemid-133 .pkg-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.itemid-133 .pkg-section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.itemid-133 .pkg-section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.itemid-133 .pkg-section-subtitle {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Card grid ---- */
body.itemid-133 .pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Card base ---- */
body.itemid-133 .pkg-card {
  border: 1px solid #E8E2D9;
  border-radius: 12px;
  padding: 48px 40px;
  transition: all 0.35s var(--hb-transition);
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}

body.itemid-133 .pkg-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #D1C8BC;
  transition: all 0.35s var(--hb-transition);
}

body.itemid-133 .pkg-card:hover {
  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  transform: translateY(-4px);
}

/* ---- Featured card ---- */
body.itemid-133 .pkg-card.featured {
  border-color: var(--hb-rose-gold);
  background: linear-gradient(180deg, rgba(201,160,111,0.03) 0%, #FFFFFF 100%);
}

body.itemid-133 .pkg-card.featured::before {
  background: var(--hb-rose-gold);
}

/* ---- Card tag ---- */
body.itemid-133 .pkg-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

body.itemid-133 .pkg-card:not(.featured) .pkg-card-tag {
  background: #F7F4F0;
  color: #6B6358;
}

body.itemid-133 .pkg-card.featured .pkg-card-tag {
  background: rgba(201,160,111,0.15);
  color: var(--hb-rose-gold-dk);
}

/* ---- Card title ---- */
body.itemid-133 .pkg-card h3 {
  font-family: var(--hb-font-display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 6px;
}

/* ---- Card subtitle ---- */
body.itemid-133 .pkg-card-subtitle {
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #6B6358;
  margin: 0 0 24px;
}

/* ---- Card description ---- */
body.itemid-133 .pkg-card p {
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  color: #6B6358;
  line-height: 1.7;
  margin: 0 0 28px;
}

/* ---- Feature list ---- */
body.itemid-133 .pkg-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

body.itemid-133 .pkg-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #3A3530;
}

body.itemid-133 .pkg-feature svg {
  width: 20px;
  height: 20px;
  color: var(--hb-rose-gold);
  flex-shrink: 0;
}

/* ---- Meta row ---- */
body.itemid-133 .pkg-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #E8E2D9;
}

body.itemid-133 .pkg-meta-item {
  text-align: center;
}

body.itemid-133 .pkg-meta-item strong {
  display: block;
  font-family: var(--hb-font-display);
  font-size: 1.1rem;
  color: var(--hb-black-deep);
  margin-bottom: 2px;
}

body.itemid-133 .pkg-meta-item span {
  font-family: var(--hb-font-body);
  font-size: 0.75rem;
  color: #6B6358;
}

/* ---- Comparison table ---- */
body.itemid-133 .pkg-comparison {
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 24px;
}

body.itemid-133 .pkg-comparison-title {
  font-family: var(--hb-font-display);
  font-size: 1.5rem;
  text-align: center;
  color: var(--hb-black-deep);
  margin: 0 0 32px;
}

body.itemid-133 .pkg-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
}

body.itemid-133 .pkg-comparison-table thead {
  background: var(--hb-black-deep);
  color: var(--hb-cream);
}

body.itemid-133 .pkg-comparison-table th {
  padding: 18px 24px;
  font-family: var(--hb-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

body.itemid-133 .pkg-comparison-table td {
  padding: 16px 24px;
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #3A3530;
  border-bottom: 1px solid #F7F4F0;
}

body.itemid-133 .pkg-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

body.itemid-133 .pkg-comparison-table tbody tr:hover {
  background: #F7F4F0;
}

body.itemid-133 .pkg-comparison-table .highlight {
  color: var(--hb-rose-gold-dk);
  font-weight: 600;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-133 .pkg-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 600px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-section-3 {
    padding: 80px 0 !important;
  }

  body.itemid-133 .pkg-card {
    padding: 32px 24px;
  }

  body.itemid-133 .pkg-comparison-table th,
  body.itemid-133 .pkg-comparison-table td {
    padding: 12px 14px;
    font-size: 0.82rem;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.itemid-133 .pkg-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.itemid-133 .pkg-comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -40px;
    padding: 0 24px;
  }
}

/* =========================================
   SERVICE PAGE — CLIENT CASES (GALLERY)
   Module: Service-Client Cases (mod-custom #150, position: sp-position2)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-4 #sp-position2
   Reference: lamylash-services.html #gallery
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-4 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  border: none !important;
}

/* ---- Inner content full width ---- */
body.itemid-133 #sp-section-4 #sp-position2,
body.itemid-133 #sp-section-4 #sp-position2 .sp-column,
body.itemid-133 #sp-section-4 #sp-position2 .sp-module,
body.itemid-133 #sp-section-4 #sp-position2 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* ---- Section header ---- */
body.itemid-133 .gallery-section-header {
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

/* Reuse pkg section label/title/subtitle classes */
body.itemid-133 .gallery-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.itemid-133 .gallery-section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.itemid-133 .gallery-section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.itemid-133 .gallery-section-subtitle {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Filter buttons ---- */
body.itemid-133 .gallery-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

body.itemid-133 .gallery-filter {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1.5px solid #E8E2D9;
  background: #FFFFFF;
  font-family: var(--hb-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s var(--hb-transition);
  color: #6B6358;
}

body.itemid-133 .gallery-filter:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold-dk);
}

body.itemid-133 .gallery-filter.active {
  background: var(--hb-rose-gold);
  color: var(--hb-black-deep);
  border-color: var(--hb-rose-gold);
  font-weight: 600;
}

/* ---- Gallery grid ---- */
body.itemid-133 .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Gallery item ---- */
body.itemid-133 .gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: transform 0.35s var(--hb-transition);
}

body.itemid-133 .gallery-item.hidden {
  display: none;
}

body.itemid-133 .gallery-item:hover {
  transform: scale(1.03);
}

/* ---- Gallery item image area ---- */
body.itemid-133 .gallery-item-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B6358;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
}

/* ---- Gallery hover overlay ---- */
body.itemid-133 .gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,9,7,0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s var(--hb-transition);
}

body.itemid-133 .gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

body.itemid-133 .gallery-item-overlay h4 {
  color: #FFFFFF;
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
}

body.itemid-133 .gallery-item-overlay span {
  color: rgba(255,255,255,0.7);
  font-family: var(--hb-font-body);
  font-size: 0.78rem;
}

/* ---- Gallery item tag (top-left label) ---- */
body.itemid-133 .gallery-item-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3A3530;
  text-transform: uppercase;
  z-index: 1;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-133 .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-section-4 {
    padding: 72px 0 !important;
  }

  body.itemid-133 .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.itemid-133 .gallery-filters {
    gap: 6px;
  }

  body.itemid-133 .gallery-filter {
    padding: 8px 16px;
    font-size: 0.78rem;
  }
}

/* =========================================
   SERVICE PAGE — GLOBAL SHIPPING
   Module: Service-Global Shipping (mod-custom #151, position: sp-position3)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-5 #sp-position3
   Reference: lamylash-services.html #shipping
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-5 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: none !important;
}

/* ---- Inner content full width ---- */
body.itemid-133 #sp-section-5 #sp-position3,
body.itemid-133 #sp-section-5 #sp-position3 .sp-column,
body.itemid-133 #sp-section-5 #sp-position3 .sp-module,
body.itemid-133 #sp-section-5 #sp-position3 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* ---- Section header ---- */
body.itemid-133 .shipping-section-header {
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.itemid-133 .shipping-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.itemid-133 .shipping-section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.itemid-133 .shipping-section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.itemid-133 .shipping-section-subtitle {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Card grid ---- */
body.itemid-133 .shipping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Card ---- */
body.itemid-133 .shipping-card {
  border: 1px solid #E8E2D9;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.35s var(--hb-transition);
  position: relative;
  background: #FFFFFF;
}

body.itemid-133 .shipping-card:hover {
  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  transform: translateY(-4px);
  border-color: var(--hb-rose-gold);
}

/* ---- Icon circle ---- */
body.itemid-133 .shipping-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(201,160,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: all 0.35s var(--hb-transition);
}

body.itemid-133 .shipping-card:hover .shipping-icon {
  background: var(--hb-rose-gold);
}

body.itemid-133 .shipping-icon svg {
  width: 32px;
  height: 32px;
  color: var(--hb-rose-gold);
  transition: color 0.35s var(--hb-transition);
}

body.itemid-133 .shipping-card:hover .shipping-icon svg {
  color: #FFFFFF;
}

/* ---- Card title ---- */
body.itemid-133 .shipping-card h3 {
  font-family: var(--hb-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 8px;
}

/* ---- Time badge ---- */
body.itemid-133 .shipping-time {
  display: inline-block;
  font-family: var(--hb-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hb-rose-gold-dk);
  background: rgba(201,160,111,0.1);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ---- Card description ---- */
body.itemid-133 .shipping-card p {
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* ---- Feature list ---- */
body.itemid-133 .shipping-features {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.itemid-133 .shipping-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #3A3530;
  padding: 8px 0;
  border-bottom: 1px solid #F7F4F0;
}

body.itemid-133 .shipping-features li:last-child {
  border-bottom: none;
}

body.itemid-133 .shipping-features li svg {
  width: 16px;
  height: 16px;
  color: var(--hb-rose-gold);
  flex-shrink: 0;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-133 .shipping-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-section-5 {
    padding: 72px 0 !important;
  }

  body.itemid-133 .shipping-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }

  body.itemid-133 .shipping-card {
    padding: 32px 24px;
  }
}

/* =========================================
   SERVICE PAGE — AFTER-SALES SUPPORT
   Module: After-Sales Support (mod-custom #152, position: sp-position4)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-6 #sp-position4
   Reference: lamylash-services.html #aftersales
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-6 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: linear-gradient(160deg, var(--hb-cream) 0%, #F5EFE6 100%) !important;
  border: none !important;
}

/* ---- Inner content full width ---- */
body.itemid-133 #sp-section-6 #sp-position4,
body.itemid-133 #sp-section-6 #sp-position4 .sp-column,
body.itemid-133 #sp-section-6 #sp-position4 .sp-module,
body.itemid-133 #sp-section-6 #sp-position4 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* ---- Section header ---- */
body.itemid-133 .aftersales-section-header {
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.itemid-133 .aftersales-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.itemid-133 .aftersales-section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.itemid-133 .aftersales-section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.itemid-133 .aftersales-section-subtitle {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Two-column grid: features + FAQ ---- */
body.itemid-133 .aftersales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Feature items ---- */
body.itemid-133 .aftersales-features {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.itemid-133 .aftersales-feature {
  display: flex;
  gap: 20px;
}

/* ---- Feature icon ---- */
body.itemid-133 .aftersales-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.itemid-133 .aftersales-feature-icon svg {
  width: 26px;
  height: 26px;
  color: var(--hb-rose-gold);
}

/* ---- Feature text ---- */
body.itemid-133 .aftersales-feature h4 {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hb-black-deep);
  margin: 0 0 4px;
}

body.itemid-133 .aftersales-feature p {
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.6;
  margin: 0;
}

/* ---- FAQ heading ---- */
body.itemid-133 .aftersales-faq-heading {
  font-family: var(--hb-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 24px;
}

/* ---- FAQ list ---- */
body.itemid-133 .faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- FAQ item ---- */
body.itemid-133 .faq-item {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E2D9;
  overflow: hidden;
  transition: all 0.35s var(--hb-transition);
}

body.itemid-133 .faq-item.open {
  border-color: var(--hb-rose-gold);
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
}

/* ---- FAQ question button ---- */
body.itemid-133 .faq-question {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-align: left;
  transition: color 0.35s var(--hb-transition);
}

body.itemid-133 .faq-question:hover {
  color: var(--hb-rose-gold-dk);
}

body.itemid-133 .faq-question svg {
  width: 20px;
  height: 20px;
  color: #6B6358;
  transition: transform 0.35s var(--hb-transition), color 0.35s var(--hb-transition);
  flex-shrink: 0;
  margin-left: 16px;
}

body.itemid-133 .faq-item.open .faq-question svg {
  transform: rotate(180deg);
  color: var(--hb-rose-gold);
}

/* ---- FAQ answer (accordion) ---- */
body.itemid-133 .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.itemid-133 .faq-answer-inner {
  padding: 0 24px 20px;
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.7;
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-section-6 {
    padding: 72px 0 !important;
  }

  body.itemid-133 .aftersales-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* =========================================
   SERVICE PAGE — CTA (Ready to Build Your Brand)
   Module: Service-Ready to Build Your Brand (mod-custom #153, position: position5)
   Page: itemid-133
   Scope: body.itemid-133 #sp-section-7 #sp-position5
   Reference: lamylash-services.html #cta
========================================= */

/* ---- Section wrapper ---- */
body.itemid-133 #sp-section-7 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-black-deep) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

body.itemid-133 #sp-section-7::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,160,111,0.1) 0%, transparent 60%);
  pointer-events: none;
}

/* ---- Inner content full width ---- */
body.itemid-133 #sp-section-7 #sp-position5,
body.itemid-133 #sp-section-7 #sp-position5 .sp-column,
body.itemid-133 #sp-section-7 #sp-position5 .sp-module,
body.itemid-133 #sp-section-7 #sp-position5 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* ---- CTA container ---- */
body.itemid-133 .svc-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- CTA title ---- */
body.itemid-133 .svc-cta h2 {
  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-cream);
  margin: 0 0 16px;
}

/* ---- CTA description ---- */
body.itemid-133 .svc-cta p {
  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: rgba(250,246,240,0.65);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 500px;
}

/* ---- CTA buttons ---- */
body.itemid-133 .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Primary button (white) ---- */
body.itemid-133 .btn-cta-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hb-cream);
  color: var(--hb-black-deep);
  padding: 16px 40px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

body.itemid-133 .btn-cta-white:hover {
  background: var(--hb-rose-gold);
  transform: translateY(-2px);
  color: var(--hb-black-deep);
}

body.itemid-133 .btn-cta-white svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.itemid-133 .btn-cta-white:hover svg {
  transform: translateX(3px);
}

/* ---- Ghost button ---- */
body.itemid-133 .btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--hb-cream);
  padding: 16px 40px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid rgba(250,246,240,0.25);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

body.itemid-133 .btn-cta-ghost:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
}

body.itemid-133 .btn-cta-ghost svg {
  width: 18px;
  height: 18px;
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-133 #sp-section-7 {
    padding: 72px 0 !important;
  }
}

/* ---- Responsive: Small mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.itemid-133 .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  body.itemid-133 .btn-cta-white,
  body.itemid-133 .btn-cta-ghost {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* =========================================
   ABOUT US PAGE — BANNER (HERO)
   Module: About Us-Banner (mod-custom #154, position: title)
   Page: itemid-134
   Scope: body.itemid-134 #sp-title
   Reference: lamylash-about.html .hero
========================================= */

/* -- Hero Section (maps to .hero in reference) -- */
body.itemid-134 #sp-title {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--hb-black-deep) 0%, #1a1815 50%, var(--hb-black-deep) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* -- Background image (maps to .hero::before in reference) -- */
body.itemid-134 #sp-title::before {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: url('/lamylashxin/images/banners/about-us.webp') center / cover no-repeat !important;
  opacity: 0.15;
}

/* -- Force all Joomla wrappers to full-width so bg image fills screen -- */
body.itemid-134 #sp-title > .container,
body.itemid-134 #sp-title > .container > .row,
body.itemid-134 #sp-title .sp-column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -- Module & content layer (maps to .hero-content in reference) -- */
body.itemid-134 #sp-title .sp-module,
body.itemid-134 #sp-title .sp-module-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* -- Hero content wrapper (maps to .hero-content in reference) -- */
body.itemid-134 .about-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #FFFFFF;
  padding: 40px 24px;
}

/* -- Hero badge (maps to .hero-badge in reference) -- */
body.itemid-134 .about-hero-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  border: 1px solid var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* -- Hero title (maps to .hero-title in reference) -- */
body.itemid-134 .about-hero-title {
  font-family: var(--hb-font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  margin-bottom: 24px;
  color: #FFFFFF;
}

body.itemid-134 .about-hero-title span {
  color: var(--hb-rose-gold);
}

/* -- Hero subtitle (maps to .hero-subtitle in reference) -- */
body.itemid-134 .about-hero-subtitle {
  font-family: var(--hb-font-body);
  font-size: clamp(18px, 2.5vw, 24px);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

/* -- Stats bar (maps to .stats-bar in reference) -- */
body.itemid-134 .about-stats-bar {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 32px 0;
}

/* -- Stat item (maps to .stat-item in reference) -- */
body.itemid-134 .about-stat-item {
  text-align: center;
}

/* -- Stat number (maps to .stat-number in reference) -- */
body.itemid-134 .about-stat-number {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

/* -- Stat label (maps to .stat-label in reference) -- */
body.itemid-134 .about-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* -- Stat divider (maps to .stat-divider in reference) -- */
body.itemid-134 .about-stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
}

/* ---- Responsive: Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 #sp-title {
    min-height: auto !important;
  }
}

/* =========================================
   BLOG PAGE — BANNER (HERO)
   Module: Blog-Banner (mod-custom #170, position: sp-title)
   Page: itemid-136
   Reference: lamylash-blog.html .hero
========================================= */

/* -- Hero Section: full-screen, centred -- */
body.itemid-136 #sp-title {
  min-height: 70vh !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, var(--hb-cream) 0%, var(--hb-white) 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
body.itemid-136 #sp-title #mod-custom170{padding-top:20px;}
/* Ambient radial glow — top-right */
body.itemid-136 #sp-title::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(201, 160, 111, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Ambient radial glow — bottom-left */
body.itemid-136 #sp-title::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 160, 111, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Full-width overrides for all Joomla wrappers */
body.itemid-136 #sp-title > .container,
body.itemid-136 #sp-title > .container > .row,
body.itemid-136 #sp-title .sp-column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

body.itemid-136 #sp-title .sp-module,
body.itemid-136 #sp-title .sp-module-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  display: flex;
  justify-content: center;
}

/* ---- Hero inner content ---- */
body.itemid-136 .blog-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Badge */
body.itemid-136 .blog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(201, 160, 111, 0.12);
  color: var(--hb-rose-gold-dk);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--hb-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(201, 160, 111, 0.25);
}

/* H1 */
body.itemid-136 .blog-hero-inner h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Description */
body.itemid-136 .blog-hero-inner p {
  font-family: var(--hb-font-body);
  font-size: 1.15rem;
  color: #6B6B6B;
  line-height: 1.75;
  margin-bottom: 0;
  max-width: 600px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  body.itemid-136 #sp-title {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
}

@media (max-width: 576px) {
  body.itemid-136 .blog-hero-inner h1 {
    font-size: 2.2rem;
  }

  body.itemid-136 .blog-hero-inner p {
    font-size: 1rem;
  }
}

/* =========================================
   BLOG PAGE — MAIN CONTENT (#sp-main-body)
   Reference: lamylash-blog.html .main-content
========================================= */

/* ---- Section wrapper: max-width, padding, 2-col grid ---- */
body.itemid-136 #sp-main-body {
  background: var(--hb-cream, #FAF6F0) !important;
  padding: 0 !important;
}

body.itemid-136 #sp-main-body > .container {
  max-width: 1400px !important;
  padding: 4rem 2rem !important;
  margin: 0 auto !important;
}

body.itemid-136 #sp-main-body > .container > .row {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 4rem !important;
  align-items: start !important;
}

/* ---- Content column (articles) ---- */
body.itemid-136 #sp-component {
  background: transparent !important;
  padding: 0 !important;
}

body.itemid-136 #sp-component > .sp-column {
  padding: 0 !important;
  background: transparent !important;
}

/* Hide default page-header h1 on Blog page */
body.itemid-136 #sp-component .page-header h1 {
  display: none !important;
}

/* Blog container - fill full width of #sp-component */
body.itemid-136 .blog.com-content-category-blog {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  max-width: 100%;
}


/* ---- Leading (featured) article ---- */
body.itemid-136 .items-leading .article,
body.itemid-136 .articles-leading .article {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background: var(--hb-white, #FFFFFF) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 0 !important;
  position: relative !important;
  cursor: pointer !important;
}

body.itemid-136 .items-leading .article:hover,
body.itemid-136 .articles-leading .article:hover {
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12) !important;
  transform: translateY(-5px) !important;
}

/* Make entire card clickable - invisible overlay */
body.itemid-136 .items-leading .article::before,
body.itemid-136 .articles-leading .article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}

/* Ensure links inside are clickable */
body.itemid-136 .items-leading .article a:not(.article-readmore),
body.itemid-136 .articles-leading .article a:not(.article-readmore) {
  position: relative;
  z-index: 2;
}

/* Ensure readmore is always clickable */
body.itemid-136 .items-leading .article .article-readmore,
body.itemid-136 .articles-leading .article .article-readmore {
  position: relative;
  z-index: 3;
}

/* Featured image */
body.itemid-136 .items-leading .article-intro-image,
body.itemid-136 .articles-leading .article-intro-image {
  float: none !important;
  width: 100% !important;
  height: 400px !important;
  overflow: hidden !important;
}

body.itemid-136 .items-leading .article-intro-image img,
body.itemid-136 .articles-leading .article-intro-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  padding: 50px 30px;
}

body.itemid-136 .items-leading .article:hover .article-intro-image img,
body.itemid-136 .articles-leading .article:hover .article-intro-image img {
  transform: scale(1.05) !important;
}

/* Featured body */
body.itemid-136 .items-leading .article-body,
body.itemid-136 .articles-leading .article-body {
  padding: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: var(--hb-white, #FFFFFF) !important;
}

/* ---- Grid articles (3 cols) ---- */
body.itemid-136 .article-list.cols-3 {
  display: grid;
  gap: 2rem;
}

body.itemid-136 .article-list.cols-3 .article {
  background: var(--hb-white, #FFFFFF);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.itemid-136 .article-list.cols-3 .article:hover {
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12);
  transform: translateY(-5px);
}

/* Grid image */
body.itemid-136 .article-list.cols-3 .article-intro-image {
  float: none !important;
  width: 100% !important;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}

body.itemid-136 .article-list.cols-3 .article-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

body.itemid-136 .article-list.cols-3 .article:hover .article-intro-image img {
  transform: scale(1.05);
}

/* Grid body */
body.itemid-136 .article-list.cols-3 .article-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ---- Shared article typography ---- */
body.itemid-136 .article-header h2,
body.itemid-136 .article-header h3 {
  font-family: var(--hb-font-display);
  font-weight: 600;
  color: var(--hb-black-deep, #0A0907);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

body.itemid-136 .items-leading .article-header h2,
body.itemid-136 .articles-leading .article-header h2 {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
}

body.itemid-136 .article-list.cols-3 .article-header h3 {
  font-size: 1.15rem;
}

body.itemid-136 .article-header a {
  color: var(--hb-black-deep, #0A0907) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

body.itemid-136 .article-header a:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
}

/* Article meta */
body.itemid-136 .article-info {
  margin-bottom: 1rem;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #9B9B9B;
}

body.itemid-136 .article-info .published time {
  font-size: 0.82rem;
  color: #9B9B9B;
}

/* Article excerpt */
body.itemid-136 .article-introtext {
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #6B6B6B;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Limit intro text height to match image - items-leading */
body.itemid-136 .items-leading .article-introtext,
body.itemid-136 .articles-leading .article-introtext {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Limit intro text to 4 lines - grid articles */
body.itemid-136 .article-list.cols-3 .article-introtext {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(0.92rem * 1.7 * 4);
}

/* Read More link — styled as "Read More →" */
body.itemid-136 .read-more,
body.itemid-136 .article-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--hb-black-deep, #0A0907) !important;
  font-family: var(--hb-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.25s ease, gap 0.25s ease;
}

body.itemid-136 .read-more:hover,
body.itemid-136 .article-readmore:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
  gap: 0.7rem;
}

body.itemid-136 .article-readmore .readmore-arrow {
  transition: transform 0.25s ease;
}

body.itemid-136 .article-readmore:hover .readmore-arrow {
  transform: translateX(4px);
}

/* ---- Items-more (Read More links list) ---- */
body.itemid-136 .items-more.articles-more {
  background: var(--hb-white, #FFFFFF);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
}

body.itemid-136 .items-more.articles-more ol.com-content-blog__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.itemid-136 .items-more.articles-more ol.com-content-blog__links li {
  list-style: none;
}

body.itemid-136 .items-more.articles-more ol.com-content-blog__links li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--hb-cream, #FAF6F0);
  color: var(--hb-black-deep, #0A0907) !important;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 50px;
  border: 1px solid rgba(201, 160, 111, 0.2);
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

body.itemid-136 .items-more.articles-more ol.com-content-blog__links li a:hover {
  background: var(--hb-black-deep, #0A0907);
  color: var(--hb-white) !important;
  border-color: var(--hb-black-deep, #0A0907);
}

/* ---- Pagination ---- */
body.itemid-136 .pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

body.itemid-136 .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907) !important;
  background: var(--hb-white, #FFFFFF);
  border: 1px solid rgba(201, 160, 111, 0.2);
  box-shadow: 0 2px 10px rgba(10, 9, 7, 0.06);
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}

body.itemid-136 .pagination .page-item .page-link:hover,
body.itemid-136 .pagination .page-item.active .page-link {
  background: var(--hb-black-deep, #0A0907) !important;
  color: var(--hb-white) !important;
  border-color: var(--hb-black-deep, #0A0907);
}

body.itemid-136 .pagination .page-item.disabled .page-link {
  background: var(--hb-white, #FFFFFF);
  color: #C0BAB0 !important;
  border-color: rgba(201, 160, 111, 0.15);
  cursor: not-allowed;
  box-shadow: none;
}

/* Counter text */
body.itemid-136 .com-content-category-blog__counter {
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #9B9B9B;
}

/* =========================================
   BLOG PAGE — SIDEBAR (#sp-right)
   Reference: lamylash-blog.html .sidebar
========================================= */
body.itemid-136 #sp-right {
  position: sticky;
  top: 100px;
  height: fit-content;
  background: transparent !important;
  width:30%;
  z-index: 100;
}

body.itemid-136 #sp-right > .sp-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 !important;
  background: transparent !important;
}

/* Sidebar widget card */
body.itemid-136 #sp-right .sp-module {
  background: var(--hb-white, #FFFFFF);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.07);
  margin-bottom: 0;
}

/* Sidebar module title */
body.itemid-136 #sp-right .sp-module-title {
  font-family: var(--hb-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hb-black-deep, #0A0907);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--hb-cream, #FAF6F0);
}

/* Popular Articles (mod-articlesnews) */
body.itemid-136 #sp-right .mod-articlesnews__item {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(201, 160, 111, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.itemid-136 #sp-right .mod-articlesnews__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

body.itemid-136 #sp-right .mod-articlesnews__item .newsflash-image {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 !important;
}

body.itemid-136 #sp-right .mod-articlesnews__item .newsflash-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body.itemid-136 #sp-right .mod-articlesnews__item:hover .newsflash-image img {
  transform: scale(1.05);
}

body.itemid-136 #sp-right .mod-articlesnews__item .newsflash-title a {
  font-family: var(--hb-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hb-black-deep, #0A0907) !important;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s;
}

body.itemid-136 #sp-right .mod-articlesnews__item .newsflash-title a:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
}

/* =========================================
   Popular Post list (mod-articleslatest)
   参考: .popular-post 样式
========================================= */
body.itemid-136 #sp-right .mod-articleslatest {
  display: flex;
  flex-direction: column;
}

body.itemid-136 #sp-right .mod-articleslatest li {
  list-style: none;
  margin-bottom: 0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(201, 160, 111, 0.2);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

body.itemid-136 #sp-right .mod-articleslatest li:first-child {
  padding-top: 0;
}

body.itemid-136 #sp-right .mod-articleslatest li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Popular post image */
body.itemid-136 #sp-right .mod-articleslatest li img,
body.itemid-136 #sp-right .mod-articleslatest .mod-articleslatest-image {
  width: 70px !important;
  height: 70px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Popular post content wrapper */
body.itemid-136 #sp-right .mod-articleslatest .mod-articleslatest-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

/* Popular post title */
body.itemid-136 #sp-right .mod-articleslatest li a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
  padding: 0;
  margin: 0;
  border: none;
  transition: all 0.25s ease;
}

body.itemid-136 #sp-right .mod-articleslatest li a:hover {
  opacity: 0.85;
}

body.itemid-136 #sp-right .mod-articleslatest li a .mod-articleslatest-title,
body.itemid-136 #sp-right .mod-articleslatest li a span:first-child {
  font-family: var(--hb-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hb-black-deep, #0A0907) !important;
  line-height: 1.35;
  transition: color 0.25s;
  margin: 0;
  padding: 0;
  flex: 1;
}

body.itemid-136 #sp-right .mod-articleslatest li a:hover .mod-articleslatest-title,
body.itemid-136 #sp-right .mod-articleslatest li a:hover span:first-child {
  color: var(--hb-rose-gold, #C9A06F) !important;
}

/* Popular post date */
body.itemid-136 #sp-right .mod-articleslatest .mod-articleslatest-date,
body.itemid-136 #sp-right .mod-articleslatest li a span:last-child,
body.itemid-136 #sp-right .mod-articleslatest li .published {
  font-family: var(--hb-font-body);
  font-size: 0.8rem !important;
  color: #9B9B9B !important;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  display: block;
}

/* =========================================
   Popular Articles (mod-articles_popular) 
   Custom override template styles
   参考: .popular-post 样式
========================================= */
body.itemid-136 #sp-right .mod-articles-popular {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.itemid-136 #sp-right .mod-articles-popular li {
  list-style: none;
  margin-bottom: 0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(201, 160, 111, 0.2);
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem;
  align-items: flex-start;
}

body.itemid-136 #sp-right .mod-articles-popular li:first-child {
  padding-top: 0;
}

body.itemid-136 #sp-right .mod-articles-popular li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Popular card link wrapper */
body.itemid-136 #sp-right .mod-articles-popular li a {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
  transition: all 0.25s ease;
}

body.itemid-136 #sp-right .mod-articles-popular li a:hover {
  opacity: 0.85;
}

/* Popular post image */
body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-image {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hb-cream, #FAF6F0);
}

body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body.itemid-136 #sp-right .mod-articles-popular li a:hover .mod-articles-popular-image img {
  transform: scale(1.05);
}

/* No image placeholder */
body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hb-cream, #FAF6F0);
}

body.itemid-136 #sp-right .mod-articles-popular .no-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hb-cream, #FAF6F0) 0%, #f0ebe3 100%);
}

/* Popular post content */
body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

/* Popular post title (h5) */
body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-title {
  font-family: var(--hb-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hb-black-deep, #0A0907);
  line-height: 1.3;
  margin-bottom: 0.3rem;
  transition: color 0.25s;
}

body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-title a {
  color: inherit;
  text-decoration: none;
  display: block;
}

body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-title a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

/* Popular post date */
body.itemid-136 #sp-right .mod-articles-popular .mod-articles-popular-date {
  font-family: var(--hb-font-body);
  font-size: 0.8rem;
  color: #9B9B9B;
  display: block;
}

/* =========================================
   Popular Post — Scroll Float
   当 banner 滚出视口后，Popular Post 模块浮动在文章右侧
   JS-managed: .popular-float-active class toggled by scroll
========================================= */
body.itemid-136 #sp-right .sp-module.popular-float-active {
  /* position / top / right / width 由 JS inline style 实时控制（fixed 或 absolute） */
  z-index: 1000;
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.18) !important;
  border-radius: 16px;
  transition: box-shadow 0.3s ease;
}

/* =========================================
   BLOG PAGE — RESPONSIVE
========================================= */
@media (max-width: 1200px) {
  body.itemid-136 #sp-main-body > .container > .row {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  body.itemid-136 #sp-right {
    position: static;
    top: auto;
  }

  body.itemid-136 #sp-right > .sp-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  body.itemid-136 .items-leading .article,
  body.itemid-136 .articles-leading .article {
    grid-template-columns: 1fr !important;
  }

  body.itemid-136 .items-leading .article-intro-image,
  body.itemid-136 .articles-leading .article-intro-image {
    height: 280px !important;
  }

  body.itemid-136 .article-list.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  body.itemid-136 #sp-main-body > .container {
    padding: 3rem 1.5rem !important;
  }
}

@media (max-width: 768px) {
  body.itemid-136 #sp-right > .sp-column {
    grid-template-columns: 1fr;
  }

  body.itemid-136 .article-list.cols-3 {
    grid-template-columns: 1fr;
  }

  body.itemid-136 .items-leading .article-body,
  body.itemid-136 .articles-leading .article-body {
    padding: 1.5rem !important;
  }

  body.itemid-136 .items-leading .article-header h2,
  body.itemid-136 .articles-leading .article-header h2 {
    font-size: 1.5rem !important;
  }
  body.itemid-136 #sp-right {
  height: fit-content;
  background: transparent !important;
  width: 100%;
  z-index: 100;
}
}

/* ---- Responsive: Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 .about-stats-bar {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  body.itemid-134 .about-stat-divider {
    display: none;
  }
}

/* ---- Responsive: Small mobile (<= 480px) ---- */
@media (max-width: 480px) {
  body.itemid-134 .about-hero-title {
    font-size: 2.25rem;
  }

  body.itemid-134 .about-hero-subtitle {
    font-size: 1rem;
  }
}

/* =========================================
   ABOUT US PAGE — OUR STORY SECTION
   Module #155 (story-image, position1 → body.item-101 .why-us-section)
   Module #156 (story-content, position2 → body.item-101 #sp-section-4)
   Page: itemid-134
   Scope: body.itemid-134
   Reference: lamylash-about.html #story
========================================= */

/* =========================================
   ABOUT US PAGE — OUR STORY SECTION
   Module #155 (position1 → body.item-101 .why-us-section)
   Page: itemid-134
   Layout: .story-grid is a 2-col CSS grid inside the module
   Reference: lamylash-about.html #story
========================================= */

/* ---- Section: reset #sp-section-3 for About Us page ---- */
body.itemid-134 #sp-section-3 {
  padding: 120px 0 !important;
  margin: 0 !important;
  background: var(--hb-white) !important;
  border: none !important;
  overflow: visible !important;
}

/* Disable Home-page glow effect on this page */
body.itemid-134 #sp-section-3::before {
  display: none !important;
}

/* ---- Module wrapper: full-width center container ---- */
body.itemid-134 #sp-section-3 #sp-position1,
body.itemid-134 #sp-section-3 #sp-position1 .sp-column,
body.itemid-134 #sp-section-3 #sp-position1 .sp-module,
body.itemid-134 #sp-section-3 #sp-position1 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.itemid-134 #sp-section-3 .sp-module-title {
  display: none;
}

/* ---- .story-grid: 2-column layout (matches reference .story-grid) ---- */
body.itemid-134 .story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Story Image (left column) ---- */
body.itemid-134 .story-image {
  position: relative;
}

body.itemid-134 .story-image img {
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
  width: 100%;
  height: auto;
  display: block;
}

body.itemid-134 .story-image-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--hb-rose-gold);
  color: var(--hb-white);
  padding: 24px 32px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.itemid-134 .story-image-badge .number {
  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  display: block;
}

body.itemid-134 .story-image-badge .text {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- Story Content (right column) ---- */
body.itemid-134 .story-section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  border: 1px solid var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.itemid-134 .story-title {
  font-family: var(--hb-font-display);
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--hb-black-deep);
}

body.itemid-134 .story-title span {
  color: var(--hb-rose-gold);
}

body.itemid-134 .story-text {
  font-size: 17px;
  color: #6B6B6B;
  margin-bottom: 20px;
  line-height: 1.8;
}

/* ---- Timeline ---- */
body.itemid-134 .timeline {
  margin-top: 48px;
}

body.itemid-134 .timeline-item {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  position: relative;
  padding-left: 32px;
}

body.itemid-134 .timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--hb-rose-gold);
  border-radius: 50%;
}

body.itemid-134 .timeline-item::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  width: 2px;
  height: calc(100% - 8px);
  background: #E8E4DE;
}

body.itemid-134 .timeline-item:last-child::after {
  display: none;
}

body.itemid-134 .timeline-year {
  font-family: var(--hb-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  min-width: 80px;
}

body.itemid-134 .timeline-text {
  font-size: 16px;
  color: #6B6B6B;
  margin: 0;
}

body.itemid-134 .timeline-text strong {
  color: var(--hb-black-deep);
}

/* ---- Responsive: Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 40px;
  }

  body.itemid-134 #sp-section-3 {
    padding: 80px 0 !important;
  }
}

/* ---- Responsive: Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 .story-grid {
    padding: 0 24px;
  }

  body.itemid-134 .story-image-badge {
    bottom: -12px;
    right: -12px;
    padding: 16px 24px;
  }

  body.itemid-134 .story-image-badge .number {
    font-size: 36px;
  }

  body.itemid-134 .story-title {
    font-size: 32px;
  }

  body.itemid-134 .timeline-item {
    gap: 16px;
    padding-left: 28px;
  }

  body.itemid-134 .timeline-year {
    font-size: 20px;
    min-width: 60px;
  }
  body.itemid-136 .items-leading {
	display:none;
}
.itemid-136 #sp-main-body #sp-component .article-list .col-lg-4{margin-bottom: 10px;}
}

/* =========================================
   ABOUT US PAGE — OUR FACILITY SECTION
   Module #157 (position3 → body.item-101 #sp-section-4)
   Page: itemid-134
   Layout: .factory-section wrapper with 3-col card grid + stats bar
   Reference: lamylash-about.html #factory
   NOTE: position2 is empty, so position3 renders in body.item-101 #sp-section-4
========================================= */

/* ---- Section: reset #sp-section-4 for About Us page ---- */
body.itemid-134 #sp-section-4 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  border: none !important;
  overflow: visible !important;
}

/* Disable any existing glow effects */
body.itemid-134 #sp-section-4::before,
body.itemid-134 #sp-section-4::after {
  display: none !important;
}

/* ---- Module wrapper: full-width ---- */
body.itemid-134 #sp-section-4 #sp-position3,
body.itemid-134 #sp-section-4 #sp-position3 .sp-column,
body.itemid-134 #sp-section-4 #sp-position3 .sp-module,
body.itemid-134 #sp-section-4 #sp-position3 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-section-4 .sp-module-title {
  display: none;
}

/* ---- .factory-section: centered container ---- */
body.itemid-134 .factory-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section Header ---- */
body.itemid-134 .factory-header {
  text-align: center;
  margin-bottom: 60px;
}

body.itemid-134 .factory-header .section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.itemid-134 .factory-header .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.itemid-134 .factory-header .section-subtitle {
  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Factory Cards Grid: 3 columns ---- */
body.itemid-134 .factory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.itemid-134 .factory-card {
  background: var(--hb-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body.itemid-134 .factory-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.itemid-134 .factory-card-image {
  height: 240px;
  overflow: hidden;
}

body.itemid-134 .factory-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

body.itemid-134 .factory-card:hover .factory-card-image img {
  transform: scale(1.05);
}

body.itemid-134 .factory-card-content {
  padding: 24px;
}

body.itemid-134 .factory-card-title {
  font-family: var(--hb-font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--hb-black-deep);
  margin-top: 0;
}

body.itemid-134 .factory-card-text {
  font-size: 15px;
  color: #6B6B6B;
  line-height: 1.7;
  margin: 0;
}

/* ---- Factory Stats Bar ---- */
body.itemid-134 .factory-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
  background: var(--hb-black-deep);
  padding: 48px;
  border-radius: 16px;
}

body.itemid-134 .factory-stat {
  text-align: center;
  color: var(--hb-white);
}

body.itemid-134 .factory-stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.itemid-134 .factory-stat-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--hb-rose-gold);
}

body.itemid-134 .factory-stat-number {
  font-family: var(--hb-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

body.itemid-134 .factory-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Responsive: Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .factory-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.itemid-134 .factory-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 .factory-section {
    padding: 0 24px;
  }

  body.itemid-134 .factory-grid {
    grid-template-columns: 1fr;
  }

  body.itemid-134 .factory-stats {
    grid-template-columns: 1fr 1fr;
    padding: 32px;
    gap: 24px;
  }
}

/* ---- Responsive: Small Mobile (<= 480px) ---- */
@media (max-width: 480px) {
  body.itemid-134 .factory-stats {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   ABOUT US PAGE — HOW WE WORK SECTION
   Module #158 (position4 → body.item-101 #sp-section-5)
   Page: itemid-134
   Layout: .process-section with 3-col card grid (6 cards)
   Reference: lamylash-about.html #process
   NOTE: max-width 1400px to match reference page container width
   NOTE: Use #mod-custom158 as anchor (section ID may shift if positions are empty)
   NOTE: position2 is empty, so position4 renders in body.item-101 #sp-section-5
========================================= */

/* ---- Section: reset #sp-section-5 for About Us page ---- */
body.itemid-134 #sp-section-5 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-white) !important;
  border: none !important;
  overflow: visible !important;
}

body.itemid-134 #sp-section-5::before,
body.itemid-134 #sp-section-5::after {
  display: none !important;
}

/* ---- Module wrapper: strip all ancestor padding ---- */
body.itemid-134 #mod-custom158 {
  background: transparent !important;
}

/* .sp-module-content is PARENT of #mod-custom158, match via #sp-position4 */
body.itemid-134 #sp-position4 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position4,
body.itemid-134 #sp-position4 .sp-column,
body.itemid-134 #sp-position4 .sp-module {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Break out of .container padding constraint */
body.itemid-134 #sp-position4 .container-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* Also clear container padding that wraps this section */
body.itemid-134 .process-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section Header ---- */
body.itemid-134 .process-header {
  text-align: center;
  margin-bottom: 60px;
}

body.itemid-134 .process-header .section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.itemid-134 .process-header .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.itemid-134 .process-header .section-subtitle {
  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Process Cards Grid: 3 columns ---- */
body.itemid-134 .process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.itemid-134 .process-card {
  position: relative;
  background: var(--hb-cream);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: all 0.4s ease;
}

body.itemid-134 .process-card:hover {
  background: var(--hb-black-deep);
  color: var(--hb-white);
}

body.itemid-134 .process-card:hover .process-card-icon {
  background: var(--hb-rose-gold);
}

body.itemid-134 .process-card:hover .process-card-icon svg {
  stroke: var(--hb-white);
}

body.itemid-134 .process-card:hover .process-card-title {
  color: var(--hb-white);
}

body.itemid-134 .process-card:hover .process-card-text {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Process Number (01-06, top-right corner) ---- */
body.itemid-134 .process-number {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  color: #E8E8E8;
  opacity: 0.5;
}

body.itemid-134 .process-card:hover .process-number {
  color: rgba(255, 255, 255, 0.2);
}

/* ---- Process Card Icon (circle, centered) ---- */
body.itemid-134 .process-card-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: var(--hb-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

body.itemid-134 .process-card-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--hb-rose-gold);
  transition: all 0.4s ease;
}

/* ---- Process Card Title & Text ---- */
body.itemid-134 .process-card-title {
  font-family: var(--hb-font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--hb-black-deep);
  margin-top: 0;
  transition: color 0.4s ease;
}

body.itemid-134 .process-card-text {
  font-size: 15px;
  color: #6B6B6B;
  line-height: 1.6;
  margin: 0;
  transition: color 0.4s ease;
}

/* ---- Responsive: Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 .process-section {
    padding: 0 24px;
  }

  body.itemid-134 .process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   ABOUT US PAGE — WHY CHOOSE US SECTION
   Module #159 (position5 → body.item-101 #sp-section-6)
   Page: itemid-134
   Layout: .why-section with 3-col card grid (6 cards)
   Reference: lamylash-about.html #why
   NOTE: position2 is empty, so position5 renders in body.item-101 #sp-section-6
   NOTE: Dark background (gradient black), use !important to override defaults
========================================= */

/* ---- Section: dark gradient background ---- */
body.itemid-134 #sp-section-6 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #0A0907 0%, #1a1815 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  overflow: visible !important;
}

body.itemid-134 #sp-section-6::before,
body.itemid-134 #sp-section-6::after {
  display: none !important;
}

/* ---- Module wrapper: strip all ancestor padding ---- */
body.itemid-134 #mod-custom159 {
  background: transparent !important;
}

body.itemid-134 #sp-position5 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position5,
body.itemid-134 #sp-position5 .sp-column,
body.itemid-134 #sp-position5 .sp-module {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position5 .container-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Why section container (matches reference .container max-width 1400px) ---- */
body.itemid-134 .why-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Section Header ---- */
body.itemid-134 .why-header {
  text-align: center;
  margin-bottom: 60px;
}

body.itemid-134 .why-header .section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.itemid-134 .why-header .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  margin-top: 0;
}

body.itemid-134 .why-header .section-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Why Cards Grid: 3 columns ---- */
body.itemid-134 .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.itemid-134 .why-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.3s ease;
}

body.itemid-134 .why-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--hb-rose-gold);
  transform: translateY(-8px);
}

/* ---- Why Card Icon ---- */
body.itemid-134 .why-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: rgba(201, 160, 111, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.itemid-134 .why-card-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--hb-rose-gold);
}

/* ---- Why Card Title & Text ---- */
body.itemid-134 .why-card-title {
  font-family: var(--hb-font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #FFFFFF;
  margin-top: 0;
}

body.itemid-134 .why-card-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* ---- Responsive: Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 #sp-section-6 {
    padding: 60px 0 !important;
  }

  body.itemid-134 .why-section {
    padding: 0 24px;
  }

  body.itemid-134 .why-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   ABOUT US PAGE — QUALITY ASSURED SECTION
   Module #160 (position6 → body.item-101 #sp-section-7)
   Page: itemid-134
   Layout: .cert-section with 2-col grid (content + badges)
   Reference: lamylash-about.html #certifications
   NOTE: position2 is empty, so position6 renders in body.item-101 #sp-section-7
========================================= */

/* ---- Section: cream background ---- */
body.itemid-134 #sp-section-7 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  color: var(--hb-black-deep) !important;
  border: none !important;
  overflow: visible !important;
}

body.itemid-134 #sp-section-7::before,
body.itemid-134 #sp-section-7::after {
  display: none !important;
}

/* ---- Module wrapper: strip all ancestor padding ---- */
body.itemid-134 #sp-position6 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position6,
body.itemid-134 #sp-position6 .sp-column,
body.itemid-134 #sp-position6 .sp-module {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position6 .container-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Cert section container ---- */
body.itemid-134 .cert-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- 2-col grid: content left, badges right ---- */
body.itemid-134 .cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ---- Left: text content ---- */
body.itemid-134 .cert-content .section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.itemid-134 .cert-heading {
  font-family: var(--hb-font-display);
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--hb-black-deep);
  margin-top: 0;
}

body.itemid-134 .cert-desc {
  font-size: 17px;
  color: #6B6B6B;
  margin-bottom: 32px;
  line-height: 1.8;
}

/* ---- Cert checklist ---- */
body.itemid-134 .cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.itemid-134 .cert-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hb-light-gray, #E8E4DE);
  font-size: 16px;
  color: var(--hb-black-deep);
}

body.itemid-134 .cert-list li:last-child {
  border-bottom: none;
}

body.itemid-134 .cert-check {
  width: 24px;
  height: 24px;
  background: var(--hb-rose-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.itemid-134 .cert-check svg {
  width: 14px;
  height: 14px;
  stroke: #FFFFFF;
}

/* ---- Right: cert badge cards ---- */
body.itemid-134 .cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

body.itemid-134 .cert-badge {
  width: 160px;
  height: 200px;
  background: #FFFFFF;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
}

body.itemid-134 .cert-badge:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.itemid-134 .cert-badge-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background: var(--hb-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.itemid-134 .cert-badge-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--hb-rose-gold);
}

body.itemid-134 .cert-badge-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-align: center;
  line-height: 1.4;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .cert-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 #sp-section-7 {
    padding: 60px 0 !important;
  }

  body.itemid-134 .cert-section {
    padding: 0 24px;
  }

  body.itemid-134 .cert-badges {
    flex-direction: column;
    align-items: center;
  }

  body.itemid-134 .cert-heading {
    font-size: 30px;
  }
}

/* =========================================
   ABOUT US PAGE — GLOBAL REACH SECTION
   Module #161 (position7 → body.item-101 #sp-section-8)
   Page: itemid-134
   Layout: .trusted-section with logo grid + stats
   Reference: lamylash-about.html #trusted
   NOTE: position2 is empty, so position7 renders in body.item-101 #sp-section-8
========================================= */

/* ---- Section: white background ---- */
body.itemid-134 #sp-section-8 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  color: var(--hb-black-deep) !important;
  border: none !important;
  overflow: visible !important;
}

body.itemid-134 #sp-section-8::before,
body.itemid-134 #sp-section-8::after {
  display: none !important;
}

/* ---- Module wrapper: strip all ancestor padding ---- */
body.itemid-134 #sp-position7 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position7,
body.itemid-134 #sp-position7 .sp-column,
body.itemid-134 #sp-position7 .sp-module {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position7 .container-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Trusted section container ---- */
body.itemid-134 .trusted-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header ---- */
body.itemid-134 .trusted-header {
  text-align: center;
  margin-bottom: 48px;
}

body.itemid-134 .trusted-header .section-badge {
  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.itemid-134 .trusted-header .section-title {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.itemid-134 .trusted-header .section-subtitle {
  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Logo grid: 6 columns ---- */
body.itemid-134 .trusted-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

body.itemid-134 .trusted-logo {
  background: var(--hb-cream);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  transition: all 0.3s ease;
}

body.itemid-134 .trusted-logo:hover {
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
}

body.itemid-134 .trusted-logo-inner {
  font-family: var(--hb-font-display);
  font-size: 18px;
  font-weight: 600;
  color: #6B6B6B;
  text-align: center;
}

/* ---- Stats bar: 4 columns ---- */
body.itemid-134 .trusted-stats {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 60px;
}

body.itemid-134 .trusted-stat-item {
  text-align: center;
}

body.itemid-134 .trusted-stat-number {
  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

body.itemid-134 .trusted-stat-label {
  font-size: 15px;
  color: #6B6B6B;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-134 .trusted-logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 #sp-section-8 {
    padding: 60px 0 !important;
  }

  body.itemid-134 .trusted-section {
    padding: 0 24px;
  }

  body.itemid-134 .trusted-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.itemid-134 .trusted-stats {
    flex-direction: column;
    gap: 32px;
  }
}

/* =========================================
   ABOUT US PAGE — CTA SECTION
   Module #162 (position8 → body.item-101 #sp-section-9)
   Page: itemid-134
   Layout: .cta-section with rose-gold gradient + 2 buttons
   Reference: lamylash-about.html #cta
   NOTE: position2 is empty, so position8 renders in body.item-101 #sp-section-9
========================================= */

/* ---- Section: rose-gold gradient background ---- */
body.itemid-134 #sp-section-9 {
  padding: 100px 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #C9A06F 0%, #b88a5a 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  overflow: visible !important;
  text-align: center;
}

body.itemid-134 #sp-section-9::before,
body.itemid-134 #sp-section-9::after {
  display: none !important;
}

/* ---- Module wrapper: strip all ancestor padding ---- */
body.itemid-134 #sp-position8 .sp-module-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position8,
body.itemid-134 #sp-position8 .sp-column,
body.itemid-134 #sp-position8 .sp-module {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.itemid-134 #sp-position8 .container-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- CTA container ---- */
body.itemid-134 .cta-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.itemid-134 .cta-content {
  max-width: 700px;
  margin: 0 auto;
}

/* ---- CTA title ---- */
body.itemid-134 .cta-title {
  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 20px;
  margin-top: 0;
}

/* ---- CTA description ---- */
body.itemid-134 .cta-desc {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
  color: #FFFFFF;
  line-height: 1.7;
}

/* ---- CTA buttons ---- */
body.itemid-134 .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

body.itemid-134 .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

body.itemid-134 .cta-btn svg {
  width: 20px;
  height: 20px;
}

/* Primary button: white bg, black text */
body.itemid-134 .cta-btn-primary {
  background: #FFFFFF;
  color: var(--hb-black-deep);
}

body.itemid-134 .cta-btn-primary:hover {
  background: var(--hb-black-deep);
  color: #FFFFFF;
  transform: translateY(-4px);
}

/* Secondary button: transparent, white border */
body.itemid-134 .cta-btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

body.itemid-134 .cta-btn-secondary:hover {
  background: #FFFFFF;
  color: var(--hb-rose-gold);
  transform: translateY(-4px);
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-134 #sp-section-9 {
    padding: 60px 0 !important;
  }

  body.itemid-134 .cta-section {
    padding: 0 24px;
  }

  body.itemid-134 .cta-buttons {
    flex-direction: column;
  }

  body.itemid-134 .cta-btn {
    justify-content: center;
  }
}

@media (min-width: 1025px) {
.mod-breadcrumbs{background:transparent;margin-left:150px;}
.view-category .mod-breadcrumbs{background:transparent;margin-left:120px;}
.itemid-136 .mod-breadcrumbs{background:transparent;margin-left:0px;}
.itemid-132 .mod-breadcrumbs{margin-top:-50px;}
.itemid-134 .mod-breadcrumbs{margin-left:250px;color:#fff;}
.mod-breadcrumbs a{color:var(--hb-rose-gold);}
body.itemid-132 #mod-custom132 {
  min-height: 450px;
  height: 450px;
 }
body.itemid-132 #sp-position5 .vmproduct.productdetails li a:first-child img {
  height: 150px;
}
body.itemid-132 #mod-custom142 {
  min-height: 450px;
  height: 450px;
}
body.itemid-132 #mod-custom145 {
  min-height: 450px;
  height: 450px;
}
}

@media (max-width: 1024px) {
.mod-breadcrumbs{background:transparent;}
.itemid-133 .mod-breadcrumbs{margin-left:50px;}
.itemid-132 .mod-breadcrumbs{margin-top:-50px;margin-left: 30px;}
.itemid-134 .mod-breadcrumbs{color:#fff;}
.mod-breadcrumbs a{color:var(--hb-rose-gold);}
body.itemid-132 #sp-position5 .vmproduct.productdetails li a:first-child img {
  height: 150px;
}
body.itemid-132 #mod-custom142 {
  min-height: 450px;
  height: 450px;
}
}

/* =========================================
   CONTACT US PAGE — BANNER SECTION
   Module: Contact Us-Banner (mod-custom #163, position: title)
   Page: itemid-135
   Scope: body.item-208 #sp-section-1 #sp-title
   Reference: lamylash-contact.html .hero
========================================= */

/* ---- Section-1 = true full-bleed hero wrapper ---- */
/*
 * DOM reality: #sp-section-1 has NO .container child — the .row sits directly inside.
 * Layout: #sp-section-1 > .row > #sp-title.col-lg-12 > .sp-column
 *         .sp-column contains two .sp-module:
 *           1. #mod-custom163  (banner h1+p)
 *           2. breadcrumb nav
 */
body.item-208 #sp-section-1 {
  padding: 120px 5% 60px !important;
  margin: 0 !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Hero gradient + image; fallback to deep dark when image missing */
  background:
    linear-gradient(
      rgba(10, 9, 7, 0.72),
      rgba(10, 9, 7, 0.52)
    ),
    url('/lamylashxin/images/banners/contact-hero-bg.webp') center / cover no-repeat !important;
  background-color: var(--hb-black-deep) !important;
}

/* SVG grain overlay */
body.item-208 #sp-section-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A06F' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
  pointer-events: none;
}

/* .row and #sp-title: transparent, centred */
body.item-208 #sp-section-1 .row {
  width: 100% !important;
  justify-content: center !important;
  position: relative;
  z-index: 1;
}

body.item-208 #sp-title {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* .sp-column inside #sp-title: flex column, centred */
body.item-208 #sp-title .sp-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* ---- Hero content module ---- */
body.item-208 #mod-custom163 {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.2s both;
}

body.item-208 #mod-custom163 h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  color: var(--hb-cream);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

body.item-208 #mod-custom163 p {
  font-family: var(--hb-font-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(250, 246, 240, 0.85);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---- Breadcrumb: restored, styled for dark hero background ---- */
body.item-208 #sp-section-1 .mod-breadcrumbs__wrapper {
  display: block !important;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

body.item-208 #sp-section-1 .mod-breadcrumbs {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 4px;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item a,
body.item-208 #sp-section-1 .mod-breadcrumbs__item span {
  color: rgba(250, 246, 240, 0.65) !important;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  text-decoration: none;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item a:hover {
  color: var(--hb-rose-gold) !important;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item.active span,
body.item-208 #sp-section-1 .mod-breadcrumbs__item.breadcrumb-item.active span {
  color: var(--hb-cream) !important;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__divider {
  display: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  body.item-208 #sp-section-1 {
    min-height: 50vh !important;
  }
}

@media (max-width: 768px) {
  body.item-208 #sp-section-1 {
    min-height: 45vh !important;
    padding: 100px 5% 50px !important;
  }

  body.item-208 #mod-custom163 h1 {
    font-size: 2.5rem;
  }

  body.item-208 #mod-custom163 p {
    font-size: 1.1rem;
  }
  .trust-w3 .trust-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 80px;
}
body.itemid-132 #sp-position5 .vmproduct.productdetails li a:first-child img {
  height: 300px;
}
body.itemid-132 .vmproduct.productdetails li{text-align: center;}
body.itemid-132 #mod-custom142 {
  min-height: 300px;
  height: 300px;
}
}

@media (max-width: 480px) {
  body.item-208 #mod-custom163 h1 {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Contact Us - Contact Information (mod-custom166, sp-section-2)
   Note: Actual DOM uses #sp-section-2 for the cards position
   ========================================================================== */
body.item-208 #sp-section-2 {
  background: var(--hb-white, #FFFFFF) !important;
  padding: 80px 5% !important;
  margin-top: 0 !important;
  margin-bottom:-80px;
}

body.item-208 #sp-section-2 #sp-position1 {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section titles (shared with form section) */
body.item-208 .hb-section-title {
  font-family: var(--hb-font-display);   /* Cormorant Garamond */
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--hb-black-deep, #0A0907);
  letter-spacing: 0.02em;
}

body.item-208 .hb-section-subtitle {
  text-align: center;
  color: #666;
  font-family: var(--hb-font-body);      /* DM Sans */
  font-size: 1.05rem;
  margin-bottom: 3rem;
}

/* Cards grid */
body.item-208 .hb-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* Contact card */
body.item-208 .hb-contact-card {
  background: var(--hb-cream, #FAF6F0);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid transparent;
}

body.item-208 .hb-contact-card:hover {
  transform: translateY(-8px);
  border-color: var(--hb-rose-gold, #C9A06F);
  box-shadow: 0 20px 40px rgba(201, 160, 111, 0.15);
}

/* Card icon circle */
body.item-208 .hb-card-icon {
  width: 60px;
  height: 60px;
  background: var(--hb-black-deep, #0A0907);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

body.item-208 .hb-contact-card:hover .hb-card-icon {
  background: var(--hb-rose-gold, #C9A06F);
}

body.item-208 .hb-card-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--hb-cream, #FAF6F0);
  transition: fill 0.3s ease;
}

body.item-208 .hb-contact-card:hover .hb-card-icon svg {
  fill: var(--hb-black-deep, #0A0907);
}

/* Card text */
body.item-208 .hb-card-title {
  font-family: var(--hb-font-display);   /* Cormorant Garamond */
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--hb-black-deep, #0A0907);
}

body.item-208 .hb-card-content {
  font-family: var(--hb-font-body);      /* DM Sans */
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

body.item-208 .hb-card-cta {
  display: inline-block;
  font-family: var(--hb-font-body);      /* DM Sans */
  color: var(--hb-rose-gold, #C9A06F);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

body.item-208 .hb-card-cta:hover {
  color: var(--hb-black-deep, #0A0907);
}

/* Responsive: Cards */
@media (max-width: 1024px) {
  body.item-208 .hb-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body.item-208 #sp-section-2 {
    padding: 60px 5% !important;
  }

  body.item-208 .hb-section-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  body.item-208 .hb-cards-grid {
    grid-template-columns: 1fr;
  }

  body.item-208 .hb-contact-card {
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   Contact Us - Send Us a Message (mod-custom167, sp-section-4)
   ========================================================================== */
body.item-208 #sp-section-4 {
  background: var(--hb-cream, #FAF6F0) !important;
  padding: 80px 5% !important;
}

body.item-208 #sp-section-4 #sp-position2 {
  max-width: 1200px;
  margin: 0 auto;
}

/* Form container (white card) */
body.item-208 .hb-form-container {
  max-width: 700px;
  margin: 0 auto;
  background: var(--hb-white, #FFFFFF);
  padding: 3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

/* Form row (2-column grid) */
body.item-208 .hb-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 0;
}

/* Form group */
body.item-208 .hb-form-group {
  margin-bottom: 1.5rem;
}

body.item-208 .hb-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  font-size: 0.95rem;
}

body.item-208 .hb-required {
  color: #c0392b;
}

/* Form inputs */
body.item-208 .hb-form-group input,
body.item-208 .hb-form-group select,
body.item-208 .hb-form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  font-family: var(--hb-font-body);
  font-size: 1rem;
  transition: all 0.3s ease;
  background: var(--hb-cream, #FAF6F0);
  color: var(--hb-black-deep, #0A0907);
}

body.item-208 .hb-form-group input:focus,
body.item-208 .hb-form-group select:focus,
body.item-208 .hb-form-group textarea:focus {
  outline: none;
  border-color: var(--hb-rose-gold, #C9A06F);
  background: var(--hb-white, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.1);
}

body.item-208 .hb-form-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* Select dropdown arrow */
body.item-208 .hb-form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230A0907' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Submit button */
body.item-208 .hb-submit-btn {
  width: 100%;
  padding: 1.2rem 2rem;
  background: var(--hb-black-deep, #0A0907);
  color: var(--hb-cream, #FAF6F0);
  border: none;
  font-family: var(--hb-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

body.item-208 .hb-submit-btn:hover {
  background: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-black-deep, #0A0907);
  transform: translateY(-2px);
}

/* Responsive: Form */
@media (max-width: 768px) {
  body.item-208 #sp-section-4 {
    padding: 60px 5% !important;
  }

  body.item-208 .hb-form-row {
    grid-template-columns: 1fr;
  }

  body.item-208 .hb-form-container {
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   Contact Us - Business Hours
   ========================================================================== */
.contact-business-hours {
    background: var(--hb-black-deep, #0A0907);
    color: var(--hb-cream, #FAF6F0);
    text-align: center;
    padding: 60px 5%;
}

.contact-hours-title {
    font-family: var(--hb-font-display, 'Georgia', serif);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--hb-rose-gold, #C9A06F);
}

.contact-hours-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.contact-hours-item {
    text-align: center;
}

.contact-hours-day {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--hb-cream, #FAF6F0);
}

.contact-hours-time {
    color: rgba(250, 246, 240, 0.7);
    font-size: 1rem;
}

.contact-hours-time.highlight {
    color: var(--hb-rose-gold, #C9A06F);
    background: transparent !important;
    padding: 0 !important;
}

/* Responsive: Business Hours */
@media (max-width: 768px) {
    .contact-business-hours {
        padding: 48px 5%;
    }

    .contact-hours-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    .contact-hours-grid {
        gap: 2rem;
    }
}

/* ==========================================================================
   Contact Us - Full Width Background for Business Hours (sp-section-5)
   ========================================================================== */
body.item-208 #sp-section-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: var(--hb-black-deep, #0A0907) !important;
}

body.item-208 #sp-section-5 .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Hide page-header h1 on Contact Us page */
body.item-208 #sp-main-body #sp-component .page-header h1 {
    display: none !important;
}

/* Hide default Joomla contact details row */
body.item-208 #sp-main-body .com-contact .row { display: none !important; }

/* ==========================================================================
   Contact Us - Send Us a Message Form Section  (itemid-135)
   ========================================================================== */

/* Section wrapper */
body.item-208 .lf-contact-form-section {
    background: #FAF6F0;
    text-align: center;
}

/* Section title */
body.item-208 .lf-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #0A0907;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

/* Section subtitle */
body.item-208 .lf-section-subtitle {
    color: #666;
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

/* Form card container */
body.item-208 .lf-form-container {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    text-align: left;
}

/* Two-column row */
body.item-208 .lf-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.item-208 .lf-form-group {
    min-width: 0;
    width: 100%;
}

/* Individual form group */
body.item-208 .lf-form-group {
    margin-bottom: 1.5rem;
}

body.item-208 .lf-form-group--full {
    grid-column: 1 / -1;
}

/* Labels */
body.item-208 .lf-form-container label,
body.item-208 .lf-form-container .control-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #0A0907;
    font-size: 0.95rem;
}

/* Inputs, selects, textareas */
body.item-208 .lf-form-container input[type="text"],
body.item-208 .lf-form-container input[type="email"],
body.item-208 .lf-form-container input[type="tel"],
body.item-208 .lf-form-container input[type="url"],
body.item-208 .lf-form-container select,
body.item-208 .lf-form-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.9rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
    background: #FAF6F0;
    color: #0A0907;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

body.item-208 .lf-form-container input[type="text"]:focus,
body.item-208 .lf-form-container input[type="email"]:focus,
body.item-208 .lf-form-container input[type="tel"]:focus,
body.item-208 .lf-form-container input[type="url"]:focus,
body.item-208 .lf-form-container select:focus,
body.item-208 .lf-form-container textarea:focus {
    outline: none;
    border-color: #C9A06F;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.12);
}

/* Textarea height */
body.item-208 .lf-form-container textarea {
    min-height: 150px;
    resize: vertical;
}

/* Remove Bootstrap control-group / controls wrapper padding */
body.item-208 .lf-form-container .control-group {
    margin-bottom: 0;
}

body.item-208 .lf-form-container .control-group .control-label {
    float: none;
    width: auto;
    text-align: left;
    padding-right: 0;
}

body.item-208 .lf-form-container .control-group .controls {
    margin-left: 0;
}

/* Submit area */
body.item-208 .lf-form-submit {
    margin-top: 0.5rem;
}

/* Submit button */
body.item-208 .lf-submit-btn {
    width: 100%;
    padding: 1.1rem 2rem;
    background: #0A0907;
    color: #FAF6F0;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

body.item-208 .lf-submit-btn:hover {
    background: #C9A06F;
    color: #0A0907;
    transform: translateY(-2px);
}

/* Required asterisk color */
body.item-208 .lf-form-container .required,
body.item-208 .lf-form-container .star {
    color: #b98350;
}

/* Responsive */
@media (max-width: 768px) {
    body.item-208 .lf-contact-form-section {
        padding: 50px 5% 60px;
    }

    body.item-208 .lf-section-title {
        font-size: 2rem;
    }

    body.item-208 .lf-form-container {
        padding: 2rem 1.5rem;
    }

    body.item-208 .lf-form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Contact Us - Two-column Inquiry + Form Layout (itemid-135, 2026-08-20)
   ========================================================================== */

/* Grid: Inquiry left (5 cols), Form right (7 cols) */
body.item-208 .lf-contact-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 2rem;
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

/* ---- LEFT: Inquiry side ---- */
body.item-208 .lf-contact-inquiry {
    background: #ffffff;
    padding: 3rem 2.5rem;
    border: 1px solid rgba(201, 160, 111, 0.18);
    box-shadow: 0 10px 40px rgba(10, 9, 7, 0.05);
    display: flex;
    flex-direction: column;
}

body.item-208 .lf-inquiry-tag {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C9A06F;
    margin-bottom: 0.75rem;
}

body.item-208 .lf-inquiry-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.15;
    color: #0A0907;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

body.item-208 .lf-inquiry-desc {
    color: #5a5046;
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0 0 1.5rem 0;
}

body.item-208 .lf-inquiry-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
body.item-208 .lf-inquiry-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0;
    color: #2b2620;
    font-size: 0.95rem;
    line-height: 1.5;
}
body.item-208 .lf-inquiry-bullets li i {
    color: #C9A06F;
    font-size: 0.95rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

body.item-208 .lf-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(10, 9, 7, 0.86);
    border: 1px solid rgba(201, 160, 111, 0.5);
    color: #EDD9BE;
    padding: 0.85rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    align-self: flex-start;
    box-shadow: 0 6px 18px rgba(10, 9, 7, 0.20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.item-208 .lf-whatsapp-btn i {
    font-size: 1.15rem;
    color: #25D366;          /* brand green kept only on the icon */
}
body.item-208 .lf-whatsapp-btn:hover,
body.item-208 .lf-whatsapp-btn:focus-visible {
    background: rgba(10, 9, 7, 0.92);
    border-color: #C9A06F;
    color: #EDD9BE;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10, 9, 7, 0.26);
    text-decoration: none;
}
body.item-208 .lf-whatsapp-btn:hover i,
body.item-208 .lf-whatsapp-btn:focus-visible i {
    color: #25D366;
}
body.item-208 .lf-whatsapp-btn:focus-visible {
    outline: 2px solid #C9A06F;
    outline-offset: 2px;
}

body.item-208 .lf-inquiry-note {
    color: #8b8278;
    font-size: 0.85rem;
    margin: 1.2rem 0 0 0;
}
body.item-208 .lf-inquiry-note a {
    color: #C9A06F;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 160, 111, 0.35);
}
body.item-208 .lf-inquiry-note a:hover {
    color: #0A0907;
    border-bottom-color: #0A0907;
}

/* ---- RIGHT: Form card ---- */
body.item-208 .lf-form-container {
    background: #ffffff;
    padding: 3rem;
    border: 1px solid rgba(201, 160, 111, 0.18);
    box-shadow: 0 10px 40px rgba(10, 9, 7, 0.05);
    max-width: none;
    margin: 0;
}

/* Convert the old inline section-title into a card header on right column */
body.item-208 .lf-contact-grid .lf-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #0A0907;
    margin: 0 0 0.35rem 0;
    text-align: left;
    letter-spacing: -0.005em;
}
body.item-208 .lf-contact-grid .lf-section-subtitle {
    color: #5a5046;
    font-size: 0.95rem;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

/* Form row spacing in the new card */
body.item-208 .lf-contact-grid .lf-form-row {
    margin-bottom: 0;
}
body.item-208 .lf-contact-grid .lf-form-row + .lf-form-row,
body.item-208 .lf-contact-grid .lf-form-row + .lf-form-group--full,
body.item-208 .lf-contact-grid .lf-form-group--full + .lf-form-row {
    margin-top: 1.1rem;
}

body.item-208 .lf-contact-grid .lf-form-group {
    margin-bottom: 0;
}

/* Privacy note under submit */
body.item-208 .lf-form-privacy {
    color: #8b8278;
    font-size: 0.8rem;
    text-align: center;
    margin: 0.85rem 0 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    body.item-208 .lf-contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    body.item-208 .lf-inquiry-title {
        font-size: 2.1rem;
    }
}

@media (max-width: 768px) {
    body.item-208 .lf-contact-inquiry {
        padding: 2.25rem 1.5rem;
    }
    body.item-208 .lf-form-container {
        padding: 2rem 1.5rem;
    }
    body.item-208 .lf-inquiry-title {
        font-size: 1.85rem;
    }
}

.itemid-132 #sp-section-1{margin-bottom:-20px;}
.view-category .orderby-displaynumber{display:none;}
.view-category #sp-main-body #sp-component h1{display:none;}

/* =========================================
   CATEGORY PAGE — PAGINATION & PRODUCTS
   Scope: VirtueMart category view (itemid-143)
========================================= */

/* ---- Products Grid (4 columns) ---- */
.view-category .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ---- Product Card ---- */
.view-category .product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.view-category .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* ---- Product Image ---- */
.view-category .product-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.view-category .product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.view-category .product-card:hover .product-card-img {
    transform: scale(1.05);
}

/* ---- Product Badge ---- */
.view-category .product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e8a4b4;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ---- Product Body ---- */
.view-category .product-card-body {
    padding: 16px;
}

.view-category .product-card-category {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.view-category .product-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.view-category .product-card-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size:0.8em;
}

.view-category .product-card-title a:hover {
    color: #C9A06F;
}

.view-category .product-card-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ---- Product Footer ---- */
.view-category .product-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.view-category .product-card-price {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.view-category .product-card-price .price-per {
    font-size: 12px;
    font-weight: 400;
    color: #888;
}

.view-category .product-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #C9A06F;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-category .product-card-link:hover {
    color: #0A0907;
}

.view-category .product-card-link svg {
    transition: transform 0.3s ease;
}

.view-category .product-card-link:hover svg {
    transform: translateX(4px);
}

/* ---- Orderby Display Number ---- */
.view-category .orderby-displaynumber {
    display:none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---- Products Per Page Selector ---- */
.view-category .vm-products-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-category .vm-products-per-page label {
    font-size: 14px;
    color: #666;
}

.view-category .vm-products-per-page select#limit {
    padding: 8px 32px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.view-category .vm-products-per-page select#limit:hover {
    border-color: #C9A06F;
}

.view-category .vm-products-per-page select#limit:focus {
    outline: none;
    border-color: #C9A06F;
    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.15);
}

/* ---- Pagination (Reference: lamylash-category-lash-clusters.html .pagination) ---- */
.view-category .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 60px;
    list-style: none;
    padding: 0;
}

.view-category .pagination li {
    display: inline-block;
}

.view-category .pagination-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6B5E50);
    border: 1px solid var(--border-light, #E8DDD0);
    background: var(--white, #FFFFFF);
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.view-category .pagination-btn:hover {
    border-color: var(--rose-gold, #C9A06F);
    color: var(--rose-gold, #C9A06F);
}

.view-category .pagination-btn.active {
    background: var(--rose-gold, #C9A06F);
    border-color: var(--rose-gold, #C9A06F);
    color: var(--white, #FFFFFF);
}

.view-category .pagination-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* VirtueMart default pagination class overrides */
.view-category .pagination li a,
.view-category .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-light, #E8DDD0);
    border-radius: 4px;
    color: var(--text-secondary, #6B5E50);
    background: var(--white, #FFFFFF);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.view-category .pagination li a:hover {
    border-color: var(--rose-gold, #C9A06F);
    color: var(--rose-gold, #C9A06F);
    background: rgba(201, 160, 111, 0.08);
}

.view-category .pagination li.active a,
.view-category .pagination li.active span,
.view-category .pagination li.current a,
.view-category .pagination li.current span {
    background: var(--rose-gold, #C9A06F);
    border-color: var(--rose-gold, #C9A06F);
    color: var(--white, #FFFFFF);
}

/* Pagination container */
.view-category .orderby-displaynumber {
    margin-top: 40px;
    padding-top: 24px;
}

.view-category .vm-page-counter {
    display: none;
}

/* Responsive: Products Grid */
@media (max-width: 1200px) {
    .view-category .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .view-category .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .view-category .product-card-body {
        padding: 12px;
    }

    .view-category .product-card-title {
        font-size: 14px;
    }

    .view-category .product-card-price {
        font-size: 16px;
    }

    .view-category .orderby-displaynumber {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .view-category .products-grid {
        grid-template-columns: 1fr;
    }

    .view-category .pagination li a,
    .view-category .pagination li span {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* =========================================
   LASH REMOVER PAGE — BANNER HEADER STYLES
   Reference: lamylash-category-lash-clusters.html .page-header-inner
   Page: itemid-144 lash-remover
   Scope: body.itemid-144 #sp-section-1 #sp-title
   Note: Copied from itemid-138 (bond-and-seal) banner styles
========================================= */

/* ---- Page Header Container ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header {
  padding: 140px 0 60px;
  background: var(--hb-cream);
  border-bottom: 1px solid #E8DDD0;
}

/* ---- Inner Layout: Flexbox two-column ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

/* ---- Left: Text Content ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header-content {
  flex: 1;
  max-width: 600px;
}

/* ---- Breadcrumb ---- */
body.itemid-144 .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

body.itemid-144 .breadcrumb a {
  font-size: 13px;
  color: #9B8E7E;
  transition: color 0.25s;
  text-decoration: none;
}

body.itemid-144 .breadcrumb a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-144 .breadcrumb span {
  font-size: 13px;
  color: #C4B5A5;
}

body.itemid-144 .breadcrumb-current {
  font-size: 13px;
  color: var(--hb-rose-gold, #C9A06F);
}

/* ---- H1 Title ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header-inner h1,
body.itemid-144 #sp-section-1 #sp-title .page-header h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--hb-black-deep);
  margin: 0 0 12px 0;
}

body.itemid-144 #sp-section-1 #sp-title .page-header-inner h1 em,
body.itemid-144 #sp-section-1 #sp-title .page-header h1 em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* ---- Description ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header-inner p,
body.itemid-144 #sp-section-1 #sp-title .page-header p {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0;
  max-width: 500px;
}

/* ---- Right: Meta Info ---- */
body.itemid-144 #sp-section-1 #sp-title .page-header-meta {
  text-align: right;
  flex-shrink: 0;
}

body.itemid-144 #sp-section-1 #sp-title .page-header-meta span {
  display: block;
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 4px;
}

body.itemid-144 #sp-section-1 #sp-title .page-header-meta strong {
  font-size: 28px;
  font-family: var(--hb-font-display);
  color: var(--hb-rose-gold);
  font-weight: 400;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-144 #sp-section-1 #sp-title .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  body.itemid-144 #sp-section-1 #sp-title .page-header-meta {
    text-align: left;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-144 #sp-section-1 #sp-title .page-header {
    padding: 120px 0 40px;
  }

  body.itemid-144 #sp-section-1 #sp-title .page-header-inner h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* =========================================
   LASH REMOVER PAGE — PRODUCTS SECTION STYLES
   Reference: lamylash-category-lash-clusters.html .products-section
   Page: itemid-144 lash-remover
   Scope: body.itemid-144 #sp-main-body
   Note: Copied from itemid-138 (bond-and-seal) products styles
========================================= */

/* ---- Main Body Container ---- */
body.itemid-144 #sp-main-body {
  padding: 0;
  background: var(--hb-cream);
}

/* ---- Products Section ---- */
body.itemid-144 #sp-main-body .products-section {
  padding: 60px 0 120px;
  background: var(--hb-cream);
}

/* ---- Products Grid Container ---- */
body.itemid-144 #sp-main-body .browse-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- Products Grid ---- */
body.itemid-144 #sp-main-body .products-grid,
body.itemid-144 #sp-main-body .vm-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Product Card ---- */
body.itemid-144 #sp-main-body .product-card,
body.itemid-144 #sp-main-body .Product {
  background: var(--hb-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s var(--hb-transition), box-shadow 0.4s var(--hb-transition);
}

body.itemid-144 #sp-main-body .product-card:hover,
body.itemid-144 #sp-main-body .Product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(10, 9, 7, 0.12);
}

/* ---- Product Card Image ---- */
body.itemid-144 #sp-main-body .product-card-image,
body.itemid-144 #sp-main-body .browseProductImage {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--hb-cream);
}

body.itemid-144 #sp-main-body .product-card-image img,
body.itemid-144 #sp-main-body .browseProductImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hb-transition);
}

body.itemid-144 #sp-main-body .product-card:hover .product-card-image img,
body.itemid-144 #sp-main-body .Product:hover .browseProductImage img {
  transform: scale(1.08);
}

/* ---- Product Card Badge ---- */
body.itemid-144 #sp-main-body .product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--hb-rose-gold);
  color: #fff;
}

body.itemid-144 #sp-main-body .product-card-badge.new {
  background: #e8a4b4;
}

/* ---- Product Card Actions ---- */
body.itemid-144 #sp-main-body .product-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.itemid-144 #sp-main-body .product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateY(0);
}

body.itemid-144 #sp-main-body .product-card-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hb-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}

body.itemid-144 #sp-main-body .product-card-action-btn:hover {
  background: var(--hb-rose-gold);
  color: #fff;
  transform: scale(1.1);
}

/* ---- Product Card Body ---- */
body.itemid-144 #sp-main-body .product-card-body {
  padding: 20px;
}

/* ---- Product Card Category ---- */
body.itemid-144 #sp-main-body .product-card-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9B8E7E;
  margin-bottom: 8px;
}

/* ---- Product Card Title ---- */
body.itemid-144 #sp-main-body .product-card-title,
body.itemid-144 #sp-main-body .product-title {
  font-family: var(--hb-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--hb-black-deep);
  line-height: 1.4;
}

/* ---- Product Card Description ---- */
body.itemid-144 #sp-main-body .product-card-desc {
  font-size: 0.875rem;
  color: #6B5E50;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ---- Product Card Footer ---- */
body.itemid-144 #sp-main-body .product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  display:none;
  }
body.itemid-144 #sp-main-body #sp-component{margin-top:50px;}
/* ---- Product Card Price ---- */
body.itemid-144 #sp-main-body .product-card-price,
body.itemid-144 #sp-main-body .Prices dl {
  font-family: var(--hb-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hb-rose-gold);
  margin: 0;
}

body.itemid-144 #sp-main-body .product-card-price span {
  color: #9B8E7E;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 6px;
}

/* ---- Product Card MOQ ---- */
body.itemid-144 #sp-main-body .product-card-moq {
  font-size: 0.8rem;
  color: #9B8E7E;
  margin-top: 4px;
}

/* ---- Product Card Link ---- */
body.itemid-144 #sp-main-body .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hb-rose-gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

body.itemid-144 #sp-main-body .product-card-link:hover {
  color: var(--hb-black-deep);
}

/* ---- Pagination ---- */
body.itemid-144 #sp-main-body .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
  list-style: none;
  padding: 0;
}

body.itemid-144 #sp-main-body .pagination-btn,
body.itemid-144 #sp-main-body .pagination .pagenav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hb-text-secondary);
  border: 1px solid var(--hb-border-light);
  background: var(--hb-white);
  text-decoration: none;
  transition: all 0.25s ease;
}

body.itemid-144 #sp-main-body .pagination-btn:hover,
body.itemid-144 #sp-main-body .pagination .pagenav:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  background: rgba(201, 160, 111, 0.08);
}

body.itemid-144 #sp-main-body .pagination-btn.active,
body.itemid-144 #sp-main-body .pagination .pagenav.current {
  background: var(--hb-rose-gold);
  border-color: var(--hb-rose-gold);
  color: var(--hb-white);
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-144 #sp-main-body .products-grid,
  body.itemid-144 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-144 #sp-main-body .products-grid,
  body.itemid-144 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.itemid-144 #sp-main-body .browse-view {
    padding: 0 20px;
  }

  body.itemid-144 #sp-main-body .product-card-body {
    padding: 16px;
  }

  body.itemid-144 #sp-main-body .product-card-title,
  body.itemid-144 #sp-main-body .product-title {
    font-size: 1rem;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.itemid-144 #sp-main-body .products-grid,
  body.itemid-144 #sp-main-body .vm-products-grid {
    grid-template-columns: 1fr;
  }

  body.itemid-144 #sp-main-body .products-section {
    padding: 40px 0 80px;
  }
}

.vm-products-per-page{display:none;}
.view-category #sp-section-4{display:none;}

/* =========================================
   LASH TWEEZERS PAGE — BANNER HEADER STYLES
   Reference: lamylash-category-lash-clusters.html .page-header-inner
   Page: itemid-142 lash-tweezers
   Scope: body.itemid-142 #sp-section-1 #sp-title
   Note: Copied from itemid-138 (bond-and-seal) banner styles
========================================= */

/* ---- Page Header Container ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header {
  padding: 140px 0 60px;
  background: var(--hb-cream);
  border-bottom: 1px solid #E8DDD0;
}

/* ---- Inner Layout: Flexbox two-column ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* ---- Left: Text Content ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header-content {
  flex: 1;
  max-width: 600px;
}

/* ---- Breadcrumb ---- */
body.itemid-142 .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

body.itemid-142 .breadcrumb a {
  font-size: 13px;
  color: #9B8E7E;
  transition: color 0.25s;
  text-decoration: none;
}

body.itemid-142 .breadcrumb a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

body.itemid-142 .breadcrumb span {
  font-size: 13px;
  color: #C4B5A5;
}

body.itemid-142 .breadcrumb-current {
  font-size: 13px;
  color: var(--hb-rose-gold, #C9A06F);
}

/* ---- H1 Title ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header-inner h1,
body.itemid-142 #sp-section-1 #sp-title .page-header h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--hb-black-deep);
  margin: 0 0 12px 0;
}

body.itemid-142 #sp-section-1 #sp-title .page-header-inner h1 em,
body.itemid-142 #sp-section-1 #sp-title .page-header h1 em {
  font-style: italic;
  color: var(--hb-rose-gold);
}

/* ---- Description ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header-inner p,
body.itemid-142 #sp-section-1 #sp-title .page-header p {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ---- Right: Meta Info ---- */
body.itemid-142 #sp-section-1 #sp-title .page-header-meta {
  text-align: right;
  flex-shrink: 0;
}

body.itemid-142 #sp-section-1 #sp-title .page-header-meta span {
  display: block;
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 4px;
}

body.itemid-142 #sp-section-1 #sp-title .page-header-meta strong {
  font-size: 28px;
  font-family: var(--hb-font-display);
  color: var(--hb-rose-gold);
  font-weight: 400;
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.itemid-142 #sp-section-1 #sp-title .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  body.itemid-142 #sp-section-1 #sp-title .page-header-meta {
    text-align: left;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.itemid-142 #sp-section-1 #sp-title .page-header {
    padding: 120px 0 40px;
  }

  body.itemid-142 #sp-section-1 #sp-title .page-header-inner h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* =========================================
   LASH TWEEZERS PAGE — PRODUCTS SECTION STYLES
   Reference: lamylash-category-lash-clusters.html .products-section
   Page: itemid-142 lash-tweezers
   Scope: body.itemid-142 #sp-main-body
   Note: Copied from itemid-138 (bond-and-seal) products styles
========================================= */

/* ---- Main Body Container ---- */
body.itemid-142 #sp-main-body {
  padding: 0;
  background: var(--hb-cream);
}

/* ---- Products Section ---- */
body.itemid-142 #sp-main-body .products-section {
  padding: 60px 0 120px;
  background: var(--hb-cream);
}

/* ---- Products Grid Container ---- */
body.itemid-142 #sp-main-body .browse-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- Products Grid ---- */
body.itemid-142 #sp-main-body .products-grid,
body.itemid-142 #sp-main-body .vm-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Product Card ---- */
body.itemid-142 #sp-main-body .product-card,
body.itemid-142 #sp-main-body .Product {
  background: var(--hb-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s var(--hb-transition), box-shadow 0.4s var(--hb-transition);
}

body.itemid-142 #sp-main-body .product-card:hover,
body.itemid-142 #sp-main-body .Product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(10, 9, 7, 0.12);
}

/* ---- Product Card Image ---- */
body.itemid-142 #sp-main-body .product-card-image,
body.itemid-142 #sp-main-body .browseProductImage {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--hb-cream);
}

body.itemid-142 #sp-main-body .product-card-image img,
body.itemid-142 #sp-main-body .browseProductImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hb-transition);
}

body.itemid-142 #sp-main-body .product-card:hover .product-card-image img,
body.itemid-142 #sp-main-body .Product:hover .browseProductImage img {
  transform: scale(1.08);
}

/* ---- Product Card Badge ---- */
body.itemid-142 #sp-main-body .product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--hb-rose-gold);
  color: var(--hb-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
}

body.itemid-142 #sp-main-body .product-card-badge.new {
  background: var(--hb-black-deep);
}

/* ---- Product Card Actions ---- */
body.itemid-142 #sp-main-body .product-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.3s var(--hb-transition);
}

body.itemid-142 #sp-main-body .product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Product Card Body ---- */
body.itemid-142 #sp-main-body .product-card-body {
  padding: 20px;
}

/* ---- Product Category ---- */
body.itemid-142 #sp-main-body .product-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hb-rose-gold);
  margin-bottom: 8px;
}

/* ---- Product Title ---- */
body.itemid-142 #sp-main-body .product-card-title,
body.itemid-142 #sp-main-body .product-title {
  font-family: var(--hb-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* ---- Product Description ---- */
body.itemid-142 #sp-main-body .product-card-desc {
  font-size: 13px;
  color: #9B8E7E;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ---- Product Card Footer ---- */
body.itemid-142 #sp-main-body .product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #F0E8DC;
  display:none;
}
body.itemid-142 #sp-main-body #sp-component {margin-top:50px;}
/* ---- Product Price ---- */
body.itemid-142 #sp-main-body .product-card-price,
body.itemid-142 #sp-main-body .Prices dl {
  font-family: var(--hb-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold);
}

body.itemid-142 #sp-main-body .product-card-price span {
  font-size: 12px;
  font-weight: 400;
  color: #9B8E7E;
  font-family: var(--hb-font-body);
}

/* ---- MOQ ---- */
body.itemid-142 #sp-main-body .product-card-moq {
  font-size: 11px;
  color: #C4B5A5;
}

/* ---- Product Link ---- */
body.itemid-142 #sp-main-body .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  transition: color 0.25s;
}

body.itemid-142 #sp-main-body .product-card-link:hover {
  color: var(--hb-rose-gold);
}

/* ---- Pagination ---- */
body.itemid-142 #sp-main-body .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

body.itemid-142 #sp-main-body .pagination-btn,
body.itemid-142 #sp-main-body .pagination .pagenav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #6B5E50;
  border: 1px solid #E8DDD0;
  background: var(--hb-white);
  transition: all 0.25s;
}

body.itemid-142 #sp-main-body .pagination-btn:hover,
body.itemid-142 #sp-main-body .pagination .pagenav:hover {
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
}

body.itemid-142 #sp-main-body .pagination-btn.active,
body.itemid-142 #sp-main-body .pagination .pagenav.current {
  background: var(--hb-rose-gold);
  border-color: var(--hb-rose-gold);
  color: var(--hb-white);
}

/* ---- Responsive: Tablet (≤ 1200px) ---- */
@media (max-width: 1200px) {
  body.itemid-142 #sp-main-body .products-grid,
  body.itemid-142 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Responsive: Tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  body.itemid-142 #sp-main-body .products-grid,
  body.itemid-142 #sp-main-body .vm-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Responsive: Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
  body.itemid-142 #sp-main-body .browse-view {
    padding: 0 20px;
  }

  body.itemid-142 #sp-main-body .products-grid,
  body.itemid-142 #sp-main-body .vm-products-grid {
    grid-template-columns: 1fr;
  }

  body.itemid-142 #sp-main-body .products-section {
    padding: 40px 0 80px;
  }
}

/* =========================================
   PRODUCT DETAILS PAGE — MAIN CONTENT
   Reference: lamylash-product-detail.html .product-detail
   Scope: body.view-productdetails #sp-main-body
========================================= */

/* ---- Main Body Container ---- */
body.view-productdetails #sp-main-body {
  padding: 0;
  background: var(--hb-white, #FFFFFF);
}

/* ---- Product Details View ---- */
body.view-productdetails .productdetails-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}

/* ---- Product Container (2-column grid) ---- */
body.view-productdetails .productdetails-view .vm-product-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

/* ---- Product Gallery (Thumbnails Left + Main Right) ---- */
body.view-productdetails .productdetails-view .product-gallery {
  display: flex;
  gap: 20px;
}

/* ---- Thumbnails Column (Left Side) ---- */
body.view-productdetails .productdetails-view .gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-item {
  flex-shrink: 0;
}

body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link:hover,
body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link.active {
  border-color: var(--hb-rose-gold);
}

body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Main Image (Right Side) ---- */
body.view-productdetails .productdetails-view .gallery-main {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hb-cream);
}

body.view-productdetails .productdetails-view .gallery-main img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

/* ---- Legacy: Main Image (fallback) ---- */
body.view-productdetails .productdetails-view .vm-product-media-container .main-image {
  border-radius: 12px;
  overflow: hidden;
  background: var(--hb-cream);
}

body.view-productdetails .productdetails-view .vm-product-media-container .main-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

/* ---- Product Details (Right Side) ---- */
body.view-productdetails .productdetails-view .vm-product-details-container {
  display: flex;
  flex-direction: column;
}

/* ---- Product Category Label ---- */
body.view-productdetails .productdetails-view .vm-product-details-container .product-category {
  font-size: 14px;
  color: var(--hb-rose-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* ---- Product Title ---- */
body.view-productdetails .productdetails-view .vm-product-details-container .vm-page-title {
  font-family: var(--hb-font-display);
  font-size: 2em;
  font-weight: 600;
  color: var(--hb-black-deep);
  margin: 0 0 16px 0;
  line-height: 1.2;
  border: none;
  padding: 0;
}

/* ---- Product Specs List (replaces short-description br text) ---- */
body.view-productdetails .productdetails-view .vm-product-details-container .product-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid rgba(201, 160, 111, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: #FAF9F7;
  font-family: 'DM Sans', sans-serif;
}
.product-specs .spec-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(201, 160, 111, 0.08);
  align-items: baseline;
}
.product-specs .spec-row:last-child {
  border-bottom: none;
}
.product-specs .spec-label {
  font-size: 12px;
  font-weight: 500;
  color: #A08C75;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}
.product-specs .spec-value {
  font-size: 14px;
  font-weight: 400;
  color: #0A0907;
  line-height: 1.5;
  margin: 0;
}

/* Mobile: single column specs */
@media (max-width: 768px) {
  body.view-productdetails .productdetails-view .vm-product-details-container .product-specs {
    grid-template-columns: 1fr;
  }
}

/* ---- Product Details Table ---- */
body.view-productdetails .productdetails-view .product-details-table {
  margin-bottom: 32px;
}

body.view-productdetails .productdetails-view .product-details-table table {
  width: 100%;
  border-collapse: collapse;
}

body.view-productdetails .productdetails-view .product-details-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0E8DC;
  font-size: 14px;
}

body.view-productdetails .productdetails-view .product-details-table td:first-child {
  font-weight: 600;
  color: #6B5E50;
  width: 40%;
}

body.view-productdetails .productdetails-view .product-details-table td:last-child {
  color: var(--hb-black-deep);
}

/* ---- MOQ Info ---- */
body.view-productdetails .productdetails-view .moq-info {
  background: var(--hb-cream);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 32px;
}

body.view-productdetails .productdetails-view .moq-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--hb-black-deep);
}

body.view-productdetails .productdetails-view .moq-info p {
  font-size: 14px;
  color: #6B5E50;
}

/* ---- Product Navigation ---- */
body.view-productdetails .productdetails-view .product-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid #E8DDD0;
  margin-top: 40px;
}

body.view-productdetails .productdetails-view .product-navigation a {
  font-size: 14px;
  font-weight: 600;
  color: #6B5E50;
  transition: color 0.25s;
}

body.view-productdetails .productdetails-view .product-navigation a:hover {
  color: var(--hb-rose-gold);
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.view-productdetails .productdetails-view .vm-product-container {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: -5px;
  }
  
  body.view-productdetails .productdetails-view .vm-product-details-container .vm-page-title {
    font-size: 22px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.view-productdetails .productdetails-view {
    padding: 40px 20px;
  }

  body.view-productdetails .productdetails-view .vm-page-title {
    font-size: 28px;
  }
  
  /* Mobile: Thumbnails on bottom, horizontal scroll */
  body.view-productdetails .productdetails-view .product-gallery {
    flex-direction: column-reverse;
  }
  
  body.view-productdetails .productdetails-view .gallery-thumbnails {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
  }
  
  body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link {
    width: 60px;
    height: 60px;
  }
  
  body.view-productdetails .productdetails-view .gallery-main img {
    height: 350px;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  body.view-productdetails .productdetails-view .vm-page-title {
    font-size: 24px;
  }
  
  body.view-productdetails .productdetails-view .gallery-main img {
    height: 300px;
  }
  
  body.view-productdetails .productdetails-view .gallery-thumbnails .vm-thumb-link {
    width: 50px;
    height: 50px;
  }
}

/* ---- Related Products Section ---- */
body.view-productdetails .product-related-products {
  padding: 80px 24px;
  background: var(--hb-white, #FFFFFF);
}

/* ---- Related Products Container ---- */
body.view-productdetails .product-related-products .related-products-grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Section Title ---- */
body.view-productdetails .product-related-products .vm-section-title {
  font-family: var(--hb-font-display);
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  color: var(--hb-black-deep);
  margin-bottom: 48px;
  padding: 0;
  border: none;
}

/* ---- Products Grid (4 columns) ---- */
body.view-productdetails .product-related-products .related-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Product Card ---- */
body.view-productdetails .product-related-products .related-product-card {
  background: var(--hb-white, #FFFFFF);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

body.view-productdetails .product-related-products .related-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* ---- Product Image ---- */
body.view-productdetails .product-related-products .related-product-card .vm-product-media-container {
  position: relative;
  overflow: hidden;
}

body.view-productdetails .product-related-products .related-product-card .vm-product-media-container img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

body.view-productdetails .product-related-products .related-product-card:hover .vm-product-media-container img {
  transform: scale(1.05);
}

/* ---- Card Body (Title + Price) ---- */
body.view-productdetails .product-related-products .related-product-card .related-card-body {
  padding: 20px;
  text-align: center;
}

/* ---- Product Title ---- */
body.view-productdetails .product-related-products .related-product-card .related-card-body h4,
body.view-productdetails .product-related-products .related-product-card .product-title {
  font-family: var(--hb-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--hb-black-deep);
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.3;
}

body.view-productdetails .product-related-products .related-product-card .product-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

body.view-productdetails .product-related-products .related-product-card .product-title a:hover {
  color: var(--hb-rose-gold);
}

/* ---- Product Price ---- */
body.view-productdetails .product-related-products .related-product-card .related-card-body p,
body.view-productdetails .product-related-products .related-product-card .product-price {
  font-size: 14px;
  color: var(--hb-rose-gold);
  text-align: center;
  margin: 0;
}

/* ---- Product Description ---- */
body.view-productdetails .product-related-products .related-product-card .product_s_desc {
  padding: 0 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--hb-gray, #6B5E50);
  line-height: 1.5;
}

/* ---- Add to Cart Button ---- */
body.view-productdetails .product-related-products .related-product-card .vm3pr-related {
  padding: 0 20px 20px;
}

body.view-productdetails .product-related-products .related-product-card .vm3pr-related .add-to-cart {
  width: 100%;
  padding: 12px 20px;
  background: var(--hb-black-deep);
  color: var(--hb-white);
  border: none;
  border-radius: 6px;
  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.view-productdetails .product-related-products .related-product-card .vm3pr-related .add-to-cart:hover {
  background: var(--hb-rose-gold);
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  body.view-productdetails .product-related-products .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  body.view-productdetails .product-related-products {
    padding: 60px 24px;
  }

  body.view-productdetails .product-related-products .vm-section-title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  body.view-productdetails .product-related-products .related-products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.view-productdetails .product-related-products .related-product-card .vm-product-media-container img {
    height: 180px;
  }
    .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container{
   padding: 0px;
  }
}

body.view-productdetails .back-to-category, body.view-productdetails .product-neighbours, body.view-productdetails .category-banner, body.view-productdetails .gallery-main .vm-img-desc{display:none;}
body.view-productdetails .addtocart-area, body.view-productdetails .productdetails .product-fields{display:none !important;}
body.view-productdetails .cf-position-normal, body.view-productdetails .product-price{display:none;}
.product-description .title{
  border-bottom: 1px solid #c7d1dc;
  width: 100%;
  display: inline-block;
  padding: 10px 0px;
}
.ask-a-question{padding: 16px 5px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  background: #C9A06F;
  }
  div.ask-a-question{margin-right: 10px;}
 .ask-a-question a{color:#000 !important;}
 .view-productdetails #sp-section-1{padding-top:20px;}
 body.view-productdetails .manufacturer a{color:#000;}

/* Ask Question Form - Fancybox Modal Styles */
.ask-a-question-view {
    background: #FAF6F0;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
}

.ask-a-question-view h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #0A0907;
}

.ask-a-question-view .product-summary {
    background: #FFFFFF;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.ask-a-question-view .form-field {
    background: #FFFFFF;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

/* Standard Table Form Layout */
.vm-ask-form table.askform {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

/* All table rows use 2-column grid layout */
.vm-ask-form table.askform tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Labels and other single-column rows use flex */
.vm-ask-form table.askform tr:first-child,
.vm-ask-form table.askform tr:nth-child(3),
.vm-ask-form table.askform tr:nth-child(5),
.vm-ask-form table.askform tr:last-child {
    display: flex;
    gap: 1.5rem;
}

.vm-ask-form table.askform td.vm-form-group {
    flex: 1;
}

.vm-ask-form table.askform tr:last-child td {
    flex: none;
    width: 100%;
}

.vm-ask-form table.askform td label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #0A0907;
    font-size: 0.95rem;
}

.vm-ask-form table.askform td.vm-form-group label {
    display: block;
}

.ask-a-question-view table.askform {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1.2rem;
}

.ask-a-question-view table.askform td {
    padding: 0;
    vertical-align: top;
}

.ask-a-question-view table.askform td label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #0A0907;
    font-size: 0.95rem;
}

.ask-a-question-view table.askform td input,
.ask-a-question-view table.askform td textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #FAF6F0;
    border-radius: 0;
}

.ask-a-question-view table.askform td input:focus,
.ask-a-question-view table.askform td textarea:focus {
    outline: none;
    border-color: #C9A06F;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.1);
}

.ask-a-question-view table.askform td textarea {
    min-height: 150px;
    resize: vertical;
}

.ask-a-question-view .submit {
    margin-top: 1rem;
}

.ask-a-question-view .submit input.highlight-button {
    width: 100%;
    padding: 1.2rem 2rem;
    background: #0A0907;
    color: #FAF6F0;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ask-a-question-view .submit input.highlight-button:hover {
    background: #C9A06F;
    color: #0A0907;
    transform: translateY(-2px);
}

.ask-a-question-view .counter {
    background: transparent !important;
    border: none !important;
    text-align: right;
    color: #666;
}

/* Bootstrap 5 Ask Question Form Styles */
.vm-ask-form {
    padding: 2rem;
}

.vm-ask-form .vm-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.vm-ask-form .vm-form-group {
    margin-bottom: 0;
}

.vm-ask-form .vm-form-full {
    margin-bottom: 1.5rem;
}

.vm-ask-form .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #0A0907;
    font-size: 0.95rem;
}

.vm-ask-form .vm-form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #FAF6F0;
    border-radius: 0;
}

.vm-ask-form .vm-form-input:focus {
    outline: none;
    border-color: #C9A06F;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.1);
}

.vm-ask-form textarea.vm-form-input {
    min-height: 150px;
    resize: vertical;
}

.vm-ask-form .vm-form-captcha {
    margin-bottom: 1.5rem;
}

.vm-ask-form .vm-form-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.vm-ask-form .vm-submit-btn {
    flex: 1;
    padding: 1.2rem 2rem;
    background: #0A0907;
    color: #FAF6F0;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vm-ask-form .vm-submit-btn:hover {
    background: #C9A06F;
    color: #0A0907;
    transform: translateY(-2px);
}

.vm-ask-form .vm-char-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.vm-ask-form .vm-counter-input {
    width: 50px;
    background: transparent;
    border: none;
    color: #666;
    text-align: center;
}

@media (max-width: 576px) {
    .vm-ask-form .vm-form-row {
        grid-template-columns: 1fr;
    }
    .vm-ask-form .vm-form-submit {
        flex-direction: column;
    }
    .vm-ask-form .vm-submit-btn {
        width: 100%;
    }
    .ask-a-question{ 
  width: 50%;
  }
}

.view-productdetails #sp-component .product-box{display:none;}
.view-productdetails #sp-section-4{padding: 80px 24px;
  background: #FAF6F0;}
.view-productdetails #sp-section-4 #sp-position1 .sp-module-title{font-family:'Cormorant Garamond', Georgia, serif;
font-size: 30px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 48px;}

  .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  padding: 20px;
  text-align: center;
  }
.view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container a{
    font-size: 1em;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #A8845A;}

 .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container:hover{
            transform: translateY(-2px);    
            color: var(--color-soft-black);
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            color: var(--color-rose-gold);
}
.view-category #sp-section-1 .banner-desc{
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0;
  max-width: 500px;}

/* ========================================
   Blog Pagination - Lamylash Style
   com-content-category-blog__pagination
   ======================================== */
.com-content-category-blog__pagination {
  margin-top: 4rem !important;
}

.com-content-category-blog__pagination ul.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.com-content-category-blog__pagination ul.pagination li.page-item {
  margin: 0 !important;
}

/* Reset Bootstrap page-link and apply circle style */
.com-content-category-blog__pagination ul.pagination .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 45px !important;
  height: 45px !important;
  min-width: 45px;
  max-width: 45px;
  border-radius: 50% !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: all 0.3s ease;
  border: none !important;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  overflow: visible !important;
  position: relative;
}

/* Normal page link - white bg, black text */
.com-content-category-blog__pagination ul.pagination li.page-item:not(.disabled) > a.page-link,
.com-content-category-blog__pagination ul.pagination li.page-item:not(.active):not(.disabled) > span.page-link {
  background: #FFFFFF;
  color: #0A0907;
}

/* Hover / Active state - black bg, white text */
.com-content-category-blog__pagination ul.pagination li.page-item > a:hover,
.com-content-category-blog__pagination ul.pagination li.page-item.active > a,
.com-content-category-blog__pagination ul.pagination li.page-item.active > span {
  background: #0A0907 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12) !important;
}

/*
 * ARROW ICONS via :before pseudo-element
 * 
 * Strategy: Hide the broken FA <span.fas> element and use CSS :before
 * to draw arrow characters directly on the .page-link parent.
 * This completely bypasses the Font Awesome 5 vs 6 font-family conflict.
 *
 * Arrow characters (CSS unicode escapes):
 *   angle-double-left = \00AB («)
 *   angle-left        = \2039 (‹)
 *   angle-right       = \203A (›)
 *   angle-double-right= \00BB (»)
 */

/* Hide the FA span element inside pagination links */
.com-content-category-blog__pagination ul.pagination .page-link .fas,
.com-content-category-blog__pagination ul.pagination .page-link .fa,
.com-content-category-blog__pagination ul.pagination .page-link [class^="fas"] {
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Draw arrows via :before on each .page-link that contains a .fas child */
.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-double-left)::before,
.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-double-left):before {
  content: "\00AB";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: 14px;
  line-height: 1;
}

.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-left)::before,
.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-left):before {
  content: "\2039";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: 16px;
  line-height: 1;
}

.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-right)::before,
.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-right):before {
  content: "\203A";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: 16px;
  line-height: 1;
}

.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-double-right)::before,
.com-content-category-blog__pagination ul.pagination .page-link:has(.fa-angle-double-right):before {
  content: "\00BB";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: 14px;
  line-height: 1;
}

/* Disabled state - white circle with muted arrow */
.com-content-category-blog__pagination ul.pagination li.disabled .page-link {
  color: #999999 !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08) !important;
  cursor: default;
}

/* Responsive: wrap on small screens */
@media (max-width: 480px) {
  .com-content-category-blog__pagination ul.pagination {
    flex-wrap: wrap;
  }
  
  .com-content-category-blog__pagination ul.pagination .page-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    max-width: 40px;
    font-size: 0.9rem !important;
  }

  .com-content-category-blog__pagination ul.pagination .page-link .fas,
  .com-content-category-blog__pagination ul.pagination .page-link .fa,
  .com-content-category-blog__pagination ul.pagination .page-link [class^="fas"] {
    font-size: 12px !important;
  }
}

/* ========================================
   Wholesale Quote Modal (Home Page)
   Module 119 - Home-Banner
   ======================================== */

/* --- Backdrop (overlay) --- */
.wq-backdrop {
  display: none; /* hidden by default, JS toggles this */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 9, 7, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wq-backdrop.wq-open {
  display: flex;
  opacity: 1;
}

/* --- Dialog box --- */
.wq-dialog {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  max-height: 75vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px rgba(10, 9, 7, 0.2);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s ease;
}

.wq-backdrop.wq-open .wq-dialog {
  transform: translateY(0) scale(1);
}

/* --- Close button --- */
.wq-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  z-index: 5;
  transition: color 0.2s;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.wq-close:hover {
  color: #333;
  background: rgba(0,0,0,0.05);
}

/* --- Header --- */
.wq-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.wq-header-badge {
  display: inline-block;
  background: linear-gradient(135deg, #C8A97E, #B8945F);
  color: #FFF;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.wq-header h2 {
  font-family: 'Arial', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0A0907;
  margin: 0 0 0.5rem;
}

.wq-header p {
  color: #6B6B6B;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* --- Form fields --- */
.wq-form {
  padding: 0 2rem 2rem;
}

.wq-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wq-row-2 > * { flex: 1; }

.wq-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.wq-field input,
.wq-field select,
.wq-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e0ddd7;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #0A0907;
  background: #FAFAFA;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: 'Arial', sans-serif;
  box-sizing: border-box;
}

.wq-field input:focus,
.wq-field select:focus,
.wq-field textarea:focus {
  border-color: #C8A97E;
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.15);
  background: #FFF;
}

.wq-field textarea {
  resize: vertical;
  min-height: 80px;
}

.wq-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* --- Status message area --- */
.wq-status {
  min-height: 24px;
  font-size: 0.88rem;
  text-align: center;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  padding: 8px 12px;
  display: none;
}
.wq-status.wq-error {
  display: block;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.wq-status.wq-success {
  display: block;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* --- Submit button & actions --- */
.wq-actions {
  text-align: center;
}

.wq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #C8A97E, #B8945F);
  color: #FFFFFF;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Arial', sans-serif;
  letter-spacing: 0.3px;
}

.wq-submit:hover {
  background: linear-gradient(135deg, #B8945F, #A8844F);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 169, 126, 0.35);
}

.wq-submit:active {
  transform: translateY(0);
}

.wq-submit-icon {
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.wq-submit:hover .wq-submit-icon {
  transform: translateX(3px);
}

.wq-privacy {
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 10px;
}

/* Responsive modal */
@media (max-width: 480px) {
  .wq-dialog {
    max-width: 100%;
    border-radius: 12px;
  }
  .wq-header {
    padding: 1.5rem 1.25rem 0.75rem;
  }
  .wq-form {
    padding: 0 1.25rem 1.5rem;
  }
  .wq-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .wq-header h2 {
    font-size: 1.3rem;
  }
}

/* =========================================
   HOME-START ORDER MODULE CTA FEATURES
   Module ID: 124, Position: position3
   Reference: lamylash-cluster-lashes.html .cta-section
========================================= */

/* CTA Features Container */
.cta-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Individual Feature Item */
.cta-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 14px;
}

/* Feature Check Circle */
.cta-feature-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201, 160, 111, 0.15);
  border: 1px solid rgba(201, 160, 111, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #C9A06F;
}

/* Ensure SVG check icon is visible */
.cta-feature-check svg {
  display: block;
}

/* =========================================
   BOTTOM4 - CONTACT US MODULE
   Module ID: 130, Position: bottom4
   Reference: lamylash-cluster-lashes.html .footer-contact-item
========================================= */

/* Footer Contact Item Container */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* SVG Icon Styling */
.footer-contact-item svg {
  color: #C9A06F;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Link Styling */
.footer-contact-item a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s;
}

.footer-contact-item a:hover {
  color: #D4B88A;
}

/* Text/Plain Content */
.footer-contact-item span {
  color: rgba(255, 255, 255, 0.5);
}

/* ===== Service Page: Gallery Filters ===== */
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.gallery-filter {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1.5px solid #e8e2d9;
  background: white;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: #6b6358;
  font-family: inherit;
  line-height: 1;
}

.gallery-filter:hover {
  border-color: #C9A06F;
  color: #b08a55;
}

.gallery-filter.active {
  background: #C9A06F;
  color: #0A0907;
  border-color: #C9A06F;
  font-weight: 600;
}

.gallery-item.hidden {
  display: none !important;
}

/* About Us - Quality Assured Section */
.cert-list {
  list-style: none;
}

.cert-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E8E4DE;
}

.cert-list li:last-child {
  border-bottom: none;
}

.cert-check {
  width: 24px;
  height: 24px;
  background: #C9A06F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-check svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
}

.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.cert-badge {
  width: 160px;
  height: 200px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
}

.cert-badge:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

.cert-badge-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background: #FAF6F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-badge-icon svg {
  width: 40px;
  height: 40px;
  stroke: #C9A06F;
}

.cert-badge-text {
  font-size: 14px;
  font-weight: 600;
  color: #0A0907;
  text-align: center;
}

/* Quality Assured Section - About Page */
.cert-section {
  padding: 100px 0;
}

.cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cert-content {
  padding-right: 20px;
}

.cert-heading {
  font-size: 36px;
  margin-bottom: 20px;
  color: #0A0907;
}

.cert-desc {
  font-size: 17px;
  color: #6B6B6B;
  margin-bottom: 32px;
  line-height: 1.8;
}

.cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cert-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E8E4DE;
}

.cert-list li:last-child {
  border-bottom: none;
}

.cert-check {
  width: 24px;
  height: 24px;
  background: #C9A06F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-check svg {
  width: 14px;
  height: 14px;
  stroke: #FFFFFF;
}

.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.cert-badge {
  width: 160px;
  height: 200px;
  background: #FFFFFF;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
}

.cert-badge:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

.cert-badge-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background: #FAF6F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-badge-icon svg {
  width: 40px;
  height: 40px;
  stroke: #C9A06F;
}

.cert-badge-text {
  font-size: 14px;
  font-weight: 600;
  color: #0A0907;
  text-align: center;
}

@media (max-width: 1024px) {
  .cert-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
    .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct{display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;}
}

@media (max-width: 768px) {
  .cert-badges {
    flex-direction: column;
    align-items: center;
  }
  
  .cert-section {
    padding: 60px 0;
  }
  .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container{
  padding: 5px;
  }
  .view-productdetails #sp-section-4 .container{padding: 0px 5px;}
}

/* Why Choose Us Section - About Page */
.why-section {
    background: linear-gradient(135deg, #0A0907 0%, #1a1815 100%);
    color: #FFFFFF;
    padding: 100px 0;
}

.why-section .section-title {
    color: #FFFFFF;
}

.why-section .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.why-header {
    text-align: center;
    margin-bottom: 60px;
}

.why-header .section-badge {
    display: inline-block;
    background: rgba(201, 160, 111, 0.2);
    color: #C9A06F;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.why-header .section-title {
    font-size: clamp(36px, 5vw, 52px);
    margin-bottom: 16px;
}

.why-header .section-subtitle {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.why-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #C9A06F;
    transform: translateY(-8px);
}

.why-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: rgba(201, 160, 111, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card-icon svg {
    width: 32px;
    height: 32px;
    stroke: #C9A06F;
    fill: none;
    stroke-width: 1.5;
}

.why-card-title {
    font-size: 22px;
    margin-bottom: 12px;
    color: #FFFFFF;
}

.why-card-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
    
    .why-section {
        padding: 60px 0;
    }
    .view-productdetails #sp-section-4 #sp-position1 .sp-module-content .vmproduct .product-container a{
    font-size: 10px;
}
}


@media (max-width: 480px) {
  .gallery-filters {
    gap: 6px;
  }
  .gallery-filter {
    padding: 8px 16px;
    font-size: 0.78rem;
  }
}
#section-id-65eca9ff-901f-4f90-a0ef-1788c93eddc6{
margin-top: -150px !important;
}
#icon-94e9b167-bd0a-4b20-bd14-d85465c61e0c1{
margin-left:-30px;
}

/* ========================================
   Trusted Worldwide Section - Home Page
   ======================================== */
.trust-section {
    padding: 100px 0;
    background: #FAF6F0;
}

/* Full Width Override - break out of container constraints */
#sp-position1 > .container,
#sp-position1 .sp-module.trust-section-wrapper {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Ensure trust-section itself spans full viewport */
.trust-section {
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
    padding-left: 40px;
    padding-right: 40px;
}

.trust-top {
    max-width: none;
    margin-bottom: 80px;
    padding: 0;
}

/* Testimonials */
.trust-testimonials {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.trust-header {
    text-align: center;
    margin-bottom: 60px;
}

.trust-header .section-title {
    font-size: clamp(36px, 5vw, 52px);
    margin-bottom: 20px;
    color: #0A0907;
    line-height: 1.2;
}

.trust-header .section-title em {
    font-style: normal;
    color: #C9A06F;
}

.trust-intro {
    font-size: 18px;
    color: #6B6B6B;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.trust-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.trust-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #F0E8DC;
    border-radius: 8px;
    min-width: 130px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.trust-logo:hover {
    border-color: #EDD9BE;
    box-shadow: 0 4px 20px rgba(10, 9, 7, 0.06);
    transform: translateY(-2px);
}

.trust-logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(201, 160, 111, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trust logo icons - data URI background images (bypasses Joomla HTML filter) */
.trust-logo:nth-child(1) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M3%209l9-7%209%207v11a2%202%200%2001-2%202H5a2%202%200%2001-2-2z%22%2F%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.trust-logo:nth-child(2) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%208v4l3%203%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.trust-logo:nth-child(3) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M20%207H4a2%202%200%2000-2%202v6a2%202%200%20002%202h16a2%202%200%20002-2V9a2%202%200%2000-2-2z%22%2F%3E%3Cpath%20d%3D%22M16%2021V5a2%202%200%2000-2-2h-4a2%202%200%2000-2%202v16%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.trust-logo:nth-child(4) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.trust-logo:nth-child(5) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%209h6M9%2012h6M9%2015h4%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.trust-logo:nth-child(6) .trust-logo-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9A06F%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%201v4M12%2019v4M4.22%204.22l2.83%202.83M16.95%2016.95l2.83%202.83M1%2012h4M19%2012h4M4.22%2019.78l2.83-2.83M16.95%207.05l2.83-2.83%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.trust-logo span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6B5E50;
    text-align: center;
}

/* Testimonials */
.trust-testimonials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

.testimonial-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 20px rgba(10, 9, 7, 0.06);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(10, 9, 7, 0.1);
}

.testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.testimonial-stars::before {
    content: "★★★★★";
    color: #C9A06F;
    font-size: 16px;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 15px;
    color: #6B6B6B;
    line-height: 1.7;
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #E8E4DE;
    padding-top: 20px;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    background: #C9A06F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
}

.testimonial-avatar::before {
    content: "👤";
}

.testimonial-name {
    font-size: 15px;
    font-weight: 600;
    color: #0A0907;
    margin-bottom: 4px;
}

.testimonial-role {
    font-size: 12px;
    color: #6B6B6B;
}

/* Certifications */
.trust-certs-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.trust-certs-label {
    display: inline-block;
    color: #C9A06F;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.trust-certs {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.trust-certs .cert-badge {
    width: 180px;
    height: auto;
    min-height: 200px;
    padding: 32px 20px;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
    transition: all 0.3s ease;
}

.trust-certs .cert-badge:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

.trust-certs .cert-badge-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    background: #FAF6F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.trust-certs .cert-badge-icon::before {
    content: "✓";
    color: #C9A06F;
    font-size: 28px;
    font-weight: bold;
}

.trust-certs .cert-badge-name {
    font-size: 16px;
    font-weight: 700;
    color: #0A0907;
    margin-bottom: 8px;
}

.trust-certs .cert-badge-desc {
    font-size: 13px;
    color: #6B6B6B;
    line-height: 1.5;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .trust-logos {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .trust-testimonials {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-header .section-label {
    margin-left:50px;
}
}

@media (max-width: 768px) {
    .trust-section {
        padding: 60px 0;
    }

    .trust-logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-logo {
        min-width: 0 !important;
        padding: 16px 8px !important;
    }

    .trust-logo span {
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
    }
    
    .trust-testimonials {
        grid-template-columns: 1fr;
    }
    
    .trust-certs {
        flex-direction: column;
        align-items: center;
    }
    
    .trust-certs .cert-badge {
        width: 100%;
        max-width: 300px;
    }
}


/* =========================================
   HOME TRUSTED WORLDWIDE 3 SECTION
   Styles for module: Home-Trusted Worldwide3 (mod_custom)
   Reference: lamylash-cluster-lashes.html #trust section
   ========================================= */

/* ---- Section Wrapper ---- */
.trust-w3 {
  padding: 100px 0;
  background: #FAF6F0;
  position: relative;
  overflow: hidden;
}

/* Decorative ambient glow */
.trust-w3::before {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(201,160,111,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.trust-w3 > * {
  position: relative;
  z-index: 1;
}

/* ---- Top two-column layout: header left, logos right ---- */
.trust-w3 .trust-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}

/* ---- Header block ---- */
.trust-w3 .section-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9A06F;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-w3 .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #C9A06F;
  flex-shrink: 0;
}

.trust-w3 .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: #1A1714;
  margin-bottom: 20px;
}

.trust-w3 .section-title em {
  font-style: italic;
  color: #C9A06F;
}

.trust-w3 .trust-intro {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 400px;
}

/* ---- Partner logo grid: 3 columns x 2 rows (consistent across
   tablet/desktop); only phone drops to 2 columns via the @media below.
   Left-aligned in the right column so the right edge of the logo block
   lands at the same horizontal position as the right edge of the
   testimonial cards below (testimonial cards end at x=1123 on a 1280
   viewport; right column of trust-top begins at x=673, so 450px-wide
   logos anchored to the left of that column ends right at 1123). ---- */
.trust-w3 .trust-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 48px 0 0;
  max-width: 450px;
  justify-self: start;
  width: 100%;
}

/* Phone (≤768): trust-top stacks; logos drop to 2 columns. */
@media (max-width: 768px) {
  .trust-w3 .trust-logos {
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.trust-w3 .trust-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 0;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.trust-w3 .trust-logo:hover {
  border-color: rgba(201,160,111,0.5);
  box-shadow: 0 4px 20px rgba(10,9,7,0.08);
  transform: translateY(-2px);
}

.trust-w3 .trust-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201,160,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-w3 .trust-logo-icon svg {
  width: 20px;
  height: 20px;
  stroke: #C9A06F;
}

.trust-w3 .trust-logo span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6B5E50;
  text-align: center;
}

/* ---- Testimonials 2-column grid ---- */
.trust-w3 .trust-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 80px;
}

.trust-w3 .testimonial-card {
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.trust-w3 .testimonial-card:hover {
  border-color: rgba(201,160,111,0.4);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
  transform: translateY(-3px);
}

.trust-w3 .testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.trust-w3 .testimonial-stars svg {
  fill: #C9A06F;
}

.trust-w3 .testimonial-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #1A1714;
  line-height: 1.7;
  margin-bottom: 20px;
}

.trust-w3 .testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-w3 .testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #F5EDE0;
  flex-shrink: 0;
}

.trust-w3 .testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trust-w3 .testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1714;
}

.trust-w3 .testimonial-role {
  font-size: 11px;
  color: #9B8E7E;
  margin-top: 2px;
}

/* ---- Certifications ---- */
.trust-w3 .trust-certs-wrap {
  text-align: center;
}

.trust-w3 .trust-certs-label {
  justify-content: center;
  margin-bottom: 32px;
}

.trust-w3 .trust-certs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.trust-w3 .cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 160px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.trust-w3 .cert-badge:hover {
  border-color: #C9A06F;
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
}

.trust-w3 .cert-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5EDE0, #EDD9BE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8784A;
}

.trust-w3 .cert-badge-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B5E50;
}

.trust-w3 .cert-badge-desc {
  font-size: 10px;
  color: #9B8E7E;
  line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .trust-w3 .trust-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .trust-w3 .trust-testimonials {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .trust-w3 {
    padding: 60px 0;
  }
  .trust-w3 .trust-top {
    gap: 32px;
    margin-bottom: 48px;
  }
  .trust-w3 .trust-testimonials {
    gap: 16px;
    margin-bottom: 48px;
  }
  .trust-w3 .testimonial-card {
    padding: 24px;
  }
  .trust-w3 .cert-badge {
    min-width: 140px;
    padding: 20px 24px;
  }
}

@media (max-width: 480px) {
    .trust-w3 .trust-logos {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-left: 35px;
    }
    
    .trust-w3 .trust-logo {
        padding: 16px 12px;
    }
}


/* =========================================
   HOME TRUSTED WORLDWIDE 3 SECTION
   Styles for module: Home-Trusted Worldwide3 (mod_custom)
   Reference: lamylash-cluster-lashes.html #trust section
   ========================================= */
/* ---- Section Wrapper ---- */
.trust-w3 {
  padding: 100px 0;
  background: #FAF6F0;
  position: relative;
  overflow: hidden;
}
/* Decorative ambient glow */
.trust-w3::before {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(201,160,111,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.trust-w3 > * {
  position: relative;
  z-index: 1;
}
/* ---- Top two-column layout: header left, logos right ---- */
.trust-w3 .trust-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}
/* ---- Header block ---- */
.trust-w3 .section-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9A06F;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-w3 .section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #C9A06F;
  flex-shrink: 0;
}
.trust-w3 .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: #1A1714;
  margin-bottom: 20px;
}
.trust-w3 .section-title em {
  font-style: italic;
  color: #C9A06F;
}
.trust-w3 .trust-intro {
  color: #6B5E50;
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 400px;
}
/* ---- Partner logo grid ---- */

.trust-w3 .trust-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 180px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.trust-w3 .trust-logo:hover {
  border-color: rgba(201,160,111,0.5);
  box-shadow: 0 4px 20px rgba(10,9,7,0.08);
  transform: translateY(-2px);
}
.trust-w3 .trust-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201,160,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-w3 .trust-logo-icon svg {
  width: 20px;
  height: 20px;
  stroke: #C9A06F;
}
.trust-w3 .trust-logo span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6B5E50;
  text-align: center;
}
/* ---- Testimonials 2-column grid ---- */

.trust-w3 .testimonial-card {
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.trust-w3 .testimonial-card:hover {
  border-color: rgba(201,160,111,0.4);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
  transform: translateY(-3px);
}
.trust-w3 .testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.trust-w3 .testimonial-stars svg {
  fill: #C9A06F;
}
.trust-w3 .testimonial-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #1A1714;
  line-height: 1.7;
  margin-bottom: 20px;
}
.trust-w3 .testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-w3 .testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #F5EDE0;
  flex-shrink: 0;
}
.trust-w3 .testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trust-w3 .testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1714;
}
.trust-w3 .testimonial-role {
  font-size: 11px;
  color: #9B8E7E;
  margin-top: 2px;
}
/* ---- Certifications ---- */
.trust-w3 .trust-certs-wrap {
  text-align: center;
}
.trust-w3 .trust-certs-label {
  justify-content: center;
  margin-bottom: 32px;
}
.trust-w3 .trust-certs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-w3 .cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 32px;
  background: #FFFFFF;
  border: 1px solid #F0E8DC;
  border-radius: 8px;
  min-width: 160px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.trust-w3 .cert-badge:hover {
  border-color: #C9A06F;
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(10,9,7,0.08);
}
.trust-w3 .cert-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5EDE0, #EDD9BE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8784A;
}
.trust-w3 .cert-badge-name {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B5E50;
}
.trust-w3 .cert-badge-desc {
  font-size: 0.7em;
  color: #9B8E7E;
  line-height: 1.5;
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .trust-w3 .trust-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .trust-w3 .trust-testimonials {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .trust-w3 {
    padding: 60px 0;
  }
  .trust-w3 .trust-top {
    gap: 32px;
    margin-bottom: 48px;
  }
  .trust-w3 .trust-testimonials {
    gap: 16px;
    margin-bottom: 48px;
  }
  .trust-w3 .testimonial-card {
    padding: 24px;
  }
  .trust-w3 .cert-badge {
    min-width: 140px;
    padding: 20px 24px;
  }
}
.view-productdetails #sp-component .product-description img{width: 100%;margin:0 auto;}
.view-productdetails #sp-component .product-description span{margin-bottom: 5px;}
body.itemid-132 .vmproduct.productdetails li{padding:5px;}
body.itemid-132 .vmproduct.productdetails li a{font-size: 0.8em;}
body.itemid-132 .vmproduct.productdetails li a:hover{color: #c9a06f;}
.view-productdetails a, .view-category a{color:#C9A06F;}
.view-article .article-details a{color: #e29318;}
.view-article .article-details h2{
    font-size: 1.5rem;
    font-weight: bold;
  }
.view-article .article-details h3{
    font-size: 1.3rem;
    font-weight: bold;
  }
.view-article .article-details h1{
    font-weight: bold;
}



/* ================================================================
   T4 ADAPTATION LAYER — renders reference-site home page structure
   ================================================================ */

/* ---- Home page (menu item 101): full-width component area ---- */
body.item-101 #t4-main-body .t4-section-inner.container,
body.item-101 #t4-main-body .t4-section-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.item-101 #t4-main-body { padding: 0 !important; }
body.item-204 #t4-main-body,
body.item-205 #t4-main-body,
body.item-208 #t4-main-body { padding: 0 !important; }
body.item-101 #t4-main-body .t4-row.row { margin-left: 0 !important; margin-right: 0 !important; }
body.item-101 #t4-main-body .t4-col.col-md {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* article wrappers: no constraint, no meta */
body.item-101 .com-content-article.item-page,
body.item-101 .com-content-category-blog,
body.item-101 #t4-main-body article.item {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.item-101 .com-content-article__body { max-width: 100% !important; }
body.item-101 .article-info, body.item-101 .page-header { display: none !important; }
body.item-101 #system-message-container { margin: 0; }

/* ---- T4 footer sections: transparent shells, inner #sp-bottom carries the design ---- */
#t4-footnav, #t4-footer {
  padding: 0 !important;
  margin: 0 !important;
}
#t4-footnav .t4-section-inner, #t4-footer .t4-section-inner {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#t4-footnav .t4-row.row, #t4-footer .t4-row.row { margin: 0 !important; }
#t4-footnav .t4-col, #t4-footer .t4-col {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* module chrome cleanup inside footer shells */
#t4-footnav .module, #t4-footnav .module-inner,
#t4-footer .module, #t4-footer .module-inner,
#t4-footnav .t4-module, #t4-footer .t4-module {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#t4-footnav .module-title, #t4-footer .module-title { display: none !important; }

/* ---- Home hero sits under the fixed header ---- */

body.item-101 .hero-banner {
  margin-top: 0;
  padding-top: 72px;
  min-height: 100vh;
}

/* ---- VirtueMart cards: keep reference look (already in ref css, safety below) ---- */
.vm-subcategory .browseCategoryImage { border-radius: 10px; }

/* ---- SPPB contact form fallback styles (component CSS absent on this site) ---- */
.sppb-ajax-contact-content .sppb-ajaxt-contact-form .sppb-form-group {
  margin-bottom: 15px;
}
.sppb-ajax-contact-content .sppb-form-control {
  width: 100%;
  padding: 12px 14px;
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: #0A0907;
  background: #FFFFFF;
  border: 1px solid #E5DCCB;
  border-radius: 6px;
  outline: none;
}
.sppb-ajax-contact-content .sppb-form-control:focus {
  border-color: #C9A06F;
  box-shadow: 0 0 0 3px rgba(201,160,111,0.15);
}
.sppb-ajax-contact-content .sppb-form-control::placeholder { color: #9C9284; }

/* ---- T4 footer layout override: make footer position column full-width so inner 4-col grid works ---- */
#t4-footer {
  padding: 0 !important;
  margin: 0 !important;
}
#t4-footer .t4-section-inner {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#t4-footer .t4-row.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#t4-footer .t4-col {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
#t4-footer .custom {
  margin: 0 !important;
  padding: 0 !important;
}

/* Force reference footer grid layout inside T4 footer */
#t4-footer #sp-bottom .row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
  gap: 60px !important;
  padding-bottom: 64px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#t4-footer #sp-bottom [class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* T4-compatible footer 4-column grid */
.lamylash-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lamylash-footer-grid .footer-col { min-width: 0; }
@media (max-width: 991.98px) {
  .lamylash-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 575.98px) {
  .lamylash-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 991.98px) {
  #t4-footer #sp-bottom .row {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 575.98px) {
  #t4-footer #sp-bottom .row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
#triggerButton{
display:none;
}/* ==================== 通用：T4 页面级面包屑（原隐藏规则已移除，恢复显示） ==================== */


/* ==================== Service (item-204) (page-133-v2.css) ==================== */
body.item-204 #sp-section-1 {

  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

body.item-204 #sp-title {

  min-height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--hb-cream) 0%, #F5EFE6 40%, #EDE5D8 100%);
  position: relative;
}

body.item-204 #sp-title::before {

  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,111,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.item-204 #sp-title::after {

  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,111,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.item-204 #sp-title .sp-column {

  width: 100%;
  max-width: 100%;
}

body.item-204 #sp-title .sp-module-content {

  position: relative;
  z-index: 1;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 #mod-custom147 {

  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  width: 100%;
}

body.item-204 #mod-custom147 .service-hero {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

body.item-204 .service-hero-text {

  /* container for badge, h1, desc, buttons */
}

body.item-204 .service-hero-badge {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,160,111,0.12);
  color: var(--hb-rose-gold-dk);
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.item-204 .service-hero-badge svg {

  width: 16px;
  height: 16px;
}

body.item-204 .service-hero h1 {

  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--hb-black-deep);
  margin: 0 0 24px 0;
}

body.item-204 .service-hero h1 em {

  font-style: italic;
  color: var(--hb-rose-gold);
}

body.item-204 .service-hero-desc {

  font-family: var(--hb-font-body);
  font-size: 1.1rem;
  color: #6B6358;
  line-height: 1.8;
  margin: 0 0 40px 0;
  max-width: 520px;
}

body.item-204 .service-hero-buttons {

  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

body.item-204 .service-hero-btn-primary {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--hb-rose-gold);
  color: var(--hb-black-deep);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,160,111,0.3);
  transition: all 0.35s var(--hb-transition);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
}

body.item-204 .service-hero-btn-primary:hover {

  background: var(--hb-rose-gold-dk);
  box-shadow: 0 6px 30px rgba(201,160,111,0.4);
  transform: translateY(-2px);
  color: var(--hb-black-deep);
  text-decoration: none;
}

body.item-204 .service-hero-btn-primary svg {

  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--hb-transition);
}

body.item-204 .service-hero-btn-primary:hover svg {

  transform: translateX(3px);
}

body.item-204 .service-hero-btn-outline {

  display: inline-flex;
  align-items: center;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  color: var(--hb-black-deep);
  text-decoration: none;
  border: 1.5px solid #D1C8BC;
  cursor: pointer;
  transition: all 0.35s var(--hb-transition);
}

body.item-204 .service-hero-btn-outline:hover {

  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold-dk);
  transform: translateY(-2px);
  text-decoration: none;
}

body.item-204 .service-hero-visual {

  position: relative;
  display: flex;
  justify-content: center;
}

body.item-204 .service-hero-image-wrapper {

  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/5;
  border-radius: 200px 200px 24px 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,9,7,0.12);
  background: #E8DDD0;
  position: relative;
}

body.item-204 .service-hero-image-wrapper img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.item-204 .service-hero-image-placeholder {

  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  color: #6B6358;
}

body.item-204 .service-hero-image-placeholder img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

body.item-204 .service-hero-image-placeholder svg {

  width: 80px;
  height: 80px;
  color: var(--hb-rose-gold);
  opacity: 0.5;
}

body.item-204 .service-hero-image-placeholder span {

  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

body.item-204 .service-hero-stat {

  position: absolute;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}

body.item-204 .service-hero-stat-1 {

  top: 15%;
  right: -20px;
}

body.item-204 .service-hero-stat-2 {

  bottom: 15%;
  left: -20px;
}

body.item-204 .service-hero-stat-icon {

  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201,160,111,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.item-204 .service-hero-stat-icon svg {

  width: 22px;
  height: 22px;
  color: var(--hb-rose-gold);
}

body.item-204 .service-hero-stat-text strong {

  display: block;
  font-family: var(--hb-font-display);
  font-size: 1.2rem;
  color: var(--hb-black-deep);
}

body.item-204 .service-hero-stat-text span {

  font-family: var(--hb-font-body);
  font-size: 12px;
  color: #6B6358;
}

body.item-204 #sp-section-3 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: none !important;
}

body.item-204 #sp-section-3 #sp-position1 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 .pkg-section-header {

  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.item-204 .pkg-section-label {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.item-204 .pkg-section-label::before {

  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.item-204 .pkg-section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.item-204 .pkg-section-subtitle {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-204 .pkg-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-204 .pkg-card {

  border: 1px solid #E8E2D9;
  border-radius: 12px;
  padding: 48px 40px;
  transition: all 0.35s var(--hb-transition);
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}

body.item-204 .pkg-card::before {

  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #D1C8BC;
  transition: all 0.35s var(--hb-transition);
}

body.item-204 .pkg-card:hover {

  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  transform: translateY(-4px);
}

body.item-204 .pkg-card.featured {

  border-color: var(--hb-rose-gold);
  background: linear-gradient(180deg, rgba(201,160,111,0.03) 0%, #FFFFFF 100%);
}

body.item-204 .pkg-card.featured::before {

  background: var(--hb-rose-gold);
}

body.item-204 .pkg-card-tag {

  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

body.item-204 .pkg-card:not(.featured) .pkg-card-tag {

  background: #F7F4F0;
  color: #6B6358;
}

body.item-204 .pkg-card.featured .pkg-card-tag {

  background: rgba(201,160,111,0.15);
  color: var(--hb-rose-gold-dk);
}

body.item-204 .pkg-card h3 {

  font-family: var(--hb-font-display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 6px;
}

body.item-204 .pkg-card-subtitle {

  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #6B6358;
  margin: 0 0 24px;
}

body.item-204 .pkg-card p {

  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  color: #6B6358;
  line-height: 1.7;
  margin: 0 0 28px;
}

body.item-204 .pkg-features {

  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

body.item-204 .pkg-feature {

  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #3A3530;
}

body.item-204 .pkg-feature svg {

  width: 20px;
  height: 20px;
  color: var(--hb-rose-gold);
  flex-shrink: 0;
}

body.item-204 .pkg-meta {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #E8E2D9;
}

body.item-204 .pkg-meta-item {

  text-align: center;
}

body.item-204 .pkg-meta-item strong {

  display: block;
  font-family: var(--hb-font-display);
  font-size: 1.1rem;
  color: var(--hb-black-deep);
  margin-bottom: 2px;
}

body.item-204 .pkg-meta-item span {

  font-family: var(--hb-font-body);
  font-size: 0.75rem;
  color: #6B6358;
}

body.item-204 .pkg-comparison {

  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 24px;
}

body.item-204 .pkg-comparison-title {

  font-family: var(--hb-font-display);
  font-size: 1.5rem;
  text-align: center;
  color: var(--hb-black-deep);
  margin: 0 0 32px;
}

body.item-204 .pkg-comparison-table {

  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
}

body.item-204 .pkg-comparison-table thead {

  background: var(--hb-black-deep);
  color: var(--hb-cream);
}

body.item-204 .pkg-comparison-table th {

  padding: 18px 24px;
  font-family: var(--hb-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

body.item-204 .pkg-comparison-table td {

  padding: 16px 24px;
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #3A3530;
  border-bottom: 1px solid #F7F4F0;
}

body.item-204 .pkg-comparison-table tbody tr:last-child td {

  border-bottom: none;
}

body.item-204 .pkg-comparison-table tbody tr:hover {

  background: #F7F4F0;
}

body.item-204 .pkg-comparison-table .highlight {

  color: var(--hb-rose-gold-dk);
  font-weight: 600;
  background: transparent !important;
  padding: 16px 24px !important;
}

body.item-204 #sp-section-4 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  border: none !important;
}

body.item-204 #sp-section-4 #sp-position2 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 .gallery-section-header {

  text-align: center;
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

body.item-204 .gallery-section-label {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.item-204 .gallery-section-label::before {

  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.item-204 .gallery-section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.item-204 .gallery-section-subtitle {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-204 .gallery-filters {

  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

body.item-204 .gallery-filter {

  padding: 10px 24px;
  border-radius: 100px;
  border: 1.5px solid #E8E2D9;
  background: #FFFFFF;
  font-family: var(--hb-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s var(--hb-transition);
  color: #6B6358;
}

body.item-204 .gallery-filter:hover {

  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold-dk);
}

body.item-204 .gallery-filter.active {

  background: var(--hb-rose-gold);
  color: var(--hb-black-deep);
  border-color: var(--hb-rose-gold);
  font-weight: 600;
}

body.item-204 .gallery-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-204 .gallery-item {

  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: transform 0.35s var(--hb-transition);
}

body.item-204 .gallery-item.hidden {

  display: none;
}

body.item-204 .gallery-item:hover {

  transform: scale(1.03);
}

body.item-204 .gallery-item-img {

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B6358;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
}

body.item-204 .gallery-item-overlay {

  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,9,7,0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s var(--hb-transition);
}

body.item-204 .gallery-item:hover .gallery-item-overlay {

  opacity: 1;
}

body.item-204 .gallery-item-overlay h4 {

  color: #FFFFFF;
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
}

body.item-204 .gallery-item-overlay span {

  color: rgba(255,255,255,0.7);
  font-family: var(--hb-font-body);
  font-size: 0.78rem;
}

body.item-204 .gallery-item-tag {

  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3A3530;
  text-transform: uppercase;
  z-index: 1;
}

body.item-204 #sp-section-5 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: none !important;
}

body.item-204 #sp-section-5 #sp-position3 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 .shipping-section-header {

  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.item-204 .shipping-section-label {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.item-204 .shipping-section-label::before {

  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.item-204 .shipping-section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.item-204 .shipping-section-subtitle {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-204 .shipping-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-204 .shipping-card {

  border: 1px solid #E8E2D9;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.35s var(--hb-transition);
  position: relative;
  background: #FFFFFF;
}

body.item-204 .shipping-card:hover {

  box-shadow: 0 8px 30px rgba(10,9,7,0.1);
  transform: translateY(-4px);
  border-color: var(--hb-rose-gold);
}

body.item-204 .shipping-icon {

  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(201,160,111,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: all 0.35s var(--hb-transition);
}

body.item-204 .shipping-card:hover .shipping-icon {

  background: var(--hb-rose-gold);
}

body.item-204 .shipping-icon svg {

  width: 32px;
  height: 32px;
  color: var(--hb-rose-gold);
  transition: color 0.35s var(--hb-transition);
}

body.item-204 .shipping-card:hover .shipping-icon svg {

  color: #FFFFFF;
}

body.item-204 .shipping-card h3 {

  font-family: var(--hb-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 8px;
}

body.item-204 .shipping-time {

  display: inline-block;
  font-family: var(--hb-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hb-rose-gold-dk);
  background: rgba(201,160,111,0.1);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

body.item-204 .shipping-card p {

  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.7;
  margin: 0 0 20px;
}

body.item-204 .shipping-features {

  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.item-204 .shipping-features li {

  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #3A3530;
  padding: 8px 0;
  border-bottom: 1px solid #F7F4F0;
}

body.item-204 .shipping-features li:last-child {

  border-bottom: none;
}

body.item-204 .shipping-features li svg {

  width: 16px;
  height: 16px;
  color: var(--hb-rose-gold);
  flex-shrink: 0;
}

body.item-204 #sp-section-6 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: linear-gradient(160deg, var(--hb-cream) 0%, #F5EFE6 100%) !important;
  border: none !important;
}

body.item-204 #sp-section-6 #sp-position4 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 .aftersales-section-header {

  text-align: center;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

body.item-204 .aftersales-section-label {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-rose-gold-dk);
  margin-bottom: 16px;
}

body.item-204 .aftersales-section-label::before {

  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--hb-rose-gold);
}

body.item-204 .aftersales-section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-black-deep);
  margin: 0 0 16px;
}

body.item-204 .aftersales-section-subtitle {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: #6B6358;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-204 .aftersales-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-204 .aftersales-features {

  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.item-204 .aftersales-feature {

  display: flex;
  gap: 20px;
}

body.item-204 .aftersales-feature-icon {

  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.item-204 .aftersales-feature-icon svg {

  width: 26px;
  height: 26px;
  color: var(--hb-rose-gold);
}

body.item-204 .aftersales-feature h4 {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hb-black-deep);
  margin: 0 0 4px;
}

body.item-204 .aftersales-feature p {

  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.6;
  margin: 0;
}

body.item-204 .aftersales-faq-heading {

  font-family: var(--hb-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--hb-black-deep);
  margin: 0 0 24px;
}

body.item-204 .faq-list {

  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.item-204 .faq-item {

  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E2D9;
  overflow: hidden;
  transition: all 0.35s var(--hb-transition);
}

body.item-204 .faq-item.open {

  border-color: var(--hb-rose-gold);
  box-shadow: 0 2px 8px rgba(10,9,7,0.06);
}

body.item-204 .faq-question {

  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-align: left;
  transition: color 0.35s var(--hb-transition);
}

body.item-204 .faq-question:hover {

  color: var(--hb-rose-gold-dk);
}

body.item-204 .faq-question svg {

  width: 20px;
  height: 20px;
  color: #6B6358;
  transition: transform 0.35s var(--hb-transition), color 0.35s var(--hb-transition);
  flex-shrink: 0;
  margin-left: 16px;
}

body.item-204 .faq-item.open .faq-question svg {

  transform: rotate(180deg);
  color: var(--hb-rose-gold);
}

body.item-204 .faq-answer {

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.item-204 .faq-answer-inner {

  padding: 0 24px 20px;
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  color: #6B6358;
  line-height: 1.7;
}

body.item-204 #sp-section-7 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-black-deep) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

body.item-204 #sp-section-7::before {

  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,160,111,0.1) 0%, transparent 60%);
  pointer-events: none;
}

body.item-204 #sp-section-7 #sp-position5 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-204 .svc-cta {

  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-204 .svc-cta h2 {

  font-family: var(--hb-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hb-cream);
  margin: 0 0 16px;
}

body.item-204 .svc-cta p {

  font-family: var(--hb-font-body);
  font-size: 1.05rem;
  color: rgba(250,246,240,0.65);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 500px;
}

body.item-204 .cta-buttons {

  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.item-204 .btn-cta-white {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hb-cream);
  color: var(--hb-black-deep);
  padding: 16px 40px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

body.item-204 .btn-cta-white:hover {

  background: var(--hb-rose-gold);
  transform: translateY(-2px);
  color: var(--hb-black-deep);
}

body.item-204 .btn-cta-white svg {

  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.item-204 .btn-cta-white:hover svg {

  transform: translateX(3px);
}

body.item-204 .btn-cta-ghost {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--hb-cream);
  padding: 16px 40px;
  border-radius: 100px;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid rgba(250,246,240,0.25);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

body.item-204 .btn-cta-ghost:hover {

  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold);
}

body.item-204 .btn-cta-ghost svg {

  width: 18px;
  height: 18px;
}

/* ==================== About (item-205) (page-134-v2.css) ==================== */
body.item-205 #sp-title {

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--hb-black-deep) 0%, #1a1815 50%, var(--hb-black-deep) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
}

body.item-205 #sp-title::before {

  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: url('/lamylashxin/images/banners/about-us.webp') center / cover no-repeat !important;
  opacity: 0.15;
}

body.item-205 #sp-title .sp-column {

  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.item-205 #sp-title .sp-module-content {

  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

body.item-205 .about-hero {

  position: relative;
  z-index: 1;
  text-align: center;
  color: #FFFFFF;
  padding: 40px 24px;
}

body.item-205 .about-hero-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  border: 1px solid var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.item-205 .about-hero-title {

  font-family: var(--hb-font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  margin-bottom: 24px;
  color: #FFFFFF;
}

body.item-205 .about-hero-title span {

  color: var(--hb-rose-gold);
}

body.item-205 .about-hero-subtitle {

  font-family: var(--hb-font-body);
  font-size: clamp(18px, 2.5vw, 24px);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

body.item-205 .about-stats-bar {

  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 32px 0;
}

body.item-205 .about-stat-item {

  text-align: center;
}

body.item-205 .about-stat-number {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

body.item-205 .about-stat-label {

  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.item-205 .about-stat-divider {

  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
}

body.item-205 #sp-section-3 {

  padding: 50px 0 !important;
  margin: 0 !important;
  background: var(--hb-white) !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-3::before {

  display: none !important;
}

body.item-205 #sp-section-3 #sp-position1 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.item-205 #sp-section-3 .sp-module-title {

  display: none;
}

body.item-205 .story-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .story-image {

  position: relative;
}

body.item-205 .story-image img {

  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
  width: 100%;
  height: auto;
  display: block;
}

body.item-205 .story-image-badge {

  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--hb-rose-gold);
  color: var(--hb-white);
  padding: 24px 32px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.item-205 .story-image-badge .number {

  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  display: block;
}

body.item-205 .story-image-badge .text {

  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.item-205 .story-section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  border: 1px solid var(--hb-rose-gold);
  color: var(--hb-rose-gold);
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.item-205 .story-title {

  font-family: var(--hb-font-display);
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--hb-black-deep);
}

body.item-205 .story-title span {

  color: var(--hb-rose-gold);
}

body.item-205 .story-text {

  font-size: 17px;
  color: #6B6B6B;
  margin-bottom: 20px;
  line-height: 1.8;
}

body.item-205 .timeline {

  margin-top: 48px;
}

body.item-205 .timeline-item {

  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  position: relative;
  padding-left: 32px;
}

body.item-205 .timeline-item::before {

  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--hb-rose-gold);
  border-radius: 50%;
}

body.item-205 .timeline-item::after {

  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  width: 2px;
  height: calc(100% - 8px);
  background: #E8E4DE;
}

body.item-205 .timeline-item:last-child::after {

  display: none;
}

body.item-205 .timeline-year {

  font-family: var(--hb-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  min-width: 80px;
}

body.item-205 .timeline-text {

  font-size: 16px;
  color: #6B6B6B;
  margin: 0;
}

body.item-205 .timeline-text strong {

  color: var(--hb-black-deep);
}

body.item-205 #sp-section-4 {

  padding: 50px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-4::after {

  display: none !important;
}

body.item-205 #sp-section-4 #sp-position3 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-section-4 .sp-module-title {

  display: none;
}

body.item-205 .factory-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .factory-header {

  text-align: center;
  margin-bottom: 60px;
}

body.item-205 .factory-header .section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.item-205 .factory-header .section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.item-205 .factory-header .section-subtitle {

  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-205 .factory-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.item-205 .factory-card {

  background: var(--hb-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body.item-205 .factory-card:hover {

  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.item-205 .factory-card-image {

  height: 240px;
  overflow: hidden;
}

body.item-205 .factory-card-image img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

body.item-205 .factory-card:hover .factory-card-image img {

  transform: scale(1.05);
}

body.item-205 .factory-card-content {

  padding: 24px;
}

body.item-205 .factory-card-title {

  font-family: var(--hb-font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--hb-black-deep);
  margin-top: 0;
}

body.item-205 .factory-card-text {

  font-size: 15px;
  color: #6B6B6B;
  line-height: 1.7;
  margin: 0;
}

body.item-205 .factory-stats {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
  background: var(--hb-black-deep);
  padding: 48px;
  border-radius: 16px;
}

body.item-205 .factory-stat {

  text-align: center;
  color: var(--hb-white);
}

body.item-205 .factory-stat-icon {

  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.item-205 .factory-stat-icon svg {

  width: 100%;
  height: 100%;
  stroke: var(--hb-rose-gold);
}

body.item-205 .factory-stat-number {

  font-family: var(--hb-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

body.item-205 .factory-stat-label {

  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

body.item-205 #sp-section-5 {

  padding: 50px 0 !important;
  margin: 0 !important;
  background: var(--hb-white) !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-5::after {

  display: none !important;
}

body.item-205 #mod-custom158 {

  background: transparent !important;
}

body.item-205 #sp-position4 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position4 .sp-module {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position4 .sp-column {

  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 .process-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .process-header {

  text-align: center;
  margin-bottom: 60px;
}

body.item-205 .process-header .section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.item-205 .process-header .section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.item-205 .process-header .section-subtitle {

  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-205 .process-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.item-205 .process-card {

  position: relative;
  background: var(--hb-cream);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: all 0.4s ease;
}

body.item-205 .process-card:hover {

  background: var(--hb-black-deep);
  color: var(--hb-white);
}

body.item-205 .process-card:hover .process-card-icon {

  background: var(--hb-rose-gold);
}

body.item-205 .process-card:hover .process-card-icon svg {

  stroke: var(--hb-white);
}

body.item-205 .process-card:hover .process-card-title {

  color: var(--hb-white);
}

body.item-205 .process-card:hover .process-card-text {

  color: rgba(255, 255, 255, 0.7);
}

body.item-205 .process-number {

  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  color: #E8E8E8;
  opacity: 0.5;
}

body.item-205 .process-card:hover .process-number {

  color: rgba(255, 255, 255, 0.2);
}

body.item-205 .process-card-icon {

  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: var(--hb-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

body.item-205 .process-card-icon svg {

  width: 36px;
  height: 36px;
  stroke: var(--hb-rose-gold);
  transition: all 0.4s ease;
}

body.item-205 .process-card-title {

  font-family: var(--hb-font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--hb-black-deep);
  margin-top: 0;
  transition: color 0.4s ease;
}

body.item-205 .process-card-text {

  font-size: 15px;
  color: #6B6B6B;
  line-height: 1.6;
  margin: 0;
  transition: color 0.4s ease;
}

body.item-205 #sp-section-6 {

  padding: 50px 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #0A0907 0%, #1a1815 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-6::after {

  display: none !important;
}

body.item-205 #mod-custom159 {

  background: transparent !important;
}

body.item-205 #sp-position5 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position5 .sp-module {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position5 .sp-column {

  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 .why-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .why-header {

  text-align: center;
  margin-bottom: 60px;
}

body.item-205 .why-header .section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.2);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.item-205 .why-header .section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  margin-top: 0;
}

body.item-205 .why-header .section-subtitle {

  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-205 .why-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

body.item-205 .why-card {

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.3s ease;
}

body.item-205 .why-card:hover {

  background: rgba(255, 255, 255, 0.1);
  border-color: var(--hb-rose-gold);
  transform: translateY(-8px);
}

body.item-205 .why-card-icon {

  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: rgba(201, 160, 111, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.item-205 .why-card-icon svg {

  width: 32px;
  height: 32px;
  stroke: var(--hb-rose-gold);
}

body.item-205 .why-card-title {

  font-family: var(--hb-font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #FFFFFF;
  margin-top: 0;
}

body.item-205 .why-card-text {

  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

body.item-205 #sp-section-7 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: var(--hb-cream) !important;
  color: var(--hb-black-deep) !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-7::after {

  display: none !important;
}

body.item-205 #sp-position6 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position6 .sp-module {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position6 .sp-column {

  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 .cert-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .cert-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

body.item-205 .cert-content .section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.item-205 .cert-heading {

  font-family: var(--hb-font-display);
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--hb-black-deep);
  margin-top: 0;
}

body.item-205 .cert-desc {

  font-size: 17px;
  color: #6B6B6B;
  margin-bottom: 32px;
  line-height: 1.8;
}

body.item-205 .cert-list {

  list-style: none;
  padding: 0;
  margin: 0;
}

body.item-205 .cert-list li {

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hb-light-gray, #E8E4DE);
  font-size: 16px;
  color: var(--hb-black-deep);
}

body.item-205 .cert-list li:last-child {

  border-bottom: none;
}

body.item-205 .cert-check {

  width: 24px;
  height: 24px;
  background: var(--hb-rose-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.item-205 .cert-check svg {

  width: 14px;
  height: 14px;
  stroke: #FFFFFF;
}

body.item-205 .cert-badges {

  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

body.item-205 .cert-badge {

  width: 160px;
  height: 200px;
  background: #FFFFFF;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
}

body.item-205 .cert-badge:hover {

  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(10, 9, 7, 0.12);
}

body.item-205 .cert-badge-icon {

  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background: var(--hb-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.item-205 .cert-badge-icon svg {

  width: 40px;
  height: 40px;
  stroke: var(--hb-rose-gold);
}

body.item-205 .cert-badge-text {

  font-size: 14px;
  font-weight: 600;
  color: var(--hb-black-deep);
  text-align: center;
  line-height: 1.4;
}

body.item-205 #sp-section-8 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  color: var(--hb-black-deep) !important;
  border: none !important;
  overflow: visible !important;
}

body.item-205 #sp-section-8::after {

  display: none !important;
}

body.item-205 #sp-position7 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position7 .sp-module {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position7 .sp-column {

  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 .trusted-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .trusted-header {

  text-align: center;
  margin-bottom: 48px;
}

body.item-205 .trusted-header .section-badge {

  display: inline-block;
  background: rgba(201, 160, 111, 0.15);
  color: var(--hb-rose-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.item-205 .trusted-header .section-title {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 16px;
  margin-top: 0;
}

body.item-205 .trusted-header .section-subtitle {

  font-size: 18px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

body.item-205 .trusted-logo-grid {

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

body.item-205 .trusted-logo {

  background: var(--hb-cream);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  transition: all 0.3s ease;
}

body.item-205 .trusted-logo:hover {

  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
}

body.item-205 .trusted-logo-inner {

  font-family: var(--hb-font-display);
  font-size: 18px;
  font-weight: 600;
  color: #6B6B6B;
  text-align: center;
}

body.item-205 .trusted-stats {

  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 60px;
}

body.item-205 .trusted-stat-item {

  text-align: center;
}

body.item-205 .trusted-stat-number {

  font-family: var(--hb-font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--hb-rose-gold);
  display: block;
}

body.item-205 .trusted-stat-label {

  font-size: 15px;
  color: #6B6B6B;
}

body.item-205 #sp-section-9 {

  padding: 100px 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #C9A06F 0%, #b88a5a 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  overflow: visible !important;
  text-align: center;
}

body.item-205 #sp-section-9::after {

  display: none !important;
}

body.item-205 #sp-position8 .sp-module-content {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position8 .sp-module {

  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 #sp-position8 .sp-column {

  width: 100% !important;
  max-width: 100% !important;
}

body.item-205 .cta-section {

  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

body.item-205 .cta-content {

  max-width: 700px;
  margin: 0 auto;
}

body.item-205 .cta-title {

  font-family: var(--hb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 20px;
  margin-top: 0;
}

body.item-205 .cta-desc {

  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
  color: #FFFFFF;
  line-height: 1.7;
}

body.item-205 .cta-buttons {

  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

body.item-205 .cta-btn {

  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

body.item-205 .cta-btn svg {

  width: 20px;
  height: 20px;
}

body.item-205 .cta-btn-primary {

  background: #FFFFFF;
  color: var(--hb-black-deep);
}

body.item-205 .cta-btn-primary:hover {

  background: var(--hb-black-deep);
  color: #FFFFFF;
  transform: translateY(-4px);
}

body.item-205 .cta-btn-secondary {

  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

body.item-205 .cta-btn-secondary:hover {

  background: #FFFFFF;
  color: var(--hb-rose-gold);
  transform: translateY(-4px);
}

/* ==================== Contact (item-208) (page-135-v2.css) ==================== */
body.item-208 #sp-section-1 {

  padding: 120px 5% 60px !important;
  margin: 0 !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Hero gradient + image; fallback to deep dark when image missing */
  background:
    linear-gradient(
      rgba(10, 9, 7, 0.72),
      rgba(10, 9, 7, 0.52)
    ),
    url('/lamylashxin/images/banners/contact-hero-bg.webp') center / cover no-repeat !important;
  background-color: var(--hb-black-deep) !important;
}

body.item-208 #sp-section-1::before {

  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A06F' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
  pointer-events: none;
}

body.item-208 #sp-section-1 .row {

  width: 100% !important;
  justify-content: center !important;
  position: relative;
  z-index: 1;
}

body.item-208 #sp-title {

  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

body.item-208 #sp-title .sp-column {

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

body.item-208 #mod-custom163 {

  position: relative;
  z-index: 1;
  text-align: center;
  animation: hbFadeSlideDown 0.8s var(--hb-transition) 0.2s both;
}

body.item-208 #mod-custom163 h1 {

  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  color: var(--hb-cream);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

body.item-208 #mod-custom163 p {

  font-family: var(--hb-font-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(250, 246, 240, 0.85);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__wrapper {

  display: block !important;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

body.item-208 #sp-section-1 .mod-breadcrumbs {

  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 4px;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item span {

  color: rgba(250, 246, 240, 0.65) !important;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  text-decoration: none;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item a:hover {

  color: var(--hb-rose-gold) !important;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__item.breadcrumb-item.active span {

  color: var(--hb-cream) !important;
}

body.item-208 #sp-section-1 .mod-breadcrumbs__divider {

  display: none !important;
}

body.item-208 #sp-section-2 {

  background: var(--hb-white, #FFFFFF) !important;
  padding: 80px 5% !important;
  margin-top: 0 !important;
  margin-bottom:-80px;
}

body.item-208 #sp-section-2 #sp-position1 {

  max-width: 1200px;
  margin: 0 auto;
}

body.item-208 .hb-section-title {

  font-family: var(--hb-font-display);   /* Cormorant Garamond */
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--hb-black-deep, #0A0907);
  letter-spacing: 0.02em;
}

body.item-208 .hb-section-subtitle {

  text-align: center;
  color: #666;
  font-family: var(--hb-font-body);      /* DM Sans */
  font-size: 1.05rem;
  margin-bottom: 3rem;
}

body.item-208 .hb-cards-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

body.item-208 .hb-contact-card {

  background: var(--hb-cream, #FAF6F0);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid transparent;
}

body.item-208 .hb-contact-card:hover {

  transform: translateY(-8px);
  border-color: var(--hb-rose-gold, #C9A06F);
  box-shadow: 0 20px 40px rgba(201, 160, 111, 0.15);
}

body.item-208 .hb-card-icon {

  width: 60px;
  height: 60px;
  background: var(--hb-black-deep, #0A0907);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

body.item-208 .hb-contact-card:hover .hb-card-icon {

  background: var(--hb-rose-gold, #C9A06F);
}

body.item-208 .hb-card-icon svg {

  width: 28px;
  height: 28px;
  fill: var(--hb-cream, #FAF6F0);
  transition: fill 0.3s ease;
}

body.item-208 .hb-contact-card:hover .hb-card-icon svg {

  fill: var(--hb-black-deep, #0A0907);
}

body.item-208 .hb-card-title {

  font-family: var(--hb-font-display);   /* Cormorant Garamond */
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--hb-black-deep, #0A0907);
}

body.item-208 .hb-card-content {

  font-family: var(--hb-font-body);      /* DM Sans */
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

body.item-208 .hb-card-cta {

  display: inline-block;
  font-family: var(--hb-font-body);      /* DM Sans */
  color: var(--hb-rose-gold, #C9A06F);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

body.item-208 .hb-card-cta:hover {

  color: var(--hb-black-deep, #0A0907);
}

body.item-208 #sp-section-3 {

  background: var(--hb-cream, #FAF6F0) !important;
  padding: 80px 5% !important;
  margin-top:50px;
}

body.item-208 #sp-section-3 #sp-position2 {

  max-width: 1200px;
  margin: 0 auto;
}

body.item-208 .hb-form-container {

  max-width: 700px;
  margin: 0 auto;
  background: var(--hb-white, #FFFFFF);
  padding: 3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

body.item-208 .hb-form-row {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 0;
}

body.item-208 .hb-form-group {

  margin-bottom: 1.5rem;
}

body.item-208 .hb-form-group label {

  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  font-size: 0.95rem;
}

body.item-208 .hb-required {

  color: #c0392b;
}

body.item-208 .hb-form-group textarea {

  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  font-family: var(--hb-font-body);
  font-size: 1rem;
  transition: all 0.3s ease;
  background: var(--hb-cream, #FAF6F0);
  color: var(--hb-black-deep, #0A0907);
}

body.item-208 .hb-form-group textarea:focus {

  outline: none;
  border-color: var(--hb-rose-gold, #C9A06F);
  background: var(--hb-white, #FFFFFF);
  box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.1);
}

body.item-208 .hb-form-group textarea {

  min-height: 150px;
  resize: vertical;
}

body.item-208 .hb-form-group select {

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230A0907' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

body.item-208 .hb-submit-btn {

  width: 100%;
  padding: 1.2rem 2rem;
  background: var(--hb-black-deep, #0A0907);
  color: var(--hb-cream, #FAF6F0);
  border: none;
  font-family: var(--hb-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

body.item-208 .hb-submit-btn:hover {

  background: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-black-deep, #0A0907);
  transform: translateY(-2px);
}

body.item-208 #sp-section-5 {

    padding-left: 0 !important;
    padding-right: 0 !important;
    background: var(--hb-black-deep, #0A0907) !important;
}

body.item-208 #sp-section-5 .container {

    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

body.item-208 #t4-main-body .page-header h1 {

    display: none !important;
}

body.item-208 #t4-main-body .com-contact .row {
 display: none !important; }

body.item-208 .lf-contact-form-section {

    background: #FAF6F0;
    text-align: center;
}

body.item-208 .lf-section-title {

    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #0A0907;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

body.item-208 .lf-section-subtitle {

    color: #666;
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

body.item-208 .lf-form-container {

    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    text-align: left;
}

body.item-208 .lf-form-row {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 0;
}

body.item-208 .lf-form-group {

    margin-bottom: 1.5rem;
}

body.item-208 .lf-form-group--full {

    grid-column: 1 / -1;
}

body.item-208 .lf-form-container label,
body.item-208 .lf-form-container .control-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #0A0907;
    font-size: 0.95rem;
}

body.item-208 .lf-form-container input[type="text"],
body.item-208 .lf-form-container input[type="email"],
body.item-208 .lf-form-container input[type="tel"],
body.item-208 .lf-form-container input[type="url"],
body.item-208 .lf-form-container select,
body.item-208 .lf-form-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.9rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
    background: #FAF6F0;
    color: #0A0907;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

body.item-208 .lf-form-container input[type="text"]:focus,
body.item-208 .lf-form-container input[type="email"]:focus,
body.item-208 .lf-form-container input[type="tel"]:focus,
body.item-208 .lf-form-container input[type="url"]:focus,
body.item-208 .lf-form-container select:focus,
body.item-208 .lf-form-container textarea:focus {
    outline: none;
    border-color: #C9A06F;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.12);
}

body.item-208 .lf-form-container textarea {
    min-height: 150px;
    resize: vertical;
}

body.item-208 .lf-form-container .control-group {
    margin-bottom: 0;
}

body.item-208 .lf-form-container .control-group .control-label {
    float: none;
    width: auto;
    text-align: left;
    padding-right: 0;
}

body.item-208 .lf-form-container .control-group .controls {
    margin-left: 0;
}

body.item-208 .lf-form-submit {
    margin-top: 0.5rem;
}

body.item-208 .lf-submit-btn {
    width: 100%;
    padding: 1.1rem 2rem;
    background: #0A0907;
    color: #FAF6F0;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

body.item-208 .lf-submit-btn:hover {
    background: #C9A06F;
    color: #0A0907;
    transform: translateY(-2px);
}

body.item-208 .lf-form-container .required,
body.item-208 .lf-form-container .star {
    color: #b98350;
}

@media (max-width: 768px) {
    body.item-208 .lf-contact-form-section {
        padding: 50px 5% 60px;
    }

    body.item-208 .lf-section-title {
        font-size: 2rem;
    }

    body.item-208 .lf-form-container {
        padding: 2rem 1.5rem;
    }

    body.item-208 .lf-form-row {
        grid-template-columns: 1fr;
    }
    body.item-205 .factory-grid {

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
}
}
/* ==================== Blog (item-206) 重写：适配 Joomla 6 结构 ==================== */
/* Page background cream so no white gutter shows around/under the Key Takeaways box (KT itself is already cream). */
body.item-206 { background-color: var(--hb-cream, #FAF6F0); }

/* ---------- Hero (#t4-masthead / Mod135) ---------- */
body.item-206 #t4-masthead {
  min-height: 70vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--hb-cream) 0%, var(--hb-white) 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
body.item-206 #t4-masthead::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(201, 160, 111, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
body.item-206 #t4-masthead::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 160, 111, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
body.item-206 #t4-masthead .t4-row.row {
  width: 100% !important;
  margin: 0 !important;
}
body.item-206 #t4-masthead .t4-col.masthead {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  display: flex;
  justify-content: center;
}
body.item-206 #t4-masthead .t4-module,
body.item-206 #t4-masthead .module-inner,
body.item-206 #t4-masthead .module-ct {
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
body.item-206 #t4-masthead .module-ct {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
body.item-206 .blog-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.item-206 .blog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(201, 160, 111, 0.12);
  color: var(--hb-rose-gold-dk);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--hb-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(201, 160, 111, 0.25);
}
body.item-206 .blog-hero-inner h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--hb-black-deep);
  margin-bottom: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
body.item-206 .blog-hero-inner p {
  font-family: var(--hb-font-body);
  font-size: 1.15rem;
  color: #6B6B6B;
  line-height: 1.75;
  margin-bottom: 0;
  max-width: 600px;
}

/* ---------- 主区域布局 ---------- */
body.item-206 #t4-main-body {
  background: var(--hb-cream, #FAF6F0) !important;
  padding: 0 !important;
}
body.item-206 #t4-main-body > .t4-section-inner.container {
  max-width: 1400px !important;
  padding: 4rem 2rem !important;
  margin: 0 auto !important;
}
body.item-206 #t4-main-body > .t4-section-inner.container > .t4-row.row {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 4rem !important;
  align-items: start !important;
}
body.item-206 #t4-main-body .t4-col.col-md {
  background: transparent !important;
  padding: 0 !important;
}
body.item-206 #t4-main-body .t4-col.col-md > .com-content-category-blog {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  max-width: 100%;
}
body.item-206 .blog-items {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- leading 文章（整宽白卡，无图） ---------- */
body.item-206 .items-leading .blog-item {
  background: var(--hb-cream, #FAF6F0) !important;
  border: 1px solid rgba(201, 160, 111, 0.15) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 0 !important;
  padding: 2.5rem 3rem !important;
}
body.item-206 .items-leading .blog-item:hover {
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12) !important;
  transform: translateY(-5px) !important;
}
body.item-206 .items-leading .page-header {
  margin-bottom: 1rem;
}
body.item-206 .items-leading .page-header h2 {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  font-family: var(--hb-font-display);
  color: var(--hb-black-deep, #0A0907);
  line-height: 1.3;
}
body.item-206 .items-leading .page-header h2 a {
  color: var(--hb-black-deep, #0A0907) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
body.item-206 .items-leading .page-header h2 a:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
}
body.item-206 .items-leading .article-aside {
  margin-bottom: 1rem;
}
body.item-206 .items-leading .article-info {
  margin: 0;
  font-family: var(--hb-font-body);
  font-size: 0.85rem;
  color: #9B9B9B;
}
body.item-206 .items-leading .article-info dt {
  display: none;
}
body.item-206 .items-leading .article-info dd {
  display: inline-block;
  margin: 0 1.25rem 0 0;
}
body.item-206 .items-leading .article-info dd .fa {
  display: none;
}
body.item-206 .items-leading .article-info dd.hits {
  display: none;
}
body.item-206 .items-leading .article-info .author-img {
  display: none;
}
body.item-206 .items-leading .article-info dd.createdby a {
  color: var(--hb-rose-gold, #C9A06F);
  text-decoration: none;
}
body.item-206 .items-leading .item-intro {
  font-family: var(--hb-font-body);
  font-size: 0.95rem;
  color: #6B6B6B;
  line-height: 1.75;
  margin-bottom: 0;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.item-206 .items-leading .readmore {
  margin: 1.5rem 0 0;
}

/* ---------- readmore（隐藏 Joomla 长文本，参考站风格 Read More →） ---------- */
body.item-206 .btn-readmore {
  font-size: 0 !important;
  color: var(--hb-black-deep, #0A0907) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--hb-font-body);
  font-weight: 600;
  transition: color 0.25s ease;
}
body.item-206 .btn-readmore::after {
  content: 'Read More →';
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
body.item-206 .btn-readmore:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
}

/* ---------- 3 列网格卡片 ---------- */
body.item-206 .items-row.cols-3.row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  margin: 0 !important;
}
body.item-206 .items-row.cols-3.row > .col-12,
body.item-206 .items-row.cols-3.row > .col-12.col-md-6,
body.item-206 .items-row.cols-3.row > .col-12.col-md-6.col-lg-4 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}
body.item-206 .items-row.cols-3 .col-12.col-md-6.col-lg-4 {
  padding: 0 !important;
  max-width: none !important;
}
body.item-206 .items-row.cols-3 .item {
  background: var(--hb-cream, #FAF6F0);
  border: 1px solid rgba(201, 160, 111, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 9, 7, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.item-206 .items-row.cols-3 .item:hover {
  box-shadow: 0 8px 30px rgba(10, 9, 7, 0.12);
  transform: translateY(-5px);
}
body.item-206 .items-row.cols-3 .item-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.item-206 .items-row.cols-3 .page-header {
  margin-bottom: 0.5rem;
}
body.item-206 .items-row.cols-3 .page-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--hb-font-display);
  color: var(--hb-black-deep, #0A0907);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
body.item-206 .items-row.cols-3 .page-header h2 a {
  color: var(--hb-black-deep, #0A0907) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
body.item-206 .items-row.cols-3 .page-header h2 a:hover {
  color: var(--hb-rose-gold, #C9A06F) !important;
}
body.item-206 .items-row.cols-3 .article-aside {
  margin-bottom: 0.75rem;
}
body.item-206 .items-row.cols-3 .article-info {
  margin: 0;
  font-family: var(--hb-font-body);
  font-size: 0.8rem;
  color: #9B9B9B;
}
body.item-206 .items-row.cols-3 .article-info dt {
  display: none;
}
body.item-206 .items-row.cols-3 .article-info dd {
  display: inline-block;
  margin: 0 1rem 0 0;
}
body.item-206 .items-row.cols-3 .article-info dd .fa {
  display: none;
}
body.item-206 .items-row.cols-3 .article-info dd.hits {
  display: none;
}
body.item-206 .items-row.cols-3 .article-info .author-img {
  display: none;
}
body.item-206 .items-row.cols-3 .item-intro {
  font-family: var(--hb-font-body);
  font-size: 0.92rem;
  color: #6B6B6B;
  line-height: 1.7;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(0.92rem * 1.7 * 4);
}
body.item-206 .items-row.cols-3 .readmore {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* ---------- 侧栏（sticky Popular Post） ---------- */
body.item-206 #t4-main-body .t4-col.sidebar-r {
  position: sticky;
  top: 100px;
  height: fit-content;
  background: transparent !important;
  width: 100%;
  z-index: 100;
}
/* Popular Post: intentionally reverted to the global white-card style (.sidebar-r .t4-module, line ~21217).
   Do NOT force cream here — user wants the Popular Post sidebar to stay white. */
body.item-206 #t4-main-body .t4-col.sidebar-r > .t4-module + .t4-module {
  margin-top: 2rem;
}

/* ---------- 分页 ---------- */
body.item-206 .pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}
body.item-206 .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--hb-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907) !important;
  background: var(--hb-white, #FFFFFF);
  border: 1px solid rgba(201, 160, 111, 0.2);
  box-shadow: 0 2px 10px rgba(10, 9, 7, 0.06);
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
body.item-206 .pagination .page-item.active .page-link {
  background: var(--hb-black-deep, #0A0907) !important;
  color: var(--hb-white) !important;
  border-color: var(--hb-black-deep, #0A0907);
}
body.item-206 .pagination .page-item.disabled .page-link {
  background: var(--hb-white, #FFFFFF);
  color: #C0BAB0 !important;
  border-color: rgba(201, 160, 111, 0.15);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1399.98px) {
  body.item-206 #t4-main-body > .t4-section-inner.container > .t4-row.row {
    grid-template-columns: 1fr 300px !important;
    gap: 3rem !important;
  }
  body.item-206 .items-row.cols-3.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}
@media (max-width: 991.98px) {
  body.item-206 #t4-main-body > .t4-section-inner.container > .t4-row.row {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  body.item-206 #t4-main-body .t4-col.sidebar-r {
    position: static;
    height: auto;
  }
  body.item-206 .items-row.cols-3.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767.98px) {
  body.item-206 .items-row.cols-3.row {
    grid-template-columns: 1fr !important;
  }
  body.item-206 .items-leading .blog-item {
    padding: 1.75rem 1.5rem !important;
  }
}

/* ---------- 卡片图片统一 ---------- */
/* 1. intro image 字段（.item-image）提升为卡片头图 */
body.item-206 .items-row.cols-3 .item-image {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
body.item-206 .items-row.cols-3 .item-image a {
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
body.item-206 .items-row.cols-3 .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 16px 16px 0 0;
}

/* 2. introtext 内第一张图提升为头图（覆盖 inline 图片） */
body.item-206 .items-row.cols-3 .item-intro > p:first-child img:first-child,
body.item-206 .items-row.cols-3 .item-intro img:first-child {
  display: block;
  width: calc(100% + 3rem);
  height: 220px;
  object-fit: cover;
  margin: -1.5rem -1.5rem 1rem -1.5rem !important;
  border-radius: 16px 16px 0 0 !important;
}

/* 3. 有头图时 content 顶部内边距归零 */
body.item-206 .items-row.cols-3 .item:has(.item-image) .item-content,
body.item-206 .items-row.cols-3 .item:has(.item-intro > p:first-child img:first-child) .item-content,
body.item-206 .items-row.cols-3 .item:has(.item-intro img:first-child) .item-content {
  padding-top: 0;
}

/* 4. 无图卡片占位背景，保持视觉高度统一 */
body.item-206 .items-row.cols-3 .item-content::before {
  content: '';
  display: block;
  height: 220px;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, rgba(201,160,111,0.25) 0%, rgba(201,160,111,0.08) 100%);
}
body.item-206 .items-row.cols-3 .item:has(.item-image) .item-content::before,
body.item-206 .items-row.cols-3 .item:has(.item-intro img:first-child) .item-content::before {
  display: none;
}

/* ================================================================
   Inner pages (Service / About / Contact): make T4 Page Builder
   sections full-width like the reference Helix layout, while inner
   modules keep their own max-width containers.
   ================================================================ */
body.item-204 #t4-main-body .t4-section-inner.container,
body.item-205 #t4-main-body .t4-section-inner.container,
body.item-208 #t4-main-body .t4-section-inner.container,
body.item-204 #t4-main-body .t4-section-inner,
body.item-205 #t4-main-body .t4-section-inner,
body.item-208 #t4-main-body .t4-section-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.item-204 #t4-main-body .t4-row.row,
body.item-205 #t4-main-body .t4-row.row,
body.item-208 #t4-main-body .t4-row.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.item-204 #t4-main-body .t4-col.col-md,
body.item-205 #t4-main-body .t4-col.col-md,
body.item-208 #t4-main-body .t4-col.col-md {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.item-204 #t4-main-body article.item,
body.item-205 #t4-main-body article.item,
body.item-208 #t4-main-body article.item,
body.item-204 #t4-main-body .com-content-article__body,
body.item-205 #t4-main-body .com-content-article__body,
body.item-208 #t4-main-body .com-content-article__body {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ================================================================
   Lash Clusters page (item-200) — adapted from lashesfactory
   (itemid-143 + view-category rules, ref custom-143.css)
   ================================================================ */




/* =========================================

   LASH CLUSTERS BANNER (Page Header)

   Module: Lash Clusters-Banner (mod-custom, position: title)

   Page: itemid-143

   Scope: body.item-200 #sp-title

   Reference: lamylash-category-lash-clusters.html .page-header

========================================= */



/* Section wrapper */

body.item-200 #sp-section-1 #sp-section-1 {


  padding: 0 !important;

  margin: 0 !important;

  background: none !important;

  border: none !important;


}

/* Banner container */

body.item-200 #sp-section-1 #sp-title {


  padding: 0 !important;

  margin: 0 !important;

  overflow: hidden;

  background: var(--hb-cream, #FAF6F0) !important;

  border-bottom: 1px solid var(--hb-border-light, #E8DDD0) !important;

  display: block !important;

  min-height: auto !important;


}

/* Override all wrapper layers */

body.item-200 #sp-title > .container,

body.item-200 #sp-title > .container > .row,

body.item-200 #sp-title .sp-column {


  width: 100% !important;

  max-width: 100% !important;

  padding: 0 !important;

  margin: 0 !important;

  background: none !important;


}

body.item-200 #sp-title .sp-module,

body.item-200 #sp-title .sp-module-content {


  width: 100%;

  padding: 0 !important;

  margin: 0 !important;

  background: none !important;


}

/* Page Header inner */

body.item-200 .page-header {


  padding: 140px 0 60px;

  max-width: 1280px;

  margin: 0 auto;

  padding-left: 40px;

  padding-right: 40px;


}

/* Page header inner layout */

body.item-200 .page-header-inner {


  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 40px;

  padding-top: 100px;


}

/* Breadcrumb */

body.item-200 .breadcrumb {


  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 20px;


}

body.item-200 .breadcrumb a {


  font-size: 13px;

  color: #9B8E7E;

  transition: color 0.25s;

  text-decoration: none;


}

body.item-200 .breadcrumb a:hover {


  color: var(--hb-rose-gold, #C9A06F);


}

body.item-200 .breadcrumb span {


  font-size: 13px;

  color: #C4B5A5;


}

body.item-200 .breadcrumb-current {


  font-size: 13px;

  color: var(--hb-rose-gold, #C9A06F);


}

/* Description */

body.item-200 .banner-desc {


  color: #6B5E50;

  max-width: 500px;

  font-size: 0.95rem;

  line-height: 1.8;


}

/* Meta (product count) */

body.item-200 .page-header-meta {


  text-align: right;

  flex-shrink: 0;


}

body.item-200 .page-header-meta span {


  display: block;

  font-size: 13px;

  color: #9B8E7E;

  margin-bottom: 4px;


}

body.item-200 .page-header-meta strong {


  font-size: 28px;

  font-family: var(--hb-font-display);

  color: var(--hb-rose-gold, #C9A06F);


}

/* =========================================

   LASH CLUSTERS PAGE — PRODUCTS SECTION (#sp-main-body)

   Page: itemid-143

   Scope: body.com_phocacart.view-category .ph-product-module-box

   Reference: lamylash-category-lash-clusters.html .products-section .product-card

========================================= */



/* ---- Main Body Container ---- */

body.com_phocacart.view-category .ph-product-module-box {


  padding: 60px 0 120px;

  background: var(--hb-cream, #FAF6F0);


}

/* ---- Browse View Container ---- */

body.com_phocacart.view-category .ph-product-module-box {


  width: 100%;


}

/* ---- Products Grid ---- */

body.com_phocacart.view-category .products-grid {


  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;


}

/* ---- Product Card ---- */

body.com_phocacart.view-category .product-card {


  background: var(--hb-white, #FFFFFF);

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(10, 9, 7, 0.06);

  transition: transform 0.4s var(--hb-transition), box-shadow 0.4s var(--hb-transition);

  display: flex;

  flex-direction: column;


}

body.com_phocacart.view-category .product-card:hover {


  transform: translateY(-6px);

  box-shadow: 0 12px 40px rgba(10, 9, 7, 0.12);


}

/* ---- Product Card Image ---- */

body.com_phocacart.view-category .product-card-image {


  position: relative;

  overflow: hidden;

  background: #F5EDE0;


}

body.com_phocacart.view-category .product-card-image a {


  display: block;

  width: 100%;

  height: 100%;


}

body.com_phocacart.view-category .product-card-image img {


  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s var(--hb-transition);

  display: block;


}

body.com_phocacart.view-category .product-card:hover .product-card-image img {


  transform: scale(1.08);


}

/* ---- Product Card Badge ---- */

body.com_phocacart.view-category .product-card-badge {


  position: absolute;

  top: 12px;

  left: 12px;

  padding: 4px 10px;

  background: var(--hb-rose-gold, #C9A06F);

  color: var(--hb-white, #FFFFFF);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  border-radius: 100px;


}

body.com_phocacart.view-category .product-card-badge.new {


  background: var(--hb-black-deep, #0A0907);


}

/* ---- Product Card Body ---- */

body.com_phocacart.view-category .product-card-body {


  padding: 20px;

  display: flex;

  flex-direction: column;

  flex: 1;


}

/* Category */

body.com_phocacart.view-category .product-card-category {


  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--hb-rose-gold, #C9A06F);

  margin-bottom: 8px;


}

/* Title */

body.com_phocacart.view-category .product-card-title {


  font-family: var(--hb-font-display);

  font-size: 1.25rem;

  font-weight: 500;

  color: var(--hb-black-deep, #0A0907);

  margin-bottom: 8px;

  line-height: 1.3;


}

body.com_phocacart.view-category .product-card-title a {


  color: inherit;

  text-decoration: none;

  transition: color 0.25s;

  font-size:0.8em;


}

body.com_phocacart.view-category .product-card-title a:hover {


  color: var(--hb-rose-gold, #C9A06F);


}

/* Description */

body.com_phocacart.view-category .product-card-desc {


  font-size: 13px;

  color: #9B8E7E;

  margin-bottom: 16px;

  line-height: 1.6;

  flex: 1;


}

/* ---- Product Card Footer ---- */

body.com_phocacart.view-category .product-card-footer {


  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 16px;

  border-top: 1px solid rgba(232, 221, 208, 0.5);

  margin-top: auto;

  display:none;


}

/* Price */

body.com_phocacart.view-category .product-card-price {


  font-family: var(--hb-font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--hb-rose-gold, #C9A06F);


}

body.com_phocacart.view-category .product-card-price span {


  font-size: 12px;

  font-weight: 400;

  color: #9B8E7E;

  font-family: var(--hb-font-body);


}

/* Price from VM pricing system */

body.com_phocacart.view-category .product-card .vm-product-price-container {


  margin: 0;


}

body.com_phocacart.view-category .product-card .PricesalesPrice {


  font-family: var(--hb-font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--hb-rose-gold, #C9A06F);

  display: block;


}

body.com_phocacart.view-category .product-card .product-price-display {


  font-family: var(--hb-font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--hb-rose-gold, #C9A06F);


}

/* View Link */

body.com_phocacart.view-category .product-card-link {


  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #6B5E50;

  text-decoration: none;

  transition: color 0.25s;


}

body.com_phocacart.view-category .product-card-link:hover {


  color: var(--hb-rose-gold, #C9A06F);


}

body.com_phocacart.view-category .product-card-link svg {


  width: 14px;

  height: 14px;

  stroke: currentColor;

  fill: none;

  stroke-width: 2;

  transition: transform 0.25s;


}

body.com_phocacart.view-category .product-card-link:hover svg {


  transform: translateX(3px);


}

/* ---- Pagination (VirtueMart) ---- */

body.com_phocacart.view-category .vm-pagination {


  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin-top: 60px;


}

body.com_phocacart.view-category .vm-pagination a,

body.com_phocacart.view-category .vm-pagination .pagenav {


  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  font-size: 14px;

  font-weight: 500;

  color: #6B5E50;

  border: 1px solid #E8DDD0;

  background: var(--hb-white, #FFFFFF);

  transition: all 0.25s;

  text-decoration: none;


}

body.com_phocacart.view-category .vm-pagination a:hover,

body.com_phocacart.view-category .vm-pagination .pagenav:hover {


  border-color: var(--hb-rose-gold, #C9A06F);

  color: var(--hb-rose-gold, #C9A06F);


}

body.com_phocacart.view-category .vm-pagination .span,

body.com_phocacart.view-category .vm-pagination .vm-page-active {


  background: var(--hb-rose-gold, #C9A06F);

  border-color: var(--hb-rose-gold, #C9A06F);

  color: var(--hb-white, #FFFFFF);


}

@media (max-width: 600px) {
  body.com_phocacart.view-category .ph-product-module-box {
  

    padding: 40px 0 80px;

  
  }

  body.com_phocacart.view-category .products-grid {
  

    grid-template-columns: 1fr;

  
  }
}

/* ---- H1 Title ---- */
body.com_phocacart.view-category #sp-section-1 #sp-title .page-header-inner h1,
body.com_phocacart.view-category #sp-section-1 #sp-title .page-header h1 {
  font-family: var(--hb-font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--hb-black-deep);
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

body.com_phocacart.view-category #sp-section-1 #sp-title .page-header-inner h1 em,
body.com_phocacart.view-category #sp-section-1 #sp-title .page-header h1 em {
  font-style: italic;
  color: var(--hb-rose-gold, #C9A06F);
}

/* Remove default moduletable border from product grid box */
body.com_phocacart.view-category .moduletable.lc-products-box {
  border: none !important;
}






@media (min-width: 1025px) {
  body.com_phocacart.view-category .mod-breadcrumbs {
  background:transparent;margin-left:120px;
  }
}











body.com_phocacart.view-category .orderby-displaynumber {
display:none;
}

body.com_phocacart.view-category .ph-product-module-box #sp-component h1 {
display:none;
}

/* =========================================

   CATEGORY PAGE — PAGINATION & PRODUCTS

   Scope: VirtueMart category view (itemid-143)

========================================= */



/* ---- Products Grid (4 columns) ---- */

body.com_phocacart.view-category .products-grid {


    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    margin-bottom: 40px;


}

/* ---- Product Card ---- */

body.com_phocacart.view-category .product-card {


    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;


}

body.com_phocacart.view-category .product-card:hover {


    transform: translateY(-8px);

    box-shadow: 0 12px 24px rgba(0,0,0,0.1);


}

/* ---- Product Image ---- */

body.com_phocacart.view-category .product-card-image {


    position: relative;

    aspect-ratio: 4/3;

    overflow: hidden;


}

body.com_phocacart.view-category .product-card-image img {


    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;


}

body.com_phocacart.view-category .product-card:hover .product-card-image img {


    transform: scale(1.05);


}

/* ---- Product Badge ---- */

body.com_phocacart.view-category .product-card-badge {


    position: absolute;

    top: 12px;

    left: 12px;

    background: #e8a4b4;

    color: #fff;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;


}

/* ---- Product Body ---- */

body.com_phocacart.view-category .product-card-body {


    padding: 16px;


}

body.com_phocacart.view-category .product-card-category {


    color: #888;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;


}

body.com_phocacart.view-category .product-card-title {


    font-size: 1.3em;

    font-weight: 300;

    margin-bottom: 8px;

    line-height: 1.4;


}

body.com_phocacart.view-category .product-card-title a {


    color: #333;

    text-decoration: none;

    transition: color 0.3s ease;

    font-size:0.8em;


}

body.com_phocacart.view-category .product-card-title a:hover {


    color: #C9A06F;


}

body.com_phocacart.view-category .product-card-desc {


    color: #666;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 16px;


}

/* ---- Product Footer ---- */

body.com_phocacart.view-category .product-card-footer {


    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 12px;

    border-top: 1px solid #eee;


}

body.com_phocacart.view-category .product-card-price {


    font-size: 18px;

    font-weight: 700;

    color: #333;


}

body.com_phocacart.view-category .product-card-price .price-per {


    font-size: 12px;

    font-weight: 400;

    color: #888;


}

body.com_phocacart.view-category .product-card-link {


    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #C9A06F;

    font-weight: 600;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;


}

body.com_phocacart.view-category .product-card-link:hover {


    color: #0A0907;


}

body.com_phocacart.view-category .product-card-link svg {


    transition: transform 0.3s ease;


}

body.com_phocacart.view-category .product-card-link:hover svg {


    transform: translateX(4px);


}

/* ---- Orderby Display Number ---- */

body.com_phocacart.view-category .orderby-displaynumber {


    display:none;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

    flex-wrap: wrap;

    gap: 16px;


}

/* ---- Products Per Page Selector ---- */

body.com_phocacart.view-category .vm-products-per-page {


    display: flex;

    align-items: center;

    gap: 8px;


}

body.com_phocacart.view-category .vm-products-per-page label {


    font-size: 14px;

    color: #666;


}

body.com_phocacart.view-category .vm-products-per-page select#limit {


    padding: 8px 32px 8px 12px;

    border: 1px solid #ddd;

    border-radius: 6px;

    background: #fff;

    font-size: 14px;

    color: #333;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 10px center;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;


}

body.com_phocacart.view-category .vm-products-per-page select#limit:hover {


    border-color: #C9A06F;


}

body.com_phocacart.view-category .vm-products-per-page select#limit:focus {


    outline: none;

    border-color: #C9A06F;

    box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.15);


}

/* ---- Pagination (Reference: lamylash-category-lash-clusters.html .pagination) ---- */

body.com_phocacart.view-category .pagination {


    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 60px;

    list-style: none;

    padding: 0;


}

body.com_phocacart.view-category .pagination li {


    display: inline-block;


}

body.com_phocacart.view-category .pagination-btn {


    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 500;

    color: var(--text-secondary, #6B5E50);

    border: 1px solid var(--border-light, #E8DDD0);

    background: var(--white, #FFFFFF);

    transition: all 0.25s ease;

    cursor: pointer;

    text-decoration: none;


}

body.com_phocacart.view-category .pagination-btn:hover {


    border-color: var(--rose-gold, #C9A06F);

    color: var(--rose-gold, #C9A06F);


}

body.com_phocacart.view-category .pagination-btn.active {


    background: var(--rose-gold, #C9A06F);

    border-color: var(--rose-gold, #C9A06F);

    color: var(--white, #FFFFFF);


}

body.com_phocacart.view-category .pagination-btn svg {


    width: 18px;

    height: 18px;

    stroke: currentColor;

    fill: none;

    stroke-width: 2;


}

/* VirtueMart default pagination class overrides */

body.com_phocacart.view-category .pagination li a,

body.com_phocacart.view-category .pagination li span {


    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 44px;

    padding: 0;

    border: 1px solid var(--border-light, #E8DDD0);

    border-radius: 4px;

    color: var(--text-secondary, #6B5E50);

    background: var(--white, #FFFFFF);

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.25s ease;


}

body.com_phocacart.view-category .pagination li a:hover {


    border-color: var(--rose-gold, #C9A06F);

    color: var(--rose-gold, #C9A06F);

    background: rgba(201, 160, 111, 0.08);


}

body.com_phocacart.view-category .pagination li.active a,

body.com_phocacart.view-category .pagination li.active span,

body.com_phocacart.view-category .pagination li.current a,

body.com_phocacart.view-category .pagination li.current span {


    background: var(--rose-gold, #C9A06F);

    border-color: var(--rose-gold, #C9A06F);

    color: var(--white, #FFFFFF);


}

/* Pagination container */

body.com_phocacart.view-category .orderby-displaynumber {


    margin-top: 40px;

    padding-top: 24px;


}

body.com_phocacart.view-category .vm-page-counter {


    display: none;


}

@media (max-width: 768px) {
  body.com_phocacart.view-category .products-grid {
  

        grid-template-columns: repeat(2, 1fr);

        gap: 16px;

    
  }

  body.com_phocacart.view-category .product-card-body {
  

        padding: 12px;

    
  }

  body.com_phocacart.view-category .product-card-title {
  

        font-size: 14px;

    
  }

  body.com_phocacart.view-category .product-card-price {
  

        font-size: 16px;

    
  }

  body.com_phocacart.view-category .orderby-displaynumber {
  

        flex-direction: column;

        align-items: flex-start;

    
  }
}

@media (max-width: 480px) {
  body.com_phocacart.view-category .products-grid {
  

        grid-template-columns: 1fr;

    
  }

  body.com_phocacart.view-category .pagination li a,

    body.com_phocacart.view-category .pagination li span {
  

        min-width: 36px;

        height: 36px;

        font-size: 13px;

    
  }
}

body.com_phocacart.view-category #sp-section-4 {
display:none;
}



body.com_phocacart.view-category #sp-section-1 .banner-desc {


  color: #6B5E50;

  font-size: 0.95rem;

  line-height: 1.8;

  margin: 0;

  max-width: 500px;
}

/* ================================================================
   Lash Clusters page (item-200): T4 layer full-width handling
   (same pattern as Service/About/Contact)
   .view-productdetails a, body.com_phocacart.view-category a {
color:#C9A06F;
}
   ================================================================ */
body.com_phocacart.view-category #t4-breadcrumbs { display: none !important; }
body.com_phocacart.view-category #t4-main-body { padding: 0 !important; background: var(--hb-cream, #FAF6F0); }
body.com_phocacart.view-category #t4-main-body .t4-section-inner.container,
body.com_phocacart.view-category #t4-main-body .t4-section-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.com_phocacart.view-category #t4-main-body .t4-row.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.com_phocacart.view-category #t4-main-body .t4-col.col-md {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
body.com_phocacart.view-category #t4-main-body article.item,
body.com_phocacart.view-category #t4-main-body .com-content-article__body,
body.com_phocacart.view-category #t4-main-body .com-content-article.item-page {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.com_phocacart.view-category #t4-main-body .page-header,
body.com_phocacart.view-category #t4-main-body .article-info { display: none !important; }

/* Products grid inner container (equivalent of reference #sp-main-body > .container) */
body.com_phocacart.view-category .ph-product-module-box .products-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Product images rendered by Phoca layout: square crop like reference */
body.com_phocacart.view-category .product-card-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Phoca price output inside the card */
body.com_phocacart.view-category .product-card-price .price,
body.com_phocacart.view-category .product-card-price .ph-category-price-box {
  font-family: var(--hb-font-display, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--hb-rose-gold, #C9A06F);
}

/* Module heading (used by lc-related if ever enabled) */
body.com_phocacart.view-category .lc-module-heading h3 {
  font-family: var(--hb-font-display, 'Cormorant Garamond', serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0 40px;
}

/* Module heading (used by lc-related if ever enabled) */
body.com_phocacart.view-category .lc-module-heading h3 {
  font-family: var(--hb-font-display, 'Cormorant Garamond', serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0 40px;
}

/* Related section hidden (reference hides .view-category #sp-section-4) */
body.com_phocacart.view-category .lc-related-box { display: none !important; }

/* =========================================
   LASH CLUSTERS PAGE — HEADER (H1 + DESC + BREADCRUMB)
   Scope: VirtueMart category page header (itemid-200)
   Reference: lamylash.com/products/lash-clusters
   ========================================= */

/* NOTE: H1 styling (font / italic gold <em>) is handled by the existing
   "item-200 H1 Title" block (#sp-title .page-header-inner h1) above. */

/* Category description (brown text, narrow) */
body.com_phocacart.view-category .category_description {
  color: #6B5E50;
  max-width: 520px;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0 0 24px 0;
}

body.com_phocacart.view-category .category_description p {
  margin: 0;
  color: #6B5E50;
}

/* Breadcrumb wrapper — align with .page-header container */
body.com_phocacart.view-category .mod-breadcrumbs {
  background: transparent;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

body.com_phocacart.view-category .mod-breadcrumbs ol.mod-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

/* Breadcrumb items */
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item {
  font-size: 13px;
  color: #9B8E7E;
}

body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item a,
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item span,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item a,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item span {
  font-size: 13px;
  color: #9B8E7E;
  text-decoration: none;
  transition: color 0.25s;
}

body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item a:hover,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

/* Active (current page) breadcrumb item */
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item.active span,
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item.active a,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item.active span {
  color: var(--hb-rose-gold, #C9A06F);
}

/* Breadcrumb divider — location pin icon */
body.com_phocacart.view-category .mod-breadcrumbs__divider {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 6px 0 0;
  list-style: none;
}

body.com_phocacart.view-category .mod-breadcrumbs__divider .divider {
  display: inline-block;
  width: 13px;
  height: 13px;
  font-size: 13px;
  line-height: 1;
  color: var(--hb-rose-gold, #C9A06F);
  text-indent: 0;
}

/* Force a location pin icon (SVG) — fallback for Font Awesome 5 */
body.com_phocacart.view-category .mod-breadcrumbs__divider .icon-location,
body.com_phocacart.view-category .mod-breadcrumbs__divider .divider {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

body.com_phocacart.view-category .mod-breadcrumbs__divider .icon-location::before,
body.com_phocacart.view-category .mod-breadcrumbs__divider .divider::before {
  content: "\f3c5"; /* fa-map-marker-alt */
  color: var(--hb-rose-gold, #C9A06F);
  font-size: 13px;
  line-height: 1;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

/* Bootstrap default "/" separator — override T4's display:none */
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
body.com_phocacart.view-category .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item:before,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item + .mod-breadcrumbs__item::before,
body.com_phocacart.view-category .mod-breadcrumbs .mod-breadcrumbs__item + .mod-breadcrumbs__item:before {
  content: "/" !important;
  display: inline-block !important;
  color: #9B8E7E !important;
  padding: 0 8px !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  float: none !important;
}

/* Breadcrumb "You are here" text — hide for clean pin/slash look */
body.com_phocacart.view-category .mod-breadcrumbs__here {
  display: none;
}

/* =========================================
   PHOCA CART PRODUCT DETAIL PAGE
   Scope: com_phocacart view-item
========================================= */

body.com_phocacart.view-item #ph-pc-item-box {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
}

body.com_phocacart.view-item .ph-top {
  margin-bottom: 20px;
}

body.com_phocacart.view-item .ph-top .btn-secondary {
  background: transparent;
  border: 1px solid var(--hb-rose-gold, #C9A06F);
  color: var(--hb-rose-gold, #C9A06F);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.com_phocacart.view-item .ph-top .btn-secondary:hover {
  background: var(--hb-rose-gold, #C9A06F);
  color: #fff;
}

/* Title */
body.com_phocacart.view-item .ph-item-price-panel h1.ph-header {
  font-family: var(--hb-font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 600;
  color: var(--hb-black-deep, #0A0907);
  line-height: 1.15;
  margin-bottom: 16px;
}

/* SKU   display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;*/
body.com_phocacart.view-item .ph-item-sku-box {
  display:none;
}

body.com_phocacart.view-item .ph-item-sku-box .ph-sku-txt,
body.com_phocacart.view-item .ph-item-sku-box .ph-sku {
  float: none;
}

body.com_phocacart.view-item .ph-item-sku-box .ph-sku {
  color: #9B8E7E;
}

/* Available Options */
body.com_phocacart.view-item .ph-available-options-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  color: var(--hb-black-deep, #0A0907);
  margin: 24px 0 16px;
  font-weight: 400;
}

body.com_phocacart.view-item .ph-attribute-title {
  font-size: 14px;
  font-weight: 500;
  margin: 16px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Attribute image buttons — shrink to small swatches */
body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage {
  display: inline-block;
  position: relative;
  width: 72px;
  height: 72px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px;
  transition: border-color 0.2s ease;
  background: #fff;
  vertical-align: top;
}

body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage input[type='checkbox'] {
  display: none !important;
}

body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage svg {
  display: none;
}

body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage:hover,
body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage.active {
  border-color: var(--hb-rose-gold, #C9A06F);
}

body.com_phocacart.view-item #phItemAttributesBox .btn.phCheckBoxButton.phCheckBoxImage.active svg {
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  padding: 3px;
  background: var(--hb-rose-gold, #C9A06F);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Main image */
body.com_phocacart.view-item .ph-item-view-image-box .ph-item-image-full-box img {
  border-radius: 8px;
  border: none !important;
}

body.com_phocacart.view-item .ph-item-view-image-box .ph-item-image-add-box .ph-item-image-box {
  margin: 8px 4px;
}

body.com_phocacart.view-item .ph-item-view-image-box .ph-item-image-add-box img {
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

/* Product info column spacing */
body.com_phocacart.view-item .ph-item-view-data-box {
  padding-left: 40px;
}

@media (max-width: 767px) {
  body.com_phocacart.view-item .ph-item-view-data-box {
    padding-left: 15px;
    margin-top: 30px;
  }
}

/* Ask a Question button */
body.com_phocacart.view-item .btn.ph-btn {
  background: transparent;
  border: 1px solid var(--hb-rose-gold, #C9A06F);
  color: var(--hb-rose-gold, #C9A06F);
  border-radius: 24px;
  padding: 8px 20px;
  font-size: 1.1em;
  margin-top: 20px;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #d4af6a, #a07c3a);
  color:#3B2103;
}

body.com_phocacart.view-item .btn.ph-btn:hover {
  background: var(--hb-rose-gold, #C9A06F);
  color: #fff;
}

/* Hide "Powered by Phoca Cart" - covered by unified rule below */

/* Tabs */
body.com_phocacart.view-item .ph-item-bottom-box {
  margin-top: 40px;
}

body.com_phocacart.view-item .ph-item-bottom-box .nav-tabs {
  border-bottom: 1px solid #E9E3DB;
}

body.com_phocacart.view-item .ph-item-bottom-box .nav-tabs .nav-link {
  border: none;
  color: #6B5E50;
  font-weight: 500;
  padding: 12px 20px;
}

body.com_phocacart.view-item .ph-item-bottom-box .nav-tabs .nav-link.active {
  color: var(--hb-rose-gold, #C9A06F);
  border-bottom: 2px solid var(--hb-rose-gold, #C9A06F);
  background: transparent;
  font-size:1.2em;
}

body.com_phocacart.view-item .ph-item-bottom-box .tab-content {
  padding: 24px 0;
}
.ph-button-ask-question-box{
float:left;
}

/* =========================================
   PHOCA CART PRODUCT DETAIL — BREADCRUMB
========================================= */

/* Offset fixed header so breadcrumb is not hidden behind it */
body.com_phocacart.view-item {
  padding-top: 72px !important;
}

/* Breadcrumb section wrapper */
body.com_phocacart.view-item #t4-breadcrumbs {
  background: var(--hb-cream, #FAF6F0);
  border-bottom: none;
  padding: 16px 0;
}

body.com_phocacart.view-item #t4-breadcrumbs .t4-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

body.com_phocacart.view-item .mod-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 0;
}

body.com_phocacart.view-item .mod-breadcrumbs ol.mod-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* Breadcrumb items */
body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item {
  font-size: 13px;
  color: #9B8E7E;
  padding: 0;
}

body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item a,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item a {
  color: var(--hb-rose-gold, #C9A06F);
  text-decoration: none;
}

body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item a:hover,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item a:hover {
  color: #B8936A;
  text-decoration: underline;
}

body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item.active span,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item.active span {
  color: #9B8E7E;
}

/* Hide "You are here" text (if param ever re-enabled) */
body.com_phocacart.view-item .mod-breadcrumbs__here {
  display: none !important;
}

/* Slash separator between items */
body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  content: "/" !important;
  display: inline-block !important;
  color: #9B8E7E;
  padding: 0 6px;
  font-weight: 400;
  font-size: 13px;
  float: none;
}

/* Align location pin with breadcrumb text */
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__divider,
body.com_phocacart.view-item .mod-breadcrumbs .breadcrumb-item,
body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  float: none !important;
  line-height: 1;
}

body.com_phocacart.view-item .mod-breadcrumbs .mod-breadcrumbs__divider svg {
  display: block;
  width: 13px;
  height: 13px;
}

/* Ask a Question modal styles */

/* Fix: .t4-wrapper has z-index:3 which creates a stacking context,
   causing .modal-backdrop (z-index:1050 at body level) to render
   above the modal content. Remove wrapper stacking context while modal is open. */
body.modal-open.com_phocacart.view-item .t4-wrapper {
  z-index: auto !important;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-dialog {
  max-width: 540px !important;
  width: 100%;
  margin: 1.5rem auto;
  display: flex;
  align-items: center;
  min-height: calc(100% - 3rem);
}

/* Override Bootstrap modal-lg (min-width: 992px → 800px) for our popup */
@media (min-width: 992px) {
  body.com_phocacart.view-item #phAskAQuestionPopup.modal .modal-dialog,
  body.com_phocacart.view-item #phAskAQuestionPopup.modal .modal-dialog.modal-lg {
    max-width: 540px !important;
  }
}

/* Stay narrow at every Bootstrap breakpoint */
@media (min-width: 1200px) {
  body.com_phocacart.view-item #phAskAQuestionPopup .modal-dialog {
    max-width: 540px !important;
  }
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-content {
  border: none;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(10, 9, 7, 0.22);
  overflow: hidden;
  background: #fff;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-header {
  position: relative;
  justify-content: center;
  border-bottom: 1px solid #f0ebe4;
  padding: 18px 24px 14px;
  background: linear-gradient(180deg, #fdfaf6 0%, #ffffff 100%);
  flex-shrink: 0;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--hb-black-deep, #0A0907);
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-title svg {
  width: 20px;
  height: 20px;
  color: var(--hb-rose-gold, #C9A06F);
  margin: 0;
  vertical-align: middle;
}

body.com_phocacart.view-item #phAskAQuestionPopup .btn-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background-size: 12px;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

body.com_phocacart.view-item #phAskAQuestionPopup .btn-close:hover {
  opacity: 1;
  background-color: #f5f0eb;
}

body.com_phocacart.view-item #phAskAQuestionPopup .btn-close:focus {
  box-shadow: none;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body {
  position: relative;
  min-height: 380px;
  height: auto;
  max-height: calc(100vh - 200px);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  flex: 1 1 auto;
  /* Slim, themed scrollbar (modal area) */
  scrollbar-width: thin;
  scrollbar-color: #c9a06f #faf6f0;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body::-webkit-scrollbar {
  width: 8px;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body::-webkit-scrollbar-track {
  background: #faf6f0;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body::-webkit-scrollbar-thumb {
  background: #c9a06f;
  border-radius: 4px;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body::-webkit-scrollbar-thumb:hover {
  background: #b8936a;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

body.com_phocacart.view-item #phAskAQuestionPopup .modal-footer:empty {
  display: none;
}

/* Question page inside modal iframe */
body.com_phocacart.view-question {
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  /* Re-declare brand tokens inside the modal iframe document context */
  --hb-cream: #FAF6F0;
  --hb-rose-gold: #C9A06F;
  --hb-rose-gold-lt: #D4B88A;
  --hb-rose-gold-dk: #A8784A;
  --hb-rose-gold-pale: #EDD9BE;
  --hb-border: #E8DDD0;
}

body.com_phocacart.view-question #ph-pc-question-box {
  padding: 0 !important;
  margin: 0 !important;
}

body.com_phocacart.view-question .pc-question-view .ph-item-image-full-box,
body.com_phocacart.view-question .pc-question-view .ph-item-image-full-left-box {
  display: flex !important;
  justify-content: center;
  margin: 0;
  padding: 18px 28px 4px;
}

body.com_phocacart.view-question .pc-question-view .ph-item-image-full-box img,
body.com_phocacart.view-question .pc-question-view .ph-item-image-full-left-box img {
  border-radius: 10px;
  border: 1px solid var(--hb-border, #E8DDD0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  max-width: 150px !important;
  height: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.com_phocacart.view-question .pc-question-view .ph-item-image-full-box img:hover,
body.com_phocacart.view-question .pc-question-view .ph-item-image-full-left-box img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

body.com_phocacart.view-question .pc-question-view h1.ph-header {
  display: none;
}

body.com_phocacart.view-question .pc-question-view h2 {
  font-family: var(--hb-body-font, 'Lato', sans-serif);
  font-size: 0.92rem;
  font-weight: 400;
  text-align: center;
  color: var(--hb-rose-gold, #C9A06F);
  margin: 0;
  padding: 14px 28px 6px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

body.com_phocacart.view-question .pc-question-view .row {
  margin: 0;
}

body.com_phocacart.view-question .pc-question-view .row > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0;
}

body.com_phocacart.view-question .pc-question-view form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 28px 22px;
}

body.com_phocacart.view-question .pc-question-view .control-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 12px;
}

body.com_phocacart.view-question .pc-question-view .control-group:has(.control-label:empty):has(.controls:empty) {
  display: none;
}

body.com_phocacart.view-question .pc-question-view .control-label,
body.com_phocacart.view-question .pc-question-view .controls {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  text-align: left !important;
  float: none !important;
  margin: 0;
}

body.com_phocacart.view-question .pc-question-view .control-label label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #5a5046;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

body.com_phocacart.view-question .pc-question-view .control-label label .star {
  color: var(--hb-rose-gold, #C9A06F);
  margin-left: 2px;
}

body.com_phocacart.view-question .pc-question-view .form-control {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  border: 1px solid #e0d8cf;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--hb-black-deep, #0A0907);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: auto;
}

body.com_phocacart.view-question .pc-question-view .form-control:focus {
  border-color: var(--hb-rose-gold, #C9A06F);
  box-shadow: 0 0 0 3px rgba(201, 160, 111, 0.12);
  outline: none;
}

body.com_phocacart.view-question .pc-question-view .chzn-container,
body.com_phocacart.view-question .pc-question-view .chosen-container {
  width: 100% !important;
}

body.com_phocacart.view-question .pc-question-view select.form-control,
body.com_phocacart.view-question .pc-question-view .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A06F' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}

body.com_phocacart.view-question .pc-question-view textarea.ph-question-message {
  min-height: 72px;
  resize: vertical;
}

body.com_phocacart.view-question .pc-question-view .btn-toolbar {
  margin-top: 14px;
  padding: 0;
  text-align: center;
}

body.com_phocacart.view-question .pc-question-view .btn-toolbar .btn-group {
  display: block;
  float: none;
}

body.com_phocacart.view-question .pc-question-view .btn-toolbar .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hb-black-deep, #0A0907);
  border-color: var(--hb-black-deep, #0A0907);
  border-radius: 999px;
  padding: 11px 46px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

body.com_phocacart.view-question .pc-question-view .btn-toolbar .btn-primary:hover {
  background: var(--hb-rose-gold, #C9A06F);
  border-color: var(--hb-rose-gold, #C9A06F);
  color: #fff;
  transform: translateY(-1px);
}

body.com_phocacart.view-question .pc-question-view .btn-toolbar .btn-primary svg {
  width: 16px;
  height: 16px;
}

/* Themed scrollbar in iframe body as well (extra graceful fallback) */
body.com_phocacart.view-question::-webkit-scrollbar,
body.com_phocacart.view-question html::-webkit-scrollbar {
  width: 8px;
}

body.com_phocacart.view-question::-webkit-scrollbar-thumb,
body.com_phocacart.view-question html::-webkit-scrollbar-thumb {
  background: #c9a06f;
  border-radius: 4px;
}

body.com_phocacart.view-question::-webkit-scrollbar-track,
body.com_phocacart.view-question html::-webkit-scrollbar-track {
  background: #faf6f0;
}

/* Country row - same look as other inputs */
body.com_phocacart.view-question .pc-question-view .ph-q-country-row select {
  background-color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  body.com_phocacart.view-item #t4-breadcrumbs .t4-section-inner {
    padding: 0 20px;
  }
}
.ph-manufacturer{
float:left !important;
margin-left:10px;
}
.ph-manufacturer a{
color:#9B8E7E;
}
body.com_phocacart.view-item form .phSelectBoxImage{
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px;
  transition: border-color 0.2s ease;
  background: #fff;
  vertical-align: top;
}
/* Custom menu styles matching the lashesfactory reference site */
/* PhocaCart 商品详情 变体图片单选框 一行6列 */
.ph-item-image-add-box .ph-item-image-box{
    flex: 0 0 18% !important; /* 100 /6 = 16.66%，一行6个 */
    max-width: 18% !important;
    padding: 0 6px !important;
}
/* 缩小缩略图内边距，防止挤爆 */
..ph-item-image-add-box .ph-item-image-box img {
    max-width: 100%;
    height: auto;
}
/* 响应式适配：平板一行3个，手机一行2个，避免过小 */
@media (max-width: 991px) {
    ..ph-item-image-add-box .ph-item-image-box {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}
@media (max-width: 575px) {
    ..ph-item-image-add-box .ph-item-image-box {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
.ph-item-price-panel form h4.ph-available-options-title{
display:none;
}
body.modal-open .modal{background-color: transparent;}
/* =========================================
   PHOCA CART CATEGORY OVERRIDE �� LAMYLASH
   Scope: .com_phocacart.view-category
   ========================================= */

/* ---- Hero ---- */
.lamylash-category-hero {
  position: relative;
  background: #F5EDE0;
  padding: 72px 0 36px;
  margin-top: -72px;
  padding-top: calc(72px + 72px);
  overflow: hidden;
}

.lamylash-category-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245,237,224,0.6) 0%, rgba(245,237,224,1) 100%);
  pointer-events: none;
}

.lamylash-category-hero .container {
  position: relative;
  z-index: 2;
}

.lamylash-category-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.8rem, 6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  color: #0A0907;
  padding-top: 30px;
}

.lamylash-title-dark {
  color: #0A0907;
  font-style: normal;
}

.lamylash-title-accent {
  color: #C9A06F;
  font-style: italic;
  margin-left: 0.3em;
  font-weight: 500;
}

.lamylash-category-lead {
  max-width: 720px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4A4039;
  margin-bottom: 28px;
}

.lamylash-category-lead p {
  margin: 0;
}

.lamylash-hero-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  color: #7D7267;
  margin-top:50px;
}

.lamylash-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C9A06F;
  text-decoration: none;
  transition: color 0.25s;
}

.lamylash-crumb:hover {
  color: #0A0907;
}

.lamylash-crumb svg {
  flex-shrink: 0;
  stroke: #C9A06F;
}

.lamylash-crumb:hover svg {
  stroke: #0A0907;
}

.lamylash-crumb-current {
  color: #6B5E50;
  font-weight: 500;
}

.lamylash-crumb-sep {
  color: #C9A06F;
  user-select: none;
}

/* ---- Hide toolbar (Ordering / Display Num / Layout switch) ---- */
.com_phocacart.view-category .ph-pagination-top,
.com_phocacart.view-category .ph-pagination-bottom,
.com_phocacart.view-category .ph-pagination {
  display: none !important;
}

/* ---- Toolbar / pagination top ---- */
.com_phocacart.view-category .ph-pagination-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  margin: 0;
  border-bottom: 1px solid rgba(201,160,111,0.18);
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  color: #6B5E50;
}

.com_phocacart.view-category .ph-pagination-top .form-select {
  background-color: #fff;
  border: 1px solid #E8DDD0;
  border-radius: 8px;
  padding: 7px 32px 7px 14px;
  font-size: 13px;
  color: var(--hb-black-deep, #0A0907);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A06F' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
}

.com_phocacart.view-category .ph-pagination-top .form-select:focus {
  border-color: var(--hb-rose-gold, #C9A06F);
  box-shadow: 0 0 0 3px rgba(201,160,111,0.12);
  outline: none;
}

.com_phocacart.view-category .phItemSwitchLayoutType {
  background: transparent;
  border: 1px solid #E8DDD0;
  color: #6B5E50;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.com_phocacart.view-category .phItemSwitchLayoutType.active,
.com_phocacart.view-category .phItemSwitchLayoutType:hover {
  background: var(--hb-rose-gold, #C9A06F);
  border-color: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-white, #fff);
}

.com_phocacart.view-category .phItemSwitchLayoutType svg {
  width: 18px;
  height: 18px;
}

/* ---- Product Grid (applies to ALL Phoca Cart category pages) ---- */
.com_phocacart.view-category .lamylash-products-grid,
.com_phocacart.view-category #phItems.lamylash-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  padding: 40px max(28px, calc((100vw - 1280px) / 3)) 28px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mirror reference site's max-width container (Tailwind container xl=1280px / 2xl=1536px) */
.com_phocacart.view-category #phItemsBox {
  max-width: 1536px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure parent containers do not break our padding */
.com_phocacart.view-category #phItems {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure product cards fill their grid column and don't collapse */
.lamylash-product-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---- Product Card ---- */
.lamylash-product-card {
  background: var(--hb-white, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,9,7,0.05);
  transition: transform 0.4s var(--hb-transition, ease), box-shadow 0.4s var(--hb-transition, ease);
  display: flex;
  flex-direction: column;
}

.lamylash-product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 46px rgba(10,9,7,0.11);
}

.lamylash-card-image-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #F5EDE0;
}

.lamylash-card-image-wrap .phIBoxOH,
.lamylash-card-image-wrap .phIBox,
.lamylash-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s var(--hb-transition, ease);
}

.lamylash-product-card:hover .lamylash-card-image-wrap img {
  transform: scale(1.07);
}

.lamylash-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-white, #fff);
  background: var(--hb-rose-gold, #C9A06F);
}

.lamylash-badge-new  { background: var(--hb-black-deep, #0A0907); }
.lamylash-badge-hot  { background: var(--hb-rose-gold, #C9A06F); }
.lamylash-badge-featured { background: #7C6A55; }

.lamylash-card-body {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lamylash-card-meta {
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-rose-gold, #C9A06F);
  margin-bottom: 8px;
}

.lamylash-card-meta a {
  color: inherit;
  text-decoration: none;
}

.lamylash-card-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.28;
  margin: 0 0 10px;
}

.lamylash-card-title a {
  color: var(--hb-black-deep, #0A0907);
  text-decoration: none;
  transition: color 0.25s;
}

.lamylash-card-title a:hover {
  color: var(--hb-rose-gold, #C9A06F);
}

.lamylash-card-desc {
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: #7D7267;
  margin: 0 0 16px;
  flex: 1;
}

.lamylash-card-price {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--hb-rose-gold, #C9A06F);
  margin-bottom: 16px;
}

.lamylash-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(232,221,208,0.6);
}

.lamylash-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  text-decoration: none;
  transition: color 0.25s, gap 0.25s;
}

.lamylash-card-link:hover {
  color: var(--hb-rose-gold, #C9A06F);
  gap: 11px;
}

.lamylash-card-link svg {
  stroke: currentColor;
}

/* ---- Hide old PhocaCart card elements we don't want ---- */
.lamylash-product-card .ph-category-action-icons,
.lamylash-product-card .ph-category-action-box-buttons,
.lamylash-product-card .ph-category-action-buttons,
.lamylash-product-card .ph-button-view-product-box,
.lamylash-product-card .ph-button-ask-question-box,
.lamylash-product-card .ph-manufacturer-box-header,
.lamylash-product-card .ph-item-desc {
  display: none !important;
}

/* ---- Pagination bottom ---- */
.com_phocacart.view-category .ph-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(201,160,111,0.18);
}

.com_phocacart.view-category .ph-pagination .form-select {
  background-color: #fff;
  border: 1px solid #E8DDD0;
  border-radius: 8px;
  padding: 7px 32px 7px 14px;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A06F' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .lamylash-products-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

@media (max-width: 991px) {
  .lamylash-products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .lamylash-category-hero { padding-bottom: 30px; padding-top: calc(60px + 72px); }
  /* ---- Product Grid (applies to ALL Phoca Cart category pages) ---- */
.com_phocacart.view-category .lamylash-products-grid,
.com_phocacart.view-category #phItems.lamylash-products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  padding: 40px max(28px, calc((100vw - 1280px) / 3)) 28px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
}

@media (max-width: 575px) {
  .lamylash-products-grid { grid-template-columns: 1fr; }
  .lamylash-category-hero { padding-top: calc(56px + 72px); }
  .lamylash-category-title { font-size: 2.2rem; }
  .lamylash-title-accent { margin-left: 0.2em; }
  /* ---- Product Grid (applies to ALL Phoca Cart category pages) ---- */
.com_phocacart.view-category .lamylash-products-grid,
.com_phocacart.view-category #phItems.lamylash-products-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 28px !important;
  padding: 40px max(28px, calc((100vw - 1280px) / 3)) 28px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
}

/* ---- T4 main body adjustment for category pages ---- */
.com_phocacart.view-category .t4-main-body {
  padding-top: 0 !important;
}

/* Hide "Powered by Phoca Cart" credit - all Phoca Cart views */
.com_phocacart div[style*="text-align:right;display:block"] {
  display: none !important;
}

/* =========================================
   RELATED PRODUCTS SECTION
   Loaded from position "lamylash-related"
   Uses same card design as main grid
   ========================================= */
.lamylash-related-section {
  background: #FAF6F0;
  padding: 72px 0 80px;
  margin-top: 40px;
  border-top: 1px solid rgba(201,160,111,0.15);
}

.lamylash-section-heading {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  color: #0A0907;
  text-align: center;
  margin: 0 0 48px;
  position: relative;
}

.lamylash-section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #C9A06F;
  margin: 18px auto 0;
}

/* Make the Phoca Cart product module use our card styling */
.lamylash-related-section .ph-product-module-box .products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.lamylash-related-section .product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,9,7,0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.lamylash-related-section .product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 46px rgba(10,9,7,0.11);
}

.lamylash-related-section .product-card-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F5EDE0;
  padding: 0;
}

.lamylash-related-section .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}

.lamylash-related-section .product-card:hover .product-card-image img {
  transform: scale(1.07);
}

.lamylash-related-section .product-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lamylash-related-section .product-card-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 18px 20px 12px;
  margin: 0;
  flex: 1;
}

.lamylash-related-section .product-card-title a {
  color: #0A0907;
  text-decoration: none;
  transition: color 0.25s;
}

.lamylash-related-section .product-card-title a:hover {
  color: #C9A06F;
}

.lamylash-related-section .product-card-footer {
  margin-top: auto;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(232,221,208,0.6);
}

.lamylash-related-section .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  text-decoration: none;
  transition: color 0.25s, gap 0.25s;
}

.lamylash-related-section .product-card-link:hover {
  color: #C9A06F;
  gap: 11px;
}

.lamylash-related-section .product-card-link svg {
  stroke: currentColor;
}

/* Hide price/description/buttons in related cards */
.lamylash-related-section .product-card-price,
.lamylash-related-section .product-card-desc,
.lamylash-related-section .ph-mod-product-buttons,
.lamylash-related-section .ph-mod-product-stock,
.lamylash-related-section .ph-mod-product-actions,
.lamylash-related-section .ph-mod-product-rating,
.lamylash-related-section .ph-product-add-to-cart,
.lamylash-related-section .ph-product-ask-question,
.lamylash-related-section .ph-product-compare,
.lamylash-related-section .ph-product-wishlist {
  display: none !important;
}

@media (max-width: 991px) {
  .lamylash-related-section .ph-product-module-box .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .lamylash-related-section .ph-product-module-box .products-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   RELATED PRODUCTS — applies when Phoca Cart module's actual class
   is "lamylash-related-module" (the Phoca mod_phocacart_product module
   merges its own class with the Joomla moduleclass_sfx).
   The .lamylash-related-section rules above were never matched because
   the Phoca module wraps itself with its own class, leaving no separate
   "section" wrapper. These rules match the actual DOM:
     <div class="ph-product-module-box lamylash-related-module">
        <div class="products-grid">
          <div class="product-card">…
   ========================================= */
.lamylash-related-module {
  padding: 72px 0 80px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(201,160,111,0.15);
  max-width: 1320px;
  box-sizing: border-box;
}
.lamylash-related-module .products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 100%;
}
.lamylash-related-module .product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,9,7,0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.lamylash-related-module .product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 46px rgba(10,9,7,0.11);
}
.lamylash-related-module .product-card-image {
  overflow: hidden;
  background: #F5EDE0;
  padding: 0;
}
.lamylash-related-module .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.lamylash-related-module .product-card:hover .product-card-image img {
  transform: scale(1.07);
}
.lamylash-related-module .product-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lamylash-related-module .product-card-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 18px 20px 12px;
  margin: 0;
  flex: 1;
}
.lamylash-related-module .product-card-title a {
  color: #0A0907;
  text-decoration: none;
  transition: color 0.25s;
}
.lamylash-related-module .product-card-title a:hover {
  color: #C9A06F;
}
.lamylash-related-module .product-card-footer {
  margin-top: auto;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(232,221,208,0.6);
}
.lamylash-related-module .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5E50;
  text-decoration: none;
  transition: color 0.25s, gap 0.25s;
}
.lamylash-related-module .product-card-link:hover {
  color: #C9A06F;
  gap: 11px;
}
.lamylash-related-module .product-card-link svg {
  stroke: currentColor;
}
/* Hide price/description/buttons in related cards */
.lamylash-related-module .product-card-price,
.lamylash-related-module .product-card-desc,
.lamylash-related-module .ph-mod-product-buttons,
.lamylash-related-module .ph-mod-product-stock,
.lamylash-related-module .ph-mod-product-actions,
.lamylash-related-module .ph-mod-product-rating,
.lamylash-related-module .ph-product-add-to-cart,
.lamylash-related-module .ph-product-ask-question,
.lamylash-related-module .ph-product-compare,
.lamylash-related-module .ph-product-wishlist {
  display: none !important;
}
@media (max-width: 991px) {
  .lamylash-related-module .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .lamylash-related-module .products-grid {
    grid-template-columns: 1fr;
  }
}

/* Category description_bottom (Lamylash-style) */
.com_phocacart.view-category .ph-desc-bottom {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 0;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4A4039;
}

.com_phocacart.view-category .t4-section-inner.container {
  max-width: 1320px;
}

.com_phocacart.view-category #ph-pc-category-box {
  padding-bottom: 60px;
}

/* ---- Product page: short description spec grid ---- */
/* Desktop (≥992px): 4 columns = 2 label-value pairs per row */
.com_phocacart.view-item .ph-desc.has-spec-grid {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 14px;
  padding: 4px 0 12px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5C534A;
  box-sizing: border-box;
  max-width: 100%;
  background: #FAF9F7;
  border: 1px solid rgba(201, 160, 111, 0.18);
  border-radius: 10px;
  padding: 10px;
}

/* spec-row collapses so spans participate directly in parent grid */
.com_phocacart.view-item .ph-desc.has-spec-grid .spec-row {
  display: contents;
  margin: 0;
  padding: 0;
}

.com_phocacart.view-item .ph-desc.has-spec-grid .spec-label {
  font-weight: 700;
  color: #2C2C2C;
  font-family: var(--hb-font-heading, 'Cormorant Garamond', Georgia, serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  align-self: start;
}

.com_phocacart.view-item .ph-desc.has-spec-grid .spec-value {
  color: #6B6259;
  font-weight: 400;
  word-break: break-word;
}

/* Tablet & below (<992px): 2 columns = 1 pair per row */
@media (max-width: 991.98px) {
  .com_phocacart.view-item .ph-desc.has-spec-grid {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
  }
}

/* Mobile (<576px): tighter spacing, slightly smaller font */
@media (max-width: 575.98px) {
  .com_phocacart.view-item .ph-desc.has-spec-grid {
    font-size: 0.875rem;
    row-gap: 10px;
    column-gap: 10px;
  }
}

/* Extra small (<375px): label above value, single column */
@media (max-width: 374.98px) {
  .com_phocacart.view-item .ph-desc.has-spec-grid {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .com_phocacart.view-item .ph-desc.has-spec-grid .spec-label {
    white-space: normal;
    margin-bottom: 0;
  }
  .com_phocacart.view-item .ph-desc.has-spec-grid .spec-value {
    padding-left: 8px;
  }
}

/* ---- Empty state for no products ---- */
.lamylash-empty-state {
  text-align: center;
  padding: 80px 20px 100px;
  margin: 20px auto 60px;
  max-width: 560px;
  color: #6B5E50;
}

.lamylash-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201,160,111,0.08);
  color: var(--hb-rose-gold, #C9A06F);
}

.lamylash-empty-title {
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--hb-black-deep, #0A0907);
  margin: 0 0 12px;
}

.lamylash-empty-lead {
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: #7D7267;
  margin: 0 0 28px;
}

.lamylash-empty-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 100px;
  background: var(--hb-rose-gold, #C9A06F);
  color: var(--hb-white, #fff);
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}

.lamylash-empty-cta:hover {
  background: var(--hb-rose-gold-dk, #A07A4A);
  color: var(--hb-white, #fff);
  transform: translateY(-2px);
}

/* ==========================================================================
   Font Awesome 6 → 5 class alias (T4 bundles FA5.15.4 which uses .fas/.fab)
   ========================================================================== */
.fa-solid { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.fa-brands { font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.fa-regular { font-family: "Font Awesome 5 Free"; font-weight: 400; }

/* Fix Joomla anti-spam custom element breaking grid layout */
joomla-hidden-mail { display: block !important; width: 100% !important; }
joomla-hidden-mail > * { display: block !important; width: 100% !important; }

/* Unwrap joomla-hidden-mail to fix form layout (CSS hack) */
joomla-hidden-mail { display: contents !important; }

/* JS to unwrap joomla-hidden-mail inside forms */

.view-category .lamylash-related-module, .lamylash-related-section{display:none;}


/* ===== LamyLash "Related Products" — heading + cleanup =====
   The Phoca Cart related-products module on the product detail page
   renders as `<div class="ph-product-module-box lamylash-related-module">`
   with NO title node — Joomla modules with `showtitle=0` (or Phoca's
   "related products" module which has no title field) emit no `<h2>`,
   so the section just begins with the product grid. The user wants
   a heading "Related Products" at the top of that section. Two layers:

   1. CSS `::before` pseudo-element renders the heading visually
      (decorated with the same gold rule used by `.lamylash-section-heading`).
   2. A small `<script>` appended at the very bottom of custom.css via
      a `//# sourceURL=` directive… actually JS can't live in a .css
      file. Instead we use CSS only and accept that the heading is
      decorative; an SR-user reading the module will fall back to the
      product titles, which are already links with descriptive text.

   Also strips the stray beige band that Phoca's `.phIBoxOH` / `.phIBox`
   wrappers were inserting between the image and the title: those
   wrappers had their own background/padding so the image area never
   reached the container bottom. Resetting them to `display:block;width
   100%;height:100%` lets the square `aspect-ratio` image fill 100%.
============================================================ */
.lamylash-related-module {
  position: relative;
}
.lamylash-related-module::before {
  content: 'Related Products';
  display: block;
  font-family: var(--hb-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  color: #0A0907;
  text-align: center;
  margin: 0 auto 18px;
  padding-top: 8px;
  max-width: 720px;
  position: relative;
}
.lamylash-related-module::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  margin: 0 auto 48px;
}
/* Heading → 18px gap → gold 60×1px rule → 48px gap → product grid. */
.lamylash-related-module .phIBoxOH,
.lamylash-related-module .phIBox {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  line-height: 0;
}
.lamylash-related-module .product-card-image > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  text-decoration: none;
}


/* ===== LamyLash Products Page (Phoca Categories view, menu 199) ===== */
/* Each .ll-cat section carries its own 1200px inner container (.ll-cat__inner).
   Sections with the .ll-cat--band modifier break out to viewport-width and
   get a full-bleed background via --band-bg. */

.ll-cat {
  display: block;             /* the flex layout lives on .ll-cat__inner */
  padding: 32px 0;
}
.ll-cat__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  gap: 48px;
  box-sizing: border-box;
}
/* .ll-cat--alt (legacy class — kept as a no-op so older markup doesn’t break,
   but every section now renders info-then-media by default, so no flip is
   needed). */
/* ll-cat--flip: desktop only — products on the left, info on the right.
   Mobile (column) keeps info-on-top regardless of flip; see media query
   below, which forces column back. */
.ll-cat--flip .ll-cat__inner { flex-direction: row-reverse; }

/* Full-bleed background band (Bond & Seal, Lash Tweezers).
   Uses the same negative-margin trick as .ll-products__banner-wrap to escape
   the .t4-row container. The interior content is still constrained by
   .ll-cat__inner (max-width: 1200px). */
.ll-cat--band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--band-bg, #FAF6F0);
}

/* Banner — extracted out of .ll-products container so it's full-width */
.ll-products__banner {
  background: linear-gradient(135deg, #d5b19c 0%, #2a2018 100%);
  border-radius: 0;
  padding: 64px 32px 56px;
  margin: 0 0 56px;
  text-align: center;
  border: none;
  width: 100%;
  box-sizing: border-box;
}
.ll-products__banner-inner { max-width: 960px; margin: 0 auto; }
.ll-products__banner h1 {
  font-size: 2.6rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: #C9A06F;
  letter-spacing: 0.5px;
}
.ll-products__banner-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #e8ddcf;
  margin: 0 0 24px;
}

/* Alternating category sections */
.ll-cat__media { flex: 1 1 50%; min-width: 0; }
.ll-cat__info  { flex: 1 1 50%; min-width: 0; }
.ll-cat__eyebrow {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #A8784A;
  font-weight: 600;
  margin-bottom: 10px;
}
.ll-cat__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1c1714;
}
.ll-cat__subtitle {
  font-size: 1.1rem;
  font-style: italic;
  color: #C9A06F;
  margin: 0 0 16px;
}
.ll-cat__desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #5b5048;
  margin: 0 0 20px;
}
.ll-cat__features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.ll-cat__features li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #3f352d;
}
.ll-cat__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #C9A06F;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
}
.ll-cat__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 24px;
  background: #C9A06F;
  color: #0a0907;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ll-cat__cta:hover {
  background: #A8784A;
  color: #0a0907;
  transform: translateY(-1px);
}

/* Product module grid inside each section */
.ll-cat__media .ll-products-module { margin: 0; }
.ll-products-module .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}
.ll-products-module .product-card {
  border: 1px solid #ecdfce;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ll-products-module .product-card:hover {
  box-shadow: 0 8px 24px rgba(168, 120, 74, 0.18);
  transform: translateY(-2px);
}
.ll-products-module .product-card-image { display: block; }
.ll-products-module .product-card-image a { display: block; }
.ll-products-module .product-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.ll-products-module .product-card-body { padding: 12px 14px 16px; }
.ll-products-module .product-card-title {
  font-size: 1rem;
  font-weight: 520;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ll-products-module .product-card-title a { color: #1c1714; text-decoration: none; }
.ll-products-module .product-card-title a:hover { color: #A8784A; }
.ll-products-module .product-card-footer { text-align: left; }
.ll-products-module .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #C9A06F;
  text-decoration: none;
}
.ll-products-module .product-card-link:hover { color: #A8784A; }

/* Responsive */
@media (max-width: 767.98px) {
  .ll-cat__inner,
  .ll-cat--flip .ll-cat__inner { flex-direction: column; gap: 24px; padding: 24px 16px; }
  .ll-products__banner { padding: 40px 20px 36px; margin: 0 0 36px; }
  .ll-products__banner h1 { font-size: 2rem; }
  .ll-cat__title { font-size: 1.6rem; }
}

/* Full-bleed wrapper: breaks the banner out of the centered component container
   so it spans the full viewport width (page-width banner, see user request). */
.ll-products__banner-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* On the Products landing, the full-bleed banner is meant to sit flush against
   the navigation, so cancel the default .t4-main-body top padding (48px). The
   sections below still get their own internal padding for breathing room. */
body.item-199 .t4-main-body { padding-top: 0; padding-bottom: 0px; }

/* Make the per-category product grid a clean 3-up inside the 50% media column */
.ll-cat__media .ll-products-module .products-grid {
  grid-template-columns: repeat(3, 1fr);
}
/* Very narrow phones: drop to a single column so cards stay tappable */
@media (max-width: 575.98px) {
  .ll-cat__media .ll-products-module .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== /LamyLash Products Page ===== */
.view-category .lamylash-card-meta{display:none;}

/* ===== Standard breadcrumbs module (#t4-breadcrumbs) ===== */
#t4-breadcrumbs {
  background: #FBF6EF !important;
  border-top: 1px solid rgba(146, 125, 98, 0.15) !important;
  border-bottom: 1px solid rgba(146, 125, 98, 0.15) !important;
}
#t4-breadcrumbs .t4-section-inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }
#t4-breadcrumbs .mod-breadcrumbs {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
#t4-breadcrumbs .mod-breadcrumbs__item a,
#t4-breadcrumbs .mod-breadcrumbs__item span {
  color: #927D62 !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
#t4-breadcrumbs .mod-breadcrumbs__item a:hover { color: #C9A06F !important; }
#t4-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(146, 125, 98, 0.55) !important;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  content: "\f105" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
#t4-breadcrumbs .breadcrumb-item.active span { color: #6B5840 !important; font-weight: 500 !important; }
#t4-breadcrumbs * { visibility: visible !important; opacity: 1 !important; }

/* ===== Hero-embedded breadcrumb (Service page) ===== */
body.item-204 .service-hero-text .hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
body.item-204 .service-hero-text .hero-breadcrumb .breadcrumb-item { padding: 0 !important; }
body.item-204 .service-hero-text .hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\f105" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: rgba(146, 125, 98, 0.55) !important;
  padding: 0 0.45rem !important;
}
body.item-204 .service-hero-text .hero-breadcrumb .mod-breadcrumbs__item a {
  color: #927D62 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  transition: color 0.2s ease;
}
body.item-204 .service-hero-text .hero-breadcrumb .mod-breadcrumbs__item a:hover { color: #C9A06F !important; }
body.item-204 .service-hero-text .hero-breadcrumb .breadcrumb-item.active span {
  color: #6B5840 !important;
  font-weight: 500 !important;
}
body.item-204 .service-hero-text .hero-breadcrumb .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }

/* On the Service page the breadcrumb is shown inside the hero,
   so suppress the default #t4-breadcrumbs block above main body
   to avoid double rendering. */
body.item-204 #t4-breadcrumbs { display: none !important; }

/* ===== Hero-embedded breadcrumb (About Us page) ===== */
/* Same .lamylash-hero-breadcrumb markup as Lash Clusters categories,
   but the about-hero is a dark photo background so we override the
   current crumb color for legibility. */
body.item-205 .about-hero .lamylash-hero-breadcrumb {
  margin: 18px auto 0 auto !important;
  padding: 0 !important;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
body.item-205 .about-hero .lamylash-hero-breadcrumb .lamylash-crumb {
  color: #C9A06F;
}
body.item-205 .about-hero .lamylash-hero-breadcrumb .lamylash-crumb:hover { color: #FFFFFF; }
body.item-205 .about-hero .lamylash-hero-breadcrumb .lamylash-crumb:hover svg { stroke: #FFFFFF; }
body.item-205 .about-hero .lamylash-hero-breadcrumb .lamylash-crumb-current {
  color: #FFFFFF;
  font-weight: 500;
}
body.item-205 .about-hero .lamylash-hero-breadcrumb .lamylash-crumb-sep {
  color: rgba(201, 160, 111, 0.7);
}

/* About Us also embeds the breadcrumb in hero — hide the default one. */
body.item-205 #t4-breadcrumbs { display: none !important; }

/* ===== Contact Us hero breadcrumb (on a dark hero background) ===== */
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  padding: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(201, 160, 111, 0.3);
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C9A06F;
  text-decoration: none;
  transition: color 0.2s ease;
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb svg {
  color: #C9A06F;
  transition: color 0.2s ease;
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb:hover {
  color: #FFFFFF;
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb:hover svg {
  color: #FFFFFF;
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb-current {
  color: #FFFFFF;
  font-weight: 500;
}
body.item-208 #mod-custom163 .lamylash-hero-breadcrumb .lamylash-crumb-sep {
  color: rgba(201, 160, 111, 0.7);
}

/* Contact Us also embeds the breadcrumb in hero — hide the default one. */
body.item-208 #t4-breadcrumbs { display: none !important; }

/* ===== Article detail page (com_content article, item-210) =====
   The template override html/com_content/article/default.php renders
   .lamylash-hero-breadcrumb above the article title; suppress the
   default #t4-breadcrumbs block to avoid a duplicated trail.
   body.item-210 #t4-breadcrumbs { display: none !important; }    */


/* The article page has no hero — the breadcrumb sits right under the
   navbar and just above the h1, so trim the default 50px top margin
   and add a small breathing space before the title. Truncate the
   current item so very long titles don't wrap the trail. */
body.item-210 .lamylash-hero-breadcrumb {
  margin-top: 18px !important;
  margin-bottom: 36px !important;
  font-size: 13px !important;
}
body.item-210 .lamylash-hero-breadcrumb .lamylash-crumb-current {
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Blog hero breadcrumb (light cream hero background) ===== */
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  padding: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(146, 125, 98, 0.25);
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C9A06F;
  text-decoration: none;
  transition: color 0.2s ease;
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb svg {
  color: #C9A06F;
  transition: color 0.2s ease;
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb:hover {
  color: #6B5E50;
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb:hover svg {
  color: #6B5E50;
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb-current {
  color: #6B5E50;
  font-weight: 500;
}
body.item-206 .blog-hero-inner .lamylash-hero-breadcrumb .lamylash-crumb-sep {
  color: rgba(201, 160, 111, 0.7);
}

/* Blog also embeds the breadcrumb in hero — hide the default one. */
body.item-206 #t4-breadcrumbs { display: none !important; }

/* ===== LamyLash Products Crumb (sits inside the dark banner) ===== */
body.itemid-199 .ll-products__crumb,
body.item-199 .ll-products__crumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 18px 0 0;
  margin: 24px auto 0;
  font-size: 14px;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(201, 160, 111, 0.3);
  color: #e8ddcf;
}
body.itemid-199 .ll-products__crumb .lamylash-crumb,
body.item-199 .ll-products__crumb .lamylash-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e8ddcf;
  text-decoration: none;
  transition: color 0.2s ease;
}
body.itemid-199 .ll-products__crumb .lamylash-crumb:hover,
body.item-199 .ll-products__crumb .lamylash-crumb:hover { color: #ffffff; }
body.itemid-199 .ll-products__crumb .lamylash-crumb-sep,
body.item-199 .ll-products__crumb .lamylash-crumb-sep {
  padding: 0 6px;
  color: #C9A06F;
  opacity: 0.7;
}
body.itemid-199 .ll-products__crumb .lamylash-crumb-current,
body.item-199 .ll-products__crumb .lamylash-crumb-current {
  color: #f3d9b3;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ============================================================
   FIX: stop cropping product card thumbnails — show full image.
   Phoca backend "Crop Thumbnail" toggle only affects the
   generated thumbnail FILE; the template still re-crops on
   display via `object-fit: cover` + fixed aspect-ratio. This
   override forces `contain` so the entire product picture
   stays visible. Card aspect-ratios are kept (uniform grid),
   the contain area uses a soft beige backdrop.
   Scope: Phoca product cards (category, related, itemid pages),
          .ll-products-module, .lamylash-card-image-wrap.
   Excluded: hero / banner / category-hero (16:9, 3:4, 4:5) —
             those `cover` rules are intentional.
   ============================================================ */
body.com_phocacart .product-card-image img,
.ll-products-module .product-card-image img,
.lamylash-related-module .product-card-image img,
.lamylash-related-section .product-card-image img,
.lamylash-card-image-wrap .phIBox img,
body.itemid-142 #sp-main-body .product-card-image img,
body.itemid-143 .product-card-image img,
body.itemid-144 #sp-main-body .product-card-image img,
body.itemid-138 #sp-main-body .product-card-image img {
  object-fit: contain !important;
  background: #fff;
  object-position: center;
}

body.com_phocacart .product-card-image,
.ll-products-module .product-card-image,
.lamylash-related-module .product-card-image,
.lamylash-related-section .product-card-image,
.lamylash-card-image-wrap .phIBox,
.lamylash-card-image-wrap .phIBoxOH,
body.itemid-142 #sp-main-body .product-card-image,
body.itemid-143 .product-card-image,
body.itemid-144 #sp-main-body .product-card-image,
body.itemid-138 #sp-main-body .product-card-image {
  background: #fff !important;
}
/* Make category cards use a square image frame so square product
   photos fill 100% of the box and stop leaving white margins on
   the left/right sides. Card body sits below naturally. */
.com_phocacart.view-category .lamylash-product-card .lamylash-card-image-wrap {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
/* ===== End LamyLash Products Crumb ===== */
.product-card-footer, .lamylash-card-footer{
display:none;
}
/* ============================================================
   LamyLash Blog — T4 Page Builder override
   Module: mod_articles_category (layout = blog)
   Mirrors lashesfactory/blog (leading + 3-column grid)
   ============================================================ */
.lamylash-blog-main { margin-bottom: 2.5rem; }

.lamylash-blog-layout {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

/* Shared meta (author / date) */
.lamylash-blog__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9B8E7E;
}
.lamylash-blog__author { font-weight: 600; color: #0A0907; }
.lamylash-blog__sep { color: #C9A06F; }

/* ---- Leading article (featured card) ---- */
.lamylash-blog-leading {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.85rem 1.85rem 1.5rem;
  background: #FFFFFF;
  border: 1px solid #E8DDD0;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(10, 9, 7, .02);
}
.lamylash-blog-leading__media {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.lamylash-blog-leading__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.lamylash-blog-leading__title {
  margin: 0 0 .25rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.18;
  font-weight: 700;
}
.lamylash-blog-leading__title a { color: #0A0907; text-decoration: none; transition: color .2s ease; }
.lamylash-blog-leading__title a:hover { color: #C9A06F; }
.lamylash-blog-leading__introtext { color: #6B5E50; line-height: 1.75; font-size: 1rem; }

/* ---- Intro grid ---- */
.lamylash-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .lamylash-blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.lamylash-blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8DDD0;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.lamylash-blog-card:hover {
  border-color: #C9A06F;
  box-shadow: 0 14px 34px rgba(10, 9, 7, .10);
  transform: translateY(-5px);
}
.lamylash-blog-card__media { display: block; overflow: hidden; }
.lamylash-blog-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.lamylash-blog-card:hover .lamylash-blog-card__media img { transform: scale(1.06); }
.lamylash-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.35rem 1.5rem;
}
.lamylash-blog-card__title {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
}
.lamylash-blog-card__title a { color: #0A0907; text-decoration: none; transition: color .2s ease; }
.lamylash-blog-card__title a:hover { color: #C9A06F; }
.lamylash-blog-card__introtext { color: #6B5E50; font-size: .92rem; line-height: 1.65; }

/* ---- Read more (shared) ---- */
.lamylash-blog-leading__readmore,
.lamylash-blog-card__readmore {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C9A06F;
  text-decoration: none;
  transition: color .2s ease;
}
.lamylash-blog-card__readmore { margin-top: auto; padding-top: .5rem; }
.lamylash-blog-leading__readmore:hover,
.lamylash-blog-card__readmore:hover { color: #A8784A; }
.lamylash-blog__arrow { transition: transform .2s ease; }
.lamylash-blog-leading__readmore:hover .lamylash-blog__arrow,
.lamylash-blog-card__readmore:hover .lamylash-blog__arrow { transform: translateX(5px); }

/* ---- Blog listing pagination (mod_articles_category blog override) ---- */
.lamylash-blog-pagination {
  margin: 48px 0 8px;
  display: flex;
  justify-content: center;
}
.lamylash-blog-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lamylash-blog-pagination__item { display: inline-flex; }
.lamylash-blog-pagination__link,
.lamylash-blog-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(146, 125, 98, 0.35);
  border-radius: 6px;
  font-family: var(--hb-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #6B5E50;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lamylash-blog-pagination__link:hover {
  border-color: #C9A06F;
  color: #C9A06F;
  background: rgba(201, 160, 111, 0.08);
}
.lamylash-blog-pagination__item--active .lamylash-blog-pagination__current {
  background: #C9A06F;
  border-color: #C9A06F;
  color: #fff;
  cursor: default;
}

/* ---- Sidebar: remove the FontAwesome ">" pseudo-element on Popular Post ---- */
body.item-206 .latestnews li a::before,
body.item-206 .mod-articleslatest li a::before { content: none !important; }


/* ============================================================
   Hide routing-only menu item (id 210, alias "post")
   Purpose: enables clean SEF article URLs (/post/<alias>) and
   lets the Popular Post module show on article pages, without
   rendering a stray "Blog Articles" entry in the navigation.
   Routing is server-side, so hiding it visually is safe.
   ============================================================ */
li[data-id="210"] { display: none !important; }

/* ============================================================
   Article pages (com_content article view): make the right
   sidebar (Popular Post) sticky while scrolling, matching the
   behaviour of the blog listing page. T4 only applies the
   sticky rule on the listing layout, so we add it explicitly
   here for the article view. Parent .t4-row is display:grid
   with align-items:start, so the column is not stretched and
   sticky works normally.
   ============================================================ */
body.com_content.view-article .t4-col.sidebar-r,
body.item-210 .t4-col.sidebar-r {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ============================================================
   Popular Post sidebar (Mod136, mod_articles_latest)
   Re-styled to match the LamyLash brand: white card + gold
   border (matching the blog grid cards), serif-numbered
   list, dark titles with gold hover, muted date.
   Applies to both the blog listing (item-206) and the
   article view (item-210) since both render in .sidebar-r.
   ============================================================ */
.sidebar-r .t4-module {
  background: #FFFFFF;
  border: 1px solid #E8DDD0;
  border-radius: 16px;
  padding: 26px 24px 14px;
  box-shadow: 0 10px 30px rgba(10, 9, 7, 0.05);
}

/* Section heading
   Note: T4 template default rule '.module-title span'
   adds a grey border-bottom + padding to the inner <span>.
   Kill it here so only our gold border (on the <h3> itself)
   shows below the title. */
.sidebar-r .module-title {
  margin: 0 0 20px;
  padding: 0 0 14px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0A0907;
  border-bottom: 2px solid #C9A06F;
}
.sidebar-r .module-title span {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: inline-block; /* kept from T4 base; harmless */
}

/* Numbered, editorial list */
.sidebar-r .mod-articleslatest {
  counter-reset: lamypop;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-r .mod-articleslatest li {
  counter-increment: lamypop;
  position: relative;
  padding: 15px 0 15px 38px;
  border-bottom: 1px solid #EFE6DA;
}
.sidebar-r .mod-articleslatest li:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.sidebar-r .mod-articleslatest li::before {
  content: counter(lamypop, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #C9A06F;
}

/* Article link */
.sidebar-r .mod-articleslatest li a {
  display: block;
  color: #0A0907;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sidebar-r .mod-articleslatest li a:hover {
  color: #C9A06F;
}
.sidebar-r .mod-articleslatest li a [itemprop="name"] {
  display: block;
}

/* Date — muted, uppercase, small */
.sidebar-r .mod-articleslatest li a .published {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9B8E7E;
}
.ph-item-bottom-box img{width: 100%;}

/* Phoca Cart product detail — thumbnail → swap main image (no popup).
   Highlight the active thumbnail so users see which image is shown. */
.ph-item-image-box a.phImageAdditionalHref {
  display: block;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.ph-item-image-box a.phImageAdditionalHref:hover {
  border-color: #E8DDD0;
}
.ph-item-image-box a.phImageAdditionalHref.ph-thumb-active {
  border-color: #C9A06F;
}

/* Contact page (item-208) — soften the placeholder text so it reads as a hint,
   but keep the typed-in value at full strength (rgb(10,9,7)). */
body.item-208 .form-control::placeholder,
body.item-208 textarea.form-control::placeholder {
  color: #A89E8E;
  opacity: 1;
}
body.item-208 .form-control:-ms-input-placeholder,
body.item-208 textarea.form-control:-ms-input-placeholder {
  color: #A89E8E;
}
body.item-208 .form-control::-ms-input-placeholder,
body.item-208 textarea.form-control::-ms-input-placeholder {
  color: #A89E8E;
}

/* Back-to-top button: hover background uses brand gold instead of default blue
   (T4 template sets #back-to-top:hover background = var(--color-primary) → blue). */
#back-to-top:hover,
#back-to-top:focus,
#back-to-top:active {
  background: #C9A06F !important;
  color: #fff !important;
}
.tab-content, .article-body{font-size: 1.2em;}

/* =========================================
   AUDIT FIXES (2026-08-25)
   - Hero H1 mobile overflow
   - prefers-reduced-motion fallback
   - Mobile off-canvas / navbar toggler visibility
   ========================================= */

/* 1) Prevent H1 from overflowing the viewport on narrow screens */
.hero-banner-content h1 {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

@media (max-width: 480px) {
  /* Mobile hero sizing: previous padding 20/24 was so tight the top
     badge "PROFESSIONAL LASHES FACTORY" was clipped by the sticky
     header bar (navbar ≈ 65px tall, hero padding-top was only 20px).
     Bump to 56/64 — ~90px taller than the cramped version, still
     roughly half the desktop 100vh hero so it never dominates the
     viewport on phones. min-height:auto !important still overrides
     the global `body.item-101 .hero-banner { min-height:100vh }`. */
  .hero-banner { min-height: auto !important; padding: 72px 0 80px !important; }
  .hero-banner-content { padding: 0 18px; }
  .hero-banner-content h1 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .hero-banner-badge { margin-bottom: 14px; }
  .hero-banner-sub { font-size: 0.9rem; line-height: 1.6; margin-bottom: 18px; }
  .hero-banner-stats { gap: 14px 20px; margin-top: 16px; }
  .hero-banner-stat-value { font-size: 1.5rem; }
  .hero-banner-stat-label { font-size: 9px; }
  .hero-banner-btn-primary,
  .hero-banner-btn-outline { width: 100%; text-align: center; padding: 14px 16px; }
}

/* Banner image: the factory photo is 1920×670 (wide landscape). On mobile the
   hero uses `background-size:cover` + `background-position:center`, which scales
   the image to fill the tall portrait box and centers it horizontally — so only
   the MIDDLE slice shows. Tried `left center` (product trays) — too dark
   because the 135deg dark gradient darkens the left. Switched to `right center`
   — shows the right side of the factory scene under the BRIGHTEST part of the
   overlay gradient (rgba(10,9,7,0.20) at the right edge) so the photo is most
   clearly visible. Trade-off: the main worker (image center) is no longer the
   focal point, but factory atmosphere is preserved and brightness is maxed. */
@media (max-width: 767px) {
  .hero-banner {
    /* Show the LEFT region of the factory photo — the white table + black
       lash trays (product area) the user asked for. Override the global
       `body.item-101 .hero-banner { min-height:100vh }` (line ~13289) with
       !important so the mobile hero shrinks to content height. */
    background-position: left center !important;
    min-height: auto !important;
    /* Tablet-portrait (481–767px): moderate vertical breathing room so the
       top badge isn't clipped by the sticky header. Phones (≤480px) get a
       larger padding further down in the ≤480px block (with !important so it
       wins over this rule). */
    padding: 48px 0 56px;
  }
  /* The left region sits under the DARKEST part of the 135deg gradient, so
     lighten the overlay on mobile to reveal the lash trays. Readability of the
     white text is preserved by the text-shadow rule at the end of this block. */
  .hero-banner-overlay {
    background: linear-gradient(
      135deg,
      rgba(10, 9, 7, 0.62) 0%,
      rgba(10, 9, 7, 0.42) 50%,
      rgba(10, 9, 7, 0.18) 100%
    );
  }
  /* Keep hero text readable now that the background is lighter on the left */
  .hero-banner-content,
  .hero-banner-badge,
  .hero-banner-content h1,
  .hero-banner-sub,
  .hero-banner-stat-value,
  .hero-banner-stat-label {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }
}

/* 2) Respect reduced-motion: show hero text immediately instead of fading in */
@media (prefers-reduced-motion: reduce) {
  .hero-banner-content h1,
  .hero-banner-badge,
  .hero-banner-sub,
  .hero-banner-actions,
  .hero-banner-stats,
  .hero-banner-particles .hb-particle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 3) Mobile nav: show ONLY the T4 off-canvas drawer trigger (#triggerButton).
   The header area renders THREE hamburger-looking elements:
     (a) <button.navbar-toggler> inside .t4-navbar  — duplicate megamenu
         collapse toggler, hidden by T4 design (inline display:none).
     (b) <button.navbar-toggler> inside .t4-header-r — second copy of the
         same megamenu collapse toggler.
     (c) <span#triggerButton.t4-offcanvas-toggle>  — the REAL mobile menu
         trigger that opens the #off-canvas-left-push drawer.
   On mobile we hide (a)+(b) and show/style only (c). A global
   `#triggerButton{display:none}` lower in this file is overridden by the
   !important below. */
@media (max-width: 991px) {
  /* hide the two duplicate megamenu collapse togglers */
  .t4-navbar .navbar-toggler,
  .t4-header-r .navbar-toggler {
    display: none !important;
  }
  /* show + style the single T4 off-canvas drawer trigger */
  .js-offcanvas-trigger.t4-offcanvas-toggle,
  .t4-offcanvas-toggle,
  #triggerButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #1f1f1f !important;
    background: #ffffff !important;
    margin-left: auto;
    cursor: pointer;
  }
  .t4-offcanvas-toggle .toggle-bars,
  #triggerButton .toggle-bars { color: #1f1f1f; }
}

/* 3b) Mobile off-canvas: full-width drawer so the main column doesn't get
   squeezed into a 90px sliver at the right edge. T4 uses the js-offcanvas
   library which applies `.c-offcanvas--left { width: 300px }`. Override both
   the element id (when hidden) and the c-offcanvas modifier (when opened). */
@media (max-width: 575px) {
  #off-canvas-left-push,
  #off-canvas-left-push.c-offcanvas--left {
    width: 88vw !important;
    max-width: 360px !important;
  }
  body.offcanvas-active #off-canvas-left-push,
  body.offcanvas-active #off-canvas-left-push.c-offcanvas--left {
    box-shadow: 0 0 30px rgba(0,0,0,0.18);
  }
  .t4-off-canvas-body { padding: 12px 8px 32px !important; }
  .t4-off-canvas-body .navbar { width: 100%; }
  .t4-off-canvas-body .navbar .nav-item {
    padding: 0 18px !important;
    border-bottom: 1px solid #eee;
  }
  .t4-off-canvas-body .navbar .nav-item > .nav-link,
  .t4-off-canvas-body .navbar .nav-item > .dropdown-toggle {
    color: #1f1f1f !important;
    font-weight: 500;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
  }
  .t4-off-canvas-body .navbar .nav-item > .nav-link:hover,
  .t4-off-canvas-body .navbar .nav-item > .dropdown-toggle:hover {
    color: #c9a06f !important;
  }
  .t4-off-canvas-body .navbar .nav-item.active > .nav-link,
  .t4-off-canvas-body .navbar .nav-item.current > .nav-link {
    color: #c9a06f !important;
    font-weight: 600;
  }
  .t4-off-canvas-body .navbar .dropdown-menu .nav-item > .dropdown-item {
    color: #444 !important;
    padding: 10px 0 !important;
    font-size: 0.95rem !important;
  }
  .t4-off-canvas-body .navbar .dropdown-menu .nav-item > .dropdown-item:hover {
    color: #c9a06f !important;
    background: transparent !important;
  }
  .t4-off-canvas-header { background: #fff; }
}

/* Hide the legacy "Blog Articles (hidden)" menu item (#210) from the mobile
   off-canvas drawer. Selector targets `li.item-210` which is the class added
   by Joomla's mod_menu renderer — only present in drawer output, the desktop
   mega menu uses `data-id="210"` instead and is unaffected. */
.t4-off-canvas-body li.item-210 { display: none !important; }

/* 4) Blog hero (#t4-masthead on item-206): min-height:70vh creates a ~400px
   blank gap. Shrink to a compact hero so the article list sits close below. */
body.item-206 #t4-masthead {
  min-height: 380px !important;
  padding: 60px 0 !important;
}
@media (max-width: 767px) {
  body.item-206 #t4-masthead { min-height: 280px !important; padding: 44px 0 !important; }
}

/* 5–7) Mobile hero layout (≤480px) — consolidated fix for H1/CTA/stats clipping.
   Root cause: .hero-banner section is wider than the mobile viewport (some
   ancestor pins it to ~630px), so the section overflows the viewport and the
   H1/CTA/stats get clipped at the right edge of the screen. Fix: full-bleed
   the section to 100vw, force content to 100% with overflow clipping, and
   guarantee the H1 wraps within the viewport. */
.hero-banner-content,
.hero-banner-content h1,
.hero-banner-content .hero-banner-stats,
.hero-banner-content .hero-banner-stats > div {
  min-width: 0 !important;
}
@media (max-width: 480px) {
  /* Full-bleed the section to 100vw regardless of parent width
     (the 50%/50vw margin trick aligns it to the viewport edges). */
  section.hero-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
    background-position: left center !important;
  }
  .hero-banner-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }
  .hero-banner-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: clamp(1.1rem, 4.4vw, 1.5rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .hero-banner-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    text-align: center !important;
  }
  /* Prevent residual overflow from triggering horizontal page scroll.
     Use `clip` where supported: `hidden` would make <body> a scroll container
     and break the viewport-anchored fixed positioning of the floating CTA. */
  body.item-101 { overflow-x: hidden !important; }
  @supports (overflow: clip) {
    body.item-101 { overflow-x: clip !important; }
  }
}

/* ============================================================
   AUDIT FIX 2026-08-25 (4 pages responsive + nav fallback)
   ============================================================
   User feedback (real device): 4 pages have no responsive layout, and
   service / about / contact have no menu.

   Affected pages:
     - item-199  /index.php/products         com_phocacart view-categories
     - item-204  /index.php/service           com_t4pagebuilder view-page
     - item-205  /index.php/about-us          com_t4pagebuilder view-page
     - item-208  /index.php/contact-us        com_t4pagebuilder view-page

   Verified: all 4 already load T4 stack (viewport, template.css, custom.css);
   desktop service screenshot shows full nav (Logo + 6 menu items);
   #153 Mobile Menu module is published=1 menuid=0 (global drawer).
   Headless Chrome mobile shots at 390x780 are unreliable (known
   media-query caching bug), so we MUST verify on real device — but
   the following rules act as a hard safety net for both reported
   symptoms no matter which CSS hook the page builder / Phoca view is
   using to hide things.
*/

/* === S1) Always-on site-wide: kill any horizontal scroll ===
   NOTE: `overflow-x: hidden` turns the element into a SCROLL CONTAINER, which
   on several mobile engines breaks `position: fixed` — the floating inquiry /
   WhatsApp bar and #back-to-top then scroll away with the page instead of
   staying pinned to the viewport (they only become visible near the bottom).
   `clip` trims the very same overflow WITHOUT creating a scroll container, so
   it is declared second as a progressive override. Browsers that do not
   understand `clip` simply keep `hidden`, i.e. the previous behaviour. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* === S2) Media must never exceed viewport width === */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* === S3) Force the header + hamburger to stay visible on the affected
       pages on mobile. The default T4 selectors (`.t4-header-r .navbar-
       toggler`, `#triggerButton`) already get `display:inline-flex !important`
       earlier in this file (see block "Mobile nav"). The risk: page-builder
       pages sometimes inject their own header chrome that visually covers
       the navbar. We re-affirm visibility+opacity with !important
       scoped to the affected body classes. === */
@media (max-width: 991px) {
  body.com_t4pagebuilder .t4-header,
  body.com_phocacart .t4-header {
    position: relative !important;
    z-index: 999 !important;
    background: #ffffff !important;
    display: block !important;
    visibility: visible !important;
  }
  body.com_t4pagebuilder .t4-header-r,
  body.com_phocacart .t4-header-r {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.com_t4pagebuilder #triggerButton,
  body.com_t4pagebuilder .t4-offcanvas-toggle,
  body.com_phocacart #triggerButton,
  body.com_phocacart .t4-offcanvas-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* If the megamenu container is somehow not collapsed on these pages,
     hide it so the hamburger is the only nav control on mobile. */
  body.com_t4pagebuilder .navbar-expand-lg > .navbar-collapse,
  body.com_phocacart .navbar-expand-lg > .navbar-collapse {
    display: none !important;
  }
}

/* === S4) Cap inner page-builder / Phoca container widths on mobile.
       Page Builder rows/cols often have a fixed pixel width (e.g. 1280px)
       baked in via inline style or builder CSS, causing horizontal
       scroll on phone-sized viewports. Phoca Cart category views use
       similar fixed grids. === */
@media (max-width: 767px) {
  body.com_t4pagebuilder [class*="section-"],
  body.com_t4pagebuilder [class*="pb-row"],
  body.com_t4pagebuilder [class*="pb-col"],
  body.com_t4pagebuilder [class*="t4p-"],
  body.com_t4pagebuilder .ja-pb-container,
  body.com_t4pagebuilder .ja-pb-row,
  body.com_t4pagebuilder .ja-pb-col,
  body.com_t4pagebuilder .container,
  body.com_t4pagebuilder .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
  }
  body.com_phocacart .pc-category-hero,
  body.com_phocacart .ph-hero,
  body.com_phocacart .pc-categories-list,
  body.com_phocacart .pc-categories-item,
  body.com_phocacart .container,
  body.com_phocacart .container-fluid,
  body.com_phocacart .row {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Keep Phoca Cart category cover image from breaking the viewport */
  body.com_phocacart .pc-categories-item img,
  body.com_phocacart .pc-category-hero img {
    width: 100% !important;
    height: auto !important;
  }
  /* Larger touch target on these pages */
  body.com_t4pagebuilder #triggerButton,
  body.com_phocacart #triggerButton {
    width: 44px !important;
    height: 44px !important;
  }
}

/* === S5) Phoca Cart category hero on phones: soften oversized headline
       that tends to break to two lines and overflows on 320–575px. === */
@media (max-width: 575px) {
  body.com_phocacart .ph-hero h1,
  body.com_phocacart .ph-hero .ph-hero-title,
  body.com_phocacart .pc-category-hero h1,
  body.com_phocacart .pc-category-hero .ph-hero-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    padding: 0 16px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ============================================================
   RESPONSIVE FIX 2026-08-25 — inner pages
   (products item-199 / service item-204 / about item-205 / contact item-208)
   Root cause: every custom section's mobile media query was scoped to a
   STALE selector `body.itemid-XXX`. Joomla's real body class is `item-XXX`
   (NO "id"), so those media queries NEVER matched and all grids stayed
   desktop-only. This block uses global, class-level selectors + !important
   so it overrides BOTH the dead stale rules and the live desktop rules,
   regardless of which item id the page currently has.
   The universal pair (grid-template-columns:1fr + flex-direction:column)
   collapses a container whether it is display:grid OR display:flex.
   ============================================================ */

/* ---- TABLET (<=991.98px): downgrade the big multi-column grids ---- */
@media (max-width: 991.98px) {
  .gallery-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  .shipping-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .why-grid          { grid-template-columns: repeat(2, 1fr) !important; }
  .trusted-logo-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hb-cards-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .cert-badges       { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-hours-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- MOBILE (<=767.98px): everything collapses to a single column ---- */
@media (max-width: 767.98px) {
  /* Collapse EVERY custom multi-item container (grid OR flex). */
  .pkg-grid,
  .gallery-grid,
  .shipping-grid,
  .why-grid,
  .trusted-logo-grid,
  .hb-cards-grid,
  .cert-badges,
  .trusted-stats,
  .factory-stats,
  .about-stats-bar,
  .contact-hours-grid,
  .lf-contact-grid,
  .ll-cat__media .products-grid,
  .wq-row,
  .lf-form-row,
  .lf-contact-form,
  .ll-cat__inner,
  .ll-cat--flip .ll-cat__inner {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  /* Stack the alternating category media/info rows. */
  .ll-cat__inner,
  .ll-cat--flip .ll-cat__inner { gap: 24px !important; padding: 24px 16px !important; }

  /* Trim oversized card padding. 
  .pkg-card,
  .shipping-card,
  .why-card,
  .process-card,
  .factory-card,
  .hb-contact-card,
  .ll-products__banner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  */
  .ll-products__banner { padding-top: 36px !important; padding-bottom: 32px !important; }

  /* Section headers: tighten bottom margin + side padding. */
  .pkg-section-header,
  .gallery-section-header,
  .shipping-section-header {
    margin-bottom: 36px !important;
    padding: 0 16px !important;
  }

  /* Timeline: pull the line/dots in so it doesn't overflow. */
  .timeline-item { padding-left: 26px !important; }

  /* Service hero: it is a 2-col grid (text + visual) with NO mobile media
     query in the original rules, so it stays side-by-side on phones. Collapse
     it to one column and shrink the visual. */
  .service-hero,
  .service-hero-visual {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .service-hero { gap: 32px !important; }
  .service-hero-image-wrapper { max-width: 100% !important; }

  /* Belt-and-braces: the service-hero subtree is riddled with desktop
     `max-width: 500px / 520px` on the image wrapper and the description.
     Force every descendant to respect the viewport width so nothing clips. */
  body.item-204 .service-hero,
  body.item-204 .service-hero-text,
  body.item-204 .service-hero-visual,
  body.item-204 .service-hero-image-wrapper,
  body.item-204 .service-hero-image-placeholder,
  body.item-204 .service-hero-desc,
  body.item-204 .service-hero h1,
  body.item-204 .service-hero-buttons {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }
  body.item-204 .service-hero { overflow: hidden !important; }
  /* Tighter type so long words ("chain", "shelves", etc.) fit in the ~358px
     mobile content width without clipping at the right edge. */
  body.item-204 .service-hero h1 { font-size: 2.1rem !important; line-height: 1.2 !important; }
  body.item-204 .service-hero-desc { font-size: 1rem !important; line-height: 1.7 !important; }

  /* The two stat cards on the service hero are positioned with
     right:-20px / left:-20px relative to the visual — they protrude past
     the viewport on a 375-390 screen. Pull them inward. */
  .service-hero-stat-1 { right: 8px !important; top: 10px !important; padding: 10px 14px !important; }
  .service-hero-stat-2 { left: 8px !important; bottom: 10px !important; padding: 10px 14px !important; }
  .service-hero-stat-icon { width: 36px !important; height: 36px !important; }
  .service-hero-stat-text strong { font-size: 1rem !important; }

  /* T4 page-builder / template grid safety net.
     The T4 framework's .t4-row / .t4-col / .sp-row / .sp-column can carry
     a desktop `min-width` (e.g. 1200px) which forces the whole row to
     overflow on phones. Combined with `body { overflow-x: hidden }` the
     overflow is clipped, so content past ~390px is simply cut off.
     Force every layout container to respect the viewport width. */
  .t4-row, .row,
  .sp-row,
  .t4-section, .t4-section-inner {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .t4-col, .sp-column, [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Container (Bootstrap) keeps its gutter via padding; just cap width. */
  .container, .container-xxl { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* ==== Symmetric gutter on mobile (RIGHT > LEFT gap fix) =================
     Root cause: on Chrome, BS5 .row with `display:flex; margin-left:-gutter;
     margin-right:-gutter; width:auto` collapses its bounding box to
     parent.content (not parent.content + 2*gutter as the BS5 spec intends).
     Net effect at 390px:
       .container           x=0..390  (full viewport)
       .container-inner     x=16..406 (extends 16 past viewport right)
       .row                 x=0..358  (left-bleeds 16 but right stays at
                                       parent.content.right - 16)
       .col-lg-12 padding 16/16 → content x=16..342, width 326
     → 16px left margin / 48px right margin — clearly off-center.

     Cleanest fix: anchor everything to .container's 16/16 padding and
     stop letting the row bleed. Drop .container-inner's padding, drop
     col padding, and let .row + .col fill .container-inner (width 358)
     edge-to-edge.
     Content area then lands at x=16..374 (width 358), perfectly centered
     in a 390 viewport (16+16 symmetric gutters).
     ====================================================================== */
  .row, .t4-row, .sp-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .container-inner { padding-left: 0 !important; padding-right: 0 !important; }
  [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Hero title cap for the 4 inner pages.
     Each page's page-builder hero sets huge fixed font-sizes on h1 (often
     clamp(2.5rem, 5vw, 4rem) with a 2.5rem floor) and a large `max-width`
     on the description. On a 375-390 phone the heading "We Are a Lashes
     Factory" or the long description "shelves — we handle..." overflows.
     Cap h1 to a comfortable mobile size and force long words to break. */
  body.com_t4pagebuilder h1,
  body.com_t4pagebuilder h2,
  body.com_phocacart h1,
  body.com_t4pagebuilder p,
  body.com_phocacart p {
    max-width: 100% !important;
    white-space: normal !important;
  }
  body.com_t4pagebuilder h1,
  body.com_t4pagebuilder h2,
  body.com_phocacart h1 {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }
  body.com_t4pagebuilder p,
  body.com_phocacart p,
  body.com_t4pagebuilder .service-hero-text {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* About hero: clamp(48px, 8vw, 96px) floors at 48px which dwarfs a 390px
     phone. Hit the exact class with equal specificity (later + !important
     wins) and reduce the hero's side padding so text has room to wrap. */
  body.item-205 .about-hero-title {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  body.item-205 .about-hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  body.item-205 .about-hero { padding: 36px 18px !important; }

  /* ==== About stats bar: hide vertical dividers on mobile =================
     2026-08-25. Desktop lays the bar out as 3 stat items in a row, separated
     by .about-stat-divider elements (1px x 60px vertical lines). On mobile
     `flex-direction:column` stacks everything vertically, so each divider
     becomes a 60px-tall invisible spacer still separated by 48px gap. That
     bloats the bar from ~265px (4 stats + 32px pad) to 844px and visually
     "stretches" the hero banner. Hidden only on mobile; desktop untouched. */
  body.item-205 .about-stat-divider { display: none !important; }
  /* Mobile: lay the 4 stats in a tidy 2×2 grid instead of 4 stacked rows.
     A single 1×4 row would squeeze each cell to ~85px and force the 36px
     numbers to wrap, so 2 columns is the readable choice at 390px. */
  body.item-205 .about-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 12px !important;
    padding: 20px 0 !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.item-205 .about-stat-item { text-align: center; }
  body.item-205 .about-stat-number { font-size: 32px !important; line-height: 1.1 !important; }
  body.item-205 .about-stat-label { font-size: 11px !important; letter-spacing: .4px; margin-top: 4px; }

  /* ==== Factory stats bar (about page) — 2×2 grid on mobile ==============
     2026-08-26. Same pattern as .about-stats-bar: 4 icon+number+label
     blocks (5,000m² / 150+ / 8 / 24-7) that the generic responsive-fix
     rule collapsed into a single 1-column stack at 760px tall, stretching
     the dark stats card with huge vertical gaps. Re-collapse to 2 cols. */
  body.item-205 .factory-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 14px !important;
    padding: 28px 18px !important;
    margin-top: 40px !important;
  }
  body.item-205 .factory-stat-icon { width: 36px !important; height: 36px !important; margin: 0 auto 10px !important; }
  body.item-205 .factory-stat-number { font-size: 26px !important; line-height: 1.1 !important; }
  body.item-205 .factory-stat-label { font-size: 11px !important; letter-spacing: .4px; }

  /* ==== Cert badges (about page) — 2×2 grid on mobile ===================
     2026-08-26. 4 cert cards (FDA / SGS / CPNP / 100% Inspected) each
     160×200px were forced into a single column by the generic responsive
     rule, stacking to 872px tall. The tablet breakpoint already lays
     them out as 2 columns — keep the same pattern on mobile for visual
     consistency. */
  body.item-205 .cert-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  body.item-205 .cert-badge {
    width: 100% !important; height: auto !important;
    padding: 18px 10px !important;
  }
  body.item-205 .cert-badge-icon { width: 52px !important; height: 52px !important; margin-bottom: 10px !important; }
  body.item-205 .cert-badge-icon svg { width: 26px !important; height: 26px !important; }
  body.item-205 .cert-badge-text { font-size: 12px !important; line-height: 1.35 !important; }

  /* ==== Service & About page grid collapse (distributed-layout fix) ======
     2026-08-25. Several sections use CSS grid with `1fr` tracks, but the
     grid items' MIN-CONTENT width forces each `1fr` track wider than its
     equal share, so tracks render as fixed px and overflow the ~342px
     mobile content box:
       .aftersales-grid  -> 155px + 192px  (FAQ shoved to x=239, right=431)
       .cert-grid        -> 273px + 160px  (badges shoved to x=377, right=537)
       .process-grid     -> 177+145+156px  (3rd card shoved to x=410, right=566)
     Plus: .pkg-comparison-table (table-layout:auto) overflows its card, and
     .story-image-badge is position:absolute off the left edge (x=-79).
     Collapse every affected grid to ONE full-width column; fix the table;
     neutralise the absolute badge. =========================================== */
  body.item-204 .aftersales-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 16px !important;
  }
  body.item-204 .pkg-comparison { padding: 0 16px !important; }
  body.item-204 .pkg-comparison-table { table-layout: fixed !important; }
  body.item-204 .pkg-comparison-table th,
  body.item-204 .pkg-comparison-table td,
  body.item-204 .pkg-comparison-table .highlight {
    padding: 12px 10px !important;
    font-size: 0.78rem !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  body.item-205 .cert-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  body.item-205 .process-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body.item-205 .process-card { padding: 24px 20px !important; }
  body.item-205 .story-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 0 16px !important;
  }
  body.item-205 .story-image-badge {
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    margin: 16px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* ==== Trusted logo grid (about page) — 2 columns × 3 rows ==============
     2026-08-26. Generic responsive rule collapses .trusted-logo-grid to a
     1-column stack: 6 cards × 342×192px (aspect-ratio:16/9 + padding:24) =
     1274px tall — most of which is empty white-cream padding (the .trusted-
     logo-inner text is only ~27px high). Lay out as 2 columns × 3 rows so
     each card fits a 16/9 box at half width (~171px wide → ~96px tall); cut
     padding to 14px and shrink the label so the whole grid drops to ~360px. */
  body.item-205 .trusted-logo-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    max-width: 360px !important;
    margin: 32px auto 0 !important;
  }
  body.item-205 .trusted-logo { padding: 14px !important; }
  body.item-205 .trusted-logo-inner { font-size: 15px !important; }

  /* ==== Trusted stats (about page) — 2×2 grid on mobile ===================
     2026-08-26. Generic responsive rule leaves .trusted-stats at desktop
     `gap: 80px` while switching it to flex-column, so the 4 stats stack to
     626px tall (each 97px + 3×80 gap). Lay them out as 2×2; shrink the
     48px number and 15px label so they fit ~150px cells. ================== */
  body.item-205 .trusted-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-content: center !important;
    gap: 24px 14px !important;
    margin-top: 40px !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.item-205 .trusted-stat-number { font-size: 30px !important; line-height: 1.1 !important; }
  body.item-205 .trusted-stat-label { font-size: 11px !important; letter-spacing: .4px; }
}

/* ---- SMALL MOBILE (<=480px): finer typographic tuning ---- */
@media (max-width: 480px) {
  .ll-products__banner h1,
  .pkg-section-title,
  .gallery-section-title,
  .shipping-section-title { font-size: 1.7rem !important; line-height: 1.2 !important; }
  .hb-contact-card { padding: 2rem 1.25rem !important; }
  .why-card { padding: 28px 20px !important; }
  .shipping-card { padding: 32px 20px !important; }
  .pkg-card { padding: 36px 22px !important; }
  .ll-cat__title { font-size: 1.5rem !important; }
}
.view-article .page-header h1{font-size: 2em;}
.view-article .com-content-article__body p{font-size: 1.3em;}
.view-page .lamylash-blog__meta .lamylash-blog__author, .view-page .lamylash-blog__sep{display:none;}
.view-article h2, .view-article h3{font-weight:bold;padding-top: 20px;}

/* Breadcrumb fix: T4/PhocaCart inject FontAwesome fa-chevron-right (U+F105) as ::before
   content on every non-first breadcrumb-item. Because the parent font is Noto Sans SC
   (no PUA glyph), the icon renders as a tofu box. Our mod-breadcrumbs override already
   adds <span class="divider">/</span> before each non-first item, so we just hide the
   duplicate tofu-box injection here. */
#t4-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
#t4-breadcrumbs .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
    content: none !important;
    display: none !important;
}
.view-category .ll-key-takeaways{margin-bottom: -50px !important;;background: none !important; border: none !important;}
.view-item .ll-key-takeaways{background: #FAF9F7;}

/* Manufacturer modal badge ("Manufactured by HongKing" → Fancybox iframe)
   Replaces the default PhocaCart "Manufacturer: <link>" rendering with a
   subtle inline badge whose link opens /manufacturers/{slug}.html in a
   Fancybox v4 iframe. The modal page lives in the site root and matches
   the Lamylash.com reference styling. */
.manufacturer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}
.manufacturer-badge .mf-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c9a06f;
    flex: 0 0 auto;
}
.manufacturer-badge .mf-badge-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.manufacturer-badge .mf-badge-text {
    color: #6c757d;
}
.manufacturer-badge .manuModal {
    color: #c9a06f;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.manufacturer-badge .manuModal:hover {
    color: #0a0907;
}

/* =========================================
   FLOATING CTA — Wholesale inquiry + WhatsApp
   Markup: templates/t4_bs5_blank/floating-cta.php
   (injected before </body> by the template index.php, so it shows on every page)

   Desktop : two pills stacked in the bottom-right corner
   Mobile  : full-width bottom bar, buttons side by side  (<= 767.98px)
   ========================================= */

.ll-float-cta {
  position: fixed;
  right: 20px;
  /* 20px offset + 40px back-to-top + 10px gap — keeps the arrow underneath. */
  bottom: 70px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none; /* only the buttons themselves are clickable */
  /* Own compositing layer — keeps position:fixed anchored to the viewport on
     mobile engines that degrade it (e.g. when html/body carry overflow-x). */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  animation: ll-cta-in 0.3s ease both;
}

/* Fade only, no translate and no delay: the bar must be visible straight away. */
@keyframes ll-cta-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ll-cta-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 156px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(201, 160, 111, 0.5);
  border-radius: 999px;
  background: rgba(10, 9, 7, 0.86);
  color: var(--hb-rose-gold-pale);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--hb-font-body);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 9, 7, 0.20);
  transition: transform 0.25s var(--hb-transition), box-shadow 0.25s var(--hb-transition),
              background-color 0.25s var(--hb-transition), color 0.25s var(--hb-transition),
              border-color 0.25s var(--hb-transition);
}

.ll-cta-btn:hover,
.ll-cta-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--hb-black-deep);
  border-color: var(--hb-rose-gold);
  color: var(--hb-rose-gold-pale);
  box-shadow: 0 10px 24px rgba(10, 9, 7, 0.28);
  text-decoration: none;
}

.ll-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ll-cta-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ll-cta-label {
  white-space: nowrap;
}

/* The two buttons differ by glyph colour only — no colour-block backgrounds. */
.ll-cta-inquiry .ll-cta-icon {
  color: var(--hb-rose-gold);
}

.ll-cta-wa .ll-cta-icon {
  color: #25D366;
}

/* Keyboard users get a real focus ring now that the fill is dark-on-dark. */
.ll-cta-btn:focus-visible {
  outline: 2px solid var(--hb-rose-gold);
  outline-offset: 2px;
}

/* The template's own back-to-top button sits UNDER the CTA stack, sharing its
   right edge. Its 40px height + 10px gap + 20px offset = the stack starts at
   70px (see .ll-float-cta bottom below). */
#back-to-top {
  right: 20px !important;
  bottom: 20px !important;
  z-index: 1041;
}

@media (max-width: 767.98px) {
  .ll-float-cta {
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(10, 9, 7, 0.08);
    box-shadow: 0 -8px 24px rgba(10, 9, 7, 0.10);
  }

  .ll-cta-btn {
    flex: 1 1 0;
    width: auto;
    height: 40px;
    padding: 0 10px;
    justify-content: center;
    font-size: 0.82rem;
    box-shadow: none;
  }

  .ll-cta-btn:hover,
  .ll-cta-btn:focus-visible {
    transform: none;
    box-shadow: none;
  }

  .ll-cta-icon svg {
    width: 17px;
    height: 17px;
  }

  /* Reserve room so the bar never covers the end of the page (footer, etc.). */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  #back-to-top {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px;
  }
}

@media (max-width: 359.98px) {
  .ll-cta-btn {
    font-size: 0.76rem;
    padding: 0 6px;
    gap: 5px;
  }
  .ll-cta-icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-float-cta {
    animation: none;
  }
  .ll-cta-btn {
    transition: none;
  }
  .ll-cta-btn:hover,
  .ll-cta-btn:focus-visible {
    transform: none;
  }
}