/* Taurava — editorial-retail home sections */

/* ===== 1) Circular lookbook trio ===== */
.lookbook{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.lookbook-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,48px);max-width:920px;margin:0 auto}
.lookbook-item{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0}
.lookbook-circle{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.lookbook-circle::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--border);
  box-shadow:inset 0 0 0 6px var(--background)}
.lookbook-circle img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
@media(hover:hover){
  .lookbook-circle{transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .lookbook-circle img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
  .lookbook-item:hover .lookbook-circle{transform:translateY(-4px)}
  .lookbook-item:hover .lookbook-circle img{transform:scale(1.07)}
}
.lookbook-cap{font-size:clamp(17px,2vw,23px);font-weight:500}
.lookbook-sub{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep);transition:gap .2s}
.lookbook-item:hover .lookbook-sub{gap:10px}
@media(max-width:899px){.lookbook-row{grid-template-columns:1fr;gap:32px;max-width:280px}.lookbook-circle{max-width:200px}.lookbook-cap{max-width:220px}}
@media(max-width:899px){
  .lookbook-item:hover .lookbook-circle{transform:none}
  .lookbook-item:hover .lookbook-circle img{transform:none}
  .lookbook-item:hover .lookbook-sub{gap:6px}
}
@media(min-width:521px) and (max-width:899px){
  .lookbook-row{max-width:500px;gap:52px}
  .lookbook-circle{max-width:400px}
  .lookbook-cap{max-width:420px}
}
@media(max-width:520px){.lookbook{padding-left:8px;padding-right:8px}.lookbook-sub-text{display:none}.lookbook-sub svg{transform:rotate(-45deg)}}

/* ===== 2) What's Hot band ===== */
.whatshot{background:var(--primary);color:#fff;padding:clamp(56px,8vw,104px) 0}
.whatshot-eyebrow{justify-content:center;color:#fff}
.whatshot-eyebrow .rule-gold{background:oklch(1 0 0 / .5)}
.whatshot-title{color:#fff}
.whatshot-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.5vw,28px)}
@media(min-width:820px){.whatshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.whatshot-card{position:relative;overflow:hidden;border-radius:var(--radius-2xl);aspect-ratio:16/12;text-align:left;background:oklch(0.3 0.01 56);box-shadow:0 12px 48px oklch(0 0 0/.7)}
.whatshot-card.big{aspect-ratio:16/12}
.whatshot-card img,.whatshot-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media(hover:hover){
  .whatshot-card img,.whatshot-video{transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .whatshot-card:hover img{transform:scale(1.05)}
}
.whatshot-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,oklch(0.16 0.02 50 / .72) 100%)}
.whatshot-cap{position:absolute;left:0;bottom:0;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:8px}
.whatshot-cap-label{color:#fff;font-size:clamp(22px,3vw,34px);font-weight:500;line-height:1.05}
.whatshot-cap-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:gap .2s}
.whatshot-card:hover .whatshot-cap-link{gap:12px}

/* ===== 3) Most Loved Looks — full-bleed row ===== */
.loved-row{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:8px}
@media(min-width:760px){.loved-row{grid-template-columns:repeat(4,1fr)}}
.loved-tile{position:relative;overflow:hidden;aspect-ratio:3/4;text-align:left;background:var(--surface)}
.loved-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(hover:hover){
  .loved-tile img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .loved-tile:hover img{transform:scale(1.06)}
}
.loved-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,oklch(0.16 0.02 50 / .6) 100%);
  opacity:.9;transition:opacity .3s}
.loved-cap{position:absolute;left:0;bottom:0;padding:18px 20px;color:#fff;font-family:var(--font-display);
  font-size:clamp(16px,1.8vw,21px);font-weight:500;transform:translateY(4px);opacity:0;transition:.3s}
.loved-tile:hover .loved-cap{transform:none;opacity:1}
@media(hover:none){.loved-cap{transform:none;opacity:1}}

/* ===== 4) Stay Tuned — editorial newsletter panel ===== */
.staytuned-wrap{padding-block:clamp(40px,6vw,72px)}
.staytuned{position:relative;display:grid;grid-template-columns:1fr;overflow:hidden;
  border-radius:var(--radius-3xl);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md)}
@media(min-width:860px){.staytuned{grid-template-columns:0.82fr 1.18fr}}

.staytuned-media{position:relative;min-height:240px;background:var(--accent)}
.staytuned-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;position:absolute;inset:0}
.staytuned-media-veil{position:absolute;inset:0;background:linear-gradient(120deg,oklch(0 0 0 / .42),oklch(0 0 0 / .12))}
.staytuned-seal{position:absolute;left:24px;bottom:22px;color:#fff;font-size:clamp(28px,4vw,44px);font-weight:500;
  line-height:.95;text-shadow:0 2px 20px oklch(0 0 0 / .35)}
@media(min-width:860px){.staytuned-media{min-height:100%}}

.staytuned-body{padding:clamp(30px,4vw,56px)}
.staytuned-title{font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.05;margin-top:14px;text-wrap:balance}
.staytuned-sub{color:var(--muted-foreground);font-size:15.5px;line-height:1.65;margin-top:14px;max-width:46ch}

.staytuned-form{margin-top:26px}
.staytuned-field{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--input);
  border-radius:9999px;padding:6px 6px 6px 22px;transition:border-color .15s,box-shadow .15s;max-width:520px}
.staytuned-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--ring-50)}
.staytuned-field-ico{color:var(--muted-foreground);flex-shrink:0}
.staytuned-input{flex:1;min-width:0;height:42px;border:0;background:transparent;font-size:15px;color:var(--foreground);outline:none;padding-left:8px}
.staytuned-input::placeholder{color:var(--muted-foreground)}
.staytuned-submit{flex-shrink:0;height:42px}
@media(max-width:440px){
  .staytuned-field{flex-wrap:wrap;border-radius:var(--radius-xl);padding:12px}
  .staytuned-input{width:100%;flex-basis:100%;height:38px}
  .staytuned-submit{width:100%;border-radius:9999px}
}

.staytuned-benefits{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}
.staytuned-benefits li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-foreground)}
.staytuned-benefits .lc{color:var(--gold-deep)}

.staytuned-done{display:flex;align-items:center;gap:14px;margin-top:26px;padding:18px 22px;background:var(--gold-soft);
  border-radius:var(--radius-xl);max-width:520px}
.staytuned-done-ico{width:42px;height:42px;border-radius:9999px;background:var(--card);color:var(--gold-deep);
  display:grid;place-items:center;flex-shrink:0}
.staytuned-done strong{display:block;font-size:15px;font-weight:600}
.staytuned-done span{font-size:13.5px;color:var(--muted-foreground)}

/* ── Tabby installment badge ─────────────────── */
.tabby-badge{display:flex;align-items:center;flex-wrap:nowrap;gap:5px 8px;
  margin-top:10px;padding:9px 14px;border-radius:9px;
  background:linear-gradient(135deg,rgba(59,255,157,.08) 0%,rgba(59,255,200,.12) 100%);
  border:1px solid rgba(59,255,157,.25)}
.tabby-label{font-size:12.5px;color:var(--muted-foreground)}
.tabby-amount{font-size:13.5px;font-weight:700;color:var(--foreground)}
.tabby-with{font-size:12.5px;color:var(--muted-foreground)}
.tabby-brand-group{display:inline-flex;align-items:center;gap:4px;margin-left:auto;white-space:nowrap;flex-shrink:0}
.tabby-logo{height:18px;width:auto;vertical-align:middle}
.tabby-compact{margin-top:6px;padding:5px 10px;gap:6px;justify-content:space-between}
.tabby-split{font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.tabby-logo-sm{height:14px;width:auto;vertical-align:middle;margin-left:auto}