*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
html{overflow-x:hidden;max-width:100%}
body{background:#f5f5f5;color:#333;line-height:1.6;max-width:100%}
.announcement-bar{
  background:#000;
  color:#fff;
  text-align:center;
  padding:12px 15px;
  overflow:hidden;
  position:relative;
  height:44px;
}
.announcement-text{
  font-family:'Open Sans', Arial, sans-serif;
  font-weight:700;
  font-size:clamp(13px, 3vw, 16px);
  letter-spacing:0.3px;
  white-space:nowrap;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .6s ease;
  width:100%;
  padding:0 15px;
  box-sizing:border-box;
}
.announcement-text.active{
  opacity:1;
}
header{background:#fff;color:#111;padding:15px 20px;position:sticky;top:0;z-index:1000;border-bottom:2px solid #000}
.header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:15px}
.header-left{display:flex;align-items:center;gap:16px;flex:1}
.hamburger-icon,.search-icon{cursor:pointer;transition:opacity .2s ease;opacity:.9}
.hamburger-icon:hover,.search-icon:hover{opacity:1}
.icon-container{flex:1;justify-content:flex-end}
.logo-container{flex:0 0 auto}
.logo-container{display:flex;align-items:center;gap:10px}
.icon-container{display:flex;align-items:center;gap:10px;order:2}
header .cart-icon,header .user-icon{color:#111}
.cart-icon,.user-icon{position:relative;cursor:pointer;font-size:clamp(18px, 4vw, 24px);transition:transform .3s}
.cart-icon:hover,.user-icon:hover{transform:scale(1.2)}
.cart-icon span,.user-icon span{position:absolute;top:-10px;right:-10px;background:#fff;color:#000;border-radius:50%;padding:2px 6px;font-size:10px;font-weight:700;min-width:18px;text-align:center}
.hero-intro{
position:relative;width:100%;
background:#fff;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
padding:50px 20px;
}
.hero-intro-inner{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
width:100%;
max-width:900px;
margin:0 auto;
}
.stacked-word-group{
position:relative;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
}
.stacked-word{
font-family:Arial,sans-serif;
font-size:clamp(34px,9vw,68px);
font-weight:800;
letter-spacing:1px;
color:#111;
text-transform:uppercase;
line-height:1.15;
opacity:0;
transition:opacity .7s ease, transform .7s ease;
}
.stacked-word.from-right{transform:translateX(120%)}
.stacked-word.from-left{transform:translateX(-120%)}
.stacked-word.show{opacity:var(--final-opacity,1);transform:translateX(0)}
.stacked-word:nth-child(1){--final-opacity:.4}
.stacked-word:nth-child(2){--final-opacity:.6}
.stacked-word:nth-child(3){--final-opacity:.85}
.stacked-word:nth-child(4){--final-opacity:1}
.hero-logo-drop{
position:absolute;
left:50%;top:50%;
width:min(32vw,150px);
transform:translate(-50%,-50%) scale(.5);
opacity:0;
z-index:3;
transition:opacity .8s cubic-bezier(.34,1.56,.64,1), transform .8s cubic-bezier(.34,1.56,.64,1);
}
.hero-logo-drop.show{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.hero-logo-drop img{width:100%;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
  #hero-shop-btn{
  display:inline-block;
  margin-top:26px;
  opacity:0;
  transform:translateY(15px);
  transition:opacity .6s ease, transform .6s ease;
}
#hero-shop-btn.show{opacity:1;transform:translateY(0)}

header{opacity:0;transform:translateY(-20px);transition:opacity .6s ease, transform .6s ease}
header.show{opacity:1;transform:translateY(0)}.shop-now{display:inline-block;padding:12px 25px;background:#fff;color:#000;text-decoration:none;border-radius:25px;font-size:clamp(14px, 3vw, 18px);transition:all .3s ease;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.shop-now:hover{background:#3d3d3d;transform:translateY(-2px);color:#fff}
.section{padding:40px 15px;max-width:1200px;margin:0 auto}
.page-section{display:none}
.section h2{text-align:center;font-size:clamp(24px, 5vw, 36px);margin-bottom:30px;font-family:'Comfortaa',cursive;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:0 10px}

@media(max-width:600px){
  .product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    padding:0 12px;
  }
  .product-card{padding:10px}
  .product-card.expanded{
  grid-column:1 / -1;
  width:100%;
  max-width:340px !important;
  margin:0 auto !important;
  box-sizing:border-box;
}
  .product-card img{max-width:100%;height:140px}
  .product-card h3{font-size:14px;margin:8px 0 4px}
  .product-card p{font-size:13px}
  .product-card button{padding:8px 10px;font-size:12px}
}

.product-card{background:#fff;border-radius:15px;padding:15px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;position:relative;min-width:0;display:flex;flex-direction:column;}
.product-card:hover{transform:translateY(-5px);box-shadow:0 6px 15px rgba(0,0,0,.2)}
.product-card img{width:100%;max-width:180px;height:220px;object-fit:contain;border-radius:10px;padding:4px;box-sizing:border-box;align-self:center;}
.product-card h3{
  font-family:'Comfortaa', cursive;
  font-weight:700;
  font-size:clamp(15px, 3vw, 19px);
  margin:12px 0 8px;
  letter-spacing:0.2px;
  color:#1a1a1a;
  min-height:2.6em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card p{font-size:clamp(14px, 3vw, 16px);color:#555;margin-bottom:10px}
.product-card button{padding:10px 20px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;font-size:clamp(12px, 3vw, 16px);width:100%;max-width:180px;margin-top:auto;margin-left:auto;margin-right:auto;}
.product-card button.added{background:#4caf50}
.product-card button.added:hover{background:#45a049;transform:translateY(-2px)}
.product-card button:hover{background:#3d3d3d;transform:translateY(-2px)}
.delivery-info p{font-size:clamp(14px, 3vw, 16px);line-height:1.6;margin-bottom:15px;padding:0 10px}
.order-reviews .order-review-form,.reviews .review-form{max-width:600px;margin:0 auto;padding:20px;background:#fff;border-radius:15px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.order-review-form input,.order-review-form select,.order-review-form textarea,.review-form input,.review-form textarea{width:100%;padding:10px;margin:8px 0;border:1px solid #ccc;border-radius:5px;font-size:clamp(14px, 3vw, 16px)}
.rating{display:flex;justify-content:center;margin:10px 0;flex-direction:row-reverse}
.rating input{display:none}
.rating label{font-size:clamp(18px, 4vw, 24px);color:#ddd;cursor:pointer;margin:0 3px}
.rating input:checked~label{color:#ffc107}
.rating label:hover,.rating label:hover~label{color:#ffc107}
.order-review-form button,.review-form button{padding:10px 20px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;font-size:clamp(14px, 3vw, 16px);width:100%;max-width:200px;margin:10px auto 0;display:block}
.order-review-form button:hover,.review-form button:hover{background:#3d3d3d;transform:translateY(-2px)}
.order-review-form button:disabled{background:#999;cursor:not-allowed;transform:none}
.order-review-list,.review-list{margin-top:20px}
.order-review-item,.review-item{background:#fff;padding:15px;margin:10px 0;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.review-controls{display:flex;justify-content:center;gap:15px;margin-bottom:20px}
.review-controls button{padding:8px 20px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;font-size:clamp(14px, 3vw, 16px)}
.review-controls button:hover{background:#3d3d3d;transform:translateY(-2px)}

/* ===== IMAGE UPLOAD STYLES ===== */
.review-img-upload{margin:10px 0;text-align:center}
.upload-label{display:inline-block;padding:10px 20px;background:#f0f0f0;border:2px dashed #aaa;border-radius:10px;cursor:pointer;font-size:clamp(13px, 3vw, 15px);color:#555;transition:all .3s;width:100%;box-sizing:border-box}
.upload-label:hover{background:#e0e0e0;border-color:#000;color:#000}
#review-image-input{display:none}
#review-img-preview{margin-top:8px}
#review-img-preview img{max-width:100%;max-height:180px;border-radius:10px;object-fit:cover;border:2px solid #ddd}
.review-uploaded-img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#f9f9f9;
  border-radius:10px;
  margin-top:10px;
  border:1px solid #eee;
  display:block;
  cursor:pointer;
  transition:opacity .2s;
}
.review-uploaded-img:hover{opacity:.85;}

/* Lightbox */
.lightbox-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:9999;
  justify-content:center;
  align-items:center;
}
.lightbox-overlay.active{display:flex;}
.lightbox-overlay img{
  max-width:95vw;
  max-height:92vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 4px 30px rgba(0,0,0,.5);
}
.lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  color:#fff;
  font-size:38px;
  cursor:pointer;
  line-height:1;
  font-weight:300;
  z-index:10000;
  background:none;
  border:none;
}
.lightbox-close:hover{color:#ccc;}
.remove-preview-btn{display:inline-block;margin-top:6px;padding:4px 14px;background:#e74c3c;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:13px}
.remove-preview-btn:hover{background:#c0392b}
/* ===== END IMAGE UPLOAD STYLES ===== */

.cart-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);justify-content:center;align-items:center;z-index:2000}
.cart-content{background:#fff;padding:20px;border-radius:15px;max-width:90%;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.cart-content h2{margin-bottom:20px;font-size:clamp(20px, 5vw, 28px)}
.close-cart{position:absolute;top:10px;right:15px;background:0 0;border:none;font-size:24px;cursor:pointer;color:#555}
.close-cart:hover{color:#000}
.cart-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:8px;border-bottom:1px solid #eee;flex-wrap:wrap;gap:10px}
.cart-item span{flex:1;min-width:150px;font-size:clamp(14px, 3vw, 16px)}
.cart-item button{background:#000;color:#fff;border:none;padding:6px 12px;border-radius:25px;cursor:pointer;transition:background .3s;font-size:clamp(12px, 3vw, 14px)}
.cart-item button:hover{background:#3d3d3d}
.cart-content form{margin-top:15px}
.cart-content input{width:100%;padding:10px;margin:8px 0;border:1px solid #ccc;border-radius:5px;font-size:clamp(14px, 3vw, 16px)}
.cart-content button.checkout{width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:clamp(14px, 3vw, 18px);transition:all .3s ease;margin-top:15px}
.cart-content button.checkout:hover{background:#3d3d3d;transform:translateY(-2px)}
.cart-content button.close{width:100%;padding:10px;background:#555;color:#fff;border:none;border-radius:25px;cursor:pointer;margin-top:10px;font-size:clamp(14px, 3vw, 16px)}
.cart-content button.close:hover{background:#3d3d3d}
/* ============================================================
   ✅ STANDALONE LOGIN / SIGNUP PAGE — white theme, same layout on every screen
   ============================================================ */
.auth-page-section{padding:40px 15px 60px;display:flex;flex-direction:column;align-items:center}
.auth-scale-box{display:flex;justify-content:center;width:100%}
.auth-card{display:flex;width:100%;max-width:660px;min-height:auto;border-radius:24px;background:#fff;border:1px solid #eee;box-shadow:0 20px 60px rgba(0,0,0,.10);overflow:hidden}
.auth-nav{list-style:none;margin:0;padding:0;position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;flex:0 0 clamp(56px,14vw,110px);border-right:1px solid #f0f0f0}
.auth-nav li{flex:1 1 auto;display:grid;place-items:center}
.auth-nav img{height:clamp(18px,4vw,30px);width:auto}
.auth-active-bar{position:absolute;top:33.33%;left:0;height:33.33%;transition:.35s ease-in-out}
.auth-active-bar::after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:3px;height:clamp(28px,7vw,50px);border-radius:0 4px 4px 0;background:#C9A84C}
.auth-tab{background:transparent;border:0;display:flex;flex-direction:column;gap:clamp(3px,1vw,6px);align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;color:#999;font-family:'Comfortaa',cursive;font-size:clamp(9px,2.3vw,12px);transition:.25s;text-align:center}
.auth-tab svg{width:clamp(14px,3.5vw,20px);height:clamp(14px,3.5vw,20px)}
.auth-tab:not(.active):hover{color:#C9A84C}
.auth-tab.active{color:#000;font-weight:700}

.auth-hero{flex:0 0 clamp(90px,26vw,220px);display:flex;align-items:center;justify-content:center;background:#faf7f0;border-right:1px solid #f0f0f0;padding:clamp(8px,2vw,20px)}
.auth-hero-inner{position:relative;width:100%;text-align:center}
.auth-hero-content{display:none;flex-direction:column;align-items:center;gap:clamp(2px,1vw,4px)}
.auth-hero-content.active-view{display:flex}
.auth-hero-content h2{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(12px,3vw,18px);color:#111;padding:0;text-align:center}
.auth-hero-content h3{font-family:Arial,sans-serif;font-weight:400;font-size:clamp(9px,2.2vw,12px);color:#777;padding:0;text-align:center;margin-bottom:clamp(4px,1vw,8px)}
.auth-hero-content img{width:clamp(55px,20vw,130px);max-width:75%;margin-top:4px}

.auth-form-panel{flex:1;min-width:0;padding:clamp(12px,3vw,24px) clamp(14px,4vw,30px);display:flex;flex-direction:column;justify-content:center}
.auth-brand{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(13px,3.2vw,20px);letter-spacing:clamp(.5px,.3vw,2px);color:#111;text-transform:uppercase;text-align:center;margin-bottom:clamp(6px,1.5vw,10px)}
.auth-forms form{display:flex;flex-direction:column;gap:clamp(4px,1vw,8px)}
.auth-form-panel p{font-family:Arial,sans-serif;font-size:clamp(9px,2.2vw,12px);color:#888;text-align:center;margin-bottom:clamp(3px,1vw,6px)}
.auth-form-panel p a{color:#C9A84C;font-weight:600;text-decoration:none;cursor:pointer}
.auth-form-panel p a:hover{text-decoration:underline}
.auth-form-panel label{font-family:'Comfortaa',cursive;font-size:clamp(9px,2.2vw,12px);color:#666;display:block;margin-bottom:clamp(2px,.6vw,4px)}
.auth-form-panel .control input{background:#f7f7f7;border:1px solid #eee;border-radius:10px;width:100%;padding:0 clamp(8px,2vw,14px);height:clamp(30px,7vw,44px);font-family:Arial,sans-serif;font-size:clamp(10px,2.5vw,14px);box-sizing:border-box}
.auth-form-panel .control input:focus{outline:0;border-color:#C9A84C;background:#fff}
.auth-form-panel button[type="submit"]{padding:clamp(7px,2vw,12px) clamp(10px,3vw,20px);font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(10px,2.5vw,14px);color:#fff;border:0;border-radius:25px;margin-top:clamp(4px,1vw,8px);background:#111;cursor:pointer;transition:.25s}
.auth-form-panel button[type="submit"]:hover{background:#000;transform:translateY(-1px)}
.auth-form-panel .auth-subtitle{font-family:Arial,sans-serif;font-size:clamp(9px,2.2vw,12px);color:#777;text-align:center;margin-bottom:clamp(3px,1vw,6px)}
.auth-form-panel .error-message{color:#e74c3c;font-size:clamp(8px,2vw,11px);text-align:center;display:none;font-family:Arial,sans-serif}
.auth-form-panel .auth-switch-link{margin-top:clamp(3px,1vw,6px);text-align:center;color:#999;font-size:clamp(8px,2vw,11px);cursor:pointer;text-decoration:underline;font-family:'Comfortaa',cursive}
.auth-form-panel .auth-switch-link:hover{color:#000}
.auth-back-link{margin-top:16px;font-family:'Comfortaa',cursive;font-size:12px;color:#999;cursor:pointer;text-decoration:underline}
.auth-back-link:hover{color:#000}
.privacy-policy p{font-size:clamp(14px, 3vw, 16px);line-height:1.6;margin-bottom:15px;padding:0 10px}
footer{background:#fff;color:#111;padding:40px 20px 30px;text-align:center;border-top:1px solid #eee}
.footer-container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:25px}
.footer-columns{display:flex;flex-wrap:wrap;justify-content:center;gap:50px;width:100%}
.footer-col{display:flex;flex-direction:column;gap:12px;min-width:120px}
.footer-col h4{font-family:Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#111;margin-bottom:6px;border-bottom:2px solid #111;padding-bottom:8px}
.footer-col a{font-family:Arial,sans-serif;color:#555;text-decoration:none;font-size:14px;transition:color .2s ease}
.footer-col a:hover{color:#C9A84C}
.social-icons{display:flex;justify-content:center;gap:15px;margin:20px 0;flex-wrap:wrap}
.social-icons a{display:flex;justify-content:center;align-items:center}
.social-icons img{width:clamp(30px,8vw,50px);height:auto;transition:all .3s ease;filter:grayscale(20%)}
.social-icons img:hover{transform:scale(1.2);filter:grayscale(0)}
.footer-container p{font-size:13px;color:#999;margin-top:5px;letter-spacing:.5px;font-family:Arial,sans-serif}
@media(max-width:480px){.logo-img{height:30px}.logo-container{gap:5px}}
@media(min-width:768px){.icon-container{order:initial}}
@media(max-width:768px){.header-container{justify-content:center;gap:15px}nav{order:3;width:100%;margin-top:10px}.icon-container{order:2;margin-left:auto}}
@media(max-width:480px){.product-card{padding:10px}.product-card img{max-width:150px}.cart-content{padding:15px}}
.toast{
  visibility:hidden;min-width:220px;max-width:90vw;
  background:#fff;color:#111;
  text-align:center;border-radius:16px;
  padding:18px 26px;position:fixed;z-index:4000;left:50%;bottom:40px;
  font-family:'Comfortaa',cursive;
  font-size:clamp(13px, 3vw, 16px);
  transform:translateX(-50%) translateY(40px);opacity:0;
  transition:opacity .4s,transform .4s;
  box-shadow:0 10px 30px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.1);
  border:1px solid #f0e5c8;
  border-top:3px solid #C9A84C;
}
.toast.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.toast{padding:10px 8px;font-size:clamp(12px, 5vw, 16px);bottom:20px}}
.logout-btn{margin-left:10px;font-size:12px;padding:4px 14px;border-radius:20px;background:#fff;color:#000;border:none;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s;box-shadow:0 2px 6px rgba(0,0,0,.08);font-weight:500;outline:0}
.logout-btn:hover{background:#3d3d3d;color:#fff}
.toast-copy-btn{margin-left:12px;padding:5px 16px;border-radius:20px;background:#111;color:#fff;border:none;cursor:pointer;font-family:'Comfortaa',cursive;font-size:clamp(12px, 3vw, 14px);font-weight:700;transition:background .3s;outline:0;display:inline-block}
.toast-copy-btn:hover{background:#C9A84C;color:#000}
@media(max-width:600px){.toast-copy-btn{padding:4px 10px;font-size:clamp(11px, 4vw, 14px)}}

/* SCROLLING TICKER */
.ticker-wrap{
width:100%;
background:#c9a84c;
padding:12px 0;
overflow:hidden;
border-top:1px solid #b8973a;
border-bottom:1px solid #b8973a;
}
.ticker{
display:flex;
width:max-content;
animation:ticker-scroll 55s linear infinite;
}
.ticker:hover{animation-play-state:paused;}
.ticker-item{
white-space:nowrap;
padding:0 30px;
font-size:clamp(11px, 2vw, 14px);
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
color:#000;
}
.ticker-dot{
color:#000;
font-size:10px;
align-self:center;
}
  
@keyframes ticker-scroll{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
 /* DISCOUNT STYLES */
.product-card .badge-10{
  display:inline-block;
  background:#e74c3c;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:6px;
  letter-spacing:1px;
}
.product-card .price-original{
  font-size:13px;
  color:#999;
  text-decoration:line-through;
  margin-bottom:2px;
}
.product-card .price-discounted{
  font-size:17px;
  color:#e74c3c;
  font-weight:700;
  margin-bottom:10px;
}

  /* BADGE STYLES */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
}
.badge-bestseller { background: #C9A84C; color: #0a0a0a; }
.badge-popular    { background: #1a1a1a; color: #fff; border: 1px solid #555; }
.badge-new        { background: #fff; color: #000; border: 1px solid #C9A84C; }

.product-card{cursor:pointer}
.product-description{
  max-height:0;
  overflow:hidden;
  text-align:left;
  transition:max-height .4s ease, margin-top .4s ease, padding .4s ease;
  margin-top:0;
  padding:0 5px;
  border-top:1px solid #eee;
}
.product-description.open{
  max-height:600px;
  margin-top:12px;
  padding:12px 5px 5px;
}

.product-size-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  margin-bottom:18px;
}
.product-size-label{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#fff;
  background:#000;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
  white-space:nowrap;
}
  
.product-description h4{
  font-size:14px;
  margin:8px 0 4px;
  color:#000;
  border-bottom:1px solid #eee;
  padding-bottom:3px;
}
.product-description p{
  font-size:13px;
  color:#555;
  margin:3px 0;
  line-height:1.4;
}


/* ============================================================
   ✅ INTRO ANIMATION STYLES (bottle drop / cap fall / spray / blur wipe)
   ============================================================ */
#intro-overlay{
  position:fixed;inset:0;
  background:radial-gradient(circle at 50% 40%, #1a1a1a 0%, #000 70%);
  display:flex;align-items:center;justify-content:center;
  z-index:99999;
  transition:opacity .6s ease;
}
#intro-overlay.fade-out{opacity:0;pointer-events:none}

#stage-scaler{
  width:300px;height:400px;
  transform-origin:center center;
  position:relative;
}
.intro-stage{position:relative;width:300px;height:400px}

#gate-screen{
position:fixed;inset:0;z-index:100000;
background:#000;
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;
transition:opacity .4s ease;
overflow:hidden;
overscroll-behavior:none;
touch-action:none;
}
body.gate-open{overflow:hidden !important;height:100%;}
#gate-screen.gone{opacity:0;pointer-events:none}
#gate-screen .gate-title{font-family:'Comfortaa', cursive;color:#fff;font-size:clamp(18px,5vw,26px);text-transform:none;letter-spacing:2px;margin-bottom:14px}
#gate-screen .gate-sub{font-size:clamp(11px,3vw,13px);color:#888;letter-spacing:1px}

#bottle-group{
  position:absolute;left:50%;top:-200px;
  transform:translateX(-50%);
  animation:dropBottle 1s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-play-state:paused;
}
@keyframes dropBottle{
  0%{top:-200px;transform:translateX(-50%) rotate(-8deg)}
  70%{top:150px;transform:translateX(-50%) rotate(3deg)}
  85%{top:130px;transform:translateX(-50%) rotate(-2deg)}
  100%{top:140px;transform:translateX(-50%) rotate(0deg)}
}

#cap{
  position:absolute;top:-6px;left:50%;
  transform:translateX(-50%);
  transform-origin:center bottom;
  animation:capFall 1s ease-in forwards;
  animation-delay:1.05s;
  animation-play-state:paused;
  opacity:1;
}
@keyframes capFall{
  0%{top:-6px;transform:translateX(-50%) rotate(0deg);opacity:1}
  25%{top:-40px;transform:translateX(-50%) rotate(40deg);opacity:1}
  100%{top:260px;left:calc(50% + 90px);transform:translateX(-50%) rotate(340deg);opacity:1}
}

.spray-puff{
  position:absolute;
  top:8px;left:50%;
  width:10px;height:10px;
  background:radial-gradient(circle,#fff 0%,#c9a84c66 60%,transparent 80%);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,0) scale(.3);
  animation-play-state:paused;
}
.spray-puff.p1{animation:puff .7s ease-out forwards;animation-delay:1.9s;animation-play-state:paused}
.spray-puff.p2{animation:puff .7s ease-out forwards;animation-delay:2.05s;left:calc(50% + 10px);animation-play-state:paused}
.spray-puff.p3{animation:puff .7s ease-out forwards;animation-delay:2.2s;left:calc(50% - 8px);animation-play-state:paused}
@keyframes puff{
  0%{opacity:0;transform:translate(-50%,0) scale(.3)}
  30%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-70px) scale(2.6)}
}

#blur-wipe{
  position:absolute;inset:-50vw;
  border-radius:50%;
  background:#fff;
  filter:blur(40px);
  transform:scale(0);
  opacity:0;
  animation:blurWipe .9s ease-in forwards;
  animation-delay:2.4s;
  animation-play-state:paused;
}
@keyframes blurWipe{
  0%{transform:scale(0);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ============================================================
✅ RECEIPT PRINTER ANIMATION — Order Confirmation
============================================================ */
#receipt-printer-overlay{
  position:fixed;inset:0;z-index:99998;
  background:rgba(255,255,255,0.98);
  display:none;
  align-items:flex-start;justify-content:center;
  overflow-y:auto;
  padding:30px 15px 60px;
  transition:opacity .5s ease;
}
#receipt-printer-overlay.active{display:flex;opacity:1}
#receipt-printer-overlay.fade-out{opacity:0;pointer-events:none}

.receipt-stage{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:420px;position:relative;
  padding-bottom:40px;
}

/* Metallic Gold Machine Unit */
.receipt-machine-unit{
  width:100%;max-width:400px;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  z-index:30;
}
.receipt-machine-hood-top{
  width:100%;height:46px;
  border-radius:16px 16px 4px 4px;
  background:linear-gradient(180deg,#fff 0%,#fbf4e8 15%,#e9cf9f 45%,#d19e54 75%,#b37f35 100%);
  box-shadow:0 -2px 6px rgba(255,255,255,.9),0 10px 20px rgba(179,127,53,.28),inset 0 2px 2px rgba(255,255,255,.9),inset 0 -2px 4px rgba(105,68,16,.45);
  position:relative;overflow:hidden;z-index:25;
}
.receipt-hood-highlight{
  position:absolute;top:3px;left:5%;width:90%;height:6px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  border-radius:999px;filter:blur(1px);
}
.receipt-machine-slit{
  width:87%;height:12px;margin-top:-6px;
  background:#0f0a03;border-radius:2px;
  box-shadow:inset 0 6px 12px rgba(25,12,2,.95),inset 0 -1px 2px rgba(255,255,255,.2);
  position:relative;z-index:5;
}
.receipt-cutter-flash{
  position:absolute;top:42px;left:50%;transform:translateX(-50%);
  width:87%;height:3px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 50%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 10px #fff;z-index:35;opacity:0;pointer-events:none;
}
.receipt-cutter-flash.active{animation:cutterFlash .35s ease-out forwards}
@keyframes cutterFlash{
  0%{opacity:0;transform:translateX(-50%) scaleX(.1)}
  50%{opacity:1;transform:translateX(-50%) scaleX(1)}
  100%{opacity:0;transform:translateX(-50%) scaleX(1)}
}
.receipt-machine-bottom{
  width:100%;height:14px;margin-top:-4px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#9e6d2b 0%,#d8b478 40%,#fff7ea 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  position:relative;z-index:10;
}

/* Paper Viewport */
.receipt-paper-viewport{
  position:absolute;top:41px;left:50%;transform:translateX(-50%);
  width:95%;
  clip-path:inset(0 -60px -1200px -60px);
  z-index:8;pointer-events:none;
  filter:drop-shadow(0 18px 36px rgba(20,15,5,.16)) drop-shadow(0 4px 12px rgba(20,15,5,.08));
}

/* Receipt Paper */
.receipt-paper-wrap{
  width:90%;margin:0 auto;
  background:#fafaf8;
  position:relative;
  transform-origin:top center;
  transform-style:preserve-3d;
  transition:transform 2.5s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
  user-select:none;pointer-events:auto;
  clip-path:polygon(
    0% 0%, 100% 0%, 100% calc(100% - 10px),
    98.33% 100%, 96.67% calc(100% - 10px), 95% 100%, 93.33% calc(100% - 10px),
    91.67% 100%, 90% calc(100% - 10px), 88.33% 100%, 86.67% calc(100% - 10px),
    85% 100%, 83.33% calc(100% - 10px), 81.67% 100%, 80% calc(100% - 10px),
    78.33% 100%, 76.67% calc(100% - 10px), 75% 100%, 73.33% calc(100% - 10px),
    71.67% 100%, 70% calc(100% - 10px), 68.33% 100%, 66.67% calc(100% - 10px),
    65% 100%, 63.33% calc(100% - 10px), 61.67% 100%, 60% calc(100% - 10px),
    58.33% 100%, 56.67% calc(100% - 10px), 55% 100%, 53.33% calc(100% - 10px),
    51.67% 100%, 50% calc(100% - 10px), 48.33% 100%, 46.67% calc(100% - 10px),
    45% 100%, 43.33% calc(100% - 10px), 41.67% 100%, 40% calc(100% - 10px),
    38.33% 100%, 36.67% calc(100% - 10px), 35% 100%, 33.33% calc(100% - 10px),
    31.67% 100%, 30% calc(100% - 10px), 28.33% 100%, 26.67% calc(100% - 10px),
    25% 100%, 23.33% calc(100% - 10px), 21.67% 100%, 20% calc(100% - 10px),
    18.33% 100%, 16.67% calc(100% - 10px), 15% 100%, 13.33% calc(100% - 10px),
    11.67% 100%, 10% calc(100% - 10px), 8.33% 100%, 6.67% calc(100% - 10px),
    5% 100%, 3.33% calc(100% - 10px), 1.67% 100%, 0% calc(100% - 10px)
  );
}
.receipt-paper-wrap.retracted{transform:translateY(-93%) rotateX(-16deg) translateZ(-25px)}
.receipt-paper-wrap.printed{transform:translateY(0) rotateX(0) translateZ(0)}
.receipt-paper-wrap.printing-smooth{animation:receiptPrintSmooth 2.5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes receiptPrintSmooth{
  0%{transform:translateY(-93%) rotateX(-18deg) translateZ(-30px) scale(.97);opacity:.4}
  20%{transform:translateY(-70%) rotateX(-12deg) translateZ(20px) scale(.985);opacity:.85}
  45%{transform:translateY(-40%) rotateX(-6deg) translateZ(26px) scale(.995);opacity:1}
  75%{transform:translateY(-12%) rotateX(-2deg) translateZ(10px) scale(1)}
  100%{transform:translateY(0) rotateX(0) translateZ(0) scale(1);opacity:1}
}
.receipt-paper-wrap.tearing{
  animation:receiptTearAway 1.3s cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events:none;transform-origin:top right;
}
@keyframes receiptTearAway{
  0%{transform:translateY(0) translateX(0) rotate(0);opacity:1}
  20%{transform:translateY(6px) translateX(18px) rotate(-3deg);opacity:1}
  50%{transform:translateY(14px) translateX(55px) rotate(-8deg) scale(.98);opacity:.8}
  100%{transform:translateY(22px) translateX(110px) rotate(-14deg) scale(.94);opacity:0}
}

/* Receipt Content Styling */
.receipt-body{
  padding:1.5rem 1.3rem 2rem;
  font-family:'Courier New',monospace;
  color:#222;
}
.receipt-header-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:1rem;gap:10px;
}
.receipt-brand-info{flex:1}
.receipt-brand-name{
  font-size:1rem;font-weight:800;letter-spacing:.05em;color:#111;
  margin-bottom:2px;
}
.receipt-receipt-title{font-size:.7rem;color:#555;letter-spacing:.04em}
.receipt-logo-stamp{
  width:44px;height:44px;border-radius:8px;overflow:hidden;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.receipt-logo-stamp img{width:100%;height:100%;object-fit:contain}

.receipt-amount-block{margin-bottom:1rem;text-align:center}
.receipt-total-amount{
  font-size:1.8rem;font-weight:700;color:#111;
  letter-spacing:-.02em;line-height:1.1;margin-bottom:.2rem;
}
.receipt-meta-line{
  font-size:.65rem;color:#888;letter-spacing:.04em;
  text-transform:uppercase;
}
.receipt-divider{
  width:100%;border-bottom:1px dashed #ccc;margin:.8rem 0;
}
.receipt-customer-info{
  font-size:.72rem;color:#555;line-height:1.5;margin-bottom:.3rem;
}
.receipt-items-list{display:flex;flex-direction:column;gap:.5rem}
.receipt-item-line{
  display:flex;justify-content:space-between;
  font-size:.76rem;color:#333;
}
.receipt-item-line .item-name-r{flex:1;color:#333}
.receipt-item-line .item-price-r{font-weight:600;color:#222}
.receipt-totals-block{display:flex;flex-direction:column;gap:.35rem;font-size:.76rem}
.receipt-total-line{display:flex;justify-content:space-between;color:#777}
.receipt-grand-total-line{
  display:flex;justify-content:space-between;
  margin-top:.5rem;padding-top:.5rem;
  border-top:1px solid #ccc;
  font-weight:700;font-size:.85rem;color:#111;
}
.receipt-footer-block{
  text-align:center;margin-top:.9rem;padding-top:.5rem;
}
.receipt-thanks{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;
  color:#555;margin-bottom:.6rem;
}
.receipt-barcode{
  width:75%;height:28px;margin:0 auto .15rem;
  background:repeating-linear-gradient(90deg,
    #222 0,#222 1.5px,transparent 1.5px,transparent 3px,
    #222 3px,#222 4px,transparent 4px,transparent 5.5px,
    #222 5.5px,#222 8px,transparent 8px,transparent 9.5px);
}
.receipt-barcode-num{
  font-size:.52rem;color:#888;letter-spacing:.14em;
}

/* Status & Action Buttons */
.receipt-status-section{
  margin-top:2rem;text-align:center;z-index:40;
  transition:margin-top .6s cubic-bezier(.16,1,.3,1);
}
  
.receipt-status-title{
  font-family:'Comfortaa',cursive;
  font-size:1.4rem;font-weight:700;color:#2b2219;
  letter-spacing:-.02em;margin-bottom:.25rem;
}
.receipt-status-sub{
  font-family:'Comfortaa',cursive;
  font-size:.85rem;color:#827566;margin-bottom:1.2rem;
}
.receipt-action-bar{
  display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
}
.receipt-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:25px;
  font-family:'Comfortaa',cursive;font-weight:700;
  font-size:.88rem;cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  border:none;
}
.receipt-btn-primary{
  background:#111;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.receipt-btn-primary:hover{background:#000;transform:translateY(-2px)}
.receipt-btn-secondary{
  background:#fff;color:#111;border:1px solid #d9ccb8;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.receipt-btn-secondary:hover{background:#f4eee4;transform:translateY(-2px)}
.receipt-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.receipt-btn svg{flex-shrink:0}

@media(max-width:480px){
  .receipt-machine-unit{max-width:340px}
  .receipt-total-amount{font-size:1.5rem}
  .receipt-brand-name{font-size:.9rem}
  .receipt-btn{padding:.65rem 1rem;font-size:.8rem}
}


/* ===== PAYMENT METHOD SELECTOR ===== */
.payment-method-group{margin:15px 0;text-align:left;width:100%;box-sizing:border-box}
.payment-method-group label.pm-title{display:block;font-weight:bold;margin-bottom:8px;font-size:clamp(13px,3vw,15px)}
.pm-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #ddd;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s;width:100%;box-sizing:border-box}
.pm-option:hover{border-color:#000}
.pm-option.selected{border-color:#000;background:#f5f5f5}
.pm-option input[type="radio"]{width:auto !important;flex-shrink:0;margin:0}
.pm-option span{flex:1;font-size:clamp(13px,3vw,15px);word-break:normal;overflow-wrap:break-word}
.pm-details{display:none;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:12px;margin:-4px 0 10px;font-size:clamp(12px,2.8vw,14px);line-height:1.6;width:100%;box-sizing:border-box;overflow-wrap:break-word;word-break:break-all}
.pm-details.show{display:block}
.pm-details strong{display:block;margin-bottom:4px;word-break:normal}
.pm-details input{margin-top:8px;width:100%;box-sizing:border-box;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:clamp(12px,2.8vw,14px)}
.pm-card-notice{background:#fff3cd;border:1px solid #ffe08a;border-radius:8px;padding:10px 12px;font-size:clamp(11px,2.6vw,13px);color:#7a5c00;margin:-4px 0 10px;word-break:break-word}

/* ===== FLOATING SIDEBAR NAV ===== */

#sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:4000;
}
#sidebar-overlay.active{display:block}

#side-nav{
  position:fixed;
  top:0;left:-280px;
  width:260px;height:100%;
  background:#fff;
  z-index:4001;
  padding:30px 24px;
  transition:left .35s ease;
  box-shadow:4px 0 20px rgba(0,0,0,.15);
  overflow-y:auto;
}
#side-nav.open{left:0}

.sidebar-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;
  color:#111;font-size:26px;
  cursor:pointer;
}
.sidebar-logo{
  font-family:Arial,sans-serif;
  color:#111;
  font-size:20px;
  letter-spacing:1px;
  margin-bottom:36px;
  margin-top:10px;
  font-weight:700;
}
.sidebar-links{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.sidebar-links a{
  color:#333;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:color .2s ease;
  font-family:Arial,sans-serif;
  white-space:normal;
  line-height:1.4;
  display:block;
}
.sidebar-links a:hover{color:#C9A84C}

.category-highlight{padding:20px 15px 40px;max-width:1200px;margin:0 auto}
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:769px){
  .category-grid{grid-template-columns:repeat(4,1fr)}
}
.category-card{cursor:pointer;text-align:center;transition:transform .3s}
.category-card:hover{transform:translateY(-4px)}
.category-img-wrap{width:100%;aspect-ratio:1/1;background:#f5f5f5;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.category-img-wrap img{width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .4s ease}
  
.category-label{margin-top:10px;font-family:'Open Sans',Arial,sans-serif;font-weight:700;font-size:clamp(12px,3vw,16px);color:#111;text-transform:uppercase;letter-spacing:1px}

.category-disabled{cursor:default}
.category-disabled:hover{transform:none}
.coming-soon-box{background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center}
.coming-soon-text{color:#111;font-family:Arial,sans-serif;font-size:clamp(13px,3vw,17px);letter-spacing:1px;text-transform:uppercase}
.sidebar-accordion{display:flex;flex-direction:column}
.sidebar-accordion-toggle{background:none;border:none;color:#333;font-size:15px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;font-family:Arial,sans-serif}
.sidebar-submenu{display:none;flex-direction:column;gap:14px;margin-top:14px;padding-left:14px;border-left:1px solid #ddd}
.sidebar-submenu.open{display:flex}
.sidebar-submenu a{font-size:13px !important;text-transform:none !important;letter-spacing:0 !important;color:#666 !important}

.contact-us-section h2{margin-bottom:20px}
.contact-form-wrap{max-width:500px;margin:0 auto;background:#fff;padding:25px;border-radius:15px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.contact-form-wrap input,.contact-form-wrap textarea{width:100%;padding:12px;margin-bottom:14px;border:1px solid #ccc;border-radius:8px;font-size:clamp(14px,3vw,16px);font-family:Arial,sans-serif;box-sizing:border-box}
.contact-form-wrap textarea{resize:vertical}
.contact-form-wrap button{width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:clamp(14px,3vw,16px);transition:background .3s ease}
.contact-form-wrap button:hover{background:#3d3d3d}


 .loyalty-form-wrap,.loyalty-lookup{max-width:420px;margin:0 auto 30px;background:#fff;padding:22px;border-radius:15px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.loyalty-form-wrap input,.loyalty-lookup input{width:100%;padding:12px;margin-bottom:14px;border:1px solid #ccc;border-radius:8px;font-size:clamp(14px,3vw,16px);font-family:Arial,sans-serif;box-sizing:border-box}
.loyalty-form-wrap button,.loyalty-lookup button{width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:clamp(14px,3vw,16px)}
.loyalty-lookup{text-align:center}
.loyalty-lookup p{margin-bottom:10px;color:#555;font-size:14px}

/* ============================================================
   ✅ FLIP LOYALTY CARD
   ============================================================ */
.lc-flip-wrap{max-width:380px;margin:0 auto 16px;perspective:1200px}
.lc-flip-card{
  position:relative;width:100%;aspect-ratio:1.586/1;
  cursor:pointer;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
}
.lc-flip-card.flipped{transform:rotateY(180deg)}
.lc-face{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,.25), 0 5px 15px rgba(0,0,0,.15);
}
/* INFO FACE — shown after flip: Name + Ticks */
.lc-face-info{
  transform:rotateY(180deg);
  background:linear-gradient(135deg,#000 60%,#3d3d3d);
  display:flex;align-items:center;
}
.lc-info-inner{padding:20px 24px;width:100%}
.lc-name-label{font-family:'Comfortaa',cursive;font-size:10px;letter-spacing:3px;color:#C9A84C;text-transform:uppercase;margin-bottom:6px}
.lc-name-value{
  background:transparent;color:#fff;font-family:'Comfortaa',cursive;font-weight:300;
  padding:0;font-size:clamp(18px,4.5vw,24px);
  margin-bottom:14px;
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lc-ticks-row{display:flex;gap:8px;margin-bottom:10px}
.lc-tick{
  width:28px;height:28px;border-radius:50%;border:2px solid #C9A84C;
  display:flex;align-items:center;justify-content:center;
  font-family:'Comfortaa',cursive;font-size:8px;font-weight:700;color:#C9A84C;
  background:rgba(255,255,255,.04);
  box-shadow:0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  flex-shrink:0;
}
.lc-tick.filled{background:linear-gradient(135deg,#C9A84C,#e8d5a0);color:#000}
.lc-tick.reward{background:linear-gradient(135deg,#ffd76a,#C9A84C);color:#000;border-color:#fff;box-shadow:0 0 10px rgba(201,168,76,.6)}
.lc-tagline{font-family:'Comfortaa',cursive;font-size:11px;color:#e8d5a0;letter-spacing:.5px;margin-top:2px}
.lc-expiry-small{font-family:'Comfortaa',cursive;font-size:10px;color:#999;margin-top:5px}
.lc-expired-badge{background:#e74c3c;color:#fff;font-size:9px;padding:2px 8px;border-radius:10px;margin-left:6px}
/* BRAND FACE — default visible (before flip): FRAGMAT ERA branding */
.lc-face-brand{
  transform:rotateY(0deg);
  background:linear-gradient(180deg,#fdfaf3 0%,#f3ecd9 55%);
  display:flex;flex-direction:column;
}
.lc-face-brand::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:42%;
  background:#0d0d0d;border-radius:50% 50% 0 0 / 60px 60px 0 0;
  box-shadow:0 -3px 0 #C9A84C;
}
.lc-brand-inner{padding:26px 22px 0;position:relative;z-index:2;text-align:center}
.lc-brand-title{font-family:'Comfortaa',cursive;font-weight:700;font-size:clamp(19px,5vw,25px);letter-spacing:2px;color:#8a6d2f;text-transform:uppercase}
.lc-brand-line{width:60px;height:2px;background:#C9A84C;margin:10px auto}
.lc-brand-sub{font-family:'Comfortaa',cursive;font-size:12px;color:#b8973a;letter-spacing:1px}
.lc-flip-hint{text-align:center;font-family:'Comfortaa',cursive;font-size:11px;color:#999;margin-top:10px}
.lc-back-link{text-align:center;font-family:'Comfortaa',cursive;font-size:13px;color:#C9A84C;margin-top:14px;cursor:pointer;text-decoration:underline}
.lc-expired-badge{display:inline-block;background:#e74c3c;color:#fff;font-size:11px;padding:3px 10px;border-radius:12px;margin-left:8px}

.reward-select-wrap{background:#fff3cd;border:1px solid #ffe08a;border-radius:8px;padding:12px;margin:10px 0;font-size:13px}
.reward-select-wrap label{display:block;margin-bottom:6px;font-weight:bold}
.reward-select-wrap .reward-item-option{display:flex;align-items:center;gap:8px;margin-bottom:6px} 
.reward-item-option input[type="radio"]{width:auto !important;flex-shrink:0;margin:0}
.reward-item-option span{flex:1;font-family:Arial,sans-serif;font-size:13px;word-break:normal;overflow-wrap:break-word}

.header-text-logo{
  font-family:'Comfortaa', cursive !important;
  font-weight:300;
  font-size:clamp(20px,4.5vw,30px);
  letter-spacing:1px;
  color:#111;
  display:inline-block;
}
.header-text-logo .letter{
  font-family:'Comfortaa', cursive;
  display:inline-block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.header-text-logo .letter.show{
  opacity:1;
  transform:translateY(0);
} 

/* ============================================================
   ✅ GLOBAL 3D WHITE BUTTONS (Comfortaa font)
   ============================================================ */
.product-card button,
.order-review-form button,
.review-form button,
.review-controls button,
.cart-content button.checkout,
.cart-content button.close,
.login-modal .login-btn,
.contact-form-wrap button,
.loyalty-form-wrap button,
.loyalty-lookup button,
.shop-now,
#hero-shop-btn,
#checkout-form .checkout {
  font-family:'Comfortaa', cursive !important;
  background:#fff !important;
  color:#000 !important;
  border:1px solid #e2e2e2 !important;
  box-shadow:0 4px 0 #d8d8d8, 0 6px 12px rgba(0,0,0,.12) !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
}
.product-card button:hover,
.order-review-form button:hover,
.review-form button:hover,
.review-controls button:hover,
.cart-content button.checkout:hover,
.cart-content button.close:hover,
.login-modal .login-btn:hover,
.contact-form-wrap button:hover,
.loyalty-form-wrap button:hover,
.loyalty-lookup button:hover,
.shop-now:hover,
#hero-shop-btn:hover,
#checkout-form .checkout:hover {
  background:#fafafa !important;
  color:#000 !important;
  transform:translateY(-1px);
  box-shadow:0 5px 0 #d8d8d8, 0 8px 14px rgba(0,0,0,.15) !important;
}
.product-card button:active,
.order-review-form button:active,
.review-form button:active,
.review-controls button:active,
.cart-content button.checkout:active,
.cart-content button.close:active,
.login-modal .login-btn:active,
.contact-form-wrap button:active,
.loyalty-form-wrap button:active,
.loyalty-lookup button:active,
.shop-now:active,
#hero-shop-btn:active,
#checkout-form .checkout:active {
  transform:translateY(3px);
  box-shadow:0 1px 0 #d8d8d8, 0 2px 4px rgba(0,0,0,.12) !important;
}
.product-card button.added{
  background:#fff !important;
  color:#2e7d4f !important;
  border-color:#2e7d4f !important;
  box-shadow:0 4px 0 #d8d8d8, 0 6px 12px rgba(0,0,0,.12) !important;
} 

  

.auth-switch-link{margin-top:12px;text-align:center;color:#666;font-size:13px;cursor:pointer;text-decoration:underline}
.auth-switch-link:hover{color:#000}
.auth-subtitle{font-size:13px;color:#666;margin-bottom:14px;text-align:center}
   
/* ============================================================
   ✅ CHECKOUT PAGE — premium redesign
   ============================================================ */
.checkout-page-section{background:#fafafa;padding-top:30px;padding-bottom:60px}
.checkout-page-section h2{font-family:'Comfortaa',cursive;font-weight:700}
.checkout-page-wrap{max-width:600px;margin:0 auto;padding:0 15px}

.checkout-summary-box{
  background:#fff;border-radius:16px;padding:20px 22px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  font-family:Arial,sans-serif;
  border:1px solid #f0f0f0;
  margin-bottom:24px;
}
.checkout-summary-box::before{content:'Order Summary';display:block;font-family:'Comfortaa',cursive;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#C9A84C;margin-bottom:14px}
.checkout-summary-item{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:14px;border-bottom:1px solid #f5f5f5;color:#333}
.checkout-summary-total{margin-top:12px;padding-top:14px;border-top:2px solid #111;font-size:14px;line-height:2}
.checkout-summary-total strong{font-size:17px}

#checkout-form{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(0,0,0,.06);border:1px solid #f0f0f0}
#checkout-form input:not([type="radio"]):not([type="checkbox"]){
  width:100%;padding:13px 14px;margin:0 0 14px;
  border:1px solid #ddd;border-radius:10px;
  font-size:15px;font-family:Arial,sans-serif;
  box-sizing:border-box;
  transition:border-color .2s ease;
}
#checkout-form input[type="radio"]{width:auto !important;flex-shrink:0;margin:0 !important}
#checkout-form .checkout{
  width:100%;
  padding:12px;
  border-radius:25px;
  cursor:pointer;
  font-size:clamp(14px,3vw,18px);
  margin-top:10px;
  font-family:'Comfortaa',cursive;
  font-weight:700;
  letter-spacing:.5px;
}

  .reward-item-option input[type="radio"]{
  width:auto !important;
  flex-shrink:0;
  margin:0 !important;
}
.reward-item-option{
  display:flex;
  align-items:center;
  gap:8px;
}
.reward-item-option span{
  flex:1;
  font-family:Arial,sans-serif;
}
  
.acp-wrap {
  position: relative;
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.acp-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.acp-btn {
  position: relative; width: 250px; height: 66px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px;
  cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #202733, #12161e);
  box-shadow: 0 12px 30px rgba(4, 8, 16, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.108s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.136s ease, box-shadow 0.169s ease;
}
.acp-idle {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 9px; color: #edf1f7; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  opacity: 1; transform: none;
  transition: opacity 0.163s ease, transform 0.176s ease;
}
.is-playing .acp-idle, .is-rm-done .acp-idle {
  opacity: 0; transform: translateY(-9px);
  transition: opacity 0.136s ease, transform 0.176s ease;
}
.acp-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.is-playing .acp-scene { opacity: 1; transition: opacity 0.136s ease 0.054s; }
.acp-belt {
  position: absolute; left: 12px; right: 58px; bottom: 14px; height: 7px; border-radius: 4px;
  background: #0b0e14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 6px rgba(0, 0, 0, 0.4);
  overflow: hidden; opacity: 0; transform: translateY(12px);
}
.s-enter .acp-belt {
  opacity: 1; transform: none;
  transition: opacity 0.176s ease, transform 0.231s cubic-bezier(0.22, 1, 0.36, 1);
}
.acp-tread {
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 200%;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.16) 9px 12px);
  will-change: transform; animation: acp-roll 0.108s linear infinite; animation-play-state: paused;
}
.belt-run .acp-tread { animation-play-state: running; }
.acp-scanner {
  position: absolute; left: 81px; top: 0; width: 30px; height: 20px; z-index: 4;
  opacity: 0; transform: translateY(-16px);
}
.s-enter .acp-scanner {
  opacity: 1; transform: none;
  transition: opacity 0.203s ease 0.081s, transform 0.285s cubic-bezier(0.34, 1.3, 0.64, 1) 0.081s;
}
.acp-scan-mount { position: absolute; top: 0; left: 12px; width: 6px; height: 5px; background: #2c3442; border-radius: 0 0 2px 2px; }
.acp-scan-head {
  position: absolute; top: 4px; left: 2px; width: 26px; height: 9px; border-radius: 4px;
  background: linear-gradient(180deg, #39424f, #232a35);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.169s ease;
}
.s-scan .acp-scan-head { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), 0 5px 12px rgba(255, 86, 96, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.acp-scan-led { position: absolute; top: 7px; left: 6px; width: 3px; height: 3px; border-radius: 50%; background: #ffb454; opacity: 0.85; }
.acp-blink { position: absolute; top: 7px; right: 6px; width: 3px; height: 3px; border-radius: 50%; background: #3a4453; }
.s-scan .acp-blink { animation: acp-blink 0.271s ease 0.312s both; }
.acp-laser {
  position: absolute; left: 87px; top: 13px; width: 2px; height: 29px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 86, 96, 0.95), rgba(255, 86, 96, 0.35));
  box-shadow: 0 0 6px rgba(255, 86, 96, 0.8); opacity: 0; z-index: 3; will-change: transform, opacity;
}
.s-scan .acp-laser { animation: acp-sweep 0.407s cubic-bezier(0.45, 0.05, 0.55, 0.95) both; }
.acp-box {
  position: absolute; left: 0; bottom: 21px; width: 24px; height: 19px; z-index: 2;
  transform: translateX(-34px); will-change: transform; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}
.s-enter .acp-box { transform: translateX(84px); transition: transform 0.692s cubic-bezier(0.3, 0.5, 0.25, 1) 0.122s; }
.s-ship .acp-box { animation: acp-ship 0.542s forwards; }
.acp-face { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #cf9a60, #b5824c); box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.acp-barcode { position: absolute; left: 3px; bottom: 3px; width: 11px; height: 7px; border-radius: 1px; background: #e9dfcf; overflow: hidden; }
.acp-flap { position: absolute; top: -3px; width: 12px; height: 3px; background: linear-gradient(180deg, #dca86c, #c08b52); border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.acp-flap-l { left: 0; transform-origin: 0 100%; transform: rotate(-64deg); }
.acp-flap-r { right: 0; transform-origin: 100% 100%; transform: rotate(64deg); }
.s-fold .acp-flap-l { transform: rotate(0deg); transition: transform 0.203s cubic-bezier(0.34, 1.4, 0.64, 1) 0.034s; }
.s-fold .acp-flap-r { transform: rotate(0deg); transition: transform 0.203s cubic-bezier(0.34, 1.4, 0.64, 1) 0.136s; }
.acp-tape {
  position: absolute; top: -4px; left: 1px; right: 1px; height: 4px;
  background: linear-gradient(180deg, #ffc06a, #f2a94e); border-radius: 1px;
  transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.s-fold .acp-tape { transform: scaleX(1); transition: transform 0.203s cubic-bezier(0.25, 0.8, 0.3, 1) 0.353s; }
.acp-slabel { position: absolute; top: 5px; right: 3px; width: 8px; height: 6px; background: #f2f4f7; border-radius: 1px; transform: scale(0); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.06); }
.s-fold .acp-slabel { transform: scale(1); transition: transform 0.217s cubic-bezier(0.34, 1.56, 0.64, 1) 0.502s; }
.acp-flash { position: absolute; inset: -4px -1px 0 -1px; border-radius: 3px; background: rgba(255, 240, 220, 0.9); opacity: 0; pointer-events: none; }
.s-scan .acp-flash { animation: acp-flash 0.217s ease 0.203s both; }
.acp-cart { position: absolute; right: 12px; bottom: 6px; width: 40px; height: 38px; z-index: 5; transform: translateX(58px); will-change: transform; }
.s-fold .acp-cart { transform: translateX(0); transition: transform 0.339s cubic-bezier(0.22, 1.3, 0.36, 1) 0.203s; }
.s-ship .acp-cart { animation: acp-bump 0.285s cubic-bezier(0.36, 0.07, 0.3, 1) 0.447s both; }
.acp-badge {
  position: absolute; right: 8px; bottom: 44px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 9px; background: linear-gradient(180deg, #ffc571, #f5a844); color: #301d05;
  font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; z-index: 6;
  transform: scale(0); box-shadow: 0 3px 8px rgba(245, 168, 68, 0.4);
}
.s-ship .acp-badge { animation: acp-badge 0.339s cubic-bezier(0.34, 1.56, 0.64, 1) 0.556s forwards; }
.acp-done {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #e9f7ef; font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(6px); pointer-events: none;
}
.acp-check { width: 22px; height: 22px; flex: none; }
.acp-check-ring { stroke: #5adf9e; opacity: 0.35; }
.acp-check-path { stroke: #5adf9e; stroke-dasharray: 1; stroke-dashoffset: 1; }
.s-done .acp-done, .is-rm-done .acp-done {
  opacity: 1; transform: none;
  transition: opacity 0.19s ease 0.122s, transform 0.231s cubic-bezier(0.34, 1.3, 0.64, 1) 0.122s;
}
.s-done .acp-check-path { animation: acp-draw 0.217s cubic-bezier(0.25, 0.8, 0.3, 1) 0.271s forwards; }
.is-rm-done .acp-check-path { stroke-dashoffset: 0; }
.s-done .acp-scene { opacity: 0; transition: opacity 0.163s ease; }
.s-reset .acp-done { opacity: 0; transform: translateY(-6px); transition: opacity 0.149s ease, transform 0.149s ease; }
.s-reset .acp-idle { opacity: 1; transform: none; transition: opacity 0.176s ease 0.081s, transform 0.203s ease 0.081s; }

/* ---------- Reduced motion ---------- */


  /* ============================================================
   ✅ CONVEYOR PACK — white bg + Comfortaa adaptation, responsive sizing
   ============================================================ */
.acp-wrap{
  margin-top:auto;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  max-width:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  height:58px;
}
.product-card .acp-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:250px !important;
  max-width:none !important;
  font-size:15px !important;
  transform-origin:center;
  transform:scale(.72);
}
.product-card .acp-btn:hover,
.product-card .acp-btn:active,
.product-card .acp-btn:focus,
.product-card .acp-btn:focus-visible{
  transform:scale(.72) !important;
}
.acp-idle{
  font-family:'Comfortaa', cursive !important;
  color:#111 !important;
  font-weight:600 !important;
}
.acp-done{
  font-family:'Comfortaa', cursive !important;
  color:#2e7d4f !important;
}
.acp-check-ring{stroke:#2e7d4f !important}
.acp-check-path{stroke:#2e7d4f !important}

@media(min-width:480px){
  .acp-wrap{height:56px}
  .product-card .acp-btn{transform:scale(.85)}
}
@media(min-width:769px){
  .acp-wrap{height:66px}
  .product-card .acp-btn{transform:scale(1)}
}

@media(max-width:768px){
  .stacked-word-group, .hero-logo-drop, .category-grid{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }
}

.seo-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}