.elementor-kit-13{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-d310f3c:#C9717A;--e-global-color-0add7af:#F5E6E8;--e-global-color-7386c37:#8B3D45;--e-global-color-d8ca4f1:#C8A96E;--e-global-color-f10b516:#FAF7F2;--e-global-color-8c870f1:#2A2724;--e-global-color-0f908ce:#7A716B;--e-global-color-6cdfc8a:#F9F3EA;--e-global-typography-primary-font-family:"Jost";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   LUMIÈRE GIFTS — GLOBAL CSS
   Block 1: CSS Custom Properties (Design Tokens)
   Paste into: Elementor → Site Settings → Custom CSS
   ============================================================ */

:root {

  /* ── Brand Colours ── */
  --lumiere-rose:        #C9717A;
  --lumiere-rose-light:  #F5E6E8;
  --lumiere-rose-dark:   #8B3D45;
  --lumiere-gold:        #C8A96E;
  --lumiere-gold-light:  #F9F3EA;
  --lumiere-cream:       #FAF7F2;
  --lumiere-charcoal:    #2A2724;
  --lumiere-muted:       #7A716B;
  --lumiere-white:       #FFFFFF;
  --lumiere-success:     #4A7C5F;
  --lumiere-success-bg:  #E8F5EC;

  /* ── Borders ── */
  --lumiere-border:      rgba(42, 39, 36, 0.10);
  --lumiere-border-gold: rgba(200, 169, 110, 0.30);

  /* ── Typography — Families ── */
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'Jost', 'Inter', sans-serif;

  /* ── Typography — Sizes (fluid) ── */
  --text-xs:    0.72rem;
  --text-sm:    0.82rem;
  --text-base:  1rem;
  --text-lg:    1.15rem;
  --text-xl:    1.4rem;
  --text-2xl:   clamp(1.6rem, 3vw, 2.2rem);
  --text-3xl:   clamp(2rem, 4vw, 3rem);
  --text-hero:  clamp(2.8rem, 5vw, 4.2rem);

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --section-pad: 100px 8%;

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 50px;

  /* ── Shadows ── */
  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-md:   0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-hero: 0 40px 80px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition-fast:  0.2s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.5s ease;

}




/* ============================================================
   Block 2: Base Styles, Typography & Body Defaults
   ============================================================ */

/* Global box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Base body */
body {
  font-family:      var(--font-body);
  font-weight:      400;
  font-size:        var(--text-base);
  color:            var(--lumiere-charcoal);
  background-color: var(--lumiere-cream);
  line-height:      1.7;
  overflow-x:       hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color:       var(--lumiere-charcoal);
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl);  }
h3 { font-size: var(--text-2xl);  }
h4 { font-size: var(--text-xl);   }
h5 { font-size: var(--text-lg);   }
h6 { font-size: var(--text-base); }

/* Italic headings get rose colour — matches design */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color:      var(--lumiere-rose);
}

/* Paragraph & body text */
p {
  font-family: var(--font-body);
  font-weight: 300;
  color:       var(--lumiere-muted);
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* Links */
a {
  color:           var(--lumiere-rose);
  text-decoration: none;
  transition:      color var(--transition-base);
}
a:hover {
  color: var(--lumiere-rose-dark);
}

/* Images */
img {
  max-width:  100%;
  height:     auto;
  display:    block;
}

/* Elementor container max-width override */
.elementor-section.elementor-section-boxed
  > .elementor-container {
  max-width: 1280px;
}







/* ============================================================
   Block 3: Reusable Components, Buttons, Badges & Utilities
   These classes can be applied to any Elementor widget via
   Advanced → CSS Classes field
   ============================================================ */

/* ── Section Tags (small rose pill label) ──
   Usage: add class "lm-tag" or "lm-tag-gold" to a Text widget */
.lm-tag {
  display:       inline-block;
  background:    var(--lumiere-rose-light);
  color:         var(--lumiere-rose-dark);
  font-size:     var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:       8px 18px;
  border-radius: var(--radius-pill);
  font-weight:   500;
  margin-bottom: 1rem;
}

.lm-tag-gold {
  background:  var(--lumiere-gold-light);
  color:       var(--lumiere-gold);
  border:      1px solid var(--lumiere-border-gold);
}

/* ── Primary Button ──
   Usage: add class "lm-btn-primary" to a Button widget */
.elementor-button.lm-btn-primary,
.lm-btn-primary {
  background-color: var(--lumiere-charcoal) !important;
  color:            var(--lumiere-white) !important;
  border:           none !important;
  border-radius:    var(--radius-pill) !important;
  padding:          16px 36px !important;
  font-family:      var(--font-body) !important;
  font-size:        var(--text-sm) !important;
  letter-spacing:  0.09em !important;
  text-transform:  uppercase !important;
  transition:       all var(--transition-base) !important;
  box-shadow:       none !important;
}
.elementor-button.lm-btn-primary:hover,
.lm-btn-primary:hover {
  background-color: var(--lumiere-rose-dark) !important;
  transform:         translateY(-2px);
  box-shadow:        var(--shadow-md) !important;
}

/* ── Outline Button ──
   Usage: add class "lm-btn-outline" to a Button widget */
.elementor-button.lm-btn-outline,
.lm-btn-outline {
  background-color: transparent !important;
  color:            var(--lumiere-charcoal) !important;
  border:           1.5px solid var(--lumiere-charcoal) !important;
  border-radius:    var(--radius-pill) !important;
  padding:          15px 32px !important;
  font-family:      var(--font-body) !important;
  font-size:        var(--text-sm) !important;
  letter-spacing:  0.09em !important;
  text-transform:  uppercase !important;
  transition:       all var(--transition-base) !important;
}
.elementor-button.lm-btn-outline:hover,
.lm-btn-outline:hover {
  border-color: var(--lumiere-rose) !important;
  color:        var(--lumiere-rose) !important;
}

/* ── Card Base ──
   Usage: add class "lm-card" to any Section or Column */
.lm-card {
  background:    var(--lumiere-white);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    transform var(--transition-base),
                 box-shadow var(--transition-base);
}
.lm-card:hover {
  transform:  translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* ── Product Card ── */
.lm-product-card {
  background:    var(--lumiere-cream);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    transform var(--transition-base),
                 box-shadow var(--transition-base);
  cursor:        pointer;
}
.lm-product-card:hover {
  transform:  translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}

/* ── Divider / horizontal rule ── */
.lm-divider {
  border:     none;
  border-top: 1px solid var(--lumiere-border);
  margin:     2rem 0;
}

/* ── Star Rating ── */
.lm-stars {
  color:       var(--lumiere-gold);
  font-size:   1rem;
  letter-spacing: 2px;
  margin-bottom: 0.4rem;
}

/* ── Price Display ── */
.lm-price {
  font-size:   1.1rem;
  font-weight: 500;
  color:       var(--lumiere-charcoal);
}
.lm-price-old {
  font-size:        0.85rem;
  color:            var(--lumiere-muted);
  text-decoration:  line-through;
  margin-left:      6px;
}
.lm-price-save {
  background:   var(--lumiere-success-bg);
  color:        var(--lumiere-success);
  font-size:    var(--text-xs);
  padding:      4px 10px;
  border-radius: var(--radius-pill);
  font-weight:  500;
}

/* ── Dark Section Utility ──
   Usage: add class "lm-section-dark" to any Elementor Section */
.lm-section-dark {
  background-color: var(--lumiere-charcoal) !important;
}
.lm-section-dark h1,
.lm-section-dark h2,
.lm-section-dark h3,
.lm-section-dark h4,
.lm-section-dark p {
  color: var(--lumiere-white);
}
.lm-section-dark h2 em {
  color: var(--lumiere-gold);
}

/* ── Rose Section Utility ── */
.lm-section-rose {
  background-color: var(--lumiere-rose-light) !important;
}

/* ── Cream Section Utility ── */
.lm-section-cream {
  background-color: var(--lumiere-cream) !important;
}

/* ── Marquee Animation ──
   Apply to a container with overflow:hidden */
.lm-marquee-track {
  display:   inline-flex;
  gap:       4rem;
  animation: lm-marquee 22s linear infinite;
  white-space: nowrap;
}
@keyframes lm-marquee {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* ── Fade-up Scroll Animation ──
   Add class "lm-fade-up" — JS will add "lm-visible" on scroll */
.lm-fade-up {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.lm-fade-up.lm-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Responsive: Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  :root {
    --section-pad: 70px 5%;
  }
}

/* ── Responsive: Mobile (≤640px) ── */
@media (max-width: 640px) {
  :root {
    --section-pad: 50px 4%;
  }
  .lm-btn-primary,
  .lm-btn-outline {
    width:      100%;
    text-align: center;
  }
}/* End custom CSS */