/* ============================================================
   KORE Shop — additions on top of the ported base stylesheet.
   Only what the base design didn't already cover: the KORE.CO
   wordmark, the product source badges, and the footer.
   ============================================================ */

/* ── Brand lockup ──────────────────────────────────────────── */
.kore-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kore-logo {
  height: 26px;
  width: auto;
  display: block;
}
.kore-brand-suffix {
  color: var(--white);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.3px;
  opacity: 0.9;
}

/* ── Search: department scope + suggestions ────────────────────
   Amazon's pattern — scope selector welded to the left of the input,
   suggestions dropping directly beneath the whole bar. */
.search-scope {
  flex-shrink: 0;
  border: none;
  background: var(--gray-1);
  color: var(--text-light);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 0 10px;
  height: 44px;
  max-width: 130px;
  outline: none;
  cursor: pointer;
  border-right: 1px solid var(--gray-2);
}

.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 1200;
  max-height: 460px;
  overflow-y: auto;
}
.suggest-group {
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-1);
}
.suggest-group:last-child {
  border-bottom: none;
}
.suggest-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-4);
  padding: 6px 14px;
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.suggest-item:hover,
.suggest-item.active {
  background: var(--primary-light);
}
.suggest-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.suggest-item .suggest-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-item .suggest-price {
  font-weight: 700;
  white-space: nowrap;
}
.suggest-item mark {
  background: none;
  color: var(--primary);
  font-weight: 700;
  padding: 0;
}

/* ── Sticky header ─────────────────────────────────────────────
   The department strip travels with the header when the page scrolls,
   so it needs its own opaque background. Without one, its dark links
   scroll over the dark hero gradient and become unreadable. */
.site-header {
  background: var(--white);
}
.sub-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-2);
}

/* Lift the header off the content once it is actually stuck. */
.site-header.is-stuck {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.site-header.is-stuck .sub-nav {
  border-bottom-color: transparent;
}

/* ── Department strip ──────────────────────────────────────────── */
.subnav-dynamic {
  display: inline-flex;
  gap: 2px;
}
.sub-nav-inner {
  /* Fade the right edge so a horizontally scrollable strip reads as
     continuing rather than clipped. */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
@media (min-width: 992px) {
  .sub-nav-inner {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ── Slide-out category panel ──────────────────────────────────── */
.cat-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1300;
}
.cat-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--white);
  z-index: 1310;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}
.cat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--primary);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}
.cat-panel__close {
  background: none;
  color: var(--white);
  font-size: 16px;
}
.cat-panel__body {
  overflow-y: auto;
  padding: 8px 0;
}
.cat-panel__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--gray-1);
}
.cat-panel__link:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.cat-panel__link i {
  font-size: 18px;
  color: var(--primary);
  width: 22px;
}
.cat-panel__link .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray-4);
}

/* ── Product grid ──────────────────────────────────────────── */
.kore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.kore-card {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.kore-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kore-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gray-1);
  overflow: hidden;
}
.kore-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.kore-card__discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 20px;
}
.kore-card__wish {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gray-5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}
.kore-card__wish:hover,
.kore-card__wish.active {
  color: var(--primary);
}
.kore-card__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kore-card__brand {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-4);
  font-weight: 600;
}
.kore-card__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.kore-card__name:hover {
  color: var(--primary);
}
.kore-card__rating {
  font-size: 11px;
  color: var(--gray-5);
  display: flex;
  align-items: center;
  gap: 5px;
}
.stars {
  display: inline-flex;
  gap: 1px;
  color: #f5a623;
  font-size: 11px;
}
.stars .bi-star {
  color: var(--gray-2);
}

.kore-card__flag {
  position: absolute;
  top: 10px;
  right: 46px;
  background: var(--dark);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 7px;
  border-radius: 4px;
}
.kore-card__flag--new { background: #1c7a52; }
.kore-card__flag--hot { background: #c0392b; }
.kore-card__flag--24h { background: var(--accent); }

.kore-card__stock {
  font-size: 11px;
}
.kore-card__stock .in-stock {
  color: #1c7a52;
  font-weight: 600;
}
.kore-card__desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* List view — the alternate layout behind the grid/list toggle. */
.kore-grid--list {
  grid-template-columns: 1fr;
}
.kore-card--list {
  flex-direction: row;
}
.kore-card--list .kore-card__media {
  width: 210px;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.kore-card--list .kore-card__body {
  padding: 18px 20px;
}
.kore-card--list .kore-card__name {
  font-size: 15px;
  min-height: 0;
  -webkit-line-clamp: 2;
}
.kore-card--list .kore-card__btn {
  max-width: 220px;
}
@media (max-width: 640px) {
  .kore-card--list {
    flex-direction: column;
  }
  .kore-card--list .kore-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}
.kore-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}
.kore-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.kore-card__old {
  font-size: 13px;
  color: var(--gray-4);
  text-decoration: line-through;
}
.kore-card__btn {
  width: 100%;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition);
}
.kore-card__btn:hover:not(:disabled) {
  background: var(--primary-dark);
}
.kore-card__btn:disabled {
  background: var(--gray-2);
  color: var(--gray-5);
  cursor: not-allowed;
}

/* ── Section headers ───────────────────────────────────────── */
.kore-section {
  padding: 36px 0;
}
.kore-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.kore-section__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* ── Category rail ─────────────────────────────────────────── */
.kore-cat-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.kore-cat {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  transition: border-color var(--transition), color var(--transition);
}
.kore-cat:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.kore-cat i {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
}
.kore-cat span {
  font-size: 13px;
  font-weight: 500;
  display: block;
}
.kore-cat small {
  font-size: 11px;
  color: var(--gray-4);
}

.kore-section__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.kore-section__more:hover {
  color: var(--primary-dark);
}

/* Brand strip rendered as wordmarks — no third-party logo assets needed. */
.brand-card--text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-light);
  transition: border-color var(--transition), color var(--transition);
}
.brand-card--text:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The original design nested the slider in a flex `.top-section` alongside a
   sidebar, which supplied this breathing room. The sidebar is now a slide-out
   panel, so the spacing belongs here. */
.hero-section {
  padding: 16px 0 20px;
}

/* ── Database-driven hero slides ───────────────────────────────
   Every slide is a full-bleed image with a text block over it, so the
   scrim below is what keeps copy readable on an arbitrary photo. Its
   strength is set per slide in the admin panel. */
.hero-slide--dynamic {
  background-size: cover;
  background-position: center;
  padding: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-slide--dynamic .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 48px;
}
.hero-slide--dynamic .hero-text {
  max-width: 56%;
}
.hero-slide--dynamic.theme-dark .hero-text,
.hero-slide--dynamic.theme-dark .hero-text h1 {
  color: #16181d;
}
.hero-slide--dynamic.theme-dark .hero-tag {
  background: rgba(0, 0, 0, 0.1);
  color: #16181d;
}
.hero-badge--dynamic {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 3;
}
@media (max-width: 768px) {
  .hero-slide--dynamic .hero-content {
    padding: 0 22px;
  }
  .hero-slide--dynamic .hero-text {
    max-width: 100%;
  }
}

/* ── Hero ──────────────────────────────────────────────────── */
.kore-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 48px 40px;
  margin: 24px 0;
}
.kore-hero h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
}
.kore-hero p {
  font-size: 15px;
  opacity: 0.9;
  max-width: 560px;
  margin-bottom: 24px;
}
.kore-hero .btn-light {
  font-weight: 600;
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  color: var(--primary);
}
@media (max-width: 768px) {
  .kore-hero {
    padding: 32px 22px;
  }
  .kore-hero h1 {
    font-size: 25px;
  }
}

/* ── Faceted filter rail ───────────────────────────────────────
   Amazon's left rail: stacked facet groups, each option showing its
   own result count, with counts recomputed as filters are applied. */
.kore-filters {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 0;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.facet {
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-1);
}
.facet:last-child {
  border-bottom: none;
}
.facet__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.facet__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.facet__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1.4;
}
.facet__option:hover {
  color: var(--primary);
}
.facet__option input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primary);
}
.facet__option .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray-4);
}
.facet__option.is-selected {
  color: var(--primary);
  font-weight: 600;
}
.facet__link {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-light);
  padding: 3px 0;
}
.facet__link:hover,
.facet__link.active {
  color: var(--primary);
  font-weight: 600;
}
.facet__more {
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0 0;
}

/* Applied-filter chips above the results. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
}
.chip button {
  background: none;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.chip--clear {
  background: none;
  color: var(--gray-5);
  text-decoration: underline;
}

/* Results toolbar: count on the left, view toggle and sort on the right. */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle button {
  width: 34px;
  height: 32px;
  background: var(--white);
  color: var(--gray-5);
}
.view-toggle button.active {
  background: var(--primary);
  color: var(--white);
}

/* ── Product page ──────────────────────────────────────────────
   Amazon's three-column arrangement: thumbnail rail + main image,
   the detail column, and a self-contained buy box on the right. */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(260px, 3fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 1100px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pdp__buybox {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .pdp {
    grid-template-columns: 1fr;
  }
}

.pdp__gallery {
  display: flex;
  gap: 12px;
}
.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.pdp__thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--gray-2);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  background: var(--white);
}
.pdp__thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(21, 83, 126, 0.15);
}
.pdp__stage {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-height: 380px;
}
.pdp__stage img {
  max-height: 400px;
  object-fit: contain;
}

.pdp__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}
.pdp__brandline {
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 6px;
}
.pdp__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray-5);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-1);
  margin-bottom: 14px;
}
.pdp__price {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}
.pdp__bullets {
  padding-left: 18px;
  margin: 14px 0 0;
  list-style: disc;
}
.pdp__bullets li {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.8;
}

.pdp__buybox {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: 90px;
}
.pdp__delivery {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.7;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--gray-1);
  border-bottom: 1px solid var(--gray-1);
}
.pdp__delivery strong {
  color: var(--text);
}
.btn-buy {
  width: 100%;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  padding: 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.btn-buy:hover:not(:disabled) {
  background: var(--primary-dark);
}
.btn-buy:disabled {
  background: var(--gray-2);
  color: var(--gray-5);
}
.btn-buy--secondary {
  background: var(--accent);
}
.btn-buy--secondary:hover {
  filter: brightness(0.93);
}

.pdp__specs {
  width: 100%;
  border-collapse: collapse;
}
.pdp__specs td {
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-1);
}
.pdp__specs tr td:first-child {
  background: var(--gray-1);
  color: var(--text-light);
  width: 38%;
  font-weight: 500;
}

/* ── Cart & checkout ───────────────────────────────────────── */
.kore-panel {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 20px;
}
.kore-line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-1);
}
.kore-line:last-child {
  border-bottom: none;
}
.kore-line__img {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gray-1);
  object-fit: contain;
  padding: 6px;
}
.kore-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-light);
  padding: 6px 0;
}
.kore-summary-row--total {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  border-top: 2px solid var(--gray-1);
  margin-top: 8px;
  padding-top: 14px;
}

/* Mixed-source orders arrive in more than one parcel — say so plainly. */
.kore-split-notice {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
}

.kore-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kore-qty button {
  width: 30px;
  height: 30px;
  background: var(--gray-1);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}
.kore-qty button:hover {
  background: var(--gray-2);
}
.kore-qty span {
  min-width: 36px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

/* ── Order tracking ────────────────────────────────────────── */
.kore-shipment {
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.kore-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 20px;
}
.kore-status--pending   { background: #f1f3f5; color: #666; }
.kore-status--submitted,
.kore-status--accepted,
.kore-status--processing { background: #e8f0f6; color: #15537e; }
.kore-status--shipped,
.kore-status--delivered,
.kore-status--completed { background: #e4f6ee; color: #1c7a52; }
.kore-status--failed,
.kore-status--cancelled { background: #fdeaea; color: #a83232; }

/* ── Footer ────────────────────────────────────────────────── */
.kore-footer {
  background: #1c1c1c;
  color: #9a9a9a;
  margin-top: 56px;
}
.kore-footer-title {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.kore-footer-text {
  font-size: 13px;
  line-height: 1.7;
  color: #9a9a9a;
}
.kore-footer-links {
  padding: 0;
  margin: 0;
}
.kore-footer-links li {
  margin-bottom: 8px;
}
.kore-footer-links a {
  font-size: 13px;
  color: #9a9a9a;
  transition: color var(--transition);
}
.kore-footer-links a:hover {
  color: var(--white);
}
.kore-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.kore-social a:hover {
  background: var(--primary);
  color: var(--white);
}
.kore-track-input {
  max-width: 170px;
}
.kore-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #7a7a7a;
}

/* ── Utilities ─────────────────────────────────────────────── */
.kore-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-4);
}
.kore-empty i {
  font-size: 44px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.5;
}
.kore-skeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: kore-shimmer 1.3s ease infinite;
  border-radius: var(--radius);
  min-height: 300px;
}
@keyframes kore-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.kore-toast-wrap {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kore-toast {
  background: var(--dark);
  color: var(--white);
  font-size: 13px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  animation: kore-toast-in 0.22s ease;
  max-width: 340px;
}
.kore-toast--error { background: #a83232; }
.kore-toast--success { background: #1c7a52; }
@keyframes kore-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Checkout: shipping method options ─────────────────────────
   One radio group per delivery. The label is the whole row so the
   price and ETA are part of the target, not just the dot. */
.kore-ship-leg + .kore-ship-leg {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-1);
}
.kore-ship-leg__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-4);
  margin-bottom: 8px;
}
.kore-ship-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kore-ship-option + .kore-ship-option { margin-top: 8px; }
.kore-ship-option:hover { border-color: var(--primary); }
.kore-ship-option.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.kore-ship-option input { flex: none; cursor: pointer; }
.kore-ship-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.kore-ship-option__name { font-size: 14px; font-weight: 500; }
.kore-ship-option__eta { font-size: 12px; color: var(--gray-4); }
.kore-ship-option__price {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Checkout: payment block ───────────────────────────────────
   The card fields carry the most anxiety on the page, so they get an
   explicit "this is encrypted" frame, live brand feedback and inline
   errors rather than one summary line at the top. */
.kore-pay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kore-pay__secure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1c7a52;
  background: rgba(28, 122, 82, 0.1);
  border-radius: 20px;
  padding: 4px 10px;
}

/* Accepted brands. All shown at rest; the match highlights, the rest fade. */
.kore-pay__brands {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gray-1);
}
.kore-cardbrand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--gray-4);
  background: var(--gray-1);
  border: 1px solid var(--gray-2);
  border-radius: 4px;
  padding: 4px 7px;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kore-cardbrand.is-active {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}
.kore-cardbrand.is-dimmed { opacity: 0.35; }

/* Card-number field: the detected brand name sits inside the input. */
.kore-pay__field { position: relative; }
.kore-pay__field .form-control { padding-right: 132px; }
.kore-pay__badge {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}
.kore-pay__badge.is-shown { opacity: 1; }

.kore-pay__hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--gray-4);
  margin-left: 4px;
}
.kore-pay__note {
  font-size: 12px;
  color: var(--gray-4);
  margin: 16px 0 0;
}

/* Bootstrap only reveals .invalid-feedback next to a .is-invalid sibling; ours
   sits outside the input group, so show it whenever it has something to say. */
.kore-pay .invalid-feedback:not(:empty) { display: block; }