@font-face {
  font-family: 'Daily';
  src: url('Typos%20Sophie/Daily.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CenturyGothic';
  src: url('Typos%20Sophie/CenturyGothic.ttc') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --bg: linear-gradient(180deg,#E8F3F8,#F0F8FC);
  --card: #ffffff;
  --accent: #C7499F;
  --accent-2: #F5E6F0;
  --muted: #6B7A90;
  --radius: 12px;
  --max-width: 2160px;
}
*{box-sizing:border-box}
body{font-family:Montserrat,system-ui,Arial,sans-serif;margin:0;background:var(--bg);color:#3a2f33;padding-top:56px;max-width:100vw;overflow-x:hidden}
.container{width:100%;max-width:100%;margin:0 auto;padding:0 12px;box-sizing:border-box}
.site-header{background:#E8F3F8;padding:12px 0;box-shadow:0 1px 0 rgba(45,74,156,0.08);position:fixed;top:0;left:0;right:0;width:100%;z-index:100}
.header-inner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;position:relative}
.logo{
  font-family:'Daily',Playfair Display,serif;
  font-size:1.8rem;
  letter-spacing:0.05em;
  color:#2D4A9C;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  transition:opacity .2s ease;
  font-weight:400;
}
.logo:hover{
  opacity:0.75;
}
.logo span{
  font-size:1.9rem;
  font-weight:800;
  color:#2D4A9C;
  letter-spacing:0.06em;
  -webkit-text-stroke:0.5px #8b5a7f;
  text-shadow:0 1px 2px rgba(45,74,156,0.1);
}
.btn{background:transparent;border:none;padding:8px 12px;border-radius:999px;font-weight:600;color:#6b2840;cursor:pointer}
.btn:hover{background:rgba(183,101,137,0.06)}
.account{margin-left:auto;font-weight:700;background:transparent;border:none;color:#6b2840;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;transition:background 0.2s ease}
.account:hover{background:rgba(183,101,137,0.06)}
.cart{margin-left:auto;font-weight:600}
.hamburger{border:none;background:transparent;font-size:1.6rem;cursor:pointer;color:#6b2840}


.nav-overlay{position:fixed;inset:0;background:rgba(12,6,8,0.4);opacity:0;pointer-events:none;transition:opacity .15s}
.nav-overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.nav-drawer{position:fixed;left:0;top:0;height:100%;width:280px;background:white;transform:translateX(-110%);transition:transform .2s;padding:18px;box-shadow:18px 0 40px rgba(60,30,40,0.06);display:flex;flex-direction:column}
.nav-drawer[aria-hidden="false"]{transform:translateX(0)}
.nav-drawer-inner{display:flex;flex-direction:column;height:100%}
.nav-drawer .nav-drawer-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;flex:1}


.nav-drawer .nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;background:transparent;border:1px solid transparent}
.nav-drawer .nav-item:hover{background:rgba(230,200,215,0.06)}
.nav-submenu{list-style:none;padding:0;margin:6px 0 0 0;max-height:0;overflow:hidden;opacity:0;transition:max-height .32s ease,opacity .22s ease}
.nav-submenu.show{display:flex;flex-direction:column;gap:6px;max-height:420px;opacity:1;padding:8px 6px 6px 6px}
.nav-submenu li a{
  padding:6px 10px;
  border-radius:6px;
  display:block;
  font-size:0.65rem;
  text-decoration:none;
  color:inherit;
}
.nav-submenu li a:hover{ text-decoration:none; background:rgba(230,200,215,0.04) }
.nav-submenu li a.active{background:linear-gradient(90deg,var(--accent-2),#fff);font-weight:700;color:#2D4A9C;text-decoration:none}
.nav-item[aria-expanded="true"]{font-weight:700}

.nav-drawer .nav-drawer-list > .btn,
.nav-drawer .nav-item{
  font-family:Montserrat,system-ui,Arial,sans-serif;
  font-size:1rem;
  font-weight:700;
  color:#6b2840;
  padding:10px 12px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:transparent;
  border:1px solid transparent;
  text-decoration:none;
}
.nav-drawer .nav-drawer-list > .btn:hover,
.nav-drawer .nav-item:hover{
  background:rgba(230,200,215,0.06);
}
.nav-drawer .nav-drawer-list > .btn.active{
  background:var(--accent-2);
  color:#2D4A9C;
}
.nav-drawer .nav-submenu li a{font-family:Playfair Display,serif;font-size:1.05rem}


.nav-overlay{z-index:10020}
.nav-drawer{z-index:10021}


@media (min-width: 1920px){
  :root{--max-width:1080px}
  .container{padding: 0 24px}
  .header-inner .logo{font-size: 1.8rem}
  .slide img{height: 720px}
  .card img{height: 220px}
  .grid{grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))}
  .footer-map iframe{height: 340px}
  .footer-grid{align-items: flex-start}
}


@media (min-width: 1920px){
  :root{--max-width:1800px}
  body{font-size:18px}
  .container{max-width:1800px;margin:0 auto;padding:0 40px}
  .header-inner{grid-template-columns: auto 1fr auto;align-items:center}
  .header-inner .logo{font-size:2rem}
  .slide img{height:860px;object-fit:cover}
  .carousel{max-height:860px}
  .card img{height:280px;object-fit:cover}
  .card{padding:1.25rem}
  .grid{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap:1.5rem}
  .product-title{font-size:1.05rem}
  .product-price{font-size:1.05rem}
  .footer-map iframe{height:480px}
  .contact-card{display:flex;align-items:flex-start;justify-content:space-between}
  .contact-details{max-width:60%}
  .contact-hours{min-width:260px;text-align:right}
  .cart-drawer{right:40px}
}


.hero-title{font-family:Playfair Display,serif;font-size:2.6rem;margin:0;color:#2D4A9C}
.hero-sub{margin:8px 0 18px;color:var(--muted);font-size:1.05rem}


.carousel{position:relative;border-radius:12px;overflow:hidden;margin-bottom:16px;width:100vw;margin-left:calc(-50vw + 50%)}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;flex:0 0 100%;display:none}
.slide.active{display:block}
.slide img{width:100%;height: 650px;object-fit:cover}
.carousel-controls{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;padding:0 10px;transform:translateY(-50%)}
.carousel-btn{background:rgba(255,255,255,0.8);border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:8px}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,0.6);cursor:pointer}
.carousel-dots button.active{background:var(--accent)}


.store-info{padding:22px 0}
.store-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.contact h3{margin-top:0;color:#2D4A9C}
.contact a{color:#6b2840}


.footer-grid{display:flex;gap:18px;align-items:center;justify-content:space-between}
.footer-grid > div{flex:1}
.footer-map{flex:0 0 460px}
.footer-map iframe{height:280px}


.contact-card{background:#f5f5f5;padding:16px;border-radius:12px;border:1px solid rgba(220,190,205,0.4)}
.contact-card h4{margin:0 0 8px;font-family:Playfair Display,serif;color:#6b2840}
.contact-card .tagline{margin:0 0 12px;color:var(--muted)}
.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.contact-list li{display:flex;align-items:center;gap:10px}
.contact-list .icon{width:36px;height:36px;border-radius:8px;background:var(--accent-2);display:inline-grid;place-items:center}
.contact-list .icon svg{width:18px;height:18px;fill:#6b2840}
.contact-list a{color:#4b2631;text-decoration:none;font-weight:600}
.contact-list a:hover{text-decoration:underline}
.social-links{display:flex;gap:8px;margin-top:12px}
.social-links a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid rgba(180,120,140,0.06);text-decoration:none;color:#6b2840;font-weight:600}
.social-links a svg{width:16px;height:16px;fill:#6b2840}
.social-links a:hover{background:var(--accent-2)}
.hours{margin-top:10px;color:#5b3b45;font-size:0.95rem}
.map-btn{display:inline-block;margin-top:12px;padding:8px 12px;background:linear-gradient(90deg,var(--accent),#d989b0);color:#fff;border-radius:10px;text-decoration:none;font-weight:700}
.map-btn:hover{opacity:0.95}


.contact-card .contact-row{display:flex;align-items:center;gap:18px}
.contact-card .contact-row .contact-list{flex:1;padding-right:12px;border-right:1px solid rgba(230,200,215,0.35)}
.contact-card .contact-row .hours{margin-top:0;color:#5b3b45;font-size:0.95rem;text-align:right;flex:0 0 220px}

@media (max-width:600px){
  .contact-card .contact-row{flex-direction:column;align-items:flex-start}
  .contact-card .contact-row .contact-list{padding-right:0;border-right:none}
  .contact-card .contact-row .hours{text-align:left;flex:auto;margin-top:8px}
}

@media (max-width:1000px){
  .hero-title{font-size:1.9rem}
  .store-grid{grid-template-columns:1fr}
  .slide img{height:520px}
  .carousel .slide:first-child img{height:560px}
  .footer-map{flex:0 0 360px}
}

@media (max-width:600px){
  .contact-card .contact-block{flex-direction:column;align-items:flex-start}
  .contact-list{padding-right:0;border-right:none}
  .contact-card .contact-social{margin-left:0}
}

@media (max-width:600px){
  .slide img{height:360px}
  .carousel .slide:first-child img{height:420px}
  .footer-grid{flex-direction:column;gap:10px}
  .footer-map{flex:1}
}

@media (max-width:420px){
  .slide img{height:260px}
  .carousel .slide:first-child img{height:300px}
}
.hero{padding:48px 0;background:linear-gradient(180deg,#E8F3F8,#F0F8FC)}
.hero .hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap: 2px;max-width:5000px;margin: auto}
.hero-inner h1{font-family:Playfair Display,serif;font-size:2rem;margin:0;color:#2D4A9C}
.hero-inner p{margin:8px 0 16px;color:#6f4b5b;font-weight:500}
.hero .hero-actions{display:flex;justify-content:center;width:100%}
.hero .hero-actions input{max-width:520px;width:100%;border-radius:999px;padding:12px 16px;border:1px solid #E8F3F8;box-shadow:0 6px 18px rgba(45,74,156,0.08)}
#search{padding:10px 12px;border-radius:8px;border:1px solid #eee;max-width:380px;width:100%}
.products{padding:32px 0}
.products h2{margin:0 0 8px;color:#2D4A9C;font-size:1.6rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:10px}
.card{background:var(--card);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(82,44,60,0.12);display:flex;flex-direction:column;position:relative;transition:all 0.25s ease;cursor:pointer;border:1px solid #f2e6f0}
.card:hover{box-shadow:0 16px 36px rgba(82,44,60,0.16);transform:translateY(-3px);border-color:#e6d2e2}
.card-img-container{position:relative;width:100%;height:240px;border-radius:14px;overflow:hidden;margin-bottom:14px;background:#f7f0f6}
.card img{width:100%;height:100%;object-fit:cover;border-radius:12px;transition:transform 0.3s ease}
.card:hover .card img{transform:scale(1.05)}
.card-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#6b2840;opacity:0;transition:all 0.2s;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.card:hover .card-nav{opacity:1}
.card-nav:hover{background:white;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.card-nav.prev{left:8px}
.card-nav.next{right:8px}
.card-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;background:rgba(0,0,0,0.3);padding:8px 10px;border-radius:20px}
.card-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.2s}
.card-dots span.active{background:white;width:10px;height:10px}
.card h3{margin:6px 0 6px;font-size:1.08rem;color:#3f2430;font-weight:750;line-height:1.3;font-family:'CenturyGothic',Playfair Display,serif}
.card p{margin:0 0 10px;color:#6f5a64;font-size:0.9rem;line-height:1.45}
.price{margin:8px 0;font-weight:800;color:#5a2a57;font-size:1.2rem}
.add{margin-top:auto;padding:11px 14px;border-radius:12px;border:1px solid transparent;background:linear-gradient(135deg,#5a8dee,#3a70d6);color:white;cursor:pointer;font-weight:800;letter-spacing:0.01em;transition:all 0.18s ease;box-shadow:0 6px 16px rgba(58,112,214,0.28)}
.add:hover{box-shadow:0 4px 14px rgba(74,144,226,0.5);transform:translateY(-2px)}
.site-footer{padding:18px 0;color:#2D4A9C;font-size:0.9rem;background:#E8F3F8}


.category-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 0 0;
}
.category-pills .pill{
  background:#fff;
  border:1px solid #eee;
  padding:6px 10px;
  border-radius:20px;
  cursor:pointer;
  font-size:0.9rem;
}
.category-pills .pill.active{
  background:var(--accent-color);
  color:#fff;
  border-color:var(--accent-color);
}
.modal{position:fixed;inset:0;display:none !important;align-items:center;justify-content:center;background:rgba(20,12,16,0.45);padding:20px;z-index:10100}
.modal[aria-hidden="false"]{display:flex !important}
.modal-content{background:white;padding:18px;border-radius:12px;max-width:720px;width:100%;position:relative}
.close{position:absolute;right:16px;top:16px;border:none;background:transparent;font-size:1.1rem;cursor:pointer;color:#6b2840;z-index:10}


.modal-content.hp-theme{
  background:radial-gradient(circle at 20% 20%, rgba(255,236,184,0.18), transparent 38%),
             radial-gradient(circle at 80% 0%, rgba(118,104,255,0.16), transparent 34%),
             linear-gradient(145deg,#0f1024 0%, #1d1b34 60%, #1b1a2a 100%);
  border:2px solid #d4af37;
  box-shadow:0 16px 46px rgba(0,0,0,0.35), 0 0 18px rgba(212,175,55,0.35);
  color:#f7f1d3;
  overflow:hidden;
  animation:hpGlow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
}
.modal-content.hp-theme h3{
  color:#fef5e7;
  font-weight:800;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);
}
.modal-content.hp-theme p{
  color:#e8dcc0;
}
.modal-content.hp-theme label{
  color:#fef5e7;
  font-weight:700;
}
.modal-content.hp-theme #modal-price{
  color:#d4af37;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.modal-content.hp-theme select,
.modal-content.hp-theme input{
  background:#1a1829;
  color:#e8dcc0;
  border:1px solid #d4af37;
}
.modal-content.hp-theme::before,
.modal-content.hp-theme::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 50%);
  opacity:0.25;
  animation:hpSparkle 5s linear infinite;
  pointer-events:none;
}
.modal-content.hp-theme::after{
  animation-duration:7s;
  animation-direction:reverse;
  opacity:0.18;
}
  #modal-inventory {
    background:rgba(30,24,41,0.85);
    color:#111;
    border:2px solid #d4af37;
    box-shadow:0 2px 12px rgba(212,175,55,0.18);
    font-size:1.08rem;
    margin:18px 0 0 0;
    padding:14px 20px;
    border-radius:12px;
  }
  @media (max-width:600px){
    .modal-content.hp-theme #modal-inventory {
      font-size:0.98rem;
      padding:10px 8px;
    }
  }
.hp-badge{
  background:linear-gradient(120deg,#d4af37,#f7e9a0);
  color:#2d1c00;
  font-weight:800;
  font-size:0.78rem;
  padding:4px 10px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(212,175,55,0.35);
  letter-spacing:0.01em;
}
.hp-btn{
  background:linear-gradient(135deg,#d4af37,#b8891e);
  box-shadow:0 10px 24px rgba(180,140,30,0.35);
}


.modal-content.snoopy-theme{
  background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.4), transparent 40%),
             radial-gradient(circle at 90% 90%, rgba(255,200,200,0.2), transparent 40%),
             linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 40%, #FFE8E0 100%);
  border:3px solid #CC0000;
  box-shadow:0 16px 46px rgba(0,0,0,0.15), 0 0 20px rgba(204,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
  color:#1a1a1a;
  overflow:hidden;
  animation:snoopyGlow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
}
.modal-content.snoopy-theme h3{
  color:#000000;
  font-weight:900;
  text-shadow:0 2px 4px rgba(204,0,0,0.15);
  font-size:1.4rem;
}
.modal-content.snoopy-theme p{
  color:#333333;
  font-weight:500;
}
.modal-content.snoopy-theme label{
  color:#000000;
  font-weight:800;
}
.modal-content.snoopy-theme #modal-price{
  color:#CC0000;
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
  font-size:1.3rem;
}
.modal-content.snoopy-theme select,
.modal-content.snoopy-theme input{
  background:#FFFFFF;
  color:#000000;
  border:2px solid #CC0000;
  font-weight:600;
}
.modal-content.snoopy-theme::before,
.modal-content.snoopy-theme::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle, rgba(204,0,0,0.1) 0%, rgba(204,0,0,0) 50%);
  opacity:0.3;
  animation:snoopyBounce 3s ease-in-out infinite;
  pointer-events:none;
}
.modal-content.snoopy-theme::after{
  animation-delay:0.5s;
  opacity:0.2;
}
.snoopy-badge{
  background:linear-gradient(120deg, #CC0000, #FF3333);
  color:#FFFFFF;
  font-weight:900;
  font-size:0.85rem;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(204,0,0,0.4);
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.snoopy-btn{
  background:linear-gradient(135deg, #CC0000, #990000);
  box-shadow:0 10px 24px rgba(153,0,0,0.35);
  color:#FFFFFF;
  border:2px solid #990000;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.snoopy-btn:hover{box-shadow:0 14px 32px rgba(153,0,0,0.45);transform:translateY(-3px)}
.hp-btn:hover{box-shadow:0 12px 28px rgba(180,140,30,0.45);transform:translateY(-2px)}

@keyframes hpGlow{
  from{transform:translateY(20px) scale(0.95);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes hpSparkle{
  from{transform:translate(-6%, -4%) rotate(0deg);}
  to{transform:translate(6%, 4%) rotate(360deg);}
}
@keyframes hpImageAppear{
  from{opacity:0;transform:scale(0.9) translateX(-20px)}
  to{opacity:1;transform:scale(1) translateX(0)}
}
@keyframes hpTextAppear{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes hpContentAppear{
  from{opacity:0}
  to{opacity:1}
}
@keyframes hpMagicAppear{
  0%{
    opacity:0;
    transform:scale(0) rotate(-180deg);
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:scale(1) rotate(0deg);
  }
}


.hp-magic-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.hp-magic-particles::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 15% 25%, #d4af37 8px, transparent 8px),
    radial-gradient(circle at 85% 35%, #d4af37 6px, transparent 6px),
    radial-gradient(circle at 50% 15%, #d4af37 10px, transparent 10px),
    radial-gradient(circle at 25% 75%, #d4af37 7px, transparent 7px),
    radial-gradient(circle at 75% 65%, #d4af37 8px, transparent 8px),
    radial-gradient(circle at 40% 85%, #d4af37 6px, transparent 6px),
    radial-gradient(circle at 90% 70%, #d4af37 8px, transparent 8px),
    radial-gradient(circle at 20% 50%, #d4af37 7px, transparent 7px);
  background-size:100% 100%;
  animation:hpMagicAppear 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hp-magic-particles::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 35% 45%, #f7e9a0 7px, transparent 7px),
    radial-gradient(circle at 70% 20%, #f7e9a0 8px, transparent 8px),
    radial-gradient(circle at 10% 65%, #f7e9a0 6px, transparent 6px),
    radial-gradient(circle at 60% 80%, #f7e9a0 7px, transparent 7px),
    radial-gradient(circle at 80% 45%, #f7e9a0 8px, transparent 8px);
  background-size:100% 100%;
  animation:hpMagicAppear 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}
@keyframes snoopyGlow{
  from{transform:translateY(20px) scale(0.95);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes snoopyBounce{
  0%,100%{transform:scale(1) translateY(0);}
  50%{transform:scale(1.05) translateY(-10px);}
}

@media (max-width:600px){
  .hero-inner h1{font-size:1.4rem}
  .card img{height:140px}
}


.cart-overlay{position:fixed;inset:0;background:rgba(10,6,8,0.45);opacity:0;pointer-events:none;transition:opacity .18s ease}
.cart-overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;right:0;top:0;height:100%;width:360px;max-width:92vw;background:white;box-shadow:-18px 0 40px rgba(60,30,40,0.12);transform:translateX(110%);transition:transform .22s ease;padding:18px;display:flex;flex-direction:column}
.cart-drawer[aria-hidden="false"]{transform:translateX(0)}
.cart-drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cart-items{flex:1;overflow:auto;padding-right:6px}
.cart-item{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed #f0e8ef}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.qty-controls{display:flex;gap:6px;align-items:center}
.qty-controls button{padding:6px 8px;border-radius:6px;border:1px solid #eee;background:transparent;cursor:pointer}
.cart-summary{margin-top:12px}
.cart-summary .amounts{display:flex;flex-direction:column;gap:6px;color:#6b6b6b}
.cart-actions{display:flex;gap:8px;margin-top:10px}

@media (max-width:420px){
  .cart-drawer{width:100%}
}


.products{ text-align: center }
.products h2, .products .hero-sub{ text-align: center }
.products .grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  max-width:100%;
  width:100%;
  margin:0 auto;
}
.products .grid .card{ margin: 0; width:100%;max-width:100% }

@media (max-width:1100px){
  .products .grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}

.badge-out{
  position:absolute;
  top:8px;
  left:8px;
  background:rgba(220,53,69,0.95);
  color:#fff;
  font-weight:700;
  font-size:0.85rem;
  padding:4px 10px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  pointer-events:none;
  z-index:3;
}


.add[disabled]{
  background:#ddd;
  color:#777;
  cursor:not-allowed;
  box-shadow:none;
}


.pagination{display:none;justify-content:center;align-items:center;gap:12px;margin:20px 0;flex-wrap:wrap}
.page-btn{padding:8px 14px;border-radius:999px;border:1px solid #C5D9E8;background:white;color:#2D4A9C;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.page-btn:hover{background:linear-gradient(135deg,#f7f0f7,#f0e6ef)}
.page-btn[disabled]{background:#f3f0f3;color:#9a7fa0;border-color:#e6d9e6;cursor:not-allowed;box-shadow:none}
.page-info{font-weight:700;color:#2D4A9C}


.card:has(.badge-out){
  opacity:0.75;
  position:relative;
}

.card:has(.badge-out)::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid rgba(220,53,69,0.3);
  border-radius:var(--radius);
  pointer-events:none;
}

.card:has(.badge-out) img{
  filter:grayscale(20%);
  opacity:0.85;
}

/* Dropdown Account Menu */
.account-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(82,44,60,0.15);min-width:200px;z-index:101;padding:8px 0;margin-top:8px;display:flex;flex-direction:column;opacity:1;pointer-events:auto;transition:opacity 0.2s ease}
.account-menu.hidden{opacity:0;pointer-events:none;display:none}
.menu-item{background:transparent;border:none;padding:12px 20px;text-align:left;color:#2D4A9C;font-weight:600;cursor:pointer;font-size:0.95rem;width:100%;transition:all 0.2s ease;text-decoration:none;display:flex;align-items:center;gap:8px}
.menu-item:hover{background:#F5E6F0;color:#C7499F}
.menu-item.logout{color:#c62828}
.menu-item.logout:hover{background:#ffebee}

.account{position:relative}

/* POS (Punto de Venta) */
.pos-grid{display:grid;grid-template-columns:1.4fr 1fr 0.8fr;gap:14px}
.pos-panel{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:14px;box-shadow:0 8px 24px rgba(82,44,60,0.08);padding:14px;display:flex;flex-direction:column;min-height:360px}
.pos-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pos-panel-header input{padding:8px 10px;border:1px solid #eee;border-radius:8px}
.pos-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pos-product-item{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #f0e6ef;border-radius:12px;padding:10px}
.pos-product-item img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.pos-product-info{display:flex;flex-direction:column;gap:4px;flex:1}
.pos-product-info strong{color:#3f2430}
.pos-product-info span{color:#6f5a64;font-weight:700}
.pos-cart{flex:1;overflow:auto;border-top:1px dashed #eee}
.pos-cart-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #eee}
.pos-cart-row img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.pos-cart-main{flex:1}
.pos-cart-title{font-weight:700;color:#3f2430}
.pos-cart-meta{color:#6f5a64}
.pos-cart-actions{display:flex;gap:6px}
.pos-cart-actions button{padding:6px 8px;border:1px solid #eee;background:transparent;border-radius:8px;cursor:pointer}
.pos-totals{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.pos-totals > div{display:flex;justify-content:space-between;align-items:center}
.pos-pay-methods{display:flex;gap:12px}
.pos-cash{display:block}
.pos-cash input{padding:8px 10px;border:1px solid #eee;border-radius:8px}
.pos-change{display:flex;justify-content:space-between;align-items:center;margin-top:6px}

/* Botón flotante de administración */
.admin-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #2D4A9C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(80, 191, 230, 0.4), 0 0 20px rgba(80, 191, 230, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.admin-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(80, 191, 230, 0.5), 0 0 30px rgba(80, 191, 230, 0.8), 0 6px 16px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.25);
}

.admin-float-btn span {
  font-family: 'Daily', 'Playfair Display', serif;
  font-size: 2rem;
  color: #C7499F;
  font-weight: 700;
  line-height: 1;
}

.admin-float-btn:active {
  transform: scale(1.05);
}

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