/* ==========================================================================
   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;
}