/* ==========================================================================
   SanoKala - component styles.
   Tokens live in style.css :root. Only token references below; raw hex only
   where a colour needs an alpha channel or belongs to a third party (WhatsApp).
   Design: SanoKala Bright Retail. Rose is the only button fill. Border at
   rest, shadow on hover only. Pastel tints are backgrounds, never text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */

.sk-announce{
  background: var(--sk-ink);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.sk-announce__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 44px;
  text-align: center;
}
.sk-announce__close{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--sk-r-input);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: color var(--sk-ease), background-color var(--sk-ease);
}
.sk-announce__close:hover{ color:#FFFFFF; background: rgba(255,255,255,.12); }
.sk-announce__close:focus-visible{ outline: 3px solid #FFFFFF; outline-offset: -2px; }
.sk-announce[hidden]{ display: none; }

/* --------------------------------------------------------------------------
   2. WORDMARK - the one place the rainbow is allowed
   -------------------------------------------------------------------------- */

.sk-wordmark{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}
.sk-wordmark__text{
  font-family: var(--sk-font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.sk-wordmark__text i{ font-style: normal; }
.sk-wordmark__text .c1{ color: var(--sk-rose); }
.sk-wordmark__text .c2{ color: var(--sk-blue); }
.sk-wordmark__text .c3{ color: var(--sk-green); }
.sk-wordmark__tag{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sk-muted);
  white-space: nowrap;
}

@media (max-width: 899.98px){
  .sk-wordmark__tag{ display: none; }
  .sk-wordmark__text{ font-size: 22px; }
}

/* On the dark bar the gold and green need lifting to clear 4.5:1 on ink. */
.sk-announce .sk-wordmark__text .c1,
.sk-drawer__brand .sk-wordmark__text .c1{ color: var(--sk-rose-bright); }

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

.sk-header{
  background: var(--sk-white);
  border-bottom: 1px solid var(--sk-line);
}
.sk-header__main{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}

/* Search */
.sk-search{ position: relative; display: flex; max-width: 520px; width: 100%; }
.sk-search__field{
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 118px 10px 16px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-pill);
  background: var(--sk-white);
  font-size: 14px;
}
.sk-search__submit{
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding-inline: 20px;
  border-radius: var(--sk-r-pill);
}

/* Account + cart */
.sk-headtools{ display: flex; align-items: center; gap: 8px; }
.sk-headtool{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--sk-r-input);
  color: var(--sk-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--sk-ease), color var(--sk-ease);
}
.sk-headtool:hover{ background: var(--sk-line); color: var(--sk-ink); }
.sk-headtool__label{ white-space: nowrap; }
.sk-headtool__icon{ position: relative; display: inline-flex; }
.sk-headtool__count{
  position: absolute;
  top: -7px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-rose);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Nav row */
.sk-navrow{ border-top: 1px solid var(--sk-line); }
.sk-nav{ display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sk-nav a{
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  color: var(--sk-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sk-ease), border-color var(--sk-ease);
}
.sk-nav a:hover{ color: var(--sk-rose); }
.sk-nav .current-menu-item > a,
.sk-nav .current_page_item > a,
.sk-nav a[aria-current="page"]{
  color: var(--sk-rose);
  border-bottom-color: var(--sk-rose);
}

/* Mobile header */
.sk-header__burger,
.sk-header__searchtoggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--sk-r-input);
  color: var(--sk-ink);
  cursor: pointer;
}
.sk-header__burger:hover,
.sk-header__searchtoggle:hover{ background: var(--sk-line); }

@media (max-width: 899.98px){
  .sk-header__main{
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding-block: 10px;
  }
  .sk-header__burger{ display: inline-flex; }
  .sk-header__searchtoggle{ display: inline-flex; }
  .sk-header__brand{ justify-self: center; }
  .sk-search{
    display: none;
    grid-column: 1 / -1;
    max-width: none;
    margin-top: 10px;
  }
  .sk-search.is-open{ display: flex; }
  .sk-headtool__label{ display: none; }
  .sk-navrow{ display: none; }
}

/* Drawer */
.sk-drawer{
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
}
.sk-drawer.is-open{ visibility: visible; }
.sk-drawer__scrim{
  position: absolute;
  inset: 0;
  background: rgba(15,17,23,.44);
  opacity: 0;
  transition: opacity var(--sk-ease);
}
.sk-drawer.is-open .sk-drawer__scrim{ opacity: 1; }
.sk-drawer__panel{
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(88vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--sk-white);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--sk-ease);
}
.sk-drawer.is-open .sk-drawer__panel{ transform: none; }
.sk-drawer__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-drawer__close{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--sk-r-input);
  color: var(--sk-ink); cursor: pointer;
}
.sk-drawer__close:hover{ background: var(--sk-line); }
.sk-drawer__nav{ list-style: none; margin: 8px 0 0; padding: 0; }
.sk-drawer__nav a{
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: 8px;
  border-bottom: 1px solid var(--sk-line);
  color: var(--sk-ink);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.sk-drawer__nav a:hover{ color: var(--sk-rose); }
.sk-drawer__wa{
  margin-top: auto;
  padding: 16px;
  border-radius: var(--sk-r-card);
  background: var(--sk-mint);
}
.sk-drawer__wa p{ margin: 0 0 4px; color: var(--sk-ink); font-size: 13px; font-weight: 600; max-width: none; }
.sk-drawer__wa a{ font-size: 18px; font-weight: 700; color: var(--sk-rose); }

body.sk-drawer-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .sk-drawer__panel, .sk-drawer__scrim{ transition: none; }
}

/* --------------------------------------------------------------------------
   4. FOOTER
   -------------------------------------------------------------------------- */

.sk-footer{
  background: var(--sk-footer-bg);
  border-top: 1px solid var(--sk-line);
  padding-block: 48px 0;
}
.sk-footer__cols{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: 32px;
}
.sk-footer h3{
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sk-ink);
}
.sk-footer p{ font-size: 14px; color: var(--sk-body); max-width: 34ch; }
.sk-footer ul{ list-style: none; margin: 0; padding: 0; }
.sk-footer li + li{ margin-top: 4px; }
.sk-footer li a{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--sk-body);
  font-size: 14px;
  text-decoration: none;
}
.sk-footer li a:hover{ color: var(--sk-rose); }

.sk-footer__brandtag{
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-ink);
}

.sk-social{ display: flex; gap: 8px; margin-top: 16px; }
.sk-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sk-line);
  border-radius: 50%;
  background: var(--sk-white);
  color: var(--sk-ink);
  transition: background-color var(--sk-ease), color var(--sk-ease), border-color var(--sk-ease);
}
.sk-social a:hover{ background: var(--sk-rose); border-color: var(--sk-rose); color: #FFFFFF; }

.sk-newsletter{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sk-newsletter input{ flex: 1 1 180px; }
.sk-newsletter .sk-btn{ flex: 0 0 auto; }

.sk-footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-block: 18px;
  border-top: 1px solid var(--sk-line);
  font-size: 13px;
  color: var(--sk-muted);
}
.sk-paychips{ display: flex; gap: 8px; flex-wrap: wrap; }
.sk-paychip{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-input);
  background: var(--sk-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sk-muted);
  white-space: nowrap;
}

@media (max-width: 999.98px){
  .sk-footer__cols{ grid-template-columns: 1fr 1fr; }
  .sk-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 599.98px){
  .sk-footer__cols{ grid-template-columns: 1fr; }
  .sk-footer__bottom{ flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   5. FLOATING WHATSAPP BUTTON
   #25D366 is WhatsApp's own brand colour, not a SanoKala token.
   -------------------------------------------------------------------------- */

.sk-float-wa{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(15,17,23,.18);
  transition: background-color var(--sk-ease);
}
.sk-float-wa:hover{ background: #1EA952; color: #FFFFFF; }
.sk-float-wa:focus-visible{ outline: 3px solid var(--sk-rose); outline-offset: 2px; }

body.sk-has-sticky-bar .sk-float-wa{ bottom: 88px; }

/* --------------------------------------------------------------------------
   6. SECTION SCAFFOLD
   -------------------------------------------------------------------------- */

.sk-section--cream{ background: var(--sk-cream); }
.sk-section--tint{ background: var(--sk-promo); }

.sk-sechead__action{ flex: 0 0 auto; }
.sk-link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--sk-rose);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sk-link-arrow:hover{ color: var(--sk-rose-deep); }

/* --------------------------------------------------------------------------
   7. HOMEPAGE
   -------------------------------------------------------------------------- */

/* 7.1 Hero
   Columns, gaps, padding and background are set in Elementor so the section
   stays editable. Everything here is look only and must not fight the builder. */
.sk-hero h1{ margin: 0 0 16px; }
.sk-hero h1 span{ display: block; }
.sk-hero h1 .w1{ color: var(--sk-rose-bright); }
.sk-hero h1 .w2{ color: var(--sk-blue); }
.sk-hero h1 .w3{ color: var(--sk-green); }
.sk-hero__lead{ font-size: 16px; max-width: 42ch; margin: 0 0 24px; }

.sk-hero__trust{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 32px;
}
.sk-hero__trust > *:last-child:nth-child(odd){ grid-column: 1 / -1; }
.sk-trustline{ display: flex; align-items: flex-start; gap: 10px; }
.sk-trustline svg{ flex: 0 0 auto; margin-top: 2px; color: var(--sk-ink); }
.sk-trustline b{ display: block; font-size: 14px; font-weight: 600; color: var(--sk-ink); }
.sk-trustline span{ display: block; font-size: 13px; color: var(--sk-muted); }
.sk-trustline a{ font-weight: 700; }

.sk-hero__art{ position: relative; }
.sk-hero__art svg{ width: 100%; height: auto; display: block; }

@media (max-width: 899.98px){
  .sk-hero__trust{ grid-template-columns: 1fr; gap: 14px; }
}

/* 7.2 Category circles */
.sk-cats{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sk-gap);
}
.sk-cat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-cat__circle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--sk-ink);
  transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.sk-cat:hover .sk-cat__circle{ transform: scale(1.05); box-shadow: var(--sk-shadow); }
.sk-cat__label{ font-size: 13px; font-weight: 600; line-height: 1.3; }

.sk-t1{ background: var(--sk-blush); }
.sk-t2{ background: var(--sk-butter); }
.sk-t3{ background: var(--sk-sky-t); }
.sk-t4{ background: var(--sk-peach); }
.sk-t5{ background: var(--sk-mint); }
.sk-t6{ background: var(--sk-lilac); }
.sk-t7{ background: var(--sk-steel); }
.sk-t8{ background: var(--sk-mint-2); }

@media (max-width: 999.98px){
  .sk-cats{ grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
}
@media (max-width: 689.98px){
  /* Scrolls inside its own column. No negative margins, so the page itself
     can never scroll sideways at 390px. */
  .sk-cats{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .sk-cats::-webkit-scrollbar{ display: none; }
  .sk-cat{ flex: 0 0 78px; scroll-snap-align: start; }
}

/* 7.3 Trust cells */
.sk-trustgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-gap); }
.sk-trustcell{
  border-radius: var(--sk-r-card);
  padding: 20px;
}
.sk-trustcell svg{ color: var(--sk-ink); margin-bottom: 10px; }
.sk-trustcell b{ display: block; font-size: 15px; font-weight: 600; color: var(--sk-ink); margin-bottom: 4px; }
.sk-trustcell span{ font-size: 13px; line-height: 1.5; color: var(--sk-body); }
.sk-trustcell a{ font-weight: 700; }

@media (max-width: 899.98px){ .sk-trustgrid{ grid-template-columns: 1fr 1fr; } }

/* 7.4 Promo band - layout set in Elementor, look only here. */
.sk-promo__art{ align-self: stretch; width: 100%; }
.sk-promo__art svg{
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: block;
  border-radius: var(--sk-r-card);
}

/* 7.5 Age cards */
.sk-ages{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-gap); }
.sk-agecard{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--sk-r-card);
  text-decoration: none;
  transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.sk-agecard:hover{ transform: translateY(-3px); box-shadow: var(--sk-shadow); }
.sk-agecard__num{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sk-ink);
}
.sk-agecard__desc{ font-size: 13px; line-height: 1.5; color: var(--sk-body); }
.sk-agecard__cta{
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-rose);
}

@media (max-width: 899.98px){ .sk-ages{ grid-template-columns: 1fr 1fr; } }

/* 7.6 FAQ */
.sk-faq{ max-width: 820px; }
.sk-faq details{
  background: var(--sk-white);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-card);
  margin-bottom: 8px;
}
.sk-faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-ink);
  cursor: pointer;
  list-style: none;
}
.sk-faq summary::-webkit-details-marker{ display: none; }
.sk-faq summary::after{
  content: "+";
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--sk-rose);
}
.sk-faq details[open] summary::after{ content: "\2212"; }
.sk-faq__body{ padding: 0 18px 16px; }
.sk-faq__body p{ font-size: 14px; margin: 0; }

/* 7.7 Closing CTA */
.sk-cta{
  background: var(--sk-rose-soft);
  border-radius: var(--sk-r-panel);
  padding: 48px 24px;
  text-align: center;
}
.sk-cta h2{ margin: 0 0 18px; }
.sk-cta__note{ margin: 18px auto 0; max-width: 46ch; font-size: 14px; color: var(--sk-body); }

/* --------------------------------------------------------------------------
   7.8 SHOP BY AGE

   Two states. With no stage chosen the page is a chooser: four large stage
   cards. Once a stage is chosen those collapse to a compact chip switcher and
   the page becomes a guide to that stage, followed by its toys.
   -------------------------------------------------------------------------- */

/* --- State A: stage cards --- */

.sk-stages{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sk-gap);
}
.sk-stage{
  display: flex;
  flex-direction: column;
  padding: 24px 20px 16px;
  border-radius: var(--sk-r-panel);
  text-decoration: none;
  transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.sk-stage:hover{ transform: translateY(-3px); box-shadow: var(--sk-shadow); }
.sk-stage__num{
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sk-ink);
}
.sk-stage__name{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sk-ink);
}
.sk-stage__desc{
  flex: 1 1 auto;
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sk-body);
}
.sk-stage__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 17, 23, .10);
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-ink);
}
.sk-stage__go{ color: var(--sk-rose); }
.sk-stage__go::after{ content: " \2192"; }

@media (max-width: 899.98px){
  .sk-stages{ grid-template-columns: 1fr 1fr; }
  .sk-stage{ padding: 20px 16px 14px; }
  .sk-stage__num{ font-size: 36px; }
}

/* --- State B: chip switcher --- */

/* Wraps rather than scrolls: with five stages a hidden scroll row would put
   real options off-screen on a phone. */
.sk-chipbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sk-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  white-space: nowrap;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-pill);
  background: var(--sk-white);
  color: var(--sk-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--sk-ease), border-color var(--sk-ease), color var(--sk-ease);
}
.sk-chip:hover{ background: var(--sk-cream); color: var(--sk-ink); }
.sk-chip.is-on{
  background: var(--sk-ink);
  border-color: var(--sk-ink);
  color: var(--sk-white);
}
.sk-chip__n{ font-size: 12px; font-weight: 600; opacity: .62; }

/* --- State B: stage guide panel --- */

.sk-band{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
  padding: 32px;
  border-radius: var(--sk-r-panel);
}
.sk-band__num{
  display: block;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: .9;
  color: var(--sk-ink);
}
.sk-band__name{
  margin: 8px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-ink);
  opacity: .62;
  max-width: none;
}
.sk-band h2{ margin: 0 0 10px; }
.sk-band p:last-child{ margin: 0; max-width: 52ch; color: var(--sk-ink); opacity: .78; }

.sk-look{
  background: var(--sk-white);
  border-radius: var(--sk-r-card);
  padding: 20px 22px;
}
.sk-look h3{ margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.sk-look ul{ list-style: none; margin: 0; padding: 0; }
.sk-look li{
  display: flex;
  gap: 10px;
  padding-block: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sk-body);
}
.sk-look li + li{ border-top: 1px solid var(--sk-line); }
.sk-look li svg{ flex: 0 0 auto; margin-top: 3px; color: var(--sk-green); }

@media (max-width: 899.98px){
  .sk-band{ grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .sk-band__num{ font-size: 52px; }
}

/* --- Results bar --- */

.sk-resbar{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 32px 0 14px;
  border-bottom: 1px solid var(--sk-line);
}
.sk-resbar h2{ margin: 0; font-size: 1.15rem; }
.sk-resbar .sk-link-arrow{ min-height: 0; flex: 0 0 auto; }
.sk-resbar .sk-link-arrow::after{ content: " \2192"; }

@media (max-width: 689.98px){
  .sk-resbar{ flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 28px; }
}

/* --- Nearby stages --- */

.sk-nextprev{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sk-gap);
  margin-top: 40px;
}
.sk-np{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 22px;
  border-radius: var(--sk-r-card);
  text-decoration: none;
  transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.sk-np:hover{ transform: translateY(-3px); box-shadow: var(--sk-shadow); }
.sk-np__kicker{ font-size: 12px; font-weight: 600; color: var(--sk-ink); opacity: .58; }
.sk-np__kicker::before{ content: "\2190  "; }
.sk-np__name{ font-size: 17px; font-weight: 700; color: var(--sk-ink); }
.sk-np__desc{ margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--sk-body); }
.sk-np__n{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 17, 23, .10);
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-ink);
}
.sk-np--next{ text-align: right; }
.sk-np--next .sk-np__kicker::before{ content: none; }
.sk-np--next .sk-np__kicker::after{ content: "  \2192"; }

@media (max-width: 689.98px){
  .sk-nextprev{ grid-template-columns: 1fr; }
  .sk-np--next{ text-align: left; }
  .sk-np--next .sk-np__kicker::before{ content: "\2192  "; }
  .sk-np--next .sk-np__kicker::after{ content: none; }
}

@media (prefers-reduced-motion: reduce){
  .sk-stage:hover, .sk-np:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   7.9 ABOUT + CONTACT
   -------------------------------------------------------------------------- */

.sk-checklist{
  background: var(--sk-white);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-card);
  padding: 22px 24px;
}
.sk-checklist h3{ margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.sk-checklist ul{ list-style: none; margin: 0; padding: 0; }
.sk-checklist li{
  display: flex;
  gap: 10px;
  padding-block: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sk-body);
}
.sk-checklist li + li{ border-top: 1px solid var(--sk-line); }
.sk-checklist li svg{ flex: 0 0 auto; margin-top: 4px; color: var(--sk-green); }

/* Contact details card */
.sk-contactcard{
  background: var(--sk-cream);
  border-radius: var(--sk-r-panel);
  padding: 28px;
}
.sk-contactcard__lead h2{ margin: 0 0 8px; }
.sk-contactcard__lead p{ margin: 0 0 20px; max-width: 46ch; }

.sk-cdetails{ list-style: none; margin: 24px 0 0; padding: 0; }
.sk-cdetails li{
  display: flex;
  gap: 12px;
  padding-block: 16px;
  border-top: 1px solid rgba(15, 17, 23, .10);
}
.sk-cdetails li svg{ flex: 0 0 auto; margin-top: 3px; color: var(--sk-ink); }
.sk-cdetails b{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-ink);
  margin-bottom: 2px;
}
.sk-cdetails span{ font-size: 14px; line-height: 1.55; color: var(--sk-body); }
.sk-cdetails a{ font-size: 16px; font-weight: 600; }

.sk-csocial{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 17, 23, .10);
}
.sk-csocial > span{ font-size: 13px; font-weight: 600; color: var(--sk-ink); }
.sk-csocial > div{ display: flex; gap: 8px; }
.sk-csocial a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sk-line);
  border-radius: 50%;
  background: var(--sk-white);
  color: var(--sk-ink);
  transition: background-color var(--sk-ease), color var(--sk-ease), border-color var(--sk-ease);
}
.sk-csocial a:hover{ background: var(--sk-rose); border-color: var(--sk-rose); color: var(--sk-white); }

@media (max-width: 689.98px){
  .sk-contactcard{ padding: 20px; }
}

/* WPForms, brought onto the token system.

   WPForms renders through its own custom properties, so setting those is the
   supported route and beats trying to out-specify the plugin's stylesheet. */
.wpforms-container,
.wpforms-container.wpforms-render-modern{
  --wpforms-field-border-radius: var(--sk-r-input);
  --wpforms-field-border-color: var(--sk-line);
  --wpforms-field-background-color: var(--sk-white);
  --wpforms-field-text-color: var(--sk-ink);
  --wpforms-label-color: var(--sk-ink);
  --wpforms-label-sublabel-color: var(--sk-muted);
  --wpforms-label-error-color: #B3261E;
  --wpforms-button-border-radius: var(--sk-r-pill);
  --wpforms-button-background-color: var(--sk-rose);
  --wpforms-button-background-color-alt: var(--sk-rose-deep);
  --wpforms-button-text-color: var(--sk-white);
  --wpforms-button-text-color-alt: var(--sk-white);
  --wpforms-page-break-color: var(--sk-rose);
}

/* The spam decoy must never be visible to a real visitor. WPForms hides it
   already; this makes it certain regardless of plugin CSS load order. */
.wpforms-field-hp{ display: none !important; }

.wpforms-container .wpforms-form .wpforms-field{ padding: 0 0 16px; }
.wpforms-container .wpforms-form .wpforms-field-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-ink);
  margin-bottom: 6px;
}
.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-form .wpforms-field-description{
  font-size: 13px;
  color: var(--sk-muted);
}
.wpforms-container .wpforms-form .wpforms-required-label{ color: var(--sk-rose); }
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form textarea{
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-input);
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--sk-font);
  font-size: 14px;
  background: var(--sk-white);
  max-width: 100%;
}
.wpforms-container .wpforms-form textarea{ min-height: 140px; }
.wpforms-container .wpforms-form button[type="submit"]{
  min-height: 44px;
  padding: 12px 26px;
  background: var(--sk-rose);
  border: 1px solid var(--sk-rose);
  border-radius: var(--sk-r-pill);
  color: var(--sk-white);
  font-family: var(--sk-font);
  font-size: 14px;
  font-weight: 600;
}
.wpforms-container .wpforms-form button[type="submit"]:hover{
  background: var(--sk-rose-deep);
  border-color: var(--sk-rose-deep);
}
.wpforms-container .wpforms-form .wpforms-error{ color: var(--sk-red-700, #B3261E); font-size: 13px; }

/* --------------------------------------------------------------------------
   8. WOOCOMMERCE PRODUCT CARDS
   -------------------------------------------------------------------------- */

.woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sk-gap);
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content: none; }

.woocommerce ul.products li.product{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 12px;
  background: var(--sk-white);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-card);
  transition: transform var(--sk-ease), box-shadow var(--sk-ease);
}
.woocommerce ul.products li.product:hover{ transform: translateY(-3px); box-shadow: var(--sk-shadow); }

.woocommerce ul.products li.product a img{
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--sk-white);
  border-radius: var(--sk-r-input);
  margin-bottom: 10px;
  transition: transform var(--sk-ease);
}

/* The card carries photo, age, name, price and Add to cart. Blocksy also
   prints the product category under the price, which competes with the title
   for the tap and is not part of the card contract. */
.woocommerce ul.products li.product .entry-meta{ display: none; }

/* Blocksy's figure wrapper is what actually clips the hover scale. */
.woocommerce ul.products li.product figure{
  margin: 0;
  overflow: hidden;
  border-radius: var(--sk-r-input);
}
.woocommerce ul.products li.product:hover a img{ transform: scale(1.04); }
.woocommerce ul.products li.product > a:first-of-type{ display: block; overflow: hidden; border-radius: var(--sk-r-input); }

.sk-card-age{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sk-muted);
  margin-bottom: 2px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sk-ink);
  padding: 0;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The title wraps a link, which would otherwise inherit the rose link colour
   and compete with the price. Ink title, rose price. */
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  color: inherit;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover{
  color: var(--sk-rose);
}
.woocommerce ul.products li.product .price{
  font-size: 17px;
  font-weight: 700;
  color: var(--sk-rose);
  margin: 0 0 12px;
}
.woocommerce ul.products li.product .price del{ color: var(--sk-muted); font-weight: 400; font-size: 14px; margin-right: 6px; }
.woocommerce ul.products li.product .price ins{ text-decoration: none; }

.woocommerce ul.products li.product .button{
  margin-top: auto;
  width: 100%;
}

.woocommerce span.onsale{
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--sk-rose-bright);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 999.98px){ .woocommerce ul.products{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 689.98px){ .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* --------------------------------------------------------------------------
   9. EMPTY STATE - honest placeholder until the catalogue is live
   -------------------------------------------------------------------------- */

.sk-empty{
  background: var(--sk-white);
  border: 1px dashed var(--sk-line);
  border-radius: var(--sk-r-card);
  padding: 40px 24px;
  text-align: center;
}
.sk-empty__title{
  font-size: 18px;
  font-weight: 700;
  color: var(--sk-ink);
  margin: 0 0 8px;
  max-width: none;
}
.sk-empty__body{
  color: var(--sk-body);
  font-size: 14px;
  max-width: 46ch;
  margin: 0 auto 20px;
}

/* --------------------------------------------------------------------------
   10. THIRD-PARTY TRIMS
   -------------------------------------------------------------------------- */

/* Elementor's boxed containers inherit the design's 1280px measure. */
.e-con{ --container-max-width: var(--sk-container); }

.elementor-button{ min-height: 44px; }
@media (max-width: 689.98px){
  .elementor-widget-button .elementor-button{ width: 100%; }
}

/* Outline button.

   Elementor applies a widget's custom CSS class to the wrapper <div>, never to
   the <a> it contains. So the class is used as a scope here and the styling is
   put on the button itself; the wrapper is explicitly neutralised so it cannot
   render as a stray bordered box. */
.elementor-widget-button.sk-btn--outline{
  background: none;
  border: 0;
  padding: 0;
}
.elementor-widget-button.sk-btn--outline .elementor-button{
  background: transparent;
  color: var(--sk-rose);
  border: 1px solid var(--sk-rose);
}
.elementor-widget-button.sk-btn--outline .elementor-button:hover{
  background: var(--sk-rose);
  color: var(--sk-white);
}

/* Elementor wraps shortcode output; let the grids inside fill the column. */
.elementor-widget-shortcode,
.elementor-widget-html{ width: 100%; }

/* The hero lead paragraph is a text-editor widget, not a .sk- element. */
.sk-hero .elementor-widget-text-editor p{ max-width: 42ch; }

@media (prefers-reduced-motion: reduce){
  .sk-agecard:hover,
  .sk-cat:hover .sk-cat__circle,
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product:hover a img{ transform: none; }
}