:root{
  --pink-25:#fff9fb;
  --pink-50:#fff3f7;
  --pink-100:#ffe7ef;
  --pink-200:#ffd0df;
  --pink-300:#ffb6cd;
  --pink-500:#ff6ea1;
  --text-900:#333333;
  --text-700:#555555;
  --text-500:#888888;
  --offwhite:#f9fafb;
  --white:#ffffff;
  --card-bg:#ffffff;
  --card-border:rgba(255,182,203,.35);
  --brand-pink:var(--pink-500);
  --shadow-lg:0 30px 60px rgba(231,111,148,.20), 0 10px 20px rgba(31,30,36,.08);
  --shadow:0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-hover:0 6px 14px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08);
  --radius:24px;
  --radius-sm:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", sans-serif;
  color:var(--text-900);
  line-height:1.6;
  background:
    radial-gradient(60% 40% at 10% 10%, var(--pink-50), #0000 60%),
    radial-gradient(70% 45% at 90% 0%, var(--pink-100), #0000 60%),
    radial-gradient(55% 35% at 50% 100%, var(--pink-25), #0000 60%),
    linear-gradient(180deg, var(--white), var(--pink-25));
}

.no-scroll{overflow:hidden}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:.6rem 1rem;background:var(--white);border-radius:999px;box-shadow:var(--shadow);z-index:9999}

.scene-bg{position:fixed;inset:0;pointer-events:none;filter:blur(0.5px);z-index:-1}

/* Particle constellation background */
.constellation-canvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.7}

.device-frame{
  width:min(480px,92vw);
  max-width:600px;
  margin:40px auto;
  background:var(--offwhite);
  border-radius:calc(var(--radius) + 10px);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,182,203,.35);
  position:relative;
  z-index:10;
}
.device-topbar{height:32px;display:flex;gap:6px;align-items:center;padding:0 12px}
.device-topbar .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,#ffd2e3,#ffadc7);box-shadow:0 1px 0 #ffffffa8 inset}
.viewport{
  height:min(760px, calc(100vh - 140px));
  overflow-y:auto;
  scroll-behavior:smooth;
  padding:calc(18px + env(safe-area-inset-top, 0px)) 16px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg,var(--white),var(--pink-25));
}

/* Visible custom scrollbar */
.viewport::-webkit-scrollbar{width:10px}
.viewport::-webkit-scrollbar-track{background:#f2f3f4;border-radius:999px}
.viewport::-webkit-scrollbar-thumb{background:#e9b8c8;border-radius:999px;border:2px solid #f2f3f4}
.viewport{scrollbar-color:#e9b8c8 #f2f3f4;scrollbar-width:thin}

.header{display:grid;justify-items:center;text-align:center;margin:12px 0 32px;animation:fadeSlideDown 0.8s ease;padding:12px 0}
.brand-mark{display:grid;place-items:center}
.brand-mark img{width:auto;max-width:90%;height:auto;display:block;margin:12px auto 18px;object-fit:contain;image-rendering:auto;animation:pulse 2s ease-in-out infinite}
.brand-title{font-family:"Great Vibes",cursive;font-size:clamp(2rem,8vw,2.6rem);line-height:1.1;margin:0;color:#1c1d20}
.tagline{margin:.25rem 0 0;color:var(--text-700);font-size:0.95rem}

.order-banner{margin:20px auto 0;padding:12px 20px;background:linear-gradient(135deg,var(--pink-100),var(--pink-50));border:1px solid var(--pink-200);border-radius:12px;max-width:90%;animation:fadeIn 1s ease 0.5s backwards}
.order-banner p{margin:0 0 10px 0;color:var(--text-900);font-size:0.95rem;font-weight:600;line-height:1.5}

/* Social media links container */
.social-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Social media buttons */
.social-btn{display:inline-block;color:#fff;padding:.5rem .9rem;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid rgba(0,0,0,0.04);font-size:0.9rem;transition:transform 0.2s ease, box-shadow 0.2s ease}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.15)}
.social-btn:active{transform:translateY(1px)}

/* Brand-specific colors */
.whatsapp-btn{background:#25D366}
.whatsapp-btn:focus{outline:2px solid #fff;box-shadow:0 0 0 4px rgba(37,211,102,0.3)}

.instagram-btn{background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)}
.instagram-btn:focus{outline:2px solid #fff;box-shadow:0 0 0 4px rgba(220,39,67,0.3)}

.facebook-btn{background:#1877F2}
.facebook-btn:focus{outline:2px solid #fff;box-shadow:0 0 0 4px rgba(24,119,242,0.3)}

@media (max-width:480px){
  .social-btn{padding:.6rem 1rem;font-size:0.95rem}
  .social-links{gap:8px}
}

@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pulse{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

.products{display:grid;gap:24px}

/* Product row for side-by-side layouts */
.product-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;animation:fadeSlideUp 0.6s ease forwards;opacity:0;align-items:start}

.product-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;animation:fadeSlideUp 0.6s ease forwards;opacity:0;transition:transform 0.3s ease, box-shadow 0.3s ease;height:100%;display:flex;flex-direction:column;position:relative;transform-style:preserve-3d;perspective:1000px}

/* Dual-image cards are wider */
.product-card-dual{max-width:700px;margin:0 auto}

/* Ensure side-by-side cards have equal heights */
.product-row .product-card{height:100%}

/* Dual-image product card layout */
.product-images-row{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--card-border)}
.product-images-row .product-img{min-height:280px;height:380px;position:relative;background:#fff;display:flex;align-items:center;justify-content:center}
.product-images-row .product-img img{width:100%;height:100%;object-fit:contain}

/* Clickable images in dual-image products */
.product-img-clickable{display:block;appearance:none;background:none;border:0;padding:0;cursor:zoom-in;width:100%;height:100%}
.product-img-clickable .product-img{min-height:280px}
.product-img-clickable:hover{opacity:0.95}

/* Mobile optimization for dual images */
@media (max-width: 480px){
  .product-images-row .product-img{min-height:200px;height:240px}
  .product-img-clickable .product-img{min-height:200px}
  .product-card-dual{max-width:100%}
}

/* Image labels */
.image-label{position:absolute;bottom:8px;right:8px;background:rgba(255,255,255,0.9);color:var(--text-500);font-size:0.75rem;padding:4px 10px;border-radius:8px;font-weight:600;opacity:0.85;pointer-events:none}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

/* 3D Tilt interaction */
.product-card.tilt-enabled{will-change:transform}
.product-card.tilt-enabled:hover{transition:transform 0.1s ease-out, box-shadow 0.3s ease}

/* Price shimmer animation */
@keyframes priceShimmer{
  0%{opacity:1;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08);color:var(--brand-pink)}
  100%{opacity:1;transform:scale(1)}
}
.product-price.shimmer{animation:priceShimmer 0.8s ease-out}

/* Lightbox navigation arrows */
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.95);border:1px solid #e6e6ea;cursor:pointer;display:grid;place-items:center;font-size:20px;font-weight:bold;color:#333;transition:all 0.2s ease;z-index:10;-webkit-tap-highlight-color:transparent}
.lightbox-nav:hover{background:#fff;transform:translateY(-50%) scale(1.1)}
.lightbox-nav:active{transform:translateY(-50%) scale(0.95)}
.lightbox-nav[disabled]{opacity:0.3;cursor:not-allowed;pointer-events:none}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}

/* Mobile navigation arrows - larger and positioned for thumb reach */
@media (max-width:480px){
  .lightbox-nav{width:50px;height:50px;font-size:24px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}

/* Animation delays for cards and rows */
.products > :nth-child(1){animation-delay:0.1s}
.products > :nth-child(2){animation-delay:0.2s}
.products > :nth-child(3){animation-delay:0.3s}
.products > :nth-child(4){animation-delay:0.4s}
.products > :nth-child(5){animation-delay:0.5s}
.products > :nth-child(6){animation-delay:0.6s}
.products > :nth-child(7){animation-delay:0.7s}
.products > :nth-child(8){animation-delay:0.8s}
.products > :nth-child(9){animation-delay:0.9s}
.products > :nth-child(10){animation-delay:1.0s}
.products > :nth-child(11){animation-delay:1.1s}
.products > :nth-child(12){animation-delay:1.2s}
.products > :nth-child(13){animation-delay:1.3s}

@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.product-trigger{display:flex;flex-direction:column;height:100%;appearance:none;background:none;border:0;width:100%;cursor:zoom-in;padding:0;text-align:left}
.product-trigger:focus-visible{outline:3px solid #0000;box-shadow:0 0 0 3px #fff, 0 0 0 6px #f8cfe0;border-radius:20px}
.product-img{width:100%;min-height:240px;position:relative;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.product-img img{width:100%;height:auto;display:block;object-fit:cover;image-rendering:auto;max-height:380px;image-rendering:-webkit-optimize-contrast}
.product-info{display:flex;align-items:baseline;justify-content:space-between;padding:1.1rem 1.2rem;gap:8px;flex-wrap:wrap}
.product-info-stacked{flex-direction:column;align-items:flex-start;gap:6px}
.product-info-stacked .product-price{font-size:1.2rem}
.product-info-stacked .product-note{margin-left:0}
.product-name{font-size:1.1rem;line-height:1.3;font-weight:600;color:var(--text-900);margin:0;font-family:Helvetica, Arial, sans-serif}
.product-price{font-size:1.35rem;color:#8c2b5a;font-weight:800;letter-spacing:-0.02em}
.product-note{font-size:.85rem;color:var(--text-500);margin-left:auto;font-weight:400;opacity:0.85}

/* Photographic placeholders */
.ph{position:relative;overflow:hidden}
.ph:before{content:"";position:absolute;inset:-10%;background:radial-gradient(60% 80% at 30% 20%, #fff9 0 20%, #0000 45%), radial-gradient(50% 60% at 75% 30%, #fff6 0 18%, #0000 40%)}
.ph--floral{background:
  linear-gradient(180deg,#fffafc,#ffeaf2),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 450"><defs><linearGradient id="g" x1="0" x2="0" y1="0" y2="1"><stop stop-color="%23ffd7e6"/><stop offset="1" stop-color="%23ffc1d8"/></linearGradient></defs><rect width="600" height="450" fill="url(%23g)"/><g fill-opacity=".35"><circle cx="120" cy="160" r="38" fill="white"/><circle cx="180" cy="210" r="22" fill="white"/><circle cx="240" cy="150" r="28" fill="white"/><circle cx="360" cy="230" r="40" fill="white"/><circle cx="420" cy="170" r="26" fill="white"/></g></svg>') center/cover no-repeat;
}
.ph--whimsical{background:linear-gradient(180deg,#fffafb,#ffe9f2), repeating-linear-gradient(45deg,#ffd9e8 0 12px,#ffe6f0 12px 24px)}
.ph--pastel{background:linear-gradient(180deg,#fff,#fff1f6), radial-gradient(600px 300px at 70% -10%, #ffd9e8, #0000 60%), radial-gradient(500px 280px at -15% 10%, #ffe6f0, #0000 60%)}

/* Lightbox */
.lightbox[aria-hidden="true"]{display:none}
.lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;animation:fadeIn 0.3s ease}
.lightbox-overlay{position:absolute;inset:0;background:rgba(23,22,28,.6);animation:fadeIn 0.3s ease}
.lightbox-content{position:relative;background:var(--white);border-radius:20px;box-shadow:var(--shadow-lg);width:min(720px,92vw);max-height:90vh;display:grid;grid-template-rows:auto 1fr auto;animation:zoomIn 0.3s ease}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes zoomIn{
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}
.lightbox-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid #e6e6ea;background:#fff;color:#333;cursor:pointer;font-size:24px;line-height:1;transition:all 0.3s ease;-webkit-tap-highlight-color:transparent}
.lightbox-close:hover{transform:rotate(90deg);background:var(--pink-100);border-color:var(--pink-300)}

/* Mobile lightbox close button */
@media (max-width:480px){
  .lightbox-close{width:48px;height:48px;font-size:26px;top:8px;right:8px}
}
.lightbox-media{padding:18px}
.lightbox-media .ph{width:100%;aspect-ratio:16/10;border-radius:14px}
.lightbox-media img{width:100%;height:auto;display:block;border-radius:14px;touch-action:pinch-zoom;user-select:none}

/* Mobile lightbox media optimizations */
@media (max-width:480px){
  .lightbox-media{padding:12px;padding-top:56px}
  .lightbox-media img{border-radius:10px;max-height:60vh;object-fit:contain}
}
.lightbox-info{display:flex;align-items:baseline;justify-content:space-between;padding:0 18px 18px;flex-wrap:wrap;gap:8px}
.lightbox-name{font-weight:700}
.lightbox-price{color:#a03a67;font-weight:700}
.lightbox-note{color:var(--text-500);font-size:.95rem;width:100%;margin-top:4px}

/* Mobile lightbox info */
@media (max-width:480px){
  .lightbox-info{padding:0 12px 16px}
  .lightbox-name{font-size:1rem}
  .lightbox-price{font-size:1.1rem}
  .lightbox-note{font-size:.88rem}
}

/* Footer inside viewport */
.footer{opacity:.9;text-align:center;color:var(--text-500);padding:12px 6px}

/* Selection */
::selection{background:var(--pink-300);color:#fff}
.product-card:active{transform:translateY(1px)}

@media (max-width: 480px){
  .product-info{padding:1rem 1.1rem}
  .product-name{font-size:1.15rem}
  .product-price{font-size:1.05rem}
  
  /* Stack side-by-side products on mobile */
  .product-row{grid-template-columns:1fr;gap:20px}
  /* Disable original keyframe animations on mobile; use JS-driven reveal */
  .product-card, .product-row{animation:none}
  /* Mobile reveal animation states */
  .mobile-animate{opacity:0;transform:translateY(18px) scale(.985);will-change:transform,opacity}
  .mobile-animate.in-view{opacity:1;transform:translateY(0) scale(1);transition:opacity .6s cubic-bezier(.25,.6,.3,1),transform .6s cubic-bezier(.25,.6,.3,1)}
  
  /* Disable tilt on mobile */
  .product-card.tilt-enabled{transform-style:flat !important;perspective:none !important}
  .product-card:hover{transform:translateY(-2px) !important;box-shadow:var(--shadow-hover)}
  
  /* Better touch targets */
  .product-trigger{-webkit-tap-highlight-color:transparent}
}

/* Reduced motion preference overrides (mobile) */
@media (max-width:480px) and (prefers-reduced-motion: reduce){
  .mobile-animate, .mobile-animate.in-view{opacity:1;transform:none;transition:none}
}

/* Disable tilt for reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-card.tilt-enabled:hover{transform:translateY(-4px) !important}
  .product-price.shimmer{animation:none !important}
}

/* Notice chip */
.notice{display:inline-block;margin:.35rem 0 0;padding:.35rem .7rem;border-radius:999px;background:#fff3f8;border:1px solid #f6cfe0;color:#a03a67;font-weight:700;font-size:.9rem}