.elementor-kit-114{--e-global-color-primary:#2D3D34;--e-global-color-secondary:#C9A96E;--e-global-color-text:#3A3A3A;--e-global-color-accent:#D4826A;--e-global-color-04237e2:#F5F1E8;--e-global-color-77ee353:#A67C52;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Jost";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Libre Baskerville";--e-global-typography-accent-font-weight:500;}.elementor-kit-114 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 *//*
 * GEOMETRIC LAMP - Custom Elementor CSS
 * A warm, artisan aesthetic inspired by Scandinavian craft
 * 
 * HOW TO USE IN ELEMENTOR:
 * 1. Go to Elementor > Custom CSS (or Appearance > Customize > Additional CSS)
 * 2. Paste this entire file
 * 3. Use the CSS variables throughout your Elementor designs
 * 4. Apply class names to widgets via Advanced > CSS Classes
 */

/* ============================================
   ROOT VARIABLES - Your Colour Palette
   ============================================ */
:root {
  /* Primary Colours */
  --color-cream: #F5F1E8;
  --color-cream-warm: #EDE7DA;
  --color-forest: #2D3D34;
  --color-forest-light: #3D5147;
  --color-charcoal: #3A3A3A;
  --color-charcoal-soft: #5A5A5A;
  
  /* Accent Colours */
  --color-terracotta: #D4826A;
  --color-terracotta-hover: #C4725A;
  --color-terracotta-soft: #E4A28A;
  --color-rope: #C9A96E;
  --color-rope-light: #D9C99E;
  --color-wood: #A67C52;
  --color-wood-dark: #8B6642;
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #FDFCFA;
  --color-grey-light: #E8E4DC;
  --color-grey-mid: #B8B4AC;
  --color-grey-dark: #6A6A6A;
  --color-black: #1A1A1A;
  
  /* Warm Glow (for lamp effects) */
  --color-glow: #FFE4B5;
  --color-glow-soft: rgba(255, 228, 181, 0.3);
  
  /* Typography */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', sans-serif;
  --font-accent: 'Libre Baskerville', 'Georgia', serif;
  
  /* Font Sizes - Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);
  --text-4xl: clamp(3rem, 2rem + 5vw, 6rem);
  
  /* Spacing Scale */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-xl: clamp(2rem, 1.5rem + 3vw, 4rem);
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
  --space-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem);
  
  /* Borders & Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-soft: 0 2px 15px rgba(58, 58, 58, 0.08);
  --shadow-medium: 0 4px 25px rgba(58, 58, 58, 0.12);
  --shadow-strong: 0 8px 40px rgba(58, 58, 58, 0.16);
  --shadow-glow: 0 0 60px rgba(255, 228, 181, 0.4);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   GOOGLE FONTS IMPORT
   Add this to your theme's header or Elementor
   ============================================ */
/*
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
*/


/* ============================================
   BASE STYLES
   ============================================ */
body {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection highlight */
::selection {
  background-color: var(--color-terracotta-soft);
  color: var(--color-charcoal);
}


/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */

/* Headings */
.gl-heading,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-forest);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.gl-heading-display {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 400;
  font-style: italic;
  color: var(--color-forest);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.gl-heading-xl {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 500;
}

.gl-heading-lg {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 500;
}

.gl-heading-md {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
}

/* Body text */
.gl-text-lg {
  font-size: var(--text-lg);
  line-height: 1.8;
}

.gl-text-sm {
  font-size: var(--text-sm);
}

.gl-text-xs {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}

/* Accent text */
.gl-accent {
  font-family: var(--font-accent);
  font-style: italic;
}

/* Quote styling */
.gl-quote {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-forest);
  border-left: 3px solid var(--color-terracotta);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}


/* ============================================
   BUTTON STYLES
   ============================================ */

/* Primary Button - Terracotta */
.gl-btn-primary,
.elementor-button.gl-btn-primary {
  background-color: var(--color-terracotta) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-soft) !important;
}

.gl-btn-primary:hover,
.elementor-button.gl-btn-primary:hover {
  background-color: var(--color-terracotta-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-medium) !important;
}

/* Secondary Button - Outline Forest */
.gl-btn-secondary,
.elementor-button.gl-btn-secondary {
  background-color: transparent !important;
  color: var(--color-forest) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2.4rem !important;
  border: 2px solid var(--color-forest) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-base) !important;
}

.gl-btn-secondary:hover,
.elementor-button.gl-btn-secondary:hover {
  background-color: var(--color-forest) !important;
  color: var(--color-cream) !important;
}

/* Minimal Button - Text style */
.gl-btn-minimal {
  background: none !important;
  color: var(--color-forest) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--color-forest) !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}

.gl-btn-minimal:hover {
  color: var(--color-terracotta) !important;
  border-bottom-color: var(--color-terracotta) !important;
}


/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

/* Cream (default) */
.gl-bg-cream {
  background-color: var(--color-cream) !important;
}

/* Warm cream with subtle texture */
.gl-bg-cream-textured {
  background-color: var(--color-cream) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
  background-blend-mode: overlay !important;
}

/* Forest green */
.gl-bg-forest {
  background-color: var(--color-forest) !important;
  color: var(--color-cream) !important;
}

.gl-bg-forest h1,
.gl-bg-forest h2,
.gl-bg-forest h3,
.gl-bg-forest h4,
.gl-bg-forest .gl-heading {
  color: var(--color-cream) !important;
}

/* Off-white */
.gl-bg-white {
  background-color: var(--color-off-white) !important;
}

/* Charcoal (dark) */
.gl-bg-dark {
  background-color: var(--color-charcoal) !important;
  color: var(--color-cream) !important;
}

.gl-bg-dark h1,
.gl-bg-dark h2,
.gl-bg-dark h3,
.gl-bg-dark h4,
.gl-bg-dark .gl-heading {
  color: var(--color-cream) !important;
}

/* Warm gradient */
.gl-bg-gradient-warm {
  background: linear-gradient(
    135deg,
    var(--color-cream) 0%,
    var(--color-cream-warm) 50%,
    var(--color-rope-light) 100%
  ) !important;
}


/* ============================================
   CARD STYLES
   ============================================ */

.gl-card {
  background-color: var(--color-off-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-smooth);
}

.gl-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

/* Product card specific */
.gl-product-card {
  background-color: var(--color-off-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-smooth);
}

.gl-product-card:hover {
  box-shadow: var(--shadow-strong);
}

.gl-product-card img {
  transition: transform var(--transition-slow);
}

.gl-product-card:hover img {
  transform: scale(1.03);
}


/* ============================================
   IMAGE TREATMENTS
   ============================================ */

/* Soft rounded corners */
.gl-img-soft {
  border-radius: var(--radius-lg) !important;
}

/* Full rounded */
.gl-img-rounded {
  border-radius: var(--radius-xl) !important;
}

/* Glow effect for lamp images */
.gl-img-glow {
  filter: drop-shadow(0 0 30px rgba(255, 228, 181, 0.3));
}

/* Frame effect */
.gl-img-framed {
  border: 8px solid var(--color-off-white);
  box-shadow: var(--shadow-medium);
}


/* ============================================
   DIVIDERS & DECORATIVE ELEMENTS
   ============================================ */

/* Thin line divider */
.gl-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-grey-light),
    transparent
  );
  border: none;
  margin: var(--space-xl) 0;
}

/* Geometric star divider (matches lamp) */
.gl-divider-star {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.gl-divider-star::before,
.gl-divider-star::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-rope),
    transparent
  );
}

.gl-divider-star::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-rope)
  );
}

.gl-divider-star::after {
  background: linear-gradient(
    90deg,
    var(--color-rope),
    transparent
  );
}


/* ============================================
   NAVIGATION STYLES
   ============================================ */

/* Main navigation */
.gl-nav {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gl-nav a {
  color: var(--color-forest) !important;
  text-decoration: none !important;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-base);
}

.gl-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-terracotta);
  transition: width var(--transition-base);
}

.gl-nav a:hover {
  color: var(--color-terracotta) !important;
}

.gl-nav a:hover::after {
  width: 100%;
}


/* ============================================
   FORM STYLES
   ============================================ */

.gl-input,
.elementor-field-textual {
  background-color: var(--color-off-white) !important;
  border: 1px solid var(--color-grey-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-charcoal) !important;
  transition: all var(--transition-base) !important;
}

.gl-input:focus,
.elementor-field-textual:focus {
  outline: none !important;
  border-color: var(--color-forest) !important;
  box-shadow: 0 0 0 3px rgba(45, 61, 52, 0.1) !important;
}

.gl-input::placeholder {
  color: var(--color-grey-mid) !important;
}

/* Labels */
.gl-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal-soft);
  margin-bottom: var(--space-xs);
  display: block;
}


/* ============================================
   FOOTER STYLES
   ============================================ */

.gl-footer {
  background-color: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.gl-footer a {
  color: var(--color-cream) !important;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.gl-footer a:hover {
  opacity: 1;
}

.gl-footer-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}


/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade in up */
@keyframes gl-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gl-animate-fade-up {
  animation: gl-fade-in-up 0.8s ease forwards;
}

/* Gentle glow pulse (for lamp images) */
@keyframes gl-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 228, 181, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(255, 228, 181, 0.5));
  }
}

.gl-animate-glow {
  animation: gl-glow-pulse 4s ease-in-out infinite;
}

/* Slow rotation (optional for decorative elements) */
@keyframes gl-slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.gl-animate-rotate {
  animation: gl-slow-rotate 60s linear infinite;
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text colours */
.gl-text-forest { color: var(--color-forest) !important; }
.gl-text-terracotta { color: var(--color-terracotta) !important; }
.gl-text-charcoal { color: var(--color-charcoal) !important; }
.gl-text-cream { color: var(--color-cream) !important; }
.gl-text-rope { color: var(--color-rope) !important; }

/* Background colours */
.gl-fill-forest { background-color: var(--color-forest) !important; }
.gl-fill-terracotta { background-color: var(--color-terracotta) !important; }
.gl-fill-cream { background-color: var(--color-cream) !important; }
.gl-fill-rope { background-color: var(--color-rope) !important; }

/* Spacing */
.gl-mt-sm { margin-top: var(--space-sm) !important; }
.gl-mt-md { margin-top: var(--space-md) !important; }
.gl-mt-lg { margin-top: var(--space-lg) !important; }
.gl-mt-xl { margin-top: var(--space-xl) !important; }

.gl-mb-sm { margin-bottom: var(--space-sm) !important; }
.gl-mb-md { margin-bottom: var(--space-md) !important; }
.gl-mb-lg { margin-bottom: var(--space-lg) !important; }
.gl-mb-xl { margin-bottom: var(--space-xl) !important; }

.gl-py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.gl-py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.gl-py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.gl-py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.gl-py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }

/* Max widths for text */
.gl-max-w-prose { max-width: 65ch !important; }
.gl-max-w-narrow { max-width: 45ch !important; }

/* Text alignment */
.gl-text-center { text-align: center !important; }
.gl-text-left { text-align: left !important; }
.gl-text-right { text-align: right !important; }


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .gl-btn-primary,
  .gl-btn-secondary {
    padding: 0.875rem 2rem !important;
    width: 100%;
    text-align: center;
  }
  
  .gl-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .gl-hide-desktop {
    display: none !important;
  }
}


/* ============================================
   WOOCOMMERCE OVERRIDES (if using)
   ============================================ */

.woocommerce .button,
.woocommerce-page .button {
  background-color: var(--color-terracotta) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-base) !important;
}

.woocommerce .button:hover,
.woocommerce-page .button:hover {
  background-color: var(--color-terracotta-hover) !important;
}

.woocommerce-Price-amount {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  color: var(--color-forest) !important;
}/* End custom CSS */