/* =====================================================================
   HOUSE OF KANHA — GLOBAL DESIGN TOKENS & BASE STYLES
   ===================================================================== */
/*@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Pinyon+Script&family=Poppins:wght@300;400;500;600&display=swap");*/

/* =====================================================================
   HOUSE OF KANHA — LOCAL FONTS (@font-face)
   ===================================================================== */

/* --- Pinyon Script --- */
@font-face {
    font-family: 'Pinyon Script';
    src: url('../fonts/PinyonScript-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Cormorant Garamond --- */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-500i.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Poppins --- */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =====================================================================
   HOUSE OF KANHA — GLOBAL DESIGN TOKENS & BASE STYLES
   ===================================================================== */


:root {
    
  --hok-ivory: #fbf7ef;
  --hok-cream: #f6efe1;
  --hok-sand: #efe5d0;
  --hok-beige: #e7dac0;
  --hok-champagne: #d8c08d;
  --hok-gold: #c3a15c;
  --hok-gold-deep: #a4813f;
  --hok-teal: #125c55;
  --hok-teal-2: #1e7a6e;
  --hok-teal-deep: #0b423e;
  --hok-teal-darker: #08302d;
  --hok-ink: #22332e;
  --hok-ink-70: rgba(34, 51, 46, 0.72);
  --hok-ink-55: rgba(34, 51, 46, 0.55);
  --hok-hairline: rgba(164, 129, 63, 0.32);
  --hok-white: #fffdf7;
  --hok-blush: #c96f5e;
  --text-background:#fffdf7a8; 
  --hok-dark-bg:#0b423ef0;
  --hok-white-bg:#fffdf7eb;
  
  --hok-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hok-font-body: "Poppins", "Segoe UI", system-ui, sans-serif;
  --hok-font-script: "Pinyon Script", cursive;
  --hok-script-font: "Pinyon Script", cursive;
    
    
    
    /* 01. BRAND COLORS */
    /*--hok-color-gold: #B8892E;*/
    /*--hok-color-gold-dark: #8E681E;*/
    /*--hok-color-gold-light: #D9BE85;*/
    /*--hok-color-emerald: #125C55;*/
    /*--hok-color-emerald-dark: #0B443F;*/
    /*--hok-color-emerald-light: #DCEBE8;*/
    /*--hok-color-maroon: #7A1F3D;*/
    /*--hok-color-maroon-dark: #5C1730;*/
    /*--hok-color-maroon-light: #F0DFE5;*/
    /*--hok-color-blush: #E7B7A0;*/
    /*--hok-color-blush-light: #FAEEEA;*/

    /* 02. NEUTRAL COLORS */
    --hok-color-white: #FFFFFF;
    --hok-color-black: #111111;
    --hok-color-ink: #29231F;
    --hok-color-text: #352F2B;
    --hok-color-text-dark: #211D1A;
    --hok-color-text-muted: #776E67;
    --hok-color-text-light: #9A918A;
    --hok-color-border: #a4813f52;
    --hok-color-border-light: #EEE9E4;
    --hok-color-border-dark: #D7CEC5;
    --hok-color-surface: #FFFFFF;
    --hok-color-surface-soft: #FAF8F5;
    --hok-color-surface-warm: #F7F2EC;
    --hok-color-page-bg: #FCFAF7;

    /* 03. STATE COLORS */
    /*--hok-color-success: #2E7D5B;*/
    /*--hok-color-success-bg: #EAF6F0;*/
    /*--hok-color-warning: #B7791F;*/
    /*--hok-color-warning-bg: #FFF7E5;*/
    /*--hok-color-danger: #B43B3B;*/
    /*--hok-color-danger-bg: #FBECEC;*/
    /*--hok-color-info: #356B8A;*/
    /*--hok-color-info-bg: #EDF5F9;*/

    /* 04. BADGE COLORS */
    /*--hok-color-badge-new: #125C55;*/
    /*--hok-color-badge-bestseller: #B8892E;*/
    /*--hok-color-badge-limited: #7A1F3D;*/
    /*--hok-color-badge-sale: #B43B3B;*/

    /* 05. TYPOGRAPHY — FONT FAMILY */
    /*--hok-font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
    /*--hok-font-display: "Cormorant Garamond", Georgia, serif;*/
    /*--hok-font-script: "Cormorant Garamond", Georgia, serif;*/

    /*--hok-font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
    /*--hok-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;*/
    /*--hok-font-script: "Pinyon Script", cursive;*/

    /* 06. FONT SIZES */
    --hok-font-size-10: 14px;
    --hok-font-size-11: 14px;
    --hok-font-size-12: 14px;
    --hok-font-size-13: 14px;
    --hok-font-size-14: 14px;
    --hok-font-size-15: 15px;
    --hok-font-size-16: 16px;
    --hok-font-size-17: 17px;
    --hok-font-size-18: 18px;
    --hok-font-size-20: 20px;
    --hok-font-size-22: 22px;
    --hok-font-size-24: 24px;
    --hok-font-size-28: 28px;
    --hok-font-size-30: 30px;
    --hok-font-size-32: 32px;
    --hok-font-size-36: 36px;
    --hok-font-size-40: 40px;
    --hok-font-size-44: 44px;
    --hok-font-size-48: 48px;
    --hok-font-size-52: 52px;

    /* 07. FONT WEIGHTS */
    --hok-font-weight-light: 300;
    --hok-font-weight-regular: 400;
    --hok-font-weight-medium: 500;
    --hok-font-weight-semibold: 600;
    --hok-font-weight-bold: 700;

    /* 08. LINE HEIGHTS */
    --hok-line-height-tight: 1.05;
    --hok-line-height-heading: 1.12;
    --hok-line-height-normal: 1.45;
    --hok-line-height-body: 1.65;
    --hok-line-height-loose: 1.8;

    /* 09. LETTER SPACING */
    --hok-letter-spacing-tight: -0.04em;
    --hok-letter-spacing-small: -0.02em;
    --hok-letter-spacing-normal: 0;
    --hok-letter-spacing-wide: 0.08em;
    --hok-letter-spacing-wider: 0.14em;
    --hok-letter-spacing-caps: 0.18em;

    /* 10. LAYOUT */
    --hok-container-width: 1280px;
    --hok-container-wide-width: 1320px;
    --hok-container-narrow-width: 1100px;
    --hok-container-gutter: 28px;
    --hok-container-full-large-width: min(100% - 2rem, 1600px);

    /* 11. SPACING */
    --hok-space-1: 4px;
    --hok-space-2: 8px;
    --hok-space-3: 12px;
    --hok-space-4: 16px;
    --hok-space-5: 20px;
    --hok-space-6: 24px;
    --hok-space-7: 28px;
    --hok-space-8: 32px;
    --hok-space-9: 36px;
    --hok-space-10: 40px;
    --hok-space-12: 48px;
    --hok-space-14: 56px;
    --hok-space-16: 64px;
    --hok-space-18: 72px;
    --hok-space-20: 80px;
    --hok-space-24: 96px;

    /* 12. SECTION SPACING */
    --hok-section-spacing: 100px;
    --hok-section-spacing-small: 72px;

    /* 13. BORDERS */
    --hok-border-default: 1px solid var(--hok-color-border);
    --hok-border-light: 1px solid var(--hok-color-border-light);
    --hok-border-dark: 1px solid var(--hok-color-border-dark);

    /* 14. BORDER RADIUS */
    --hok-radius-xs: 6px;
    --hok-radius-sm: 8px;
    --hok-radius-md: 12px;
    --hok-radius-lg: 16px;
    --hok-radius-xl: 20px;
    --hok-radius-2xl: 24px;
    --hok-radius-3xl: 32px;
    --hok-radius-pill: 999px;
    --hok-radius-circle: 50%;

    /* 15. SHADOWS */
    --hok-shadow-xs: 0 2px 8px rgba(55, 43, 33, 0.05);
    --hok-shadow-sm: 0 6px 18px rgba(55, 43, 33, 0.07);
    --hok-shadow-md: 0 12px 30px rgba(55, 43, 33, 0.09);
    --hok-shadow-lg: 0 20px 50px rgba(55, 43, 33, 0.12);
    --hok-shadow-xl: 0 30px 80px rgba(55, 43, 33, 0.15);
    --hok-shadow-gold: 0 12px 30px rgba(184, 137, 46, 0.18);

    /* 16. TRANSITIONS */
    --hok-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hok-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hok-duration-fast: 180ms;
    --hok-duration-normal: 300ms;
    --hok-duration-slow: 600ms;
    --hok-duration-reveal: 800ms;
    --hok-reveal-distance: 28px;

    /* 18. PRODUCT IMAGE */
    --hok-product-image-ratio: 1 / 1;
    --hok-product-image-bg: #F8F5F1;

    /* 19. BUTTON */
    --hok-button-height: 48px;
    --hok-button-padding-x: 24px;
    --hok-button-radius: 999px;

    /* 20. INPUT */
    --hok-input-height: 48px;
    --hok-input-radius: 12px;
    --hok-input-bg: #FAF9F7;
}
    
    
    
    .global-glow-blob::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -160px;
        /*left: -160px !important;*/
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 40%, rgba(18, 92, 85, 0.2), rgba(18, 92, 85, 0.05) 55%, transparent 70%);
        filter: blur(10px);
        pointer-events: none;
    }
    
    
    .hok-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.45s var(--hok-ease);
    white-space: nowrap;
    border: 1px solid transparent;
    }
    
    

/* ── BASE RESET ── */
/*.kanha-page,*/
/*.kanha-page *,*/
/*.kanha-page *::before,*/
/*.kanha-page *::after {*/
/*    box-sizing: border-box;*/
/*    padding: 0;*/

/* ── GLOBAL BUTTONS ── */

 .hok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.45s var(--hok-ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.hok-btn .hok-ic {
  width: 16px;
  height: 16px;
  transition: transform 0.45s var(--hok-ease);
}
 .hok-btn:hover .hok-ic {
  transform: translateX(4px);
}
.hok-btn-solid {
  background: var(--hok-teal-deep);
  color: var(--hok-ivory);
}
 .hok-btn-solid:hover {
  background: var(--hok-teal);
  box-shadow: 0 14px 30px -12px rgba(11, 66, 62, 0.5);
  transform: translateY(-2px);
}
.hok-btn-outline {
  border-color: rgba(164, 129, 63, 0.55);
  color: var(--hok-ink);
  background: transparent;
}
.hok-btn-outline:hover {
  background: rgba(195, 161, 92, 0.12);
  border-color: var(--hok-gold);
  transform: translateY(-2px);
}
 .hok-btn-gold {
  background: linear-gradient(135deg, #d9be85, #be9a52);
  color: var(--hok-teal-darker);
  font-weight: 600;
}
 .hok-btn-gold:hover {
  box-shadow: 0 14px 30px -10px rgba(195, 161, 92, 0.65);
  transform: translateY(-2px);
}
 .hok-btn-ivory {
  background: var(--hok-ivory);
  color: var(--hok-teal-deep);
}
 .hok-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hok-gold-deep);
  position: relative;
  padding-bottom: 4px;
}
 .hok-btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--hok-gold);
  transform-origin: right;
  transition: transform 0.5s var(--hok-ease);
}
 .hok-btn-link:hover::after {
  transform: scaleX(0.35);
  transform-origin: left;
}
 .hok-btn-link .hok-ic {
  width: 15px;
  height: 15px;
}



/*<!-- Solid Button -->*/
/*<button class="hok-btn hok-btn-solid">*/
/*  <span class="hok-ic">→</span> Click Me*/
/*</button>*/

/*<!-- Outline Button -->*/
/*<button class="hok-btn hok-btn-outline">Outline</button>*/

/*<!-- Gold Button -->*/
/*<button class="hok-btn hok-btn-gold">Premium</button>*/

/*<!-- Link Button -->*/
/*<a href="#" class="hok-btn-link">Learn More <span class="hok-ic">→</span></a>*/


/* Main wrapper — page center */
#kanha-main.kanha-page {
    display: block;
    width: 100%;
    max-width: min(100% - 0rem, 1600px);
    margin-left: 0;
    margin-right: 0;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    float: none;
    clear: both;
}

.kanha-page {
    font-family: var(--hok-font-primary);
    font-size: var(--hok-font-size-16);
    font-weight: var(--hok-font-weight-regular);
    line-height: var(--hok-line-height-body);
    color: var(--hok-color-text);
    background-color: var(--hok-color-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ── CONTAINER — yeh CRITICAL hai, uncommented hona chahiye ── */
.kanha-container {
    width: 100%;
    max-width: var(--hok-container-width); /* 1240px */
    margin-left: auto;
    margin-right: auto;
    /*padding-left: var(--hok-container-gutter);*/
    /*padding-right: var(--hok-container-gutter);*/
}

/*.kanha-container-wide {*/
/*    width: 100%;*/
/*    max-width: var(--hok-container-wide-width);*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    padding-left: var(--hok-container-gutter);*/
/*    padding-right: var(--hok-container-gutter);*/
/*}*/

/*.kanha-container-narrow {*/
/*    width: 100%;*/
/*    max-width: var(--hok-container-narrow-width);*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    padding-left: var(--hok-container-gutter);*/
/*    padding-right: var(--hok-container-gutter);*/
/*}*/

 /*── TYPOGRAPHY HELPERS ── */
.kanha-script {
    font-family: var(--hok-font-script);
    font-style: italic;
    font-weight: var(--hok-font-weight-regular);
}

/*.kanha-eyebrow {*/
/*    font-family: var(--hok-font-primary);*/
/*    font-size: var(--hok-font-size-11);*/
/*    font-weight: var(--hok-font-weight-semibold);*/
/*    letter-spacing: var(--hok-letter-spacing-caps);*/
/*    text-transform: uppercase;*/
/*    color: var(--hok-color-gold);*/
/*}*/



 /*── ICON ── */
.kanha-ic {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

 /*── SECTION BASE ── */
.kanha-section {
    padding-top: var(--hok-section-spacing);
    padding-bottom: var(--hok-section-spacing);
}

 /*── SECTION HEADER ── */
.kanha-sec-head {
    text-align: center;
    margin-bottom: var(--hok-space-12);
}

.kanha-sec-head h2 {
    font-family: var(--hok-font-display);
    font-size: var(--hok-font-size-36);
    font-weight: var(--hok-font-weight-semibold);
    color: var(--hok-color-ink);
    line-height: var(--hok-line-height-heading);
    margin-bottom: var(--hok-space-2);
}

.kanha-sec-head .kanha-script {
    font-size: var(--hok-font-size-20);
    color: var(--hok-color-gold);
    display: block;
    margin-bottom: var(--hok-space-3);
}

 /*── FLOURISH ── */
.kanha-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--hok-space-4);
    gap: 0;
}

.kanha-flourish svg {
    width: 120px;
    height: 12px;
}

.kanha-flourish .kanha-fl-line {
    stroke: var(--hok-color-gold-light);
    stroke-width: 1;
}

.kanha-flourish .kanha-fl-diamond {
    fill: var(--hok-color-gold);
}

 /*── BUTTONS ── */
.kanha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hok-space-2);
    height: var(--hok-button-height);
    padding: 0 var(--hok-button-padding-x);
    border-radius: var(--hok-button-radius);
    font-family: var(--hok-font-primary);
    font-size: var(--hok-font-size-14);
    font-weight: var(--hok-font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--hok-duration-normal) var(--hok-ease);
    line-height: 1;
    white-space: nowrap;
}

.kanha-btn .kanha-ic {
    width: 16px;
    height: 16px;
    transition: transform var(--hok-duration-normal) var(--hok-ease);
}

.kanha-btn:hover .kanha-ic {
    transform: translateX(3px);
}

.kanha-btn-solid {
    background-color: var(--hok-color-gold);
    color: var(--hok-color-white);
}

.kanha-btn-solid:hover {
    background-color: var(--hok-color-gold-dark);
    box-shadow: var(--hok-shadow-gold);
    transform: translateY(-1px);
    color: var(--hok-color-white);
}

.kanha-btn-outline {
    background-color: transparent;
    color: var(--hok-color-gold-dark);
    border: 1.5px solid var(--hok-color-gold);
}

.kanha-btn-outline:hover {
    background-color: var(--hok-color-gold);
    color: var(--hok-color-white);
    transform: translateY(-1px);
}

.kanha-btn-gold {
    background: linear-gradient(135deg, var(--hok-color-gold), var(--hok-color-gold-dark));
    color: var(--hok-color-white);
}

.kanha-btn-gold:hover {
    box-shadow: var(--hok-shadow-gold);
    transform: translateY(-2px);
    color: var(--hok-color-white);
}

.kanha-btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--hok-space-2);
    font-family: var(--hok-font-primary);
    font-size: var(--hok-font-size-14);
    font-weight: var(--hok-font-weight-medium);
    color: var(--hok-color-gold);
    text-decoration: none;
    transition: color var(--hok-duration-normal) var(--hok-ease);
}

.kanha-btn-link:hover {
    color: var(--hok-color-gold-dark);
}

.kanha-btn-link .kanha-ic {
    width: 16px;
    height: 16px;
    transition: transform var(--hok-duration-normal) var(--hok-ease);
}

.kanha-btn-link:hover .kanha-ic {
    transform: translateX(4px);
}

 /*── SCROLL REVEAL ── */
.kanha-reveal {
    opacity: 0;
    transform: translateY(var(--hok-reveal-distance));
    transition: opacity var(--hok-duration-reveal) var(--hok-ease),
                transform var(--hok-duration-reveal) var(--hok-ease);
    transition-delay: var(--kanha-delay, 0s);
}

.kanha-reveal.kanha-in {
    opacity: 1;
    transform: translateY(0);
}

.kanha-reveal-left {
    opacity: 0;
    transform: translateX(calc(var(--hok-reveal-distance) * -1));
    transition: opacity var(--hok-duration-reveal) var(--hok-ease),
                transform var(--hok-duration-reveal) var(--hok-ease);
    transition-delay: var(--kanha-delay, 0s);
}

.kanha-reveal-left.kanha-in {
    opacity: 1;
    transform: translateX(0);
}

.kanha-reveal-right {
    opacity: 0;
    transform: translateX(var(--hok-reveal-distance));
    transition: opacity var(--hok-duration-reveal) var(--hok-ease),
                transform var(--hok-duration-reveal) var(--hok-ease);
    transition-delay: var(--kanha-delay, 0s);
}

.kanha-reveal-right.kanha-in {
    opacity: 1;
    transform: translateX(0);
}

.kanha-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--hok-duration-reveal) var(--hok-ease),
                transform var(--hok-duration-reveal) var(--hok-ease);
    transition-delay: var(--kanha-delay, 0s);
}

.kanha-reveal-scale.kanha-in {
    opacity: 1;
    transform: scale(1);
}

 /*── IMAGE RESET ── */
/*.kanha-page img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*}*/

 /*── RESPONSIVE BASE ── */
@media (max-width: 1199px) {
    :root {
        --hok-section-spacing: 80px;
        --hok-section-spacing-small: 56px;
    }

    .kanha-sec-head h2 {
        font-size: var(--hok-font-size-32);
    }
}

@media (max-width: 767px) {
    :root {
        --hok-section-spacing: 56px;
        --hok-section-spacing-small: 40px;
        --hok-container-gutter: 20px;
    }

    .kanha-sec-head h2 {
        font-size: var(--hok-font-size-28);
    }

    .kanha-sec-head .kanha-script {
        font-size: var(--hok-font-size-17);
    }
}