:root{
  --bg:#FBFAFE;
  --card:#FFFFFF;
  --ink:#3B2E52;
  --ink-soft:#71638C;
  --purple:#6753A2;
  --purple-deep:#4E3D82;
  --lav-mid:#C8C1EA;
  --lav-pale:#F1EDFB;
  --petal:#CBB6D4;
  --sage:#7C8F61;
  --sage-deep:#63744B;
  --line:#DED4F2;
  --shadow:0 10px 26px -14px rgba(78,61,130,0.35);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  isolation:isolate;
}

a{
  color:inherit;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 22px;
  position:relative;
  z-index:1;
}

/* =========================================================
   FLORAL BANDS
   ========================================================= */

.flor-band{
  width:100%;
  display:block;
  line-height:0;
  background:var(--bg);
}

.flor-band img{
  width:100%;
  height:clamp(70px,14vw,150px);
  object-fit:cover;
  object-position:center top;
  display:block;
}

.flor-band.bottom img{
  object-position:center bottom;
}

/* =========================================================
   HEADER
   ========================================================= */

header.hero{
  position:relative;
  z-index:3;
  padding:18px 0 44px;
  text-align:center;
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
}

.brand-logo{
  width:118px;
  height:118px;
  border-radius:50%;
  object-fit:contain;
  margin-bottom:2px;
}

.hero-eyebrow{
  font-family:'Work Sans',sans-serif;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--purple);
  font-weight:600;
}

h1.store-name{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(2.2rem,5.5vw,3.2rem);
  margin:0;
  line-height:1.08;
  color:var(--purple-deep);
}

.hero-tagline{
  max-width:520px;
  font-size:1.02rem;
  color:var(--ink-soft);
  margin:0;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:8px;
}

#tabsWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--sage);
  color:#fff;
  padding:13px 22px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  font-size:.98rem;
  box-shadow:var(--shadow);
  transition:transform .15s ease,background .15s ease;
}

.hero-cta:hover{
  background:var(--sage-deep);
  transform:translateY(-2px);
}

.hero-cta svg{
  width:20px;
  height:20px;
  flex:none;
}

.hero-insta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:var(--purple);
  border:1.5px solid var(--lav-mid);
  padding:11px 20px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  transition:all .15s ease;
}

.hero-insta:hover{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
  transform:translateY(-2px);
}

.hero-insta svg{
  width:19px;
  height:19px;
  flex:none;
}

/* =========================================================
   SEARCH MINI (lupa que expande)
   ========================================================= */

.search-mini{
  position:relative;
  display:flex;
  align-items:center;
  flex:none;
}

.search-toggle{
  width:40px;
  height:40px;
  border-radius:50%;
  flex:none;
  border:1px solid rgba(255,255,255,.72);
  cursor:pointer;
  background:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  box-shadow:
    0 4px 14px rgba(78,61,130,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, color .18s ease, transform .15s ease;
}

.search-toggle svg{
  width:17px;
  height:17px;
}

.search-toggle:hover{
  background:rgba(255,255,255,.48);
  color:var(--ink);
  transform:translateY(-1px);
}

.search-mini.has-value .search-toggle{
  background:rgba(103,83,162,.70);
  border-color:rgba(255,255,255,.62);
  color:#fff;
}

.search-expand{
  display:flex;
  align-items:center;
  max-width:0;
  overflow:hidden;
  opacity:0;
  margin-left:0;
  transition:max-width .28s ease, opacity .2s ease, margin-left .28s ease;
}

.search-mini:hover .search-expand,
.search-mini:focus-within .search-expand,
.search-mini.has-value .search-expand{
  max-width:230px;
  opacity:1;
  margin-left:8px;
}

.search-input{
  width:190px;
  font-family:'Work Sans',sans-serif;
  font-size:.92rem;
  color:var(--ink);
  padding:9px 14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.search-input::placeholder{
  color:var(--ink-soft);
}

.search-input:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(103,83,162,.16);
}

.search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}

.search-clear{
  flex:none;
  width:26px;
  height:26px;
  margin-left:4px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.search-clear svg{
  width:15px;
  height:15px;
}

.search-clear:hover{
  background:var(--lav-pale);
  color:var(--ink);
}

.search-mini.has-value .search-clear{
  display:flex;
}

.search-no-results{
  text-align:center;
  color:var(--ink-soft);
  padding:60px 20px;
  font-size:1rem;
}

/* =========================================================
   CATEGORY TABS
   ========================================================= */

nav.tabs{
  position:sticky;
  top:0;
  z-index:20;
  padding:16px 0;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.65);
  border-bottom:1px solid rgba(255,255,255,.45);
  box-shadow:
    0 10px 30px rgba(78,61,130,.10),
    inset 0 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(2px) saturate(165%);
  backdrop-filter:blur(2px) saturate(165%);
}

.tabs-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

.tabs-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
}

.tabs-scroll::-webkit-scrollbar{
  display:none;
}

.tab-btn{
  flex:none;
  font-family:'Work Sans',sans-serif;
  font-weight:600;
  font-size:.92rem;
  padding:10px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.72);
  cursor:pointer;
  background:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  box-shadow:
    0 4px 14px rgba(78,61,130,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--ink-soft);
  position:relative;
  transition:
    background .18s ease,
    transform .15s ease,
    box-shadow .18s ease;
  letter-spacing:.01em;
}

.tab-btn:hover{
  background:rgba(255,255,255,.48);
  transform:translateY(-1px);
  box-shadow:
    0 7px 18px rgba(78,61,130,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.tab-btn.active{
  background:rgba(103,83,162,.70);
  border-color:rgba(255,255,255,.62);
  color:#fff;
  box-shadow:
    0 7px 18px rgba(78,61,130,.18),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* =========================================================
   MAIN
   ========================================================= */

main{
  padding:36px 0 80px;
  position:relative;
  z-index:3;
}

.section-title{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.5rem;
  margin:38px 0 20px;
  color:var(--purple-deep);
}

.section-title:first-of-type{
  margin-top:0;
}

/* =========================================================
   GRID
   ========================================================= */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:28px 22px;
}

/* =========================================================
   CARD
   ========================================================= */

.card{
  background:rgba(255,255,255,.97);
  border-radius:16px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 32px -16px rgba(78,61,130,.45);
}

.card-photo-wrap{
  position:relative;
  padding:10px 10px 0;
  overflow:visible;
  z-index:5;
}

.card-photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center;
  border-radius:11px;
  display:block;
  background:var(--lav-pale);
  cursor:zoom-in;
}

.card-body{
  padding:18px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.card-name{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.08rem;
  margin:0;
  color:var(--ink);
}

.card-desc{
  font-size:.86rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.4;
  flex:1;
}

.card-note{
  font-size:.74rem;
  color:var(--purple-deep);
  background:var(--lav-pale);
  border-left:3px solid var(--lav-mid);
  padding:6px 8px;
  border-radius:4px;
  line-height:1.35;
}

/* =========================================================
   STICKER
   ========================================================= */

.sticker{
  position:absolute;
  top:-14px;
  right:2px;
  width:84px;
  height:84px;
  background:var(--lav-mid);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(8deg);
  clip-path:polygon(
    104.20% 50.00%,
    101.95% 53.89%,
    97.36% 57.14%,
    94.65% 60.19%,
    95.77% 64.12%,
    98.50% 69.03%,
    98.83% 73.52%,
    95.12% 76.05%,
    89.58% 76.98%,
    85.81% 78.56%,
    85.11% 82.58%,
    85.44% 88.19%,
    83.79% 92.38%,
    79.35% 93.05%,
    73.95% 91.48%,
    69.87% 91.26%,
    67.50% 94.59%,
    65.36% 99.79%,
    62.06% 102.84%,
    57.77% 101.52%,
    53.58% 97.77%,
    50.00% 95.80%,
    46.42% 97.77%,
    42.23% 101.52%,
    37.94% 102.84%,
    34.64% 99.79%,
    32.50% 94.59%,
    30.13% 91.26%,
    26.05% 91.48%,
    20.65% 93.05%,
    16.21% 92.38%,
    14.56% 88.19%,
    14.89% 82.58%,
    14.19% 78.56%,
    10.42% 76.98%,
    4.88% 76.05%,
    1.17% 73.52%,
    1.50% 69.03%,
    4.23% 64.12%,
    5.35% 60.19%,
    2.64% 57.14%,
    -1.95% 53.89%,
    -4.20% 50.00%,
    -1.95% 46.11%,
    2.64% 42.86%,
    5.35% 39.81%,
    4.23% 35.88%,
    1.50% 30.97%,
    1.17% 26.48%,
    4.88% 23.95%,
    10.42% 23.02%,
    14.19% 21.44%,
    14.89% 17.42%,
    14.56% 11.81%,
    16.21% 7.62%,
    20.65% 6.95%,
    26.05% 8.52%,
    30.13% 8.74%,
    32.50% 5.41%,
    34.64% .21%,
    37.94% -2.84%,
    42.23% -1.52%,
    46.42% 2.23%,
    50.00% 4.20%,
    53.58% 2.23%,
    57.77% -1.52%,
    62.06% -2.84%,
    65.36% .21%,
    67.50% 5.41%,
    69.87% 8.74%,
    73.95% 8.52%,
    79.35% 6.95%,
    83.79% 7.62%,
    85.44% 11.81%,
    85.11% 17.42%,
    85.81% 21.44%,
    89.58% 23.02%,
    95.12% 23.95%,
    98.83% 26.48%,
    98.50% 30.97%,
    95.77% 35.88%,
    94.65% 39.81%,
    97.36% 42.86%,
    101.95% 46.11%
  );
  box-shadow:0 6px 12px -4px rgba(78,61,130,.4);
}

.sticker.alt{
  background:var(--petal);
}

.sticker .sticker-cur{
  font-size:.6rem;
  font-weight:700;
  color:var(--purple-deep);
  line-height:1;
}

.sticker .sticker-price{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--purple-deep);
  line-height:1.05;
}

.sticker .sticker-unit{
  font-size:.55rem;
  color:var(--purple-deep);
  font-weight:600;
  opacity:.8;
}

/* =========================================================
   QUANTITY TIERS
   ========================================================= */

.tiers{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.tier-btn{
  font-family:'Work Sans',sans-serif;
  font-size:.76rem;
  font-weight:600;
  padding:6px 10px;
  border-radius:20px;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .12s ease;
}

.tier-btn.selected{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}

/* =========================================================
   ORDER BUTTON
   ========================================================= */

.order-btn{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--sage);
  color:#fff;
  border:none;
  padding:11px 16px;
  border-radius:9px;
  font-weight:600;
  font-size:.92rem;
  cursor:pointer;
  text-decoration:none;
  transition:
    background .15s ease,
    transform .12s ease;
  font-family:'Work Sans',sans-serif;
}

.order-btn:hover{
  background:var(--sage-deep);
  transform:translateY(-1px);
}

.order-btn svg{
  width:17px;
  height:17px;
  flex:none;
}

/* =========================================================
   ZOOM HINT
   ========================================================= */

.zoom-hint{
  position:absolute;
  right:6px;
  bottom:6px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(59,46,82,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}

.card-photo-wrap:hover .zoom-hint{
  opacity:1;
}

.zoom-hint svg{
  width:16px;
  height:16px;
  stroke:#fff;
  fill:none;
  stroke-width:2;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(30,22,48,.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:min(48px,6vw);
  animation:fadeIn .18s ease;
}

.lightbox.open{
  display:flex;
}

@keyframes fadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

.lightbox-inner{
  position:relative;
  max-width:min(900px,92vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lightbox-img{
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:14px;
  background:var(--lav-pale);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  animation:zoomIn .42s cubic-bezier(.22,.68,.35,1);
}

@keyframes zoomIn{
  from{
    transform:scale(.8);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }
}

.lightbox-caption{
  margin-top:16px;
  text-align:center;
  color:#fff;
}

.lightbox-caption .lb-name{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.2rem;
  margin:0 0 4px;
}

.lightbox-caption .lb-price{
  font-size:.92rem;
  color:var(--lav-mid);
  margin:0;
}

/* =========================================================
   FECHAR LIGHTBOX
   ========================================================= */

.lightbox-close{
  position:absolute;
  top:-46px;
  right:-6px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
  z-index:30;
}

.lightbox-close:hover{
  background:rgba(255,255,255,.25);
}

.lightbox-close svg{
  width:20px;
  height:20px;
}

/* ---------- SETAS DA GALERIA ---------- */

.gallery-prev,
.gallery-next{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.18);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:300;
  transition:all .15s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.gallery-prev:hover,
.gallery-next:hover{
  background:rgba(255,255,255,0.32);
  transform:translateY(-50%) scale(1.08);
}

.gallery-prev svg,
.gallery-next svg{
  width:24px;
  height:24px;
}

/* 30px de distância da imagem */
.gallery-prev{
  left:calc(50% - min(450px, 46vw) - 76px);
}

.gallery-next{
  right:calc(50% - min(450px, 46vw) - 76px);
}

/* ---------- CONTADOR ---------- */

.gallery-counter{
  position:fixed;
  left:50%;
  bottom:35px;
  transform:translateX(-50%);
  color:#fff;
  background:rgba(30,22,48,0.65);
  padding:6px 12px;
  border-radius:20px;
  font-size:.82rem;
  font-weight:600;
  z-index:300;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ---------- CELULAR ---------- */

@media (max-width:640px){

  .gallery-prev,
  .gallery-next{
    width:40px;
    height:40px;
  }

  .gallery-prev{
    left:20px;
  }

  .gallery-next{
    right:20px;
  }

  .gallery-prev svg,
  .gallery-next svg{
    width:21px;
    height:21px;
  }

}
/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

.float-wpp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--sage);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  z-index:50;
  text-decoration:none;
  transition:transform .15s ease;
}

.float-wpp:hover{
  transform:scale(1.07);
}

.float-wpp svg{
  width:28px;
  height:28px;
  fill:#fff;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  position:relative;
  z-index:3;
  background:var(--bg);
  text-align:center;
  padding:8px 22px 46px;
  color:var(--ink-soft);
  font-size:.8rem;
}

footer p{
  margin:4px 0;
}

#footerInsta{
  color:var(--purple);
  font-weight:600;
  text-decoration:none;
}

/* =========================================================
   DRAG ROW
   ========================================================= */

.drag-row{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:4px 4px 14px;
  margin:0 -4px;
  cursor:grab;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  user-select:none;
}

.drag-row::-webkit-scrollbar{
  display:none;
}

.drag-row.dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

.drag-row .card{
  flex:0 0 240px;
  max-width:240px;
}

.drag-row img,
.drag-row a,
.drag-row button{
  -webkit-user-drag:none;
  user-drag:none;
}

.row-footer{
  display:flex;
  justify-content:flex-end;
  margin:6px 0 8px;
}

.ver-mais-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  color:var(--purple);
  border:1.5px solid var(--lav-mid);
  padding:9px 18px;
  border-radius:30px;
  font-weight:600;
  font-size:.86rem;
  cursor:pointer;
  font-family:'Work Sans',sans-serif;
  transition:all .15s ease;
}

.ver-mais-btn:hover{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
  transform:translateX(2px);
}

.ver-mais-btn svg{
  width:16px;
  height:16px;
  flex:none;
}

/* =========================================================
   CARROSSEL
   ========================================================= */

.carousel-wrap{
  overflow:hidden;
  position:relative;
}

.carousel-track{
  display:flex;
  transition:transform .45s cubic-bezier(.22,.68,.35,1);
}

.carousel-page{
  flex:0 0 100%;
  min-width:100%;
}

.carousel-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:28px 0 12px;
  flex-wrap:wrap;
}

.dot-btn{
  min-width:36px;
  height:36px;
  padding:0 4px;
  border-radius:50%;
  border:1.5px solid var(--lav-mid);
  background:rgba(255,255,255,.55);
  color:var(--ink-soft);
  font-weight:700;
  font-size:.85rem;
  font-family:'Work Sans',sans-serif;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:0 4px 10px -6px rgba(78,61,130,.3);
}

.dot-btn:hover{
  background:rgba(255,255,255,.9);
  transform:translateY(-1px);
}

.dot-btn.active{
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(78,61,130,.5);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:640px){

  /*
    No celular as setas ficam mais próximas,
    para não saírem da tela.
  */

  .gallery-prev{
    left:10px;
  }

  .gallery-next{
    right:10px;
  }

  .lightbox{
    padding:20px;
  }

  .lightbox-inner{
    width:100%;
    max-width:100%;
  }

  .lightbox-img{
    max-width:100%;
    max-height:72vh;
  }

  .lightbox-close{
    top:-42px;
    right:0;
  }
}

@media (max-width:560px){

  .brand-logo{
    width:96px;
    height:96px;
  }

  .grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:20px 14px;
  }

  .sticker{
    width:70px;
    height:70px;
  }

  .sticker .sticker-price{
    font-size:.88rem;
  }

  .drag-row{
    gap:14px;
  }

  .drag-row .card{
    flex:0 0 190px;
    max-width:190px;
  }
}
/* ---------- CORREÇÃO MOBILE ---------- */

@media (max-width: 640px){

  .wrap{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
    margin-left:0;
    margin-right:0;
  }

  /* Abas não podem ultrapassar a tela */
  nav.tabs{
    width:100%;
    overflow:hidden;
  }

  nav.tabs .wrap{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }

  .tabs-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
  }

  /* Evita cortar o primeiro botão */
  .tab-btn:first-child{
    margin-left:0;
  }

  /* Evita cortar o último botão */
  .tab-btn:last-child{
    margin-right:4px;
  }

  /* Conteúdo principal */
  main.wrap{
    padding-left:16px;
    padding-right:16px;
  }

  /* Títulos nunca devem sair da tela */
  .section-title{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }

  /* Carrossel */
  .carousel-wrap{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .carousel-page{
    width:100%;
    max-width:100%;
  }

  /* Grid mobile */
  .grid{
    width:100%;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 12px;
  }

  /* Cards não podem forçar largura */
  .card{
    min-width:0;
    width:100%;
  }

  .card-body{
    min-width:0;
    padding:14px 12px 15px;
  }

  .card-name,
  .card-desc{
    overflow-wrap:anywhere;
  }

  /* Linha "Todos" */
  .drag-row{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }

}
@media (max-width:640px){

  nav.tabs{
    left:0;
    right:0;
  }

  #tabsWrap{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    padding-left:2px;
  }

  #tabsWrap .tab-btn{
    flex-shrink:0;
    white-space:nowrap;
  }

}
.card-photo-wrap{
  overflow:visible !important;
}

.card{
  overflow:visible !important;
}

.sticker{
  top:-4px;
  right:2px;
  z-index:10;
}