/* ============================================================
   Heinrichs Cigars — Storefront / Checkout Branding
   Injected via HeinrichsCmsFilter plugin (no theme compile needed)
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  /* Heinrichs brand tokens */
  --h-ink:        #1a1612;
  --h-ink2:       #4a4540;
  --h-ink3:       #7a7268;
  --h-paper:      #f3efe4;
  --h-paper2:     #ece8db;
  --h-paper3:     #e4e0d4;
  --h-rule:       #ddd8cc;
  --h-accent:     #2D4D42;
  --h-accent2:    #1e3a2f;
  --h-gold:       #8a6030;
  --h-font-disp:  'Cormorant Garamond', Georgia, serif;
  --h-font-body:  'Inter', system-ui, sans-serif;

  /* ── Override Bootstrap 5 tokens — these cascade through ALL BS components */
  --bs-primary:                 #2D4D42;
  --bs-primary-rgb:             45, 77, 66;
  --bs-primary-text-emphasis:   #1e3a2f;
  --bs-primary-bg-subtle:       #d6e4e0;
  --bs-primary-border-subtle:   #a8c9c1;

  --bs-link-color:              #2D4D42;
  --bs-link-color-rgb:          45, 77, 66;
  --bs-link-hover-color:        #1e3a2f;
  --bs-link-hover-color-rgb:    30, 58, 47;
  --bs-link-decoration:         none;
  --bs-link-hover-decoration:   underline;

  --bs-body-font-family:        'Inter', system-ui, sans-serif;
  --bs-body-color:              #1a1612;
  --bs-body-color-rgb:          26, 22, 18;
  --bs-body-bg:                 #ece8db;
  --bs-body-bg-rgb:             236, 232, 219;

  --bs-border-color:            #ddd8cc;
  --bs-border-color-translucent: rgba(26,22,18,.15);
  --bs-border-radius:           2px;
  --bs-border-radius-sm:        2px;
  --bs-border-radius-lg:        2px;
  --bs-border-radius-xl:        2px;

  --bs-focus-ring-color:        rgba(45, 77, 66, .25);

  --bs-btn-border-radius:       2px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--h-font-body) !important;
  background-color: var(--h-paper2) !important;
  color: var(--h-ink) !important;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--h-font-disp) !important;
  font-weight: 500 !important;
  color: var(--h-ink) !important;
  letter-spacing: -.01em !important;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
/* Bootstrap 5 reads --bs-link-color-rgb (set above); these catch stragglers */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--h-accent) !important;
  text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--h-accent2) !important;
}
.btn-link { color: var(--h-ink2) !important; }
.btn-link:hover { color: var(--h-ink) !important; }

/* ── Logo override (replace Demostore image with brand text) ──────────────── */
.header-logo-picture { display: none !important; }
.header-logo-main-link {
  text-decoration: none !important;
  display: inline-block;
}
.header-logo-main-link::after {
  content: 'Heinrichs';
  display: block;
  font-family: var(--h-font-disp) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  color: var(--h-ink) !important;
  line-height: 1 !important;
}

/* ── Nav links ────────────────────────────────────────────────────────────── */
.nav-link,
.main-navigation-link {
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
  color: var(--h-ink2) !important;
  text-decoration: none !important;
}
.nav-link:hover,
.main-navigation-link:hover { color: var(--h-accent) !important; }
.nav-link.active,
.main-navigation-link.active { color: var(--h-accent) !important; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--h-accent) !important;
  border-color: var(--h-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-family: var(--h-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--h-accent2) !important;
  border-color: var(--h-accent2) !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
  background-color: transparent !important;
  border-color: var(--h-rule) !important;
  color: var(--h-ink) !important;
  border-radius: 2px !important;
  font-family: var(--h-font-body) !important;
}
.btn-secondary:hover {
  background-color: var(--h-paper3) !important;
  border-color: var(--h-ink) !important;
}

.btn-outline-secondary {
  border-color: var(--h-rule) !important;
  color: var(--h-ink2) !important;
  border-radius: 2px !important;
}
.btn-outline-secondary:hover {
  background-color: var(--h-paper3) !important;
  border-color: var(--h-ink) !important;
  color: var(--h-ink) !important;
}

.btn-light {
  background-color: var(--h-paper3) !important;
  border-color: var(--h-rule) !important;
  border-radius: 2px !important;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  border-color: var(--h-rule) !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  color: var(--h-ink) !important;
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--h-ink) !important;
  box-shadow: none !important;
}
.form-label, label {
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--h-ink2) !important;
}
.form-check-input:checked {
  background-color: var(--h-accent) !important;
  border-color: var(--h-accent) !important;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  border-color: var(--h-rule) !important;
  border-radius: 2px !important;
  background: #fff !important;
}
.card-header {
  background: var(--h-paper3) !important;
  border-bottom-color: var(--h-rule) !important;
  font-family: var(--h-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--h-ink2) !important;
}
.card-title {
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--h-ink2) !important;
}
.card-body { padding: 0 !important; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 2px !important;
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
}
.alert-info {
  background: #e8f0ee !important;
  border-color: var(--h-accent) !important;
  color: var(--h-accent2) !important;
}
.alert-danger {
  background: #fdecea !important;
  border-color: #c0392b !important;
  color: #922b21 !important;
}
.alert-success {
  background: #e8f0ee !important;
  border-color: var(--h-accent) !important;
  color: var(--h-accent2) !important;
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--h-accent) !important; font-size: 13px !important; }
.breadcrumb-item.active { color: var(--h-ink2) !important; font-size: 13px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--h-ink3) !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.header-main {
  background: var(--h-paper) !important;
  border-bottom: 1px solid var(--h-rule) !important;
  box-shadow: none !important;
}

.top-bar-nav {
  background: var(--h-ink) !important;
  padding: 6px 32px !important;
  font-size: 12px !important;
}
.top-bar-nav a,
.top-bar-nav button,
.top-bar-nav-text,
.top-bar-nav-item { color: #d9d2be !important; }
.top-bar-nav a:hover { color: #fff !important; }
.top-bar-nav .dropdown-menu {
  background: var(--h-ink) !important;
  border: 1px solid #ffffff22 !important;
}
.top-bar-nav .dropdown-item { color: #d9d2be !important; }
.top-bar-nav .dropdown-item:hover { background: #ffffff15 !important; color: #fff !important; }

.header-row { padding: 16px 0 !important; }
.header-logo-main-link { text-decoration: none !important; }

.main-navigation-link {
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
  color: var(--h-ink2) !important;
  letter-spacing: .01em !important;
}
.main-navigation-link:hover,
.main-navigation-link.active { color: var(--h-accent) !important; }

.header-actions-btn,
.nav-main-toggle-btn {
  color: var(--h-ink) !important;
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
}
.header-cart-btn {
  background: var(--h-ink) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
}
.header-cart-btn:hover,
.header-cart-btn:focus {
  background: var(--h-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* Nested spans/icons inside cart btn */
.header-cart-btn .header-cart-total,
.header-cart-btn .header-cart-icon,
.header-cart-btn span { color: #fff !important; }

.header-search-input {
  background: var(--h-paper3) !important;
  border-color: var(--h-rule) !important;
  border-radius: 2px 0 0 2px !important;
  font-family: var(--h-font-body) !important;
}
.header-search-btn {
  background: var(--h-ink) !important;
  border-color: var(--h-ink) !important;
  border-radius: 0 2px 2px 0 !important;
}

.nav-main {
  background: var(--h-paper) !important;
  border-top: 1px solid var(--h-rule) !important;
  border-bottom: 1px solid var(--h-rule) !important;
}
.navbar { padding: 10px 0 !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer-main {
  background: var(--h-ink) !important;
  color: #d9d2be !important;
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  margin-top: 64px !important;
  padding-top: 48px !important;
}
.footer-main a { color: #d9d2be !important; }
.footer-main a:hover { color: #fff !important; }
.footer-column-headline {
  font-family: var(--h-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #7a7268 !important;
  margin-bottom: 16px !important;
}
.footer-copyright {
  border-top: 1px solid #2a2520 !important;
  padding: 20px 0 !important;
  font-size: 12px !important;
  color: #7a7268 !important;
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT PAGE LAYOUT
   ════════════════════════════════════════════════════════════ */

body.is-ctl-checkout { background-color: var(--h-paper2) !important; }

.checkout { padding: 40px 0 64px !important; }

/* Two-column checkout layout */
.checkout-container {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
}
.checkout-main { flex: 1 !important; min-width: 0 !important; }
.checkout-aside { width: 360px !important; flex-shrink: 0 !important; }

/* ── Cart & Confirm page headings ─────────────────────────────────────────── */
.cart-main-header,
.confirm-main-header {
  font-family: var(--h-font-disp) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 0 !important;
}
.cart-main-header-item-counter,
.confirm-main-header-item-counter {
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--h-ink3) !important;
}

/* ── Product table card ───────────────────────────────────────────────────── */
.checkout-product-table {
  background: #fff !important;
  border: 1px solid var(--h-rule) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

/* Table header row */
.cart-table-header {
  padding: 10px 20px !important;
  background: var(--h-paper3) !important;
  border-bottom: 1px solid var(--h-rule) !important;
  list-style: none !important;
}
.cart-header-row > div {
  font-family: var(--h-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--h-ink3) !important;
}

/* ── Individual line items ────────────────────────────────────────────────── */
.line-item {
  list-style: none !important;
  padding: 20px !important;
  border-bottom: 1px solid var(--h-rule) !important;
  transition: background .12s !important;
}
.line-item:last-child { border-bottom: none !important; }
.line-item:hover { background: var(--h-paper) !important; }

.line-item-row { align-items: center !important; }

/* Product image */
.line-item-img-container {
  width: 90px !important;
  height: 90px !important;
  border: 1px solid var(--h-rule) !important;
  border-radius: 2px !important;
  background: #2D1F1C !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.line-item-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
}
.line-item-img-link { display: block !important; text-decoration: none !important; }

/* Product name / label */
.line-item-label {
  font-family: var(--h-font-disp) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--h-ink) !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}
.line-item-label:hover { color: var(--h-accent) !important; }

.line-item-product-number {
  font-size: 11px !important;
  color: var(--h-ink3) !important;
  margin-top: 4px !important;
}
.line-item-label-descriptor { display: none !important; }

/* Quantity selector */
.line-item-quantity-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--h-ink3) !important;
  margin-bottom: 6px !important;
}
.line-item-quantity-group,
.quantity-selector-group {
  border-radius: 2px !important;
  overflow: hidden !important;
}
.btn-minus,
.btn-plus,
.js-btn-minus,
.js-btn-plus {
  background: var(--h-paper3) !important;
  border-color: var(--h-rule) !important;
  color: var(--h-ink) !important;
  border-radius: 0 !important;
  width: 32px !important;
  padding: 0 !important;
}
.btn-minus:hover,
.btn-plus:hover,
.js-btn-minus:hover,
.js-btn-plus:hover {
  background: var(--h-ink) !important;
  border-color: var(--h-ink) !important;
  color: #fff !important;
}
.js-quantity-selector,
.quantity-selector-group-input {
  text-align: center !important;
  font-family: var(--h-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-color: var(--h-rule) !important;
  background: #fff !important;
  width: 52px !important;
  border-radius: 0 !important;
}

/* Unit price */
.line-item-unit-price-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--h-ink3) !important;
  margin-bottom: 4px !important;
}
.line-item-unit-price-value {
  font-family: var(--h-font-disp) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--h-ink2) !important;
}
.line-item-unit-price-value-descriptor {
  font-size: 12px !important;
  color: var(--h-ink3) !important;
}

/* Total price */
.line-item-total-price-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--h-ink3) !important;
  margin-bottom: 4px !important;
}
.line-item-total-price-value {
  font-family: var(--h-font-disp) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--h-ink) !important;
}

/* Remove button */
.line-item-remove { text-align: center !important; }
.line-item-remove-button {
  background: transparent !important;
  border: none !important;
  color: var(--h-ink3) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .12s, color .12s !important;
}
.line-item-remove-button:hover {
  background: #fee2e2 !important;
  color: #c0392b !important;
  border-color: transparent !important;
}

/* ── Add product & shipping calc area ────────────────────────────────────── */
.cart-add-product-container,
.cart-shipping-costs-container {
  margin-top: 16px !important;
}
.cart-shipping-costs-btn {
  font-size: 13px !important;
  color: var(--h-accent) !important;
  font-family: var(--h-font-body) !important;
  padding-left: 0 !important;
}
.cart-shipping-costs-btn:hover { color: var(--h-accent2) !important; }

/* ── Aside (order summary) ────────────────────────────────────────────────── */
.checkout-aside-container {
  background: #fff !important;
  border: 1px solid var(--h-rule) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.checkout-aside-summary {
  padding: 24px 24px 0 !important;
}
.checkout-aside-summary-header {
  font-family: var(--h-font-disp) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--h-rule) !important;
}

.checkout-aside-summary-list {
  margin-bottom: 0 !important;
}
.checkout-aside-summary-list .checkout-aside-summary-label {
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  color: var(--h-ink2) !important;
  padding: 8px 0 !important;
}
.checkout-aside-summary-list .checkout-aside-summary-value {
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  text-align: right !important;
  padding: 8px 0 !important;
  color: var(--h-ink2) !important;
}
/* Total row — bigger */
.checkout-aside-summary-list .checkout-aside-summary-total.checkout-aside-summary-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--h-ink) !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--h-rule) !important;
}
.checkout-aside-summary-list .checkout-aside-summary-total.checkout-aside-summary-value {
  font-family: var(--h-font-disp) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--h-ink) !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--h-rule) !important;
}

/* Action area (promo code + proceed button) */
.checkout-aside-action {
  padding: 16px 24px !important;
  border-top: 1px solid var(--h-rule) !important;
}
.checkout-aside-action + .checkout-aside-action {
  border-top: none !important;
  padding-top: 0 !important;
}

.checkout-aside-add-code { border-radius: 2px !important; overflow: hidden !important; }
.checkout-aside-add-promotion-button {
  background: var(--h-paper3) !important;
  border-color: var(--h-rule) !important;
  color: var(--h-ink) !important;
  border-radius: 0 2px 2px 0 !important;
}
.checkout-aside-add-promotion-button:hover {
  background: var(--h-ink) !important;
  color: #fff !important;
  border-color: var(--h-ink) !important;
}

.begin-checkout-btn {
  width: 100% !important;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  border-radius: 2px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ════════════════════════════════════════════════════════════
   CONFIRM PAGE
   ════════════════════════════════════════════════════════════ */

body.is-ctl-checkout.is-act-confirmpage .checkout-aside-container,
.confirm-main-header { margin-top: 0 !important; }

/* Confirm section cards */
.checkout-card {
  border: 1px solid var(--h-rule) !important;
  border-radius: 2px !important;
  margin-bottom: 16px !important;
}
.checkout-card .card-body { padding: 20px !important; }
.checkout-card .card-title {
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--h-ink3) !important;
  margin-bottom: 16px !important;
}

/* Address / payment / shipping confirm blocks */
.confirm-address-content,
.confirm-payment-method,
.confirm-shipping-method {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--h-ink2) !important;
}

/* Terms of service */
.revocation-notice {
  font-size: 13px !important;
  color: var(--h-ink3) !important;
  line-height: 1.55 !important;
}
.revocation-notice .btn-link-inline { color: var(--h-accent) !important; }

/* Order now button on confirm page */
.confirm-order-submit {
  width: 100% !important;
  padding: 16px !important;
  font-size: 16px !important;
}

/* ════════════════════════════════════════════════════════════
   FINISH PAGE
   ════════════════════════════════════════════════════════════ */
.finish-ordernumber {
  font-family: var(--h-font-disp) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--h-accent) !important;
}
.finish-header {
  background: var(--h-paper) !important;
  border: 1px solid var(--h-rule) !important;
  border-radius: 2px !important;
  padding: 32px !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* ── Empty cart alert ─────────────────────────────────────────────────────── */
body.is-ctl-checkout.is-act-cartpage .checkout {
  padding: 60px 0 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
body.is-ctl-checkout.is-act-cartpage .alert {
  background: #fff !important;
  border: 1px solid var(--h-rule) !important;
  border-left: 3px solid var(--h-accent) !important;
  border-radius: 2px !important;
  padding: 20px 24px !important;
  font-family: var(--h-font-body) !important;
  font-size: 14px !important;
  color: var(--h-ink2) !important;
}
body.is-ctl-checkout.is-act-cartpage .icon { color: var(--h-accent) !important; }
body.is-ctl-checkout.is-act-cartpage .icon svg use { fill: var(--h-accent) !important; }

/* ── Dropdown menus ───────────────────────────────────────────────────────── */
.dropdown-menu {
  border-color: var(--h-rule) !important;
  border-radius: 2px !important;
  font-family: var(--h-font-body) !important;
  font-size: 13px !important;
}
.dropdown-item { color: var(--h-ink2) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--h-paper3) !important;
  color: var(--h-ink) !important;
}

/* ── Header account btn ───────────────────────────────────────────────────── */
.account-menu-btn,
.header-actions-btn:not(.header-cart-btn) {
  color: var(--h-ink) !important;
  text-decoration: none !important;
}
.account-menu-btn:hover,
.header-actions-btn:not(.header-cart-btn):hover { color: var(--h-accent) !important; }