.cart-overlay{position:fixed;inset:0;background:rgba(44,31,26,.4);z-index:9400;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(2px)}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-sidebar{position:fixed;right:0;top:0;height:100vh;width:400px;max-width:100vw;background:var(--white);z-index:9500;transform:translateX(110%);transition:transform var(--transition);will-change:transform;display:flex;flex-direction:column;border-left:1px solid var(--cream4)}
.cart-sidebar.open{transform:translateX(0)}
.cart-header{padding:24px 28px;border-bottom:1px solid var(--cream4);display:flex;align-items:center;justify-content:space-between}
.cart-header h2{font-family:var(--serif);font-size:22px;font-weight:300;font-style:italic;color:var(--ink)}
.cart-items{flex:1;overflow-y:auto;padding:20px 28px;-webkit-overflow-scrolling:touch}
.cart-footer{padding:20px 28px;border-top:1px solid var(--cream4)}

.order-overlay{position:fixed;inset:0;background:rgba(44,31,26,.6);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.order-overlay.open{display:flex;opacity:1}
.order-modal{background:var(--white);width:100%;max-width:560px;border-radius:8px;padding:32px 28px;position:relative;max-height:90vh;overflow-y:auto;animation:modalIn .3s cubic-bezier(.4,0,.2,1);-webkit-overflow-scrolling:touch}

.wish-overlay{position:fixed;inset:0;background:rgba(44,31,26,.4);z-index:900;opacity:0;pointer-events:none;transition:opacity var(--transition)}
.wish-overlay.open{opacity:1;pointer-events:all}
.wish-panel{position:fixed;right:0;top:0;height:100vh;width:380px;max-width:100vw;background:var(--white);z-index:9500;transform:translateX(110%);transition:transform var(--transition);will-change:transform;overflow-y:auto;border-left:1px solid var(--cream4)}
.wish-panel.open{transform:translateX(0)}

.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(44,31,26,.55);z-index:99999}
.mobile-menu.show{display:block}
.mobile-menu-panel{position:absolute;top:0;left:0;bottom:0;width:min(80vw,300px);background:var(--white);box-shadow:8px 0 40px var(--shadow);padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mobile-menu.show .mobile-menu-panel{transform:translateX(0)}

.search-results{position:fixed;will-change:transform;z-index:999999;background:var(--white);box-shadow:0 8px 32px var(--shadow);border-radius:8px;overflow:hidden}
.toast-container{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--gold3);padding:12px 20px 12px 16px;font-size:13px;font-weight:500;border-radius:8px;transform:translateY(20px);opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);white-space:nowrap;box-shadow:0 8px 32px rgba(44,31,26,.25);pointer-events:none;font-family:var(--sans);letter-spacing:.02em;display:flex;align-items:center;gap:8px;max-width:min(90vw,380px);white-space:normal}
.toast.show{transform:translateY(0);opacity:1}

/* ── Cart Items ── */
.cart-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cream4);
  transition: background .2s;
}
.cart-item:hover { background: var(--cream2); margin: 0 -28px; padding: 16px 28px; }
.cart-item-img {
  width: 88px;
  height: 88px;
  background: var(--pearl);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--cream4);
}
.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.cart-item:hover .cart-item-img img { transform: scale(1.06); }
.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-price {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--rose2);
  font-weight: 300;
  font-style: italic;
}
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--cream4);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all .2s cubic-bezier(.34,1.4,.64,1);
  color: var(--ink);
}
.qty-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--gold3); transform: scale(1.1); }
.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--mink);
}
.cart-empty-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 16px;
  opacity: .5;
  animation: emptyBounce 2s ease-in-out infinite;
}
.cart-empty-btn {
  margin-top: 16px;
  background: var(--gold);
  color: #1a0e08;
  border: none;
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .2s, transform .15s;
}
.cart-empty-btn:hover { background: var(--gold2); transform: translateY(-1px); }
@keyframes emptyBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Order Form ── */
.order-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.order-type-btn {
  background: var(--white);
  border: 1.5px solid var(--cream4);
  border-radius: 12px;
  padding: 20px 12px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.order-type-btn:hover { border-color: var(--gold2); background: var(--cream); }
.order-type-btn.active { border-color: var(--gold); background: var(--cream2); box-shadow: 0 8px 20px rgba(201,169,110,.15); }
.order-type-icon { font-size: 24px; }
.order-type-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.order-type-sub { font-size: 11px; color: var(--mink); line-height: 1.3; }

.order-submit-btn {
  width: 100%;
  background: #22c55e;
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 20px;
  transition: all .3s;
  box-shadow: 0 4px 12px rgba(34,197,94,.3);
}
.order-submit-btn:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(34,197,94,.4); }

.order-modal-head { margin-bottom: 24px; }
.order-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--rose2); letter-spacing: .1em; }
.order-title { font-family: var(--serif); font-size: 24px; font-weight: 300; font-style: italic; color: var(--ink); }
.order-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--mink); }
.order-back { background: none; border: none; color: var(--gold2); font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 16px; padding: 0; }

@media(max-width:768px){
  .order-type-grid { grid-template-columns: 1fr; }
  .order-type-btn { flex-direction: row; text-align: left; padding: 16px; }
}

@media(max-width:768px){
  .cart-sidebar,.wish-panel{width:100vw!important;border-radius:0!important;border-left:none!important}
  .cart-sidebar{height:100vh!important;height:100dvh!important;top:0!important}
  .order-overlay{padding:0;align-items:flex-end}
  .order-modal{border-radius:20px 20px 0 0;max-height:92vh;padding:24px 18px 32px;padding-bottom:max(32px,env(safe-area-inset-bottom))}
}

/* ── Shipping Bar ── */
.shipping-bar{padding:12px 28px;background:var(--cream2);border-bottom:1px solid var(--cream4)}
.shipping-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:var(--mink)}
.shipping-bar-track{height:4px;background:var(--cream4);border-radius:2px;overflow:hidden}
.shipping-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--rose2));border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ── Cart Total / Checkout ── */
.cart-total-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mink);padding:4px 0}
.cart-total-row.main{font-size:16px;font-weight:700;color:var(--ink);padding-top:12px;margin-top:8px;border-top:1px solid var(--cream4)}
.cart-checkout{width:100%;background:#22c55e;color:#fff;border:none;padding:16px;font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;margin-top:16px;transition:all .3s;box-shadow:0 4px 12px rgba(34,197,94,.3);font-family:var(--sans)}
.cart-checkout:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,197,94,.4)}
.cart-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--mink);padding:4px;transition:color .2s}
.cart-close:hover{color:var(--ink)}

/* ── Wish Panel ── */
.wish-panel-header,.wish-header{padding:24px 28px;border-bottom:1px solid var(--cream4);display:flex;align-items:center;justify-content:space-between}
.wish-panel-header h2,.wish-header h3{font-family:var(--serif);font-size:22px;font-weight:300;font-style:italic;color:var(--ink)}
.wish-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--mink);padding:4px}
.wish-items,.wish-content{padding:20px 28px;overflow-y:auto;flex:1}

/* ── Mobile Menu ── */
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid var(--cream4)}
.mobile-menu-logo{font-family:var(--serif);font-size:24px;font-weight:300;font-style:italic;color:var(--ink)}
.mobile-menu-logo em{font-style:normal;color:var(--rose2)}
.mobile-menu-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink);padding:4px}
.mobile-nav{display:flex;flex-direction:column;padding:12px 0}
.mobile-nav a{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--cream4);transition:background .2s}
.mobile-nav a:hover,.mobile-nav a.active{background:var(--cream2);color:var(--ink)}
.mobile-nav-emoji{font-size:18px}
.mobile-search{padding:16px 20px}
.mobile-search-wrap{display:flex;align-items:center;background:var(--cream);border:1px solid var(--cream4);border-radius:30px;padding:0 14px;gap:8px}
.mobile-search-icon-left{color:var(--mink);font-size:16px}
.mobile-search-input{flex:1;border:none;background:transparent;padding:10px 0;font-size:14px;font-family:var(--sans);color:var(--ink);outline:none}
.mobile-search-clear{background:none;border:none;cursor:pointer;color:var(--mink);font-size:14px;padding:4px}
.mobile-results{margin-top:8px;display:flex;flex-direction:column;gap:4px}

/* ── Back to Top ── */
.back-top{position:fixed;bottom:80px;right:16px;width:40px;height:40px;background:var(--ink);color:var(--gold3);border:none;border-radius:50%;font-size:16px;cursor:pointer;z-index:8000;opacity:0;pointer-events:none;transition:all .3s;box-shadow:0 4px 16px rgba(44,31,26,.25)}
.back-top.visible{opacity:1;pointer-events:all}
.back-top:hover{transform:translateY(-3px);background:var(--ink2)}

/* ── Alt Background ── */
.alt-bg{background:var(--cream2)}

/* ── WhatsApp Bubble ── */
.wa-bubble{position:fixed;bottom:20px;right:16px;z-index:9200;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wa-btn{width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);border:none;transition:transform .2s,box-shadow .2s}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}
.wa-menu{background:var(--white);border-radius:16px;box-shadow:0 12px 40px rgba(44,31,26,.2);border:1px solid var(--cream4);overflow:hidden;width:260px;display:none;animation:modalIn .25s cubic-bezier(.4,0,.2,1)}
.wa-menu.open{display:block}
.wa-menu-header{background:linear-gradient(135deg,#25d366,#128c7e);padding:16px 18px}
.wa-menu-title{font-size:14px;font-weight:700;color:#fff}
.wa-menu-sub{font-size:11px;color:rgba(255,255,255,.8);margin-top:2px}
.wa-menu-options{display:flex;flex-direction:column}
.wa-menu-option{display:flex;align-items:center;gap:12px;padding:14px 18px;text-decoration:none;border-bottom:1px solid var(--cream4);transition:background .2s;cursor:pointer}
.wa-menu-option:last-child{border-bottom:none}
.wa-menu-option:hover{background:var(--cream2)}
.wa-menu-option-icon{font-size:20px;flex-shrink:0}
.wa-menu-option-text{font-size:13px;font-weight:600;color:var(--ink)}
.wa-menu-option-sub{font-size:11px;color:var(--mink);margin-top:1px}

/* ── Info Modal (Legal) ── */
.info-modal-overlay{position:fixed;inset:0;background:rgba(44,31,26,.5);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px}
.info-modal-overlay.open{display:flex}
.info-modal{background:var(--white);width:100%;max-width:600px;border-radius:12px;padding:32px 28px;max-height:85vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.info-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.info-modal h2{font-family:var(--serif);font-size:26px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:16px}
.info-modal p,.info-modal li{font-size:14px;color:var(--mink);line-height:1.7;margin-bottom:8px}
.info-modal ul{padding-left:20px}

/* ── Animations ── */
@keyframes modalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lsIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes chatIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}

/* ── Chat Bubble ── */
#chat-bubble-name{font-size:12px;font-weight:700;color:var(--ink)}
#chat-bubble-msg{font-size:12px;color:var(--mink);margin-top:2px;line-height:1.4}
#chat-bubble-close{position:absolute;top:6px;right:6px;background:none;border:none;font-size:12px;cursor:pointer;color:var(--mink);padding:2px}
#chat-bubble-typing{display:flex;gap:3px;align-items:center;margin-top:4px}
#chat-bubble-typing span{width:5px;height:5px;background:var(--mink);border-radius:50%;animation:typingDot 1.2s ease-in-out infinite}
#chat-bubble-typing span:nth-child(2){animation-delay:.2s}
#chat-bubble-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,80%,100%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── Video extras ── */
.video-mute-btn{position:absolute;bottom:48px;right:10px;background:rgba(0,0,0,.4);border:none;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s}
.video-mute-btn:hover{background:rgba(0,0,0,.65)}
.video-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2)}
.video-progress-fill{height:100%;width:0%;background:var(--gold);transition:width .1s linear}
.video-label{position:absolute;bottom:8px;left:10px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}

/* ── Search Results ── */
.search-result-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--cream4)}
.search-result-item:hover{background:var(--cream2)}
.search-result-item:last-child{border-bottom:none}
.search-result-img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--pearl);flex-shrink:0}
.search-result-name{font-size:13px;font-weight:600;color:var(--ink)}
.search-result-price{font-size:12px;color:var(--rose2);font-weight:700}

/* ── Order Form Fields ── */
.order-fields{display:flex;flex-direction:column;gap:16px}
.order-field{display:flex;flex-direction:column;gap:6px}
.order-field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.order-field-req{color:var(--rose2)}
.order-field input,.order-field select,.order-field textarea{width:100%;padding:11px 14px;background:var(--cream3);border:1.5px solid var(--cream4);border-radius:8px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none}
.order-field input:focus,.order-field select:focus{border-color:var(--gold);background:var(--white)}
.order-error{font-size:11px;color:#ef4444;display:none}
.order-error.show{display:block}

/* ── Province Dropdown ── */
.prov-search-wrap{position:relative}
.prov-search-input{width:100%;padding:11px 36px 11px 14px;background:var(--cream3);border:1.5px solid var(--cream4);border-radius:8px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s}
.prov-search-input:focus{border-color:var(--gold);background:var(--white)}
.prov-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}
.prov-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--cream4);border-radius:8px;box-shadow:0 8px 24px var(--shadow);max-height:200px;overflow-y:auto;z-index:100;display:none}
.prov-item{padding:10px 14px;font-size:13px;color:var(--ink2);cursor:pointer;transition:background .15s}
.prov-item:hover{background:var(--cream2)}

/* ── Photo Uploader ── */
.photo-upload-section{background:var(--cream2);border:1.5px dashed var(--cream4);border-radius:12px;padding:20px;margin-top:16px}
.photo-upload-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.photo-upload-title{font-size:13px;font-weight:700;color:var(--ink)}
.photo-upload-counter{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--white);color:var(--mink);border:1px solid var(--cream4)}
.photo-upload-sub{font-size:12px;color:var(--mink);margin-bottom:14px;line-height:1.5}
.photo-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.photo-slot{position:relative;aspect-ratio:1;background:var(--white);border:1.5px dashed var(--cream4);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;overflow:hidden;transition:all .2s}
.photo-slot:hover{border-color:var(--gold);background:var(--cream3)}
.photo-slot.filled{border-style:solid;border-color:var(--rose2)}
.photo-slot input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photo-slot-icon{font-size:22px;pointer-events:none}
.photo-slot-label{font-size:9px;font-weight:700;color:var(--mink);text-align:center;pointer-events:none;line-height:1.2}
.photo-slot-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;z-index:1}
.photo-slot-overlay{position:absolute;inset:0;background:rgba(44,31,26,.15);z-index:2;border-radius:8px}
.photo-slot-del{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(44,31,26,.8);color:#fff;border:none;border-radius:50%;font-size:10px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background .2s}
.photo-slot-del:hover{background:var(--rose2)}
.photo-slot-num{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:8px;font-weight:700;color:#fff;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.photo-upload-tip{font-size:11px;color:var(--mink);display:flex;align-items:center;gap:6px}
.photo-upload-req-warn{font-size:11px;color:#ef4444;margin-top:8px;display:none}
.photo-upload-req-warn.show{display:block}

/* ── Cookie Banner ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:rgba(255,255,255,.85);padding:16px 24px;z-index:9300;display:none;flex-direction:column;gap:12px;box-shadow:0 -4px 24px rgba(44,31,26,.3)}
.cookie-banner.show{display:flex}
.cookie-banner-top{display:flex;align-items:flex-start;gap:12px}
.cookie-banner-icon{font-size:24px;flex-shrink:0}
.cookie-banner-text{flex:1;font-size:13px;line-height:1.6}
.cookie-banner-text strong{color:var(--gold3)}
.cookie-banner-toggle{font-size:12px;color:var(--gold3);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:var(--sans);padding:0}
.cookie-banner-detail{font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;display:none}
.cookie-banner-detail.show{display:block}
.cookie-detail-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cookie-detail-item:last-child{border-bottom:none}
.cookie-detail-icon{font-size:18px;flex-shrink:0}
.cookie-detail-info strong{display:block;font-size:12px;color:rgba(255,255,255,.9);margin-bottom:2px}
.cookie-detail-info span{font-size:11px;color:rgba(255,255,255,.5)}
.cookie-detail-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
.cookie-detail-badge.esencial{background:rgba(34,197,94,.2);color:#4ade80}
.cookie-detail-badge.opcional{background:rgba(201,169,110,.2);color:var(--gold3)}
.cookie-banner-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn-accept{background:#22c55e;color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:background .2s}
.cookie-btn-accept:hover{background:#16a34a}
.cookie-btn-essential{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.cookie-btn-essential:hover{background:rgba(255,255,255,.15)}

/* ── Agotado Modal ── */
.agotado-overlay{position:fixed;inset:0;background:rgba(44,31,26,.6);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px}
.agotado-overlay.open{display:flex}
.agotado-modal{background:var(--white);border-radius:20px;padding:40px 32px;max-width:400px;width:100%;text-align:center;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.agotado-emoji{font-size:56px;display:block;margin-bottom:16px}
.agotado-title{font-family:var(--serif);font-size:26px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:8px}
.agotado-sub{font-size:14px;color:var(--mink);line-height:1.6;margin-bottom:24px}
.agotado-btns{display:flex;flex-direction:column;gap:10px}
.btn-agotado-ver{background:var(--ink);color:var(--gold3);border:none;padding:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;cursor:pointer;font-family:var(--sans);transition:all .3s}
.btn-agotado-ver:hover{background:var(--ink2)}
.btn-agotado-avisar{background:#22c55e;color:#fff;border:none;padding:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;cursor:pointer;font-family:var(--sans);transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-agotado-avisar:hover{background:#16a34a}

/* ── Welcome Popup ── */
.welcome-popup{position:fixed;inset:0;background:rgba(44,31,26,.6);z-index:9700;display:flex;align-items:center;justify-content:center;padding:20px}
.welcome-popup.hide{display:none}
.welcome-popup-box{background:var(--white);border-radius:20px;padding:40px 32px;max-width:440px;width:100%;text-align:center;position:relative;animation:modalIn .4s cubic-bezier(.34,1.3,.64,1)}
.welcome-popup-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.welcome-popup-emoji{font-size:52px;display:block;margin-bottom:12px}
.welcome-popup-title{font-family:var(--serif);font-size:28px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:8px}
.welcome-popup-sub{font-size:14px;color:var(--mink);line-height:1.6;margin-bottom:24px}
.welcome-popup-btn{display:inline-block;background:var(--ink);color:var(--gold3);border:none;padding:14px 32px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;cursor:pointer;font-family:var(--sans);transition:all .3s;text-decoration:none}
.welcome-popup-btn:hover{background:var(--ink2);transform:translateY(-2px)}

/* ── Wizard Modal ── */
.wizard-modal{position:fixed;inset:0;background:rgba(44,31,26,.6);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px}
.wizard-modal.open{display:flex}
.wizard-box{background:var(--white);border-radius:20px;padding:32px 28px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.wizard-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.wizard-step-indicator{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.wizard-step-dot{width:8px;height:8px;border-radius:50%;background:var(--cream4);transition:background .3s}
.wizard-step-dot.active{background:var(--rose2);width:24px;border-radius:4px}
.wizard-step-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mink)}
.wizard-title{font-family:var(--serif);font-size:26px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:20px}
.wizard-options{display:flex;flex-direction:column;gap:10px}
.wizard-option{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--cream4);border-radius:12px;cursor:pointer;transition:all .2s;background:var(--white)}
.wizard-option:hover{border-color:var(--gold);background:var(--cream2)}
.wizard-option.active{border-color:var(--rose2);background:var(--rose3)}
.wizard-option-icon{font-size:28px;flex-shrink:0}
.wizard-option-label{font-size:14px;font-weight:700;color:var(--ink)}
.wizard-option-sub{font-size:12px;color:var(--mink);margin-top:2px}
.wizard-nav{display:flex;gap:10px;margin-top:24px}
.wizard-btn-next{flex:1;background:var(--ink);color:var(--gold3);border:none;padding:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;cursor:pointer;font-family:var(--sans);transition:all .3s}
.wizard-btn-next:hover{background:var(--ink2)}
.wizard-btn-back{background:none;border:1px solid var(--cream4);color:var(--mink);padding:14px 20px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.wizard-btn-back:hover{border-color:var(--gold);color:var(--ink)}

/* ── Compare Modal ── */
.compare-modal{position:fixed;inset:0;background:rgba(44,31,26,.6);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px}
.compare-modal.open{display:flex}
.compare-box{background:var(--white);border-radius:20px;padding:32px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.compare-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.compare-title{font-family:var(--serif);font-size:26px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:24px}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.compare-card{border:1px solid var(--cream4);border-radius:12px;overflow:hidden;text-align:center}
.compare-card-img{width:100%;aspect-ratio:1;background:var(--pearl);display:flex;align-items:center;justify-content:center;font-size:48px}
.compare-card-img img{width:100%;height:100%;object-fit:cover}
.compare-card-body{padding:16px}
.compare-card-name{font-family:var(--serif);font-size:16px;font-style:italic;color:var(--ink);margin-bottom:6px}
.compare-card-price{font-size:18px;color:var(--rose2);font-weight:700;margin-bottom:12px}
.compare-card-btn{background:var(--ink);color:var(--gold3);border:none;padding:10px 20px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;cursor:pointer;font-family:var(--sans)}

/* ── Testimonios Rain ── */
.rain-card{position:absolute;background:var(--white);border-radius:16px;padding:16px 18px;box-shadow:0 8px 32px var(--shadow);max-width:260px;min-width:200px;cursor:pointer;transition:transform .3s,box-shadow .3s;border:1px solid var(--cream4)}
.rain-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px var(--shadow)}
.rain-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rain-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--rose3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--rose2)}
.rain-avatar img{width:100%;height:100%;object-fit:cover}
.rain-name{font-size:13px;font-weight:700;color:var(--ink)}
.rain-stars{color:#ffc107;font-size:11px}
.rain-text{font-size:13px;color:var(--mink);line-height:1.6;font-style:italic}
.rain-photo{margin-top:10px;border-radius:8px;overflow:hidden;height:100px}
.rain-photo img{width:100%;height:100%;object-fit:cover}

/* ── Live Sales Notification ── */
@keyframes lsOut{to{opacity:0;transform:translateX(-20px)}}

/* ── Urgency / Viewers ── */
.urgency-bar{display:flex;justify-content:space-between;align-items:center;background:var(--rose3);padding:8px 12px;border-radius:6px;margin-bottom:16px}
.urgency-viewers{font-size:11px;font-weight:700;color:var(--rose2)}
.urgency-stock{font-size:11px;font-weight:700;color:#ef4444}

/* ── Collar Selector (Pack detail) ── */
.collar-selector-wrap{display:flex;flex-direction:column;gap:8px}
.collar-type-tabs{display:flex;gap:6px;flex-wrap:wrap}
.collar-type-tab{padding:7px 14px;border:1.5px solid var(--cream4);background:var(--white);border-radius:20px;font-size:11px;font-weight:700;color:var(--mink);cursor:pointer;font-family:var(--sans);transition:all .2s}
.collar-type-tab:hover{border-color:var(--gold)}
.collar-type-tab.active{border-color:var(--rose2);background:var(--rose3);color:var(--rose2)}
.collar-color-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ── Anillo Selector ── */
.anillo-selector-wrap{display:flex;flex-direction:column;gap:8px}
.anillo-type-tabs{display:flex;gap:6px}
.anillo-type-tab{padding:7px 14px;border:1.5px solid var(--cream4);background:var(--white);border-radius:20px;font-size:11px;font-weight:700;color:var(--mink);cursor:pointer;font-family:var(--sans);transition:all .2s}
.anillo-type-tab:hover{border-color:var(--gold)}
.anillo-type-tab.active{border-color:var(--rose2);background:var(--rose3);color:var(--rose2)}
.anillo-model-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* ── Peluche Selector Grid ── */
.peluche-selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:8px;max-height:320px;overflow-y:auto;padding:4px}
.peluche-opt-card{background:var(--white);border:1.5px solid var(--cream4);border-radius:10px;padding:8px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.peluche-opt-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.peluche-opt-card.active{border-color:var(--rose2);background:var(--rose3)}
.peluche-opt-card.agotado{opacity:.45;cursor:not-allowed}
.peluche-opt-img{width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;margin-bottom:6px;background:var(--pearl);display:flex;align-items:center;justify-content:center}
.peluche-opt-img img{width:100%;height:100%;object-fit:cover}
.peluche-opt-name{font-size:9px;font-weight:700;color:var(--ink);line-height:1.2}
.peluche-opt-check{position:absolute;top:-5px;right:-5px;width:18px;height:18px;background:var(--rose2);color:#fff;border-radius:50%;font-size:10px;display:none;align-items:center;justify-content:center}
.peluche-opt-card.active .peluche-opt-check{display:flex}

/* ── Toast types ── */
.toast.success{background:var(--ink);border-left:3px solid #22c55e}
.toast.error{background:#7f1d1d;border-left:3px solid #ef4444}

/* ── Search highlight ── */
.search-highlight{background:var(--gold3);color:var(--ink);border-radius:2px;padding:0 2px}

/* ── Swipe dots (mobile widget carousel) ── */
.hw-dots{display:flex;justify-content:center;gap:6px;padding:10px 0}
.hw-dot{width:6px;height:6px;border-radius:50%;background:var(--cream4);transition:all .3s;cursor:pointer}
.hw-dot.active{background:var(--rose2);width:18px;border-radius:3px}

/* ── Info Modal ── */
.info-modal-overlay{position:fixed;inset:0;background:rgba(44,31,26,.5);z-index:9600;display:none;align-items:center;justify-content:center;padding:20px}
.info-modal-overlay.open{display:flex}
.info-modal{background:var(--white);width:100%;max-width:600px;border-radius:12px;padding:32px 28px;max-height:85vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.info-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.info-modal h2{font-family:var(--serif);font-size:26px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:16px}
.info-modal p,.info-modal li{font-size:14px;color:var(--mink);line-height:1.7;margin-bottom:8px}
.info-modal ul{padding-left:20px}
.info-modal h3{font-size:15px;font-weight:700;color:var(--ink);margin:16px 0 8px}

@media(max-width:600px){
  .photo-slots-grid{grid-template-columns:repeat(2,1fr)}
  .wizard-modal,.compare-box,.agotado-modal,.welcome-popup-box{padding:24px 18px}
  .cookie-banner{padding:14px 16px}
  .cookie-banner-btns{flex-direction:column}
  .cookie-btn-accept,.cookie-btn-essential{width:100%;text-align:center}
}

/* ── Toast variants ── */
.toast.success{background:var(--bark);border-left:3px solid #22c55e}
.toast.error{background:var(--bark);border-left:3px solid #ef4444}

/* ── Search highlight ── */
.search-highlight{background:var(--gold3);color:var(--ink);border-radius:2px;padding:0 2px}

/* ── Widget dots (mobile carousel) ── */
.hw-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.hw-dot{width:6px;height:6px;border-radius:50%;background:var(--cream4);transition:all .3s;cursor:pointer}
.hw-dot.active{background:var(--rose2);width:18px;border-radius:3px}

/* ── Floating photo (lluvia de fotos) ── */
.floating-photo{border-radius:4px}

/* ── Ann bar ── */
.ann-bar{background:var(--ink);color:var(--gold3);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;white-space:nowrap;padding:8px 0}
.ticker{display:inline-flex;gap:32px;animation:tickerScroll 30s linear infinite}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ann-dot{color:var(--gold);margin:0 4px}

/* ── Header ── */
.header-wrap{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:24px;height:64px}
#main-header{position:sticky;top:0;z-index:9000;background:rgba(253,250,247,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--cream4)}
.logo{font-family:var(--serif);font-size:28px;font-weight:300;font-style:italic;color:var(--ink);cursor:pointer;flex-shrink:0}
.logo em{font-style:normal;color:var(--rose2)}
.header-nav{display:flex;gap:4px;flex:1;justify-content:center}
.header-nav a{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mink);text-decoration:none;padding:8px 16px;border-radius:4px;transition:all .2s}
.header-nav a:hover,.header-nav a.active{color:var(--ink);background:var(--cream2)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.action-btn{position:relative;background:none;border:none;font-size:18px;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;color:var(--ink)}
.action-btn:hover{background:var(--cream2)}
.badge-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;background:var(--rose2);color:#fff;border-radius:8px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:var(--sans)}
.badge-count.bump{animation:badgeBump .3s cubic-bezier(.34,1.5,.64,1)}
@keyframes badgeBump{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.search-wrap{position:relative;display:flex;align-items:center}
.search-input{background:var(--cream2);border:1px solid var(--cream4);border-radius:30px;padding:8px 36px 8px 14px;font-size:13px;font-family:var(--sans);color:var(--ink);outline:none;width:180px;transition:all .3s}
.search-input:focus{width:240px;border-color:var(--gold);background:var(--white)}
.search-btn{position:absolute;right:10px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--mink)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}
@media(max-width:768px){
  .header-nav{display:none}
  .hamburger{display:flex}
  .search-wrap{display:none}
  .header-wrap{padding:0 16px}
}

/* ── Footer ── */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:60px 40px 32px}
.footer-inner{max-width:1320px;margin:0 auto}
.footer-rule{height:1px;background:rgba(255,255,255,.08);margin-bottom:48px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand{font-family:var(--serif);font-size:32px;font-weight:300;font-style:italic;color:var(--gold3);margin-bottom:12px}
.footer-brand em{font-style:normal;color:var(--rose2)}
.footer-tagline{font-size:13px;line-height:1.6;max-width:260px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold3);margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;cursor:pointer;transition:color .2s}
.footer-col ul li a:hover{color:var(--gold3)}
.footer-info-hint{font-size:11px;color:rgba(255,255,255,.3);margin-top:12px;font-style:italic}
.footer-quick-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:24px}
.footer-ql-label{font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.footer-ql-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.footer-ql-btn:hover{background:rgba(255,255,255,.12);color:var(--gold3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:8px}
@media(max-width:768px){
  footer{padding:40px 20px 24px}
  .footer-top{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ── WA Bubble Button alias ── */
.wa-bubble-btn{width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);border:none;transition:transform .2s,box-shadow .2s}
.wa-bubble-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}

/* ── Modals responsive mejorado ── */
@media(max-width:480px){
  .cart-header{padding:18px 16px}
  .cart-items{padding:16px}
  .cart-footer{padding:16px}
  .cart-item{gap:10px}
  .cart-item-img{width:56px;height:56px}
  .cart-item-name{font-size:13px}
  .shipping-bar{padding:10px 16px}
  .order-modal{padding:20px 16px 28px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .order-title{font-size:20px}
  .order-type-btn{padding:12px 10px}
  .order-type-icon{font-size:20px}
  .order-type-label{font-size:12px}
  .order-type-sub{font-size:10px}
  .photo-slots-grid{grid-template-columns:repeat(3,1fr)}
  .wish-panel-header,.wish-header{padding:18px 16px}
  .wish-items,.wish-content{padding:16px}
  .info-modal{padding:24px 16px}
  .info-modal h2{font-size:22px}
  .agotado-modal{padding:28px 20px}
  .agotado-title{font-size:22px}
  .welcome-popup-box{padding:28px 20px}
  .welcome-popup-title{font-size:24px}
  .wizard-modal{padding:24px 16px}
  .wizard-title{font-size:22px}
}

/* ── Search results responsive ── */
@media(max-width:600px){
  .search-results{left:0!important;right:0!important;width:100vw!important;border-radius:0 0 12px 12px;top:56px!important}
}

/* ── WA bubble mobile ── */
@media(max-width:768px){
  /* En mobile el WA ya está en el bottom nav — ocultar el bubble flotante */
  .wa-bubble{display:none!important}
}
@media(max-width:480px){
  .wa-btn{width:46px;height:46px;font-size:22px}
  .wa-menu{width:240px}
}

/* ── Back to top mobile ── */
@media(max-width:480px){
  .back-top{bottom:72px;right:12px;width:36px;height:36px;font-size:14px}
}

/* ── Live sales mobile ── */
@media(max-width:480px){
  #live-sales-container{bottom:70px;left:10px}
  .live-sale-notif{max-width:240px;padding:8px 10px}
  .ls-avatar{width:30px;height:30px;font-size:13px}
}

/* ── Compare Bar ── */
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--gold3);padding:12px 20px;z-index:9100;display:none;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 -4px 20px rgba(44,31,26,.3)}
.compare-bar.show{display:flex}
.compare-bar-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}
.compare-slots{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.compare-btn{background:var(--gold);color:var(--ink);border:none;padding:8px 18px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:all .2s;flex-shrink:0}
.compare-btn:hover{background:var(--gold2)}
.compare-clear{background:none;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.6);padding:8px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s;flex-shrink:0}
.compare-clear:hover{border-color:rgba(255,255,255,.6);color:#fff}

/* ── Compare Modal Box ── */
.compare-modal-box{background:var(--white);border-radius:16px;padding:28px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.compare-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.compare-modal-title{font-family:var(--serif);font-size:24px;font-weight:300;font-style:italic;color:var(--ink)}
.compare-table{overflow-x:auto}
.compare-table table{width:100%;border-collapse:collapse}
.compare-table td,.compare-table th{padding:10px 14px;border:1px solid var(--cream4);font-size:13px;color:var(--mink);vertical-align:top}
.compare-table th{background:var(--cream2);font-weight:700;color:var(--ink2)}

/* ── Wizard Box ── */
.wizard-box{background:var(--white);border-radius:20px;padding:32px 28px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.wizard-progress{height:3px;background:var(--cream4);border-radius:2px;margin-bottom:24px;overflow:hidden}
.wizard-progress-fill{height:100%;background:linear-gradient(90deg,var(--rose2),var(--gold));border-radius:2px;transition:width .4s ease}
.wizard-header{margin-bottom:20px}
.wizard-step-dots{display:flex;gap:6px;margin-bottom:8px}
.wizard-dot{width:8px;height:8px;border-radius:50%;background:var(--cream4);transition:all .3s}
.wizard-dot.active{background:var(--rose2);width:20px;border-radius:4px}
.wizard-title{font-family:var(--serif);font-size:24px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:4px}
.wizard-subtitle{font-size:11px;color:var(--mink);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.wizard-options{display:flex;flex-direction:column;gap:10px}
.wizard-nav{display:flex;gap:10px;margin-top:20px}
.wizard-next{flex:1;background:var(--ink);color:var(--gold3);border:none;padding:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;cursor:pointer;font-family:var(--sans);transition:all .3s}
.wizard-next:hover{background:var(--ink2)}
.wizard-back{background:none;border:1px solid var(--cream4);color:var(--mink);padding:14px 18px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.wizard-back:hover{border-color:var(--gold);color:var(--ink)}

/* ── Cookie Banner mejorado ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--ink);z-index:9300;display:none;flex-direction:column;box-shadow:0 -4px 24px rgba(44,31,26,.3)}
.cookie-banner.show{display:flex}
.cookie-main{display:flex;align-items:center;gap:14px;padding:16px 20px;flex-wrap:wrap}
.cookie-icon{font-size:24px;flex-shrink:0}
.cookie-text{flex:1;min-width:200px}
.cookie-text strong{display:block;font-size:13px;font-weight:700;color:var(--gold3);margin-bottom:2px}
.cookie-text span{font-size:12px;color:rgba(255,255,255,.65)}
.cookie-text a{color:var(--gold3);cursor:pointer;text-decoration:underline}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.cookie-accept{background:#22c55e;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:background .2s}
.cookie-accept:hover{background:#16a34a}
.cookie-reject{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.cookie-reject:hover{background:rgba(255,255,255,.15)}
.cookie-detail{display:none;padding:0 20px 16px}
.cookie-detail.show{display:block}
.cookie-detail-inner p{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:10px}
.cookie-types{display:flex;flex-direction:column;gap:8px}
.cookie-type{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cookie-type:last-child{border-bottom:none}
.cookie-type-icon{font-size:18px;flex-shrink:0}
.cookie-type-info{flex:1}
.cookie-type-info strong{display:block;font-size:12px;color:rgba(255,255,255,.9)}
.cookie-type-info span{font-size:11px;color:rgba(255,255,255,.5)}
.cookie-type-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;flex-shrink:0}
.badge-required{background:rgba(34,197,94,.2);color:#4ade80}
.badge-optional{background:rgba(201,169,110,.2);color:var(--gold3)}

/* ── Agotado Box ── */
.agotado-box{background:var(--white);border-radius:20px;padding:40px 32px;max-width:400px;width:100%;text-align:center;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}

/* ── Seasonal Banner ── */
.seasonal-overlay{position:fixed;inset:0;background:rgba(44,31,26,.5);z-index:9400;display:none}
.seasonal-overlay.show{display:block}
.seasonal-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--white);border-radius:20px;padding:32px 28px;max-width:480px;width:calc(100% - 32px);z-index:9500;display:none;text-align:center;box-shadow:0 20px 60px rgba(44,31,26,.3);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.seasonal-banner.show{display:block}
.seasonal-banner-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}

/* ── Info Modal Box ── */
.info-modal-box{background:var(--white);border-radius:16px;padding:0;max-width:600px;width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.info-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--cream4)}
.info-modal-title{font-family:var(--serif);font-size:22px;font-weight:300;font-style:italic;color:var(--ink)}
.info-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--mink)}
.info-modal-tabs{display:flex;gap:4px;padding:12px 16px;border-bottom:1px solid var(--cream4);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.info-modal-tabs::-webkit-scrollbar{display:none}
.info-modal-tab{padding:8px 14px;border:1.5px solid var(--cream4);background:var(--white);border-radius:20px;font-size:11px;font-weight:700;color:var(--mink);cursor:pointer;font-family:var(--sans);transition:all .2s;white-space:nowrap;flex-shrink:0}
.info-modal-tab:hover,.info-modal-tab.active{background:var(--ink);color:var(--gold3);border-color:var(--ink)}
.info-modal-body{padding:24px;overflow-y:auto;flex:1;font-size:14px;color:var(--mink);line-height:1.7}
.info-modal-body h3{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink);margin:16px 0 8px}
.info-modal-body h3:first-child{margin-top:0}
.info-modal-body ul{padding-left:18px;margin-bottom:12px}
.info-modal-body li{margin-bottom:4px}


/* ── Group Panel (bento variantes) ── */
.group-panel-overlay{position:fixed;inset:0;background:rgba(44,31,26,.5);z-index:9400;opacity:0;pointer-events:none;transition:opacity .3s}
.group-panel-overlay.open{opacity:1;pointer-events:all}
.group-panel{position:fixed;bottom:0;left:0;right:0;background:var(--white);z-index:9500;border-radius:24px 24px 0 0;max-height:85vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 40px rgba(44,31,26,.18)}
.group-panel.open{transform:translateY(0)}
.group-panel-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid var(--cream4);flex-shrink:0}
.group-panel-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mink);margin-bottom:4px}
.group-panel-title{font-family:var(--serif);font-size:24px;font-weight:300;font-style:italic;color:var(--ink);line-height:1.1}
.group-panel-close{background:var(--cream2);border:none;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--mink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.group-panel-close:hover{background:var(--cream4)}
.group-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gp-card{background:var(--white);border:1.5px solid var(--cream4);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .22s cubic-bezier(.34,1.2,.64,1);position:relative}
.gp-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 24px rgba(44,31,26,.12)}
.gp-card:active{transform:scale(.96)}
.gp-card-img{width:100%;aspect-ratio:1;background:var(--pearl);overflow:hidden;position:relative}
.gp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gp-card:hover .gp-card-img img{transform:scale(1.07)}
.gp-card-body{padding:8px 10px 10px}
.gp-card-name{font-size:12px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:3px}
.gp-card-price{font-size:11px;color:var(--rose2);font-weight:700}
@media(max-width:480px){
  .group-panel-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:16px}
  .group-panel-header{padding:18px 16px 14px}
  .group-panel-title{font-size:20px}
}

/* ══════════════════════════════════════════
   ORDER FORM — IMPROVED FIELDS
══════════════════════════════════════════ */

/* Info banner at top of each form type */
.of-info-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1.5px solid transparent;
}
.of-banner-agencia  { background: #eff6ff; border-color: #bfdbfe; }
.of-banner-delivery { background: #f0fdf4; border-color: #bbf7d0; }
.of-banner-recojo   { background: #fdf4ff; border-color: #e9d5ff; }
.of-banner-icon { font-size: 28px; flex-shrink: 0; }
.of-banner-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.of-banner-sub   { font-size: 11px; color: var(--mink); margin-top: 2px; }

/* Two-column row */
.of-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:480px){ .of-row-2 { grid-template-columns: 1fr; } }

/* Floating label fields */
.order-field.of-float { position: relative; }
.order-field.of-float input {
  width: 100%;
  padding: 20px 14px 8px;
  background: var(--cream3);
  border: 1.5px solid var(--cream4);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
}
.order-field.of-float label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--mink);
  pointer-events: none;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.order-field.of-float input:focus + label,
.order-field.of-float input:not(:placeholder-shown) + label {
  top: 10px;
  transform: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold2);
}
.order-field.of-float input:focus { border-color: var(--gold); background: var(--white); }
.order-field.of-float input.of-input-ok  { border-color: #22c55e; }
.order-field.of-float input.of-input-err { border-color: #ef4444; }

/* Province floating label */
.prov-float-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--mink);
  pointer-events: none;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  font-weight: 500;
  z-index: 1;
}
.prov-search-input:focus ~ .prov-float-label,
.prov-search-input:not(:placeholder-shown) ~ .prov-float-label {
  top: 10px;
  transform: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold2);
}
.prov-search-input { padding: 20px 36px 8px 14px !important; }

/* Field hint text */
.of-field-hint {
  font-size: 11px;
  color: var(--mink);
  margin-top: 4px;
  padding-left: 2px;
}

/* Agency chips */
.of-agency-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.of-optional-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--mink);
  background: var(--cream4);
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
}
.of-agency-chips, .of-district-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.of-agency-chip, .of-district-chip {
  padding: 7px 14px;
  border: 1.5px solid var(--cream4);
  border-radius: 20px;
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: all .18s;
  font-family: var(--sans);
}
.of-agency-chip:hover, .of-district-chip:hover {
  border-color: var(--gold);
  background: var(--cream2);
  color: var(--ink);
}
.of-agency-chip.active, .of-district-chip.active {
  border-color: var(--rose2);
  background: var(--rose3);
  color: var(--rose2);
}

/* Note box */
.of-note-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cream2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--mink);
  line-height: 1.6;
  border: 1px solid var(--cream4);
}
.of-note-box strong { color: var(--ink); }

/* Store card (recojo) */
.of-store-card {
  background: var(--cream2);
  border: 1.5px solid var(--cream4);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.of-store-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.of-store-icon { font-size: 22px; flex-shrink: 0; }
.of-store-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.of-store-addr { font-size: 12px; color: var(--mink); margin-top: 2px; }
.of-store-map-btn {
  margin-left: auto;
  background: #25d366;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--sans);
  transition: background .2s;
  flex-shrink: 0;
}
.of-store-map-btn:hover { background: #16a34a; }
.of-store-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mink);
  padding-top: 8px;
  border-top: 1px solid var(--cream4);
}

/* ── Modal Gracias por tu compra ── */
.thankyou-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  z-index:9998;animation:fadeIn .25s ease;
}
.thankyou-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);
  z-index:9999;background:var(--white);border-radius:24px;
  padding:40px 32px 32px;text-align:center;width:min(92vw,380px);
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  animation:thankyouPop .35s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes thankyouPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.85)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.thankyou-confetti{font-size:36px;animation:confettiBounce .6s ease infinite alternate}
@keyframes confettiBounce{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.thankyou-icon{font-size:52px;margin:8px 0 12px}
.thankyou-title{font-family:var(--serif);font-size:24px;font-weight:400;font-style:italic;color:var(--ink);margin:0 0 10px}
.thankyou-sub{font-size:14px;color:var(--mink);line-height:1.6;margin:0 0 16px}
.thankyou-discount-box{
  background:var(--cream2);border:1.5px dashed var(--rose2);
  border-radius:14px;padding:14px 20px;margin:0 0 20px;
  animation:discountPop .4s cubic-bezier(.34,1.4,.64,1) .2s both;
}
@keyframes discountPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.thankyou-discount-code{
  font-family:var(--serif);font-size:26px;font-weight:400;font-style:italic;
  color:var(--rose2);letter-spacing:.06em;margin-bottom:4px;
}
.thankyou-discount-label{font-size:12px;color:var(--mink);font-weight:500}
.thankyou-skip{font-size:11px;color:var(--mink);margin:10px 0 0;opacity:.7}
.thankyou-btn{
  width:100%;padding:14px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--rose2),var(--gold2));
  color:#fff;font-size:15px;font-weight:700;font-family:var(--sans);
  letter-spacing:.03em;transition:transform .15s,box-shadow .15s;
  box-shadow:0 6px 20px rgba(196,132,126,.35);
}
.thankyou-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(196,132,126,.45)}
.thankyou-btn:active{transform:scale(.97)}
body.dark-mode .thankyou-modal{background:var(--cream2);border:1px solid var(--cream4)}
body.dark-mode .thankyou-title{color:var(--ink)}
body.dark-mode .thankyou-sub{color:var(--mink)}
body.dark-mode .thankyou-discount-box{background:var(--cream3);border-color:var(--rose2)}
body.dark-mode .thankyou-discount-label{color:var(--mink)}
body.dark-mode .thankyou-skip{color:var(--mink)}

/* ── Maps autocomplete suggestions ── */
.of-maps-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
  background: var(--white); border: 1.5px solid var(--cream4);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(44,31,26,.12);
  max-height: 180px; overflow-y: auto; margin-top: 4px;
}
.of-maps-suggestion {
  padding: 10px 14px; font-size: 12px; color: var(--ink2);
  cursor: pointer; border-bottom: 1px solid var(--cream4);
  line-height: 1.4; transition: background .15s;
}
.of-maps-suggestion:last-child { border-bottom: none; }
.of-maps-suggestion:hover { background: var(--cream2); color: var(--ink); }
#of-maps-wrap { position: relative; }

/* ── Destinatario wrap ── */
#of-destinatario-wrap {
  background: var(--cream2); border-radius: 12px;
  padding: 14px; margin-bottom: 4px;
}

/* ── Zonas de delivery ── */
.of-zona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media(max-width:400px) { .of-zona-grid { grid-template-columns: repeat(2,1fr); } }

.of-zona-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 6px;
  border: 2px solid var(--cream4); border-radius: 12px;
  background: var(--white); cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  font-family: var(--sans);
}
.of-zona-btn:hover { border-color: var(--zona-color, var(--rose2)); background: var(--cream2); transform: translateY(-1px); }
.of-zona-btn.active { border-color: var(--zona-color, var(--rose2)); background: color-mix(in srgb, var(--zona-color, #e05a5a) 10%, white); }
.of-zona-emoji { font-size: 18px; }
.of-zona-nombre { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.of-zona-costo { font-size: 12px; font-weight: 700; color: var(--zona-color, var(--rose2)); }

.of-delivery-cost-badge {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream2); border-radius: 10px;
  padding: 10px 14px; margin-top: 10px;
  font-size: 13px; color: var(--mink);
}
.of-delivery-cost-badge strong { font-size: 16px; color: var(--ink); }