:root{--purple:#a52ee8;--ink:#18131c;--muted:#625b67;--cream:#fbf7f4;--card:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,.brand{font-family:Georgia,serif}.wrap{max-width:1180px;margin:auto;padding:0 24px}
header{height:82px;background:#fff;display:flex;align-items:center;position:sticky;top:0;z-index:10;border-bottom:1px solid #eee}
nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}.brand{font-size:24px;font-weight:700}.links{display:flex;gap:30px;align-items:center}.links a,.lang{color:#222;text-decoration:none}
.btn{display:inline-block;background:linear-gradient(90deg,#a527e8,#7e2ee6);color:#fff;text-decoration:none;padding:14px 25px;border-radius:28px;font-weight:700;border:0;cursor:pointer}
.btn.alt{background:white;color:#8e2bdc;border:2px solid #9c35df}.lang{border:1px solid #ddd;background:white;border-radius:50%;width:44px;height:44px;cursor:pointer}
.hero,.contact{
  position:relative;
  overflow:hidden;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.hero:before,.hero:after,.contact:before{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.6;background:#d8c1b3}
.hero:before{width:210px;height:330px;left:-80px;top:100px}.hero:after{width:180px;height:260px;right:-70px;top:120px}
.hero .wrap{min-height:485px;display:flex;align-items:center;justify-content:center;text-align:center}.eyebrow{letter-spacing:2px;text-transform:uppercase;color:#9231cf;font-weight:700;font-size:14px}
.hero h1{font-size:58px;line-height:1.02;margin:18px 0}.accent{color:#a23ce0}.hero p,.section-intro{max-width:720px;margin:0 auto 28px;line-height:1.65;color:#4f4953;font-size:18px}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{padding:68px 0}.center{text-align:center}h2{font-size:42px;margin:10px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px #00000015;border:1px solid #eee;display:flex;flex-direction:column}
.art{height:285px;display:grid;place-items:center;position:relative;background:linear-gradient(145deg,#f3e3db,#e9d4c7)}
.art.two{background:linear-gradient(145deg,#e7d7c4,#f3eadc)}.art.three{background:linear-gradient(145deg,#ddd2e9,#f0e7f5)}.art.four{background:linear-gradient(145deg,#e8d3b7,#f6ead7)}.art.five{background:linear-gradient(145deg,#c9e0dc,#edf5f1)}.art.six{background:linear-gradient(145deg,#efd1c5,#f7e7df)}
.bag{width:150px;height:120px;border-radius:18px 18px 30px 30px;background:#d8b1a9;box-shadow:inset 0 0 0 4px #ffffff55,0 18px 25px #0002;position:relative}
.bag:before{content:"";position:absolute;width:70px;height:55px;border:8px solid #b78e86;border-bottom:0;border-radius:50px 50px 0 0;left:32px;top:-48px}
.two .bag{background:#c8a66f}.three .bag{background:#a891bd}.four .bag{background:#c7a87e}.five .bag{background:#78aaa8}.six .bag{background:#dda995}
.card-body{padding:18px}.card h3{margin:0 0 9px;font-size:20px}.card p{color:#615a65;line-height:1.55;min-height:48px}.card .btn{padding:11px 18px;font-size:14px}
.contact .wrap{padding-top:20px;padding-bottom:20px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.contact-box{background:#fff;padding:26px;border-radius:12px;box-shadow:0 4px 18px #0001}.contact-box a{color:#922bd7;text-decoration:none;font-weight:700}
footer{background:linear-gradient(90deg,#faf5f9,#f6f2fb);padding:45px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer-grid a{display:block;color:#514a55;text-decoration:none;margin:10px 0}
.small{font-size:13px;color:#746d78}.mobile-menu{display:none}
@media(max-width:760px){header{height:auto;padding:15px 0}.links a:not(.btn),.links .lang{display:none}.hero h1{font-size:42px}.grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.hero .wrap{min-height:530px}h2{font-size:34px}.art{height:245px}}
.contact-box{text-align:left}
.contact-icon{width:58px;height:58px;object-fit:cover;border-radius:50%;display:block;margin:0 0 16px}
.contact-box h3{margin:0 0 10px;font-size:20px}
.contact-box p{color:#615a65;line-height:1.55;min-height:72px}
@media(max-width:760px){.contact-box p{min-height:0}}


/* Header logo update */
.brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.nav-logo{
  width:34px;
  height:34px;
  object-fit:contain;
}
.links{margin-left:auto}

/* Footer exact-style rebuild */
footer{
  background:linear-gradient(90deg,#faf5f9,#f7f3fb);
  padding:48px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:42px;
  align-items:flex-start;
}
.footer-logo-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.footer-logo{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 auto;
}
.footer-brand .brand{
  font-size:22px;
  font-weight:700;
}
.footer-brand p,
.footer-column p,
.footer-column span{
  color:#514a55;
  line-height:1.55;
  font-size:16px;
}
.footer-title{
  display:block;
  margin-bottom:16px;
  font-size:15px;
  letter-spacing:2px;
  font-weight:700;
}
.footer-grid a{
  display:block;
  color:#514a55;
  text-decoration:none;
  margin:10px 0;
}
.footer-grid a:hover{
  text-decoration:underline;
}
.footer-social{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin-top:18px;
}
.footer-social svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:#232323;
  stroke-width:1.8;
}
.footer-newsletter p{
  margin-top:0;
}
.newsletter-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}
.newsletter-input{
  width:100%;
  border:0;
  outline:none;
  background:#ffffff;
  border-radius:999px;
  padding:16px 18px;
  font-size:16px;
  box-shadow:inset 0 0 0 1px #ece7f0;
}
.newsletter-btn{
  width:100%;
  text-align:center;
}
.small{
  font-size:13px;
  color:#746d78;
  margin-top:28px;
}

@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .grid,.contact-grid,.footer-grid{
    grid-template-columns:1fr;
  }
  .footer-brand p,
  .footer-column p,
  .footer-column span,
  .footer-grid a{
    font-size:15px;
  }
}


.hero .wrap,
.contact .wrap{
  position:relative;
  z-index:1;
}
.hero p,
.contact .section-intro{
  text-shadow:0 1px 0 rgba(255,255,255,0.25);
}


/* ===== Header alignment + official logo ===== */
header{
  height:86px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #eee;
  display:block;
}
.header-inner{
  width:100%;
  max-width:none;
  height:100%;
  padding:0 32px 0 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:relative;
}
.header-brand{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:700;
  margin-left:0;
}
.header-brand .nav-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
}
.header-center{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:34px;
}
.header-center a{
  color:#222;
  text-decoration:none;
  font-size:15px;
}
.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
}
.language-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
}
.language-option{
  border:0;
  background:transparent;
  min-width:38px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  color:#555;
}
.language-option.active{
  background:#f1e7f8;
  color:#8125be;
}
.header-message{
  white-space:nowrap;
}

/* Keep the uploaded logo's original appearance; do not recolor it. */
.nav-logo,
.footer-logo{
  filter:none !important;
}

@media(max-width:820px){
  .header-inner{
    padding:0 14px;
    grid-template-columns:auto 1fr auto;
  }
  .header-brand span{
    display:none;
  }
  .header-brand .nav-logo{
    width:42px;
    height:42px;
  }
  .header-center{
    gap:18px;
  }
  .header-center a{
    font-size:14px;
  }
  .header-message{
    display:none;
  }
}
@media(max-width:560px){
  .header-center{
    gap:12px;
  }
  .language-switch{
    gap:2px;
  }
  .language-option{
    min-width:34px;
    padding:0 7px;
  }
}

/* Real product display photos */
.art{overflow:hidden;background:#f5f1ed}
.bag-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center}


.hero{
  background-image:linear-gradient(rgba(255,248,242,0.20), rgba(255,248,242,0.20)), url('../images/hero-background.jpg');
}
.contact{
  background-image:linear-gradient(rgba(255,248,242,0.22), rgba(255,248,242,0.22)), url('../images/contact-background.jpg');
}
.hero:before,.hero:after,.contact:before{
  content:none;
}

/* Footer spacing update */
footer .wrap{
  max-width:1380px;
}
.footer-grid{
  grid-template-columns:1.25fr 1fr 1fr 1.25fr !important;
  gap:72px !important;
  justify-content:space-between;
  width:100%;
}
@media(max-width:1100px){
  .footer-grid{
    gap:42px !important;
  }
}
@media(max-width:760px){
  footer .wrap{
    max-width:1180px;
  }
  .footer-grid{
    gap:26px !important;
  }
}


/* Collection image positioning */
.art{
  overflow:hidden;
}
.bag-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 42%;
  transform:translateY(-7px) scale(1.02);
  transition:transform .28s ease;
}

/* Collection card hover effect */
.card{
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.card:hover{
  transform:translateY(-7px) scale(1.015);
  box-shadow:0 14px 32px rgba(0,0,0,.14);
}
.card:hover .bag-photo{
  transform:translateY(-9px) scale(1.035);
}

@media (hover:none){
  .card:hover{
    transform:none;
    box-shadow:0 5px 20px #00000015;
  }
  .card:hover .bag-photo{
    transform:translateY(-7px) scale(1.02);
  }
}


/* Background framing tweak: show more of the original wide images */
.hero,
.contact{
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* On narrow/mobile screens, avoid excessive stretching. */
@media(max-width:760px){
  .hero,
  .contact{
    background-size:auto 100% !important;
    background-position:center center !important;
  }
}


/* =========================
   MOBILE / PHONE RESPONSIVE
   ========================= */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

.wrap{
  width:100%;
}

/* Tablets and phones */
@media(max-width:900px){

  header{
    height:auto !important;
    min-height:72px;
  }

  .header-inner,
  header .wrap nav,
  header nav{
    width:100%;
    padding:10px 14px !important;
  }

  .header-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    gap:10px;
    align-items:center;
  }

  .header-brand,
  .brand-link{
    min-width:0;
    gap:7px !important;
  }

  .header-brand span,
  .brand-link span,
  header .brand{
    font-size:17px !important;
    white-space:nowrap;
  }

  .nav-logo{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
  }

  .header-center{
    justify-self:center !important;
    gap:16px !important;
  }

  .header-center a,
  .links a:not(.btn){
    font-size:13px !important;
  }

  .header-actions{
    gap:7px !important;
  }

  .language-switch{
    transform:scale(.92);
    transform-origin:right center;
  }

  .header-message{
    padding:10px 14px !important;
    font-size:12px !important;
  }

  .hero .wrap{
    min-height:470px !important;
    padding:46px 20px !important;
  }

  .hero h1{
    font-size:44px !important;
    line-height:1.04 !important;
  }

  .hero p,
  .section-intro{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .actions{
    gap:10px !important;
  }

  .actions .btn{
    padding:12px 18px !important;
    font-size:14px !important;
  }

  section{
    padding:52px 0 !important;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .art{
    height:235px !important;
  }

  .card-body{
    padding:16px !important;
  }

  .contact-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .contact-box{
    min-height:0 !important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:34px !important;
  }

  footer .wrap{
    padding-left:22px !important;
    padding-right:22px !important;
  }
}

/* Phones */
@media(max-width:640px){

  header{
    position:sticky;
    top:0;
    z-index:50;
  }

  .header-inner{
    grid-template-columns:auto 1fr auto !important;
    padding:8px 10px !important;
  }

  .header-brand span,
  .brand-link span,
  header .brand{
    font-size:15px !important;
  }

  .nav-logo{
    width:34px !important;
    height:34px !important;
    flex-basis:34px;
  }

  .header-center{
    gap:10px !important;
  }

  .header-center a{
    font-size:12px !important;
  }

  .header-message{
    display:none !important;
  }

  .language-switch{
    transform:scale(.84);
  }

  .hero,
  .contact{
    background-size:auto 100% !important;
    background-position:center center !important;
  }

  .hero .wrap{
    min-height:430px !important;
    padding:40px 18px !important;
  }

  .hero h1{
    font-size:36px !important;
    line-height:1.06 !important;
    margin:14px 0 !important;
  }

  .eyebrow{
    font-size:12px !important;
    letter-spacing:1.4px !important;
  }

  .hero p,
  .section-intro{
    font-size:15px !important;
    max-width:100% !important;
  }

  .actions{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100%;
  }

  .actions .btn{
    width:100%;
    text-align:center;
  }

  h2{
    font-size:30px !important;
    line-height:1.1 !important;
  }

  section{
    padding:42px 0 !important;
  }

  .wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .card{
    width:100%;
    max-width:100%;
  }

  .art{
    height:260px !important;
  }

  .bag-photo{
    object-position:center 38% !important;
  }

  .card h3{
    font-size:19px !important;
  }

  .card p{
    min-height:0 !important;
    font-size:14px !important;
  }

  .card .btn{
    width:100%;
    text-align:center;
  }

  .contact .wrap{
    padding-top:36px !important;
    padding-bottom:36px !important;
  }

  .contact-grid{
    gap:12px !important;
  }

  .contact-box{
    padding:20px !important;
  }

  .contact-icon{
    width:52px !important;
    height:52px !important;
  }

  footer{
    padding:38px 0 24px !important;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .footer-logo-row{
    margin-bottom:10px !important;
  }

  .footer-newsletter{
    width:100%;
  }

  .newsletter-input,
  .newsletter-btn{
    width:100% !important;
  }

  .small{
    margin-top:24px !important;
    font-size:12px !important;
  }
}

/* Very small phones */
@media(max-width:390px){
  .header-center a{
    font-size:11px !important;
  }

  .header-center{
    gap:8px !important;
  }

  .hero h1{
    font-size:32px !important;
  }

  .art{
    height:230px !important;
  }
}