#fw-section-donations-323377a5-4130-4ae7-9219-ba71f6c98330 {

/* =========================================
   Modern Main Section (Donations) Design
   ========================================= */

/* =========================================
   GLOBAL FONT SETTINGS
   ========================================= */

/* 1. Import the 'Inter' Font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. Apply it to EVERYTHING */
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, li, 
input, button, select, textarea,
.header__nav .header__list-item a,
.donations__form-container,
.newsletter__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Makes text look sharper on Mac/iPhone */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* 1. The Section Background - Soft & Clean */
section[data-section-id="fw-section-donations-ad44a879-24ff-4d75-86a0-13de8117d63b"],
#fw-section-donations-ad44a879-24ff-4d75-86a0-13de8117d63b {
    /* A subtle, premium off-white gradient */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    padding: 80px 0 !important; /* Give it room to breathe */
    font-family: 'Inter', -apple-system, sans-serif !important; /* Match Header Font */
}

/* 2. The Card Container - "Floating" Effect */
.donations__form-container {
    background: #ffffff !important;
    padding: 3rem !important;
    border-radius: 24px !important;
    /* Beautiful soft double-shadow for depth */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05), 
        0 20px 40px -5px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    max-width: 600px !important; /* Ensure it doesn't stretch too wide */
    margin: 0 auto !important; /* Center alignment */
}

/* 3. Text Styling inside the form */
.donations__form-container h2, 
.donations__form-container h3, 
.donations__form-container p {
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
}

/* 4. Input Fields (Auto-detecting standard inputs) */
.donations__form-container input,
.donations__form-container select,
.donations__form-container textarea {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    background-color: #f8fafc !important; /* Light gray background for inputs */
}

.donations__form-container input:focus,
.donations__form-container select:focus {
    border-color: #6366f1 !important; /* Matches button */
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; /* Focus ring */
}

/* 5. The Primary Button - Interaction & Pop */
.donations__form-container .button--primary {
    background: #1a1a1a !important; /* Matched to Header Logo color for consistency */
    color: #ffffff !important;
    border-radius: 50px !important; /* Full pill shape */
    font-weight: 600 !important;
    padding: 14px 28px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    width: 100% !important; /* Full width for mobile friendliness */
    margin-top: 1rem !important;
}

/* Hover Effect for Button */
.donations__form-container .button--primary:hover {
    background: #000000 !important;
    transform: translateY(-2px) !important; /* Subtle lift */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* Glow shadow */
}

.donations__form-container .button--primary:active {
    transform: translateY(0) !important;
}
}
#fw-section-custom-html-3bd6b900-af00-45c4-aadd-2d7b4f4ba5cb {

/* =========================================
   "Where the Money Goes" Section Design
   ========================================= */

/* =========================================
   GLOBAL FONT SETTINGS
   ========================================= */

/* 1. Import the 'Inter' Font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. Apply it to EVERYTHING */
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, li, 
input, button, select, textarea,
.header__nav .header__list-item a,
.donations__form-container,
.newsletter__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Makes text look sharper on Mac/iPhone */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* 1. Container Spacing */
.trust-section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
    font-family: 'Inter', -apple-system, sans-serif;
    text-align: center;
}

/* 2. Header Typography */
.trust-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.trust-header p {
    font-size: 1.1rem;
    color: #6b7280; /* Softer gray */
    margin-bottom: 48px;
}

/* 3. The Grid Layout */
.trust-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap; /* Stacks nicely on mobile */
}

/* 4. Individual Cards */
.trust-card {
    background: #ffffff;
    flex: 1 1 300px; /* Base width 300px, but flexible */
    max-width: 350px;
    padding: 32px 24px;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05); /* Very subtle border */
    
    /* Matches your previous "Floating" shadow style */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect: Card lifts up */
.trust-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
}

/* 5. Icon Circles */
.icon-wrapper {
    width: 60px;
    height: 60px;
    background: #f3f4f6; /* Light gray circle */
    border-radius: 50%; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto; /* Center horizontally */
    color: #1a1a1a; /* Icon color */
}

.icon-wrapper svg {
    width: 28px;
    height: 28px;
}

/* 6. Card Typography */
.trust-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.trust-card p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .trust-card {
        max-width: 100%; /* Full width on phones */
    }
}
}
#fw-section-custom-html-a9f17e57-6fd2-4d7c-832d-2043f64e9e5a {

/* =========================================
   FAQ Section Design
   ========================================= */

/* =========================================
   GLOBAL FONT SETTINGS
   ========================================= */

/* 1. Import the 'Inter' Font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. Apply it to EVERYTHING */
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, li, 
input, button, select, textarea,
.header__nav .header__list-item a,
.donations__form-container,
.newsletter__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Makes text look sharper on Mac/iPhone */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

.faq-section-container {
    max-width: 900px; /* Slightly narrower for readability */
    margin: 0 auto;
    padding: 60px 24px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.03em;
}

/* The 2x2 Grid Layout */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 24px;
}

/* Individual FAQ Card */
.faq-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); /* Very subtle shadow */
    transition: all 0.2s ease;
}

.faq-card:hover {
    border-color: #1a1a1a; /* Border turns black on hover */
    transform: translateY(-2px);
}

/* Typography */
.faq-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.4;
}

.faq-card p {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0; /* Remove default paragraph margin */
}

/* Mobile: Stack them in 1 column */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr; /* Single column */
    }
}
}
#fw-section-newsletter-3fa3643a-0609-45c3-a332-69f9626799e3 {

/* =========================================
   NUCLEAR FIX: Newsletter Section
   ========================================= */


/* =========================================
   GLOBAL FONT SETTINGS
   ========================================= */

/* 1. Import the 'Inter' Font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. Apply it to EVERYTHING */
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, li, 
input, button, select, textarea,
.header__nav .header__list-item a,
.donations__form-container,
.newsletter__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Makes text look sharper on Mac/iPhone */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* 1. Reset the entire section background */
section[data-section-id="fw-section-newsletter-1752044559"],
#fw-section-newsletter-1752044559 {
    background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%) !important;
    padding: 80px 24px !important;
}

/* 2. The Card */
.newsletter__content {
    background: #ffffff !important;
    padding: 4rem 2.5rem !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05) !important;
    border: none !important; /* Removed border to reduce visual noise */
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 3. Container Alignment */
.newsletter-form__input-button-container {
    display: flex !important;
    align-items: center !important; 
    gap: 12px !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    
    /* Remove any borders on the container itself */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================================
   THE FIX: Aggressive Input Reset
   ========================================= */

/* Target the input and ANY wrapper divs around it */
.newsletter-form__input-wrapper, 
.newsletter-form__field-wrapper,
.newsletter-form__input-button-container div {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* The Actual Input Field */
input[type="email"].newsletter-form__input,
.newsletter-form__input {
    /* 1. KILL ALL EXISTING STYLES */
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important; /* Kills fake borders */
    outline: none !important;    /* Kills focus rings */
    background-image: none !important; /* Kills gradients */
    
    /* 2. APPLY SINGLE CLEAN STYLE */
    border: 1px solid #d1d5db !important; /* One single solid gray line */
    background-color: #f8fafc !important;
    
    /* 3. Shape & Size */
    border-radius: 50px !important;
    height: 52px !important;
    padding: 0 24px !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Focus State - Single Black Line */
input[type="email"].newsletter-form__input:focus,
.newsletter-form__input:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 1px #000000 !important; /* Adds 1px thickness to border only */
    outline: none !important;
}

/* =========================================
   Button Styling
   ========================================= */
.newsletter-form__button .button--primary {
    height: 52px !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0 32px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important; /* Ensure no border on button either */
}
input#newsletter-email {
    border: 1px solid grey !important;
    border-radius: 25px !important;
}
}

#fw-section-hero-1752044559 {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #E0E2DB;
--color-on-background-rgb: 224, 226, 219;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #E0E2DB;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #E0E2DB;
--secondary-btn-bg: transparent;
--secondary-btn-text: #E0E2DB;
--secondary-btn-border-color: #E0E2DB;

}
#fw-section-featured-collection-ab297f52-992b-40bc-8127-07357b16a654 {

.section-header__heading {
  text-transform: capitalize !important;
}
}
#fw-section-custom-html-8fbe0fa7-6884-4b52-86ff-3fcacbfbaa63 {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0a0b0f;
--color-background-rgb: 10, 11, 15;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0a0b0f !important;
}


/* ========= HERO GLOW ========= */
.dk-hero {
  position: relative;
  overflow: hidden;
}

.dk-hero::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(123,139,255,0.25) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  z-index: 0;
}

.dk-hero::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(123,139,255,0.15) 0%, transparent 70%);
  bottom: -120px;
  right: -120px;
  z-index: 0;
}

.dk-hero-inner {
  position: relative;
  z-index: 1;
}


/* ========= CTA MICRO INTERACTION ========= */
.dk-btn-primary,
.dk-btn-secondary {
  transition: all 0.25s ease;
  position: relative;
}

.dk-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(123,139,255,0.35);
}

.dk-btn-secondary:hover {
  transform: translateY(-3px);
  border-color: #7b8bff;
  color: #fff;
}


/* ========= STATS ANIMATION BASE ========= */
.dk-stat-num {
  font-weight: 700;
  letter-spacing: -0.5px;
  transition: transform 0.3s ease;
}

.dk-hero-stats div:hover .dk-stat-num {
  transform: scale(1.1);
}


/* ========= OPTIONAL: FADE IN ON LOAD ========= */
.dk-hero-inner {
  animation: fadeUp 0.8s ease forwards;
}

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



.dk-hero {
  background-color: #0a0b0f;
  padding: 80px 28px;
  text-align: center;
}
.dk-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.dk-hero-badge {
  display: inline-block;
  background-color: #13151e;
  border: 1px solid #2a2d45;
  color: #7b8bff;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.dk-hero-title {
  font-family: 'Figtree', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: #f0f1f5;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.dk-hero-title span {
  color: #5b6af0;
}
.dk-hero-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  color: #9ea3b8;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.dk-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.dk-btn-primary {
  background-color: #5b6af0;
  color: #ffffff;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}
.dk-btn-secondary {
  background-color: #161922;
  color: #f0f1f5;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #2a2d45;
  display: inline-block;
}
.dk-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding-top: 36px;
  border-top: 1px solid #1e2030;
  flex-wrap: wrap;
}
.dk-stat-num {
  font-family: 'Figtree', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #f0f1f5;
}
.dk-stat-label {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #5c6080;
  margin-top: 4px;
}
}
#fw-section-featured-product-cdaafd0f-85b5-4c1a-b681-2e7a7a89b738 {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0f1117;
--color-background-rgb: 15, 17, 23;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #ffffff;
--color-background-brightness: 17;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0a0b0f !important;
}
button.button.button--primary.button--large.button--expand {
    background-color: #5B6AF0 !important;
    color: #fff !important;
}
/* ===== SECTION WRAPPER ===== */
.featured-product {
  background: #0a0b0f;
}

/* ===== CARD CONTAINER ===== */
.featured-product__main {
  background: #12141c;
  border: 1px solid #1e2030;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

/* ===== PRODUCT TITLE ===== */
.featured-product-info__title a {
  font-family: 'Figtree', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #f0f1f5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.featured-product-info__title a:hover {
  color: #7b8bff;
}

/* ===== PRICE ===== */
.featured-product-info__price--original {
  font-size: 22px;
  font-weight: 700;
  color: #7b8bff;
}

/* ===== DESCRIPTION ===== */
.featured-product-info__description {
  font-size: 15px;
  line-height: 1.7;
  color: #9ea3b8;
}

/* ===== BULLET LIST CLEANUP ===== */
.featured-product-info__description ul {
  padding-left: 18px;
  margin-top: 10px;
}

.featured-product-info__description li {
  margin-bottom: 6px;
}

/* ===== CTA BUTTON ===== */
.button--primary {
  background: linear-gradient(135deg, #7b8bff, #5a6cff);
  border: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.25s ease;
}

/* Hover effect */
.button--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(123,139,255,0.35);
}

/* Active click */
.button--primary:active {
  transform: scale(0.97);
}

/* ===== GALLERY IMAGE ===== */
.gallery__image-container {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #1e2030;
  background: #0a0b0f;
}

/* Subtle hover zoom */
.gallery__image-object {
  transition: transform 0.4s ease;
}

.gallery__image-container:hover .gallery__image-object {
  transform: scale(1.05);
}

/* ===== THUMBNAILS ===== */
.gallery-thumbs__item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.gallery-thumbs__item:hover {
  border-color: #7b8bff;
}

.gallery-thumbs__item.tns-nav-active {
  border-color: #7b8bff;
}

/* ===== NAV ARROWS ===== */
.gallery__nav-item {
  background: #161922;
  border: 1px solid #1e2030;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.gallery__nav-item:hover {
  background: #7b8bff;
  color: #fff;
}

/* ===== READ MORE LINK ===== */
.featured-product-info__read-more {
  color: #7b8bff;
  font-weight: 500;
}

.featured-product-info__read-more:hover {
  text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .featured-product__main {
    padding: 24px;
  }

  .featured-product-info__title a {
    font-size: 22px;
  }
}
}
#fw-section-custom-html-6044e1a9-399e-4529-9d26-74fe75ee099e {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0f1117;
--color-background-rgb: 15, 17, 23;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 17;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0f1117 !important;
}

.dk-products {
  background-color: #0f1117;
  padding: 80px 28px;
  border-top: 1px solid #1e2030;
}
.dk-products-header {
  text-align: center;
  margin-bottom: 52px;
}
.dk-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7b8bff;
  display: block;
  margin-bottom: 12px;
}
.dk-section-title {
  font-family: 'Figtree', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #f0f1f5;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.dk-section-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: #9ea3b8;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}
.dk-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.dk-card {
  background-color: #161922;
  border: 1px solid #1e2030;
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.dk-card:hover {
  border-color: #2a2d45;
}
.dk-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.dk-card-icon {
  width: 42px; height: 42px;
  background-color: #13151e;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.dk-card-badge {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge-hot  { background-color: #2a1020; color: #ff5e7e; border: 1px solid #3d1428; }
.badge-new  { background-color: #0d2420; color: #00c9a7; border: 1px solid #1a3d36; }
.badge-dl   { background-color: #151830; color: #7b8bff; border: 1px solid #252a4a; }
.badge-upd  { background-color: #2a2010; color: #f5a623; border: 1px solid #3d3018; }
.dk-card-name {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #f0f1f5;
  margin-bottom: 8px;
}
.dk-card-desc {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #9ea3b8;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 18px;
}
.dk-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.dk-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #5c6080;
  background-color: #0f1117;
  padding: 3px 9px;
  border-radius: 4px;
}
.dk-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid #1e2030;
}
.dk-card-price {
  font-family: 'Figtree', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #f0f1f5;
}
.dk-card-price small {
  font-size: 13px;
  color: #5c6080;
  font-weight: 400;
}
.dk-btn-card {
  background-color: #5b6af0;
  color: #ffffff;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}
@media (max-width: 900px) { .dk-products-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .dk-products-grid { grid-template-columns: 1fr; } }


/* Disable all cards except the first one */
.dk-products-grid .dk-card:not(:first-child) {
  opacity: 0.6;
  filter: grayscale(100%);
  pointer-events: none;
  position: relative;
}

/* Blur sensitive content (name + price + desc + tags) */
.dk-products-grid .dk-card:not(:first-child) 
.dk-card-name,
.dk-products-grid .dk-card:not(:first-child) 
.dk-card-desc,
.dk-products-grid .dk-card:not(:first-child) 
.dk-card-tags,
.dk-products-grid .dk-card:not(:first-child) 
.dk-card-price {
  filter: blur(6px);
  user-select: none;
}

/* Optional overlay */
.dk-products-grid .dk-card:not(:first-child)::after {
  content: "Coming Soon";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
}

/* Keep first card fully active */
.dk-products-grid .dk-card:first-child {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
}
#fw-section-custom-html-6de67306-f928-42e3-847e-8163e16de0ff {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0a0b0f;
--color-background-rgb: 10, 11, 15;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0a0b0f !important;
}
.dk-why {
  background-color: #0a0b0f;
  padding: 80px 28px;
  border-top: 1px solid #1e2030;
}
.dk-why-header {
  text-align: center;
  margin-bottom: 52px;
}
.dk-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.dk-why-item {
  background-color: #161922;
  border: 1px solid #1e2030;
  border-radius: 16px;
  padding: 32px 26px;
}
.dk-why-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}
.dk-why-title {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0f1f5;
  margin-bottom: 10px;
}
.dk-why-desc {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: #9ea3b8;
  line-height: 1.65;
}
@media (max-width: 900px) { .dk-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .dk-why-grid { grid-template-columns: 1fr; } }
}
#fw-section-custom-html-a94c1d64-45f6-4b3d-a09d-171b00cc2b5c {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0a0b0f;
--color-background-rgb: 10, 11, 15;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 11;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0a0b0f !important;
}
.dk-about {
  background-color: #0a0b0f;
  padding: 80px 28px;
  border-top: 1px solid #1e2030;
}
.dk-about-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}
.dk-about-left { display: flex; flex-direction: column; gap: 16px; }
.dk-about-avatar {
  width: 64px; height: 64px;
  background-color: #5b6af0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.dk-about-name {
  font-family: 'Figtree', sans-serif;
  font-size: 18px; font-weight: 700; color: #f0f1f5;
}
.dk-about-handle {
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: #5c6080;
}
.dk-cred-tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #9ea3b8;
  background-color: #161922;
  border: 1px solid #1e2030;
  padding: 5px 12px;
  border-radius: 100px;
  margin: 3px 3px 3px 0;
}
.dk-about-quote {
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #f0f1f5;
  line-height: 1.55;
  margin-bottom: 20px;
  border-left: 3px solid #5b6af0;
  padding-left: 20px;
}
.dk-about-body {
  font-family: 'Figtree', sans-serif;
  font-size: 16px; color: #9ea3b8; line-height: 1.8;
}
@media (max-width: 700px) { .dk-about-inner { grid-template-columns: 1fr; gap: 32px; } }
}
#fw-section-custom-html-6087b9d8-1901-493c-b5db-93c7eb490bfc {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0f1117;
--color-background-rgb: 15, 17, 23;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 17;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0f1117 !important;
}
.dk-testi {
  background-color: #0f1117;
  padding: 80px 28px;
  border-top: 1px solid #1e2030;
}
.dk-testi-header {
  text-align: center;
  margin-bottom: 52px;
}
.dk-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.dk-testi-card {
  background-color: #161922;
  border: 1px solid #1e2030;
  border-radius: 16px;
  padding: 28px;
}
.dk-stars {
  color: #f5a623;
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.dk-testi-text {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: #9ea3b8;
  line-height: 1.75;
  margin-bottom: 22px;
  font-style: italic;
}
.dk-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #1e2030;
}
.dk-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.dk-av-1 { background-color: #5b6af0; }
.dk-av-2 { background-color: #ff5e7e; }
.dk-av-3 { background-color: #00c9a7; }
.dk-author-name {
  font-family: 'Figtree', sans-serif;
  font-size: 14px; font-weight: 700; color: #f0f1f5;
}
.dk-author-role {
  font-family: 'Figtree', sans-serif;
  font-size: 12px; color: #5c6080;
}
@media (max-width: 900px) { .dk-testi-grid { grid-template-columns: 1fr; } }
}
#fw-section-custom-html-c7e49c10-c101-40c5-985b-5c9539b09e6f {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0f1117;
--color-background-rgb: 15, 17, 23;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 17;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
.main__sections {
  background-color: #0f1117 !important;
}
.dk-cta {
  background-color: #0f1117;
  padding: 100px 28px;
  text-align: center;
  border-top: 1px solid #1e2030;
}
.dk-cta-inner {
  max-width: 620px;
  margin: 0 auto;
}
.dk-cta-title {
  font-family: 'Figtree', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #f0f1f5;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.dk-cta-title span { color: #5b6af0; }
.dk-cta-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  color: #9ea3b8;
  line-height: 1.7;
  margin-bottom: 36px;
}
.dk-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.dk-cta-note {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #5c6080;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
}
#fw-section-links-list-1752044559 {

.link-list__heading {
  text-transform: capitalize !important;
}
}
#fw-section-footer {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0e1016;
--color-background-rgb: 14, 16, 22;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 16;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* 1. Target the main footer wrapper and its inner div */
.page__footer, 
.footer,
#fw-section-footer,
.footer--center {
  background-color: #e2e8f0 !important; /* The solid color base */
  background-image: none !important; /* Removes any default Fourthwall image */
  background: #e2e8f0 !important; /* Re-enforces the color */
  margin: 0 !important;
  border: none !important;
}

/* 2. Style the social link circles */
.footer__social-link {
  background: #ffffff !important;
  color: #111827 !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.footer__social-link:hover {
  transform: translateY(-3px) !important;
  background: #6366f1 !important;
  color: #ffffff !important;
}

/* 3. Link colors and typography */
.footer__menu-link, 
.footer__copy, 
.footer__powered-by {
  color: #4b5563 !important;
  text-decoration: none !important;
}

.footer__menu-link:hover {
  color: #6366f1 !important;
}

/* 4. Currency button styling */
.footer__list-item .footer__menu-link--icon {
  background: rgba(255, 255, 255, 0.5) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
}
}
#fw-section-header {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #0f1117;
--color-background-rgb: 15, 17, 23;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 17;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
/* =========================================
   Modern Fourthwall Header Design
   ========================================= */

/* =========================================
   GLOBAL FONT SETTINGS
   ========================================= */

/* 1. Import the 'Inter' Font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 2. Apply it to EVERYTHING */
body, 
h1, h2, h3, h4, h5, h6, 
p, span, a, li, 
input, button, select, textarea,
.header__nav .header__list-item a,
.donations__form-container,
.newsletter__content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Makes text look sharper on Mac/iPhone */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* 1. Base Header Container & "Glass" Effect */
.header {
    position: sticky; /* Keeps header at top while scrolling */
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    backdrop-filter: blur(12px); /* The "Frosted Glass" effect */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separation line */
    transition: all 0.3s ease;
    padding: 15px 0;
}

/* 2. Layout & Spacing */
.header .wrapper {
    max-width: 1400px; /* Wider modern standard */
    margin: 0 auto;
    padding: 0 24px;
}

.header__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto; /* Allow flexible height */
}

/* 3. Logo Typography */
.header__logo-link {
    text-decoration: none;
    color: #1a1a1a; /* Soft black */
    transition: opacity 0.2s ease;
}

.header__logo-link:hover {
    opacity: 0.7;
}

.text-logo {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em; /* Tighter tracking for modern look */
    text-transform: uppercase; /* Optional: Remove if you prefer mixed case */
}

/* 4. Navigation Links (Desktop) */
.header__nav .header__list-item a {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #4a4a4a;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.header__nav .header__list-item a:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.04); /* Subtle pill hover effect */
}

/* 5. Icons (Cart & Menu) */
.header__icon {
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header__icon:hover {
    transform: scale(1.1); /* Slight bounce on hover */
    color: #000;
}

/* 6. Modern Cart Widget */
.cart-widget {
    position: relative;
}

/* The Cart Count Badge */
.cart-widget__items {
    background-color: #000; /* Black badge */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -8px;
    border: 2px solid #fff; /* White ring separates badge from icon */
}

/* SVG Cleanup */
.header__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5px; /* Thinner, elegant lines */
}

/* Mobile Menu Trigger Fix */
.header__mobile-menu button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
}
#fw-section-product {
--color-primary: #d9d9d9;
--color-primary-rgb: 217, 217, 217;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #d9d9d9;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
/* ===== GLOBAL BACKGROUND ===== */
#fw-section-product {
  background: #faf7f4;
  color: #1a1614;
  font-family: "Inter", sans-serif;
}

/* ===== MAIN CARD ===== */
.product__main {
  background: #ffffff;
  border: 0.5px solid #e0d9d0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* Subtle warm glow */
.product__main::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -120px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(74, 63, 196, 0.06), transparent 70%);
}
.product__main::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -120px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(74, 63, 196, 0.04), transparent 70%);
}

/* ===== TITLE ===== */
.product-info__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1614;
}

/* ===== PRICE ===== */
.product-info__price--original {
  font-size: 24px;
  font-weight: 700;
  color: #4a3fc4;
}

/* ===== DESCRIPTION ===== */
.product-info__description {
  color: #5a5249;
  font-size: 15px;
  line-height: 1.7;
}
.product-info__description strong {
  color: #1a1614;
}
.product-info__description ul {
  margin-top: 10px;
  padding-left: 18px;
}
.product-info__description li {
  margin-bottom: 6px;
}

/* ===== IMAGE GALLERY ===== */
.gallery__image-container {
  border-radius: 16px;
  overflow: hidden;
  border: 0.5px solid #e0d9d0;
  background: #f5f0eb;
}
.gallery__image-object {
  transition: transform 0.4s ease, filter 0.3s ease;
}
.gallery__image-container:hover .gallery__image-object {
  transform: scale(1.05);
}

/* ===== THUMBNAILS ===== */
.gallery-thumbs__item {
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.gallery-thumbs__item.tns-nav-active {
  border-color: #4a3fc4;
}
.gallery-thumbs__item:hover {
  border-color: #4a3fc4;
}

/* ===== CTA BUTTON ===== */
.button--primary {
  background: #4a3fc4;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  color: #ffffff;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.button--primary:hover {
  background: #3b31a8;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(74, 63, 196, 0.22);
}
.button--primary:active {
  transform: scale(0.97);
}

/* Shimmer sweep */
.button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
}
.button--primary:hover::after {
  transform: translateX(100%);
  transition: 0.6s ease;
}

/* ===== QUANTITY SELECT ===== */
.select-field__select {
  background: #ffffff;
  border: 0.5px solid #e0d9d0;
  border-radius: 10px;
  color: #1a1614;
}

/* ===== NAV BUTTONS ===== */
.gallery__nav-item {
  background: #ffffff;
  border: 0.5px solid #e0d9d0;
  border-radius: 50%;
  color: #7a726a;
  transition: all 0.2s ease;
}
.gallery__nav-item:hover {
  background: #4a3fc4;
  color: #ffffff;
  border-color: #4a3fc4;
}

/* ===== STICKY CTA ===== */
.sticky-add-to-cart {
  backdrop-filter: blur(10px);
  background: rgba(250, 247, 244, 0.88);
  border-top: 0.5px solid #e0d9d0;
}

/* ===== OFFER PRICE (struck-through) ===== */
.product-info__price--offer {
  color: #b06040 !important;
  text-decoration: line-through;
  opacity: 0.8;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .product__main {
    padding: 20px;
  }
  .product-info__title {
    font-size: 22px;
  }
}
}
#fw-section-custom-html-621280db-798c-4d78-93f0-8d0a3d5d59b9 {
--font-heading-scale: 1.0;
--font-body-scale: 1.0;
}
#fw-section-custom-html-621280db-798c-4d78-93f0-8d0a3d5d59b9 {

.pw {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 20px;
    font-family: 'DM Sans', sans-serif;
    background: transparent;
  }
  .ph {
    text-align: center;
    margin-bottom: 52px;
  }
  .pb {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(139, 195, 148, 0.12);
    border: 1px solid rgba(139, 195, 148, 0.25);
    font-size: 12px;
    font-weight: 500;
    color: #81c784;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .ph h2 {
    font-family: 'Syne', sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.12;
    color: #f0f4f8;
    margin: 0 0 16px;
    letter-spacing: -1.5px;
  }
  .ph h2 em {
    font-style: normal;
    color: #81c784;
  }
  .ph p {
    font-size: 16px;
    color: #8fa3b1;
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
  }
  .ps {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .psi {
    padding: 18px 28px;
    border-radius: 16px;
    background: #0d1117;
    border: 1px solid #1e2730;
    text-align: center;
    min-width: 160px;
  }
  .psi strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #e8f5e9;
    margin-bottom: 4px;
  }
  .psi span {
    font-size: 12px;
    color: #607d8b;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .pg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }
  .pc {
    background: #0d1117;
    border: 1px solid #1e2730;
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
  }
  .pc:hover {
    border-color: #2a3a46;
    transform: translateY(-4px);
  }
  .pc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129, 199, 132, 0.3), transparent);
  }
  .phl {
    background: #0f1a14;
    border-color: #1e3326;
  }
  .phl::after {
    background: linear-gradient(90deg, transparent, rgba(129, 199, 132, 0.55), transparent);
  }
  .pi {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #131c24;
    border: 1px solid #1e2d38;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    flex-shrink: 0;
  }
  .phl .pi {
    background: #0d1f14;
    border-color: #1e3326;
  }
  .pc h3 {
    font-family: 'Syne', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #e8f0f7;
    margin: 0 0 10px;
    line-height: 1.25;
  }
  .pc > p {
    font-size: 14px;
    color: #7a95a8;
    line-height: 1.7;
    margin: 0 0 18px;
  }
  .pc ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pc li {
    font-size: 13.5px;
    color: #c8d8e4;
    padding: 6px 0;
    border-bottom: 1px solid #131c24;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .phl li {
    border-bottom-color: #0d1a11;
  }
  .pc li:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .pc li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #81c784;
    flex-shrink: 0;
  }
  .phl li::before {
    background: #a5d6a7;
  }
  .phl h3 {
    color: #c8e6c9;
  }
  .pt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #81c784;
    margin-bottom: 6px;
    display: block;
  }

  @media (max-width: 768px) {
    .ph h2 {
      font-size: 30px;
    }
    .pg {
      grid-template-columns: 1fr;
    }
    .psi {
      min-width: 130px;
    }
  }
}
#fw-section-custom-html-fd05e18b-8246-4dd0-b26b-47a81841b3bd {

/* PayslipGen FAQ Section Styles */
.payslipgen-faq-container {
    max-width: 800px;
    margin: 60px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    color: #1e293b;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.faq-header p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
}

/* Accordion Styles */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}

/* Hide the default HTML arrow */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-question {
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}

.faq-icon {
    font-size: 20px;
    font-weight: 400;
    color: #64748b;
    transition: transform 0.3s ease;
}

/* Rotate icon when open */
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    color: #2563eb;
}

.faq-item[open] .faq-question {
    border-bottom: 1px solid #e2e8f0;
    color: #2563eb;
}

.faq-answer {
    padding: 20px 24px;
    background: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

.faq-answer p {
    margin: 0;
}

/* Pre-sale CTA Box */
.faq-cta {
    margin-top: 50px;
    background: #0f172a;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    color: #ffffff;
}

.faq-cta h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.faq-cta p {
    font-size: 15px;
    color: #94a3b8;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.faq-btn {
    display: inline-block;
    background: #3b82f6;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.faq-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

.faq-btn:active {
    transform: scale(0.98);
}
}