@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');
:root{--gold:#c7a66b;--black:#171717;--cream:#f7f5f0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:#262421;background:#fff;font-family:'Tajawal','DM Sans',sans-serif}body[dir=ltr]{font-family:'DM Sans',sans-serif}button,select{font:inherit;cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}.shipping{background:#171717;color:#e7d5b3;text-align:center;padding:9px;font-size:12px;letter-spacing:.6px}header{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #eee}.head{max-width:1440px;margin:auto;min-height:86px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand img{width:145px;max-height:64px;object-fit:contain}nav{display:flex;gap:32px}nav a{font-size:14px}nav a:hover{color:#a47d40}.headActions{display:flex;align-items:center;gap:18px}select{border:0;background:transparent;font-size:13px;outline:0}.cartButton{background:none;font-size:27px;position:relative}.cartButton span{font-size:11px;background:var(--black);color:white;border-radius:50%;padding:3px 6px;vertical-align:top}.menuIcon{display:none;background:none;font-size:24px}.hero{min-height:610px;height:73vh;max-height:860px;position:relative;color:#fff;background:#18120e;display:flex;align-items:center}.heroImg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.17)),url('assets/hero-lunasos.webp') center 52%/cover}.heroContent{position:relative;width:min(1300px,90%);margin:auto;text-align:start}.eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:600}.hero h1{font-size:clamp(38px,5vw,75px);font-weight:400;line-height:1.2;max-width:600px;margin:22px 0}.hero p{font-size:18px;line-height:1.8;max-width:440px;color:#eee}.goldBtn{display:inline-block;background:var(--gold);color:#171717;padding:16px 32px;font-weight:700;margin-top:22px;text-align:center}.goldBtn:hover{background:#e0c28a}.heroBottom{position:absolute;bottom:25px;left:5%;font:10px 'DM Sans';letter-spacing:3px;color:#ddd}.intro{text-align:center;padding:85px 20px 75px;background:var(--cream)}h2{font-size:clamp(30px,3vw,44px);font-weight:500;margin:13px 0}.intro p{color:#777}.wrap{max-width:1350px;margin:auto;padding-left:5%;padding-right:5%}.catalog{padding-top:85px;padding-bottom:90px}.sectionTitle{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:35px}.filters{display:flex;flex-wrap:wrap;gap:10px}.filters button{background:none;padding:9px 16px;border:1px solid #ddd;color:#666;font-size:13px}.filters button.active,.filters button:hover{background:#171717;color:white;border-color:#171717}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 22px}.product{min-width:0}.photo{position:relative;aspect-ratio:4/4.7;background:#f2f0ec;overflow:hidden;cursor:pointer}.photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.photo:hover img{transform:scale(1.05)}.quick{position:absolute;bottom:0;left:0;right:0;background:rgba(20,20,20,.88);color:white;text-align:center;padding:15px;transform:translateY(100%);transition:transform .25s}.photo:hover .quick{transform:translateY(0)}.productInfo{text-align:center;padding:19px 4px}.productInfo h3{font:500 25px 'Cormorant Garamond',serif;letter-spacing:1px;margin:0 0 7px}.category{font-size:12px;color:#888;letter-spacing:1px}.price{font-size:16px;margin:12px 0;font-weight:700}.addBtn{border-bottom:1px solid #222;background:transparent;padding:7px;font-size:13px}.banner{min-height:420px;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.35)),url('assets/hero-women.webp') center/cover;display:flex;align-items:center;color:white;padding:60px 10%}.banner h2{max-width:520px;font-size:45px}.banner p{color:#ddd}.outlineBtn{display:inline-block;border:1px solid var(--gold);color:#fff;padding:14px 28px;margin-top:18px}.sets{grid-template-columns:repeat(2,1fr)}.sets .photo{aspect-ratio:1.15}.about{text-align:center;background:#191919;color:white;padding:95px 20px}.about p{max-width:650px;margin:20px auto 40px;color:#bbb;line-height:1.9}.features{display:flex;justify-content:center;gap:55px;flex-wrap:wrap;color:#e7d3ae}.features div{display:flex;gap:12px;align-items:center}footer{background:#111;color:#b9b9b9;display:flex;flex-direction:column;align-items:center;gap:18px;padding:55px 20px}footer img{width:165px}footer p{letter-spacing:2px;font-size:11px}footer a{color:var(--gold)}footer small{font-size:11px}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:30;display:none}.overlay.show{display:block}.drawer{position:fixed;top:0;bottom:0;right:0;width:min(440px,100%);background:white;z-index:31;transform:translateX(110%);transition:transform .3s;display:flex;flex-direction:column;padding:28px}.drawer.show{transform:translateX(0)}.drawerTop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}.drawerTop button,.modalClose{background:none;font-size:22px}.cartItems{flex:1;overflow:auto;padding:15px 0}.cartLine{display:flex;gap:16px;border-bottom:1px solid #eee;padding:15px 0}.cartLine img{width:75px;height:95px;object-fit:cover}.cartLine h4{margin:4px 0}.cartLine .controls{display:flex;gap:12px;align-items:center;margin-top:12px}.controls button{background:#eee;padding:5px 10px}.cartBottom{border-top:1px solid #ddd;padding-top:18px}.total{display:flex;justify-content:space-between;font-size:18px}.cartBottom p{font-size:12px;color:#888}.full{width:100%;border:0}.modal{display:none;position:fixed;z-index:32;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,92vw);max-height:90vh;overflow:auto;background:#fff;padding:24px}.modal.show{display:block}.modalClose{position:absolute;right:16px;top:12px;z-index:1}.modalGrid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.modalGrid img{width:100%;max-height:580px;object-fit:cover}.modalGrid h2{font:500 46px 'Cormorant Garamond',serif}.modalGrid p{line-height:1.8;color:#777}#waFloat{position:fixed;bottom:25px;right:24px;background:#25d366;color:white;width:54px;height:54px;border-radius:50%;font-size:30px;z-index:15;box-shadow:0 5px 20px #0003}body[dir=rtl] .heroImg{transform:none}body[dir=rtl] .heroContent{direction:rtl}body[dir=ltr] .drawer{right:0}@media(max-width:800px){.head{min-height:70px}.brand img{width:120px}.menuIcon{display:block}nav{display:none;position:absolute;top:70px;left:0;right:0;background:white;padding:25px;flex-direction:column;box-shadow:0 12px 20px #0001}nav.show{display:flex}.hero{height:65vh;min-height:520px}.heroImg{background-position:center}.hero h1{font-size:43px}.products{grid-template-columns:repeat(2,1fr);gap:24px 12px}.sectionTitle{align-items:start;flex-direction:column}.photo{aspect-ratio:4/5}.quick{transform:none;font-size:12px;padding:10px}.sets .photo{aspect-ratio:4/5}.modalGrid{grid-template-columns:1fr;gap:12px}.modalGrid img{max-height:40vh}.catalog{padding-top:55px;padding-bottom:55px}.banner h2{font-size:35px}}@media(max-width:430px){.head{gap:8px;padding:0 4%}.headActions{gap:6px}.brand img{width:104px}.products{gap:20px 10px}.productInfo h3{font-size:21px}.productInfo{padding:14px 0}.filters{gap:5px}.filters button{padding:8px 10px;font-size:11px}.hero p{font-size:16px}.sets{grid-template-columns:1fr}}

/* Transparent overlay header and responsive navigation */
.shipping{position:relative;z-index:22}
header{position:absolute;top:30px;left:0;right:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.22);color:#fff;z-index:21;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;}
header.is-scrolled{position:fixed;top:0;background:rgba(15,14,13,.96);border-color:rgba(199,166,107,.25);box-shadow:0 8px 30px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header nav a:hover{color:#e2c28b}header select,header .menuIcon,header .cartButton{color:inherit}header select option{background:#191919;color:#fff}header .cartButton span{background:var(--gold);color:#171717}
header .head{min-height:88px}header .brand{flex-shrink:0}header nav{align-items:center}header .headActions{flex-shrink:0}
.hero{min-height:650px}.heroContent{padding-top:85px}
@media(max-width:1000px){header .head{gap:14px;padding-inline:4%}header nav{gap:15px}header nav a{font-size:12px}.brand img{width:125px}}
@media(max-width:800px){
 header{top:30px}header .head{height:72px;min-height:72px;display:grid;grid-template-columns:minmax(44px,1fr) auto minmax(110px,1fr);gap:8px;padding-inline:16px;direction:ltr}
 header .menuIcon{display:flex;grid-column:1;grid-row:1;align-items:center;justify-content:flex-start;width:44px;height:44px;padding:0;font-size:25px}
 header .brand{grid-column:2;grid-row:1;display:flex;justify-content:center;align-items:center}
 header .brand img{width:118px;max-height:60px}
 header .headActions{grid-column:3;grid-row:1;justify-content:flex-end;gap:8px;min-width:0}
 header #language{max-width:82px;font-size:12px;color:#fff}
 header .cartButton{font-size:25px;padding:5px 0 5px 4px;white-space:nowrap}
 header nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:rgba(18,17,16,.98);color:white;padding:12px 22px 20px;box-shadow:0 15px 25px #0005;border-top:1px solid #ffffff20}
 header nav.show{display:flex}header nav a{padding:14px 6px;font-size:15px;border-bottom:1px solid #ffffff20}
 .hero{min-height:570px;height:75svh}.heroContent{padding-top:100px}
}
@media(max-width:430px){header .head{grid-template-columns:minmax(36px,1fr) auto minmax(95px,1fr);padding-inline:12px;gap:4px}header .brand img{width:104px}header #language{max-width:72px;font-size:11px}header .headActions{gap:5px}header .cartButton{font-size:22px}.heroContent{padding-top:95px}.hero h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* Full uncropped hero: image always retains its native 2:1 ratio */
.hero{height:auto!important;min-height:0!important;max-height:none!important;display:flex;flex-direction:column;background:#191512;color:#fff;align-items:stretch}
.heroImg{position:relative!important;inset:auto!important;display:block;width:100%;height:auto;aspect-ratio:2/1;background-image:url('assets/hero-lunasos.webp')!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;transform:none!important;flex:none}
.heroContent{width:100%;max-width:none;margin:0;padding:28px 6% 38px!important;background:#191512;text-align:center;direction:inherit!important}
.hero h1{max-width:none;margin:10px auto;font-size:clamp(26px,3vw,42px)}
.hero p{max-width:650px;margin:10px auto;color:#e6dfd5;font-size:15px}
.hero .goldBtn{margin-top:12px}
.heroBottom{position:relative;left:auto;bottom:auto;text-align:center;padding:0 15px 20px;background:#191512}
@media(max-width:800px){.hero{height:auto!important;min-height:0!important}.heroImg{aspect-ratio:2/1}.heroContent{padding:23px 18px 30px!important}.hero h1{font-size:29px}.hero p{font-size:14px}}
/* Platform extension styles */
.checkoutForm{padding:20px;max-height:82vh;overflow-y:auto;color:#2b241b}.checkoutForm h2{margin:12px 0 25px}.checkoutForm form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkoutForm .field{display:flex;flex-direction:column;gap:7px;font-size:14px}.checkoutForm input{padding:12px;border:1px solid #c8bda8;border-radius:3px;background:#fff;font:inherit;color:#111;min-width:0}.checkoutForm .field:nth-child(6),.checkoutForm .field:nth-child(7),.checkoutForm button,.checkoutForm #orderResult{grid-column:1/-1}.checkoutForm button{border:0}.footerLinks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:14px 0}.footerLinks a{color:#aa8e61;text-decoration:none}@media(max-width:650px){.checkoutForm form{grid-template-columns:1fr}.checkoutForm .field{grid-column:1!important}}


/* LUNASOS HERO VISUAL FIX v3.3.1 */

/* Desktop */
@media (min-width: 801px) {
  .hero {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: clamp(520px, 44vw, 620px) !important;
    min-height: 0 !important;
    max-height: 620px !important;
    overflow: hidden;
  }

  .heroImg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .heroContent {
    position: relative !important;
    z-index: 2;
    width: min(1300px, 90%) !important;
    max-width: 1300px !important;
    margin: auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: start !important;
  }

  .hero h1 {
    font-size: clamp(42px, 4.4vw, 68px);
    line-height: 1.12;
  }
}

/* English and Turkish */
@media (min-width: 801px) {
  html[lang="en"] .hero h1,
  html[lang="tr"] .hero h1 {
    font-weight: 700 !important;
  }
}

/* Mobile */
@media (max-width: 800px) {
  .hero {
    position: relative !important;
    display: block !important;
    height: clamp(590px, 82svh, 680px) !important;
    min-height: 0 !important;
    max-height: 680px !important;
    overflow: hidden !important;
  }

  .heroImg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .heroContent {
    position: absolute !important;
    z-index: 2;
    inset-inline: 0;
    bottom: 48px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 22px !important;
    background: transparent !important;
    text-align: center !important;
  }

  .hero h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    max-width: 100%;
    margin: 12px auto !important;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 12px auto !important;
    max-width: 480px !important;
  }

  .hero .goldBtn {
    margin-top: 14px !important;
  }

  .heroBottom {
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }
}

html[lang="en"] .hero h1,
html[lang="tr"] .hero h1 {
  font-weight: 700 !important;
}



/* LUNASOS MOBILE HERO FINAL v3.3.1 */

/* Desktop: stronger premium headings */
@media (min-width: 801px) {
  html[lang="en"] #home .hero h1,
  html[lang="tr"] #home .hero h1 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
  }
}

/* Mobile hero */
@media (max-width: 800px) {

  #home .hero {
    position: relative !important;
    display: block !important;
    height: clamp(510px, 133.333vw, 680px) !important;
    min-height: 0 !important;
    max-height: 680px !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  #home .hero .heroImg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    z-index: 0;
  }

  #home .hero .heroContent {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 38px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 22px 8px !important;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(24, 13, 8, .72) 35%,
      rgba(24, 13, 8, .88)
    ) !important;
    text-align: center !important;
    transform: none !important;
    z-index: 3;
  }

  #home .hero h1 {
    font-size: clamp(30px, 7.5vw, 40px) !important;
    line-height: 1.15 !important;
    margin: 8px auto !important;
    max-width: 100% !important;
  }

  #home .hero p {
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.55 !important;
    max-width: 420px !important;
    margin: 10px auto !important;
  }

  #home .hero .goldBtn {
    margin-top: 12px !important;
    padding: 12px 25px !important;
  }

  #home .hero .heroBottom {
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 4;
    background: transparent !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang="en"] #home .hero h1,
  html[lang="tr"] #home .hero h1 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
  }
}




/* === LUNASOS ABOUT + FOOTER REFINEMENT === */

#about .aboutFeatures,
#about .aboutPoints,
#about .aboutHighlights,
.aboutSection .aboutFeatures,
.aboutSection .aboutPoints,
.aboutSection .aboutHighlights {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#about .aboutFeature,
#about .aboutPoint,
#about .aboutHighlight,
.aboutSection .aboutFeature,
.aboutSection .aboutPoint,
.aboutSection .aboutHighlight {
  min-height: 88px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
}

#about .aboutFeature i,
#about .aboutPoint i,
#about .aboutHighlight i,
#about .aboutFeature svg,
#about .aboutPoint svg,
#about .aboutHighlight svg,
.aboutSection .aboutFeature i,
.aboutSection .aboutPoint i,
.aboutSection .aboutHighlight i,
.aboutSection .aboutFeature svg,
.aboutSection .aboutPoint svg,
.aboutSection .aboutHighlight svg {
  margin: 0 auto !important;
  display: block !important;
}

#about .aboutFeature span,
#about .aboutPoint span,
#about .aboutHighlight span,
#about .aboutFeature p,
#about .aboutPoint p,
#about .aboutHighlight p,
.aboutSection .aboutFeature span,
.aboutSection .aboutPoint span,
.aboutSection .aboutHighlight span,
.aboutSection .aboutFeature p,
.aboutSection .aboutPoint p,
.aboutSection .aboutHighlight p {
  margin: 0 !important;
  line-height: 1.5 !important;
}

footer .footerBrand img,
footer .footerLogo img,
footer .brandLogo img,
.footer .footerBrand img,
.footer .footerLogo img,
.footer .brandLogo img {
  width: min(180px, 100%) !important;
  max-width: 180px !important;
  height: auto !important;
}

footer .footerBrand,
footer .footerLogo,
.footer .footerBrand,
.footer .footerLogo {
  transform: scale(0.88) !important;
  transform-origin: center center !important;
}



/* LUNASOS ABOUT FOOTER FINAL v3.3.4 */

/* Equal alignment of the three About features */

#about .features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
}

#about .features > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0;
    min-height: 92px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
}

#about .features .feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

#about .features > div > span:not(.feature-icon) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

/* Footer logo: preserve original aspect ratio */

footer .footer-brand img {
    display: block !important;
    width: 160px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin-inline: auto !important;
    transform: none !important;
}

footer .footer-brand {
    transform: none !important;
    text-align: center !important;
}

/* Responsive alignment */

@media (max-width: 700px) {
    #about .features > div {
        padding: 10px 5px !important;
        min-height: 86px !important;
        gap: 8px !important;
    }

    #about .features .feature-icon {
        font-size: 24px !important;
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    #about .features > div > span:not(.feature-icon) {
        font-size: 11px !important;
        min-height: 38px !important;
    }

    footer .footer-brand img {
        width: 140px !important;
    }
}