/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/

/* =====================================================================
   SHARK — Design tokens (from design_handoff_shark_homepage/CLAUDE.md)
   ===================================================================== */
:root {
  --primary:     #4f8fec;
  --primary-600: #3f7bec;
  --primary-700: #2f6ad0;
  --ink:         #242424;
  --ink-2:       #4a4a4a;
  --muted:       #777;
  --line:        #ECECEC;
  --bg:          #ffffff;
  --bg-soft:     #f5f5f5;
  --navy:        #0f1827;
  --navy-2:      #1a2536;
  --hot:         #E5252A;
  --star:        #FFB820;
  --pink:        #FBE5E7;
  --yellow:      #F4C636;
  --skyblue:     #3F92F4;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(20,20,40,.04);
  --shadow:      0 4px 18px rgba(20,20,40,.06);
  --container:   1320px;
}

/* =====================================================================
   HOMEPAGE LAYOUT RESET
   ===================================================================== */
.shark-hp { font-family: 'Poppins', sans-serif; color: var(--ink); }
.shark-hp * { box-sizing: border-box; }
.shark-hp img { max-width: 100%; display: block; }
.shark-hp ul { list-style: none; margin: 0; padding: 0; }
.shark-hp a { text-decoration: none; color: inherit; }
.shark-hp p { margin: 0; }
.shark-hp h1,.shark-hp h2,.shark-hp h3,.shark-hp h4 { margin: 0; letter-spacing: -.01em; }

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

/* =====================================================================
   HERO SLIDER
   ===================================================================== */
.shark-hero { padding: 20px 0 0; }
.shark-hero__grid {
  display: grid;
  grid-template-columns: 1.95fr 1fr;
  gap: 18px;
}

/* Slider */
.shark-slider {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy); min-height: 480px;
  box-shadow: var(--shadow);
}
.shark-slide {
  display: none; padding: 48px 56px;
  min-height: 480px; align-items: center;
  color: #fff; position: relative;
}
.shark-slide.is-active {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px; align-items: center;
}
.shark-slide__bg { position: absolute; inset: 0; pointer-events: none; }
.shark-slide__bg--lines { background:
  radial-gradient(circle at 80% 30%, rgba(63,123,236,.18), transparent 50%),
  repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.025) 18px 19px); }
.shark-slide__bg--grid { background:
  radial-gradient(circle at 30% 80%, rgba(63,123,236,.18), transparent 50%),
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px; }
.shark-slide__bg--dots { background:
  radial-gradient(circle at 60% 50%, rgba(63,123,236,.2), transparent 60%),
  radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/22px 22px; }

.shark-slide__copy { position: relative; z-index: 1; }
.shark-eyebrow {
  display: inline-block; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: #bdd0f0; background: rgba(63,123,236,.12); margin-bottom: 18px;
}
.shark-slide h1 {
  font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px;
}
.shark-slide__desc { font-size: 15px; color: #c5d0e0; max-width: 440px; margin-bottom: 24px; }
.shark-slide__cta { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.shark-slide__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shark-slide__chips li {
  font-size: 11.5px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #a8b6cf;
}
.shark-slide__art { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.shark-slide__art svg { width: 100%; max-height: 320px; }

/* Slider controls */
.shark-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; cursor: pointer; border: 0;
  transition: background .2s;
}
.shark-slider__nav:hover { background: rgba(255,255,255,.2); }
.shark-slider__nav--prev { left: 18px; }
.shark-slider__nav--next { right: 18px; }
.shark-slider__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.shark-slider__dot { width: 24px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); cursor: pointer; transition: background .2s, width .2s; border: 0; padding: 0; }
.shark-slider__dot.is-active { background: #fff; width: 36px; }

/* Promo cards */
.shark-promos { display: grid; grid-template-rows: 1.05fr .95fr .95fr; gap: 18px; }
.shark-promo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: center;
}
.shark-promo--pink   { background: linear-gradient(135deg,#fde5ea,#fbd4dd); }
.shark-promo--blue   { background: linear-gradient(135deg,#4ba2f6,#3f7bec); color: #fff; }
.shark-promo--yellow { background: linear-gradient(135deg,#f6d24b,#eba81d); }
.shark-promo__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.shark-promo__title  { font-size: 18px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; color: #1f1f23; }
.shark-promo--blue .shark-promo__title { color: #fff; }
.shark-promo__count  { display: flex; gap: 6px; margin-bottom: 14px; }
.shark-promo__count span {
  background: #fff; border-radius: 6px; padding: 6px 8px; min-width: 42px; text-align: center;
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.shark-promo__count b { font-weight: 800; font-size: 14px; color: #1f1f23; line-height: 1; }
.shark-promo__count i { font-style: normal; font-size: 9px; font-weight: 500; color: #888; margin-top: 3px; letter-spacing: .5px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.shark-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--radius);
  font-weight: 600; font-size: 13.5px; font-family: 'Poppins', sans-serif;
  cursor: pointer; border: 0; transition: transform .15s, background .2s, color .2s, border-color .2s;
  white-space: nowrap; text-decoration: none;
}
.shark-btn:hover { transform: translateY(-1px); }
.shark-btn--blue  { background: var(--primary); color: #fff; }
.shark-btn--blue:hover { background: var(--primary-600); color: #fff; }
.shark-btn--dark  { background: #1f1f23; color: #fff; }
.shark-btn--dark:hover { background: #000; }
.shark-btn--ghost-light { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.shark-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.shark-btn--white { background: #fff; color: #1f1f23; }
.shark-btn--sm { height: 38px; padding: 0 16px; font-size: 12.5px; }

/* =====================================================================
   FEATURE STRIP
   ===================================================================== */
.shark-strip {
  margin: 16px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 14px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
  box-shadow: var(--shadow-sm);
}
.shark-strip__item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-right: 1px solid var(--line);
}
.shark-strip__item:last-child { border-right: 0; }
.shark-strip__icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-600); background: #eef4ff; border-radius: 10px; font-size: 20px;
}
.shark-strip__t { font-weight: 700; font-size: 14px; color: var(--ink); }
.shark-strip__s { font-size: 12px; color: var(--muted); }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.shark-section { padding: 56px 0; }
.shark-section--gray { background: var(--bg-soft); }
.shark-section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 24px; }
.shark-section__title { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.shark-section__sub { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 580px; }
.shark-section__more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: #eef4ff; color: var(--primary-600);
  border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: background .2s;
}
.shark-section__more:hover { background: #dde9fb; }

/* =====================================================================
   SERVICES GRID
   ===================================================================== */
.shark-svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.shark-svc {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 22px 22px; display: block;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  overflow: hidden;
  color: inherit;
}
.shark-svc::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.shark-svc:hover { border-color: #dfe7fa; box-shadow: var(--shadow); transform: translateY(-3px); }
.shark-svc:hover::before { transform: scaleX(1); }
.shark-svc__no {
  position: absolute; right: 18px; top: 18px;
  font-family: ui-monospace,monospace; font-size: 11px; color: #bcbcbc; font-weight: 600; letter-spacing: 1px;
}
.shark-svc__icon {
  width: 64px; height: 64px; border-radius: 14px;
  background: #f1f5fb; color: var(--primary-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 26px;
}
.shark-svc h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.shark-svc > p { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.55; }
.shark-svc__list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0; border-top: 1px dashed var(--line); margin-bottom: 12px;
}
.shark-svc__list li {
  font-size: 12.5px; color: var(--ink-2); position: relative; padding-left: 14px;
}
.shark-svc__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--primary); border-radius: 50%;
}
.shark-svc__more { font-size: 13px; font-weight: 600; color: var(--primary-600); display: inline-block; }
.shark-svc:hover .shark-svc__more { color: var(--primary-700); }

/* =====================================================================
   QUOTE STRIP
   ===================================================================== */
.shark-quotestrip { background: var(--navy); color: #fff; padding: 44px 0; }
.shark-quotestrip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.shark-quotestrip__eyebrow { font-size: 12px; color: #bdd0f0; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.shark-quotestrip__h { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; max-width: 680px; }
.shark-quotestrip__h span { color: #7bb0ff; }
.shark-quotestrip__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* =====================================================================
   SHOP CATEGORIES
   ===================================================================== */
.shark-cats { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.shark-cat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 14px; text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  color: inherit; display: block;
}
.shark-cat:hover { border-color: #dfe7fa; transform: translateY(-3px); box-shadow: var(--shadow); }
.shark-cat__img {
  aspect-ratio: 6/5; border-radius: 10px; overflow: hidden;
  margin-bottom: 14px; background: #f6f7fa;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.shark-cat__name { font-weight: 700; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
.shark-cat__count { font-size: 12px; color: var(--muted); }

/* =====================================================================
   PRODUCTS TABS + GRID
   ===================================================================== */
.shark-tabsbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; }
.shark-tabs { display: flex; gap: 8px; }
.shark-tab {
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 13px;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  cursor: pointer; transition: all .2s; font-family: 'Poppins', sans-serif;
}
.shark-tab:hover { border-color: #dfe7fa; color: var(--primary-600); }
.shark-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.shark-products { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.shark-tab-panel { display: none; }
.shark-tab-panel.is-active { display: block; }

.shark-prod {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; transition: box-shadow .2s, border-color .2s; position: relative;
}
.shark-prod:hover { border-color: #dfe7fa; box-shadow: var(--shadow); }
.shark-prod__badges {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; gap: 6px;
}
.shark-prod__badge {
  background: var(--hot); color: #fff; font-size: 10px; font-weight: 700;
  padding: 4px 9px; border-radius: 99px; letter-spacing: .5px;
  white-space: nowrap;
}
.shark-prod__badge--new { background: #1f8a5b; }
.shark-prod__img {
  aspect-ratio: 1; border-radius: 8px; background: #f7f7f9;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; overflow: hidden; font-size: 52px;
}
.shark-prod__title { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.shark-prod__cat   { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.shark-prod__stars { color: var(--star); font-size: 13px; margin-bottom: 6px; letter-spacing: 1px; }
.shark-prod__stock { font-size: 12px; color: #1f8a5b; margin-bottom: 8px; }
.shark-prod__price { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.shark-prod__cta {
  display: block; text-align: center; background: var(--primary); color: #fff;
  border-radius: 6px; padding: 10px 0; font-weight: 600; font-size: 12.5px;
  transition: background .2s;
}
.shark-prod__cta:hover { background: var(--primary-600); }

/* =====================================================================
   3-UP PROMO BANNERS
   ===================================================================== */
.shark-promostrip { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.shark-promostrip__card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 32px; min-height: 200px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff;
}
.shark-promostrip__card--purple { background: linear-gradient(135deg,#6f3fec,#3f1f7b); }
.shark-promostrip__card--orange { background: linear-gradient(135deg,#f97d2b,#e25612); }
.shark-promostrip__card--red    { background: linear-gradient(135deg,#e84a4a,#bd1818); }
.shark-promostrip__t  { font-size: 22px; font-weight: 800; margin-bottom: 6px; line-height: 1.1; }
.shark-promostrip__s  { font-size: 13px; opacity: .9; margin-bottom: 14px; }
.shark-promostrip__art { font-size: 72px; flex: 0 0 auto; opacity: .9; }

/* =====================================================================
   ARTICLES
   ===================================================================== */
.shark-articles { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.shark-article {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px; transition: box-shadow .2s, border-color .2s;
}
.shark-article:hover { border-color: #dfe7fa; box-shadow: var(--shadow); }
.shark-article__img {
  aspect-ratio: 16/10; border-radius: 8px; margin-bottom: 14px; overflow: hidden;
  background: #1a2536; display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 40px;
}
.shark-article__img--a { background: radial-gradient(circle at 40% 60%,rgba(63,123,236,.6) 0,transparent 70%),linear-gradient(135deg,#0e1b30,#3a1d4f); }
.shark-article__img--b { background: linear-gradient(135deg,#222,#0b1a2b); }
.shark-article__img--c { background: linear-gradient(135deg,#5b3a13,#22130a); }
.shark-article__img--d { background: radial-gradient(circle at 70% 30%,rgba(244,198,54,.4),transparent 60%),linear-gradient(135deg,#202020,#0a0a0a); }
.shark-article__tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 600;
}
.shark-article__meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.shark-article h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; color: var(--ink); }
.shark-article p  { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.shark-article__more { font-size: 13px; font-weight: 600; color: var(--primary-600); }
.shark-article__more:hover { color: var(--primary-700); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .shark-svc-grid  { grid-template-columns: repeat(3,1fr); }
  .shark-cats      { grid-template-columns: repeat(3,1fr); }
  .shark-products  { grid-template-columns: repeat(3,1fr); }
  .shark-articles  { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px) {
  .shark-hero__grid { grid-template-columns: 1fr; }
  .shark-promos { grid-template-columns: repeat(3,1fr); grid-template-rows: auto; }
  .shark-slide { padding: 36px 28px; }
  .shark-slide h1 { font-size: 34px; }
  .shark-slide.is-active { grid-template-columns: 1fr; }
  .shark-slide__art { display: none; }
  .shark-strip { grid-template-columns: repeat(2,1fr); }
  .shark-strip__item { border-right: 0; }
  .shark-promostrip { grid-template-columns: 1fr; }
  .shark-quotestrip__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .shark-svc-grid  { grid-template-columns: 1fr; }
  .shark-cats      { grid-template-columns: repeat(2,1fr); }
  .shark-products  { grid-template-columns: repeat(2,1fr); }
  .shark-articles  { grid-template-columns: 1fr; }
  .shark-promos    { grid-template-columns: 1fr; }
  .shark-section   { padding: 36px 0; }
  .shark-slide__chips { display: none; }
}

/* =====================================================================
   OVERRIDE BLOCK — fixes WoodMart global conflicts
   WoodMart sets on ALL button/btn: border-radius:0, bgcolor:#F3F3F3,
   color:#3E3E3E, text-transform:uppercase, min-height:42px.
   WoodMart sets on ALL h1-h6: color:var(--wd-title-color).
   Every rule here needs !important to win the specificity war.
   ===================================================================== */

/* ── Heading colours inside shark-hp ──────────────────────────────────── */
.shark-hp h1,
.shark-hp h2,
.shark-hp h3,
.shark-hp h4  { color: inherit !important; margin-bottom: 0 !important; }
.shark-slide h1,
.shark-slide .shark-slide__copy h1 { color: #fff !important; font-size: 48px !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.02em !important; }
@media (max-width: 960px) { .shark-slide h1 { font-size: 34px !important; } }

/* ── Button nuclear reset — undo WoodMart, re-apply shark styles ──────── */
.shark-hp .shark-btn,
.shark-hp a.shark-btn,
.shark-hp button.shark-btn {
  /* geometry — override WoodMart 0px radius & reset padding */
  border-radius:    8px             !important;
  padding:          0 22px          !important;
  height:           44px            !important;
  min-height:       0               !important;
  line-height:      1               !important;
  /* typography */
  font-family:      'Poppins', sans-serif !important;
  font-weight:      600             !important;
  font-size:        13.5px          !important;
  text-transform:   none            !important;
  text-decoration:  none            !important;
  letter-spacing:   0               !important;
  /* layout */
  display:          inline-flex     !important;
  align-items:      center          !important;
  justify-content:  center          !important;
  gap:              8px             !important;
  cursor:           pointer         !important;
  white-space:      nowrap          !important;
  width:            auto            !important;
  /* transitions */
  transition:       transform .15s, background .2s, color .2s, border-color .2s !important;
  box-shadow:       none            !important;
  /* remove WoodMart border default */
  border-width:     0               !important;
  border-style:     solid           !important;
}
.shark-hp .shark-btn:hover { transform: translateY(-1px) !important; }

/* pill buttons (slider CTAs, chips look) */
.shark-hp .shark-btn--pill { border-radius: 999px !important; }

/* sm */
.shark-hp .shark-btn--sm {
  height:    38px  !important;
  padding:   0 16px !important;
  font-size: 12.5px !important;
}

/* ── Blue ──────────────────────────────────────────────────────────────── */
.shark-hp .shark-btn--blue {
  background-color: #4f8fec !important;
  color:            #fff    !important;
  border-color:     #4f8fec !important;
}
.shark-hp .shark-btn--blue:hover { background-color: #3f7bec !important; border-color: #3f7bec !important; color: #fff !important; }

/* ── Dark ──────────────────────────────────────────────────────────────── */
.shark-hp .shark-btn--dark {
  background-color: #1f1f23 !important;
  color:            #fff    !important;
  border-color:     #1f1f23 !important;
}
.shark-hp .shark-btn--dark:hover { background-color: #000 !important; border-color: #000 !important; color: #fff !important; }

/* ── Ghost light (on dark bg) ──────────────────────────────────────────── */
.shark-hp .shark-btn--ghost-light {
  background-color: rgba(255,255,255,.06) !important;
  color:            #fff                 !important;
  border-width:     1px                  !important;
  border-color:     rgba(255,255,255,.25) !important;
}
.shark-hp .shark-btn--ghost-light:hover { background-color: rgba(255,255,255,.14) !important; color: #fff !important; }

/* ── White ─────────────────────────────────────────────────────────────── */
.shark-hp .shark-btn--white {
  background-color: #ffffff !important;
  color:            #1f1f23 !important;
  border-color:     #ffffff !important;
}
.shark-hp .shark-btn--white:hover { background-color: #f0f4ff !important; color: #1f1f23 !important; }

/* ── Eyebrow chip ──────────────────────────────────────────────────────── */
.shark-eyebrow {
  display: inline-block !important;
  padding: 5px 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #bdd0f0 !important;
  background: rgba(63,123,236,.12) !important;
  margin-bottom: 18px !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ── Slider ────────────────────────────────────────────────────────────── */
.shark-slider { min-height: 500px !important; }
.shark-slide  { min-height: 500px !important; padding: 52px 60px !important; }
@media (max-width: 960px) { .shark-slide { padding: 36px 30px !important; } }

.shark-slide__desc {
  font-size: 15px !important;
  color: #b8c8de !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
  font-family: 'Poppins', sans-serif !important;
}
.shark-slide__cta { margin-bottom: 26px !important; gap: 14px !important; }

.shark-slide__chips li {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #8fa8c8 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* slider nav arrows */
.shark-slider__nav {
  width: 46px !important; height: 46px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
}
.shark-slider__nav:hover { background: rgba(255,255,255,.2) !important; }

/* slider dots — slim pill bars */
.shark-slider__dots { bottom: 24px !important; }
.shark-slider__dot {
  width: 28px !important; height: 6px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.25) !important;
  opacity: 1 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  transition: background .25s, width .25s !important;
}
.shark-slider__dot.is-active {
  background: #fff !important;
  width: 42px !important;
}

/* ── Promo cards — 2-column with illustration ──────────────────────────── */
.shark-promo {
  padding: 24px 22px !important;
  border-radius: 14px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 150px !important;
}
/* first card taller (countdown) */
.shark-promos > .shark-promo:first-child { min-height: 185px !important; }

.shark-promo__body { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.shark-promo__eyebrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  opacity: .85 !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1 !important;
  color: inherit !important;
}
.shark-promo__title {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
  color: #1f1f23 !important;
  font-family: 'Poppins', sans-serif !important;
}
.shark-promo--blue .shark-promo__title { color: #fff !important; }
.shark-promo--blue .shark-promo__eyebrow { color: rgba(255,255,255,.8) !important; }
.shark-promo__count { display: flex !important; gap: 6px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.shark-promo__count span {
  background: #fff !important;
  border-radius: 7px !important;
  padding: 6px 8px !important;
  min-width: 44px !important;
  text-align: center !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) !important;
}
.shark-promo__count b { font-weight: 800 !important; font-size: 15px !important; color: #1f1f23 !important; line-height: 1 !important; font-family: 'Poppins',sans-serif !important; }
.shark-promo__count i { font-style: normal !important; font-size: 9px !important; font-weight: 600 !important; color: #888 !important; margin-top: 3px !important; letter-spacing: .5px !important; }

.shark-promo__art {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  opacity: .9 !important;
}
.shark-promo__art svg { width: 100% !important; height: auto !important; max-width: 110px !important; }

/* ── Feature strip ─────────────────────────────────────────────────────── */
.shark-strip {
  border-radius: 14px !important;
  margin-top: 18px !important;
}
.shark-strip__t { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; }
.shark-strip__s { font-family: 'Poppins', sans-serif !important; }

/* ── Services section ──────────────────────────────────────────────────── */
.shark-section__title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
.shark-section__sub { font-family: 'Poppins', sans-serif !important; }
.shark-svc h3 { font-family: 'Poppins', sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #242424 !important; }
.shark-svc > p { font-family: 'Poppins', sans-serif !important; }
.shark-svc__more { font-family: 'Poppins', sans-serif !important; }

/* ── Quote strip ───────────────────────────────────────────────────────── */
.shark-quotestrip__h {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  font-family: 'Poppins', sans-serif !important;
  color: #fff !important;
}
.shark-quotestrip__h span { color: #7bb0ff !important; }
.shark-quotestrip__eyebrow { font-family: 'Poppins', sans-serif !important; color: #bdd0f0 !important; }

/* ── Shop cats / promostrip / articles body text ───────────────────────── */
.shark-cat__name  { font-family: 'Poppins', sans-serif !important; color: #242424 !important; }
.shark-cat__count { font-family: 'Poppins', sans-serif !important; }
.shark-promostrip__t { font-family: 'Poppins', sans-serif !important; color: #fff !important; }
.shark-promostrip__s { font-family: 'Poppins', sans-serif !important; color: rgba(255,255,255,.9) !important; }
.shark-article h3 { font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #242424 !important; }
.shark-article p  { font-family: 'Poppins', sans-serif !important; }
.shark-prod__title { font-family: 'Poppins', sans-serif !important; color: #242424 !important; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.shark-tab {
  border-radius: 999px !important;
  font-family:   'Poppins', sans-serif !important;
  font-weight:   600  !important;
  min-height:    0    !important;
  text-transform: none !important;
  border-width:  1px  !important;
  border-style:  solid !important;
}
.shark-tab:not(.is-active) {
  background-color: #fff    !important;
  color:            #4a4a4a !important;
  border-color:     #ECECEC !important;
}
.shark-tab.is-active {
  background-color: #242424 !important;
  color:            #fff    !important;
  border-color:     #242424 !important;
}
.shark-tab:hover:not(.is-active) { border-color: #dfe7fa !important; color: #3f7bec !important; }

/* =====================================================================
   SERVICE PAGES — Phase 2
   ===================================================================== */

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.sp-breadcrumb{padding:13px 0;font-size:12.5px;color:var(--muted);background:#fff;border-bottom:1px solid var(--line)}
.sp-breadcrumb__inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:var(--container);margin:0 auto;padding:0 24px}
.sp-breadcrumb a{color:var(--muted);transition:color .2s}.sp-breadcrumb a:hover{color:var(--primary-600)}
.sp-breadcrumb .sep{color:#ccc}.sp-breadcrumb .cur{color:var(--ink);font-weight:600}

/* ── Hero ──────────────────────────────────────────────────────────── */
.sp-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:80px 0 96px}
.sp-hero__bg{position:absolute;inset:0;opacity:.5;pointer-events:none}
.sp-hero__bg--lines{background:radial-gradient(circle at 80% 30%,rgba(63,123,236,.22),transparent 50%),repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.03) 22px 23px)}
.sp-hero__bg--grid{background:radial-gradient(circle at 30% 70%,rgba(63,123,236,.22),transparent 55%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px}
.sp-hero__bg--dots{background:radial-gradient(circle at 70% 40%,rgba(63,123,236,.22),transparent 55%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/24px 24px}
.sp-hero__bg--blueprint{background:radial-gradient(circle at 50% 50%,rgba(63,123,236,.18),transparent 60%),linear-gradient(rgba(125,170,240,.08) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(125,170,240,.08) 1px,transparent 1px) 0 0/30px 30px}
.sp-hero__bg--iso{background:radial-gradient(circle at 60% 50%,rgba(63,123,236,.22),transparent 60%),linear-gradient(60deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 48px,linear-gradient(-60deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 48px}
.sp-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.sp-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#bdd0f0;background:rgba(63,123,236,.1);margin-bottom:22px}
.sp-hero__eyebrow .pulse{width:7px;height:7px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 4px rgba(34,197,94,.18);display:inline-block;flex-shrink:0}
.sp-hero h1{font-size:52px!important;line-height:1.04!important;font-weight:800!important;letter-spacing:-.025em!important;margin-bottom:18px!important;color:#fff!important;font-family:'Poppins',sans-serif!important}
.sp-hero h1 em{font-style:normal;color:#7bb0ff}
.sp-hero__lede{font-size:16px;color:#c5d0e0;max-width:520px;margin-bottom:28px;line-height:1.6;font-family:'Poppins',sans-serif}
.sp-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.sp-hero__stats{display:flex;gap:28px;flex-wrap:wrap}
.sp-hero__stat b{display:block;font-size:26px;font-weight:800;color:#fff;line-height:1;margin-bottom:5px;font-family:'Poppins',sans-serif}
.sp-hero__stat span{font-size:11px;color:#9eb2d0;text-transform:uppercase;letter-spacing:1.5px}
.sp-hero__visual{min-height:320px;display:flex;align-items:center;justify-content:center}
.sp-hero__visual svg{width:100%;max-width:460px;height:auto}

/* ── Section shared ────────────────────────────────────────────────── */
.sp-section{padding:64px 0;background:#fff}
.sp-section--gray{background:var(--bg-soft)}
.sp-section--navy{background:var(--navy);color:#fff}
.sp-wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.sp-section-title{font-size:28px!important;font-weight:800!important;letter-spacing:-.01em!important;color:var(--ink)!important;font-family:'Poppins',sans-serif!important;margin-bottom:6px!important}
.sp-section--navy .sp-section-title{color:#fff!important}
.sp-section-sub{font-size:14px;color:var(--muted);margin-bottom:28px;font-family:'Poppins',sans-serif}
.sp-section--navy .sp-section-sub{color:#a8b6cf}
.sp-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:24px;flex-wrap:wrap}

/* ── Service overview (2-col) ──────────────────────────────────────── */
.sp-intro-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.sp-intro-label{font-size:11.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--primary-600);display:block;margin-bottom:14px;font-family:'Poppins',sans-serif}
.sp-intro-h{font-size:32px!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.015em!important;color:var(--ink)!important;margin-bottom:0!important;font-family:'Poppins',sans-serif!important}
.sp-intro-h span{color:var(--primary-600)}
.sp-intro-body{font-size:15px;line-height:1.75;color:var(--ink-2);font-family:'Poppins',sans-serif}
.sp-intro-bullets{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:22px;list-style:none;padding:0}
.sp-intro-bullets li{position:relative;padding-left:28px;font-size:13.5px;color:var(--ink-2);line-height:1.5;font-family:'Poppins',sans-serif}
.sp-intro-bullets li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--primary);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:20px;text-align:center}

/* ── Sub-service cards grid ────────────────────────────────────────── */
.sp-subs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp-sub{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;transition:box-shadow .2s,border-color .2s,transform .2s;position:relative;overflow:hidden}
.sp-sub::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sp-sub:hover{border-color:#dfe7fa;box-shadow:0 4px 18px rgba(20,20,40,.06);transform:translateY(-3px)}
.sp-sub:hover::before{transform:scaleX(1)}
.sp-sub__no{font-family:ui-monospace,monospace;font-size:10px;color:#bcbcbc;letter-spacing:1px;font-weight:700;margin-bottom:12px;display:block}
.sp-sub__icon{width:48px;height:48px;border-radius:10px;background:#f1f5fb;color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.sp-sub h3{font-size:15px!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:8px!important;font-family:'Poppins',sans-serif!important}
.sp-sub p{font-size:13px;color:var(--muted);line-height:1.55;font-family:'Poppins',sans-serif;margin-bottom:12px}
.sp-sub__chips{display:flex;flex-wrap:wrap;gap:5px}
.sp-sub__chips span{font-size:11px;padding:4px 9px;background:#f6f7fa;color:var(--ink-2);border-radius:99px;font-weight:500}

/* ── Process steps ─────────────────────────────────────────────────── */
.sp-process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.sp-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}
.sp-section--navy .sp-step{background:#1a2536;border-color:#26344c}
.sp-step__n{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.5px;color:var(--primary-600);font-weight:700;margin-bottom:12px;display:block}
.sp-section--navy .sp-step__n{color:#7bb0ff}
.sp-step__icon{width:44px;height:44px;border-radius:10px;background:#f1f5fb;color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.sp-section--navy .sp-step__icon{background:#243348;color:#7bb0ff}
.sp-step h3{font-size:15px!important;font-weight:700!important;margin-bottom:6px!important;font-family:'Poppins',sans-serif!important}
.sp-section--navy .sp-step h3{color:#fff!important}
.sp-step p{font-size:12.5px;color:var(--muted);line-height:1.6;font-family:'Poppins',sans-serif}
.sp-section--navy .sp-step p{color:#a8b6cf}
.sp-step::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--line);z-index:2;font-weight:300}
.sp-step:last-child::after{display:none}

/* ── Quote / Form card ─────────────────────────────────────────────── */
.sp-quote-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;align-items:start}
.sp-quote-info-title{font-size:22px!important;font-weight:800!important;margin-bottom:10px!important;font-family:'Poppins',sans-serif!important;color:var(--ink)!important}
.sp-section--navy .sp-quote-info-title{color:#fff!important}
.sp-quote-info-body{font-size:14px;line-height:1.65;margin-bottom:24px;color:var(--ink-2);font-family:'Poppins',sans-serif}
.sp-section--navy .sp-quote-info-body{color:#a8b6cf}
.sp-qi-list{display:flex;flex-direction:column;gap:16px}
.sp-qi{display:flex;gap:14px;align-items:flex-start}
.sp-qi__icon{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:#eef4ff;color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:18px}
.sp-section--navy .sp-qi__icon{background:#243348;color:#7bb0ff}
.sp-qi__t{font-weight:700;font-size:13px;margin-bottom:2px;color:var(--ink);font-family:'Poppins',sans-serif}
.sp-section--navy .sp-qi__t{color:#fff}
.sp-qi__s{font-size:12px;color:var(--muted);line-height:1.5;font-family:'Poppins',sans-serif}
.sp-section--navy .sp-qi__s{color:#a8b6cf}

/* Quote card (form wrapper) */
.sp-quote-card{background:#fff;border-radius:14px;padding:32px;box-shadow:0 4px 18px rgba(20,20,40,.06);border:1px solid var(--line)}
.sp-quote-card h4{font-size:17px!important;font-weight:800!important;margin-bottom:4px!important;font-family:'Poppins',sans-serif!important;color:var(--ink)!important}
.sp-quote-card-sub{font-size:12.5px;color:var(--muted);margin-bottom:22px;font-family:'Poppins',sans-serif}

/* CF7 field styling overrides inside quote card */
.sp-quote-card .wpcf7-form-control-wrap{display:block;margin-top:4px}
.sp-quote-card .wpcf7 input[type=text],
.sp-quote-card .wpcf7 input[type=email],
.sp-quote-card .wpcf7 input[type=tel],
.sp-quote-card .wpcf7 input[type=number],
.sp-quote-card .wpcf7 input[type=date],
.sp-quote-card .wpcf7 select,
.sp-quote-card .wpcf7 textarea{
  font-family:'Poppins',sans-serif!important;font-size:14px!important;color:var(--ink)!important;
  background:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important;
  padding:11px 14px!important;outline:none!important;width:100%!important;
  transition:border-color .15s,box-shadow .15s!important;box-shadow:none!important;
  -webkit-appearance:none!important;
}
.sp-quote-card .wpcf7 input:focus,
.sp-quote-card .wpcf7 select:focus,
.sp-quote-card .wpcf7 textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(79,143,236,.12)!important}
.sp-quote-card .wpcf7 input[type=submit]{
  background:#4f8fec!important;color:#fff!important;border:0!important;
  border-radius:8px!important;padding:0 28px!important;height:48px!important;
  font-family:'Poppins',sans-serif!important;font-weight:600!important;font-size:14px!important;
  cursor:pointer!important;transition:background .2s!important;text-transform:none!important;min-height:0!important;
}
.sp-quote-card .wpcf7 input[type=submit]:hover{background:#3f7bec!important}
.sp-quote-card .wpcf7-response-output{margin:14px 0 0!important;padding:10px 14px!important;border-radius:8px!important;font-size:13px!important;font-family:'Poppins',sans-serif!important}
.sp-quote-card .wpcf7 .wpcf7-not-valid-tip{font-size:12px!important;color:#E5252A!important;font-family:'Poppins',sans-serif!important}
.sp-quote-card label{font-size:12.5px!important;font-weight:600!important;color:var(--ink)!important;font-family:'Poppins',sans-serif!important;display:block!important;margin-bottom:5px!important}
.sp-quote-card .field{margin-bottom:16px}
.sp-quote-card .field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-quote-card .field--row .field{margin-bottom:0}
.sp-quote-card .form-progress{display:flex;gap:6px;padding:0 0 16px;margin-bottom:16px;border-bottom:1px dashed var(--line)}
.sp-quote-card .form-progress .step-pill{flex:1;padding:7px 8px;border-radius:6px;font-size:11px;font-weight:600;color:var(--ink-2);background:#f6f7fa;text-align:center;font-family:'Poppins',sans-serif}
.sp-quote-card .form-progress .step-pill.is-active{background:var(--primary);color:#fff}
.sp-quote-card .form-note{font-size:12px!important;color:var(--muted)!important;font-family:'Poppins',sans-serif!important;margin-top:12px!important}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.sp-faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.sp-faq-side-title{font-size:28px!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.01em!important;margin-bottom:12px!important;font-family:'Poppins',sans-serif!important;color:var(--ink)!important}
.sp-faq-side-body{font-size:14px;line-height:1.65;color:var(--ink-2);font-family:'Poppins',sans-serif}
.sp-faq-list{display:flex;flex-direction:column;gap:8px}
.sp-faq-item{background:#fafbfc;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sp-faq-item summary{padding:18px 20px;font-weight:600;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-family:'Poppins',sans-serif}
.sp-faq-item summary::-webkit-details-marker{display:none}
.sp-faq-item summary::after{content:"+";font-size:20px;font-weight:300;color:var(--muted);flex-shrink:0;margin-left:12px;transition:transform .2s}
.sp-faq-item[open] summary::after{content:"−"}
.sp-faq-item__body{padding:0 20px 18px;font-size:13.5px;line-height:1.7;color:var(--ink-2);font-family:'Poppins',sans-serif;border-top:1px solid var(--line)}

/* ── CTA band ──────────────────────────────────────────────────────── */
.sp-cta-band{background:linear-gradient(135deg,#0f1827 0%,#1a2e4a 60%,#0f2040 100%);color:#fff;padding:72px 0;text-align:center}
.sp-cta-band__eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#7bb0ff;margin-bottom:14px;font-family:'Poppins',sans-serif}
.sp-cta-band h2{font-size:36px!important;font-weight:800!important;line-height:1.1!important;margin-bottom:12px!important;color:#fff!important;font-family:'Poppins',sans-serif!important;letter-spacing:-.02em!important}
.sp-cta-band h2 em{font-style:normal;color:#7bb0ff}
.sp-cta-band p{font-size:16px;color:#c5d0e0;max-width:520px;margin:0 auto 32px;font-family:'Poppins',sans-serif}
.sp-cta-band__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── Related services ──────────────────────────────────────────────── */
.sp-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp-related-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;transition:box-shadow .2s,border-color .2s,transform .2s;display:block;color:inherit;text-decoration:none}
.sp-related-card:hover{border-color:#dfe7fa;box-shadow:0 4px 18px rgba(20,20,40,.06);transform:translateY(-2px);color:inherit}
.sp-related-card__icon{width:48px;height:48px;border-radius:10px;background:#f1f5fb;color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.sp-related-card h3{font-size:14px!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:6px!important;font-family:'Poppins',sans-serif!important}
.sp-related-card p{font-size:12.5px;color:var(--muted);line-height:1.55;font-family:'Poppins',sans-serif;margin-bottom:10px}
.sp-related-card__link{font-size:12.5px;font-weight:600;color:var(--primary-600);font-family:'Poppins',sans-serif}

/* ── Services index ────────────────────────────────────────────────── */
.sp-index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sp-index-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;transition:box-shadow .2s,border-color .2s,transform .2s;display:block;color:inherit;position:relative;overflow:hidden}
.sp-index-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sp-index-card:hover{border-color:#dfe7fa;box-shadow:0 4px 18px rgba(20,20,40,.06);transform:translateY(-3px);color:inherit}
.sp-index-card:hover::before{transform:scaleX(1)}
.sp-index-card__no{position:absolute;right:18px;top:18px;font-family:ui-monospace,monospace;font-size:11px;color:#bcbcbc;font-weight:600;letter-spacing:1px}
.sp-index-card__icon{width:56px;height:56px;border-radius:12px;background:#f1f5fb;color:var(--primary-600);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.sp-index-card h3{font-size:16px!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:8px!important;font-family:'Poppins',sans-serif!important}
.sp-index-card p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px;font-family:'Poppins',sans-serif}
.sp-index-card__more{font-size:13px;font-weight:600;color:var(--primary-600);font-family:'Poppins',sans-serif}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .sp-subs-grid{grid-template-columns:repeat(3,1fr)}
  .sp-related-grid{grid-template-columns:repeat(2,1fr)}
  .sp-index-grid{grid-template-columns:repeat(2,1fr)}
  .sp-process-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .sp-hero h1{font-size:36px!important}
  .sp-hero__inner{grid-template-columns:1fr}
  .sp-hero__visual{display:none}
  .sp-hero{padding:56px 0 64px}
  .sp-intro-grid{grid-template-columns:1fr}
  .sp-quote-grid{grid-template-columns:1fr}
  .sp-faq-grid{grid-template-columns:1fr}
  .sp-subs-grid{grid-template-columns:repeat(2,1fr)}
  .sp-process-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sp-subs-grid{grid-template-columns:1fr}
  .sp-related-grid{grid-template-columns:1fr}
  .sp-index-grid{grid-template-columns:1fr}
  .sp-process-row{grid-template-columns:1fr}
  .sp-step::after{display:none}
  .sp-quote-card .field--row{grid-template-columns:1fr}
  .sp-intro-bullets{grid-template-columns:1fr}
  .sp-section{padding:40px 0}
}

/* =====================================================================
   SERVICE PAGE LAYOUT FIX
   Root cause: Woodmart's woodmart_page_top_part() wraps ALL page content
   in <main class="wd-content-layout content-layout-wrapper container wd-grid-g">.
   This applies:
     - display:grid + 12-column template → sections become 1/12-width cells
     - container max-width + padding    → breaks full-bleed hero/CTA
     - padding-block:40px              → double padding on sections
   Fix: reset the main wrapper to a plain block box on service templates.
   Selector uses WordPress body classes from the template file path.
   ===================================================================== */

/* ── Target both service templates ──────────────────────────────────── */
body.page-template-page-service-detail main#main-content,
body.page-template-page-services-index main#main-content,
body.page-template-templatespage-service-detail-php main#main-content,
body.page-template-templatespage-services-index-php main#main-content {
  /* Kill the 12-col CSS grid */
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  /* Kill container max-width + padding */
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Kill wd-content-layout padding-block */
  padding-block: 0 !important;
  /* Ensure no overflow clipping of our full-bleed sections */
  overflow: visible !important;
}

/* ── Also reset the outer wd-page-content wrapper ───────────────────── */
body.page-template-page-service-detail .wd-page-content,
body.page-template-page-services-index .wd-page-content,
body.page-template-templatespage-service-detail-php .wd-page-content,
body.page-template-templatespage-services-index-php .wd-page-content {
  /* Woodmart sets background-color:#f6f6f6 on .page .wd-page-content —
     our dark navy hero needs transparent bg underneath */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}

/* ── Ensure our sections fill the full viewport width ───────────────── */
body.page-template-page-service-detail .sp-hero,
body.page-template-page-service-detail .sp-section,
body.page-template-page-service-detail .sp-cta-band,
body.page-template-page-service-detail .sp-breadcrumb,
body.page-template-page-services-index .sp-hero,
body.page-template-page-services-index .sp-section,
body.page-template-page-services-index .sp-cta-band,
body.page-template-page-services-index .sp-breadcrumb,
body.page-template-templatespage-service-detail-php .sp-hero,
body.page-template-templatespage-service-detail-php .sp-section,
body.page-template-templatespage-service-detail-php .sp-cta-band,
body.page-template-templatespage-service-detail-php .sp-breadcrumb,
body.page-template-templatespage-services-index-php .sp-hero,
body.page-template-templatespage-services-index-php .sp-section,
body.page-template-templatespage-services-index-php .sp-cta-band,
body.page-template-templatespage-services-index-php .sp-breadcrumb {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Guarantee sections are blocks, never grid/flex children */
  display: block !important;
  float: none !important;
  position: relative !important;
  /* Prevent any inherited grid column spans */
  grid-column: unset !important;
  grid-row: unset !important;
}

/* ── Fix sp-hero specific: restore its internal position:relative ────── */
body.page-template-page-service-detail .sp-hero,
body.page-template-page-services-index .sp-hero,
body.page-template-templatespage-service-detail-php .sp-hero,
body.page-template-templatespage-services-index-php .sp-hero {
  overflow: hidden !important; /* keep bg pattern clipped inside hero */
}

/* ── Fix sp-wrap: ensure inner container stays centred ──────────────── */
.sp-wrap {
  max-width: var(--container) !important;
  margin-left:  auto !important;
  margin-right: auto !important;
  padding-left:  24px !important;
  padding-right: 24px !important;
  box-sizing:    border-box !important;
  width: 100% !important;
}

/* ── Box-sizing safety net for all sp- elements ─────────────────────── */
.sp-hero, .sp-hero *,
.sp-section, .sp-section *,
.sp-cta-band, .sp-cta-band *,
.sp-breadcrumb, .sp-breadcrumb * {
  box-sizing: border-box;
}

/* ── Fix sp-subs-grid: ensure grid resets properly ──────────────────── */
.sp-subs-grid,
.sp-process-row,
.sp-related-grid,
.sp-index-grid,
.sp-quote-grid,
.sp-faq-grid,
.sp-intro-grid,
.sp-hero__inner,
.sp-hero__stats {
  /* These are our grids — ensure they're not display:block from the parent reset */
  display: grid !important;
}
.sp-subs-grid     { grid-template-columns: repeat(4,1fr) !important; }
.sp-process-row   { grid-template-columns: repeat(5,1fr) !important; }
.sp-related-grid  { grid-template-columns: repeat(4,1fr) !important; }
.sp-index-grid    { grid-template-columns: repeat(4,1fr) !important; }
.sp-quote-grid    { grid-template-columns: 1fr 1.5fr !important; }
.sp-faq-grid      { grid-template-columns: 1fr 1.6fr !important; }
.sp-intro-grid    { grid-template-columns: 1fr 1.6fr !important; }
.sp-hero__inner   { grid-template-columns: 1.2fr 1fr !important; }
.sp-hero__stats   { display: flex !important; }

/* Re-apply responsive breakpoints for the grids (after the !important resets) */
@media (max-width: 1180px) {
  .sp-subs-grid    { grid-template-columns: repeat(3,1fr) !important; }
  .sp-related-grid { grid-template-columns: repeat(2,1fr) !important; }
  .sp-index-grid   { grid-template-columns: repeat(2,1fr) !important; }
  .sp-process-row  { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 960px) {
  .sp-subs-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .sp-hero__inner  { grid-template-columns: 1fr !important; }
  .sp-quote-grid   { grid-template-columns: 1fr !important; }
  .sp-faq-grid     { grid-template-columns: 1fr !important; }
  .sp-intro-grid   { grid-template-columns: 1fr !important; }
  .sp-process-row  { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 640px) {
  .sp-subs-grid    { grid-template-columns: 1fr !important; }
  .sp-related-grid { grid-template-columns: 1fr !important; }
  .sp-index-grid   { grid-template-columns: 1fr !important; }
  .sp-process-row  { grid-template-columns: 1fr !important; }
}

/* ── Flex elements that need display:flex restored ───────────────────── */
.sp-hero__cta,
.sp-hero__eyebrow,
.sp-sub__icon,
.sp-step__icon,
.sp-qi,
.sp-qi__icon,
.sp-cta-band__btns,
.sp-section-head,
.sp-faq-item summary,
.sp-intro-bullets li::before,
.sp-sub__chips,
.sp-related-card__icon {
  display: flex !important;
}

/* ── Correct the sp-cta-band centre alignment ────────────────────────── */
.sp-cta-band {
  text-align: center !important;
}
.sp-cta-band .sp-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── Woodmart sets background on .page body — override for service pages */
body.page-template-page-service-detail,
body.page-template-page-services-index,
body.page-template-templatespage-service-detail-php,
body.page-template-templatespage-services-index-php {
  background: #fff !important;
}

/* =====================================================================
   FOOTER PROTECTION — ensure child theme CSS never bleeds into footer
   ===================================================================== */

/* Reset any accidental inheritance from our custom CSS into Woodmart's footer */
.wd-footer,
.wd-footer * {
  box-sizing: border-box; /* consistent sizing — same value WoodMart expects */
}

/* Woodmart footer Elementor container — keep standard block/flex flow */
.wd-footer .e-con,
.wd-footer .e-con-inner,
.wd-footer .elementor-widget-container {
  /* these must NOT be overridden by our sp-* display:grid rules */
  /* Elementor sets display via CSS vars — protect those */
  max-width: unset; /* don't let our .container rule cap footer width */
}

/* Protect footer list links from any global anchor resets */
.wd-footer .wd-extra-menu-list a,
.wd-footer .wd-extra-menu-list li {
  list-style: none;
}

/* Ensure footer background-color is not wiped by our service-page bg:transparent rule */
.wd-footer {
  position: relative; /* keep stacking context */
}

/* =====================================================================
   FOOTER — always show toggle content on all breakpoints
   Fixes accordion-only view on mobile/tablet; no WoodMart logic changed
   ===================================================================== */
.wd-footer .elementor-element .wd-el-toggle .wd-el-toggle-content {
  display: block !important;
}
.wd-footer .elementor-element .wd-el-toggle .wd-el-toggle-content-inner {
  opacity: 1 !important;
}
.wd-footer .wd-el-toggle-icon {
  display: none !important;
}
.wd-footer .wd-el-toggle-head {
  pointer-events: none !important;
  cursor: default !important;
}

/* =====================================================================
   ALL-CATEGORIES SIDEBAR — hidden on all breakpoints (not deleted)
   ===================================================================== */
.wd-sticky-nav {
  display: none !important;
}

/* =====================================================================
   SHARK CUSTOM 5-COLUMN FOOTER
   ===================================================================== */
.shark-custom-footer {
  background-color: #ffffff !important;
  color: #242424 !important;
  padding-top: 60px !important;
  border-top: 1px solid #ECECEC !important;
  font-family: 'Poppins', sans-serif !important;
}
.shark-footer-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.shark-footer-row {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr !important;
  gap: 40px !important;
  align-items: start !important;
}
.shark-footer-col {
  display: flex !important;
  flex-direction: column !important;
}
.shark-col-info {
  padding-right: 20px !important;
}
.shark-footer-logo {
  margin-bottom: 20px !important;
}
.shark-logo-img {
  max-width: 140px !important;
  height: auto !important;
}
.shark-footer-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #666666 !important;
  margin-bottom: 25px !important;
}
.shark-newsletter-box {
  margin-bottom: 25px !important;
}
.shark-newsletter-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #242424 !important;
  margin-bottom: 10px !important;
  text-transform: none !important;
}
.shark-newsletter-form {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid #ECECEC !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  max-width: 320px !important;
  background: #ffffff !important;
}
.shark-newsletter-input {
  flex: 1 !important;
  border: 0 !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  outline: none !important;
  background: transparent !important;
  height: 44px !important;
  color: #242424 !important;
}
.shark-newsletter-btn {
  background-color: #4f8fec !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 24px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  height: 44px !important;
  transition: background-color 0.2s !important;
  border-radius: 0 30px 30px 0 !important;
}
.shark-newsletter-btn:hover {
  background-color: #3f7bec !important;
}
/* Custom footer CF7 newsletter styling */
.shark-newsletter-box .wpcf7 {
  max-width: 320px !important;
}
.shark-newsletter-box form.wpcf7-form {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid #ECECEC !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.shark-newsletter-box .wpcf7-form-control-wrap {
  flex: 1 !important;
  display: block !important;
}
.shark-newsletter-box input[type="email"] {
  width: 100% !important;
  border: 0 !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  outline: none !important;
  background: transparent !important;
  height: 44px !important;
  color: #242424 !important;
}
.shark-newsletter-box input[type="submit"] {
  background-color: #4f8fec !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 24px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  height: 44px !important;
  transition: background-color 0.2s !important;
  border-radius: 0 30px 30px 0 !important;
  margin: 0 !important;
}
.shark-newsletter-box input[type="submit"]:hover {
  background-color: #3f7bec !important;
}
.shark-newsletter-box .wpcf7-response-output {
  margin: 10px 0 0 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border-width: 1px !important;
  color: #ffffff !important;
  background: #1f8a5b !important;
  border-color: #1a764d !important;
}
.shark-newsletter-box .wpcf7-response-output.wpcf7-validation-errors {
  background: #e22d2d !important;
  border-color: #c42727 !important;
}
.shark-social-icons {
  display: flex !important;
  gap: 10px !important;
}
.shark-social-icons a.shark-social-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s, transform 0.2s !important;
  text-decoration: none !important;
  font-size: 16px !important;
}
.shark-social-icons a.shark-social-icon:hover {
  background-color: #4f8fec !important;
  transform: translateY(-2px) !important;
}

/* Always-on social icon styles to bypass Woodmart conditional CSS loading */
.shark-social-icons .wd-icon {
  display: inline-block !important;
}
.shark-social-icons .wd-icon:before {
  font-family: "woodmart-font" !important;
  font-style: normal !important;
  font-weight: normal !important;
  display: inline-block !important;
  text-decoration: inherit !important;
  text-align: center !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  content: var(--wd-social-icon, unset) !important;
}
.shark-social-icons .social-facebook { --wd-social-icon: "\f180" !important; }
.shark-social-icons .social-twitter { --wd-social-icon: "\f154" !important; }
.shark-social-icons .social-instagram { --wd-social-icon: "\f163" !important; }
.shark-social-icons .social-linkedin { --wd-social-icon: "\f157" !important; }
.shark-social-icons a.shark-social-icon span.wd-icon {
  font-size: 14px !important;
}

.shark-footer-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 22px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.shark-footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.shark-footer-list li {
  margin-bottom: 12px !important;
  padding-left: 0 !important;
}
.shark-footer-list li::before {
  display: none !important;
}
.shark-footer-list li a {
  font-size: 14px !important;
  color: #666666 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.shark-footer-list li a:hover {
  color: #4f8fec !important;
}

.shark-col-contact {
  padding-left: 10px !important;
}
.shark-contact-info {
  margin-bottom: 20px !important;
}
.shark-contact-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #999999 !important;
  letter-spacing: 1px !important;
  margin-bottom: 4px !important;
}
.shark-contact-value {
  font-size: 14px !important;
  color: #242424 !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}
.shark-contact-value a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.shark-contact-value a:hover {
  color: #4f8fec !important;
}
.shark-contact-cta {
  margin-top: 10px !important;
}
.shark-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  background-color: #4f8fec !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.2s, transform 0.15s !important;
}
.shark-contact-btn:hover {
  background-color: #3f7bec !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Copyright Bar */
.shark-copyrights-bar {
  border-top: 1px solid #ECECEC !important;
  background-color: #ffffff !important;
  padding: 25px 0 !important;
  margin-top: 50px !important;
}
.shark-copyrights-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.shark-copyrights-text p {
  font-size: 13.5px !important;
  color: #888888 !important;
  margin: 0 !important;
}
.shark-payment-icons {
  display: flex !important;
  gap: 8px !important;
}
.shark-payment-icons .payment-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #666666 !important;
  background: #f6f7fa !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .shark-footer-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
  .shark-col-info {
    grid-column: span 2 !important;
    padding-right: 0 !important;
    margin-bottom: 15px !important;
  }
}
@media (max-width: 640px) {
  .shark-footer-row {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  .shark-col-info {
    grid-column: span 1 !important;
  }
  .shark-copyrights-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* Hide WooCommerce/Woodmart attribute labels on top of product images */
.product-labels .attribute-label {
  display: none !important;
}