/* ==========================================================================
   Kí Ni So — brand theming pass
   ==========================================================================
   This file is the theme's own designated customization hook (loaded last,
   after main.css and color.php — see layouts/app.blade.php). Everything
   below works by overriding the theme's existing HSL token system rather
   than fighting it with !important overrides scattered everywhere.

   Palette source: Kí Ni So Brand Guide, Issue 01.
   HSL values computed directly from the guide's hex references — see
   comments per token. Do not hand-tune these without recomputing from the
   hex, or they'll drift from the guide.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600&display=swap');

:root {
  /* Display / heading typeface — "heavy condensed grotesque" per the guide.
     Archivo isn't condensed by default; the weight + tracking rules below
     compensate. If a true condensed cut is licensed later (Archivo
     Condensed, Founders Grotesk Condensed), swap it in here only. */
  --heading-font: "Archivo", Arial, sans-serif;
  --body-font: "Source Serif 4", Georgia, serif;

  /* Base accent — Kakanfo Red #8A1626. This SHOULD also be set as
     base_color in the general_settings admin panel (or the DB default —
     see database.sql) so color.php generates the same value; this
     override just guarantees it even if that setting drifts. */
  --base-h: 352;
  --base-s: 72%;
  --base-l: 31%;

  /* The theme's separate "--accent" token (decorative, unrelated to
     base_color) defaults to a stray purple. The brand guide is explicit
     that Kakanfo Red is the ONLY accent color and appears once per
     layout — so --accent is pinned to match --base rather than left to
     introduce a second, off-brand accent color anywhere it's used. */
  --accent-h: 352;
  --accent-s: 72%;
  --accent-l: 31%;

  /* Near-white base — Efun #FBFBF9, not a stark clinical white. */
  --light-h: 60;
  --light-s: 20%;
  --light-l: 98%;

  /* Near-black — Aṣọ Dúdú #14100D, a warm near-black rather than true
     black. Used for dark surfaces (--dark-*) AND for --black, so nothing
     on the site falls back to a colder pure #000. */
  --dark-h: 26;
  --dark-s: 21%;
  --dark-l: 6%;
  --black-h: 26;
  --black-s: 21%;
  --black-l: 6%;

  /* Heading text color — same Aṣọ Dúdú near-black. */
  --heading-h: 26;
  --heading-s: 21%;
  --heading-l: 6%;

  /* Body text color — Cocoa Bean #3A2317, which the brand guide specifies
     precisely as "archive-register body text on light grounds." This is
     not an arbitrary substitute; it's the color the guide names for this
     exact use. */
  --body-h: 21;
  --body-s: 43%;
  --body-l: 16%;
}

/* Heading weight/tracking — the guide calls for tight, heavy display type
   (700–900, tracked −2% to −3%). Swapping font-family alone keeps
   whatever weight the theme's original CSS specified per element, which
   undershoots the brand's actual voice, so weight/tracking are bumped
   globally here rather than hunting down every heading rule in main.css. */
h1, h2, h3, h4, h5, h6,
.section-title, .section__title, .title {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Buttons and nav labels are part of the display register too. */
.btn, .btn--base, button, .nav-link, .site-menu a {
  font-weight: 700;
}

/* Kakanfo Red is meant to be a single deliberate moment per layout, not a
   wash across every hover/border state the default theme applies it to.
   This does not remove the color — that's what base_color already
   handles correctly throughout main.css via hsl(var(--base)) — it only
   stops decorative low-contrast tinted borders/backgrounds (the
   --base-100 through --base-400 "light tint" steps) from turning into a
   diffuse pink/red wash across cards and inputs, which reads as
   "colorful" rather than the guide's restrained, one-accent standard. */
:root {
  --base-100: var(--light-h) var(--light-s) calc(var(--light-l) - 3%);
  --base-200: var(--light-h) var(--light-s) calc(var(--light-l) - 5%);
  --base-300: var(--light-h) var(--light-s) calc(var(--light-l) - 6%);
  --base-400: var(--light-h) var(--light-s) calc(var(--light-l) - 8%);
}

/* ==========================================================================
   Ìtàn panel — the product page's story section
   ========================================================================== */
.itan-panel-wrap {
  margin-top: 50px;
  border: 1px solid hsla(var(--dark), 0.12);
  background: hsl(var(--light-2));
}

.itan-panel-head {
  padding: 40px 40px 0;
  text-align: center;
}

.itan-place-eyebrow {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--base));
}

.itan-panel-title {
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: 10px;
  color: hsl(var(--heading-color, var(--dark)));
}

.itan-panel-photo {
  margin: 28px 40px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.itan-panel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itan-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  padding: 34px 40px 0;
}

@media (max-width: 900px) {
  .itan-facts-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .itan-facts-grid { grid-template-columns: 1fr; }
  .itan-panel-head, .itan-panel-photo, .itan-facts-grid, .itan-panel-foot { margin-left: 20px; margin-right: 20px; padding-left: 0; padding-right: 0; }
}

.itan-fact-num {
  font-family: var(--heading-font);
  font-weight: 900;
  font-size: 0.8rem;
  color: hsl(var(--base));
  display: block;
}

.itan-fact h4 {
  font-family: var(--heading-font);
  font-weight: 700 !important;
  font-size: 0.92rem;
  margin: 6px 0 8px;
}

.itan-fact-body {
  font-family: var(--body-font);
  font-size: 0.9rem;
  line-height: 1.6;
  color: hsl(var(--body-color));
}

.itan-panel-foot {
  text-align: center;
  padding: 34px 40px 40px;
  border-top: 1px solid hsla(var(--dark), 0.1);
  margin-top: 34px;
}

.itan-printed-tag {
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.itan-seal {
  font-family: var(--body-font);
  font-style: italic;
  opacity: 0.65;
  margin-top: 8px;
}

.itan-source-note {
  text-align: center;
  font-family: var(--body-font);
  font-size: 0.78rem;
  opacity: 0.55;
  padding: 16px 20px 0;
  max-width: 62ch;
  margin: 0 auto;
}

/* ==========================================================================
   Shop / product grid pass
   ========================================================================== */

/* Neutral border token defaulted to a cold flat gray (0 0% 90%), unrelated
   to the rest of the palette. Warmed slightly to sit with Aṣọ Dúdú/Efun
   rather than clash against them. */
:root {
  --border: 26 10% 88%;
}

/* The brand's whole visual language is squared-off and architectural
   ("museum standards," per the guide) — rounded 5px corners read as a
   generic e-commerce default, not a deliberate choice, so corners are
   flattened across cards, buttons, and thumbnails. */
.product-card,
.product-card .product-thumb,
.btn,
.form-control,
.widget,
input,
select,
textarea {
  border-radius: 2px !important;
}

/* Default hover zoom (scale 1.2) is a lot of motion for a brand whose own
   guide calls for restraint over energy. Toned down to a small, confident
   zoom instead of a jump. */
.product-card:hover img {
  transform: scale(1.04);
}

.product-card .title a {
  font-family: var(--heading-font);
  font-weight: 700 !important;
}

.product-card .single_content p {
  font-family: var(--body-font);
  opacity: 0.7;
}

.category-sidebar .widget .title {
  font-family: var(--heading-font);
  font-weight: 700 !important;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ==========================================================================
   Homepage brand sections
   ========================================================================== */

.kns-eyebrow {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--base));
}

.kns-eyebrow--light {
  color: hsl(var(--light-3));
}

.kns-sub {
  font-family: var(--body-font);
  opacity: 0.7;
  margin-top: 8px;
  max-width: 52ch;
}

.kns-section-head {
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid hsla(var(--dark), 0.1);
}

/* --- Roof band ---
   Split layout: real video on one side, text on its own solid dark
   panel on the other — same pattern as the City of Icons section below
   it. This guarantees the headline is always legible regardless of
   what's happening in the footage, rather than fighting a scrim
   against unpredictable brightness/detail in a full-bleed background
   video (a bright sky and a white t-shirt in the source footage made
   the text-over-photo version genuinely illegible in practice). */
.kns-roof-band {
  overflow: hidden;
  margin: 70px 0;
}

.kns-roof-video-col {
  position: relative;
  min-height: 320px;
  background: hsl(var(--dark));
}

.kns-roof-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.kns-roof-text-col {
  background: hsl(var(--dark));
  display: flex;
  align-items: center;
  padding: 50px;
}

@media (max-width: 991px) {
  .kns-roof-video-col { min-height: 260px; }
  .kns-roof-text-col { padding: 40px 30px; }
}

.kns-roof-content {
  text-align: left;
}

.kns-roof-content h2 {
  color: hsl(var(--light));
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 20ch;
  margin: 14px 0 0;
  line-height: 1.2;
}

/* --- City of Icons --- */
.kns-icons-section {
  padding: 60px 0;
}

/* --- City of Icons portrait slideshow --- */
.kns-icons-slideshow {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kns-icons-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.kns-icons-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.kns-icons-slide img {
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid hsl(var(--base));
}

.kns-icons-slide-name {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--dark));
  opacity: 0.75;
}

/* Clicking a name in the list on the right jumps the slideshow to that
   person — the active one is bolded and picks up the accent colour so
   it's clear which portrait is currently showing. */
.kns-icon-person {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease;
  padding: 4px 0;
}

.kns-icon-person.active {
  opacity: 1;
}

.kns-icon-person.active h5 {
  color: hsl(var(--base));
}

.kns-icons-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .kns-icons-list { grid-template-columns: 1fr; }
}

.kns-icon-person h5 {
  font-family: var(--heading-font);
  font-weight: 700 !important;
  font-size: 0.92rem;
  margin: 0;
}

.kns-role {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--base));
  display: block;
  margin-top: 3px;
}

/* --- Story Archive teaser --- */
.kns-archive-section {
  padding: 60px 0;
}

.kns-archive-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: hsla(var(--dark), 0.1);
  border: 1px solid hsla(var(--dark), 0.1);
}

@media (max-width: 760px) {
  .kns-archive-strip { grid-template-columns: 1fr; }
}

.kns-archive-item {
  background: hsl(var(--light));
  padding: 30px 26px;
}

.kns-place-tag {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--base));
}

.kns-archive-item h4 {
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: 1.15rem;
  margin-top: 8px;
}

.kns-archive-item p {
  font-family: var(--body-font);
  font-size: 0.88rem;
  opacity: 0.72;
  margin-top: 8px;
}

.kns-archive-note {
  font-family: var(--body-font);
  font-size: 0.78rem;
  opacity: 0.5;
  margin-top: 18px;
  text-align: center;
}

/* --- Aṣọ block ---
   Split layout: a woven-strip texture panel on one side (abstract
   tonal-indigo strips, standing in for real Aṣọ product photography,
   which doesn't exist yet — not a fake product shot, an honest textile
   pattern illustrating "the cloth is the story" literally) and the
   copy/notify-form on the other, on solid Ọjẹ Indigo. Same split
   pattern as the roof band and City of Icons sections, for consistency. */
.kns-aso-block {
  background: hsl(220 39% 19%); /* Ọjẹ Indigo — deliberately not tied to
                                   the base/dark tokens, since this is the
                                   one place in the theme the guide
                                   reserves this specific color for. */
  overflow: hidden;
}

.kns-aso-weave-col {
  min-height: 340px;
}

@media (max-width: 991px) {
  .kns-aso-weave-col { min-height: 220px; }
}

.kns-aso-weave {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
}

/* Eight vertical strips, alternating widths and tonal variations of the
   same indigo hue — this is what aso-oke strip-cloth actually looks
   like structurally (narrow hand-woven strips sewn edge to edge), not
   a decorative pattern invented for the sake of having one. */
.kns-aso-weave span {
  height: 100%;
}
.kns-aso-weave span:nth-child(1) { flex: 1.4; background: hsl(220 39% 14%); }
.kns-aso-weave span:nth-child(2) { flex: 0.7; background: hsl(220 35% 24%); }
.kns-aso-weave span:nth-child(3) { flex: 1.1; background: hsl(220 42% 11%); }
.kns-aso-weave span:nth-child(4) { flex: 0.5; background: hsl(215 30% 32%); }
.kns-aso-weave span:nth-child(5) { flex: 1.6; background: hsl(220 39% 17%); }
.kns-aso-weave span:nth-child(6) { flex: 0.8; background: hsl(220 45% 9%); }
.kns-aso-weave span:nth-child(7) { flex: 1.2; background: hsl(218 32% 27%); }
.kns-aso-weave span:nth-child(8) { flex: 0.9; background: hsl(220 39% 14%); }

/* A faint horizontal grain crossing the vertical strips, suggesting
   woven fabric texture rather than flat printed bars. */
.kns-aso-weave::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0.08) 0px,
    hsla(0, 0%, 0%, 0.08) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}

.kns-aso-text-col {
  display: flex;
  align-items: center;
  padding: 60px 50px;
}

@media (max-width: 991px) {
  .kns-aso-text-col { padding: 45px 30px; }
}

/* main.css sets color directly on all headings site-wide (h1..h6), which
   overrides this block's own inherited light text color regardless of
   what's set above — a direct declaration always wins over inheritance.
   Needs its own explicit override here, not just the parent's color. */
.kns-aso-block h2 {
  color: hsl(var(--light));
}

.kns-aso-copy {
  font-family: var(--body-font);
  color: hsl(var(--light));
  max-width: 48ch;
  margin: 18px 0 0;
  opacity: 0.8;
}

.kns-dev-note {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--heading-font);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--light));
  border: 1px dashed hsla(var(--light), 0.4);
  padding: 8px 14px;
  opacity: 0.75;
}

/* ==========================================================================
   Homepage rebuild — hero, announcement bar, generic section shell, testimonials
   ========================================================================== */

.kns-announce {
  background: hsl(var(--dark));
  color: hsl(var(--light));
  font-family: var(--heading-font);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 16px;
  overflow: hidden;
}

.kns-announce-track span {
  margin: 0 18px;
}

.kns-section {
  padding: 64px 0;
}

.kns-section-head {
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid hsla(var(--dark), 0.1);
}

.kns-section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.kns-empty-state {
  font-family: var(--body-font);
  opacity: 0.6;
  padding: 40px 0;
}

.kns-empty-state a {
  color: hsl(var(--base));
  text-decoration: underline;
  margin-left: 6px;
}

/* --- Hero --- */
.kns-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: hsl(var(--dark));
}

.kns-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  opacity: 0.9;
}

.kns-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsla(var(--dark), 0.05) 0%, hsla(var(--dark), 0.2) 40%, hsla(var(--dark), 0.88) 100%);
}

.kns-hero-q {
  position: absolute;
  right: -30px;
  top: -50px;
  font-family: var(--heading-font);
  font-weight: 900;
  font-size: min(44vw, 480px);
  line-height: 1;
  color: hsla(var(--light), 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.kns-hero-content {
  position: relative;
  z-index: 2;
  padding: 50px 24px 60px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  color: hsl(var(--light));
}

.kns-hero-content h1 {
  font-family: var(--heading-font);
  font-weight: 900 !important;
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: hsl(var(--light));
  max-width: 14ch;
  line-height: 0.98;
}

.kns-hero-lede {
  font-family: var(--body-font);
  font-size: 1.02rem;
  max-width: 46ch;
  color: hsl(var(--light-3));
  margin: 18px 0 28px;
}

.kns-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.kns-btn-accent,
.kns-btn-outline,
.kns-btn-outline-light {
  display: inline-flex;
  align-items: center;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.kns-btn-accent {
  background: hsl(var(--base));
  border: 1.5px solid hsl(var(--base));
  color: hsl(var(--light)) !important;
}

.kns-btn-accent:hover {
  opacity: 0.88;
  color: hsl(var(--light)) !important;
}

.kns-btn-outline {
  background: transparent;
  border: 1.5px solid hsl(var(--dark));
  color: hsl(var(--dark)) !important;
}

.kns-btn-outline:hover {
  background: hsl(var(--dark));
  color: hsl(var(--light)) !important;
}

.kns-btn-outline-light {
  background: transparent;
  border: 1.5px solid hsl(var(--light));
  color: hsl(var(--light)) !important;
}

.kns-btn-outline-light:hover {
  background: hsl(var(--light));
  color: hsl(var(--dark)) !important;
}

/* --- Testimonials --- */
.kns-testimonials {
  background: hsl(var(--light-2));
}

.kns-dev-flag {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--base));
  border: 1px dashed hsl(var(--base));
  padding: 6px 10px;
  margin-bottom: 18px;
}

.kns-t-card {
  height: 100%;
  background: hsl(var(--light));
  border: 1px solid hsla(var(--dark), 0.1);
  padding: 28px;
}

.kns-quote {
  font-family: var(--body-font);
  font-size: 0.96rem;
  line-height: 1.6;
}

.kns-who {
  margin-top: 14px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.6;
}

@media (max-width: 560px) {
  .kns-hero-content { padding: 40px 20px 50px; }
}

/* ==========================================================================
   Preloader background
   ========================================================================== */
/* .preloader's own background-color defaults to plain white
   (hsl(var(--white))) — completely separate from the preloader GIF file
   itself. The GIF is transparent now, so without this override the
   shirt would sit on a stark white box rather than the brand's dark
   ground. */
.preloader {
  background-color: hsl(var(--dark)) !important;
}

/* ==========================================================================
   Product Detail Page — reskin of the real gallery/buy-box markup
   ==========================================================================
   Every class below is the theme's real, working markup (product_images
   and quick_view partials) — nothing here touches structure, only look.
   The add-to-cart, variant-selection AJAX, and stock-checking JS
   (product_details.js) are untouched and still drive all of this.
   ========================================================================== */

.product-details-container {
  padding-top: 10px;
}

/* --- Gallery --- */
.product-gallery {
  border: 1px solid hsla(var(--dark), 0.1);
  background: hsl(var(--light-2));
}

.product-gallery #xzoom-magnific {
  width: 100%;
  height: auto;
  display: block;
}

.xzoom-thumbs {
  margin-top: 14px;
}

.quick-view-slider .media-item-nav {
  display: block;
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease;
}

.quick-view-slider .media-item-nav img {
  width: 100%;
  height: auto;
  display: block;
}

.quick-view-slider .owl-item.current .media-item-nav,
.quick-view-slider .media-item-nav:hover {
  border-color: hsl(var(--dark));
}

/* --- Title / price / meta --- */
.product-details .product-title {
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

.product-details .product-price {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.3rem;
  color: hsl(var(--dark));
}

.product-details .product-summary {
  font-family: var(--body-font);
  opacity: 0.75;
  margin: 14px 0;
  max-width: 52ch;
  line-height: 1.6;
}

.product-details .product-types {
  font-family: var(--body-font);
  font-size: 0.88rem;
  gap: 4px;
  border-top: 1px solid hsla(var(--dark), 0.1);
  border-bottom: 1px solid hsla(var(--dark), 0.1);
  padding: 14px 0;
  margin: 14px 0;
}

.product-details-label {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Size / colour attribute selectors --- */
.attribute-value-wrapper {
  margin-bottom: 18px;
}

.attribute-name {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* Size buttons (text attribute) */
.product-size-area .attributeBtn {
  min-width: 46px;
  padding: 9px 8px;
  margin: 0 6px 6px 0;
  border: 1px solid hsla(var(--dark), 0.25);
  background: transparent;
  border-radius: 2px !important;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.82rem;
  color: hsl(var(--dark));
}

.product-size-area .attributeBtn.active {
  background: hsl(var(--dark));
  border-color: hsl(var(--dark));
  color: hsl(var(--light));
}

.product-size-area .attributeBtn.active .text-attribute {
  color: hsl(var(--light));
}

/* Colour swatches */
.product-color-area .attributeBtn {
  padding: 2px;
  margin: 0 8px 8px 0;
  border: 2px solid transparent;
  border-radius: 50% !important;
  background: none;
}

.product-color-area .attributeBtn.active {
  border-color: hsl(var(--base));
}

.color-attribute {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid hsla(var(--dark), 0.2);
}

/* --- Add to cart row --- */
.product-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 6px;
}

.product-add-to-cart .addToCart {
  flex: 1;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: hsl(var(--base));
  border: 1.5px solid hsl(var(--base));
  border-radius: 2px !important;
  color: hsl(var(--light)) !important;
  padding: 0 22px;
}

.product-add-to-cart .addToCart:hover {
  opacity: 0.88;
}

.product-wishlist {
  font-family: var(--body-font);
  font-size: 0.85rem;
}

.add-to-wishlist-btn {
  border: 1px solid hsla(var(--dark), 0.25);
  border-radius: 2px !important;
  background: transparent;
  padding: 8px 14px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.add-to-wishlist-btn.active {
  border-color: hsl(var(--base));
  color: hsl(var(--base));
}

/* --- Aṣọ block: notify-me form spacing --- */
.kns-aso-notify {
  max-width: 420px;
  margin: 30px 0 0;
}

@media (max-width: 991px) {
  .kns-aso-notify { margin: 30px auto 0; }
}

.kns-aso-notify .newsletter-widget-header {
  text-align: left;
}

@media (max-width: 991px) {
  .kns-aso-notify .newsletter-widget-header { text-align: center; }
}

.kns-aso-notify .newsletter-widget-header .title {
  font-family: var(--heading-font);
  font-weight: 700 !important;
  font-size: 0.85rem;
}

/* ==========================================================================
   Preloader — wordmark + loading bar
   ========================================================================== */
.kns-preload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* The preloader backdrop is near-black (set earlier in this file), so the
   text MUST be light — it was near-black before, i.e. invisible on its own
   background. Selector is .preloader .preloader-title.kns-preload-word so it
   outranks the theme's .preloader .preloader-title { color: black } rule.
   Also no opacity:0 base state: if the fade animation ever fails to run,
   the text should still be visible, not stuck invisible. */
.preloader .preloader-title.kns-preload-word {
  font-family: var(--heading-font);
  font-weight: 800 !important;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--light));
  margin-top: 0;
  animation: kns-preload-fade 0.6s ease both;
}

@keyframes kns-preload-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kns-preload-bar {
  width: 140px;
  height: 2px;
  background: hsla(var(--light), 0.2); /* light track: the backdrop is dark */
  overflow: hidden;
}

.kns-preload-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: hsl(var(--base));
  animation: kns-preload-fill 3.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  /* 3.8s matches main.js's minimum preloader display time exactly, so
     the bar finishes filling right as the page reveals rather than
     looking arbitrary or getting cut off early/late. If that timing
     value in main.js ever changes, this needs to change to match. */
}

@keyframes kns-preload-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader .preloader-title.kns-preload-word {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .kns-preload-bar-fill {
    animation: none;
    width: 100%;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */
.kns-about-body {
  font-family: var(--body-font);
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: 0.82;
  margin-bottom: 20px;
}

.kns-pillar {
  height: 100%;
  padding: 26px 22px;
  border: 1px solid hsla(var(--dark), 0.12);
  background: hsl(var(--light-2));
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.kns-pillar:hover {
  transform: translateY(-5px);
  border-color: hsl(var(--base));
  box-shadow: 0 10px 24px hsla(var(--dark), 0.1);
}

.kns-pillar-name {
  display: block;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.3rem;
  color: hsl(var(--base));
}

.kns-pillar-sub {
  display: block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 4px 0 14px;
}

.kns-pillar p {
  font-family: var(--body-font);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
}

/* ==========================================================================
   About page hero — dark text on a light backing layer
   ========================================================================== */
/* The About hero text is dark (Aṣọ Dúdú), so the layer behind it has to be
   LIGHT. The photo has both pale areas (sky, billboard) and dark ones
   (glass bands, cap), so dark text straight onto it would fail on the dark
   parts. This washes the left side toward off-white, strongest behind the
   headline and easing off to the right so the photo still shows. It also
   means any image uploaded via the admin About Page Images page stays
   readable, light or dark. */
.kns-hero--about::after {
  background:
    linear-gradient(90deg, hsla(var(--light), 0.94) 0%, hsla(var(--light), 0.8) 45%, hsla(var(--light), 0.15) 100%);
}

@media (max-width: 767px) {
  /* Text spans the full width on phones, so wash evenly. */
  .kns-hero--about::after {
    background: hsla(var(--light), 0.85);
  }
}

.kns-hero--about .kns-hero-content h1 {
  color: hsl(var(--dark));
}

.kns-hero--about .kns-hero-lede {
  color: hsl(var(--dark));
  opacity: 0.88;
}

/* ==========================================================================
   Checkout -> WhatsApp hand-off (Payment step + Order confirmation)
   ========================================================================== */
.kns-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  border: 1px solid #25D366;
  color: #fff !important;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 2px !important;
  padding: 0 22px;
}

.kns-wa-btn:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
  color: #fff !important;
}

.kns-wa-btn i {
  font-size: 1.25rem;
}

/* Explanation card that replaces the payment-gateway list */
.kns-wa-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid hsla(var(--dark), 0.12);
  background: hsl(var(--light-2));
}

.kns-wa-note-icon {
  font-size: 2.4rem;
  line-height: 1;
  color: #25D366;
}

.kns-wa-note-lead {
  font-family: var(--heading-font);
  font-weight: 700;
  margin: 0 0 6px;
}

.kns-wa-note-sub {
  font-family: var(--body-font);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
}

/* Confirmation page: the "one last step" block */
.kns-wa-handoff {
  margin: 0 0 24px;
}

.kns-wa-handoff-lead {
  font-family: var(--heading-font);
  font-weight: 700;
  margin: 0 0 14px;
}

.kns-wa-handoff-auto {
  font-family: var(--body-font);
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 12px 0 0;
}