:root {
  --orange: #D66A12;
  --cream: #E6D1A5;
  --peach-bg: #FFA676;
  --wine: #74252A;
  --chocolate: #4A2C16;
  --near-black: #171512;\n  --button-cream: #F6D2BC;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Adamina", Georgia, serif;
  color: var(--wine);
  background: var(--peach-bg);
}

a { color: inherit; }

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 34px;
}

.brand {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--wine);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 19px;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  color: var(--wine);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .035em;
}

.cart-button,
.shop-button {
  background: var(--orange);
  color: var(--button-cream) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-button {
  padding: 12px 18px;
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background:
    linear-gradient(rgba(255, 166, 118, .50), rgba(255, 166, 118, .50)),
    url("images/hero.jpg") center center / cover no-repeat;
}

/* Extra soft veil so the wine-red copy stays readable while the nails are still visible. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 236, 215, .12);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 48px));
  padding: 90px 0 190px 4vw;
  text-align: left;
}

.hero-content h1 {
  margin: 0 0 26px;
  max-width: 772px;
  color: var(--wine);
  font-size: 28px;
  line-height: .98;
  letter-spacing: -.045em;
}

.shop-button {
  min-width: 200px;
  padding: 16px 28px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.ticker {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  overflow: hidden;
  padding: 21px 0 26px;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: scroll-left 23s linear infinite;
  will-change: transform;
}

.ticker-track span {
  white-space: nowrap;
  color: var(--wine);
  font-size: clamp(1.7rem, 3.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

.social-strip {
  min-height: 43vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--peach-bg);
  border-top: 1px solid rgba(90, 32, 36, .15);
  border-bottom: 1px solid rgba(90, 32, 36, .15);
}

.wave-ticker {
  width: 100%;
  overflow: hidden;
  padding: 65px 0;
}

.wave-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 64px;
  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.wave-phrase {
  white-space: nowrap;
  display: inline-block;
  color: var(--wine);
  font-size: clamp(2.4rem, 5.8vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  animation: wave-up-down 2.5s ease-in-out infinite;
}

.wave-phrase:nth-child(even) { animation-delay: -1.25s; }

.placeholder-section {
  min-height: 60vh;
  padding: 100px 8vw;
  background: var(--peach-bg);
}

.placeholder-section.alt {
  background: var(--orange);
  color: var(--cream);
}

.placeholder-section h2 {
  margin: 0 0 18px;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1;
}

.placeholder-section p {
  max-width: 650px;
  font-size: 1.15rem;
  line-height: 1.6;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 28px)); }
}

@keyframes wave-up-down {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-18px) rotate(-.45deg); }
  50% { transform: translateY(7px); }
  75% { transform: translateY(-9px) rotate(.4deg); }
}

@media (max-width: 700px) {
  .site-header {
    padding: 20px;
  }

  .nav-links a:not(.cart-button) {
    display: none;
  }

  .hero-content {
    padding-left: 24px;
  }
}

@media (max-width: 620px) {
  .brand { font-size: 1.08rem; }

  .cart-button {
    padding: 9px 12px;
    font-size: .78rem !important;
  }

  .hero {
    min-height: 92vh;
    background-position: center center;
  }

  .hero-content {
    width: calc(100% - 28px);
    padding: 110px 0 135px 14px;
  }

  .hero-content h1 {
    font-size: 28px;
  }

  .ticker-track {
    animation-duration: 16s;
    gap: 34px;
  }

  .wave-track {
    animation-duration: 15s;
    gap: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .wave-track, .wave-phrase { animation: none; }
}


.site-footer {
  background: var(--peach-bg);
  color: var(--wine);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 34px;
  padding: 26px 20px 38px;
  border-top: 1px solid rgba(90, 32, 36, .15);
  font-size: .9rem;
  letter-spacing: .04em;
}

/* V4: explicitly force the button label color to a light orange-cream. */
.cart-button,
.shop-button,
.cart-button:visited,
.shop-button:visited,
.cart-button:hover,
.shop-button:hover,
.cart-button:active,
.shop-button:active {
  color: #F6D2BC !important;
}

/* V5: slightly larger navigation and cart. */
.nav-links a {
  font-size: 0.9rem;
}

.cart-button {
  font-size: 0.9rem !important;
  padding: 12px 18px !important;
}

/* V6 refinements */
.nav-links a {
  font-size: 20px;
}
.cart-button {
  font-size: 20px !important;
  padding: 13px 20px !important;
}

/* Position SHOP NOW on the horizontal seam between the upper and lower
   collage photos. The supplied hero collage's seam is around the vertical
   midpoint, so the button is anchored there rather than flowing under the heading. */
.hero-content {
  transform: translateY(-42px);
}
.shop-button {
  position: absolute;
  top: calc(50vh - 90px);
  left: 4vw;
}

/* Keep the requested sizes on smaller screens too. */
@media (max-width: 1050px) {
  .shop-button { left: 24px; }
}
@media (max-width: 620px) {
  .hero-content h1 { font-size: 28px; }
  .cart-button { font-size: 20px !important; padding: 11px 15px !important; }
  .shop-button { left: 14px; top: calc(46vh - 75px); }
}

/* V7: keep hero statement + SHOP NOW together, shifted upward as one unit. */
.hero-content {
  transform: translateY(-78px);
}

.shop-button {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0;
}

/* Navigation + Cart reduced to ~15px. */
.nav-links a {
  font-size: 15px !important;
}

.cart-button {
  font-size: 15px !important;
  padding: 11px 16px !important;
}

@media (max-width: 1050px) {
  .shop-button {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
}

@media (max-width: 620px) {
  .hero-content {
    transform: translateY(-58px);
  }
  .shop-button {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
  .cart-button {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}

/* V8: restore the homepage statement to its exact V6 position,
   while preserving V7's statement-to-SHOP NOW spacing. */
.hero-content {
  transform: translateY(-42px) !important;
}

@media (max-width: 620px) {
  .hero-content {
    transform: translateY(-42px) !important;
  }
}

/* V9: move the hero statement + SHOP NOW slightly downward together. */
.hero-content {
  transform: translateY(-28px) !important;
}

@media (max-width: 620px) {
  .hero-content {
    transform: translateY(-28px) !important;
  }
}

/* V10: move the hero statement + SHOP NOW 28px farther down than V9
   (the previous 14px movement x2). */
.hero-content {
  transform: translateY(0px) !important;
}

@media (max-width: 620px) {
  .hero-content {
    transform: translateY(0px) !important;
  }
}

/* V11: tiny final hero-text adjustment — statement only. */
.hero-content h1 {
  transform: translateY(-2px);
}

/* V12: statement only, another 3px upward from V11 (5px total). */
.hero-content h1 {
  transform: translateY(-5px) !important;
}

/* V14: statement only, another 3px upward. */
.hero-content h1 {
  transform: translateY(-8px) !important;
}

/* V15: statement only, another 7px upward from V14. */
.hero-content h1 {
  transform: translateY(-15px) !important;
}

/* V16: align JosieAndTheClawz with the hero statement + SHOP NOW left margin. */
.site-header {
  padding-left: 4vw !important;
}

.brand {
  margin-left: 0 !important;
}

/* V18: correctly reduce ONLY the "Your vision, your vibe, your clawz." text by 10px. */
.hero-ticker .ticker-track span {
  font-size: clamp(17.2px, calc(3.5vw - 10px), 46px) !important;
}


/* V23: robust SVG wave motion.
   The words visibly move THROUGH the wave while the wave itself changes shape. */
.social-wave-strip {
  background: var(--peach-bg);
  padding: 0;
  overflow: hidden;
}

.social-wave-viewport {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.social-flow-svg {
  width: 100%;
  height: 250px;
  display: block;
  overflow: visible;
}

.social-flow-text {
  fill: var(--wine);
  font-family: "Adamina", Georgia, serif;
  font-size: 62px;
  letter-spacing: -0.5px;
}

@media (max-width: 800px) {
  .social-wave-viewport,
  .social-flow-svg {
    height: 205px;
  }

  .social-flow-text {
    font-size: 48px;
  }
}


/* V25 — steady flowing social wave.
   The wave shape stays fixed; the WORDING travels through it continuously.
   This prevents vertical bobbing and overlapping copies. */
.social-wave-strip {
  background: var(--peach-bg);
  padding: 0;
  overflow: hidden;
}

.social-wave-viewport {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.social-flow-svg {
  width: 100%;
  height: 250px;
  display: block;
  overflow: visible;
}

.social-flow-text {
  fill: var(--wine);
  font-family: "Adamina", Georgia, serif;
  font-size: 62px;
  letter-spacing: -0.5px;
}

@media (max-width: 800px) {
  .social-wave-viewport,
  .social-flow-svg {
    height: 205px;
  }

  .social-flow-text {
    font-size: 48px;
  }
}


/* V26 — preserve V25 motion; flatter wave + larger wording. */
.social-flow-text {
  font-size: 76px !important;
}

@media (max-width: 800px) {
  .social-flow-text {
    font-size: 60px !important;
  }
}


/* V27 — slightly more breathing room in the social-wave wording. */
.social-flow-text {
  letter-spacing: 0.75px !important;
}


/* V29 — visibly heavier + more readable spacing. */
.social-flow-text {
  letter-spacing: 2.25px !important;
  font-weight: 700 !important;
  stroke: var(--wine) !important;
  stroke-width: 1.35px !important;
  paint-order: stroke fill !important;
  stroke-linejoin: round !important;
}


/* V30 — a little more spacing, everything else unchanged. */
.social-flow-text {
  letter-spacing: 3.25px !important;
}


/* V31 — fix the actually "squished" look.
   Keep natural glyph proportions instead of horizontally stretching/compressing the SVG. */
.social-flow-svg {
  preserve-aspect-ratio: xMidYMid meet;
}

.social-flow-text {
  letter-spacing: 4px !important;
}


/* V33 — seamless homepage tagline marquee.
   Two identical copies travel edge-to-edge so there is no visible stop/reset. */
.hero-ticker {
  overflow: hidden;
}

.ticker-track-seamless {
  display: flex !important;
  width: max-content !important;
  animation: tagline-seamless-flow 18s linear infinite !important;
  will-change: transform;
}

.ticker-track-seamless .ticker-copy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.ticker-track-seamless .ticker-copy span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 2.5rem;
}

@keyframes tagline-seamless-flow {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Interior page starter shell */
.inner-page-main {
  min-height: 70vh;
  padding: 150px 6vw 90px;
  background: var(--peach-bg);
  color: var(--wine);
}

.inner-page-main h1 {
  font-family: "Adamina", Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  margin: 0 0 1.25rem;
}

.inner-page-main p {
  font-family: "Adamina", Georgia, serif;
  max-width: 700px;
  line-height: 1.7;
}


/* V35 — genuinely continuous "Your vision..." ticker.
   Disable the older CSS marquee and move one measured phrase-width at a time. */
.ticker-track-continuous {
  display: flex !important;
  width: max-content !important;
  animation: none !important;
  will-change: transform;
}

.ticker-track-continuous .vision-phrase {
  flex: 0 0 auto;
  display: inline-block;
  white-space: nowrap;
  padding-right: 2.5rem;
  font-size: clamp(17.2px, calc(3.5vw - 10px), 46px) !important;
}


/* V38 — Featured Clawz homepage gallery */
.featured-clawz {
  background: var(--peach-bg);
  padding: 74px 4vw 82px;
  color: var(--wine);
}

.featured-clawz-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.featured-clawz-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.featured-clawz h2 {
  margin: 0;
  font-family: "Adamina", Georgia, serif;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wine);
}

.featured-shop-link {
  font-family: "Adamina", Georgia, serif;
  font-size: 15px;
  color: var(--wine);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

.featured-clawz-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.featured-claw-card {
  display: block;
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(230, 209, 165, 0.05), rgba(230, 209, 165, 0.05)),
    url("images/hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 10px 30px rgba(74, 44, 22, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.featured-claw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(74, 44, 22, 0.12);
}

.featured-claw-card-1 {
  background-position: 18% 48%;
}

.featured-claw-card-2 {
  min-height: 430px;
  background-position: 50% 50%;
}

.featured-claw-card-3 {
  background-position: 82% 50%;
}

.featured-clawz-kicker {
  margin: 24px 0 0;
  text-align: center;
  font-family: "Adamina", Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--wine);
}

@media (max-width: 850px) {
  .featured-clawz {
    padding: 56px 4vw 64px;
  }

  .featured-clawz-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .featured-clawz-grid {
    grid-template-columns: 1fr;
  }

  .featured-claw-card,
  .featured-claw-card-2 {
    min-height: 330px;
  }
}


/* V42 — rebuild the "Your vision..." ticker using the same stable
   single-textPath looping method as the social wave. */
.vision-marquee-svg-wrap {
  width: 100%;
  overflow: hidden;
}

/* V35 — two identical copies make the tagline loop continuously with no reset jump. */
.vision-marquee-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 27px, 0);
  animation: vision-marquee-loop 34s linear infinite;
  will-change: transform;
}

.vision-marquee-copy {
  display: block;
  flex: 0 0 auto;
  white-space: pre;
  color: var(--wine);
  font-family: "Adamina", Georgia, serif;
  font-size: 36px;
  line-height: 100px;
}

@keyframes vision-marquee-loop {
  from { transform: translate3d(0, 27px, 0); }
  to { transform: translate3d(-50%, 27px, 0); }
}

@media (max-width: 800px) {
  .vision-marquee-copy {
    font-size: 27px;
    line-height: 76px;
  }
}

.vision-marquee-svg {
  display: block;
  width: 7200px;
  height: 100px;
  overflow: visible;
}

.vision-marquee-text {
  fill: var(--wine);
  font-family: "Adamina", Georgia, serif;
  font-size: 46px;
}

@media (max-width: 800px) {
  .vision-marquee-svg {
    height: 76px;
  }
  .vision-marquee-text {
    font-size: 34px;
  }
}


/* V43 — lower only the "Your vision..." wording placement. */
.vision-marquee-svg {
  transform: translateY(12px);
}


/* V44 — restore the earlier smaller "Your vision..." sizing.
   Continuous V42 motion + V43 vertical placement stay unchanged. */
.vision-marquee-text {
  font-size: 36px !important;
}

@media (max-width: 800px) {
  .vision-marquee-text {
    font-size: 27px !important;
  }
}


/* V45 — lower only the "Your vision..." ticker exactly 5px more. */
.vision-marquee-svg {
  transform: translateY(17px) !important;
}


/* V46 — lower only the "Your vision..." ticker exactly 10px more. */
.vision-marquee-svg {
  transform: translateY(27px) !important;
}


/* V48 — working social/contact footer links */
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-page-main {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card {
  width: min(760px, 100%);
  text-align: center;
}
.contact-kicker {
  margin: 0 0 10px;
  letter-spacing: .18em;
  font-size: 13px;
}
.contact-card h1 {
  margin-bottom: 22px;
}
.contact-intro {
  margin: 0 auto 28px;
  max-width: 620px;
}
.contact-email {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  color: var(--wine);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  overflow-wrap: anywhere;
}
.copy-email-btn {
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #F6D2BC;
  font-family: "Adamina", Georgia, serif;
  padding: 12px 20px;
  cursor: pointer;
}
.copy-status {
  min-height: 24px;
  margin-top: 10px;
}


/* V50 — contact alignment + smaller page titles */

/* Center all contact-page wording/status */
.contact-card,
.contact-kicker,
.copy-status {
  text-align: center !important;
}

.copy-status {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make inner-page titles smaller site-wide */
.inner-page-main h1 {
  font-size: clamp(2rem, 4.2vw, 3.8rem) !important;
}


/* V51 — actually center GET IN TOUCH itself */
.contact-kicker {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}


/* V52 — slightly smaller inner-page titles */
.inner-page-main h1 {
  font-size: clamp(1.8rem, 3.7vw, 3.35rem) !important;
}

/* V54 — slightly wider homepage statement letter spacing */
.hero-content h1 {
  letter-spacing: -0.02em;
}

/* V56 — full About page */
.about-page { background: var(--peach-bg); color: var(--wine); }
.about-hero { min-height: 78vh; padding: 145px 6vw 80px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px,7vw,110px); align-items: center; }
.about-eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: .19em; font-weight: 700; }
.about-hero h1 { margin: 0; font-size: clamp(2.5rem,5.8vw,6rem); line-height: 1.03; letter-spacing: -.035em; }
.about-lead { margin: 28px 0 0; font-size: clamp(1.15rem,2vw,1.55rem); }
.about-photo-placeholder { aspect-ratio: 4/5; width: min(100%,430px); justify-self: center; border: 2px solid var(--wine); border-radius: 48% 48% 22px 22px; display:flex; align-items:center; justify-content:center; text-align:center; letter-spacing:.14em; font-size:12px; background:rgba(230,209,165,.34); }
.about-section { padding: 82px 6vw; }
.about-section.alt { background: var(--cream); }
.about-copy { max-width: 860px; margin: 0 auto; }
.about-copy.wide { max-width: 980px; }
.about-copy h2, .about-facts h2 { margin:0 0 34px; font-size:clamp(1.75rem,3.8vw,3.5rem); line-height:1.1; letter-spacing:-.025em; }
.about-copy p { margin:0 0 20px; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.85; }
.about-pull { margin-top:32px !important; font-size:clamp(1.3rem,2.2vw,1.8rem) !important; line-height:1.5 !important; }
.about-pull-small { font-size:clamp(1.12rem,1.8vw,1.5rem) !important; }
.statement-section { background: var(--wine); color: var(--peach-bg); text-align:center; }
.statement-section .about-copy p { max-width:820px; margin-left:auto; margin-right:auto; }
.outside-section { padding-bottom:100px; }
.about-facts { padding:82px 6vw 110px; background:var(--cream); }
.about-facts > h2 { max-width:1100px; margin-left:auto; margin-right:auto; }
.facts-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fact-card { min-height:180px; border:1.5px solid var(--wine); border-radius:22px; padding:26px; font-size:1.35rem; line-height:1.35; display:flex; flex-direction:column; gap:10px; }
.fact-card strong { font-size:1rem; }
.fact-card span { font-size:.96rem; line-height:1.55; }
@media (max-width:800px){ .about-hero{grid-template-columns:1fr; min-height:auto; padding-top:125px;} .about-photo-placeholder{width:min(82vw,360px);} .about-section,.about-facts{padding:62px 7vw;} .facts-grid{grid-template-columns:1fr;} .fact-card{min-height:0;} }


/* V57 About page refinements */
.about-hero h1 { font-size: clamp(1.9rem, 4vw, 3.65rem) !important; letter-spacing: -.02em !important; }
.launch-line { letter-spacing: .025em; }
.launch-line strong { letter-spacing: .025em; }
.press-on-benefits { margin: 4px 0 24px 1.15em; padding: 0; }
.press-on-benefits li { margin: 0 0 12px; padding-left: .3em; font-size: clamp(1rem,1.4vw,1.15rem); line-height: 1.7; }

/* V58 — About page section headlines match the smaller title scale */
.about-copy h2,
.about-facts h2 {
  font-size: clamp(1.9rem, 4vw, 3.65rem) !important;
}

/* V59 — actually reduce About section headline sizes */
.about-copy h2,
.about-facts h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.35rem) !important;
}

/* V60 — Nail Care content + NAIL TALK navigation label */
.nail-talk-page { background: var(--peach-bg); color: var(--wine); }
.nail-talk-main { padding-top: 0; }
.nail-talk-intro { padding: 150px 6vw 82px; }
.nail-talk-intro > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.nail-talk-eyebrow { margin-bottom: 12px; font-size: 12px; letter-spacing: .19em; font-weight: 700; }
.nail-talk-intro h1 { margin-top: 0; margin-bottom: 30px; font-size: clamp(1.8rem, 3.7vw, 3.35rem); line-height: 1.08; letter-spacing: -.02em; }
.nail-talk-copy { max-width: 900px; margin: 0 auto; }
.nail-talk-copy p { margin: 0 0 20px; font-size: clamp(1rem,1.4vw,1.15rem); line-height: 1.85; }
.nail-talk-lead { font-size: clamp(1.12rem,1.8vw,1.4rem) !important; }
.nail-talk-section { padding: 78px 6vw; }
.nail-talk-section.alt { background: var(--cream); }
.nail-talk-section h2 { margin: 0 0 30px; font-size: clamp(1.45rem,2.6vw,2.35rem); line-height: 1.12; letter-spacing: -.02em; }
.nail-talk-copy ul { margin: 8px 0 0 1.15em; padding: 0; }
.nail-talk-copy li { margin: 0 0 13px; padding-left: .3em; font-size: clamp(1rem,1.4vw,1.15rem); line-height: 1.7; }
.nail-talk-pull { margin-top: 34px !important; font-size: clamp(1.2rem,2vw,1.6rem) !important; line-height: 1.55 !important; }
.pro-tip { background: var(--wine); color: var(--peach-bg); }
.nail-talk-closing { margin-top: 38px !important; font-size: clamp(1.35rem,2.4vw,2rem) !important; line-height: 1.45 !important; }
.reuse-section { padding-bottom: 110px; }
@media (max-width:800px) {
  .nail-talk-intro { padding: 125px 7vw 62px; }
  .nail-talk-section { padding: 62px 7vw; }
}

/* V61 — Nail Talk intro hierarchy */
.nail-talk-eyebrow {
  margin: 0 0 24px !important;
  font-size: clamp(1.9rem, 4vw, 3.65rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.02em !important;
  font-weight: 700 !important;
}
.nail-talk-intro h1 {
  margin: 0 0 30px !important;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}
.nail-talk-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.85 !important;
}

/* V62 — Nail Talk intro title sizing + alignment */
.nail-talk-eyebrow {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 12px !important;
  font-size: 12px !important;
  line-height: normal !important;
  letter-spacing: .19em !important;
  font-weight: 700 !important;
  text-align: left !important;
  box-sizing: border-box;
}
.nail-talk-intro h1 {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 30px !important;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  text-align: left !important;
  box-sizing: border-box;
}

/* V63 — working Shop Now + Cart navigation */
.cart-page-main {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cart-empty-state {
  width: min(680px, 100%);
  margin: 0 auto;
}
.cart-empty-state h1 {
  margin-bottom: 20px;
}
.cart-empty-state p {
  margin: 0 0 30px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}


/* V95 — visibly enlarge ONLY the social-wave wording on mobile. */
@media (max-width: 800px) {
  .social-flow-text {
    font-size: 150px !important;
  }
}


/* V126 — accessibility, legal pages, and safer interactive contrast */
.skip-link{position:fixed;left:12px;top:10px;z-index:99999;transform:translateY(-160%);background:#FFA676;color:#74252A;padding:10px 14px;text-decoration:none;border:2px solid #74252A;font:700 14px/1.2 Arial,sans-serif}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #74252A!important;outline-offset:3px!important}
/* #F6D2BC and #FFA676 do not meet AA contrast on #D66A12. */
:where(.cart-button,.quick-add,.detail-add,.custom-submit){background:#74252A!important;border-color:#74252A!important;color:#FFA676!important}
@media(max-width:700px){.mobile-menu a{color:#74252A!important}.mobile-menu-toggle:focus-visible{outline-color:#74252A!important}}
.legal-footer{background:#FFA676;color:#74252A;padding:34px 5vw;font-family:"Adamina",serif}
.legal-footer-inner{width:min(1120px,100%);margin:0 auto;text-align:center}
.legal-footer p{margin:0 0 14px;line-height:1.6;font-size:.78rem}.legal-footer nav{display:flex;justify-content:center;gap:10px 20px;flex-wrap:wrap}.legal-footer a{color:#74252A;text-underline-offset:3px}.legal-footer-copy{margin-top:14px!important;opacity:.85}
.policy-page{background:#FFA676;color:#74252A;min-height:70vh;padding:150px 5vw 85px;font-family:"Adamina",serif}.policy-wrap{width:min(900px,100%);margin:0 auto}.policy-kicker{font-size:.76rem;font-weight:700;letter-spacing:.14em;margin:0 0 10px}.policy-page h1{font-size:clamp(1.9rem,4vw,3.65rem);letter-spacing:-.02em;margin:0 0 8px}.policy-updated{font-size:.8rem;margin:0 0 42px}.policy-page section{border-top:1.5px solid #74252A;padding:28px 0}.policy-page h2{font-size:clamp(1.15rem,2.3vw,1.65rem);margin:0 0 12px}.policy-page p,.policy-page li{font-size:.96rem;line-height:1.75}.policy-page a{color:#74252A;font-weight:700}.policy-page code{background:#FFE0B8;padding:2px 5px}
.custom-clawz-form .check-row a{color:#74252A;font-weight:800;text-underline-offset:3px}
@media(max-width:700px){.policy-page{padding:110px 5vw 60px}.legal-footer{padding:28px 5vw}.legal-footer nav{flex-direction:column;align-items:center}}


/* V129 — requested brand colors: burnt-orange cart with wine lettering. */
.cart-button,.cart-button:visited,.cart-button:hover,.cart-button:active{background:#D66A12!important;border-color:#D66A12!important;color:#74252A!important}

/* V130 — universal accessible action color pairing */
:root{--action-wine:#3E1417;}
.cart-button,.cart-button:visited,.cart-button:hover,.cart-button:active,
.shop-button,.shop-button:visited,.shop-button:hover,.shop-button:active,
.quick-add,.quick-add.is-added,
.detail-add,.detail-add.is-added,
.custom-submit,
.copy-email-btn,
.remove-file{
  background:#D66A12!important;
  border-color:#D66A12!important;
  color:#3E1417!important;
}
/* Burnt-orange content sections use the accessible dark wine for readable copy. */
.about-burnt,.about-burnt :is(h1,h2,h3,p,strong,em,a),
.nail-talk-page .about-burnt,.nail-talk-page .about-burnt :is(h1,h2,h3,p,strong,em,a){color:#3E1417!important;}

/* V132 — final brand action system + burnt-orange page titles */
:root{--action-wine:#74252A;--action-orange:#FFA676;}
.cart-button,.cart-button:visited,.cart-button:hover,.cart-button:active,
.shop-button,.shop-button:visited,.shop-button:hover,.shop-button:active,
.quick-add,.quick-add.is-added,
.detail-add,.detail-add.is-added,
.custom-submit,
.copy-email-btn,
.remove-file,
.checkout-button,
.shop-size-button,
.filter-chip.is-active,
.filter-chip:hover{
  background:#74252A!important;
  border-color:#74252A!important;
  color:#FFA676!important;
}
/* Main page/title wording keeps burnt orange present throughout the site. */
.hero-content h1,
.featured-clawz-heading-row h2,
.shop-hero h1,
.custom-request-hero h1,
.sizing-page h1,
.nail-talk-page h1,
.faq-page h1,
.about-hero h1,
.contact-page h1,
.cart-page>h1,
.product-page .detail-info h1,
.policy-page h1{
  color:#D66A12!important;
}
/* Retire V130's almost-black readable-text override. */
.about-burnt,.about-burnt :is(h1,h2,h3,p,strong,em,a),
.nail-talk-page .about-burnt,.nail-talk-page .about-burnt :is(h1,h2,h3,p,strong,em,a){color:#74252A!important;}


/* V133 — restore wine page-title wording; burnt-orange legal footer on every page except Home. */
.hero-content h1,
.featured-clawz-heading-row h2,
.shop-hero h1,
.custom-request-hero h1,
.sizing-page h1,
.nail-talk-page h1,
.faq-page h1,
.about-hero h1,
.contact-page h1,
.cart-page>h1,
.product-page .detail-info h1,
.policy-page h1{
  color:#74252A!important;
}
.legal-footer{background:#D66A12!important;color:#74252A!important;}
.legal-footer a{color:#74252A!important;}
.home-page .legal-footer{background:#FFA676!important;}

/* V134 — consistent wine + bright-orange actions; wine copy on burnt-orange About/Nail Talk sections. */
.cart-button,.cart-button:visited,.cart-button:hover,.cart-button:active,
.shop-button,.shop-button:visited,.shop-button:hover,.shop-button:active,
.quick-add,.quick-add.is-added,
.detail-add,.detail-add.is-added,
.custom-submit,
.copy-email-btn,
.remove-file,
.checkout-button,
.shop-size-button,
.filter-chip.is-active,
.filter-chip:hover,
.gallery-arrow,
.shop-gallery-arrow,
.product-arrow,
.newest-tag,
.product-tag-newest {
  background:#74252A!important;
  border-color:#74252A!important;
  color:#FFA676!important;
}
.about-page .about-burnt,
.about-page .about-burnt :is(h1,h2,h3,h4,p,li,strong,em,a,span),
.nail-talk-page .about-burnt,
.nail-talk-page .about-burnt :is(h1,h2,h3,h4,p,li,strong,em,a,span){color:#74252A!important;}

/* V135 — authoritative action-color cleanup.
   All action controls use the exact same palette: wine background + bright-orange label/icon. */
:root{--action-bg:#74252A;--action-fg:#FFA676;}
.cart-button,
.cart-button:visited,
.cart-button:hover,
.cart-button:active,
.shop-button,
.shop-button:visited,
.shop-button:hover,
.shop-button:active,
.quick-add,
.quick-add:hover,
.quick-add:focus,
.quick-add.is-added,
.detail-add,
.detail-add:hover,
.detail-add:focus,
.detail-add.is-added,
.custom-submit,
.custom-submit:hover,
.custom-submit:focus,
.copy-email-btn,
.copy-email-btn:hover,
.copy-email-btn:focus,
.remove-file,
.remove-file:hover,
.remove-file:focus,
.checkout-button,
.checkout-button:hover,
.checkout-button:focus,
.shop-size-button,
.shop-size-button:hover,
.shop-size-button:focus,
.sizing-button,
.sizing-button:hover,
.sizing-button:focus,
.filter-chip,
.filter-chip:hover,
.filter-chip:focus,
.filter-chip.is-active,
.filter-clear,
.filter-clear:hover,
.filter-clear:focus,
.gallery-arrow,
.gallery-arrow:hover,
.gallery-arrow:focus,
.shop-gallery-arrow,
.product-arrow {
  background:#74252A!important;
  border-color:#74252A!important;
  color:#FFA676!important;
  -webkit-text-fill-color:#FFA676!important;
}
/* NEWEST is generated with a pseudo-element on the first Shop card. */
.shop-all-grid .product-card:first-child:before,
.shop-shape-section:first-of-type .product-card:first-child:before,
.newest-tag,
.product-tag-newest {
  background:#74252A!important;
  border-color:#74252A!important;
  color:#FFA676!important;
  -webkit-text-fill-color:#FFA676!important;
}
/* Burnt-orange editorial sections: regular brand wine copy. */
.about-page .about-burnt,
.about-page .about-burnt *,
.nail-talk-page .about-burnt,
.nail-talk-page .about-burnt * {
  color:#74252A!important;
  -webkit-text-fill-color:#74252A!important;
}

/* V136 — Shop filter chips stay unfilled until selected. */
.shop-page .filter-chip,
.shop-page .filter-chip:hover,
.shop-page .filter-chip:focus {
  background:transparent!important;
  border-color:#74252A!important;
  color:#74252A!important;
  -webkit-text-fill-color:#74252A!important;
}
.shop-page .filter-chip.is-active,
.shop-page .filter-chip.is-active:hover,
.shop-page .filter-chip.is-active:focus {
  background:#74252A!important;
  border-color:#74252A!important;
  color:#FFA676!important;
  -webkit-text-fill-color:#FFA676!important;
}


/* V137: burnt-orange header on every inner page; homepage keeps hero-overlay header. */
body:not(.home-page) .site-header {
  background: #D66A12 !important;
}
body.home-page .site-header {
  background: transparent !important;
}

/* V144 — make IN CART visually distinct: outlined/unfilled instead of solid. */
body.shop-page .quick-add.is-added,
body .detail-add.is-added {
  background: transparent !important;
  border: 2px solid #74252A !important;
  color: #74252A !important;
  -webkit-text-fill-color: #74252A !important;
}


/* V145 — authoritative IN CART state. Must remain after all prior action rules. */
.quick-add.is-added,
.quick-add.is-added:hover,
.quick-add.is-added:focus,
.detail-add.is-added,
.detail-add.is-added:hover,
.detail-add.is-added:focus {
  background: transparent !important;
  border: 2px solid #74252A !important;
  color: #74252A !important;
  -webkit-text-fill-color: #74252A !important;
}

/* V151 — mobile homepage refinements */
@media (max-width: 700px) {
  .hero {
    min-height: 78vh;
    background-color: #FFA676;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .social-flow-text { font-size: 180px !important; }
}

/* V156: keep product listing detail pages fully inside mobile viewport */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .product-page { width: 100%; max-width: 100%; overflow-x: hidden; padding-left: 18px !important; padding-right: 18px !important; }
  .product-detail-wrap,
  .detail-gallery,
  .detail-info { width: 100%; max-width: 100%; min-width: 0; }
  .detail-info p,
  .detail-info h1,
  .detail-info h2,
  .product-credit,
  .fit-note,
  .measure-link { max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
  .detail-info p { white-space: normal; }
  .thumb-strip { max-width: 100%; }
}

/* V35 — keep the hamburger icon wine red on every mobile page. */
@media (max-width: 700px) {
  .mobile-menu-toggle {
    color: #74252A !important;
    -webkit-text-fill-color: #74252A !important;
  }
  .mobile-menu-toggle span {
    background: #74252A !important;
    background-color: #74252A !important;
  }
}