/* Local Khmer font to minimize swap */
@font-face{
  font-family: "Kantumruy";
  src: url("/minf/KantumruyPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}
@font-face{
  font-family: "Kantumruy";
  src: url("/minf/KantumruyPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}


/* Replace body’s background with this if you prefer SVG tiling */
body{
  background:
    #929292 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='2' fill='%23e5e7eb'/></svg>") 0 0/28px 28px;
}


/* Put this at the end of your CSS */
html, body { height: 100%; }

body{
  --dot-color: #5c5c5c;   /* light grey */
  --dot-size: 2px;        /* dot radius */
  --dot-gap: 28px;        /* distance between dots */

  background-color: #fff; /* page base */
  background-image: radial-gradient(circle,
                      var(--dot-color) var(--dot-size),
                      transparent calc(var(--dot-size) + 0.1px));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
}

/* optional darker theme */
@media (prefers-color-scheme: dark){
  body{
    background-color: #0b0b0b;
    --dot-color: rgba(255,255,255,.12);
  }
}


:root{
  --accent: #c760db;
  --accent-2: #c760db;
  --muted: #6b6f76;
  --bg: #ffffff;
  --surface: #ffffff;
  --radius: 12px;
  --max-width: 1200px; 
  --gutter: 16px;
  --text: #0b1220;
  --nav-h: 64px;
  font-size: clamp(14px, 1.8vw, 16px);
}


@font-face {
  font-family: "Kantumruy Pro";
  src: url("/minf/KantumruyPro-Regular.woff2") format("woff2"),
       url("/minf/KantumruyPro-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1780-17FF;
}
@font-face {
  font-family: "Kantumruy Pro";
  src: url("/minf/KantumruyPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1780-17FF;
}





*{ box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; -webkit-text-size-adjust:100%; }
body{
  margin:2px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: Inter, "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: url("pupebg.jpg") no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


.nav {
  position: fixed;
  top: 0;
  z-index: 120;
  width: 100%;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));
  border-bottom: 1px solid rgba(11,18,32,0.05);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}


nav.nav .nav-inner,
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px calc(var(--gutter) + env(safe-area-inset-left)) 10px calc(var(--gutter) + env(safe-area-inset-right));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height: var(--nav-h);
  padding-top: calc(12px + env(safe-area-inset-top));
}


@media (max-width: 430px){
.brand{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:45px; }
}
.brand{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:45px; }
.brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand:focus-visible .brand-gradient,
.brand:hover .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }


.nav-right{ display:flex; align-items:center; gap:12px; }


.cart .cart-btn,
nav.nav .cart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  position:relative;
  padding:8px;
  border-radius:10px;
  color:var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}
nav.nav .cart-btn:focus-visible { outline: 3px solid rgba(200,100,200,0.12); outline-offset:2px; }

.floating-qty,
nav.nav .floating-qty{
  position:absolute;
  right: -6px;
  top: -6px;
  min-width: 22px;
  height: 22px;
  padding:0 6px;
  border-radius:999px;
  background:#111;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.18);
  transform-origin:center;
}


.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
}
.hamburger, .hamburger::before, .hamburger::after {
  display:block;
  width:18px; height:3px; background:var(--text); border-radius:2px;
  position:relative; transition: transform .22s cubic-bezier(.3,.10,.6,1), opacity .18s ease;
}
.hamburger::before, .hamburger::after { content:""; position:absolute; left:0; }
.hamburger::before { top:-7px; width:18px; }
.hamburger::after { top:7px; width:18px; }

.nav-toggle.open .hamburger { background: transparent; }
.nav-toggle.open .hamburger::before { transform: rotate(45deg) translate(4px, 4px); width:22px; }
.nav-toggle.open .hamburger::after { transform: rotate(-45deg) translate(4px, -4px); width:22px; }


.nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  position:relative;
  transition: color .14s ease, transform .14s ease;
}
.mini-remove{
  display:none;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:8px; right:8px;
  bottom:6px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
  opacity:0.95;
}
.nav-links a:hover, .nav-links a:focus { color: var(--accent-2); transform: translateY(-2px); }
.nav-links a:hover::after, .nav-links a:focus::after { transform: scaleX(1); }


#lang-switcher{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(11,18,32,0.06);
  background:transparent;
  font-weight:700;
}


@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .nav-links{
    position: fixed;
    left:12px;
    right:12px;
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
    border-radius:12px;
    flex-direction:column;
    padding:12px;
    display:none;
    box-shadow: 0 12px 30px rgba(2,6,23,0.12);
    transform-origin: top center;
  }
  .nav-links.show { display:flex; animation: popIn .22s cubic-bezier(.2,.9,.3,1); }
  @keyframes popIn{ from{ transform: translateY(-6px) scale(.99); opacity:0 } to{ transform:none; opacity:1 } }
  .nav-links a { padding:14px 12px; font-size:1.02rem; border-radius:10px;}
}


.nav.scrolled {
  box-shadow: 0 10px 40px rgba(112,112,112,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.7));
  border-bottom-color: rgba(11,18,32,0.06);
}


@media (prefers-reduced-motion: reduce){
  .nav-inner, .nav-links, .brand .brand-gradient, .cart-btn, .nav-toggle { transition: none !important; animation: none !important; }
}


@media (max-width: 430px){
  .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .nav-inner { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
  .nav-links { top: calc(56px + env(safe-area-inset-top)); left:10px; right:10px; }
}




.contact-heading,
.model-heading,
.model-headning,
.reviewtext,
.product-title-main {
  font-family: "Cal Sans", sans-serif;  
  color: #c760db;

  font-size: 36px;
  text-align: center;
  margin: 12px
}

@media (max-width: 430px){
  .reviewtext{ font-size: 27px; }
}

.hero{ margin:15px 18px; display:flex; justify-content:center; }
.slides{ width:min(100%, var(--max-width)); margin: 75px; aspect-ratio: 1.8/1; border-radius: 12px; overflow:hidden; position:relative; max-width:1920px; }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; display:flex; align-items:flex-end; padding:24px; color:#fff; transition: opacity .6s ease, transform .6s ease; transform: scale(1.02); }
.slide.show{ opacity:1; transform: scale(1.1); }
.dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:10; }
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); border:0; }
.dot.active{ background:var(--accent); transform:scale(1.15); box-shadow: 0 6px 18px rgba(255,122,89,0.12); }


main{ max-width:var(--max-width); margin:20px auto; padding:0 16px; }
h2{ text-align:center; color:var(--muted); margin:18px 0; font-weight:700; }


.products-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}
.product-card{
  width:100%;
  max-width:320px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius:12px;
  padding:12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.img-wrap{
  width:100%;
  height:160px;
  border-radius:10px;
  overflow:hidden;
  background:#f4f6fb;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; position:absolute; inset:0; }
.product-card:hover .img-wrap img{ transform: scale(1.04); }
.product-title{ margin:12px 0 6px; font-weight:600; text-align:center; color:#575757;  font-family: "Cal Sans", sans-serif;  }
.product-titlea { color: #575757; font-family: "DM Serif Text", serif; }
.price{ color:#c760db; font-weight:800; font-size:1rem; margin-bottom:8px; }


.cta{
  display:block;
  width:100%;
  text-align:center;
  background:#c760db;
  color:#fff;
  font-weight:800;
  border:0;
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
  box-sizing:border-box;
  transition: background .16s ease, transform .08s ease;
}
.cta:hover{ transform: translateY(-2px); background:#ff6fa6; }
.cta.disabled, .cta[disabled]{ background:#e6e6ea; color:#777; cursor:default; }


.qty-controls{ display:flex; justify-content:center; align-items:center; gap:8px; width:100%; }
.qty-btn{ background:#c760db; border:1px solid rgba(0,0,0,0.07); color:#222; padding:6px 10px; border-radius:8px; font-weight:700; cursor:pointer; min-width:3px; text-align:center; }
.qty-btn:active{ transform: scale(.98); }
.qty-number{ min-width:44px; background:#c760db; border:1px solid rgba(0,0,0,0.06); padding:8px 12px; border-radius:8px; font-weight:700; text-align:center; color:#222; }


.add-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: rgba(10,10,10,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight:700;
  z-index: 9999;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}


.reviews-section { max-width: var(--max-width); margin: 28px auto; padding: 0 16px; }
.reviews-viewport{ overflow: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; position: relative; width: 100%; border-radius: 10px; background: rgba(255,255,255,0.02); padding: 12px 0; contain: layout paint; }
.reviews-track{ display:flex; gap:12px; align-items:stretch; will-change: transform; flex-wrap:nowrap; transform: translateX(0); touch-action:none; }
.review-card{ flex:0 0 25%; padding:6px; box-sizing:border-box; }
.review-card img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.06); background:#f4f6fb; }


.model-background{
  background: rgba(255,255,255,0.18);
  border-radius:10px;
  padding:21px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:18px 0;
  box-shadow:0 6px 18px rgba(2,6,23,0.04);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.model-img{ width:16rem; height:16rem; overflow:hidden; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#eee; }
.model-img img{ width:100%; height:100%; object-fit:cover; display:block; }


.mini-overlay{ pointer-events:none; }
.mini-overlay.show{ display:block; opacity:1; visibility:visible; pointer-events:auto; }
.mini-cart{
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: 360px;
  max-width: calc(100% - 36px);
  background: #ffffff;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  border-radius: 12px;
  transform: translateY(12px) scale(.995);
  opacity: 0;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
  z-index: 130;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.mini-cart.show{ transform:none; opacity:1; pointer-events:auto; }
.mini-cart-header{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; font-weight:800; border-bottom:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.mini-close{ background:transparent; border:0; font-size:18px; cursor:pointer; color: var(--text); }

.mini-cart-list{ padding:12px; max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling: touch; }
.empty{ text-align:center; color:var(--muted); padding:28px 10px; font-weight:700; }
.mini-cart-item{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.04); }
.mini-cart-item img{ width:64px; height:64px; border-radius:8px; object-fit:cover; background:#eee; }
.mini-cart-item .meta{ flex:1; display:flex; flex-direction:column; gap:6px; }
.mini-cart-item .meta .title{ font-weight:800; font-size:0.95rem; color: var(--text); }
.mini-cart-item .meta .price{ color:#c760db; font-weight:900; }
.controls{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.qty-controls{ display:flex; gap:6px; align-items:center; }
.qty-controls button{ border:1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.9); padding:6px 8px; border-radius:8px; cursor:pointer; font-weight:800; }
.qty-num{ min-width:28px; text-align:center; font-weight:800; }

.mini-cart-footer{ padding:12px; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.subtotal{ display:flex; justify-content:space-between; align-items:center; font-weight:800; color: var(--text); }
.actions{ display:flex; gap:8px; }
.btn{ padding:10px 12px; border-radius:8px; text-decoration:none; color:#fff; background:#c760db; font-weight:800; border:0; cursor:pointer; }
.btn.secondary{ background: #c760db; color:#c760db; border:1px solid rgba(0,0,0,0.06); }


.floating-cart{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 90px;
  height: 90px;
  border-radius: 24px;
  background: #c760db;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  z-index:140;
  border:0;
  cursor:pointer;
  box-shadow: 0 22px 60px rgba(2,6,23,0.22);
  font-weight:900;
}


@keyframes pulse { 0%{ transform: scale(1) } 50%{ transform: scale(1.08) } 100%{ transform: scale(1) } }
.floating-cart.pulse{ animation: pulse .42s ease; }


@media (max-width:480px){
  .mini-cart{ right:10px; left:10px; bottom:84px; width:auto; }
  .floating-cart{ right:12px; bottom:12px; width:75px; height:75px; }
  .product-title-main{ font-size: 30px;  }
}



.product-card .img-wrap {
  padding-top: 0 !important;
  height: clamp(160px, 22vw, 280px) !important;
  min-height: 160px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 8px !important;
  background: #f4f6fb;
}
.product-card .img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.product-card > img {
  display: block !important;
  width: 100% !important;
  height: clamp(160px, 22vw, 280px) !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #f4f6fb !important;
}
.products-grid { align-items: start !important; }


.reviews-section { max-width: var(--max-width); margin: 28px auto; padding: 0 16px; }
.reviews-viewport {
  overflow: hidden;
    touch-action: pan-y;               
  -webkit-overflow-scrolling: touch; 
  position: relative;
  width: 100%;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 12px 0;
  contain: layout paint;
}
.reviews-track {
  display: flex;
  gap: 12px;
  align-items: stretch;
  will-change: transform;
  flex-wrap: nowrap;
  transform: translateX(0);
  touch-action: none; 
}
.review-card { flex: 0 0 25%; padding: 6px; box-sizing: border-box; }
.review-card img {
  width: 100%;
  height: auto;           
  aspect-ratio: 1 / 1;     
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  background: #f4f6fb;
}
.review-card { flex: 0 0 25%; padding: 6px; box-sizing: border-box; }
.review-card img {
  width: 100%;
  height: auto;            
  aspect-ratio: 1 / 1;    
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  background: #f4f6fb;
}
@media (max-width: 430px) {
  .reviews-track { gap: 1px; }
.reviews-viewport {
  touch-action: pan-y;               
  -webkit-overflow-scrolling: touch; 
}
.mini-remove{
  display:none;
}
.reviews-track { touch-action: none; }
  .review-card {
    flex: 0 0 calc((100% - 0px) / 2);
    padding: px;
    box-sizing: border-box;
  }
  .review-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
  }
}
@media (max-width: 430px) {
  .product-card .img-wrap, .product-card > img { height: clamp(140px, 30vw, 200px) !important; }
  .products-grid{ gap:12px; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .brand .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .nav-toggle{ font-size:1.25rem; padding:8px; }
  .cta{ padding:10px 12px; font-size:0.95rem; }
  .model-img{ width:9rem; height:9rem; }
}
@media (max-width: 380px){
  .products-grid{ grid-template-columns: 1fr; }
  .review-card { flex:0 0 100%; }
  .model-img{ width:9rem; height:9rem; }
}

@media (max-width: 400px){
    .review-card { flex:0 0 100%; }
}


html, body, main, .hero, .slides, .reviews-viewport, .reviews-track, .model-background, .products-grid {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
button, .cta, .qty-btn, .mini-remove, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
  touch-action: manipulation;
}


.product-card .product-wrap,
.product-card .product-wrap * ,
.product-card .placeholder-inner {
  pointer-events: none;
}
.product-card .cta { position: relative; z-index: 2; pointer-events: auto; }


.product-card img, .reviews-viewport img, .slides img {
  -webkit-user-drag: none;
  user-select: none;
}


@media (pointer: coarse) {
  .cta, .qty-btn { padding: 10px 12px; min-height: 24px; min-width: 24px; }
}


#mini-cart[aria-hidden="true"], #mini-cart[aria-hidden="true"] *,
#mini-overlay[aria-hidden="true"], #mini-overlay[aria-hidden="true"] *,
#mini-cart[hidden], #mini-overlay[hidden] {
  pointer-events: none !important;
}
.mini-overlay[aria-hidden="true"], .mini-overlay[hidden] { visibility: hidden; opacity: 0; transition: none; pointer-events: none !important; }

 
.phone-section { margin-top: 30px; text-align:center; }
.phone-header { font-size: clamp(16px, 2.5vw, 20px); font-weight:700; margin-bottom:10px; display:flex; justify-content:center; align-items:center; gap:8px; }
.phone-icon{ font-size:20px; }
.phone-numbers{ font-size: clamp(14px, 2.3vw, 18px); font-weight:500; color:#9b9b9b; }

.site-footer{ width:100%; padding:28px 12px; box-sizing:border-box; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue"; }
.footer-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.copyright{ color:#9b9b9b; font-size:1.05rem; margin-bottom:14px; flex-direction: column;}
.accept-line{ display:inline; align-items:row; gap:14px; }
.accept-label{ font-size:1.05rem; color:#7a7a7a; white-space:nowrap; display:flex; flex-direction:inline; align-items:flex-start ;}
.icons{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pay-icon{ display:inline-block; width:clamp(36px,4.5vw,56px); padding:0; background:none; border:none; box-shadow:none; border-radius:0; object-fit:contain; -webkit-user-drag:none; vertical-align:middle; transition: transform .12s ease; }
.pay-icon:hover, .pay-icon:focus{ transform: translateY(-3px); }

 
@media (max-width: 420px) {
  .copyright { font-size:.95rem; margin-bottom:10px; }
  .accept-label { font-size:.95rem; }
  .pay-icon { width:40px; }
}


:root{
  --max-width: 1200px;
  --gutter: 16px;
  --accent: #c760db;   
  --frame-bg: #0f6a74;
  --text: #111;
  --radius: 14px;
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fff;color:var(--text);font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}


.page{display:flex;justify-content:center;padding:18px}
.contact-section{width:100%;max-width:var(--max-width)}
.heading{
  text-align:center;
  font-weight:800;
  font-size:clamp(20px, 4.5vw, 44px);
  margin-bottom:18px;
}


:root{
  --max-width: 1200px;
  --gutter: 16px;
  --accent: #c84bd6;   
  --frame-bg: transparent; 
  --text: #9b9b9b;
  --radius: 14px;
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fff;color:var(--text);font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}


.page{display:flex;justify-content:center;padding:18px}
.contact-section{width:100%;max-width:var(--max-width)}
.heading{
  text-align:center;
  font-weight:800;
  font-size:clamp(20px, 4.5vw, 44px);
  margin-bottom:18px;
}


.contact-row {
  display: flex;
  flex-direction: row;         
  flex-wrap: nowrap;           
  justify-content: center;
  gap: clamp(18px, 6vw, 40px); 
  padding: 0 var(--gutter);
  align-items: center;
  overflow-x: auto;           
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


@media (max-width: 420px) {
  .slides {width:min(100%, var(--max-width)); margin: 75px; aspect-ratio: 1.8/1; border-radius: 12px; overflow:hidden; position:relative;

  }
}


@media (max-width: 430px) {
  .contact-row {
    gap: 32px;            
    padding-left: 18px;   
    padding-right: 18px;
  }
}





.contact-card{
  display: inline-flex;       
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;            
  padding: 6px 0;
  text-decoration: none;
  color: inherit;
  transition: transform .18s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
  cursor: pointer;
}


.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.06);
  outline: none;
}


.img-frame{
  width: clamp(64px, 16vw, 120px);  
  height: clamp(64px, 16vw, 120px);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 rgba(0,0,0,0.04); 
  transform-origin: 50% 50%;
  transition: box-shadow .18s ease, transform .18s ease;
  will-change: transform, box-shadow;
  background: transparent; 
  border: none;            
}


.img-frame img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: calc(var(--radius) - 6px);
  object-fit: contain;
}


.contact-label{
  font-weight: 800;
  font-size: clamp(12px, 2.3vw, 16px);
  margin-top: 4px;
  letter-spacing: 0.2px;
}


.contact-card:hover .img-frame,
.contact-card:focus-visible .img-frame {
  animation: pop-tilt .36s ease forwards;
  box-shadow: 0 18px 30px rgba(0,0,0,0.12);
}

.contact-card:active .img-frame {
  transform: scale(.98) rotate(0deg);
  transition: transform .08s ease;
  box-shadow: 0 8px 14px rgba(0,0,0,0.08);
}

@keyframes pop-tilt {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.12) rotate(-6deg); }
  100% { transform: scale(1.04) rotate(-2.5deg); }
}


.contact-card:focus-visible { box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }


@media (prefers-reduced-motion: reduce) {
  .contact-card, .img-frame { transition: none !important; animation: none !important; transform: none !important; box-shadow: none !important; }
}

html.lang-kh, body.lang-kh, .lang-kh * {
  font-family: 'Kantumruy Pro', 'Noto Sans Khmer', 'Khmer OS System', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}




.hero { margin: 12px 12px; display:flex; justify-content:center; }
.slides {
  width: min(100%, var(--max-width));
  aspect-ratio: 16 / 9; 
  max-width: 1920px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin: 12px;
  background: linear-gradient(180deg, rgba(17,17,17,0.02), rgba(0,0,0,0.06));
  touch-action: pan-y; 
}


.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: #fff;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: transparent;
}
.slide.show {
  opacity: 1;
  transform: scale(1.06);
  pointer-events: auto;
}


.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}


.slide figcaption {
  position: relative;
  z-index: 6;
  max-width: 66%;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.18));
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.05;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
}
.slide figcaption strong { display: block; font-size: clamp(18px, 3.2vw, 30px); }
.slide figcaption span { display: block; font-weight: 500; font-size: clamp(12px, 2.2vw, 16px); color: rgba(255,255,255,0.92); margin-top: 4px; }


.slide .hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: none; 
}


.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 20;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  border: 0;
  display: inline-block;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.dot.active { background: var(--accent); transform: scale(1.18); }


@media (pointer: coarse) {
  .dot { width: 16px; height: 16px; border-radius: 16px; }
  .slide figcaption { padding: 14px 16px; max-width: 80%; }
}


@media (max-width: 430px) {
  .slides { margin: 12px; aspect-ratio: 16 / 9; border-radius: 12px; }
  .slide figcaption { max-width: 86%; font-size: 14px; padding: 12px; }
  .slide figcaption strong { font-size: clamp(16px, 6vw, 22px); }
  .dots { bottom: 12px; gap: 12px; }
  .dot { width: 18px; height: 18px; }
  .hero { margin: 12px 8px; }
}


html, body { overflow-x: hidden; }


@media (prefers-reduced-motion: reduce) {
  .slide, .dot { transition: none !important; animation: none !important; }
}


.slides img, .slide img { -webkit-user-drag: none;}


body{
  background:
    #e2e2e2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='2' fill='%23e5e7eb'/></svg>") 0 0/28px 28px;
}


/* Put this at the end of your CSS */
html, body { height: 100%; }

body{
  --dot-color: #e2e2e2;   /* light grey */
  --dot-size: 2px;        /* dot radius */
  --dot-gap: 30px;        /* distance between dots */

  background-color: #fff; /* page base */
  background-image: radial-gradient(circle,
                      var(--dot-color) var(--dot-size),
                      transparent calc(var(--dot-size) + 0.1px));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
}



nav.nav, .nav {
  position: fixed;       
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important; 
}


header.hero {
  position: relative; 
  z-index: 1; 
  
  margin-top: calc(var(--nav-h, 64px) + env(safe-area-inset-top) + 8px) !important;
  
}


.slides {
  position: relative;
  z-index: 1;
}


.slide, .slide.show {
  z-index: 0;
  
  will-change: opacity, transform;
}


.slide .hit {
  z-index: 2; 
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  touch-action: none;
}





nav.nav, .nav {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
}


header.hero {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--nav-h, 64px) + env(safe-area-inset-top) + 8px) !important;
}


.slides {
  position: relative;
  z-index: 1;
  overflow: visible; 
}


.slide, .slide.show {
  z-index: 0;
  will-change: opacity, transform;
  
  transition: opacity .45s ease, transform .45s ease;
}
.slide.show { transform: scale(1.03); }


.slide figcaption {
  position: absolute;
  bottom: clamp(10px, 3.2vw, 28px); 
  left: clamp(10px, 3.2vw, 28px);   
  right: auto;
  z-index: 6;                        
  box-sizing: border-box;
  width: auto;
  max-width: clamp(200px, 45%, 620px); 
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  color: #fff;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  box-shadow: 0 8px 22px rgba(0,0,0,0.26);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}


.slide figcaption strong {
  display:block;
  font-size: clamp(15px, 3.2vw, 30px);
}
.slide figcaption span {
  display:block;
  font-size: clamp(12px, 2.1vw, 16px);
  font-weight:500;
  margin-top:4px;
}


@media (min-width: 1200px) {
  .slide figcaption { max-width: 38%; padding: 12px 16px; }
  .slide figcaption strong { font-size: clamp(18px, 2.0vw, 32px); }
}


@media (pointer: coarse) {
  .slide figcaption { padding: 14px 16px; max-width: 60%; }
  .dots .dot { width: 9px; height: 9px; }
}


.slide .hit {
  z-index: 5;
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  touch-action: none;
}


.slides, .slide { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }





:root {
  --nav-h: 72px; 
}


.nav-inner {
  height: var(--nav-h);
  align-items: center;
  gap: 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
}


.brand .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }


@media (max-width: 430px) {
  
  :root { --nav-h: 88px; } 
  nav.nav, .nav { padding-top: env(safe-area-inset-top); }

  
  .brand .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; font-weight:700; letter-spacing:-0.02em; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  
  header.hero {
    margin-top: calc(var(--nav-h, 88px) + env(safe-area-inset-top) + 6px) !important;
  }

  
  .slide figcaption strong {
    font-size: clamp(18px, 6.6vw, 30px);
    line-height: 1.02;
  }

  
  .darila-official {
    font-size: clamp(20px, 8.6vw, 36px) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  
  .slide figcaption {
    padding: 14px 16px;
    max-width: 86%;
  }
}

.contact-row .contact-card:nth-child(4) .img-frame {
  width: clamp(22px, 6vw, 40px) !important;
  height: clamp(22px, 6vw, 40px) !important;
  padding: 4px !important;
}

.contact-row .contact-card:nth-child(4) .img-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius) - 8px);
}


.contact-row .contact-card:nth-child(4) .contact-label {
  font-size: clamp(10px, 1.8vw, 12px);
}

.img-frame {
  width: clamp(22px, 6vw, 40px) !important;
  height: clamp(22px, 6vw, 40px) !important;
  padding: 4px !important;
}


.img-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius) - 8px);
}

.contact-row {
  gap: clamp(8px, 2.5vw, 12px) !important; 
  justify-content: center;                 
  flex-wrap: nowrap;                       
  padding: 0 var(--gutter);
  align-items: center;
}


.contact-row .contact-card {
  margin: 0 !important;
  padding: clamp(6px, 1.6vw, 8px) !important;
  display: flex;
  align-items: center;
  gap: 6px;           
  min-width: 0;
}


.contact-row .contact-card .img-frame {
  margin: 0 !important;
  padding: 4px !important;
  width: clamp(22px, 6vw, 40px) !important;
  height: clamp(22px, 6vw, 40px) !important;
}


.contact-row .contact-card .contact-label {
  margin: 0;
  font-size: clamp(10px, 1.6vw, 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


@media (max-width: 480px) {
  .contact-row { gap: 6px !important; }
  .contact-row .contact-card { gap: 4px; padding: 6px; }
  .contact-row .contact-card .img-frame { padding: 2px; }
}


.product-card .cta.cartified {
  --btn-color: #2ea8ff;    
  --btn-text: #fff;        
  --btn-icon-size: 44px;
  --btn-gap: 14px;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: 12px 20px 12px calc(var(--btn-icon-size) + 18px);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform .08s ease, box-shadow .12s ease;
}


.product-card .cta.cartified:hover { transform: translateY(-1px); }


.product-card .cta.cartified::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius: 50%;
  z-index: 2;
  box-sizing: border-box;
}


.product-card .cta.cartified::after {
  content: "";
  position: absolute;
  left: calc(10px + (var(--btn-icon-size) - 20px) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 3;
  background: var(--cart-icon-color, #fff);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4H5L4 6h2l3.6 7.59L8.25 16.04c-.16.29-.25.62-.25.96 0 1.1.9 2 2 2h8v-2h-8l1.1-2h6.45c.75 0 1.41-.41 1.75-1.03L23 8.97 21.26 7.96 20.42 7H8.53L7 4z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4H5L4 6h2l3.6 7.59L8.25 16.04c-.16.29-.25.62-.25.96 0 1.1.9 2 2 2h8v-2h-8l1.1-2h6.45c.75 0 1.41-.41 1.75-1.03L23 8.97 21.26 7.96 20.42 7H8.53L7 4z'/></svg>") center / contain no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


.product-card .cta.cartified.filled {
  background: var(--btn-color);
  color: var(--btn-text);
  border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06), inset 0 -2px 0 rgba(0,0,0,0.02);
}
.product-card .cta.cartified.filled::before {
  background: #fff;
  border: 3px solid rgba(255,255,255,0.06);
}
.product-card .cta.cartified.filled::after {
  background: var(--btn-color);
  --cart-icon-color: var(--btn-color);
}


.product-card .cta.cartified.outline {
  background: transparent;
  color: var(--btn-color);
  border: 3px solid var(--btn-color);
  box-shadow: none;
}
.product-card .cta.cartified.outline::before {
  background: var(--btn-color);
  border: 0;
}
.product-card .cta.cartified.outline::after {
  background: #ffffff;
  --cart-icon-color: #fff;
}


@media (max-width:480px) {
  .product-card .cta.cartified {
    padding: 8px 12px 8px calc(var(--btn-icon-size) + 12px);
    font-size: 14px;
  }
  .product-card .cta.cartified::before { width: 36px; height: 36px; left: 8px; }
  .product-card .cta.cartified::after { width: 18px; height: 18px; left: calc(8px + (36px - 18px)/2); }
}

.product-card .cta.cartified {
  
  --btn-icon-size: 36px; 
  padding: 10px 18px 10px calc(var(--btn-icon-size) + 14px) !important;
  display: inline-flex;
  align-items: center;      
  gap: 12px;
  line-height: 1;           
  min-height: calc(var(--btn-icon-size) + 6px); 
  box-sizing: border-box;
}


.product-card .cta.cartified::before {
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--btn-icon-size) !important;
  height: var(--btn-icon-size) !important;
  border-radius: 50%;
  box-sizing: border-box;
  
  border: 2px solid rgba(255,255,255,0.08);
  background: #fff; 
  z-index: 2;
  box-shadow: none; 
}


.product-card .cta.cartified::after {
  
  left: calc(10px + (var(--btn-icon-size) - 18px) / 2) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  z-index: 3;
}


.product-card .cta.cartified.filled {
  
  box-shadow: 0 6px 16px rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.02);
}

.product-card .cta.cartified.filled::before {
  background: #fff !important;
  border: 2px solid rgba(255,255,255,0.06) !important;
  
  box-shadow: none !important;
}


.product-card .cta.cartified.outline::before {
  background: var(--btn-color) !important;
  border: 0 !important;
  box-shadow: none !important;
}


@media (max-width: 480px) {
  .product-card .cta.cartified {
    --btn-icon-size: 40px; 
    padding: 9px 14px 9px calc(var(--btn-icon-size) + 12px) !important;
    min-height: calc(var(--btn-icon-size) + 6px);
    font-size: 14px;
  }
  .product-card .cta.cartified::before { width: var(--btn-icon-size) !important; height: var(--btn-icon-size) !important; left: 8px !important; }
  .product-card .cta.cartified::after { width: 16px !important; height: 16px !important; left: calc(8px + (var(--btn-icon-size) - 16px) / 2) !important; }
}

.product-card .cta.cartified {
  --btn-icon-size: 28px !important;          
  padding: 9px 14px 9px calc(var(--btn-icon-size) + 12px) !important;
  min-height: calc(var(--btn-icon-size) + 6px) !important;
  align-items: center !important;
}


.product-card .cta.cartified::before {
  width: var(--btn-icon-size) !important;
  height: var(--btn-icon-size) !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}


.product-card .cta.cartified::after {
  width: 14px !important;
  height: 14px !important;
  left: calc(10px + (var(--btn-icon-size) - 14px) / 2) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}


.product-card .cta .qty-controls,
.product-card .cta .qty-controls * {
  box-sizing: border-box;
}

.product-card .cta .qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}


.product-card .cta .qty-controls .qty-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  min-width: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.product-card .cta .qty-controls .qty-number,
.product-card .cta .qty-controls .qty-num {
  font-size: 14px !important;
  min-width: 20px;
  text-align: center;
  display: inline-block;
}


@media (max-width: 430px) {
  
  .product-card .cta.cartified {
    --btn-icon-size: 30px !important;    
    padding: 8px 12px 8px calc(var(--btn-icon-size) + 10px) !important;
    min-height: calc(var(--btn-icon-size) + 6px) !important;
    font-size: 14px !important;
  }
  .product-card .cta.cartified::before {
    width: var(--btn-icon-size) !important;
    height: var(--btn-icon-size) !important;
    left: 8px !important;
  }
  .product-card .cta.cartified::after {
    width: 16px !important;
    height: 16px !important;
    left: calc(8px + (var(--btn-icon-size) - 16px) / 2) !important;
  }

  .product-card .cta .qty-controls .qty-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    min-width: 28px !important;
  }

  .product-card .cta .qty-controls .qty-number,
  .product-card .cta .qty-controls .qty-num {
    font-size: 13px !important;
    min-width: 18px;
  }

  .product-card .cta .qty-controls .qty-btn > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
  }
  
    
.product-card .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ff7a00, #ff5500);
  box-shadow: 0 4px 10px rgba(255, 85, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-card .cta::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,\
  <path d='M7 18a1 1 0 100 2 1 1 0 000-2zm10 0a1 1 0 100 2 1 1 0 000-2zM6 6h15l-1.5 8H8.2L6 6zM4 4h2l2.2 9h11.3a1 1 0 010 2H9a3 3 0 01-2.9-2.2L4 4z'/>\
  </svg>") center/contain no-repeat;
}

.product-card .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 85, 0, 0.35);
}

.product-card .cta:active {
  transform: scale(0.97);
}


.product-card .cta:has(.qty-controls) {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);
  color: #222;
}

.product-card .cta:has(.qty-controls)::before {
  display: none;
}

.product-card .cta .qty-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
}

.product-card .cta .qty-btn {
  background: #c760db;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.product-card .cta .qty-btn:hover {
  background: #c760db;
}

.product-card .cta .qty-number {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  min-width: 22px;
  text-align: center;
}


}



.cta{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;                    
  padding: 0 24px 0 84px;          
  border: none;
  border-radius: 999px;            
  background: #B55AD3;             
  color: #fff;
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(181,90,211,.24);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(181,90,211,.30); }
.cta:active{ transform: translateY(0); }


.cta::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(#fff 64%, #fff 65%) center/100% 100% no-repeat,
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
        <path fill='%23B55AD3' d='M7 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6.5 6h13l-1 6H8.5L6.5 6z'/>\
      </svg>"
    ) center/28px 28px no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) inset, 0 10px 22px rgba(2,6,23,.10);
}


@media (max-width: 430px){
  .cta{
    height: 54px;
    padding-left: 78px;
    font-size: 18px;
  }
  .cta::before{ left: 12px; width: 58px; height: 58px; background-size: 24px 24px; }
}


.cta.is-qty{
  padding-left: 24px;              
  justify-content: space-evenly;
  gap: 18px;
}


.cta.is-qty .qty-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  width: 100%;
}
.cta.is-qty .qty-btn,
.cta.is-qty .qty-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 10vw, 74px);
  height: clamp(50px, 10vw, 74px);
  border-radius: 16px;
  border: none;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) inset, 0 10px 22px rgba(2,6,23,.10);
  font-weight: 900;
}
.cta.is-qty .qty-btn{
  cursor: pointer;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1;
  color: #fff;                  
}
.cta.is-qty .qty-number{
  font-size: clamp(22px, 4.2vw, 30px);
  color: #fff;
}


.product-card .cta{ margin-top: 8px; align-self: stretch; }


@media (pointer: coarse){
  .cta{ min-height: 56px; }
  .cta.is-qty .qty-btn{ min-width: 50px; min-height: 50px; }
}


.cta.is-qty{
  padding-left: 24px;     
  padding-right: 24px;
  justify-content: center;
}


.cta.is-qty::before{
  content: none !important;
}


.cta.is-qty .qty-controls{
  margin: 0 auto;                 
  justify-content: center;        
  gap: clamp(14px, 4.5vw, 28px);  
  width: auto;                    
}


.cta, .cta.is-qty .qty-controls{
  align-items: center;
}


.cta{ position: relative; }                 

.cta.is-qty{
  padding-left: 24px !important;           
  padding-right: 24px !important;
  justify-content: initial !important;     
}


.cta.is-qty::before{
  content: none !important;
}


.cta.is-qty .qty-controls{
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);        
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4.5vw, 28px);
  width: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}


.cta.is-qty .qty-btn,
.cta.is-qty .qty-number{
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.product-card .cta { 
  position: relative !important; 
  height: 56px !important;           
}

.product-card .cta.is-qty {
  padding-left: 24px !important;
  padding-right: 24px !important;
  justify-content: initial !important; 
}


.product-card .cta.is-qty::before { 
  content: none !important; 
}


.product-card .cta.is-qty .qty-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  gap: clamp(14px, 4.5vw, 28px) !important;
}


.product-card .cta.is-qty .qty-btn,
.product-card .cta.is-qty .qty-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(50px, 10vw, 62px) !important;
  height: clamp(50px, 10vw, 62px) !important;
  border-radius: 16px !important;
  line-height: 1 !important;
}

.product-card .cta.is-qty {
  position: relative !important;
  padding: 0 !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.product-card .cta.is-qty::before {
  content: none !important;
}


.product-card .cta.is-qty .qty-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 0 !important;
}


.product-card .cta.is-qty .qty-btn,
.product-card .cta.is-qty .qty-number {
  -webkit-appearance: none !important;  
  appearance: none !important;
  background: #fff !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}



.product-card .cta:has(.qty-controls) {
  position: relative !important;
  padding-left: 24px !important;    
  padding-right: 24px !important;
  justify-content: initial !important;  
}


.product-card .cta:has(.qty-controls)::before {
  content: none !important;
}


.product-card .cta:has(.qty-controls) .qty-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;           
  margin: 0 !important;
  gap: 20px !important;             
}


.product-card .cta:has(.qty-controls) .qty-btn,
.product-card .cta:has(.qty-controls) .qty-number {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  font-size: 26px !important;
}



.product-card .cta.is-qty,
.product-card .cta:has(.qty-controls) {
  position: relative !important;
  padding: 0 20px !important;           
  height: 48px !important;              
  border-radius: 999px !important;
  background: #c760db !important;       
}


.product-card .cta.is-qty::before,
.product-card .cta.is-qty::after,
.product-card .cta:has(.qty-controls)::before,
.product-card .cta:has(.qty-controls)::after {
  content: none !important;
}


.product-card .cta.is-qty .qty-controls,
.product-card .cta:has(.qty-controls) .qty-controls {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
  gap: 12px !important;                 
}


.product-card .cta.is-qty .qty-btn,
.product-card .cta.is-qty .qty-number,
.product-card .cta:has(.qty-controls) .qty-btn,
.product-card .cta:has(.qty-controls) .qty-number {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 10px !important;
  background: #fff !important;
  display: inline-flex !important;  
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #222 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) inset, 0 6px 14px rgba(2,6,23,.10);
}


.product-card .cta.is-qty .qty-btn,
.product-card .cta:has(.qty-controls) .qty-btn {
  font-size: 20px !important;
}


@media (max-width: 430px) {
  .product-card .cta.is-qty,
  .product-card .cta:has(.qty-controls) {
    height: 44px !important;           
    padding: 0 16px !important;
  }

  .product-card .cta.is-qty .qty-controls,
  .product-card .cta:has(.qty-controls) .qty-controls {
    gap: 10px !important;
  }

  .product-card .cta.is-qty .qty-btn,
  .product-card .cta.is-qty .qty-number,
  .product-card .cta:has(.qty-controls) .qty-btn,
  .product-card .cta:has(.qty-controls) .qty-number {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  .product-card .cta.is-qty .qty-btn,
  .product-card .cta:has(.qty-controls) .qty-btn {
    font-size: 18px !important;
  }
}


.product-card .cta:has(.qty){
  height:56px !important;
  padding-left:24px !important; padding-right:24px !important;
  border-radius:999px !important;
  background:#c84bd6 !important;
  justify-content:initial !important;
  position:relative !important;
}
.product-card .cta:has(.qty)::before{ content:none !important; }
.product-card .cta:has(.qty) .qty{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  gap:clamp(14px,4.5vw,28px);
}
.product-card .cta:has(.qty) .qty__btn,
.product-card .cta:has(.qty) .qty__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(50px,10vw,62px); height:clamp(50px,10vw,62px);
  border-radius:16px; line-height:1;
}

:root { --slider-radius: 12px; } 

header.hero .slides{
  border-radius: var(--slider-radius);
  overflow: hidden;                                
  clip-path: inset(0 round var(--slider-radius));  
  -webkit-mask-image: -webkit-radial-gradient(white, black); 
  isolation: isolate;                               
}


.slide.show { transform: scale(1.03); }

.product-link{ display:block; color:inherit; text-decoration:none; }
.product-link:focus-visible{
  outline:2px solid var(--accent,#ff5aa7); outline-offset:4px; border-radius:12px;
}


.product-card .img-wrap{ border-radius:14px; overflow:hidden; }

.products-grid .product-card .img-wrap{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f6f7f9;

  aspect-ratio: 1 / 1;
}


@supports not (aspect-ratio: 1 / 1) {
  .products-grid .product-card .img-wrap::before{
    content: "";
    display: block;
    padding-top: 100%; 
  }
  .products-grid .product-card .img-wrap > img{
    position: absolute; inset: 0;
  }
}


.products-grid .product-card .img-wrap > img{
  width: 100%;
  height: 100%;
  object-fit: cover;        
  object-position: center;  
  display: block;
}


.product-card .cta{
  height: 56px !important;
  padding: 0 24px 0 88px !important;  
  border-radius: 999px !important;
  font-weight: 800 !important;
}


.product-card .cta::before{
  width: 62px !important;
  height: 62px !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}


.product-card .cta.cartified{ --btn-icon-size: 36px !important; }
@media (max-width: 430px){
  .product-card .cta.cartified{ --btn-icon-size: 40px !important; }
}


.product-card .cta.is-qty,
.product-card .cta:has(.qty-controls){
  padding: 0 20px !important;
  justify-content: initial !important;   
}


.product-card .cta.is-qty::before,
.product-card .cta:has(.qty-controls)::before{ content: none !important; }


.product-card .cta.is-qty .qty-controls,
.product-card .cta:has(.qty-controls) .qty-controls{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  width: auto !important;
}


.product-card .cta.is-qty .qty-btn,
.product-card .cta.is-qty .qty-number,
.product-card .cta:has(.qty-controls) .qty-btn,
.product-card .cta:has(.qty-controls) .qty-number{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #222 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) inset, 0 6px 14px rgba(2,6,23,.10);
}

@media (max-width: 430px){
  .product-card .cta.is-qty .qty-btn,
  .product-card .cta.is-qty .qty-number,
  .product-card .cta:has(.qty-controls) .qty-btn,
  .product-card .cta:has(.qty-controls) .qty-number{
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
}




.pd-more .products-grid{ gap:10px; }
@media (max-width: 900px){
  .pd-more .products-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  .pd-more .product-card{ margin:0; }
}




@media (max-width: 900px){
  .pd-more{ padding: 0 8px; }
  .pd-more .products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 12px;
  }
  .pd-more .product-card{ width:100%; max-width:unset; margin:0; }
}




.pd-more .products-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
  justify-content: normal !important;
}
.pd-more{ padding: 0 16px; max-width: 1200px; margin: 24px auto 0; }




.pd-more{ max-width: 720px; margin: 24px auto 0; padding: 0 16px; } 
.pd-more .products-grid{
  grid-template-columns: repeat(2, minmax(0, 320px)) !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
}
.pd-more .product-card{ max-width: 320px; }


@media (max-width: 380px){
  .pd-more .products-grid{ grid-template-columns: 1fr !important; }
}




@media (max-width: 480px){
  .pd-more{ max-width: 100% !important; padding: 0 12px !important; }
  .pd-more .products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: stretch !important;
  }
  .pd-more .product-card{ width: 100% !important; max-width: none !important; margin: 0 !important; }
}
.product-card .cta,
.product-card .cta button {
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}


.floating-cart {
  position: fixed; 
  
}


.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:28px;              
  height:28px;
  background:#fff;         
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
    <!-- wheels + basket -->\
    <path d='M7 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6.5 6h13l-1 6H8.5L6.5 6z'/>\
    <!-- handle -->\
    <path d='M6 4H4l-1 2h2z'/>\
    <!-- check bubble -->\
    <circle cx='17' cy='6' r='4.5'/>\
    <path d='M15.6 5.9l-1.3-1.3-1.1 1.1 2.4 2.4L20 3.8l-1.1-1.1z' fill='white'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
    <path d='M7 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6.5 6h13l-1 6H8.5L6.5 6z'/>\
    <path d='M6 4H4l-1 2h2z'/>\
    <circle cx='17' cy='6' r='4.5'/>\
    <path d='M15.6 5.9l-1.3-1.3-1.1 1.1 2.4 2.4L20 3.8l-1.1-1.1z' fill='white'/>\
  </svg>") no-repeat center / contain;
}


.mini-cart-header{
  position: relative;
  padding-left: 40px; 
}
.mini-cart-header::before{
  content:"";
  position:absolute;
  left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px;
  background:#c760db; 
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
    <path d='M7 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6.5 6h13l-1 6H8.5L6.5 6z'/>\
    <path d='M6 4H4l-1 2h2z'/>\
    <circle cx='17' cy='6' r='4.5'/>\
    <path d='M15.6 5.9l-1.3-1.3-1.1 1.1 2.4 2.4L20 3.8l-1.1-1.1z' fill='white'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
    <path d='M7 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6.5 6h13l-1 6H8.5L6.5 6z'/>\
    <path d='M6 4H4l-1 2h2z'/>\
    <circle cx='17' cy='6' r='4.5'/>\
    <path d='M15.6 5.9l-1.3-1.3-1.1 1.1 2.4 2.4L20 3.8l-1.1-1.1z' fill='white'/>\
  </svg>") no-repeat center / contain;
}


.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:28px; height:28px;
  background: url("image/cart-check.png") no-repeat center / contain;
}

.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:40px;           
  height:40px;
  background: 
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / contain no-repeat;
}


.mini-cart-header{
  position: relative;
  padding-left: 40px;    
}
.mini-cart-header::before{
  content:"";
  position:absolute;
  left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px;
  background:
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / contain no-repeat;
  opacity: .95;
}

.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:40px;           
  height:40px;
  background: 
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / contain no-repeat;
}


.mini-cart-header{
  position: relative;
  padding-left: 40px;    
}
.mini-cart-header::before{
  content:"";
  position:absolute;
  left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px;
  background:
    image-set(
      url("image/cart-check-white.png") 1x,
      url("image/cart-check-white@2x.png") 2x,
      url("image/cart-check-white@3x.png") 3x
    ) center / contain no-repeat;
  opacity: .95;
}

.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:40px;               
  height:40px;
  background-image: url("image/cart-check-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;     
  background-color: transparent !important;

  
  -webkit-mask: none !important;
  mask: none !important;

  
  background-blend-mode: normal !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}


.mini-cart-header::before{
  -webkit-mask: none !important;
  mask: none !important;
  background-image: url("image/cart-check-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




.burger { display: none; 
  z-index: 130;
}


.burger {
  position: relative;
  width: 28px;
  height: 21px;
  background: transparent;
  cursor: pointer;

  z-index: 130;
}

.burger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #666;   
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}
.burger span:nth-of-type(1) { top: 0px; transform-origin: left center; }
.burger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: left center; }
.burger span:nth-of-type(3) { top: 100%; transform: translateY(-100%); transform-origin: left center; }


@media (max-width:1080px){
  
  .nav-toggle { display: none !important; }

  
  .burger { display: block; 
  z-index: 130;
}

  
  #site-nav { display: none; }
  .nav-links { display: none; }

  
  #burger:checked ~ .nav-inner #site-nav { display: flex; }

  
  #burger:checked ~ .nav-inner .burger span:nth-of-type(1) {
    transform: rotate(45deg); top: 0px; left: 4px;
  }
  #burger:checked ~ .nav-inner .burger span:nth-of-type(2) {
    width: 0%; opacity: 0;
  }
  #burger:checked ~ .nav-inner .burger span:nth-of-type(3) {
    transform: rotate(-45deg); top: 20px; left: 4px;
  }
}



@media (max-width:1080px){
  .nav-right .cart{
    display:flex;
    align-items:center;
    height: var(--nav-h);
  }
  .nav-right .cart .nav-qty{
    display:inline-block;
    line-height:1;
    font-size: 14px;
    
    position: relative;
    top: 0;
  }
}

/* Ensure Khmer applies to BODY when page language is Khmer (wins over any body{} font) */




/* Brand lock */
.brand, .brand-gradient{ font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important; }




/* Global Khmer: when site lang is Khmer, use Kantumruy by default */

/* Brand always Cal Sans (logo text) */
.brand, .brand-gradient{
  font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
}

/* === Strong Khmer global override === */
html[lang="kh"] body,
html[lang="kh"] body *:not(.brand):not(.brand *):not(svg *):not(i){
  font-family: "Kantumruy","Kantumruy Pro","Noto Sans Khmer",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}
/* Brand stays Cal Sans */
.brand, .brand-gradient{
  font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
}



/* --- Mobile overlap fix: ensure right column stacks AFTER the form (no overlap) --- */
@media (max-width: 980px){
  .csv2-grid{ grid-auto-flow: row; }
  .csv2-head,
  .csv2-formcard,
  .csv2-right-head,
  .csv2-right-body{
    grid-column: 1 !important;
    grid-row: auto !important; /* clear desktop row assignments */
  }
}


/* === FORCE SIZE: Social icons (override any global img{width:100%}) === */
.csv2-socials .csv2-soc img,
.csv2-right-body .csv2-soc img{
  width: var(--contactIconSize) !important;
  height: var(--contactIconSize) !important;
  max-width: none !important;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}


/* ===== CS3: Stable two-column contact (scoped) ===== */
.cs3-wrap{ --box: clamp(64px, 6vw, 80px); }
.cs3-wrap *{ box-sizing:border-box; }

.cs3-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 34px);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px;
  align-items:start;
}

/* Left */
.cs3-title{ color:#c84bd6; font-weight:900; font-size: 36px; margin: 4px 0 4px; }
.cs3-sub{ color:#989898;text-align: center; font-weight:800; font-size: clamp(13px, 2.2vw, 18px); margin: 0 0 12px; }
.cs3-card{ background:#fff; border:1px solid rgba(11,18,32,.06); border-radius:16px; box-shadow: 0 10px 26px rgba(2,6,23,.08); padding: clamp(12px, 2.4vw, 20px); }
.cs3-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs3-input{ width:100%; background:#e8e8e8; border:none; border-radius:12px; padding:14px; font-size: 15px; color:#444; }
.cs3-input::placeholder{ color:#9b9b9b; font-weight:700; }
.cs3-full{ grid-column: 1 / -1; min-height: 150px; resize:vertical; }
.cs3-actions{ display:grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 10px; align-items:center; }
.cs3-robot{ display:flex; align-items:center; gap:10px; background:#e8e8e8; border-radius:12px; padding:14px; font-weight:800; color:#9a54c6; }
.cs3-robot input{ width:18px; height:18px; accent-color:#9a54c6; }
.cs3-send{ padding:14px 22px; border-radius:12px; border:none; background:#dcd6e6; color:#9a54c6; font-weight:900; }
.cs3-send[disabled]{ opacity:.6; cursor:not-allowed; }
.cs3-send:not([disabled]){ background:#ece9f3; cursor:pointer; }

/* Right */
.cs3-right-top{ text-align:center; }
.cs3-kh-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
.cs3-emoji{ font-size: clamp(18px, 3vw, 24px); }
.cs3-kh{ font-family: cal sans; color:#ce64d7; font-weight:900; font-size: 36px; margin: 4px 0 4px;  }
.cs3-phone{ color:#6b7280; font-weight:600px; font-size: clamp(16px, 2.6vw, 24px); margin: 0px 10px 24px; letter-spacing:.21px; text-align:center; }

@media (max-width: 430px){
  .cs3-kh{ font-size: 27px; }
}

.cs3-socials{ display:flex; gap: clamp(22px, 3vw, 36px); justify-content:center; flex-wrap:wrap; }
.cs3-soc{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
.cs3-icon{ width:var(--box) !important; height:var(--box) !important; max-width:none !important; border-radius: 12%; object-fit:contain; }
.cs3-soc span{ color:#74808c; font-weight:900; font-size:13px; }

.cs3-divider{ border:none; border-top:2px solid rgba(11,18,32,.08); width: 78%; margin: 18px auto 14px; }

.cs3-follow-title{color:#c84bd6; font-weight:900; font-size: 27px; margin: 4px 0 4px; text-align:center;}
.cs3-follow{ display:flex; gap: clamp(20px, 3vw, 32px); justify-content:center; flex-wrap:wrap; }
.cs3-tile{ width:var(--box); height:var(--box); border-radius:10px; background:#9a54c6; box-shadow: 0 10px 22px rgba(154,84,198,.28); display:flex; align-items:flex-end; justify-content:center; text-decoration:none; position:relative; transition:transform .12s ease, box-shadow .12s ease; }
.cs3-tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(154,84,198,.34); }
.cs3-tile span{ position:absolute; bottom:-18px; color:#74808c; font-weight:800; font-size:14px; }

/* Desktop tweak: align right column under slider a bit to the right */
@media (min-width: 981px){
  .cs3-right{ margin-left: clamp(12px, 2.6vw, 28px); }
}

/* Mobile layout */
@media (max-width: 980px){
  .cs3-grid{ grid-template-columns: 1fr; row-gap: 16px; }
  .cs3-title, .cs3-sub{ text-align:center; }
  .cs3-fields{ grid-template-columns: 1fr; }
  .cs3-actions{ grid-template-columns: 1fr; }
  .cs3-send{ width:100%; }
  .cs3-right{ margin: 0 4px; }
  .cs3-right-top{ margin-top: 6px; }
}


/* === Desktop-only: relax spacing in Contact (right) column to match left card height === */
@media (min-width: 981px){
  .cs3-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2.2vw, 28px);          /* base vertical spacing between blocks */
    padding-bottom: clamp(28px, 4vw, 64px); /* extend toward bottom of left card */
  }
  .cs3-right-top{ margin-bottom: clamp(12px, 2.2vw, 24px); }
  .cs3-socials{ margin: clamp(6px, 1.4vw, 16px) 0 clamp(14px, 2.4vw, 26px); gap: clamp(24px, 3.4vw, 44px); }
  .cs3-divider{ margin: clamp(20px, 3vw, 36px) auto clamp(16px, 2.4vw, 30px); width: 78%; }
  .cs3-follow-title{ margin: clamp(8px, 1.6vw, 16px) 0 clamp(8px, 1.6vw, 16px); }
  .cs3-follow{ gap: clamp(22px, 3.2vw, 40px); margin-bottom: clamp(10px, 3vw, 40px); }
}


/* === cs3 refinements: constrained rail and spacing === */
.cs3-right-sub{color:#989898;text-align: center; font-weight:800; font-size: clamp(13px, 2.2vw, 18px); margin: 0 0 12px;  }

@media (min-width: 981px){
  .cs3-rail{ width: clamp(420px, 72%, 560px); margin-inline:auto; }
  .cs3-socials{ gap: clamp(20px, 2.8vw, 32px); margin: 10px 0 14px; }
  .cs3-divider{ margin: 16px auto 12px; width: 78%; }
  .cs3-follow{ gap: clamp(18px, 2.6vw, 28px); }
}

@media (max-width: 980px){
  .cs3-rail{ width: 100%; }
}

/* === Contact panel alignment — top & bottom edges === */
/* Reset any previous relative offsets */
.cs3-rail, .cs3-follow-title, .cs3-follow { position: relative; top: 0; }

/* Tighten the gap between the heading/subheading and the phone number */
.cs3-right-top { margin-bottom: clamp(4px, 0.9vw, 10px); }

/* Ensure the phone row starts immediately (no extra offset) */
.cs3-rail { margin-top: 0; }

/* Slightly reduce default gaps inside the right column */
.cs3-right {
  gap: clamp(8px, 1.2vw, 16px);
  /* Push bottom so the Follow tiles visually reach the end,
     aligning with the left Customer Support card. Tune as needed. */
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* Keep icon sizing/spacing sensible (from previous tuning) */
.cs3-socials { gap: clamp(16px, 2.4vw, 22px); }
.cs3-icon { width: var(--box) !important; height: var(--box) !important; }

/* === Social & Follow icons: slightly smaller + last row rounded === */
/* Shrink all 7 icons (4 socials + 3 follow) */
.cs3-socials .cs3-icon,
.cs3-follow   .cs3-icon{
  width: clamp(44px, 5vw, 56px) !important;
  height: clamp(44px, 5vw, 56px) !important;
}

/* Give ONLY the last row (Follow) icons rounded corners like above */
.cs3-follow .cs3-icon{
  border-radius: 10px;   /* matches the tile radius */
  overflow: hidden;      /* ensures clean clipping on PNG/JPG edges */
  display: block;
  object-fit: contain;
}
/* === Remove purple tile background behind Follow icons === */
.cs3-tile{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* In case any decoration is drawn with pseudo-elements */
.cs3-tile::before,
.cs3-tile::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* Optional: keep hover lift but no purple glow; remove if you want the lift */
.cs3-tile:hover{
  box-shadow: none !important;
}
/* Force 2-up product grid on phones */
@media (max-width: 480px){
  .products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
  .product-card{ max-width: none; } /* let cards fill the column */
}

/* Single column only for ultra-small widths */
@media (max-width: 340px){
  .products-grid{ grid-template-columns: 1fr !important; }
}


/* === Darila override: force solid purple brand on nav/site-wide === */
header nav .brand-gradient,
nav .brand-gradient,
.brand-gradient{
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #c760db !important;
  font-weight: 800;
}
/* hover/focus should also remain solid */
.brand:hover .brand-gradient,
.brand:focus-visible .brand-gradient{
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #c760db !important;
}

/* iOS mobile full-width slider fix */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    .hero {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .hero .slides {
      width: 100vw !important;
      max-width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    .hero .slide,
    .hero .slide img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }
  }
}


/* ==== Contact heading size (27px across all devices) ==== */
#contact .contact-heading,
#contact h2.contact-heading,
#contact h2,
.contact-heading{
  font-size: 27px !important;
  line-height: 1.2;
}
/* ===== Mini-cart button: match cart style (white + pink, sheen & glow) ===== */
.mini-cart{
  --den-pink:  #ff4fa2;   /* primary pink */
  --den-pink2: #ff8fcf;   /* lighter pink */
}

.mini-cart .actions{
  display:flex;
  gap:12px;
}

.mini-cart .actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px 18px;                 /* bigger & readable */
  font-weight:900;
  font-size:16px;                    /* a bit bigger */
  letter-spacing:.5px;
  border-radius:12px;
  text-decoration:none;
  border:1.5px solid var(--den-pink);
  color:#fff;
  background: linear-gradient(100deg, var(--den-pink2), var(--den-pink));
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:
    0 8px 20px rgba(255,79,162,.25),
    0 1px 0 rgba(255,255,255,.35) inset;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .12s ease,
    box-shadow .25s ease,
    background-position .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.mini-cart .actions .btn:hover{
  transform: translateY(-1px);
  background-position:100% 50%;
  box-shadow: 0 10px 24px rgba(255,79,162,.35);
}

.mini-cart .actions .btn:active{
  transform: translateY(0);
}

/* moving light sweep (sheen) */
@keyframes mc-sheen {
  0%   { left:-35%; }
  60%  { left:120%; }
  100% { left:120%; }
}
.mini-cart .actions .btn::before{
  content:"";
  position:absolute; top:0; left:-35%;
  width:40%; height:100%;
  transform: skewX(-20deg);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: mc-sheen 2.8s linear infinite;
  pointer-events:none;
  z-index:1;
}

/* soft pink glow */
@keyframes mc-glow {
  0%,100% { opacity:.25; }
  50%     { opacity:.1; }
}
.mini-cart .actions .btn::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  box-shadow: 0 0 24px 6px rgba(255,79,162,.35);
  animation: mc-glow 3s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

/* optional: ghost/secondary style if you later add a second button */
.mini-cart .actions .btn.secondary{
  background:#fff;
  color:var(--den-pink);
  border:1.5px dashed var(--den-pink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 18px rgba(255,79,162,.08);
}
.mini-cart .actions .btn.secondary:hover{
  background: linear-gradient(100deg, rgba(255,143,207,.12), rgba(255,79,162,.12));
}
/* Floating cart (bottom-right) */
.floating-cart{
  --fc-size: 72px;
  position: fixed;
  right: 12px; bottom: 12px;
  width: var(--fc-size); height: var(--fc-size);
  border-radius: 22px;
  background: linear-gradient(135deg, #da84ea, #c760db);
  box-shadow: 0 12px 28px rgba(199,96,219,.35);
  display:inline-flex; align-items:center; justify-content:center;
  outline: none; border: none;
}

/* White cart + check icon (data-URI SVG, no external file needed) */
.floating-cart::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width: 40px; height: 40px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6h15l-1.5 7.5H8.5L7 6z'/>\
<circle cx='9' cy='19' r='1.5'/>\
<circle cx='18' cy='19' r='1.5'/>\
<path d='M10 12l2 2 4-4'/>\
</svg>") center/contain no-repeat;
  opacity:.98;
}

/* Quantity badge */
.floating-qty{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif;
  color:#fff; background:#111; border:2px solid #fff;
  border-radius:999px;
}

/* Optional pulse when items added — keeps your class name */
.floating-cart.pulse{ animation: pulse .42s ease; }
@keyframes pulse{
  0%{ transform: scale(1);   box-shadow: 0 0 0 0 rgba(199,96,219,.45); }
  70%{ transform: scale(1.04); box-shadow: 0 0 0 18px rgba(199,96,219,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(199,96,219,0); }
}
/* Panel sizing */
.mini-cart{
  width: clamp(320px, 92vw, 420px);
  right: 21px; bottom: 100px;  /* stays above bottom nav on mobile */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(2,6,23,.16);
  color: #141414;
}

/* Header with small cart icon */
.mini-cart-header{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px 12px 46px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(255,255,255,0));
}
.mini-cart-header strong{
  font-weight:900; color:#141414;
}
.mini-cart-header::before{
  content:"";
  position:absolute; left:14px; top:50%; translate:0 -50%;
  width:22px; height:22px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c760db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6h15l-1.5 7.5H8.5L7 6z'/>\
<circle cx='9' cy='19' r='1.5'/>\
<circle cx='18' cy='19' r='1.5'/>\
</svg>") center/contain no-repeat;
  opacity:.95;
}
.mini-close{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-weight:900; color:#6b7280; padding:6px; line-height:1;
}
.mini-close:hover{ color:#111; }

/* List area — scrollable with safe spacing */
.mini-cart-list{
  padding: 12px;
  max-height: min(48vh, 420px);
  overflow:auto;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling: touch;
}
.mini-cart-list .empty{
  text-align:center; color:#6b7280; padding:28px 10px; font-weight:700;
}

/* Item row: image | meta | qty+price column */
.mini-cart-item{
  display:grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap: 12px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border:1px solid rgba(0,0,0,.05);
}
.mini-cart-item img{
  width:64px; height:64px; border-radius:8px; object-fit:cover; background:#eee;
}

/* Meta stack (prevents text overlap/merge) */
.mini-cart-item .meta{
  min-width:0; /* lets title clamp without pushing other columns */
  display:flex; flex-direction:column; gap:6px;
}
.mini-cart-item .meta .title{
  font-weight:800; font-size:0.98rem; color:#141414;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.mini-cart-item .meta .price{
  color: var(--accent); font-weight:900;
}

/* Qty + remove stack */
.mini-cart-item .controls{
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
  min-width: 92px;
}
.qty{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:10px; padding:6px 8px;
}
.qty-btn{
  width:26px; height:26px; border-radius:8px; border:0; cursor:pointer;
  display:grid; place-items:center; font-weight:900; color:#c760db;
  background:#c760db; transition: transform .12s ease, opacity .2s ease;
}
.qty-btn:active{ transform: translateY(1px); }
.qty-num{ min-width:28px; text-align:center; font-weight:800; color:#c760db; border: 3px white;}

/* Footer */
.mini-cart-footer{
  padding:12px;
  border-top:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,0.9);
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.subtotal{ display:flex; justify-content:space-between; align-items:center; font-weight:800; color:#141414; }
.subtotal strong{ color:#141414; }

/* Actions: primary pink gradient button */
.mini-cart .actions{ display:flex; gap:10px; }
.mini-cart .actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:14px 18px;
  font-weight:900; font-size:16px; letter-spacing:.5px;
  border-radius:12px; text-decoration:none; border:1.5px solid #c760db;
  color:#fff;
  background: linear-gradient(100deg, #da84ea, #c760db);
  background-size:200% 100%; background-position:0% 50%;
  box-shadow: 0 8px 20px rgba(199,96,219,.25), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .12s ease, box-shadow .25s ease, background-position .25s ease;
}
.mini-cart .actions .btn:hover{
  transform: translateY(-1px);
  background-position:100% 50%;
  box-shadow: 0 12px 26px rgba(199,96,219,.35);
}

/* sheen + soft glow */
@keyframes mc-sheen { 0%{ left:-35%; } 60%,100%{ left:120%; } }
.mini-cart .actions .btn::before{
  content:""; position:absolute; top:0; left:-35%;
  width:40%; height:100%; transform:skewX(-20deg);
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  animation: mc-sheen 2.8s linear infinite; pointer-events:none; z-index:1;
}
@keyframes mc-glow { 0%,100%{opacity:.25;} 50%{opacity:.6;} }
.mini-cart .actions .btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow: 0 0 24px 6px rgba(199,96,219,.35);
  animation: mc-glow 3s ease-in-out infinite; pointer-events:none; z-index:0;
}

/* Responsive tweaks */
@media (max-width: 480px){
  .mini-cart{ right: 12px; left: 12px; width: auto; bottom: 84px; }
  .mini-cart-list{ max-height: 50vh; }
}
@media (min-width: 768px){
  .mini-cart-list{ max-height: 420px; }
}
/* =========================
   A) Brand accent (already set)
   ========================= */
:root{
  --accent: #c760db !important;
}

/* =========================
   B) Mini-cart panel — frosted glass frame
   ========================= */
.mini-cart{
  /* glass base */
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(2,6,23,.18);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  overflow: hidden;
  will-change: backdrop-filter, transform;
}
@supports not (backdrop-filter: blur(1px)){
  /* solid fallback if blur unsupported */
  .mini-cart{ background:#ffffff; }
}

/* keep header/footer slightly more opaque for readability */
.mini-cart-header,
.mini-cart-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
}

/* =========================
   C) Header cart icon — pixel-perfect alignment
   ========================= */
.mini-cart-header{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px 12px 48px;
  line-height: 1;             /* avoids vertical drift with Khmer text */
  min-height: 44px;           /* stable tap target */
}
.mini-cart-header::before{
  content:"";
  position:absolute; left:14px; top:50%;
  transform: translateY(-50%);        /* true vertical centering */
  width:22px; height:22px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c760db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6h15l-1.5 7.5H8.5L7 6z'/>\
<circle cx='9' cy='19' r='1.5'/>\
<circle cx='18' cy='19' r='1.5'/>\
</svg>") center/contain no-repeat;
  opacity:.95;
  pointer-events:none;
}

/* =========================
   D) List — spacing so nothing overlaps/merges
   ========================= */
.mini-cart-list{
  padding: 12px;
  max-height: min(48vh, 420px);
  overflow:auto;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling: touch;
}
.mini-cart-item{
  display:grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap:12px; align-items:center;
  padding:10px; border-radius:12px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border:1px solid rgba(0,0,0,.05);
}
.mini-cart-item img{ width:64px; height:64px; border-radius:8px; object-fit:cover; }
.mini-cart-item .meta{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.mini-cart-item .meta .title{
  font-weight:800; font-size:0.98rem; color:#141414;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.mini-cart-item .meta .price{ color: var(--accent); font-weight:900; }
.mini-cart-item .controls{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; min-width:92px; }

/* =========================
   E) Floating cart button — icon centered + blur plate behind
   ========================= */
.floating-cart{
  --fc-size: 72px;
  position: fixed;
  right: 12px; bottom: 12px;
  width: var(--fc-size); height: var(--fc-size);
  border-radius: 22px;
  background: linear-gradient(135deg, #da84ea, #c760db);
  box-shadow: 0 12px 28px rgba(199,96,219,.35);
  display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.55);
  /* subtle glass feel under the icon */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* cart + check icon — optically centered */
.floating-cart::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width: 46%; height: 46%;            /* consistent scale */
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 6h15l-1.5 7.5H8.5L7 6z'/>\
<circle cx='9' cy='19' r='1.5'/>\
<circle cx='18' cy='19' r='1.5'/>\
<path d='M10 12l2 2 4-4'/>\
</svg>") center/contain no-repeat;
  transform: translateY(-1px);        /* tiny lift = optical center */
  opacity:.98; pointer-events:none;
}

/* qty badge — nudge in so it doesn't hang off the corner */
.floating-qty{
  position:absolute; top:-5px; right:-5px;
  min-width:22px; height:22px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif;
  color:#fff; background:#111; border:2px solid #fff; border-radius:999px;
}

/* pulse remains the same */
.floating-cart.pulse{ animation: pulse .42s ease; }
@keyframes pulse{
  0%{ transform: scale(1);   box-shadow: 0 0 0 0 rgba(199,96,219,.45); }
  70%{ transform: scale(1.04); box-shadow: 0 0 0 18px rgba(199,96,219,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(199,96,219,0); }
}

/* =========================
   F) Footer button stays pink gradient (no change)
   ========================= */
.mini-cart .actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:14px 18px; font-weight:900; font-size:16px;
  border-radius:12px; border:1.5px solid var(--accent);
  color:#fff; background: linear-gradient(100deg, #da84ea, #c760db);
  background-size:200% 100%; background-position:0% 50%;
  box-shadow: 0 8px 20px rgba(199,96,219,.25), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .12s ease, box-shadow .25s ease, background-position .25s ease;
}
.mini-cart .actions .btn:hover{
  transform: translateY(-1px);
  background-position:100% 50%;
  box-shadow: 0 12px 26px rgba(199,96,219,.35);
}

/* =========================
   G) Responsive guards
   ========================= */
@media (max-width: 480px){
  .mini-cart{ right: 18px; left:19px; width:auto; bottom: 90px; }
  .mini-cart-list{ max-height: 50vh; }
}
@media (min-width: 768px){
  .mini-cart-list{ max-height: 420px; }
}
/* ===== Mini-cart: icon + glass polish (site-wide override) ===== */

/* 1) Floating cart button: gradient, sheen, and white cart+check icon */
.floating-cart{
  position: relative;
  background: linear-gradient(145deg, #c760db 0%, #e58df0 100%) !important;
  box-shadow: 0 10px 28px rgba(199,96,219,.35),
              inset 0 -1px 0 rgba(255,255,255,.25) !important;
}
.floating-cart > svg{ display:none !important; } /* kill any old inline icon */

/* subtle sheen */
.floating-cart::before{
  content:"";
  position:absolute; inset: 8% 12% auto 12%;
  height: 38%;
  border-radius: 18px;
  background: rgba(255,255,255,.22);
  filter: blur(1.5px);
  pointer-events:none;
}

/* white cart + check icon (inline SVG so no external files needed) */
.floating-cart::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:26px; height:26px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* 2) Mini-cart header icon (same icon, left of the title) */
.mini-cart-header{
  position: relative;
  padding-left: 40px; /* space for icon */
}
.mini-cart-header::before{
  content:"";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E");
  opacity:.95;
}

/* 3) Mini-cart shell: true glass look (replaces solid white) */
.mini-cart{
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 18px 50px rgba(18,22,33,.18) !important;
}

/* 4) Keep brand accent consistent */
:root{
  --accent: #c760db;
}
.mini-cart .price,
.mini-cart .amount,
.mini-cart .subtotal-amount{ color: var(--accent) !important; }
/* === A) Brand + number colors === */
:root{
  --accent: #c760db !important;      /* letters / labels */
  --amount: #c760db !important;      /* numbers like cart.html totals */
}

/* === B) Floating mini-cart: restore position + size (desktop & mobile) === */
#floating-cart.floating-cart{
  position: fixed !important;
  inset: auto !important;            /* cancel any stray top/left */
  right: 18px !important;
  bottom: 18px !important;
  width: 90px !important;
  height: 90px !important;
  z-index: 140 !important;
}
@media (max-width:480px){
  #floating-cart.floating-cart{
    right: 12px !important;
    bottom: 12px !important;
    width: 75px !important;
    height: 75px !important;
  }
}

/* Keep the icon perfectly centered inside the button */
#floating-cart.floating-cart::after{
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* === C) Mini-cart panel: letters in accent, numbers in red === */
#mini-cart .mini-cart-header strong,
#mini-cart .subtotal span,                /* “Subtotal” label */
#mini-cart .meta .title{                  /* product titles */
  color: var(--accent) !important;
}

#mini-cart .price,                        /* per-item price */
#mini-cart .subtotal strong,              /* subtotal amount */
#mini-cart .qty-num{                      /* item quantity number */
  color: var(--amount) !important;
}
/* ==== Floating cart: snap back to bottom-right + perfect icon center ==== */
#floating-cart.floating-cart{
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 22px !important;
  z-index: 130 !important;
  display: grid !important;
  place-items: center !important;   /* hard center the icon container */
  overflow: hidden;
}

/* keep the purple look you already have */
#floating-cart.floating-cart{
  background: linear-gradient(145deg, #c760db 0%, #e58df0 100%) !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(199,96,219,.35), inset 0 -1px 0 rgba(255,255,255,.25);
}

/* sheen stays beneath the icon */
#floating-cart.floating-cart::before{
  content:"";
  position:absolute; inset: 10% 14% auto 14%;
  height: 36%;
  border-radius: 18px;
  background: rgba(255,255,255,.22);
  filter: blur(1.5px);
  pointer-events:none;
  z-index: 1; /* under icon */
}

/* the white cart+check icon: pixel-perfect center */
#floating-cart.floating-cart::after{
  content:"";
  position:absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);  /* true centering */
  width: 30px; height: 30px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E");
  z-index: 2; /* above sheen */
  pointer-events:none;
}

/* badge: keep it clear and anchored to the corner */
.floating-qty{
  position:absolute; top:-5px; right:-5px;
  min-width:22px; height:22px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif;
  color:#c760db;                 /* red number like cart.html */
  background:#fff; border:2px solid #c760db;
  border-radius:999px;
  z-index: 3;
}

/* ==== Keep the button out of the way when the mini-cart is open ==== */
/* Try several common "open" states so one will match your JS. */
html:has(#mini-cart.open)   #floating-cart.floating-cart,
html:has(#mini-cart.active) #floating-cart.floating-cart,
html:has(#mini-cart.show)   #floating-cart.floating-cart,
html:has(#mini-cart[open])  #floating-cart.floating-cart{
  opacity: 0; transform: translateY(6px) scale(.98);
  pointer-events: none;
}

/* Fallback if :has() isn't supported — add 'miniCart-open' to <html> in JS */
html.miniCart-open #floating-cart.floating-cart{
  opacity: 0; transform: translateY(6px) scale(.98);
  pointer-events: none;
}

/* ==== Typography inside the mini-cart (titles/labels = #c760db, numbers = red) ==== */
:root{ --accent:#c760db; --amount:#c760db; }

#mini-cart .mini-cart-header strong,
#mini-cart .meta .title,
#mini-cart .subtotal span{ color: var(--accent) !important; }

#mini-cart .price,
#mini-cart .subtotal strong,
#mini-cart .qty-num{ color: var(--amount) !important; }
/* === Floating mini-cart: exact icon centering + badge fully inside === */
#floating-cart.floating-cart{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  display: grid !important;
  place-items: center !important;   /* hard center the content box */
  overflow: hidden !important;      /* keep sheen clipped, not the badge */
  background: linear-gradient(145deg, #c760db 0%, #e58df0 100%) !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(199,96,219,.35), inset 0 -1px 0 rgba(255,255,255,.25);
}

/* sheen (stays under the icon) */
#floating-cart.floating-cart::before{
  content:"";
  position:absolute; inset: 12% 16% auto 16%;
  height: 36%;
  border-radius: 18px;
  background: rgba(255,255,255,.20);
  filter: blur(1.5px);
  pointer-events:none;
  z-index: 1;
}

/* white cart + check icon — pixel perfect centre */
#floating-cart.floating-cart::after{
  content:"";
  position:absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) !important;  /* true centre */
  width: 32px; height: 32px;                    /* scale here if needed */
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index: 2;
}

/* badge: sit fully inside the rounded square (no clipping) */
.floating-qty{
  position:absolute;
  top: 6px;                      /* was negative — now inside */
  right: 6px;                    /* was negative — now inside */
  min-width: 22px; height: 22px; padding: 0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif;
  color: #ff4242;                /* red number */
  background: #fff;
  border: 2px solid #ff4242;     /* red stroke */
  border-radius: 999px;
  z-index: 3;
}
/* ========= FLOATING MINI-CART: true center + badge fully visible ========= */

/* The button itself */
#floating-cart.floating-cart{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;

  /* Center any children (including pseudo-elements) */
  display: grid !important;
  place-items: center !important;

  background: linear-gradient(145deg, #c760db 0%, #e58df0 100%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 28px rgba(199,96,219,.35), inset 0 -1px 0 rgba(255,255,255,.25) !important;
  overflow: hidden !important; /* clip sheen, not the badge */
}

/* Soft sheen under the icon */
#floating-cart.floating-cart::before{
  content:"";
  width: 68%;
  height: 36%;
  border-radius: 18px;
  background: rgba(255,255,255,.20);
  filter: blur(1.5px);
  pointer-events:none;
  /* CENTER VIA GRID (no absolute offsets) */
  position: static !important;
  justify-self: center !important;
  align-self: center !important;
}

/* >>> ICON: remove ALL previous offsets and let grid center it <<< */
#floating-cart.floating-cart::after{
  content:"";
  width: 34px;      /* adjust this size if you want it bigger/smaller */
  height: 34px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E");

  /* RESET any earlier absolute centering so it can't drift */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;

  /* Center via grid */
  justify-self: center !important;
  align-self: center !important;

  pointer-events: none;
}

/* Badge: keep fully inside the rounded square (no clipping) */
.floating-qty{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  min-width: 22px; height: 22px; padding: 0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif;
  color: #ff4242;                 /* red number */
  background: #fff;
  border: 2px solid #ff4242;      /* red stroke */
  border-radius: 999px;
  z-index: 3;
}
/* ========= FLOATING MINI-CART: perfect center + always visible ========= */

/* 0) Remove older icon/sheen pseudo-elements so nothing fights centering */
#floating-cart.floating-cart::before,
#floating-cart.floating-cart::after{ content:none !important; }

/* 1) Button box + multi-layer background (icon + sheen + purple gradient) */
#floating-cart.floating-cart{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  z-index: 150 !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(199,96,219,.35), inset 0 -1px 0 rgba(255,255,255,.25);
  display: block !important; /* backgrounds center relative to the box */

  /* Top layer: ICON (exact center); Middle: sheen; Bottom: gradient */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='9' cy='20' r='1.5'/>\
<circle cx='17' cy='20' r='1.5'/>\
<path d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/>\
<path d='M10 12l2 2 4-4'/>\
</svg>"),
    radial-gradient(120% 60% at 50% 28%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, #c760db 0%, #e58df0 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 50% 30%, 50% 50%;
  background-size: 34px 34px, 70% 36%, 100% 100%;
}

/* 2) Badge fully inside (no clipping) */
.floating-qty{
  position:absolute !important;
  top: 6px !important;
  right: 6px !important;
  min-width: 22px; height: 22px; padding: 0 6px;
  display:flex; align-items:center; justify-content:center;
  font: 800 12px/1 system-ui,-apple-system,"Kantumruy",ui-sans-serif;
  color:#c760db; background:#fff;
  border:2px solid #c760db; border-radius:999px;
  z-index: 160;
}

/* 3) DON’T hide the floating button when mini-cart opens */
html:has(#mini-cart.open)   #floating-cart.floating-cart,
html:has(#mini-cart.active) #floating-cart.floating-cart,
html:has(#mini-cart.show)   #floating-cart.floating-cart,
html:has(#mini-cart[open])  #floating-cart.floating-cart,
html.miniCart-open           #floating-cart.floating-cart{
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* 4) Mobile size */
@media (max-width: 480px){
  #floating-cart.floating-cart{ width: 76px !important; height: 76px !important; }
}
/* ===== Floating mini-cart: perfect center + always visible + safe badge ===== */

/* Button box */
#floating-cart.floating-cart{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #c760db 0%, #e58df0 100%) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 28px rgba(199,96,219,.35), inset 0 -1px 0 rgba(255,255,255,.25) !important;
  overflow: hidden !important;
  z-index: 150 !important;
  position: fixed !important;
  /* ensure pseudo-elements position relative to this box */
  position: fixed !important;
}

/* Remove any older pseudo rules that might hide the icon */
#floating-cart.floating-cart::before,
#floating-cart.floating-cart::after{
  content: "" !important;
}

/* Sheen (under the icon) */


/* ICON — bulletproof centering */
#floating-cart.floating-cart::after{
  position: absolute !important;
  inset: 0 !important;              /* tie to all four edges */
  margin: auto !important;          /* centers horizontally + vertically */
  width: 34px !important;
  height: 34px !important;
  transform: none !important;       /* kill any previous transforms */
  background: center / contain no-repeat !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Cpath d='M10 12l2 2 4-4'/%3E%3C/svg%3E") !important;
  z-index: 2 !important;
  pointer-events:none !important;
}

/* Badge — inside the rounded square so it never clips */
.floating-qty{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 800 12px/1 system-ui, -apple-system, "Kantumruy", ui-sans-serif !important;
  color: #c760db !important;
  background: #fff !important;
  border: 2px solid #c760db !important;
  border-radius: 999px !important;
  z-index: 3 !important;
}

/* Keep the floating button visible even when the mini-cart is open */
html:has(#mini-cart.open)   #floating-cart.floating-cart,
html:has(#mini-cart.active) #floating-cart.floating-cart,
html:has(#mini-cart.show)   #floating-cart.floating-cart,
html:has(#mini-cart[open])  #floating-cart.floating-cart,
html.miniCart-open          #floating-cart.floating-cart{
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Optional: mobile size */
@media (max-width: 480px){
  #floating-cart.floating-cart{ width: 76px !important; height: 76px !important; }
}



/* === Sheen for product Add to Cart buttons (safe, non-intrusive) === */
:root{ --sheen-speed: 1.15s; }

.product-card .cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;          /* contain pseudo elements */
}

.product-card .cta::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,.20), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;      /* subtle gloss */
}

.product-card .cta::after{
  content: "";
  position: absolute;
  top: -30%; bottom: -30%; width: 40%;
  z-index: 2;
  background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.65) 45%,
      rgba(255,255,255,0) 60%);
  transform: translateX(-140%) rotate(12deg);
  filter: blur(.2px);
  pointer-events: none;        /* never block clicks */
}

/* trigger shine on hover & keyboard focus */
.product-card .cta:hover::after,
.product-card .cta:focus-visible::after{ animation: sheen var(--sheen-speed) ease-in-out 1; }

/* optional classes: continuous loop or one-time */
.product-card .cta.sheen-loop::after{ animation: sheen var(--sheen-speed) ease-in-out infinite; }
.product-card .cta.sheen-once::after{ animation: sheen var(--sheen-speed) ease-in-out 1; }

@keyframes sheen{
  0%   { transform: translateX(-140%) rotate(12deg); opacity: 0; }
  15%  { opacity: .9; }
  50%  { opacity: 1; }
  100% { transform: translateX(140%) rotate(12deg); opacity: 0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-card .cta::after{ animation: none !important; }
}



/* === CSS-only sheen for Add to Cart (override) === */
.products-grid .product-card .cta.add-and-gos,
.products-grid .product-card .cta.add-only{
  position: relative !important;
  overflow: hidden !important;
  z-index: 0;
}

.products-grid .product-card .cta.add-and-gos::before,
.products-grid .product-card .cta.add-only::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
}

.products-grid .product-card .cta.add-and-gos::after,
.products-grid .product-card .cta.add-only::after{
  content: "";
  position: absolute;
  top: -30%; bottom: -30%; width: 40%;
  left: -140%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 45%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  opacity: 0;
}

.products-grid .product-card .cta.add-and-gos:hover::after,
.products-grid .product-card .cta.add-and-gos:focus-visible::after,
.products-grid .product-card .cta.add-only:hover::after,
.products-grid .product-card .cta.add-only:focus-visible::after{
  animation: cart-sheen 1.05s ease-in-out 1;
}

@keyframes cart-sheen{
  0%   { left: -140%; opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: 1; }
  100% { left:  140%; opacity: 0; }
}

/* mobile: trigger once since there's no hover */
@media (hover: none){
  .products-grid .product-card .cta.add-and-gos::after,
  .products-grid .product-card .cta.add-only::after{
    animation: cart-sheen 1.05s ease-in-out 1;
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .products-grid .product-card .cta.add-and-gos::before,
  .products-grid .product-card .cta.add-only::before,
  .products-grid .product-card .cta.add-and-gos::after,
  .products-grid .product-card .cta.add-only::after{ display:none; }
}
.two-images-row {
  display: flex;        /* puts them in 1 row */
  gap: 20px;        
cursor: pointer;    /* space between the 2 images */
}

.img-col {
  flex: 1;              /* each column takes half the row */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: 99px #0b0b0b;
cursor: pointer;
}

/* base style for both images */
.custom-img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
cursor: pointer;
  box-shadow: 99px #0b0b0b;
}

/* you control the size here */
.img-1 {
  width: 510px;   
cursor: pointer;      /* change this anytime */
}

.img-2 {
  width: 510px;   
cursor: pointer;      /* and this too */
}

.promotion-text {
  font-size: 36px;
  color: #c760db;

}

promotion-click{
  cursor: pointer;
}

@media (max-width: 900px){
 .promotion-text {font-size: 30px;}
} 

/* 1 row, 2 column layout (if you don't have this yet) */
.two-images-row {
  display: flex;
  gap: 20px;
}

.img-col {
  flex: 1;
  position: relative;      /* needed for shine effect */
  overflow: hidden;        /* hide shine overflow */
}

/* base image style */
.custom-img {
  display: block;
  width: 100%;             /* or a fixed width if you like */
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease;
  cursor: pointer;
}

/* slight zoom + brightness on hover */
.img-col:hover .custom-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* SHINY STRIPE */
.img-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;  /* start outside */
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
}

/* When hover, play shine animation */
.img-col:hover::before {
  opacity: 1;
  animation: shine 0.8s ease-out;
}

/* Keyframes for shine moving across the image */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}
/* Layout if you need it */
.two-images-row {
  display: flex;
  gap: 20px;
}

.img-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* GLOWING / MOVING BORDER AROUND IMAGE */
.promo-glow {
  position: relative;
  display: inline-block;
  padding: 4px; /* thickness of border */
  border-radius: 20px;

  /* animated gradient border */
  background: linear-gradient(
    120deg,
    rgba(199, 96, 219, 1),
    rgba(255, 255, 255, 0.9),
    rgba(199, 96, 219, 1)
  );
  background-size: 250% 250%;

  animation: glowBorder 3s linear infinite;
}

/* image inside the glowing border */
.promo-glow img {
  display: block;
  border-radius: 16px;   /* slightly smaller than wrapper */
  width: 100%;           /* or set a fixed size if you want */
  height: auto;
}

/* optional: small zoom when hover */
.promo-glow:hover img {
  transform: scale(1.03);
  transition: transform 0.25s ease;
}

/* ANIMATION: move gradient + soft glow */
@keyframes glowBorder {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 12px rgba(199, 96, 219, 0.4);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 24px rgba(199, 96, 219, 0.8);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 12px rgba(199, 96, 219, 0.4);
  }
}
/* ==== 1 row 2 column (if not already) ==== */
.two-images-row {
  display: flex;
  gap: 20px;
}

.img-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==== Glowing border button around images ==== */
.promo-glow {
  position: relative;
  display: inline-block;
  padding: 4px;             /* thickness of glowing frame */
  border-radius: 20px;
  border: none;
  background: transparent;
  cursor: pointer;

  /* animated gradient border */
  background: linear-gradient(
    120deg,
    rgba(199, 96, 219, 1),
    rgba(255, 255, 255, 0.9),
    rgba(199, 96, 219, 1)
  );
  background-size: 250% 250%;

  animation: glowBorder 3s linear infinite;
}

.promo-glow img {
  display: block;
  border-radius: 16px;  /* slightly smaller so border shows */
  width: 100%;          /* or fixed width if you want */
  height: auto;
  transition: transform 0.25s ease;
}

.promo-glow:hover img {
  transform: scale(1.03);
}

/* animated glow */
@keyframes glowBorder {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 12px rgba(199, 96, 219, 0.4);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 24px rgba(199, 96, 219, 0.8);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 12px rgba(199, 96, 219, 0.4);
  }
}

/* ==== Popup overlay with blur ==== */
.promo-overlay {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45); /* dark transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
}

/* when active, show it */
.promo-overlay.active {
  display: flex;
}

/* Popup content */
.promo-popup {
  padding: 9px;                /* was 16px → thinner frame */
  border-radius: 18px;         /* a bit tighter corners */
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.6);

  max-width: 90vw;
  max-height: vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                   /* less space between img + button */

  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}


/* animate in when overlay active */
.promo-overlay.active .promo-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Big image inside popup */
#promoPopupImg {
  width: 100%;              /* fill the frame width */
  max-height: 70vh;         /* keep it from being too tall */
  border-radius: 18px;      /* slight inner rounding */
  display: block;
  object-fit: contain;      /* keep natural aspect ratio (not 1/1) */
}

/* Shop button */
.promo-shop-btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9ae2, #c760db);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 16px rgba(199, 96, 219, 0.7);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-shop-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(199, 96, 219, 0.9);
}

/* Close button (X) */
.promo-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* === Dark blur overlay for entry popup === */

/* Popup frame */


/* 1:1 poster box */

/* Close (X) button */
.entry-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Simple pop-in animation */
@keyframes entryPopupIn {
  0% {
    transform: translateY(12px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
/* Dark blurred background */
.entry-overlay {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}

/* Show when active */
.entry-overlay.active {
  display: flex;
}

/* Shell = vertical layout: [frosted frame] + [Explore button] */
.entry-popup-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;          /* space between image frame and button */
}

/* Frosted frame around the image only */
.entry-popup {
  position: relative;
  padding: 8px;       /* thickness of transparent frame */
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.7);
  animation: entryPopupIn 0.35s ease-out;
}

/* 1:1 poster box */
.entry-poster {
  width: 80vw;
  max-width: 360px;   /* phone size */
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
}

/* bigger on desktop */
@media (min-width: 992px) {
  .entry-poster {
    width: 360px;
    max-width: 360px;
  }
}

/* Image inside poster */
.entry-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Close (X) button */
.entry-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Explore button BELOW the frame */
.entry-explore-btn {
  padding: 0.65rem 1.9rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ff9ae2, #c760db);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;

  box-shadow: 0 0 16px rgba(199, 96, 219, 0.7);
  transform-origin: center;
  animation: explorePulse 2.2s ease-in-out infinite;

}
@media (min-width: 992px) {
  .entry-explore-btn {
    /* ~45% larger than mobile */
    padding: 0.95rem 2.75rem;  /* 0.65 → ~0.95, 1.9 → ~2.75 */
    font-size: 1.45rem;
  }
}

/* Hover effect */
.entry-explore-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 22px rgba(199, 96, 219, 0.9);
}

/* Popup pop-in animation */
@keyframes entryPopupIn {
  0% {
    transform: translateY(12px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Explore button pulse animation */
@keyframes explorePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(199, 96, 219, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 22px rgba(199, 96, 219, 0.95);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(199, 96, 219, 0.4);
  }
}
@media (min-width: 992px) {
  .entry-poster {
    width: 735px;      /* ~75% bigger than 420px */
    max-width: 735px;
  }
}
/* ==== Promo overlay (background blur) ==== */
.promo-overlay {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
}

.promo-overlay.active {
  display: flex;
}

/* Shell: image frame + button below */
.promo-popup-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;          /* space between image frame and Go shop */
}

/* Frosted frame around the image ONLY */
.promo-popup {
  position: relative;
  padding: 8px;                     /* border/frame thickness */
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.7);

  max-width: min(92vw, 915px);      /* outer card width control */
  box-sizing: border-box;
  overflow: hidden;                 /* <- clip inner content to rounded corners */

  animation: promoPopupIn 0.3s ease-out;
}

/* Big image inside (keep original aspect ratio) */
#promoPopupImg {
  max-width: min(90vw, 915px);  /* 720px → ~915px (27% bigger) */
  max-height: 80vh;             /* allows it to grow taller too */
  border-radius: 18px;
  display: block;
  object-fit: contain;
}


/* X close button */
.promo-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Go shop button BELOW the frame (outside border) */
.promo-shop-btn {
  padding: 0.65rem 1.9rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ff9ae2, #c760db);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;

  font-family: "Cal Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 1rem;

  box-shadow: 0 0 16px rgba(199, 96, 219, 0.7);
  transform-origin: center;
  animation: promoBtnPulse 2.2s ease-in-out infinite;
}

/* Bigger Go shop on desktop */
@media (min-width: 992px) {
  .promo-shop-btn {
    padding: 0.95rem 2.75rem;
    font-size: 1.2rem;
  }
}

.promo-shop-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 22px rgba(199, 96, 219, 0.95);
}

/* Popup pop-in animation */
@keyframes promoPopupIn {
  0% {
    transform: translateY(12px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Soft pulse (like Explore button vibe) */
@keyframes promoBtnPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(199, 96, 219, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 22px rgba(199, 96, 219, 0.95);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(199, 96, 219, 0.4);
  }
}
/* Floating customer support button (above mini cart) */
.floating-support{
  --fc-size: 90px;
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: var(--fc-size);
  height: var(--fc-size);

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(135deg, #da84ea, #c760db);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);

  cursor: pointer;
  z-index: 140;
  padding: 0;
}

.floating-support .support-icon{
  width: 52%;
  height: 52%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px){
  .floating-support{
    --fc-size: 76px;
    right: 12px;
    bottom: 12px;
  }
}

}



/* === Customer Support slide-in panel (right side) === */
:root{
  --support-nav-offset: 80px;
}

.support-panel{
  position: fixed;
  top: var(--support-nav-offset);
  right: 0;
  width: min(420px, 100vw);
  height: calc(100vh - var(--support-nav-offset));
  background: #ffffff;
  box-shadow: -18px 0 50px rgba(15,23,42,.18);
  z-index: 180;

  transform: translateX(100%);
  transition: transform .24s ease;
  display: flex;
}

.support-panel.open{
  transform: translateX(0);
}

/* When panel is open, hide floating support button */
.support-panel.open ~ .floating-support{
  opacity: 0;
  pointer-events: none;
}

.support-panel-inner{
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow: hidden;
  font-family: "Cal Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.support-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-panel-title{
  margin: 0;
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #111827;
}

.support-panel-close{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #111827;
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Greeting bubble */
.support-greeting-card{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #9f9f9f;
  color: #ffffff;
  border-radius: 18px;
  padding: 10px 14px;
}

.support-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-avatar-letter{
  font-weight: 700;
  font-size: 1.2rem;
  color: #c760db;
}

.support-greeting-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .9rem;
}

.support-greeting-line{
  margin: 0;
}

/* Problem buttons */
.support-problem-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-problem{
  border-radius: 18px;
  border: none;
  background: #a3a3a3;
  color: #ffffff;
  padding: 10px 14px;
  text-align: left;
  font-size: .9rem;
  cursor: pointer;
}

/* Bottom message row */
.support-message-bar{
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.support-message-field{
  flex: 1;
  border-radius: 18px;
  background: #a3a3a3;
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
}

.support-message-placeholder{
  opacity: .9;
}

.support-message-dots{
  font-weight: 700;
}

.support-send-btn{
  border-radius: 18px;
  border: none;
  padding: 0 18px;
  background: #c760db;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile: panel becomes bottom sheet */
@media (max-width: 720px){
  .support-panel{
    width: 100vw;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: min(60vh, 520px);
    box-shadow: 0 -18px 50px rgba(15,23,42,.26);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
  .support-panel.open{
    transform: translateY(0);
  }
}
/* === Floating customer support (match floating cart box) === */
.floating-support{
  position: fixed;
  right: 18px;
  bottom: 110px; /* 18px gap above the 90px cart */
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: #c760db;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  z-index: 140;
  padding: 0;
}

/* remove any old fancy ring/animation */
.floating-support::before{
  content: none !important;
}

/* inner PNG icon */
.floating-support .support-icon{
  width: 52%;
  height: 52%;
  object-fit: contain;
  display: block;
}

/* Mobile: match cart size on small screens */
@media (max-width: 480px){
  .floating-support{
    right: 16px;
    bottom: 100px; /* 12px + 75px cart + small gap */
    width: 75px;
    height: 75px;
  }
}

/* === Support half-note overlay (under nav, half page) === */
.support-overlay{
  position: fixed;
  left: 0;
  right: 0;
  top: 64px; /* starts under your fixed nav bar */
  bottom: 0;

  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.3),
    rgba(15, 23, 42, 0.55)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: none;
  align-items: flex-end;   /* panel hugs bottom on mobile */
  justify-content: center;
  z-index: 180;
}

/* show when JS adds .open */
.support-overlay.open{
  display: flex;
}

/* The white support panel */
.support-panel{
  width: min(480px, 100% - 24px);
  max-height: 60vh;        /* about half screen on mobile */
  background: rgba(255,255,255,0.96);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 40px rgba(15,23,42,0.45);
  padding: 16px 18px 18px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Desktop: card on the right side, more “chat panel” style */
@media (min-width: 992px){
  .support-overlay{
    align-items: center;
    justify-content: flex-end;
  }
  .support-panel{
    border-radius: 24px;
    max-height: 70vh;
    margin-right: 24px;
  }
}

/* Header area (title + close) */
.support-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-title-wrap{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-title{
  margin: 0;
  font-family: "Cal Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
}

.support-subtitle{
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

/* X button */
.support-close{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(15,23,42,0.9);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Body + chips */
.support-body{
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
  overflow-y: auto;
  padding-right: 4px;
}

.support-text{
  margin: 0 0 12px;
}

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

.support-chip{
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Hide support button when support panel is open */
.support-overlay.open ~ .floating-support{
  opacity: 0;
  pointer-events: none;
}




.darila-title {
  justify-content: center;
  align-items: center;
display: flex;
}


.hero {
  top: 1%;
}
/* ==== VIDEO SECTION – TikTok style ==== */

/* no white background; blend with page */
.video-section {
  padding: 40px 0 60px;
  background: transparent;
}

/* center "Video highlight" */
.video-section-header {
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.video-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(199, 96, 219, 0.08);
  color: #c760db;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* wrapper for strip + arrows */
.video-strip-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* horizontal strip */
.video-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 48px 10px; /* leave space for arrows */
}

.video-strip::-webkit-scrollbar {
  height: 4px;
}

.video-strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 999px;
}

/* arrow buttons ON TOP of videos */
.video-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.4);
}

.video-nav-prev {
  left: 26px;
}

.video-nav-next {
  right: 26px;
}

.video-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

/* video card = reel */
.video-card {
  flex: 0 0 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
  scroll-snap-align: center;
  opacity: 0.4;
  transform: scale(0.94);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

/* 9:16 frame (1080x1920 ratio) */
.video-frame {
  width: 100%;
  aspect-ratio: 9 / 16;   /* keeps 1080x1920 ratio */
  position: relative;
}

.video-card.active {
  opacity: 1;
  transform: scale(1);
}

/* actual video fill */
.video-card video,
.video-card iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* top controls (mute + fullscreen) */
.video-top-controls {
  position: absolute;
  top: 10px;
  left: 10px;   /* move to left */
  right: auto;  /* stop sticking to right */
  display: flex;
  gap: 8px;
  z-index: 6;
}


.video-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}

/* swap icons when muted */
.video-icon-btn .icon-sound-off {
  display: none;
}

.video-icon-btn.is-muted .icon-sound-on {
  display: none;
}

.video-icon-btn.is-muted .icon-sound-off {
  display: inline;
}

/* dots under videos */
.video-dots {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.video-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
  padding: 0;
}

.video-dot.active {

  background: #c760db;
}

/* desktop size */
@media (min-width: 1024px) {
  .video-card {
    flex-basis: 260px;
  }
}

/* PHONE VIEW – center main video, show sides a bit */
@media (max-width: 768px) {
  .video-strip-wrapper {
    padding: 0 10px;
  }

  .video-strip {
    padding: 0 16vw 10px;   /* so we see left + right a little */
  }

  .video-card {
    flex: 0 0 72vw;         /* main video ~72% of screen width */
  }

  .video-nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .video-nav-prev {
    left: 12px;
  }

  .video-nav-next {
    right: 12px;
  }
}
/* === Make "Video highlight" look like main section headers === */
.video-section-header {
  max-width: 1200px;
  margin: 40px auto 16px;
  padding: 0 20px;
  text-align: center;
  display: block;
}

.video-tag-pill {
  margin-top: -90px;
  font-family: "cal sans";
  display: block;
  background: none;          /* remove pill */
  border-radius: 0;
  padding: 0;
  font-size: 36px;           /* similar size to "Promotion" etc */
  font-weight: 900;
  color: #c760db;            /* brand purple */
  text-transform: none;
}

/* === Make arrow buttons purple === */
.video-nav {
  background: #c760db;       /* brand purple */
  color: #ffffff;            /* white icon */
  box-shadow: 0 10px 22px rgba(199, 96, 219, 0.4);
}

.video-nav:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 12px 26px rgba(199, 96, 219, 0.5);
}
/* === Better fullscreen for vertical videos (PC + phone) === */

/* When the <video> itself goes fullscreen */
.video-frame video:fullscreen,
.video-frame video:-webkit-full-screen,
.video-frame video:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;   /* show whole 1080x1920, no cut */
  background-color: #000;
}

/* When the .video-frame container is fullscreen instead of the video */
.video-frame:fullscreen,
.video-frame:-webkit-full-screen,
.video-frame:-moz-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

/* Make sure video inside fullscreen frame also fits nicely */
.video-frame:fullscreen video,
.video-frame:-webkit-full-screen video,
.video-frame:-moz-full-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
/* === Floating full-view video overlay (PC + phone) === */

.video-card.is-fullscreen-overlay {
  position: fixed;
  inset: 0;                  /* full browser window */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  margin: 0;
  padding: 0;
}

/* The vertical video box in the middle */
.video-card.is-fullscreen-overlay .video-frame {
  width: min(520px, 100vw - 32px);
  height: min(95vh, 100vh - 64px);
  position: relative;
}

/* Make sure the video is NOT cropped in overlay */
.video-card.is-fullscreen-overlay .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* show full 1080x1920 */
  border-radius: 20px;

}

/* Keep the top controls in a nice place in overlay */
.video-card.is-fullscreen-overlay .video-top-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* On small phones: edge-to-edge full view */
@media (max-width: 720px) {
  .video-card.is-fullscreen-overlay .video-frame {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .video-card.is-fullscreen-overlay .video-frame video {
    border-radius: 0;
  }
}
/* === Floating full-view video overlay (PC + phone) === */

.video-card.is-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  margin: 0;
  padding: 0;
}

/* The vertical video box in the middle */
.video-card.is-fullscreen-overlay .video-frame {
  width: min(520px, 100vw - 32px);
  height: min(95vh, 100vh - 64px);
  position: relative;
}

/* Make sure the video is NOT cropped in overlay */
.video-card.is-fullscreen-overlay .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 20px;
  background-color: #000;
}

/* Keep the top controls in a nice place in overlay */
.video-card.is-fullscreen-overlay .video-top-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* On small phones: edge-to-edge full view */
@media (max-width: 720px) {
  .video-card.is-fullscreen-overlay .video-frame {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .video-card.is-fullscreen-overlay .video-frame video {
    border-radius: 0;
  }
}
/* Force smaller floating buttons on small phones */
@media (max-width: 480px){
  /* mini floating cart */
  #floating-cart.floating-cart{
    width: 70px !important;
    height: 70px !important;
  }

  /* customer support button */
  .floating-support{
    width: 70px !important;
    height: 70px !important;
bottom: 96px;
  }
}
.site-footer {
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: #555;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* "We Accept:" + icons on one line */
.accept-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;        /* space between label and icons */
  flex-wrap: wrap;  /* if screen is small, they wrap nicely */
}

/* row for the logos */
.accept-line .icons {
  display: flex;
  align-items: center;
  gap: 8px;         /* space between each logo */
}

/* logo size */
.pay-icon {
  height: 28px;     /* adjust to taste */
  width: auto;
  display: block;
  border-radius: 3px;
}
.panel payment {
  display:block;
  background-color: #7a7a7a;
  width: 60px;
  height: auto;
}
.darila-shell {
  max-width: 1280px;   /* your main design width */
  margin: 0 auto;      /* center on the screen */
  padding: 1.5rem 1.25rem; /* little space left / right */
}
/* TEMP FIX: scale down whole page on normal desktops */
@media (min-width: 1200px) and (max-width: 1920px) {
  body {
    zoom: 0.85; /* try 0.9 or 0.85, see what feels right */
  }
}

/* ===== Simple global page loader ===== */
#darila-page-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;              /* white background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Hide loader when page is ready */
body.darila-loaded #darila-page-loader {
  opacity: 0;
  visibility: hidden;
}

.darila-loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.darila-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #e9d7f6;       /* light purple/grey */
  border-top-color: #c760db;       /* your purple */
  animation: darila-spin 0.8s linear infinite;
}

.darila-loader-text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  color: #c760db;                  /* purple text */
}

/* Spin animation */
@keyframes darila-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Make highlight videos look clickable */
#video-strip video {
  cursor: pointer;
}
/* Center play/pause overlay on highlight videos */
.video-frame {
  position: relative;
}

.video-center-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 2;
  opacity: 0;              /* HIDDEN by default */
  pointer-events: none;    /* Not clickable when hidden */
  transition: opacity 0.6s ease;  /* fade ~0.6s */
}

.video-center-icon {
  font-size: 22px;
  line-height: 1;
  color: #c760db;          /* your purple */
}

/* When video is paused → show & clickable */
.video-card.is-paused .video-center-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* When video is playing → hidden (fades out) */
.video-card.is-playing .video-center-toggle {
  opacity: 0;
  pointer-events: none;
}