/* ==========================================================================
   LOJINHA DA JULLY RUBY — Design tokens & base
   ========================================================================== */

:root{
  /* Palette — "joalheria" premium: preto profundo, dourado envelhecido, rubi escuro, champagne */
  --bg:        #0a0908;
  --bg-elev:   #131110;
  --card:      #181513;
  --card-2:    #211c19;
  --border:    rgba(201,162,82,.14);
  --border-strong: rgba(201,162,82,.34);

  --gold:      #c9a252;
  --gold-soft: #f0dcae;
  --gold-bright:#ffe9b8;
  --gold-dim:  #8a7240;
  --champagne: #e8d9c2;

  --ruby:      #6e0f24;
  --ruby-deep: #410913;
  --ruby-light:#c2304a;
  --ruby-glow: rgba(110,15,36,.45);

  --cream:     #f3ecdf;
  --muted:     #a89a87;
  --muted-2:   #6a5f51;

  /* Type */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", sans-serif;

  /* Gradients — metálico, dourado envelhecido a rubi escuro */
  --grad-goldruby: linear-gradient(120deg, var(--gold-bright) 0%, var(--gold) 28%, var(--gold-dim) 45%, var(--ruby-light) 72%, var(--ruby-deep) 100%);
  --grad-card: linear-gradient(165deg, var(--card-2) 0%, var(--card) 60%);
  --grad-line: linear-gradient(90deg, transparent, var(--gold) 35%, var(--ruby-light) 65%, transparent);

  --radius: 14px;
  --container: 1180px;
}

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

html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(110,15,36,.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(201,162,82,.09), transparent 60%),
    var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration:none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cream);
}

.eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}

.eyebrow .gem{
  width:7px; height:7px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
  flex-shrink:0;
}

.section-title{
  font-size: clamp(28px, 4vw, 44px);
  text-align:center;
  background: var(--grad-goldruby);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom: 8px;
}

.section-sub{
  text-align:center;
  color: var(--muted);
  font-size:15px;
  max-width: 560px;
  margin: 0 auto 48px;
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 13px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing:.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{
  background: var(--grad-goldruby);
  color: #1a0a0a;
  box-shadow: 0 8px 24px -8px var(--ruby-glow);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -8px var(--ruby-glow); }

.btn-outline{
  background: transparent;
  color: var(--gold-soft);
  border-color: var(--border-strong);
}
.btn-outline:hover{ background: rgba(201,162,82,.08); border-color: var(--gold); }

.btn-ghost{
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.btn-ghost:hover{ color: var(--cream); border-color: var(--border-strong); }

.btn-sm{ padding: 9px 20px; font-size:12px; }
.btn-danger{ color: var(--ruby-light); border-color: rgba(194,48,74,.35); background: transparent; }
.btn-danger:hover{ background: rgba(194,48,74,.1); }
.btn-block{ width:100%; }

/* ===================== Header ===================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(12,10,9,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.brand img{ height:50px; width:50px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text .small{
  font-size:10px; letter-spacing:.3em; color:var(--gold-soft); text-transform:uppercase;
}
.brand-text .big{
  font-family: var(--font-display); font-size:22px; font-weight:700;
  background: var(--grad-goldruby); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:6px 0; transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--gold-soft); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background: var(--grad-goldruby);
}
.nav-toggle{ display:none; background:none; border:none; color:var(--cream); font-size:24px; cursor:pointer; }

@media (max-width: 860px){
  .main-nav{
    position:absolute; top:84px; left:0; right:0;
    background: var(--bg-elev); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .main-nav.open{ max-height:320px; }
  .main-nav a{ padding:16px 24px; width:100%; border-bottom:1px solid var(--border); }
  .nav-toggle{ display:block; }
}

/* ===================== Hero ===================== */
.hero{
  position:relative;
  padding: 90px 0 70px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(201,162,82,.14), transparent 45%),
    radial-gradient(circle at 50% 30%, rgba(110,15,36,.28), transparent 55%);
  pointer-events:none;
}
.hero-gem{
  width: 120px; height:120px; margin: 0 auto 28px;
  position:relative; z-index:1;
  filter: drop-shadow(0 0 40px rgba(201,162,82,.35));
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.hero h1{
  position:relative; z-index:1;
  font-size: clamp(40px, 7vw, 78px);
  line-height:1.05;
  background: var(--grad-goldruby);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.tagline{
  position:relative; z-index:1;
  margin: 18px auto 36px;
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing:.04em;
}
.hero .cta-row{
  position:relative; z-index:1;
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}

/* ===================== Gem divider ===================== */
.gem-divider{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin: 64px 0;
}
.gem-divider .line{ height:1px; flex:1; max-width:160px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
.gem-divider .line.right{ background: linear-gradient(90deg, var(--border-strong), transparent); }
.gem-divider .gem{
  width:14px; height:14px;
  background: var(--grad-goldruby);
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
}

/* ===================== Carousel (featured) ===================== */
.carousel{
  display:flex; gap:24px; overflow-x:auto; padding: 6px 4px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.carousel::-webkit-scrollbar{ height:6px; }
.carousel::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius:3px; }
.carousel .product-card{ min-width: 280px; scroll-snap-align:start; }

/* ===================== Product grid & cards ===================== */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.product-card{
  background: var(--grad-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 1px var(--border-strong);
}
.product-card .badge{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background: rgba(12,10,9,.7); backdrop-filter: blur(4px);
  border:1px solid var(--border-strong);
  color: var(--gold-soft);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding: 6px 12px; border-radius:999px;
}
.product-card .badge .gem{
  width:7px; height:7px; background: var(--grad-goldruby);
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
}
.product-card .thumb{
  aspect-ratio: 1/1;
  background: #0f0c0b;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-card:hover .thumb img{ transform: scale(1.06); }
.product-card .body{ padding: 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-card .category{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-dim);
}
.product-card h3{
  font-size:17px; line-height:1.35; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 46px;
}
.product-card .price{
  font-family: var(--font-display); font-size:22px; font-weight:700; color: var(--gold-soft);
  margin-top:auto;
}
.product-card .actions{ padding: 0 20px 20px; }

/* ===================== Category pills ===================== */
.pill-row{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:40px;
}
.pill{
  padding: 9px 22px; border-radius:999px; border:1px solid var(--border);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted);
  transition: all .2s ease; cursor:pointer; background:transparent;
}
.pill:hover, .pill.active{ border-color: var(--gold); color: var(--gold-soft); background: rgba(201,162,82,.08); }

/* ===================== Sections ===================== */
.section{ padding: 90px 0; }
.section.alt{ background: var(--bg-elev); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ===================== Footer ===================== */
.site-footer{
  border-top:1px solid var(--border);
  padding: 56px 0 28px;
  background: var(--bg-elev);
}
.footer-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;
}
.footer-grid .brand-text .big{ font-size:24px; }
.footer-grid p{ color: var(--muted); font-size:14px; margin-top:14px; max-width:280px; }
.footer-grid h4{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:16px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color: var(--muted); font-size:14px; transition: color .2s ease; }
.footer-grid a:hover{ color: var(--gold-soft); }
.footer-bottom{
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color: var(--muted-2); font-size:12px; letter-spacing:.05em;
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child{ grid-column: 1/-1; }
}

/* ===================== Breadcrumb ===================== */
.breadcrumb{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; color: var(--muted-2);
  margin-bottom:28px;
}
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--gold-soft); }
.breadcrumb span{ margin: 0 8px; color: var(--border-strong); }

/* ===================== Product detail ===================== */
.pd-layout{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start;
}
.pd-gallery{
  border:1px solid var(--border); border-radius: var(--radius); overflow:hidden;
  aspect-ratio:1/1; background:#0f0c0b;
}
.pd-gallery img{ width:100%; height:100%; object-fit:cover; }
.pd-info .category{ font-size:12px; letter-spacing:.25em; text-transform:uppercase; color: var(--gold-dim); margin-bottom:12px; }
.pd-info h1{ font-size: clamp(28px,4vw,40px); margin-bottom: 18px; line-height:1.2; }
.pd-info .price{ font-family: var(--font-display); font-size:34px; color: var(--gold-soft); margin-bottom:24px; }
.pd-info .desc{ color: var(--muted); font-size:15px; line-height:1.8; white-space:pre-line; margin-bottom:32px; }
.pd-info .desc strong{ color: var(--cream); }
@media (max-width: 860px){ .pd-layout{ grid-template-columns:1fr; gap:36px; } }

/* ===================== Forms (generic) ===================== */
.form-field{ margin-bottom:20px; }
.form-field label{
  display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold-soft); margin-bottom:10px;
}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: var(--card); border:1px solid var(--border);
  border-radius:8px; padding: 13px 16px; color: var(--cream);
  font-family: var(--font-body); font-size:14px;
  transition: border-color .2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color: var(--gold);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-card{
  background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 32px;
}
.form-card + .form-card{ margin-top:24px; }
.form-card h3{ font-size:16px; margin-bottom:20px; display:flex; align-items:center; gap:10px; }

/* checkbox */
.check-row{ display:flex; align-items:center; gap:10px; font-size:14px; color: var(--muted); }
.check-row input{ width:auto; accent-color: var(--gold); }

/* ===================== Empty state ===================== */
.empty-state{
  text-align:center; padding: 80px 24px; color: var(--muted);
  border:1px dashed var(--border); border-radius: var(--radius);
}
.empty-state .gem{
  width:40px; height:40px; margin: 0 auto 18px;
  background: var(--grad-goldruby);
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
  opacity:.5;
}
.empty-state h3{ color: var(--cream); margin-bottom:8px; font-size:18px; }

/* ===================== Reveal on scroll ===================== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   ADMIN PANEL
   ========================================================================== */
body.admin{
  background: var(--bg);
}
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
.admin-sidebar{
  background: var(--bg-elev);
  border-right:1px solid var(--border);
  padding: 28px 20px;
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.admin-sidebar .brand{ padding: 0 8px 28px; }
.admin-sidebar .brand img{ height:42px; width:42px; }
.admin-sidebar .brand-text .big{ font-size:18px; }
.admin-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.admin-nav a{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-radius:10px;
  font-size:14px; color: var(--muted);
  transition: all .2s ease;
}
.admin-nav a .ic{ width:18px; text-align:center; }
.admin-nav a:hover{ color: var(--cream); background: rgba(201,162,82,.06); }
.admin-nav a.active{
  color: var(--gold-soft);
  background: rgba(201,162,82,.1);
  border:1px solid var(--border);
}
.admin-sidebar .divider{ height:1px; background: var(--border); margin: 16px 8px; }
.admin-sidebar .bottom-links a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; font-size:14px; color:var(--muted);
}
.admin-sidebar .bottom-links a:hover{ color: var(--cream); background: rgba(201,162,82,.06); }
.admin-sidebar .bottom-links a.danger{ color: var(--ruby-light); }
.admin-sidebar .bottom-links a.danger:hover{ background: rgba(194,48,74,.08); }

.admin-main{ padding: 40px 44px; }
.admin-header{ margin-bottom: 32px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.admin-header h1{ font-size: 30px; margin-bottom:6px; }
.admin-header p{ color: var(--muted); font-size:14px; }

.admin-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
}
@media (max-width: 980px){ .admin-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .admin-grid{ grid-template-columns: 1fr; } }

.admin-card{
  background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; transition: border-color .2s ease, transform .2s ease;
}
.admin-card:hover{ border-color: var(--border-strong); }
.admin-card .icon{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: rgba(201,162,82,.1); border:1px solid var(--border); margin-bottom:18px; font-size:18px;
}
.admin-card .label{ color: var(--muted); font-size:13px; letter-spacing:.08em; margin-bottom:6px; }
.admin-card .value{ font-family: var(--font-display); font-size:32px; font-weight:700; color:var(--cream); }
.admin-card .link{ color: var(--gold-soft); font-size:13px; margin-top:10px; display:inline-block; }
.admin-card.clickable{ cursor:pointer; }
.admin-card.clickable:hover{ transform: translateY(-3px); }

/* List rows (products/pages admin) */
.admin-list{ display:flex; flex-direction:column; gap:14px; }
.admin-row{
  display:flex; align-items:center; gap:18px;
  background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px;
}
.admin-row .thumb{
  width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:#0f0c0b;
  border:1px solid var(--border);
}
.admin-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-row .info{ flex:1; min-width:0; }
.admin-row .info h3{ font-size:15px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }
.admin-row .info .meta{ font-size:13px; color: var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.admin-row .info .meta .price{ color: var(--gold-soft); font-weight:600; }
.admin-row .info .meta .tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-dim);
  border:1px solid var(--border); padding:2px 10px; border-radius:999px;
}
.admin-row .row-actions{ display:flex; gap:8px; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:transparent; color: var(--muted); cursor:pointer;
  transition: all .2s ease; font-size:15px;
}
.icon-btn:hover{ border-color: var(--border-strong); color: var(--cream); }
.icon-btn.star.active{ color: var(--gold); border-color: var(--border-strong); background: rgba(201,162,82,.1); }
.icon-btn.danger:hover{ color: var(--ruby-light); border-color: rgba(194,48,74,.35); background: rgba(194,48,74,.08); }

/* Login */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(110,15,36,.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(201,162,82,.12), transparent 60%),
    var(--bg);
}
.login-card{
  width:100%; max-width:420px;
  background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 44px 36px; text-align:center;
}
.login-card img{ height:64px; width:64px; margin: 0 auto 18px; }
.login-card h1{ font-size:24px; margin-bottom:6px; }
.login-card p{ color: var(--muted); font-size:14px; margin-bottom:28px; }
.login-card .form-field label{ text-align:left; }
.login-error{
  display:none; background: rgba(194,48,74,.1); border:1px solid rgba(194,48,74,.35);
  color: var(--ruby-light); font-size:13px; border-radius:8px; padding:10px 14px; margin-bottom:18px;
}

/* Stats */
.stat-bar-wrap{ height:90px; display:flex; align-items:flex-end; gap:3px; margin: 24px 0 8px; }
.stat-bar{ flex:1; background: var(--grad-goldruby); border-radius:3px 3px 0 0; opacity:.85; min-height:3px; }
.stat-list{ display:flex; flex-direction:column; gap:14px; }
.stat-list-row{ display:flex; align-items:center; gap:14px; }
.stat-list-row .rank{
  width:24px; height:24px; border-radius:6px; background: rgba(201,162,82,.1); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; color: var(--gold-soft); flex-shrink:0;
}
.stat-list-row .name{ flex:1; font-size:14px; }
.stat-list-row .bar-bg{ height:5px; background: var(--border); border-radius:3px; margin-top:6px; overflow:hidden; }
.stat-list-row .bar-fill{ height:100%; background: var(--grad-goldruby); }
.stat-list-row .val{ font-size:13px; color: var(--muted); white-space:nowrap; }

@media (max-width: 900px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{ position:relative; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:16px; }
  .admin-sidebar .brand{ padding:0 12px; flex-shrink:0; }
  .admin-nav{ flex-direction:row; flex:none; }
  .admin-sidebar .divider, .admin-sidebar .bottom-links{ display:none; }
  .admin-main{ padding: 28px 20px; }
}

/* Social icons */
.social-links{ display:flex; gap:12px; align-items:center; }
.social-link{
  width:38px; height:38px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color: var(--gold-soft);
  transition: all .25s ease;
}
.social-link:hover{ border-color: var(--border-strong); background: rgba(201,162,82,.08); transform: translateY(-2px); }
.social-link svg{ width:18px; height:18px; }

/* ===================== Search & filters (produtos) ===================== */
.search-filter-bar{
  display:flex; gap:14px; align-items:center; margin-bottom:20px; flex-wrap:wrap;
}
.search-box{
  flex:1; min-width:220px; position:relative; display:flex; align-items:center;
}
.search-box .search-ic{
  position:absolute; left:18px; color: var(--muted); font-size:16px; pointer-events:none;
}
.search-box input{
  width:100%; background: var(--card); border:1px solid var(--border);
  border-radius: 999px; padding: 13px 20px 13px 44px; color: var(--cream);
  font-family: var(--font-body); font-size:14px; transition: border-color .2s ease;
}
.search-box input:focus{ outline:none; border-color: var(--gold); }

.filters-panel{
  background: var(--grad-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 28px;
  display:none;
}
.filters-panel.open{ display:block; }
.filters-panel .form-field{ margin-bottom:0; }
.filters-panel select{
  width:100%; background: var(--card); border:1px solid var(--border);
  border-radius:8px; padding: 13px 16px; color: var(--cream);
  font-family: var(--font-body); font-size:14px;
}
.filters-panel select:focus{ outline:none; border-color: var(--gold); }

/* ===================== Top announcement bar ===================== */
.announce-bar{
  background: var(--grad-line), var(--ruby-deep);
  background: linear-gradient(120deg, var(--ruby-deep), var(--ruby), var(--ruby-deep));
  color: var(--gold-soft);
  text-align:center;
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding: 10px 16px;
  border-bottom:1px solid var(--border-strong);
}
.announce-bar .gem{
  width:7px; height:7px; display:inline-block;
  background: var(--grad-goldruby);
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
  margin: 0 10px; vertical-align:middle;
}

/* ===================== Featured carousel — mobile optimization ===================== */
@media (max-width: 640px){
  .carousel{ gap:14px; padding: 6px 2px 20px; }
  .carousel .product-card{ min-width: 78vw; }
  .carousel .product-card .thumb{ aspect-ratio: 4/3; }
}

/* ===================== Featured slideshow ===================== */
.slideshow{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
}
.slideshow-track{
  display:flex;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
}
.slideshow-track .slide{
  min-width:100%;
  display:flex;
  justify-content:center;
  padding: 4px;
}
.slideshow-track .slide .product-card{
  width: 100%;
  max-width: 340px;
  display:grid;
}
@media (min-width: 760px){
  .slideshow-track .slide{ gap:24px; }
  .slideshow-track .slide .product-card{ max-width: 280px; }
}
.slide-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  background: rgba(10,9,8,.6); backdrop-filter: blur(6px);
  border:1px solid var(--border-strong); color: var(--gold-soft);
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s ease; z-index:2;
}
.slide-arrow:hover{ background: rgba(201,162,82,.15); }
.slide-arrow.prev{ left:10px; }
.slide-arrow.next{ right:10px; }

.slide-dots{
  display:flex; justify-content:center; gap:8px; margin-top:22px;
}
.slide-dots .dot{
  width:9px; height:9px; border-radius:999px; border:1px solid var(--border-strong);
  background: transparent; cursor:pointer; transition: all .25s ease; padding:0;
}
.slide-dots .dot.active{ background: var(--grad-goldruby); border-color: transparent; width:24px; border-radius:5px; }