/* ============================================================
   Daily Nail Picks — self-hosted fonts
   Downloaded from Google Fonts (both families are OFL licensed).
   Latin + Latin-Ext subsets only; unicode-range means the browser
   fetches the -ext file only if the page actually needs it.

   The "Fallback" faces below re-shape a locally installed font so
   it occupies exactly the same space as the web font. That is what
   keeps the layout from jumping when the real font swaps in.
   Metrics were computed from these exact font files.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks — these prevent layout shift on font swap */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 88.53%;
  descent-override: 22.04%;
  line-gap-override: 0.00%;
  size-adjust: 109.43%;
}

@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Times New Roman');
  ascent-override: 94.89%;
  descent-override: 22.01%;
  line-gap-override: 0.00%;
  size-adjust: 114.03%;
}

/* ============================================================
   Daily Nail Picks — stylesheet
   Plain CSS, no build step. Edit colors in :root below.
   ============================================================ */

:root {
  /* Brand palette — change these and the whole site follows */
  --cream:      #FFFAF8;
  --cream-2:    #FDF2F0;
  --blush:      #FBE3E7;
  --blush-deep: #F5C7D0;
  --rose:       #D9798F;
  --rose-dark:  #B95570;
  --plum:       #3A2029;
  --plum-soft:  #6B4C57;
  --gold:       #C2953F;
  --line:       #EFDDE1;
  --white:      #FFFFFF;

  --shadow-sm: 0 1px 3px rgba(58, 32, 41, .07);
  --shadow-md: 0 6px 22px rgba(58, 32, 41, .10);
  --shadow-lg: 0 16px 44px rgba(58, 32, 41, .16);

  --radius:    18px;
  --radius-sm: 10px;
  --maxw:      1240px;

  --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--rose-dark); text-decoration: none; }
a:hover { color: var(--plum); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.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;
}

/* ---------- Header ---------- */

.site-header {
  /* JS header ko bharta hai — height pehle se rakhi hai taake page na hile */
  min-height: 70px;
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 250, 248, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; gap: 18px;
  height: 70px;
}

.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700;
  color: var(--plum); letter-spacing: -.01em;
  white-space: nowrap;
}
.logo:hover { color: var(--rose-dark); }
.logo-mark {
  width: 32px; height: 32px; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(150deg, var(--blush-deep), var(--rose));
  box-shadow: inset 0 -4px 8px rgba(255, 255, 255, .55);
  flex: none;
}

.main-nav { display: flex; gap: 22px; margin-left: 12px; }
.main-nav a {
  color: var(--plum-soft); font-size: .93rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--plum); border-bottom-color: var(--rose);
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pin-follow {
  display: inline-flex; align-items: center; gap: 7px;
  background: #E60023; color: #fff;
  padding: 9px 15px; border-radius: 999px;
  font-size: .86rem; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pin-follow:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(230, 0, 35, .3); }
.pin-follow svg { width: 15px; height: 15px; fill: currentColor; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px; cursor: pointer;
  font-size: 1.1rem; color: var(--plum); line-height: 1;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 40px;
  background:
    radial-gradient(1000px 380px at 12% -10%, var(--blush) 0%, transparent 62%),
    radial-gradient(760px 320px at 92% 0%, #F4E7F5 0%, transparent 58%);
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.13; margin: 0 0 16px;
  letter-spacing: -.02em; font-weight: 700;
}
.hero h1 em { font-style: italic; color: var(--rose-dark); }

.hero p {
  max-width: 620px; margin: 0 auto 28px;
  font-size: 1.06rem; color: var(--plum-soft);
}

/* ---------- Search + filters ---------- */

.toolbar { padding: 8px 0 4px; }

.search-box { position: relative; max-width: 480px; margin: 0 auto 26px; }
.search-box input {
  width: 100%; padding: 14px 46px 14px 20px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--plum);
  font-family: inherit; font-size: .98rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box input:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(217, 121, 143, .14);
}
.search-box input::placeholder { color: #B79BA3; }
.search-icon {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--rose); pointer-events: none; font-size: 1rem;
}

.filters {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  margin-bottom: 34px;
  min-height: 40px; /* chips JS se aate hain — jagah pehle se */
}
.chip {
  border: 1px solid var(--line); background: var(--white);
  color: var(--plum-soft); padding: 9px 17px; border-radius: 999px;
  font-family: inherit; font-size: .88rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--blush-deep); color: var(--plum); transform: translateY(-1px); }
.chip.active {
  background: var(--plum); border-color: var(--plum); color: var(--white);
}

/* ---------- Masonry grid (Pinterest style) ---------- */

.masonry {
  column-count: 4;
  column-gap: 20px;
  padding-bottom: 50px;
}
@media (max-width: 1100px) { .masonry { column-count: 3; } }
@media (max-width: 760px)  { .masonry { column-count: 2; column-gap: 14px; } }
@media (max-width: 420px)  { .masonry { column-count: 1; } }

.card {
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  display: block;
  color: inherit;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }

.card-media { position: relative; background: var(--cream-2); overflow: hidden; }
.card-media img {
  /* width/height attributes HTML mein hain; ye unka ratio barqarar rakhta hai */
  width: 100%; height: auto; display: block;
  transition: transform .5s ease;
}
.card:hover .card-media img { transform: scale(1.045); }

.card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255, 255, 255, .94);
  color: var(--rose-dark);
  padding: 5px 11px; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* Pin-it button — appears on hover, always visible on touch */
.pin-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: #E60023; color: #fff;
  border: none; border-radius: 999px;
  padding: 8px 13px;
  font-family: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover .pin-btn, .pin-btn:focus-visible { opacity: 1; transform: translateY(0); }
.pin-btn:hover { box-shadow: 0 5px 16px rgba(230, 0, 35, .4); color: #fff; }
.pin-btn svg { width: 13px; height: 13px; fill: currentColor; }

@media (hover: none) {
  .pin-btn { opacity: 1; transform: none; }
}

.card-body { padding: 15px 16px 17px; }
.card-title {
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 600; line-height: 1.32;
  margin: 0 0 7px; color: var(--plum);
}
.card-desc {
  font-size: .855rem; color: var(--plum-soft);
  margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-band {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rose-dark);
  background: var(--blush); padding: 4px 10px; border-radius: 999px;
}
.card-cta {
  font-size: .82rem; font-weight: 600; color: var(--rose-dark);
  display: inline-flex; align-items: center; gap: 4px;
}
.card:hover .card-cta { color: var(--plum); }

.empty-state {
  text-align: center; padding: 70px 20px; color: var(--plum-soft);
}
.empty-state strong { display: block; font-size: 1.15rem; color: var(--plum); margin-bottom: 6px; }

/* ---------- Section heads ---------- */

.section { padding: 52px 0; }
.section-alt { background: var(--cream-2); }

.section-head { text-align: center; margin-bottom: 34px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin: 0 0 9px; font-weight: 700; letter-spacing: -.015em;
}
.section-head p { margin: 0; color: var(--plum-soft); }

/* ---------- Product detail page ---------- */

.breadcrumb { font-size: .84rem; color: var(--plum-soft); padding: 22px 0 0; }
.breadcrumb a { color: var(--plum-soft); }
.breadcrumb a:hover { color: var(--rose-dark); }
.breadcrumb span { margin: 0 7px; opacity: .5; }

.product-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; padding: 30px 0 60px; align-items: start;
}
@media (max-width: 880px) {
  .product-layout { grid-template-columns: 1fr; gap: 30px; }
}

.product-image-wrap {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--cream-2); box-shadow: var(--shadow-md);
}
.product-image-wrap img { width: 100%; height: auto; }

.product-cat {
  display: inline-block; background: var(--blush); color: var(--rose-dark);
  padding: 5px 13px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 14px;
}
.product-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.18; margin: 0 0 14px; font-weight: 700; letter-spacing: -.02em;
}
.product-band {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 20px;
}
.band-pill {
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rose-dark);
  background: var(--blush); padding: 6px 13px; border-radius: 999px;
}
.band-note { font-size: .85rem; color: var(--plum-soft); }
.product-desc { font-size: 1.03rem; color: var(--plum-soft); margin: 0 0 22px; }

.product-bullets { list-style: none; padding: 0; margin: 0 0 28px; }
.product-bullets li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  color: var(--plum-soft); font-size: .95rem;
}
.product-bullets li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--rose); font-weight: 700;
}

.buy-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px;
  font-family: inherit; font-size: .97rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--plum); color: var(--white); }
.btn-primary:hover { background: var(--rose-dark); color: var(--white); box-shadow: var(--shadow-md); }

.btn-pin { background: #E60023; color: #fff; }
.btn-pin:hover { color: #fff; box-shadow: 0 8px 22px rgba(230, 0, 35, .34); }
.btn-pin svg { width: 16px; height: 16px; fill: currentColor; }

.btn-ghost { background: var(--white); border-color: var(--line); color: var(--plum); }
.btn-ghost:hover { border-color: var(--rose); color: var(--rose-dark); }

.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.tag {
  background: var(--cream-2); border: 1px solid var(--line);
  color: var(--plum-soft); font-size: .78rem;
  padding: 5px 11px; border-radius: 999px;
}

.disclosure {
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: .82rem; color: var(--plum-soft);
}

/* ---------- Pinterest embed ---------- */

.pin-embed-box {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm); text-align: center;
  max-width: 780px; margin: 0 auto;
}
.pin-embed-box .pin-fallback { color: var(--plum-soft); font-size: .92rem; }

/* ---------- Static content pages ---------- */

.prose { max-width: 740px; margin: 0 auto; padding: 34px 0 60px; }
.prose h1 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin: 0 0 18px; font-weight: 700; letter-spacing: -.02em;
}
.prose h2 {
  font-family: var(--font-display); font-size: 1.4rem;
  margin: 34px 0 12px; font-weight: 600;
}
.prose p, .prose li { color: var(--plum-soft); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--plum); color: #E9D8DD;
  padding: 46px 0 26px; margin-top: 20px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 34px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

.site-footer h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: #fff; margin: 0 0 13px; font-weight: 700;
}
.site-footer p { font-size: .88rem; margin: 0 0 12px; color: #D6BFC6; }
.site-footer a { color: #E9D8DD; font-size: .89rem; display: block; margin-bottom: 9px; }
.site-footer a:hover { color: #fff; }
.footer-logo {
  font-family: var(--font-display); font-size: 1.25rem;
  color: #fff; font-weight: 700; margin-bottom: 10px;
}
.footer-bottom {
  padding-top: 20px; font-size: .8rem; color: #BFA3AC;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* ---------- Mobile nav ---------- */

@media (max-width: 820px) {
  .nav-toggle { display: block; order: 3; }
  .header-actions { margin-left: auto; }
  .main-nav {
    position: absolute; top: 70px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0; margin: 0;
    padding: 8px 20px 16px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: none; }
  .pin-follow span { display: none; }
  .pin-follow { padding: 9px 11px; }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  background: var(--plum); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 999;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Admin page ---------- */

.admin-grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px;
  padding: 28px 0 60px; align-items: start;
}
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.panel h3 {
  font-family: var(--font-display); margin: 0 0 16px; font-size: 1.2rem;
}

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--plum); margin-bottom: 5px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .9rem; color: var(--plum);
  background: var(--cream);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(217, 121, 143, .13);
}
.field textarea { resize: vertical; min-height: 76px; }
.field .hint { font-size: .74rem; color: var(--plum-soft); margin-top: 4px; }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 13px;
}
.admin-row img {
  width: 46px; height: 46px; object-fit: cover;
  border-radius: 8px; flex: none; background: var(--cream-2);
}
.admin-row .meta { flex: 1; min-width: 0; }
.admin-row .meta strong { display: block; font-size: .9rem; }
.admin-row .meta span { font-size: .76rem; color: var(--plum-soft); }
.admin-row button {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; font-family: inherit; font-size: .78rem;
  color: var(--plum-soft); cursor: pointer;
}
.admin-row button:hover { border-color: var(--rose); color: var(--rose-dark); }

.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.admin-note {
  background: #FFF8E6; border: 1px solid #EBD9A8; color: #7A5C15;
  border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: .84rem; margin-bottom: 18px;
}