/* ============================================
   Fancy Silk Store — Design System
   ============================================ */

/* ============================================
   Page-to-page bubble transition (mobile)
   Uses the native cross-document View Transitions API — supported
   browsers (Chrome/Edge/Android WebView) animate every same-origin
   navigation automatically; unsupported browsers just navigate as
   normal, so this is a safe no-op everywhere else.
   ============================================ */
@view-transition {
  navigation: auto;
}

@media (max-width:760px){
  ::view-transition-old(root){
    animation: bubble-fade-out .32s ease both;
  }
  ::view-transition-new(root){
    animation: bubble-expand .5s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes bubble-expand{
    from{ clip-path: circle(0% at 50% 96%); }
    to{ clip-path: circle(150% at 50% 96%); }
  }
  @keyframes bubble-fade-out{
    from{ opacity:1; }
    to{ opacity:0; }
  }
}
:root{
  --royal-blue: #155FAE;
  --royal-blue-dark: #0F4C8A;
  --royal-blue-light: #E8F1FB;
  --beige: #F5EFE6;
  --beige-dark: #E8DCC8;
  --green: #3B6E4F;
  --green-light: #E7F0EA;
  --ink: #1C2430;
  --white: #FFFFFF;
  --glass-bg: rgba(245, 239, 230, 0.55);
  --glass-blue: rgba(21, 95, 174, 0.55);
  --shadow-soft: 0 8px 30px rgba(28, 36, 48, 0.08);
  --shadow-card: 0 12px 40px rgba(28, 36, 48, 0.14);
  --radius-pill: 999px;
  --radius-card: 22px;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family: var(--font-main);
  background: var(--beige);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* Visually-hidden (SEO/a11y friendly headings) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================
   Pill Glass Nav Bar
   ============================================ */
.site-nav{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(92%, 980px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--shadow-soft);
  transition: all .35s ease;
}
.site-nav.scrolled{
  top: 10px;
  padding: 8px 12px 8px 20px;
  background: var(--glass-bg);
  box-shadow: var(--shadow-card);
}
.nav-logo{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:1.05rem; color:var(--royal-blue-dark);
  white-space:nowrap;
}
.nav-logo img{
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:1.5px solid rgba(255,255,255,.6);
}
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); transition: transform .2s ease, background .2s ease;
}
.footer-social a:hover{ background: var(--royal-blue); transform: translateY(-3px); }
.footer-social img{ width:20px; height:20px; object-fit:contain; border-radius:4px; }
.nav-logo span{ color: var(--green); }
.nav-links{
  display:flex; align-items:center; gap:6px;
}
.nav-links a{
  padding:9px 16px;
  border-radius: var(--radius-pill);
  font-size:.92rem; font-weight:600;
  color: var(--ink);
  transition: background .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{
  background: var(--royal-blue);
  color: var(--white);
}
.nav-cta{
  display:flex; align-items:center; gap:8px;
  padding:10px 20px;
  border-radius: var(--radius-pill);
  background: var(--royal-blue);
  color: var(--white) !important;
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  box-shadow: 0 6px 16px rgba(21,95,174,.35);
  transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover{ background: var(--royal-blue-dark); transform: translateY(-2px); }

.nav-toggle{ display:none; }

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px;
  border-radius: var(--radius-pill);
  font-weight:700; font-size:.95rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background: var(--royal-blue);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(21,95,174,.32);
}
.btn-primary:hover{ background: var(--royal-blue-dark); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21,95,174,.4); }
.btn-outline{
  background: transparent;
  color: var(--royal-blue-dark);
  border: 2px solid var(--royal-blue);
}
.btn-outline:hover{ background: var(--royal-blue); color:var(--white); transform: translateY(-3px); }
.btn-whatsapp{
  background: #25D366;
  color: var(--white);
  box-shadow: 0 10px 24px rgba(37,211,102,.35);
}
.btn-whatsapp:hover{ background: #1EBE5B; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(37,211,102,.42); }

.btn-instagram{
  background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(214,41,118,.32);
}
.btn-instagram:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(214,41,118,.42); filter: brightness(1.06); }

.btn-icon{
  width:22px; height:22px; border-radius:6px; object-fit:cover; flex-shrink:0;
}
.btn-icon.round{ border-radius:50%; }

/* ============================================
   Hero
   ============================================ */
.hero{
  min-height: 100svh;
  display:flex; align-items:center;
  padding: 140px 0 80px;
  position: relative;
  background:
    radial-gradient(circle at 85% 15%, var(--beige-dark) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, var(--green-light) 0%, transparent 45%),
    var(--beige);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center;
  width:100%;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius: var(--radius-pill);
  background: var(--royal-blue-light); color: var(--royal-blue-dark);
  font-size:.8rem; font-weight:700; letter-spacing:.03em;
  margin-bottom:22px;
  opacity:0; animation: fadeUp .7s ease forwards;
}
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight:800; line-height:1.08; letter-spacing:-0.02em;
  color: var(--ink);
  margin-bottom:22px;
  opacity:0; animation: fadeUp .7s ease .1s forwards;
}
.hero h1 em{
  font-style:normal; color: var(--royal-blue);
  position:relative;
}
.word-rotate{
  display:inline-block;
  position:relative;
  vertical-align:top;
}
.word-rotate .wr-current{
  display:inline-block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.word-rotate .wr-current.wr-out{
  transform: translateY(-100%);
  opacity:0;
}
.word-rotate .wr-current.wr-in{
  animation: wrIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes wrIn{
  from{ transform: translateY(100%); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.hero p{
  font-size:1.08rem; color:#4B5563; max-width:480px; margin-bottom:34px;
  opacity:0; animation: fadeUp .7s ease .2s forwards;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation: fadeUp .7s ease .3s forwards; }
.hero-trust{ display:flex; gap:26px; margin-top:36px; flex-wrap:wrap; opacity:0; animation: fadeUp .7s ease .4s forwards; }
.hero-trust div{ font-size:.85rem; color:#4B5563; }
.hero-trust strong{ display:block; font-size:1.3rem; color: var(--royal-blue-dark); font-weight:800; }

.hero-visual{
  position:relative; opacity:0; animation: scaleIn .8s ease .25s forwards;
}
.hero-visual .frame{
  border-radius: 34px; overflow:hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/5;
  background: linear-gradient(145deg, var(--royal-blue-light), var(--beige-dark));
}
.hero-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.hero-badge{
  position:absolute; bottom:-18px; left:-18px;
  background: var(--white); padding:14px 20px; border-radius:18px;
  box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap:10px;
  font-size:.85rem; font-weight:700; color: var(--green);
}

@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes scaleIn{ from{ opacity:0; transform: scale(.92);} to{opacity:1; transform:scale(1);} }

/* ============================================
   Marquee — clothing styles strip
   ============================================ */
.marquee-section{
  padding: 34px 0;
  background: var(--white);
  border-top: 1px solid var(--beige-dark);
  border-bottom: 1px solid var(--beige-dark);
  overflow:hidden;
}
.marquee-track{
  display:flex; gap:14px; width:max-content;
  animation: marquee 28s linear infinite;
}
.marquee-section:hover .marquee-track{ animation-play-state: paused; }
.marquee-chip{
  display:flex; align-items:center; gap:10px;
  padding:12px 22px;
  background: var(--beige);
  border: 1px solid var(--beige-dark);
  border-radius: var(--radius-pill);
  font-weight:700; font-size:.95rem; color: var(--royal-blue-dark);
  white-space:nowrap;
}
.marquee-chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--green); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================
   Section shell
   ============================================ */
.section{ padding: 100px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-eyebrow{
  display:inline-block; color: var(--green); font-weight:700; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px;
}
.section-head h2{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight:800; color:var(--ink); letter-spacing:-0.01em;
  margin-bottom:14px;
}
.section-head p{ color:#5B6472; font-size:1.02rem; }
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* ============================================
   Reels — tilted fan cards
   ============================================ */
.reels-section{ background: var(--beige); }
.reels-row{
  display:flex; justify-content:center; align-items:flex-end;
  gap: 14px; flex-wrap:wrap; padding: 20px 0 10px;
}
.reel-card{
  position:relative;
  width: 168px; aspect-ratio: 9/16;
  border-radius: 24px; overflow:hidden;
  box-shadow: var(--shadow-card);
  background: linear-gradient(160deg, var(--royal-blue-light), var(--beige-dark));
  border: 4px solid var(--white);
  cursor:pointer;
  opacity:0; transform: translateY(40px) rotate(var(--tilt,0deg));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.reel-card.in-view{ opacity:1; animation: fanIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
.reel-card:nth-child(5n+1){ --tilt:-8deg; }
.reel-card:nth-child(5n+2){ --tilt:-4deg; }
.reel-card:nth-child(5n+3){ --tilt:0deg; z-index:2; width:190px; }
.reel-card:nth-child(5n+4){ --tilt:4deg; }
.reel-card:nth-child(5n+5){ --tilt:8deg; }
.reel-card:hover{
  transform: rotate(0deg) translateY(-14px) scale(1.06);
  box-shadow: 0 22px 46px rgba(28,36,48,.24);
  z-index: 5;
}
@keyframes fanIn{
  from{ opacity:0; transform: translateY(40px) rotate(var(--tilt,0deg)); }
  to{ opacity:1; transform: translateY(0) rotate(var(--tilt,0deg)); }
}
.reel-card img{ width:100%; height:100%; object-fit:cover; }
.reel-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(to top, rgba(15,20,28,.55), transparent 45%);
}
.reel-play svg{ width:38px; height:38px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.reel-label{
  position:absolute; bottom:10px; left:10px; right:10px;
  color:#fff; font-size:.72rem; font-weight:700;
}
.reels-cta{ text-align:center; margin-top:44px; }
.reels-more-btn{ display:none !important; }

/* ============================================
   WhatsApp / Instagram order CTA band
   ============================================ */
.order-band{
  background: linear-gradient(120deg, var(--royal-blue-dark), var(--royal-blue));
  color: var(--white);
  border-radius: 32px;
  padding: 60px 40px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center;
  box-shadow: var(--shadow-card);
}
.order-band h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:14px; }
.order-band p{ color: rgba(255,255,255,.85); max-width:460px; margin-bottom:10px; }
.order-trust{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:.85rem; color:rgba(255,255,255,.85); }
.order-trust span{ display:flex; align-items:center; gap:6px; }
.order-actions{ display:flex; flex-direction:column; gap:14px; }
.order-actions .btn{ width:100%; }
.btn-white{ background: var(--white); color: var(--royal-blue-dark); }
.btn-white:hover{ background: var(--beige); transform: translateY(-3px); }

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background: var(--ink); color: #C9D1DB;
  padding: 60px 0 24px; margin-top: 100px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:40px;
}
.footer-grid h4{ color:#fff; margin-bottom:16px; font-size:1rem; }
.footer-grid p{ font-size:.9rem; color:#9AA5B1; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ font-size:.9rem; color:#9AA5B1; transition:color .2s; }
.footer-grid ul a:hover{ color: var(--beige); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#7A8492;
}

/* ============================================
   Catalog page — carousel cards
   ============================================ */
.catalog-hero{ padding:150px 0 40px; text-align:center; }
.catalog-carousel{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding: 60px 0 30px;
  perspective: 1400px;
  overflow-x:hidden;
  max-width:100%;
}
.carousel-track{
  position:relative; height: 600px; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.carousel-card{
  position:absolute;
  width: 300px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow:hidden;
  cursor:pointer;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease, filter .55s ease;
}
.carousel-card .cc-img{ aspect-ratio: 3/4; background: linear-gradient(160deg, var(--beige-dark), var(--royal-blue-light)); overflow:hidden; }
.carousel-card .cc-img img{ width:100%; height:100%; object-fit:cover; }
.carousel-card .cc-body{ padding:18px 20px 22px; }
.carousel-card .cc-tag{ font-size:.72rem; font-weight:700; color: var(--green); text-transform:uppercase; letter-spacing:.06em; }
.carousel-card h3{ font-size:1.08rem; margin:6px 0 4px; color:var(--ink); }
.carousel-card .cc-price{ font-weight:800; color: var(--royal-blue-dark); }
.carousel-card .cc-price del{ color:#9AA5B1; font-weight:500; margin-left:8px; font-size:.85rem; }
.carousel-card .cc-btn-row{ display:flex; gap:8px; margin-top:14px; }
.carousel-card .cc-view-btn{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:10px 18px;
  background:transparent; color: var(--royal-blue-dark); font-weight:700; font-size:.85rem;
  border: 1.5px solid var(--royal-blue); border-radius: var(--radius-pill);
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-card .cc-view-btn:hover{ background: var(--royal-blue-light); transform: translateY(-2px); }
.carousel-card .cc-order-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px;
  background:#25D366; color:#fff; font-weight:700; font-size:.85rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(37,211,102,.3);
  transition: background .2s ease, transform .2s ease;
}
.carousel-card .cc-order-btn:hover{ background:#1EBE5B; transform: translateY(-2px); }

.carousel-card:not([data-pos="active"]) .cc-btn-row{ visibility:hidden; }
.carousel-card[data-pos="active"]{ transform: translateX(0) scale(1); z-index:5; opacity:1; filter:none; cursor:default; }
.carousel-card[data-pos="left1"]{ transform: translateX(-260px) scale(.85); z-index:4; opacity:.75; filter: blur(.5px); }
.carousel-card[data-pos="right1"]{ transform: translateX(260px) scale(.85); z-index:4; opacity:.75; filter: blur(.5px); }
.carousel-card[data-pos="left2"]{ transform: translateX(-440px) scale(.7); z-index:3; opacity:.4; }
.carousel-card[data-pos="right2"]{ transform: translateX(440px) scale(.7); z-index:3; opacity:.4; }
.carousel-card[data-pos="hidden"]{ transform: translateX(0) scale(.5); opacity:0; z-index:1; }

.carousel-nav{ display:flex; justify-content:center; gap:16px; margin-top:26px; }
.carousel-nav button{
  width:52px; height:52px; border-radius:50%;
  background: var(--white); box-shadow: var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--royal-blue-dark); transition: background .2s, transform .2s;
}
.carousel-nav button:hover{ background: var(--royal-blue); color:#fff; transform: scale(1.08); }
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.carousel-dots span{ width:8px; height:8px; border-radius:50%; background: var(--beige-dark); transition: all .3s; }
.carousel-dots span.active{ width:22px; background: var(--royal-blue); }

.save-contact-modal{
  position:fixed; inset:0; z-index:2500;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease;
}
.save-contact-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.save-contact-backdrop{
  position:absolute; inset:0; background: rgba(15,20,28,.6); backdrop-filter: blur(4px);
}
.save-contact-card{
  position:relative; z-index:1;
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width:380px; width:100%; padding:36px 30px 30px;
  text-align:center;
  transform: scale(.92) translateY(20px); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.save-contact-modal.open .save-contact-card{ transform: scale(1) translateY(0); }
.save-contact-card .scb-icon{ font-size:2.2rem; display:block; margin-bottom:10px; }
.save-contact-card h3{ font-size:1.15rem; margin-bottom:10px; color: var(--ink); }
.save-contact-card p{ font-size:.9rem; color:#5B6472; margin-bottom:22px; }
.save-contact-card .scb-save-btn{ width:100%; padding:13px 20px; font-size:.9rem; }
.save-contact-card .scb-dismiss{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background: var(--beige); color: var(--ink); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

.view-toggle{ display:flex; justify-content:center; gap:10px; margin-bottom:26px; }
.view-toggle-btn{
  padding:11px 22px; border-radius: var(--radius-pill);
  border:1.5px solid var(--beige-dark); font-weight:700; font-size:.85rem;
  color:var(--ink); background: var(--white); transition: all .2s;
}
.view-toggle-btn.active{ background: var(--royal-blue); border-color:var(--royal-blue); color:#fff; }
.view-toggle-btn:not(.active):hover{ border-color: var(--royal-blue); }

.catalog-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.filter-chip{
  padding:9px 18px; border-radius: var(--radius-pill);
  border:1.5px solid var(--beige-dark); font-weight:600; font-size:.85rem;
  color:var(--ink); transition: all .2s;
}
.filter-chip.active, .filter-chip:hover{ background: var(--royal-blue); border-color:var(--royal-blue); color:#fff; }

/* ============================================
   Product grid — simple listed catalog with images
   ============================================ */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:22px; margin-top:10px;
}
.grid-card{
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow:hidden;
  opacity:0; transform: translateY(24px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .3s ease;
}
.grid-card.in-view{ opacity:1; transform: translateY(0); }
.grid-card:hover{ box-shadow: 0 22px 46px rgba(28,36,48,.18); transform: translateY(-4px); }
.grid-card .gc-img{ aspect-ratio:3/4; overflow:hidden; background: linear-gradient(160deg, var(--beige-dark), var(--royal-blue-light)); }
.grid-card .gc-img img{ width:100%; height:100%; object-fit:cover; }
.grid-card .gc-body{ padding:16px 18px 20px; }
.grid-card .gc-tag{ font-size:.7rem; font-weight:700; color: var(--green); text-transform:uppercase; letter-spacing:.06em; }
.grid-card h3{ font-size:1rem; margin:6px 0 4px; color:var(--ink); }
.grid-card .gc-price{ font-weight:800; color: var(--royal-blue-dark); margin-bottom:12px; }
.grid-card .gc-btn-row{ display:flex; gap:8px; }
.grid-card .gc-view-btn{
  flex:0 0 auto;
  padding:9px 16px;
  background:transparent; color: var(--royal-blue-dark); font-weight:700; font-size:.8rem;
  border: 1.5px solid var(--royal-blue); border-radius: var(--radius-pill);
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.grid-card .gc-view-btn:hover{ background: var(--royal-blue-light); transform: translateY(-2px); }
.grid-card .gc-order-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px;
  background:#25D366; color:#fff; font-weight:700; font-size:.8rem;
  border-radius: var(--radius-pill);
  transition: background .2s ease, transform .2s ease;
}
.grid-card .gc-order-btn:hover{ background:#1EBE5B; transform: translateY(-2px); }

/* ============================================
   Product lightbox — "View" preview modal
   ============================================ */
.product-lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease;
}
.product-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.product-lightbox-backdrop{
  position:absolute; inset:0; background: rgba(15,20,28,.6); backdrop-filter: blur(4px);
}
.product-lightbox-card{
  position:relative; z-index:1;
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width:760px; width:100%; max-height:88vh; overflow:auto;
  display:grid; grid-template-columns:1fr 1fr;
  transform: scale(.92) translateY(20px); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.product-lightbox.open .product-lightbox-card{ transform: scale(1) translateY(0); }
.product-lightbox-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.9); color: var(--ink); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
.pl-img{ aspect-ratio:3/4; overflow:hidden; background: linear-gradient(160deg, var(--beige-dark), var(--royal-blue-light)); }
.pl-img img{ width:100%; height:100%; object-fit:cover; }
.pl-body{ padding:32px 30px; display:flex; flex-direction:column; }
.pl-tag{ font-size:.75rem; font-weight:700; color: var(--green); text-transform:uppercase; letter-spacing:.06em; }
.pl-name{ font-size:1.4rem; margin:10px 0 6px; color:var(--ink); }
.pl-fabric{ color:#5B6472; font-size:.9rem; margin-bottom:14px; }
.pl-price{ font-weight:800; font-size:1.3rem; color: var(--royal-blue-dark); margin-bottom:22px; }
.pl-order-btn{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px;
  background:#25D366; color:#fff; font-weight:700; font-size:.9rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(37,211,102,.3);
  transition: background .2s ease, transform .2s ease;
}
.pl-order-btn:hover{ background:#1EBE5B; transform: translateY(-2px); }

body.no-scroll{ overflow:hidden; }

.order-toast{
  position:fixed; left:50%; bottom:24px; z-index:3000;
  transform: translate(-50%, 20px);
  max-width:min(92vw, 380px);
  background: var(--ink); color:#fff; font-size:.85rem; font-weight:600;
  padding:14px 20px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  opacity:0; pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  text-align:center;
}
.order-toast.show{ opacity:1; transform: translate(-50%, 0); }
@media (max-width:760px){
  .order-toast{ bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width:640px){
  .product-lightbox-card{ grid-template-columns:1fr; max-width:400px; }
  .pl-img{ aspect-ratio:4/3; }
}

/* ============================================
   About page
   ============================================ */
.about-hero{ padding:150px 0 60px; }
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-split .frame{ border-radius:28px; overflow:hidden; box-shadow: var(--shadow-card); aspect-ratio:4/5; background: linear-gradient(160deg,var(--beige-dark),var(--royal-blue-light)); }
.timeline{ position:relative; padding-left:36px; }
.timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: var(--beige-dark); }
.timeline-item{ position:relative; margin-bottom:34px; }
.timeline-item::before{ content:''; position:absolute; left:-36px; top:4px; width:20px; height:20px; border-radius:50%; background: var(--royal-blue); border:4px solid var(--beige); }
.timeline-item h4{ color: var(--royal-blue-dark); font-size:1.05rem; margin-bottom:4px; }
.timeline-item p{ color:#5B6472; font-size:.92rem; }

.social-follow-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.social-follow-card{
  display:flex; align-items:center; gap:18px;
  background: var(--white); border-radius:22px; padding:26px;
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.social-follow-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.social-follow-card .avatar{
  width:66px; height:66px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:3px solid var(--beige-dark);
}
.social-follow-card.instagram .avatar{
  padding:2px; border:3px solid transparent;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5) border-box;
}
.social-follow-card .sf-body{ flex:1; min-width:0; }
.social-follow-card h4{ font-size:1rem; color:var(--ink); display:flex; align-items:center; gap:6px; }
.social-follow-card .handle{ font-size:.85rem; color:#5B6472; margin-bottom:8px; }
.social-follow-card .sf-stats{ display:flex; gap:14px; font-size:.8rem; color:#5B6472; margin-bottom:14px; }
.social-follow-card .sf-stats strong{ color:var(--ink); }
.social-follow-card .btn{ padding:9px 22px; font-size:.82rem; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{
  background:var(--white); border-radius:20px; padding:30px 26px; box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.value-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-card); }
.value-card .icon{ width:48px; height:48px; border-radius:14px; background: var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.value-card h3{ font-size:1.05rem; margin-bottom:8px; }
.value-card p{ color:#5B6472; font-size:.9rem; }

/* ============================================
   Contact page
   ============================================ */
.contact-hero{ padding:150px 0 40px; text-align:center; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:36px; }
.contact-card{
  background: var(--white); border-radius:26px; padding:38px; box-shadow: var(--shadow-soft);
  display:flex; flex-direction:column; gap:14px; transition: transform .3s ease;
}
.contact-card:hover{ transform: translateY(-6px); }
.contact-card .icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.contact-card.whatsapp .icon{ background: var(--green-light); color: var(--green); }
.contact-card.instagram .icon{ background: var(--royal-blue-light); color: var(--royal-blue); }
.contact-card h3{ font-size:1.2rem; }
.contact-card p{ color:#5B6472; font-size:.92rem; }
.contact-info-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px;
  text-align:center;
}
.contact-info-strip div{ padding:24px; background:var(--white); border-radius:18px; box-shadow: var(--shadow-soft); }
.contact-info-strip strong{ display:block; color:var(--royal-blue-dark); margin-bottom:6px; }
.map-frame{ border-radius:24px; overflow:hidden; box-shadow: var(--shadow-card); margin-top:50px; border:0; width:100%; height:360px; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:360px; margin:0 auto; }
  .order-band{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .about-split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .contact-info-strip{ grid-template-columns:1fr; }
}

/* ============================================
   Mobile-exclusive top bar + bottom action bar
   (hidden entirely above 760px)
   ============================================ */
.mobile-topbar, .mobile-bottombar{ display:none; }

@media (max-width: 760px){
  /* the floating pill nav is replaced by the dedicated mobile bars below */
  .site-nav{ display:none; }

  .mobile-topbar{
    display:flex; align-items:center; gap:10px;
    position:fixed; top:12px; left:12px; right:12px; z-index:1000;
    padding:10px 18px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .3s ease, transform .3s ease;
  }
  .mobile-topbar:active{ transform: scale(.99); }
  .mobile-topbar img{
    width:32px; height:32px; border-radius:50%; object-fit:cover;
    border:1.5px solid rgba(255,255,255,.6);
  }
  .mobile-topbar span{
    font-weight:800; font-size:1rem; color: var(--royal-blue-dark);
  }
  .mobile-topbar span em{ font-style:normal; color: var(--green); }

  .mobile-bottombar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; bottom:12px; left:12px; right:12px; z-index:1000;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: var(--shadow-card);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    gap:0;
  }
  .mobile-bottombar a{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:8px 2px; font-size:.62rem; font-weight:700; color:#5B6472;
    isolation:isolate;
  }
  .mobile-bottombar a .bubble-icon{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px;
  }
  .mobile-bottombar a .bubble-icon::before{
    content:'';
    position:absolute; inset:0;
    border-radius:50%;
    background: radial-gradient(circle, rgba(21,95,174,.22) 0%, rgba(21,95,174,.1) 70%, transparent 100%);
    transform: scale(0);
    opacity:0;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
    z-index:-1;
  }
  .mobile-bottombar a img{ width:22px; height:22px; border-radius:6px; object-fit:cover; position:relative; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  .mobile-bottombar a svg{ width:22px; height:22px; position:relative; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  .mobile-bottombar a span{ transition: color .25s ease, transform .25s ease; }
  .mobile-bottombar a span:not(.bubble-icon){
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap;
  }

  .mobile-bottombar a:active .bubble-icon::before,
  .mobile-bottombar a.active .bubble-icon::before{
    transform: scale(1);
    opacity:1;
  }
  .mobile-bottombar a:active img, .mobile-bottombar a:active svg,
  .mobile-bottombar a.active img, .mobile-bottombar a.active svg{
    transform: scale(1.12);
  }
  .mobile-bottombar a.active span, .mobile-bottombar a:active span{ color: var(--royal-blue-dark); }

  @media (hover: hover){
    .mobile-topbar:hover{ box-shadow: var(--shadow-card); }
    .mobile-bottombar a:hover .bubble-icon::before{
      transform: scale(1);
      opacity:1;
    }
    .mobile-bottombar a:hover img, .mobile-bottombar a:hover svg{
      transform: scale(1.12) translateY(-1px);
    }
    .mobile-bottombar a:hover span{ color: var(--royal-blue-dark); }
  }

  body{ padding-top:74px; padding-bottom:82px; }

  .hero{ padding:40px 0 60px; text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-trust{ justify-content:center; }
  .site-footer{ padding:36px 0 20px; margin-top:60px; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; margin-bottom:24px; }
  .footer-grid h4{ font-size:.92rem; margin-bottom:10px; }
  .footer-grid p{ font-size:.82rem; }
  .footer-grid ul li{ margin-bottom:7px; }
  .footer-grid ul a{ font-size:.82rem; }
  .footer-social{ margin-top:12px; gap:10px; }
  .footer-social a{ width:32px; height:32px; }
  .footer-social img{ width:17px; height:17px; }
  .footer-bottom{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding-top:16px; font-size:.75rem;
  }
  .values-grid{ grid-template-columns:1fr; }
  .reel-card{ width:120px; }
  .reel-card:nth-child(5n+3){ width:136px; }
  .reel-card.reel-extra{ display:none; }
  .reels-more-btn{
    display:inline-flex !important; margin:18px auto 0; padding:12px 26px;
    border-radius:999px; font-size:.85rem;
  }
  .carousel-card{ width:250px; }
  .carousel-card[data-pos="left1"]{ transform: translateX(-160px) scale(.8); }
  .carousel-card[data-pos="right1"]{ transform: translateX(160px) scale(.8); }
  .carousel-card[data-pos="left2"]{ transform: translateX(-160px) scale(.5); opacity:0; }
  .carousel-card[data-pos="right2"]{ transform: translateX(160px) scale(.5); opacity:0; }
  .order-band{ padding:40px 24px; border-radius:24px; }
}