@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap");

:root{
  --ink:#17131d;
  --purple:#7042c8;
  --pista:#e3ebbd;
  --ivory:#fbfaf7;
  --muted:#746e79;
  --line:#e8e3ea
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"DM Sans",sans-serif
}

a{
  text-decoration:none;
  color:inherit
}

/* =========================
   TOP ANNOUNCEMENT
========================= */

.announcement{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  box-sizing:border-box;
  background:purple;
  color:#fff;
  font-size:10px;
  letter-spacing:2px;
  z-index:10000;
}


/* =========================
   HEADER
========================= */

.header{
  height:85px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:fixed;
  top:43px;
  left:0;
  right:0;
  width:100%;
  box-sizing:border-box;
  background:burgandy;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:9999;
}


/* =========================
   LOGO — LARGE
========================= */

.header .logo{
  position:relative;
  z-index:10001;
  display:flex;
  align-items:center;
  height:85px;
  overflow:visible !important;
}

.header .logo img{
  width:400px !important;
  height:400px !important;
  max-width:none !important;
  object-fit:contain;
  position:relative;
  top:10px;
  z-index:10002;
}


/* =========================
   PAGE OFFSET
========================= */

body{
  padding-top:128px;
}

.logo{
  display:flex;
  align-items:center;
  gap:50px
}

.logo-mark img{
  width:65%;
  height:65%;
  object-fit:contain;
  display:block;
  position:relative;
  top:25px
}

.logo b{
  font-size:20px;
  letter-spacing:2px;
  display:block
}

.logo small{
  font-size:14px;
  letter-spacing:4px;
  color:var(--muted);
  display:block;
  margin-top:3px
}

nav{
  display:flex;
  gap:28px;
  font-size:16px;
  font-weight:900
}

nav a,
.market{
  transition:.3s
}

nav a:hover,
.market:hover{
  color:var(--purple)
}

.head-actions{
  display:flex;
  gap:12px;
  align-items:center
}

.market{
  font-size:20px;
  font-weight:700
}

.cart-btn,
.menu{
  border:0;
  background:purple;
  color:white;
  padding:11px 20px;
  border-radius:60px;
  cursor:pointer
}

.cart-btn i{
  font-style:normal;
  color:var(--pista);
  margin-left:5px
}

.menu{
  display:none
}

/* =========================
   HERO
========================= */

.hero{
  min-height:690px;
  padding:70px 7vw 55px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden
}

.eyebrow{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:40px;
  letter-spacing:0;
  font-weight:900;
  line-height:1.15;
  color:var(--purple);
  margin:0 0 18px;
  transform:translateY(-80px);
}

.hero h1{
  font-size:clamp(55px,3vw,100px);
  line-height:.9;
  margin:0;
  letter-spacing:-2px;
  transform:translateY(-50px);
}

.hero h1 em,
.brands h2 em{
  font-family:"Playfair Display",serif;
  font-weight:300
}

.lead{
  max-width:510px;
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  margin:28px 0
}

.actions{
  display:flex;
  align-items:center;
  gap:25px
}

.btn{
  display:inline-flex;
  gap:35px;
  background:purple;
  color:#fff;
  border-radius:40px;
  padding:16px 22px;
  transition:.35s
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px #17131d25
}

.under{
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
  font-size:13px
}

.hero-signals{
  display:flex;
  gap:25px;
  margin-top:65px;
  font-size:9px;
  letter-spacing:2px;
  color:#938d97
}

/* =========================
   HERO VISUAL
========================= */

.hero-visual{
  height:570px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
}

.product-stage{
  width:min(440px,70vw);
  height:500px;
  border-radius:230px 230px 30px 30px;
  background:linear-gradient(145deg,#e8f0cf,#d4e3a8);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 35px 80px #7042c825;
  animation:float 4s ease-in-out infinite;
  z-index:2;
}

.product-stage img{
  width:130%;
  height:105%;
  object-fit:contain;
  position:relative;
  z-index:2;
  top:0%;
  transition:2s;
}

.product-stage:hover img{
  transform:scale(1.07) rotate(1deg);
}

.shine{
  position:absolute;
  width:30%;
  height:140%;
  background:#ffffff65;
  transform:rotate(25deg) translateX(-300%);
  animation:sweep 5s infinite;
  z-index:3;
  pointer-events:none;
}

.fallback{
  display:none;
  position:absolute;
  text-align:center;
  color:#5f6840;
  letter-spacing:2px;
  font-weight:600;
  z-index:4;
}

.missing{
  display:none;
}

.missing+.fallback{
  display:block;
}

.floating{
  position:absolute;
  right:2%;
  bottom:70px;
  background:purple;
  color:white;
  padding:17px 20px;
  border-radius:3px;
  font-size:10px;
  letter-spacing:2px;
  line-height:1.7;
  transform:rotate(-5deg);
  box-shadow:0 20px 40px #0002;
  animation:float2 10s ease-in-out infinite;
  z-index:5;
}

.floating b{
  color:var(--pista);
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  z-index:0;
  pointer-events:none;
}

.orb1{
  width:170px;
  height:170px;
  background:rgba(255,225,100,.45);
  top:15%;
  right:4%;
  animation:orbit 8s infinite;
  z-index:0;
}

.orb2{
  width:100px;
  height:100px;
  background:rgba(255,120,120,.38);
  bottom:8%;
  left:5%;
  animation:orbit 6s reverse infinite;
  z-index:0;
}

/* =========================
   MANIFESTO
========================= */

.manifesto{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#E8F0CF;
}

.manifesto div{
  padding:25px 5vw;
  display:flex;
  gap:15px;
  align-items:center;
  border-right:1px solid var(--line);
  font-size:20px;
  white-space:nowrap;
}

.manifesto div b{
  color:#C62828 !important;
  font-size:20px !important;
}

/* =========================
   GENERAL SECTIONS
========================= */

.section,
.social,
.journal{
  padding:110px 7vw
}

.section-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:60px;
  margin-bottom:45px
}

.section h2,
.story h2,
.founder h2,
.contact h2{
  font:900 clamp(25px,6vw,45px)/.98 "Playfair Display",serif;
  margin:0;
  letter-spacing:0px
}

/* =========================
   FILTERS
========================= */

.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.filter{
  border:1px solid var(--line);
  background:purple;
  color:white;
  padding:10px 15px;
  border-radius:30px;
  font-size:11px;
  cursor:pointer
}

.filter.active{
  background:var(--ink);
  color:white
}

/* =========================
   PRODUCTS
========================= */

.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.card{
  background:white;
  border:1px solid var(--line);
  padding:12px;
  transition:.45s;
  position:relative
}

.card:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 55px #17131d12
}

.card-img{
  height:280px;
  background:#f1f0e9;
  display:grid;
  place-items:center;
  overflow:hidden
}

.card-img img{
  width:90%;
  height:80%;
  object-fit:contain;
  transition:.6s
}

.card:hover .card-img img{
  transform:scale(1.08)
}

.card-info{
  padding:18px 8px 8px
}

.tag{
  font-size:9px;
  color:var(--purple);
  letter-spacing:2px
}

.card h3{
  font:500 21px "Playfair Display",serif;
  margin:9px 0
}

.price{
  font-size:13px;
  color:var(--muted)
}

.add{
  margin-top:15px;
  width:100%;
  border:0;
  background:var(--ink);
  color:white;
  border-radius:3px;
  padding:12px;
  cursor:pointer
}

/* =========================
   BRANDS
========================= */

.brands{
  padding:110px 7vw;
  background:#3A2922;
  color:white;
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:8vw
}

.brand-intro p:not(.eyebrow){
  color:#b7b0ba;
  line-height:1.7;
  max-width:450px
}

.brand-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.brand{
  min-height:370px;
  padding:35px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  transition:.5s
}

.brand:hover{
  transform:translateY(-8px)
}

.brand.fire{
  background:linear-gradient
}

.brand.prot{
  background:;
  color:var(--white)
}

.brand span{
  font-size:12px;
  letter-spacing:3px
}

.brand h3{
  font:500 38px "serif",serif;
  margin:10px 0
}

.brand p{
  color:#b9b0bd
}

/* =========================
   STORY / FOUNDER
========================= */

.story,
.founder{
  padding:120px 7vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center
}

.story-image,
.founder-image{
  height:590px;
  background:#eee;
  position:relative;
  overflow:hidden
}

.story-image,
.founder-image{
  height:auto;
  min-height:0;
  overflow:hidden;
  background:transparent;
}

.story-image img,
.founder-image img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

.story-image span{
  position:absolute;
  bottom:25px;
  left:25px;
  background:white;
  padding:12px;
  letter-spacing:2px;
  font-size:9px
}

.story-copy p:not(.eyebrow),
.founder-copy p:not(.eyebrow){
  color:var(--muted);
  line-height:1.8;
  font-size:15px
}

.founder{
  background:#eee9f4
}

.founder-image{
  order:2
}

.signature{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:23px;
  margin-top:35px
}

.signature small{
  font:9px "DM Sans";
  letter-spacing:2px;
  color:var(--muted)
}

/* =========================
   JOURNAL
========================= */

.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}

.journal article{
  transition:.4s
}

.journal article:hover{
  transform:translateY(-5px)
}

.journal img{
  width:100%;
  height:260px;
  object-fit:cover;
  background:#e8e3ea
}

.journal small{
  display:block;
  color:var(--purple);
  letter-spacing:2px;
  font-size:9px;
  margin-top:18px
}

.journal h3{
  font:500 27px "Playfair Display",serif;
  margin:10px 0
}

.journal p{
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}

/* =========================
   INSTAGRAM
========================= */

.insta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

.insta img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:contain;
  background:#f7f3ee;
  display:block;
  filter:saturate(.85);
  transition:.5s;
}

.insta img:hover{
  transform:scale(.97);
  filter:saturate(1);
}
/* =========================
   CONTACT
========================= */

.contact{
  background:var(--purple);
  color:white;
  padding:90px 7vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.contact p:not(.eyebrow){
  color:#e8ddf8
}

.light{
  background:var(--pista);
  color:var(--ink)
}

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

footer{
  background:#0f0d13;
  color:white;
  padding:60px 7vw 20px
}

.footer-main{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px
}

.footer-main>div:not(:first-child){
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:12px;
  color:#aaa
}

.copyright{
  border-top:1px solid #ffffff15;
  margin-top:50px;
  padding-top:20px;
  color:#777;
  font-size:10px
}

/* =========================
   CART
========================= */

.overlay{
  position:fixed;
  inset:0;
  background:#0007;
  opacity:0;
  pointer-events:none;
  transition:.6s;
  z-index:40
}

.overlay.show{
  opacity:1;
  pointer-events:auto
}

.cart{
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:min(440px,100%);
  background:var(--ivory);
  z-index:41;
  transform:translateX(100%);
  transition:.45s;
  display:flex;
  flex-direction:column;
  padding:28px
}

.cart.open{
  transform:none
}

.cart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:20px
}

.cart-head h2{
  font:500 30px "Playfair Display",serif
}

.cart-head button{
  border:0;
  background:none;
  font-size:30px
}

.cart-item{
  display:flex;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.cart-item img{
  width:65px;
  height:65px;
  object-fit:contain;
  background:#eee
}

.cart-foot{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:20px
}

.total{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px
}

.checkout,
.pay{
  width:100%;
  padding:15px;
  border:0;
  margin-top:8px;
  cursor:pointer
}

.checkout{
  background:var(--ink);
  color:white
}

.pay{
  background:var(--pista);
  color:var(--ink)
}

.pay small{
  opacity:.6
}

.qty button{
  border:1px solid var(--line);
  background:white;
  padding:4px 9px
}

.remove{
  border:0;
  background:none;
  color:#b44;
  cursor:pointer;
  font-size:11px
}

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

@keyframes float{
  50%{
    transform:translateY(-12px)
  }
}

@keyframes float2{
  50%{
    transform:translateY(-15px) rotate(-3deg)
  }
}

@keyframes sweep{
  0%,35%{
    transform:translateX(-300%) rotate(25deg)
  }

  60%,100%{
    transform:translateX(500%) rotate(25deg)
  }
}

@keyframes orbit{
  50%{
    transform:translate(30px,-20px) scale(1.1)
  }
}

/* =========================================================
   TABLET
   ONLY RESPONSIVE CHANGES
========================================================= */

@media (max-width:900px){

  nav{
    display:none
  }

  .menu{
    display:block
  }

  .market{
    display:none
  }

  .hero{
    grid-template-columns:1fr 1fr;
    padding-left:5vw;
    padding-right:5vw;
    gap:25px
  }

  .hero-visual{
    height:500px
  }

  .product-stage{
    width:min(390px,100%);
    height:450px
  }

  .manifesto{
    grid-template-columns:1fr 1fr
  }

  .manifesto div{
    padding:22px 30px
  }

  .products{
    grid-template-columns:1fr 1fr
  }

  .brands{
    grid-template-columns:1fr;
    gap:50px
  }

  .story,
  .founder{
    grid-template-columns:1fr 1fr;
    gap:35px;
    padding-left:5vw;
    padding-right:5vw
  }

  .story-image,
  .founder-image{
    height:500px
  }

  .journal-grid{
    grid-template-columns:1fr 1fr
  }

  .insta{
    grid-template-columns:1fr 1fr
  }

  .footer-main{
    grid-template-columns:1fr 1fr
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:520px){

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

  .announcement{
    padding:11px 12px;
    font-size:8px;
    line-height:1.4;
    letter-spacing:1px
  }

  .header{
    height:70px;
    padding:0 18px
  }

  /*
     Original logo positioning preserved,
     only size reduced for mobile.
  */
  .header .logo{
    width:100px;
    height:70px
  }

  .header .logo img{
    width:100px !important;
    height:100px !important;
    top:8px !important
  }

  .head-actions{
    gap:7px
  }

  .cart-btn{
    padding:9px 13px;
    font-size:12px
  }

  .menu{
    display:block;
    padding:9px 12px
  }

  .hero{
    display:flex;
    flex-direction:column;
    padding:55px 22px 45px;
    min-height:auto
  }

  .hero-copy{
    width:100%
  }

  .eyebrow{
    font-size:20px;
    line-height:1.2
  }

  .hero h1{
    font-size:55px;
    line-height:.92;
    letter-spacing:-3px
  }

  .lead{
    font-size:15px;
    line-height:1.65;
    margin:22px 0
  }

  .actions{
    flex-wrap:wrap;
    gap:18px
  }

  .btn{
    padding:14px 18px;
    gap:20px
  }

  .hero-signals{
    margin-top:35px;
    gap:9px;
    flex-direction:column
  }

  .hero-visual{
    width:100%;
    height:430px;
    margin-top:10px
  }

  .product-stage{
    width:min(340px,90vw);
    height:400px
  }

  .product-stage img{
    width:125%;
    height:100%
  }

  .floating{
    right:0;
    bottom:45px;
    padding:13px 15px;
    font-size:8px
  }

  .orb1{
    width:120px;
    height:120px
  }

  .orb2{
    width:80px;
    height:80px
  }

  .manifesto{
    grid-template-columns:1fr
  }

  .manifesto div{
    padding:18px 22px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .manifesto div:last-child{
    border-bottom:0
  }

  .section,
  .social,
  .journal,
  .brands,
  .story,
  .founder{
    padding:75px 22px
  }

  .section-title{
    display:block;
    margin-bottom:35px
  }

  .section h2,
  .story h2,
  .founder h2,
  .contact h2{
    font-size:43px;
    line-height:1
  }

  .filters{
    margin-top:25px
  }

  .products{
    grid-template-columns:1fr;
    gap:18px
  }

  .card-img{
    height:330px
  }

  .brands{
    display:block
  }

  .brand-intro{
    margin-bottom:35px
  }

  .brand-grid{
    grid-template-columns:1fr;
    gap:18px
  }

  .brand{
    min-height:330px;
    padding:30px
  }

  .brand h3{
    font-size:35px
  }

  .story,
  .founder{
    display:flex;
    flex-direction:column;
    gap:40px
  }

  .story-image,
  .founder-image{
    width:100%;
    height:430px
  }

  .founder-image{
    order:0
  }

  .story-copy p:not(.eyebrow),
  .founder-copy p:not(.eyebrow){
    font-size:14px;
    line-height:1.75
  }

  .journal-grid{
    grid-template-columns:1fr;
    gap:35px
  }

  .journal img{
    height:auto;
    aspect-ratio:1/.75
  }

  .insta{
    grid-template-columns:1fr 1fr;
    gap:8px
  }

  .contact{
    padding:70px 22px;
    display:block
  }

  .contact .btn{
    margin-top:25px
  }

  footer{
    padding:55px 22px 20px
  }

  .footer-main{
    grid-template-columns:1fr;
    gap:35px
  }

  .copyright{
    margin-top:35px;
    line-height:1.5
  }

  .cart{
    width:100%;
    padding:22px
  }

  .cart-head h2{
    font-size:27px
  }

  .brand-logo{
    width:180px;
    height:180px
  }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:360px){

  .header{
    padding:0 13px
  }

  .header .logo img{
    width:90px !important;
    height:90px !important
  }

  .cart-btn{
    padding:8px 10px
  }

  .menu{
    padding:8px 10px
  }

  .hero{
    padding-left:18px;
    padding-right:18px
  }

  .hero h1{
    font-size:47px
  }

  .section,
  .social,
  .journal,
  .brands,
  .story,
  .founder{
    padding-left:18px;
    padding-right:18px
  }

  .product-stage{
    width:290px;
    height:350px
  }
}

/* Existing brand logo support */
.brand-logo{
  width:250px;
  height:250px;
  object-fit:contain;
  display:block;
  margin-top:10px
}
/* ===== PRO-VISTA ENHANCEMENT LAYER ===== */
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.skip-link{position:fixed;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shop-tools{display:flex;gap:12px;justify-content:flex-end;align-items:center;margin:-20px 0 25px}
.search-box{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;max-width:360px;width:100%}
.search-box input{border:0;outline:0;padding:12px 15px;background:transparent;width:100%;font:inherit}
.search-box button{border:0;background:transparent;font-size:20px;padding:0 14px;cursor:pointer}
.filter-fav{white-space:nowrap}
.card{overflow:hidden}
.card .fav{position:absolute;right:20px;top:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;z-index:2}
.card .fav.active{background:var(--pista)}
.badge{display:inline-block;padding:5px 8px;border-radius:20px;background:var(--pista);font-size:8px;letter-spacing:1px;margin-top:7px}
.cart-progress{padding:15px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.cart-progress>div{height:5px;background:#e9e6df;border-radius:10px;overflow:hidden;margin-top:7px}
.cart-progress i{display:block;height:100%;width:0;background:var(--purple);transition:.35s}
.checkout-form{display:grid;gap:8px;padding:15px 0}
.checkout-form input,.checkout-form textarea{width:100%;border:1px solid var(--line);padding:11px 12px;background:#fff;font:inherit;border-radius:4px}
.quick-actions{position:fixed;right:18px;bottom:18px;z-index:35;display:flex;gap:8px}
.quick-actions a,.quick-actions button{width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;box-shadow:0 10px 25px #0002;font-weight:700}
.quick-actions a{background:#25d366}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 18px;border-radius:30px;font-size:12px;z-index:80;transition:.3s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;max-width:720px;margin:auto;background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px #0002;padding:18px 20px;display:flex;gap:20px;justify-content:space-between;align-items:center;z-index:70}
.cookie-banner p{margin:5px 0 0;color:var(--muted);font-size:12px}
.cookie-banner button{border:0;background:var(--ink);color:#fff;border-radius:30px;padding:10px 18px;cursor:pointer;white-space:nowrap}
@media(max-width:520px){
 .shop-tools{display:block;margin:-10px 0 22px}
 .search-box{max-width:none;margin-bottom:8px}
 .cookie-banner{left:12px;right:12px;bottom:12px;display:block}
 .cookie-banner button{margin-top:12px;width:100%}
 .quick-actions{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

@media(max-width:900px){nav.mobile-open{position:absolute;top:84px;left:0;right:0;background:var(--ivory);padding:20px;display:flex!important;flex-direction:column;gap:16px;border-bottom:1px solid var(--line);box-shadow:0 20px 40px #0001;z-index:30}.header{position:sticky}}
/* =========================================================
   YOUR PANTRY — BELOW HEADER
========================================================= */

.cart{
  position:fixed;
  right:0;
  top:128px; /* Announcement 43px + Header 85px */
  height:calc(100vh - 128px);
  width:min(440px,100%);
  background:var(--ivory);
  z-index:9998;
  transform:translateX(100%);
  transition:.45s;
  display:flex;
  flex-direction:column;
  padding:28px;
}

.cart.open{
  transform:translateX(0);
}

/* Keep overlay behind header */
.overlay{
  position:fixed;
  inset:0;
  background:#0007;
  opacity:0;
  pointer-events:none;
  transition:.6s;
  z-index:9990;
}

.overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* Header always stays above pantry */
.announcement{
  z-index:10000;
}

.header{
  z-index:10001;
}

/* =========================================================
   MOBILE — PANTRY BELOW HEADER TOO
========================================================= */

@media(max-width:520px){

  .cart{
    top:113px; /* Announcement 43px + mobile header 70px */
    height:calc(100vh - 113px);
    width:100%;
    padding:22px;
  }

  .announcement{
    z-index:10000;
  }

  .header{
    z-index:10001;
  }

  .overlay{
    z-index:9990;
  }
}/* =========================
   NAVIGATION HOVER CAPSULE
========================= */

nav{
  display:flex;
  gap:0px;
  font-size:16px;
  font-weight:900;
  align-items:center;
}

nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 17px;
  border-radius:50px;
  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

nav a:hover{
  background:purple !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(128,0,128,.22);
}


/* =========================
   AMAZON / NOON
   SAME HOVER STYLE
========================= */

.market{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 17px;
  border-radius:50px;
  font-size:20px;
  font-weight:700;
  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.market:hover{
  background:purple !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(128,0,128,.22);
}


/* =========================
   MENU BUTTON — ORIGINAL
========================= */

.menu{
  border:0;
  background:purple;
  color:white;
  padding:11px 20px;
  border-radius:60px;
  cursor:pointer;
}
.card-img{
  height:280px;
  background:#f1f0e9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px;
}

.card-img img{
  width:150%;
  height:120%;
  object-fit:contain;
  object-position:center center;
  transition:.6s;
  display:block;
}

.footer-logo-img{
  width:150px !important;
  height:auto !important;
  display:block;
  object-fit:contain;
}
/* =========================
   QUICK ACTIONS
========================= */

.quick-actions{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  gap:9px;
  align-items:center;
}

.quick-actions a{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 10px 25px #0003;
  transition:.3s ease;
  overflow:hidden;
}

.quick-actions a:hover{
  transform:translateY(-4px) scale(1.06);
}

/* LOGO IMAGE - LARGE */

.quick-actions img{
  width:50px;
  height:50px;
  max-width:none;
  object-fit:contain;
  display:block;
}

/* =========================
   WHATSAPP
========================= */

#quickWhatsapp{
  background:#25D366;
}

/* =========================
   INSTAGRAM - CHERRY RED
========================= */

#quickInstagram{
  background:#B11226;
}

/* =========================
   MOBILE
========================= */

@media(max-width:520px){

  .quick-actions{
    right:12px;
    bottom:12px;
    gap:8px;
  }

  .quick-actions a{
    width:44px;
    height:44px;
  }

  .quick-actions img{
    width:46px;
    height:46px;
    max-width:none;
    object-fit:contain;
  }

}
/* ==========================================
   PRO VISTA VENTURES - RESPONSIVE TEXT LOGO
   ONLY LOGO FIX
   ========================================== */

.header .logo {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-shrink: 1 !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
}

.header .logo-main {
  font-family: "Playfair Display", serif;
  font-size: 29px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.header .logo-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;

  font-family: "Playfair Display", serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1;
  white-space: nowrap;
}

.header .logo-line {
  width: 25px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex-shrink: 1;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

  .header {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  .header .logo-main {
    font-size: 27px;
  }

  .header .logo-sub {
    font-size: 9px;
    gap: 8px;
    margin-top: 5px;
  }

  .header .logo-line {
    width: 23px;
  }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 520px) {

  .header {
    height: 70px !important;
    padding: 0 14px !important;
  }

  .header .logo {
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 125px) !important;
  }

  .header .logo-main {
    font-size: clamp(20px, 7vw, 26px);
    letter-spacing: 0.025em;
  }

  .header .logo-sub {
    font-size: 7px;
    letter-spacing: 0.20em;
    gap: 6px;
    margin-top: 5px;
  }

  .header .logo-line {
    width: 17px;
  }

  .head-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .cart-btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .menu {
    padding: 8px 10px !important;
  }
}


/* ==========================================
   VERY SMALL MOBILE
   ========================================== */

@media (max-width: 360px) {

  .header {
    padding: 0 10px !important;
  }

  .header .logo {
    max-width: calc(100vw - 112px) !important;
  }

  .header .logo-main {
    font-size: 19px;
    letter-spacing: 0.015em;
  }

  .header .logo-sub {
    font-size: 6px;
    letter-spacing: 0.15em;
    gap: 5px;
  }

  .header .logo-line {
    width: 13px;
  }

  .cart-btn {
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  .menu {
    padding: 7px 8px !important;
  }
}


/* =========================================================
   DEVICE / ORIENTATION FIX LAYER
   Desktop styles above remain unchanged.
   Only tablet/mobile layout behavior is adjusted here.
========================================================= */

/* ---------- TABLET PORTRAIT: 521px–900px ---------- */
@media (min-width:521px) and (max-width:900px) {

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

  body{
    padding-top:128px;
  }

  .announcement{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }

  .header{
    position:fixed !important;
    top:43px;
    left:0;
    right:0;
    height:85px;
    width:100%;
    padding-left:25px !important;
    padding-right:25px !important;
  }

  .header .logo{
    min-width:0;
    max-width:55%;
  }

  .header .logo-main{
    white-space:nowrap;
  }

  .head-actions{
    flex-shrink:0;
  }

  nav.mobile-open{
    top:85px !important;
  }

  .hero{
    grid-template-columns:1fr;
    gap:35px;
    padding:65px 5vw 55px;
    min-height:auto;
  }

  .hero-copy{
    width:100%;
    max-width:760px;
  }

  .hero-visual{
    width:100%;
    height:500px;
    margin-top:0;
  }

  .product-stage{
    width:min(390px,80vw);
    height:450px;
  }

  .manifesto{
    grid-template-columns:1fr 1fr;
  }

  .manifesto div{
    padding:22px 30px;
    white-space:normal;
  }

  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .brands{
    grid-template-columns:1fr;
    gap:50px;
  }

  .story,
  .founder{
    grid-template-columns:1fr;
    gap:45px;
    padding-left:5vw;
    padding-right:5vw;
  }

  .story-image,
  .founder-image{
    height:auto;
  }

  .journal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .insta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
  }
}


/* ---------- TABLET LANDSCAPE: 521px–900px ---------- */
@media (min-width:521px) and (max-width:900px) and (orientation:landscape) and (max-height:600px) {

  .hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:25px;
    padding-top:45px;
    padding-bottom:45px;
  }

  .hero-visual{
    height:430px;
  }

  .product-stage{
    width:min(340px,42vw);
    height:380px;
  }

  .story,
  .founder{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:35px;
  }

  .story-image,
  .founder-image{
    height:auto;
  }
}


/* ---------- MOBILE: up to 520px ---------- */
@media (max-width:520px) {

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

  body{
    padding-top:113px;
  }

  .announcement{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:43px;
    padding:10px 12px;
  }

  .header{
    position:fixed !important;
    top:43px;
    left:0;
    right:0;
    height:70px !important;
    width:100%;
    padding:0 14px !important;
  }

  .header .logo{
    min-width:0;
    max-width:calc(100vw - 125px) !important;
    overflow:visible !important;
  }

  .head-actions{
    flex-shrink:0 !important;
  }

  nav.mobile-open{
    top:70px !important;
    left:0;
    right:0;
    width:100%;
    max-width:100vw;
    box-sizing:border-box;
  }

  .hero{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    padding:55px 22px 45px;
    min-height:auto;
    overflow:hidden;
  }

  .hero-copy,
  .hero-visual{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .hero-visual{
    height:430px;
    margin-top:10px;
  }

  .product-stage{
    width:min(340px,90vw);
    max-width:100%;
    height:400px;
  }

  .manifesto,
  .products,
  .brand-grid,
  .journal-grid{
    width:100%;
    max-width:100%;
  }

  .manifesto{
    grid-template-columns:1fr;
  }

  .manifesto div{
    min-width:0;
    white-space:normal;
  }

  .section,
  .social,
  .journal,
  .brands,
  .story,
  .founder{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .products{
    grid-template-columns:1fr;
  }

  .story,
  .founder{
    display:flex;
    flex-direction:column;
    gap:40px;
  }

  .story-image,
  .founder-image{
    width:100%;
    height:auto;
    min-height:0;
  }

  .story-image img,
  .founder-image img{
    width:100%;
    height:auto;
  }

  .contact{
    width:100%;
    box-sizing:border-box;
  }

  .footer-main{
    grid-template-columns:1fr;
  }

  .cart{
    top:113px !important;
    height:calc(100dvh - 113px) !important;
    max-height:calc(100dvh - 113px);
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}


/* ---------- SMALL MOBILE LANDSCAPE ---------- */
@media (max-width:520px) and (orientation:landscape) and (max-height:600px) {

  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:18px;
    padding:35px 18px 30px;
  }

  .hero-copy{
    min-width:0;
  }

  .hero h1{
    font-size:clamp(38px,7vw,52px);
  }

  .eyebrow{
    font-size:17px;
  }

  .lead{
    font-size:13px;
    margin:16px 0;
  }

  .actions{
    gap:12px;
  }

  .hero-signals{
    margin-top:20px;
  }

  .hero-visual{
    height:320px;
    margin-top:0;
  }

  .product-stage{
    width:min(260px,44vw);
    height:300px;
  }

  .floating{
    right:0;
    bottom:20px;
  }

  .manifesto{
    grid-template-columns:1fr 1fr;
  }

  .manifesto div{
    padding:15px 18px;
  }

  .products{
    grid-template-columns:1fr 1fr;
  }

  .card-img{
    height:250px;
  }

  .story,
  .founder{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:25px;
  }

  .story-image,
  .founder-image{
    height:auto;
  }

  .brand-grid{
    grid-template-columns:1fr 1fr;
  }

  .journal-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ---------- TABLET / SMALL LAPTOP: 901px–1199px ---------- */
@media (min-width:901px) and (max-width:1199px) {

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

  .header{
    padding-left:4vw;
    padding-right:4vw;
  }

  .header .logo{
    min-width:0;
  }

  .hero{
    padding-left:5vw;
    padding-right:5vw;
    gap:35px;
  }

  .hero h1{
    font-size:clamp(50px,5vw,76px);
  }

  .manifesto div{
    padding-left:3vw;
    padding-right:3vw;
    white-space:normal;
  }

  .section,
  .social,
  .journal,
  .brands,
  .story,
  .founder{
    padding-left:5vw;
    padding-right:5vw;
  }

  .products{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .story,
  .founder{
    gap:5vw;
  }

  .footer-main{
    grid-template-columns:2fr 1fr 1fr;
  }
}
#premium-sauce-intro { 
  position: fixed !important; 
  inset: 0 !important; 
 
  width: 100% !important; 
  height: 100vh !important; 
  height: 100dvh !important; 
 
  /* PREMIUM WHITE BACKGROUND */
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(0,0,0,.035),
      transparent 38%
    ),
    #ffffff !important; 
 
  z-index: 999999999 !important; 
 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
 
  opacity: 1; 
 
  overflow: hidden !important; 
 
  transition: opacity 1s ease !important; 
} 


/* CONTENT */

.psi-content { 
  text-align: center !important; 
 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 

  width: 90% !important;
  max-width: 900px !important;
} 


/* =================================================
   LOGO
================================================= */

.psi-logo { 
 
  width: 400px !important; 
  height: 400px !important; 
 
  object-fit: contain !important; 
 
  display: block !important; 
 
  margin: 0 0 35px 0 !important; 
 
  /* CLEAN PREMIUM SHADOW */
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.12)) !important;

  animation: psiLogo 1.6s 
    cubic-bezier(.2,.8,.25,1.3) 
    forwards !important; 
} 


/* =================================================
   TEXT
================================================= */

.psi-title { 
 
  text-align: center !important; 
 
  opacity: 0; 
 
  animation: psiText 1s 1.3s ease forwards !important; 
} 


/* SMALL TEXT */

.psi-title small { 
 
  display: block !important; 
 
  margin-bottom: 14px !important; 
 
  font-family: Arial, sans-serif !important; 
 
  font-size: 10px !important; 
 
  letter-spacing: 5px !important; 
 
  font-weight: 600 !important;

  color: #17131d !important; 
} 


/* MAIN TITLE */

.psi-title strong { 
 
  display: block !important; 
 
  font-family: Georgia, "Times New Roman", serif !important; 
 
  font-size: clamp(32px, 5vw, 65px) !important; 
 
  line-height: 1.08 !important; 
 
  font-weight: 500 !important; 
 
  letter-spacing: 1px !important; 
 
  color: #17131d !important; 

  text-transform: uppercase !important;
} 


/* =================================================
   LOGO DROP + BOUNCE
================================================= */

@keyframes psiLogo { 
 
  /* START ABOVE SCREEN */

  0% { 
    opacity: 0; 
 
    transform: 
      translateY(-300px) 
      scale(.55) 
      rotate(-10deg); 

    filter:
      blur(7px)
      drop-shadow(0 0 0 rgba(0,0,0,0));
  } 


  /* DROP */

  45% { 
    opacity: 1; 
 
    transform: 
      translateY(18px) 
      scale(1.08) 
      rotate(3deg); 

    filter:
      blur(0)
      drop-shadow(0 15px 22px rgba(0,0,0,.14));
  } 


  /* FIRST BOUNCE */

  60% { 
    transform: 
      translateY(-10px) 
      scale(.94) 
      rotate(-2deg); 
  } 


  /* SECOND BOUNCE */

  72% { 
    transform: 
      translateY(4px) 
      scale(1.03) 
      rotate(1deg); 
  } 


  /* SETTLE */

  85% { 
    transform: 
      translateY(0) 
      scale(.99) 
      rotate(0); 
  } 


  /* FINAL */

  100% { 
    opacity: 1; 
 
    transform: 
      translateY(0) 
      scale(1) 
      rotate(0); 
 
    filter:
      drop-shadow(0 12px 20px rgba(0,0,0,.13));
  } 
} 


/* =================================================
   TEXT REVEAL
================================================= */

@keyframes psiText { 
 
  from { 
    opacity: 0; 
 
    transform: 
      translateY(25px); 
 
    filter: blur(7px); 
  } 
 
  to { 
    opacity: 1; 
 
    transform: 
      translateY(0); 
 
    filter: blur(0); 
  } 
} 


/* =================================================
   EXIT
================================================= */

#premium-sauce-intro.psi-hide { 
 
  opacity: 0 !important; 
 
  pointer-events: none !important; 
} 


/* =================================================
   MOBILE
================================================= */

@media(max-width:600px) { 
 
  .psi-content {
    width: 94% !important;
  }

  .psi-logo { 
    width: 105px !important; 
    height: 105px !important; 
 
    margin-bottom: 25px !important; 
  } 
 
  .psi-title small { 
    font-size: 8px !important; 
    letter-spacing: 3px !important; 

    margin-bottom: 12px !important;
  } 
 
  .psi-title strong { 
    font-size: 29px !important; 

    line-height: 1.12 !important;
  } 

} 


/* =================================================
   SMALL MOBILE
================================================= */

@media(max-width:380px) {

  .psi-logo {
    width: 90px !important;
    height: 90px !important;

    margin-bottom: 20px !important;
  }

  .psi-title small {
    font-size: 7px !important;
    letter-spacing: 2.5px !important;
  }

  .psi-title strong {
    font-size: 26px !important;
  }

}
/* =========================================================
   FINAL HEADER OVERLAP FIX
   MOBILE + TABLET ONLY
========================================================= */

@media (max-width:900px){

  .announcement{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:43px !important;
    z-index:999999 !important;
  }

  .header{
    position:fixed !important;
    top:43px !important;
    left:0 !important;
    width:100% !important;
    height:70px !important;

    padding:0 15px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    overflow:visible !important;
    z-index:999998 !important;
  }


  /* =========================
     LOGO
  ========================= */

  .header .logo{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:auto !important;

    max-width:55% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 1 auto !important;

    overflow:visible !important;

    transform:none !important;
  }


  /* KILL OLD 400px IMAGE RULE */
  .header .logo img{
    display:none !important;

    width:0 !important;
    height:0 !important;
    max-width:0 !important;
  }


  /* =========================
     TEXT LOGO
  ========================= */

  .header .logo-main{
    display:block !important;

    position:relative !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    font-size:25px !important;
    line-height:1 !important;

    white-space:nowrap !important;

    transform:none !important;
  }

  .header .logo-sub{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:auto !important;

    margin:5px 0 0 !important;
    padding:0 !important;

    gap:6px !important;

    font-size:7px !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  .header .logo-line{
    display:block !important;

    width:17px !important;
    height:1px !important;

    flex:none !important;
  }


  /* =========================
     RIGHT MENU AREA
  ========================= */

  .head-actions{
    position:relative !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:flex-end !important;

    width:auto !important;
    height:auto !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 auto !important;

    transform:none !important;
  }


  /* =========================
     CART
  ========================= */

  .cart-btn{
    position:relative !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;

    padding:8px 11px !important;

    flex:none !important;

    white-space:nowrap !important;

    transform:none !important;
  }


  /* =========================
     MENU
  ========================= */

  .menu{
    position:relative !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:42px !important;
    height:auto !important;

    margin:0 !important;

    padding:8px 11px !important;

    flex:none !important;

    white-space:nowrap !important;

    transform:none !important;

    z-index:1000000 !important;
  }


  /* =========================
     MOBILE NAV DROPDOWN
  ========================= */

  nav.mobile-open{
    position:absolute !important;

    top:70px !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    padding:20px !important;

    z-index:999997 !important;
  }


  /* =========================
     BODY OFFSET
  ========================= */

  body{
    padding-top:113px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:520px){

  .header{
    height:70px !important;
    padding:0 12px !important;
    gap:6px !important;
  }

  .header .logo{
    max-width:52% !important;
  }

  .header .logo-main{
    font-size:clamp(19px,6.5vw,25px) !important;
  }

  .header .logo-sub{
    font-size:6px !important;
    letter-spacing:.18em !important;
    gap:5px !important;
  }

  .header .logo-line{
    width:14px !important;
  }

  .head-actions{
    gap:5px !important;
  }

  .cart-btn{
    padding:7px 9px !important;
    font-size:10px !important;
  }

  .menu{
    min-width:40px !important;
    padding:7px 9px !important;
    font-size:12px !important;
  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media(max-width:360px){

  .header{
    padding:0 9px !important;
  }

  .header .logo{
    max-width:50% !important;
  }

  .header .logo-main{
    font-size:18px !important;
  }

  .header .logo-sub{
    font-size:5.5px !important;
  }

  .cart-btn{
    padding:6px 7px !important;
    font-size:9px !important;
  }

  .menu{
    min-width:36px !important;
    padding:6px 7px !important;
  }

}