/* ============================================================
   KG's Baits — brand layer over Bootstrap 5.3
   Palette and type follow the approved homepage design.
   ============================================================ */

:root {
  --kg-navy-deep:  #0E1C30;
  --kg-navy-dark:  #071324;
  --kg-navy:       #21365F;
  --kg-teal:       #1B8EA3;
  --kg-teal-bright:#23A5BC;
  --kg-cyan:       #7FD4E3;
  --kg-off-white:  #DCEEF4;
  --kg-tint:       #EEF3F6;
  --kg-line:       #E4EBF0;
  --kg-body:       #3E5468;
  --kg-muted:      #5E7286;

  /* Bootstrap overrides */
  --bs-primary:            #1B8EA3;
  --bs-primary-rgb:        27, 142, 163;
  --bs-body-color:         #0E1C30;
  --bs-body-font-family:   Karla, "Helvetica Neue", Helvetica, sans-serif;
  --bs-body-font-size:     1rem;
  --bs-border-color:       #E4EBF0;
  --bs-border-radius:      0;
  --bs-border-radius-sm:   0;
  --bs-border-radius-lg:   0;
  --bs-link-color:         #1B8EA3;
  --bs-link-hover-color:   #0E1C30;
}

body { font-family: var(--bs-body-font-family); color: var(--bs-body-color); }

/* ---------- type ---------- */

h1, h2, h3, h4, h5, h6, .osw {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.kau { font-family: "Kaushan Script", "Brush Script MT", cursive; text-transform: none; }

.eyebrow {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kg-teal);
}
.label-sm {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.text-muted-kg { color: var(--kg-muted) !important; }
.text-body-kg  { color: var(--kg-body) !important; }

/* ---------- buttons ---------- */

.btn { border-radius: 0; font-family: Oswald, "Arial Narrow", sans-serif;
       letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 2.1rem; font-size: .9375rem; }

.btn-kg-navy  { background: var(--kg-navy-deep); color: #fff; border: 1px solid var(--kg-navy-deep); }
.btn-kg-navy:hover, .btn-kg-navy:focus  { background: var(--kg-navy); color: #fff; border-color: var(--kg-navy); }

.btn-kg-teal  { background: var(--kg-teal); color: #fff; border: 1px solid var(--kg-teal); }
.btn-kg-teal:hover, .btn-kg-teal:focus  { background: #16788A; color: #fff; border-color: #16788A; }

.btn-kg-outline { background: transparent; color: var(--kg-navy-deep); border: 1px solid #C3D2DC; }
.btn-kg-outline:hover { background: var(--kg-navy-deep); color: #fff; border-color: var(--kg-navy-deep); }

.btn-kg-ghost { background: transparent; color: var(--kg-off-white); border: 1.5px solid rgba(220,238,244,.35); }
.btn-kg-ghost:hover { background: rgba(220,238,244,.12); color: #fff; }

/* ---------- header ---------- */

.announce { background: var(--kg-navy-deep); color: var(--kg-off-white); }
.announce .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--kg-teal); display: inline-block; }

.kg-header { background: #fff; border-bottom: 1px solid var(--kg-line); }
.kg-logo   { display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none; }
.kg-logo .mark { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 700; font-size: 2rem;
                 color: var(--kg-navy); text-transform: uppercase; line-height: 1; }
.kg-logo .script { font-family: "Kaushan Script", "Brush Script MT", cursive; font-size: 1.9rem;
                   color: var(--kg-teal); line-height: 1; }
.kg-logo.on-dark .mark { color: #fff; }
.kg-logo.on-dark .script { color: var(--kg-teal-bright); }

.kg-nav .nav-link {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: .875rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kg-navy-deep); padding: .5rem .9rem;
}
.kg-nav .nav-link:hover { color: var(--kg-teal); }
.kg-nav .nav-link.active { color: var(--kg-teal); }

.cart-pill { display: inline-flex; align-items: center; gap: .45rem; color: var(--kg-navy-deep); text-decoration: none; }
.cart-pill .count { font-family: Oswald, sans-serif; font-weight: 600; color: var(--kg-teal); }

/* ---------- hero ---------- */

.kg-hero { position: relative; background: var(--kg-navy-deep); overflow: hidden; color: #fff; }
.kg-hero .waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.kg-hero .inner { position: relative; z-index: 1; }
.kg-hero h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: .98; }
.kg-hero .lede { color: #C6D6E0; font-size: 1.125rem; line-height: 1.6; max-width: 30rem; }
.hero-chip { background: rgba(220,238,244,.06); border: 1px solid rgba(127,212,227,.22); }
.hero-chip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Category tile photo, framed and tilted like a print on the bench. */
.cat-photo {
  top: 1.5rem; right: 1.5rem; width: 58%;
  border: 5px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transform: rotate(4deg);
}
.cat-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- product cards ---------- */

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-media {
  position: relative; background: var(--kg-tint); border: 1px solid var(--kg-line);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: 1.5rem; overflow: hidden;
}
.product-media img { max-height: 100%; object-fit: contain; }
.product-badge {
  position: absolute; top: .75rem; left: .75rem; padding: .3rem .6rem;
  background: var(--kg-teal); color: #fff;
  font-family: Oswald, sans-serif; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
.product-badge.navy { background: var(--kg-navy); }
.product-title { font-size: 1.1875rem; font-weight: 600; color: var(--kg-navy-deep); }
.price { font-family: Karla, sans-serif; font-size: 1.0625rem; font-weight: 700; }

.swatch-row { display: flex; gap: .375rem; flex-wrap: wrap; }
.swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #C9D6DE; display: inline-block; }
.swatch.square { border-radius: 0; }

/* ---------- color chart ---------- */

.color-tile { display: flex; flex-direction: column; gap: .55rem; }
.color-tile .chip { height: 78px; border: 1px solid rgba(14,28,48,.10); }
.color-tile .name { font-size: .8125rem; color: var(--kg-body); }

/* ---------- color picker (product page) ---------- */

.color-option { position: relative; }
.color-option input { position: absolute; opacity: 0; pointer-events: none; }
.color-option .dot {
  display: block; width: 40px; height: 40px; border: 1px solid #C9D6DE;
  cursor: pointer; outline-offset: 3px;
}
.color-option input:checked + .dot { outline: 2px solid var(--kg-navy-deep); }
.color-option input:focus-visible + .dot { outline: 2px solid var(--kg-teal); }
.color-option.sold-out .dot { opacity: .3; cursor: not-allowed; }
.color-option.sold-out .dot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 46%, #9AA9B5 46%, #9AA9B5 54%, transparent 54%);
}

/* ---------- bands ---------- */

.band-tint  { background: var(--kg-tint); }
.band-navy  { background: var(--kg-navy-deep); color: #fff; }
.band-navy .lede { color: #A9BECE; }
.photo-slot {
  background: #D4E1E9; border: 1px dashed #9FB6C4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; color: #6D8698; min-height: 320px;
}

/* ---------- footer ---------- */

.kg-footer { background: var(--kg-navy-dark); color: #A9BECE; }
.kg-footer a { color: #A9BECE; text-decoration: none; }
.kg-footer a:hover { color: #fff; }
.kg-footer .col-title { color: var(--kg-teal-bright); font-family: Oswald, sans-serif;
                        font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.kg-footer .contact-line { color: var(--kg-off-white); }
.kg-footer .rule { border-top: 1px solid rgba(220,238,244,.12); }

/* ---------- forms ---------- */

.form-control, .form-select { border-radius: 0; border-color: #C3D2DC; padding: .7rem .9rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--kg-teal); box-shadow: 0 0 0 .2rem rgba(27,142,163,.15);
}
.form-label { font-family: Oswald, sans-serif; font-size: .8125rem; letter-spacing: .1em;
              text-transform: uppercase; font-weight: 500; color: var(--kg-navy-deep); }

/* ---------- tables / admin ---------- */

.table > :not(caption) > * > * { padding: .8rem .75rem; }
.admin-shell { background: var(--kg-tint); min-height: 100vh; }
.admin-nav { background: var(--kg-navy-deep); }
.admin-nav a { color: #A9BECE; text-decoration: none; font-family: Oswald, sans-serif;
               letter-spacing: .1em; text-transform: uppercase; font-size: .8125rem; }
.admin-nav a:hover, .admin-nav a.active { color: #fff; }
.card { border-radius: 0; border-color: var(--kg-line); }

.status-pill { font-family: Oswald, sans-serif; font-size: .75rem; letter-spacing: .1em;
               text-transform: uppercase; padding: .25rem .6rem; display: inline-block; }
.status-pending   { background: #FFF3CD; color: #6B5200; }
.status-paid      { background: #D6F0E4; color: #0B5B3A; }
.status-shipped   { background: var(--kg-off-white); color: #14586A; }
.status-cancelled { background: #F3D6D6; color: #7A2020; }
.status-refunded  { background: #E7E2F0; color: #4A2340; }

/* ---------- utility ---------- */

.hr-line { border-top: 1px solid var(--kg-line); }
.link-teal { color: var(--kg-teal); font-family: Oswald, sans-serif; letter-spacing: .12em;
             text-transform: uppercase; font-weight: 600; font-size: .875rem; text-decoration: none; }
.link-teal:hover { color: var(--kg-navy-deep); }
.sticky-rail { position: sticky; top: 1.5rem; }

@media (max-width: 991.98px) {
  .kg-hero h1 { font-size: 2.6rem; }
  .sticky-rail { position: static; }
}