/* B.O.O. (Bite. Enjoy. Repeat.) — custom visual layer
   Rebuilt to match the approved HTML mockup (root styles.css) exactly.
   Only what theme.json / block settings cannot express directly.
   All values reference theme.json custom properties — no hardcoded hex. */

/* ---------- 0. Base resets the mockup relies on ---------- */
html { scroll-behavior: smooth; }
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content.is-layout-flow > * + *,
.wp-block-post-content.is-layout-constrained > * + * { margin-block-start: 0 !important; }

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-bright);
  outline-offset: 2px;
  border-radius: var(--wp--custom--radius--sm, 6px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wp--preset--color--accent-bright);
  color: var(--wp--preset--color--on-accent);
  padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--sm);
  z-index: 1000;
  border-radius: var(--wp--custom--radius--sm);
}
.skip-link:focus { left: var(--wp--preset--spacing--sm); top: var(--wp--preset--spacing--sm); }

/* ---------- 1. Container ---------- */
.boo-container {
  max-width: var(--wp--custom--container--max, 1240px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--sm);
}
@media (min-width: 768px) {
  .boo-container { padding-inline: var(--wp--preset--spacing--lg); }
}

/* ---------- 2. Section padding variants ---------- */
.boo-section { padding-block: var(--wp--preset--spacing--2xl); }
.section-tight { padding-block: var(--wp--preset--spacing--xl) !important; }
.page-hero {
  padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) !important;
  background: linear-gradient(180deg, var(--wp--preset--color--surface-elevated), var(--wp--preset--color--ink));
  border-bottom: 1px solid var(--wp--preset--color--border-muted);
}

/* ---------- 3. Eyebrow / script / section-head ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2xs);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--accent-bright);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-bright);
  flex-shrink: 0;
}
.script {
  font-family: var(--wp--preset--font-family--script);
  font-size: var(--wp--preset--font-size--xx-large);
  color: var(--wp--preset--color--accent-bright);
  font-weight: 600;
}
.section-head { max-width: 40em; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- 4. Buttons: outline / dark variants ---------- */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background-color: transparent !important;
  color: var(--wp--preset--color--contrast) !important;
  border: 1.5px solid var(--wp--preset--color--border-strong) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  border-color: var(--wp--preset--color--accent) !important;
  background-color: rgba(163, 184, 40, 0.12) !important;
  color: var(--wp--preset--color--contrast) !important;
}
.wp-block-button.is-style-dark .wp-block-button__link,
.wp-block-button__link.is-style-dark {
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--contrast) !important;
  border: 1.5px solid var(--wp--preset--color--border-strong) !important;
}
.wp-block-button.is-style-dark .wp-block-button__link:hover,
.wp-block-button__link.is-style-dark:hover {
  border-color: var(--wp--preset--color--accent-bright) !important;
  color: var(--wp--preset--color--accent-bright) !important;
}
.wp-block-buttons .wp-block-button__link:active { transform: translateY(1px); }
.boo-btn-block .wp-block-button__link { width: 100%; justify-content: center; }

/* ---------- 5. Badges / tags ---------- */
.boo-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--wp--custom--radius--pill);
  border: 1px solid var(--wp--preset--color--border-strong);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text-secondary);
}
.boo-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--caption);
  padding: 0.3rem 0.75rem;
  border-radius: var(--wp--custom--radius--pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.boo-badge-olive { background: rgba(163, 184, 40, 0.16); color: var(--wp--preset--color--accent-bright); }
.boo-badge-outline { background: transparent; border: 1px solid var(--wp--preset--color--border-strong); color: var(--wp--preset--color--text-secondary); }
.boo-badge-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--accent-bright); border: 1px solid var(--wp--preset--color--accent-deep); }

/* ---------- 6. Product / menu-item card ---------- */
.is-style-card,
.wc-block-product-template .wc-block-product {
  background: var(--wp--preset--color--surface) !important;
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
              box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}
.is-style-card:hover,
.wc-block-product-template .wc-block-product:hover {
  border-color: var(--wp--preset--color--border-strong);
  box-shadow: var(--wp--preset--shadow--md);
}
.is-style-card.boo-card-featured,
.wc-block-product-template .wc-block-product.boo-card-featured {
  border-color: var(--wp--preset--color--accent-deep) !important;
  box-shadow: var(--wp--preset--shadow--glow);
}
.boo-card-media { aspect-ratio: 5 / 4; overflow: hidden; }
.boo-card-media img,
.wc-block-components-product-image img { object-fit: cover; width: 100%; height: 100%; }
.boo-card-body { padding: var(--wp--preset--spacing--md); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2xs); }
.boo-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--wp--preset--spacing--xs); }

.price, .wc-block-components-product-price, .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 800 !important;
  font-size: var(--wp--preset--font-size--large) !important;
  color: var(--wp--preset--color--accent-bright) !important;
}
.wc-block-components-product-title, .wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.onsale {
  background-color: var(--wp--preset--color--accent-bright) !important;
  color: var(--wp--preset--color--on-accent) !important;
  border-radius: var(--wp--custom--radius--pill) !important;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wp--preset--font-size--caption);
  padding: 0.3rem 0.75rem !important;
  border: none !important;
}

/* ---------- 7. Reviews / testimonials ---------- */
.boo-review-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--md);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}
.boo-review-stars { display: flex; gap: 2px; color: var(--wp--preset--color--accent-bright); }
.boo-review-stars svg { width: 16px; height: 16px; }
.boo-review-quote { color: var(--wp--preset--color--text-secondary); font-style: normal; }
.boo-review-meta { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); }
.boo-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wp--preset--color--surface-elevated);
  border: 1px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--accent-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  flex-shrink: 0;
}
.boo-review-meta span { display: block; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--caption); }

/* ---------- 8. Value cards / stat strip ---------- */
.boo-value-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); }
.boo-value-card svg { width: 32px; height: 32px; color: var(--wp--preset--color--accent-bright); }
.boo-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--border-muted);
  border-bottom: 1px solid var(--wp--preset--color--border-muted);
  padding-block: var(--wp--preset--spacing--md);
  text-align: center;
}
@media (min-width: 700px) { .boo-stat-strip { grid-template-columns: repeat(4, 1fr); } }
.boo-stat-strip .boo-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--xx-large); color: var(--wp--preset--color--accent-bright); display: block; }
.boo-stat-strip .boo-stat-label { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--small); }

/* ---------- 9. Timeline ---------- */
.boo-timeline { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--lg); counter-reset: boo-step; }
.boo-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--wp--preset--color--border-muted);
}
@media (min-width: 900px) {
  .boo-timeline::before { left: 50%; transform: translateX(-0.5px); }
}
.boo-timeline-step { position: relative; padding-left: var(--wp--preset--spacing--xl); counter-increment: boo-step; }
.boo-timeline-step::before {
  content: counter(boo-step);
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--accent-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  z-index: 1;
}
@media (min-width: 900px) {
  .boo-timeline-step { width: calc(50% - var(--wp--preset--spacing--xl)); padding-left: var(--wp--preset--spacing--lg); }
  .boo-timeline-step:nth-child(odd) { margin-right: auto; }
  .boo-timeline-step:nth-child(even) { margin-left: auto; }
  .boo-timeline-step::before { left: -20px; }
  .boo-timeline-step:nth-child(even)::before { left: auto; right: -20px; }
}

/* ---------- 10. FAQ accordion ---------- */
.boo-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border-muted);
  padding-block: var(--wp--preset--spacing--sm);
}
.boo-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
}
.boo-faq-item summary::-webkit-details-marker { display: none; }
.boo-faq-item summary::after {
  content: "+";
  font-size: 1.5em;
  color: var(--wp--preset--color--accent-bright);
  transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
  flex-shrink: 0;
  margin-left: var(--wp--preset--spacing--sm);
}
.boo-faq-item[open] summary::after { transform: rotate(45deg); }
.boo-faq-answer { color: var(--wp--preset--color--text-secondary); margin-top: var(--wp--preset--spacing--xs); }

/* ---------- 10b. FAQ accordion (Elementor Accordion widget) ----------
   Applies globally to every Accordion widget on the site (Shop and
   Contact FAQ sections currently, and any future one using the same
   widget) -- overriding Elementor's larger inherited default so
   question headings read as supporting text, not section titles. */
.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-accordion .elementor-accordion-title {
  font-size: var(--wp--preset--font-size--intermediate) !important; /* 18px, was inheriting a much larger default */
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
}
@media (max-width: 767px) {
  .elementor-widget-accordion .elementor-tab-title,
  .elementor-widget-accordion .elementor-accordion-title {
    font-size: var(--wp--preset--font-size--small) !important; /* 15px on mobile */
  }
}

/* ---------- 11. Gallery grid ---------- */
.boo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--sm);
}
@media (min-width: 700px) { .boo-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .boo-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.boo-gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  margin: 0;
}
.boo-gallery-item.boo-gallery-tall { aspect-ratio: 1 / 1.4; }
.boo-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing); }
.boo-gallery-item:hover img { transform: scale(1.04); }
.boo-gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.85) 100%);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  margin: 0;
}

/* ---------- 12. CTA banner ---------- */
.boo-cta-banner {
  text-align: center;
  border: 1px solid var(--wp--preset--color--accent-deep);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
}

/* ---------- 13. Forms ---------- */
.boo-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--sm); }
@media (min-width: 700px) { .boo-form-grid.boo-two-col { grid-template-columns: 1fr 1fr; } }
.boo-field.boo-full { grid-column: 1 / -1; }
.boo-field label { display: block; margin-bottom: var(--wp--preset--spacing--2xs); font-weight: 600; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); }
.boo-field input, .boo-field select, .boo-field textarea {
  width: 100%;
  background: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
}
.boo-field input:focus, .boo-field select:focus, .boo-field textarea:focus {
  outline: 2px solid var(--wp--preset--color--accent-bright);
  outline-offset: 1px;
}
.boo-field .boo-hint { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--caption); margin-top: var(--wp--preset--spacing--3xs); }

.boo-option-group { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); }
.boo-option-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.boo-option-group label {
  display: inline-flex; align-items: center;
  padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--custom--radius--pill);
  border: 1.5px solid var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--text-secondary);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  transition: all var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}
.boo-option-group input[type="radio"]:checked + label {
  border-color: var(--wp--preset--color--accent-bright);
  background: rgba(163, 184, 40, 0.16);
  color: var(--wp--preset--color--accent-bright);
}
.boo-option-group input[type="radio"]:focus-visible + label { outline: 2px solid var(--wp--preset--color--accent-bright); outline-offset: 2px; }

.qty-input, .wc-block-components-quantity-selector input { width: 4rem; text-align: center; }

/* ---------- 14. Breadcrumb, surface-panel, split, quote-block, info-card ---------- */
.boo-breadcrumb { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-muted); display: flex; gap: var(--wp--preset--spacing--3xs); flex-wrap: wrap; }
.boo-breadcrumb a { color: var(--wp--preset--color--text-muted); }
.boo-breadcrumb a:hover { color: var(--wp--preset--color--accent-bright); }

.boo-surface-panel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--lg);
}

.boo-split img { border-radius: var(--wp--custom--radius--card); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--wp--preset--shadow--sm); }

.boo-quote-block {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: var(--wp--preset--spacing--md);
  font-family: var(--wp--preset--font-family--script);
  font-size: var(--wp--preset--font-size--xx-large);
  color: var(--wp--preset--color--accent-bright);
}

.boo-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--md);
}
.boo-info-card svg { width: 24px; height: 24px; color: var(--wp--preset--color--accent-bright); flex-shrink: 0; }
.boo-info-card .boo-info-label { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--caption); text-transform: uppercase; letter-spacing: 0.08em; }
.boo-info-card .boo-info-value { color: var(--wp--preset--color--contrast); font-weight: 600; }

/* ---------- 15. Header ---------- */
.boo-cafe-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--wp--preset--color--border-muted);
}
.boo-cafe-header img.custom-logo,
.boo-cafe-header .wp-block-site-logo img { height: 42px; width: auto; }
footer .wp-block-site-logo img { height: 48px; width: auto; }

/* ---------- 16. Navigation Overlay ---------- */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container {
    background-color: var(--wp--preset--color--ink) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    transition: transform var(--wp--custom--motion--duration, 0.22s) var(--wp--custom--motion--easing, ease);
    @starting-style { transform: translateX(100%); }
  }
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    transition: transform var(--wp--custom--motion--duration, 0.22s) var(--wp--custom--motion--easing, ease),
                display var(--wp--custom--motion--duration, 0.22s) allow-discrete;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container:not(.is-menu-open) { transition: none !important; }
}

/* ---------- 17. Footer ---------- */
.boo-cafe-footer {
  border-top: 1px solid var(--wp--preset--color--border-muted);
  background: var(--wp--preset--color--surface-elevated);
}
.boo-footer-social .wp-block-social-link {
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 50%;
}
.boo-footer-social .wp-block-social-link:hover { border-color: var(--wp--preset--color--accent-bright); }
.boo-footer-bottom {
  border-top: 1px solid var(--wp--preset--color--border-muted);
  padding-top: var(--wp--preset--spacing--md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--caption);
}

/* ---------- 18. WooCommerce: Cart / Checkout / My Account ---------- */
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-checkout__form,
.woocommerce-MyAccount-content,
.wc-block-components-totals-wrapper,
.u-column1, .u-column2 {
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--card);
  box-shadow: var(--wp--preset--shadow--sm);
  padding: var(--wp--preset--spacing--lg);
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar { position: sticky; top: 20px; align-self: flex-start; }
.wc-block-components-title,
.woocommerce-MyAccount-content h2,
.wc-block-checkout__form h2 {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--contrast);
}
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"] {
  background-color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--border-muted);
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--contrast);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus,
.woocommerce-MyAccount-content input:focus {
  outline: 2px solid var(--wp--preset--color--accent-bright);
  outline-offset: 1px;
}
.wc-block-components-button,
.woocommerce-MyAccount-content .button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.single_add_to_cart_button {
  background-color: var(--wp--preset--color--accent-bright) !important;
  color: var(--wp--preset--color--on-accent) !important;
  border-radius: var(--wp--custom--radius--pill) !important;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  border: none;
  transition: background-color var(--wp--custom--motion--duration, 0.22s) var(--wp--custom--motion--easing, ease);
}
.wc-block-components-button:hover,
.woocommerce-MyAccount-content .button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--on-accent) !important;
}
.wc-block-components-button:active,
.single_add_to_cart_button:active { background-color: var(--wp--preset--color--accent-deep) !important; }
hr.woocommerce-divider,
.wc-block-components-totals-wrapper::before { border-color: var(--wp--preset--color--border-muted); }

.wc-block-mini-cart__button { color: var(--wp--preset--color--contrast); }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--accent-bright); color: var(--wp--preset--color--on-accent); }

.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.wc-block-components-product-rating,
.woocommerce-product-rating { color: var(--wp--preset--color--accent-bright); }

.wp-block-woocommerce-product-collection ul.wc-block-product-template {
  gap: var(--wp--preset--spacing--md) !important;
}


/* ---------- 19. Header action utilities (v3 addendum) ---------- */
.boo-cafe-header-actions {
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}
.boo-cafe-nav-cta { margin: 0; }
@media (max-width: 781px) {
  .boo-cafe-hide-mobile { display: none; }
}
.is-style-card-featured {
  box-shadow: var(--wp--preset--shadow--glow);
}


/* ---------- 20. Design refinements (v3.1 addendum) ---------- */

/* Remove Gutenberg's automatic top margin/padding stacking inside groups,
   columns and cover containers -- only intentional blockGap spacing remains. */
.wp-block-group > *:first-child,
.wp-block-column > *:first-child,
.wp-block-cover__inner-container > *:first-child,
.wp-block-buttons > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.wp-block-group > *:last-child,
.wp-block-column > *:last-child {
  margin-bottom: 0 !important;
}

/* Header + hero: full-bleed background, content gracefully bounded on
   ultra-wide screens instead of hugging the viewport edge. */
.boo-cafe-header,
.boo-cafe-hero {
  box-sizing: border-box;
}
@media (min-width: 1500px) {
  .boo-cafe-header {
    padding-inline: calc((100% - 1340px) / 2) !important;
  }
  .boo-cafe-hero {
    padding-inline-start: calc((100% - 1340px) / 2 + var(--wp--preset--spacing--md)) !important;
    padding-inline-end: calc((100% - 1340px) / 2 + var(--wp--preset--spacing--md)) !important;
  }
}

/* Smooth, consistent hover transitions across every interactive element. */
a,
.wp-block-button__link,
.boo-tag,
.boo-badge,
.wp-block-navigation-item__content,
.boo-info-card,
.boo-cafe-footer-social .wp-block-social-link,
.wc-block-components-button,
.single_add_to_cart_button {
  transition: color 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-bright) !important;
}
.boo-info-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.boo-info-card:hover {
  border-color: var(--wp--preset--color--border-strong);
  box-shadow: var(--wp--preset--shadow--sm);
}

/* Category / product card: more breathing room between image, title,
   description and the price/tag footer. */
.boo-card-body {
  gap: var(--wp--preset--spacing--sm) !important;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) !important;
}
.boo-card-footer {
  margin-top: var(--wp--preset--spacing--sm) !important;
  padding-top: var(--wp--preset--spacing--xs);
  border-top: 1px solid var(--wp--preset--color--border-muted);
}
.wp-block-woocommerce-product-collection ul.wc-block-product-template {
  gap: var(--wp--preset--spacing--lg) !important;
}
.wc-block-components-product-image { margin-bottom: var(--wp--preset--spacing--xs); }
.wc-block-components-product-title { margin-bottom: var(--wp--preset--spacing--3xs) !important; }
.wc-block-components-product-price { margin-top: var(--wp--preset--spacing--2xs) !important; }

/* General section rhythm: consistent, slightly more generous gaps so every
   section reads balanced rather than cramped. */
.section-head { margin-bottom: var(--wp--preset--spacing--lg); }
.boo-section .wp-block-columns { margin-top: var(--wp--preset--spacing--md); }
.wp-block-buttons { row-gap: var(--wp--preset--spacing--sm) !important; }
.boo-value-card, .boo-info-card, .boo-review-card { gap: var(--wp--preset--spacing--sm) !important; }
.boo-split { gap: var(--wp--preset--spacing--lg) !important; }
.boo-cta-banner > * + * { margin-top: var(--wp--preset--spacing--xs); }

/* Footer link lists: no bullets, comfortable line spacing, subtle hover. */
.boo-cafe-footer ul.wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2xs);
}
.boo-cafe-footer ul.wp-block-list li {
  margin: 0;
  padding: 0;
}
.boo-cafe-footer ul.wp-block-list a {
  color: var(--wp--preset--color--text-secondary);
  text-decoration: none;
}
.boo-cafe-footer ul.wp-block-list a:hover {
  color: var(--wp--preset--color--accent-bright);
}
.boo-cafe-footer h4.wp-block-heading {
  margin-bottom: var(--wp--preset--spacing--sm);
}

/* ---------- 21. WooCommerce product cards -- ONE global design system
   ---------- */
/* Astra's native classic WooCommerce loop markup (li.product /
   astra-shop-thumbnail-wrap / astra-shop-summary-wrap /
   woocommerce-loop-product__title) is the structural foundation
   everywhere a product grid renders on this site -- Shop, category and
   tag archives, search results, the Home page "Fan Favorites" section,
   single-product Related Products, and any upsell loop. Nothing here is
   scoped to one page or widget: these are bare WooCommerce/Astra
   selectors, so styling it once here makes every product card on the
   site consistent by construction, per the site brief. Classic-rendered
   (no theme.json / global-styles block on the front end -- confirmed
   empty on every template this site uses), so literal hex tokens are
   used, matching the values used for the single-product page. */

ul.products {
  gap: 24px !important;
}
ul.products li.product {
  background: #1B1B17 !important;
  border: 1px solid #2A2A26 !important;
  border-radius: 24px !important;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products li.product:hover {
  border-color: #3A3A34 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
ul.products li.product:has(.badge-olive) {
  border-color: #7A8A1E !important;
  box-shadow: 0 0 0 1px rgba(163, 184, 40, 0.35), 0 0 40px rgba(163, 184, 40, 0.18);
}

/* Image area: fixed aspect ratio + object-fit keeps every card's image
   the same visual proportion regardless of the source photo's own
   dimensions, so rows stay aligned instead of the tallest image
   dictating an uneven card height. Subtle, consistent zoom on hover
   (Astra's own native hover behaviour, just restyled). */
ul.products .astra-shop-thumbnail-wrap {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  display: block;
  position: relative;
}
ul.products .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link {
  position: static !important;
  height: 100% !important;
  display: block !important;
}
ul.products .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease;
}
ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.04);
}
/* Subtle bottom gradient so the tag/badge overlay chips stay readable
   over any photo. */
ul.products .astra-shop-thumbnail-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Astra's native quick-add hover trigger on the image ("Product hover
   behaviour where supported") -- kept, just recoloured to the brand
   accent instead of Astra's default blue/green so it fits the design
   system rather than being removed. */
ul.products .ast-on-card-button {
  background-color: rgba(10, 10, 10, 0.85) !important;
  color: #C2D929 !important;
  border: 1px solid #3A3A34 !important;
}
ul.products .ast-on-card-button:hover {
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border-color: #C2D929 !important;
}

/* Bestseller badge + remaining tag, added via woocommerce_before/after_
   shop_loop_item_title hooks -- an overlay on the image (matching this
   card system's look) rather than a price/tag footer row. */
ul.products .astra-shop-thumbnail-wrap .badge-olive {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
ul.products .astra-shop-thumbnail-wrap .card-footer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}
ul.products .card-footer .tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #3A3A34;
  background: #131311;
  color: #F6F6F1;
  white-space: nowrap;
}
ul.products .badge-olive {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(163, 184, 40, 0.16);
  color: #C2D929;
  border: 1px solid #7A8A1E;
}

/* WooCommerce's native sale badge -- top-right (the Bestseller badge
   above already owns top-left), same pill language as the rest of the
   card system, noticeable without overpowering the image. */
ul.products span.onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #C2D929;
  color: #0A0A0A;
  border: none;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}

/* Card body */
ul.products .astra-shop-summary-wrap {
  padding: 20px 20px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
ul.products .astra-shop-summary-wrap > .ast-woo-product-category {
  display: none !important;
}
ul.products .woocommerce-loop-product__title {
  font-family: Poppins, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #F6F6F1 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
ul.products .woocommerce-loop-product__title a { color: inherit; }
ul.products .ast-loop-product__link:hover .woocommerce-loop-product__title,
ul.products .woocommerce-LoopProduct-link:hover ~ .astra-shop-summary-wrap .woocommerce-loop-product__title {
  color: #C2D929;
}

/* Star rating (woocommerce_template_loop_rating -- kept, colour only) */
ul.products .star-rating {
  color: #3A3A34;
  font-size: 13px;
  margin: 0;
}
ul.products .star-rating span { color: #C2D929; }

/* Short excerpt: supporting information between title and price, kept
   short and clamped so it never pushes cards to uneven heights. */
ul.products .boo-card-excerpt {
  color: #B9B9AE;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price + sale price: current price always the clear focal point;
   the original (del) price visibly secondary, never competing. Pinned
   to the bottom of the card body via margin-top:auto so it -- and the
   Add to Cart button after it -- line up across a row even when
   titles/excerpts differ in length. */
ul.products .astra-shop-summary-wrap .price,
ul.products .astra-shop-summary-wrap .woocommerce-Price-amount.amount {
  font-family: Poppins, sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #C2D929 !important;
}
ul.products .astra-shop-summary-wrap .price {
  margin-top: auto;
  padding-top: 4px;
}
ul.products .astra-shop-summary-wrap .price del {
  margin-right: 6px;
}
ul.products .astra-shop-summary-wrap .price del .woocommerce-Price-amount {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #83837A !important;
  opacity: 1;
}
ul.products .astra-shop-summary-wrap .price ins {
  text-decoration: none;
}

/* Add to Cart: the site's real button style (pill, accent-bright fill,
   dark text, Poppins bold) -- the same visual language as
   .single_add_to_cart_button on the product page, not a separate
   card-only button style. */
ul.products .astra-shop-summary-wrap a.button.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 12px;
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 0.6rem 1.1rem !important;
  line-height: 1.2;
  transition: background-color 0.2s ease;
}
ul.products .astra-shop-summary-wrap a.button.add_to_cart_button:hover {
  background-color: #A3B828 !important;
  color: #0A0A0A !important;
}
ul.products .astra-shop-summary-wrap a.button.add_to_cart_button:focus-visible,
ul.products .ast-on-card-button:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 2px;
}
ul.products .astra-shop-summary-wrap a.added_to_cart {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #83837A;
  text-decoration: underline;
}

/* Mobile: 1-2 columns depending on the width Astra's own .columns-N
   breakpoints already resolve to -- gap and card internals just need
   to stay comfortable at narrow widths, not the grid mechanism itself. */
@media (max-width: 480px) {
  ul.products { gap: 16px !important; }
  ul.products .astra-shop-summary-wrap { padding: 16px 16px 14px !important; }
  ul.products .astra-shop-summary-wrap a.button.add_to_cart_button {
    align-self: stretch;
    justify-content: center;
  }
}

/* ---------- 22. Footer: kill phantom empty grid row ---------- */
/* Elementor's base .e-con default sets --e-con-grid-template-rows to
   "repeat(2,1fr)". The footer's main grid container only overrides the
   column count (--e-con-grid-template-columns), so it inherits that
   2-row template at every breakpoint. At desktop width the 4 items (logo
   block + 3 nav columns) all fit in a single row, but the grid still
   reserves a second explicit row the same height as the first --
   rendering as a large blank gap above the copyright bar. Overriding the
   row template to "auto" lets the grid size rows from actual content
   instead, which is correct at every breakpoint (1, 2 or 4 columns). */
.elementor-159 .elementor-element.elementor-element-726da11 {
  --e-con-grid-template-rows: auto !important;
}

/* ---------- 23a. Elementor Grid containers: kill phantom empty row
   (general fix) ---------- */
/* Elementor's base .e-con default sets --e-con-grid-template-rows to
   "repeat(2,1fr)" for every Grid-type container, whether or not the
   container actually has two rows' worth of content. When a Grid
   container holds items that only fill one row (e.g. a 2-column layout
   with exactly 2 items, as in the footer and the single-product page's
   gallery/summary layout), the unused second row still reserves space
   because equal 1fr tracks share a single "tallest row" sizing basis --
   doubling the container's height with a large blank gap. Overriding to
   "auto" lets every Grid container size its rows from actual content,
   which is correct whenever a Grid genuinely has only as many rows as
   it has content for (no current container on this site intentionally
   relies on the 2-row default). */
.e-con.e-grid {
  --e-con-grid-template-rows: auto !important;
}

/* ---------- 23. Checkout page: fix mobile horizontal scroll ---------- */
/* Elementor's Checkout widget lays its two columns out with CSS Grid
   (.e-checkout__container). Grid items default to min-width:auto, so
   when the billing/shipping column's content (WooCommerce's own
   #customer_details.col2-set fields) has any intrinsic width larger
   than the grid track, the whole track -- and the page -- blows out
   past the viewport instead of wrapping/shrinking. Forcing min-width:0
   on the grid and its column items makes them respect the track width
   like a normal block, which is what causes the horizontal scrollbar
   on the checkout page on mobile. */
.e-checkout__container,
.e-checkout__column,
.e-checkout__column-start,
.e-checkout__column-end {
  min-width: 0 !important;
}
body.woocommerce-checkout {
  overflow-x: hidden;
}

/* ---------- 24. Single Product page -- Astra's NATIVE WooCommerce
   single-product template ---------- */
/* Per the site brief: keep Astra's own single-product template as the
   structural foundation (native gallery, title, rating, price, short
   description, variations, quantity, Add to Cart, stock, SKU,
   categories, tags, tabs, related products, mobile responsiveness and
   accessibility all stay WooCommerce/Astra's real, unmodified
   functionality) and restyle it to the design system with CSS only.
   The Elementor "B.O.O. Single Product" template has been unpublished;
   this page now renders through Astra's own template, classic theme
   (no theme.json / global-styles block on the front end), so literal
   hex tokens are used -- consistent with the values used elsewhere in
   this file for other classic-rendered contexts (Sections 21/25).
   Scoped to body.single-product, WooCommerce's own body class for
   every single product page, so nothing else on the site is touched. */

body.single-product div.product {
  padding-block: 40px;
}

/* Breadcrumb (native woocommerce_breadcrumb()) */
body.single-product .woocommerce-breadcrumb {
  color: #83837A;
  font-size: 13px;
  margin-bottom: 20px;
}
body.single-product .woocommerce-breadcrumb a { color: #83837A; }
body.single-product .woocommerce-breadcrumb a:hover { color: #C2D929; }

/* Astra's own pre-title category link -- restyled as a small eyebrow
   rather than removed, since it's a real, working link to the category
   archive (the "Product categories" functionality the brief asks to
   preserve), just presented as a label instead of a paragraph. */
body.single-product .single-product-category {
  display: block;
  margin-bottom: 8px;
}
body.single-product .single-product-category a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #83837A;
  text-decoration: none;
}
body.single-product .single-product-category a:hover { color: #C2D929; }

/* Bestseller badge (boo_cafe_pdp_badge_output(), hooked just before
   Astra's title/category output -- an addition, not a replacement) */
body.single-product .boo-pdp-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(163, 184, 40, 0.16);
  color: #C2D929;
  border: 1px solid #7A8A1E;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Title */
body.single-product h1.product_title {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.15;
  color: #F6F6F1;
  margin: 0 0 12px;
}

/* Native rating widget (real average/count from product meta) --
   colour + spacing only, output and review-tab link untouched. */
body.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
body.single-product .star-rating { color: #3A3A34; font-size: 15px; }
body.single-product .star-rating span { color: #C2D929; }
body.single-product .woocommerce-review-link {
  color: #83837A;
  font-size: 13px;
  text-decoration: none;
}
body.single-product .woocommerce-review-link:hover { color: #C2D929; }

/* Price -- the generic Section 6/18 rules key off --wp--preset--*
   tokens that aren't in scope on this classic-rendered template, so
   their !important silently falls back to an inherited colour. */
body.single-product .summary .price,
body.single-product .summary .woocommerce-Price-amount.amount {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #C2D929 !important;
}
body.single-product .summary .price del .woocommerce-Price-amount {
  color: #83837A !important;
  font-weight: 600;
  font-size: 18px;
}
body.single-product .summary .price ins { text-decoration: none; }

/* Short description */
body.single-product .woocommerce-product-details__short-description {
  color: #B9B9AE;
  font-size: 16px;
  line-height: 1.6;
  margin: 4px 0 20px;
}

/* Variations table (Spice Level, etc.) */
body.single-product table.variations {
  width: 100%;
  margin: 4px 0 0;
  border: none;
}
body.single-product .variations td,
body.single-product .variations th {
  padding: 0;
  border: none;
  display: block;
  width: 100%;
}
body.single-product .variations th.label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #83837A;
  margin-bottom: 8px;
}
body.single-product .variations label {
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 14px;
}
body.single-product .woocommerce-variation-add-to-cart { margin-top: 12px; }
body.single-product .woocommerce-variation-price .price { font-size: 26px; }

/* Spice Level pill buttons: boo-cafe-pdp.js visually hides the native
   <select> (kept in the DOM -- WooCommerce's own variation-form script
   still reads/sets its value on every click) and renders a button per
   option alongside it, so the underlying functionality is completely
   unchanged, just presented as a segmented control instead of a
   dropdown, matching the style guide's variation-selector treatment. */
body.single-product select.boo-swatch-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.single-product .boo-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
body.single-product .boo-swatch-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid #3A3A34;
  background: #131311;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
body.single-product .boo-swatch-pill:hover { border-color: #B9B9AE; }
body.single-product .boo-swatch-pill.is-active {
  border-color: #C2D929;
  color: #C2D929;
  background: rgba(194, 217, 41, 0.1);
}
body.single-product .boo-swatch-pill:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 2px;
}
/* "Clear" reset link: restyled, not hidden -- it's a real WooCommerce
   convenience (clears the variation selection entirely), so the brief's
   "do not remove functionality just to achieve the design" keeps it. */
body.single-product .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #83837A;
  text-decoration: underline;
}
body.single-product .reset_variations:hover { color: #C2D929; }

/* Quantity + Add to Cart, side by side */
body.single-product .cart,
body.single-product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
body.single-product .quantity { margin: 0; }
body.single-product .quantity .qty {
  width: 64px;
  height: 48px;
  text-align: center;
  background: #131311;
  border: 1px solid #3A3A34;
  border-radius: 12px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 16px;
}
body.single-product .quantity .qty:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 1px;
}
body.single-product .single_add_to_cart_button {
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  height: 48px;
  transition: background-color 0.2s ease;
}
body.single-product .single_add_to_cart_button:hover { background-color: #A3B828 !important; }
body.single-product .single_add_to_cart_button.disabled { opacity: 0.5; }

/* Stock status */
body.single-product p.stock { font-size: 13px; font-weight: 600; margin-top: 10px; }
body.single-product p.stock.in-stock { color: #6FBF73; }
body.single-product p.stock.out-of-stock { color: #E05A4E; }

/* Testimonial quote card (boo_cafe_pdp_testimonial_output(), hooked
   right after the Add to Cart form -- new content, not a replacement
   of anything native) */
body.single-product .boo-pdp-testimonial {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-radius: 20px;
  padding: 24px;
  margin-top: 24px;
}
body.single-product .boo-pdp-testimonial-heading {
  color: #C2D929;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 12px;
}
body.single-product .boo-pdp-testimonial-quote {
  color: #F6F6F1;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
}
body.single-product .boo-pdp-testimonial-author {
  color: #83837A;
  font-size: 13px;
  margin: 0;
}

/* Native SKU / Category / Tags meta line -- kept and restyled
   (never hidden) as small text with pill-style category/tag links,
   consistent with the style guide's tag component. */
body.single-product .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #2A2A26;
  font-size: 12px;
  color: #83837A;
}
body.single-product .product_meta .sku_wrapper .sku { color: #B9B9AE; }
body.single-product .product_meta a {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #3A3A34;
  background: #131311;
  color: #B9B9AE;
  text-decoration: none;
}
body.single-product .product_meta a:hover { border-color: #C2D929; color: #C2D929; }

/* Product image gallery */
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery img {
  border-radius: 20px;
}
body.single-product .flex-control-thumbs {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
body.single-product .flex-control-thumbs li { width: auto; }
body.single-product .flex-control-thumbs img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  opacity: 0.7;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
body.single-product .flex-control-thumbs img.flex-active,
body.single-product .flex-control-thumbs img:hover {
  border-color: #C2D929;
  opacity: 1;
}

/* Product data tabs (Description / Additional information / Reviews) --
   kept and restyled, per the brief's explicit "Product tabs" and
   "Product navigation where applicable" preservation requirement. */
body.single-product .woocommerce-tabs { margin-top: 56px; }
body.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid #2A2A26;
}
body.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 12px 0;
  color: #83837A;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: #F6F6F1;
  border-bottom-color: #C2D929;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover { color: #F6F6F1; }
body.single-product .woocommerce-tabs .panel {
  color: #B9B9AE;
  font-size: 15px;
  line-height: 1.7;
}
body.single-product .woocommerce-tabs .panel h2 {
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 16px;
}
body.single-product .woocommerce-tabs table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
}
body.single-product .woocommerce-tabs table.shop_attributes th,
body.single-product .woocommerce-tabs table.shop_attributes td {
  padding: 10px 0;
  border-bottom: 1px solid #2A2A26;
  color: #B9B9AE;
  font-size: 14px;
}
body.single-product .woocommerce-tabs table.shop_attributes th { color: #F6F6F1; font-weight: 600; }
body.single-product #reviews .comment-form input,
body.single-product #reviews .comment-form textarea {
  background: #131311;
  border: 1px solid #3A3A34;
  border-radius: 10px;
  color: #F6F6F1;
  padding: 10px 14px;
  font-family: Poppins, sans-serif;
}
body.single-product #reviews .comment-form textarea { width: 100%; }
body.single-product #reviews .comment-form p.stars a { color: #C2D929; }
body.single-product #reviews .star-rating { color: #C2D929; }
body.single-product #reviews #submit {
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
}
body.single-product #reviews #submit:hover { background-color: #A3B828 !important; }

/* ---------- 25. "Complete The Order" related-products section on the
   single product page -- WooCommerce's own real, unmodified related-
   products query (woocommerce_output_related_products()); only its
   heading text and card styling are customised. Reuses the Home page
   Fan Favorites card design. Scoped to .related.products, which only
   ever appears in this one place on the site. ---------- */
body.single-product .related.products {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid #2A2A26;
}
body.single-product .related.products > h2 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #F6F6F1;
  margin: 0 0 24px;
}
/* "Goes Well With" eyebrow -- pure CSS, not markup; the heading text
   itself becomes "Complete The Order" via a gettext filter in PHP. */
body.single-product .related.products > h2::before {
  content: "Goes Well With";
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C2D929;
  margin-bottom: 8px;
}
/* Card styling itself (background, image, badge, title, price, Add to
   Cart, etc.) comes from the global "ul.products li.product" rules in
   Section 21 -- this section only adds the heading and section rhythm
   specific to this one placement, so Related Products looks like the
   same card system used everywhere else on the site, not a variant. */

/* Mobile: comfortable single-column stack, tappable controls, no
   horizontal overflow -- do not just shrink the desktop layout. */
@media (max-width: 767px) {
  body.single-product div.product { padding-block: 24px; }
  body.single-product h1.product_title { font-size: 28px; }
  body.single-product .related.products > h2 { font-size: 24px; }
  body.single-product .single_add_to_cart_button {
    flex: 1 1 auto;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  body.single-product .cart,
  body.single-product form.cart { gap: 10px; }
  body.single-product .quantity .qty { height: 48px; }
  body.single-product .woocommerce-tabs ul.tabs { gap: 16px; }
}

/* ---------- 26. Cart page -- native WooCommerce cart (Elementor's
   "Cart" widget wrapping the classic cart shortcode) ---------- */
/* Per the site brief: this is the real WooCommerce cart form
   (table.cart, native qty inputs, native remove links, native coupon
   form, native cart_totals, native Proceed to Checkout button) laid
   out by Elementor's Cart widget in a two-column CSS Grid
   (.e-cart__container). Nothing here replaces or rebuilds that
   markup -- it only restyles it to the site's design system (same
   literal-hex tokens used in Sections 21/24, since this is classic-
   rendered, no theme.json vars) and fixes the same Grid min-width
   overflow bug already fixed for Checkout in Section 23. Scoped to
   body.woocommerce-cart so nothing else on the site is touched. */

/* Same Grid min-width:auto overflow bug as Checkout (Section 23) --
   without this, the items column's intrinsic content width can blow
   the grid track (and the page) out past the viewport on mobile. */
.e-cart__container,
.e-cart__column,
.e-cart__column-start,
.e-cart__column-end,
.e-cart__column-inner {
  min-width: 0 !important;
}
body.woocommerce-cart {
  overflow-x: hidden;
}

/* WooCommerce notices (empty-cart notice, coupon applied/removed,
   "please enter a valid coupon" errors, etc.) -- left-accent card,
   matching the brand instead of WooCommerce's default flat banners. */
body.woocommerce-cart .woocommerce-notices-wrapper {
  margin-bottom: 24px;
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-left: 3px solid #A3B828;
  border-radius: 14px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  padding: 16px 20px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.woocommerce-cart .woocommerce-error {
  border-left-color: #E05A4E;
}
body.woocommerce-cart .woocommerce-info {
  border-left-color: #B9B9AE;
}
body.woocommerce-cart .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-error a.button,
body.woocommerce-cart .woocommerce-info a.button {
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border-radius: 999px !important;
  font-weight: 700;
  padding: 10px 20px;
  white-space: nowrap;
}
body.woocommerce-cart .woocommerce-message a.button:hover,
body.woocommerce-cart .woocommerce-error a.button:hover,
body.woocommerce-cart .woocommerce-info a.button:hover {
  background-color: #A3B828 !important;
}

/* Cart items -- the form itself becomes one card so the page reads as
   a single cohesive surface (heading -> items -> coupon), matching
   the site's card language rather than a bare, floating table. */
body.woocommerce-cart .woocommerce-cart-form {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-radius: 24px;
  padding: 8px 28px;
}
body.woocommerce-cart table.shop_table.cart {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
body.woocommerce-cart table.shop_table.cart thead th {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #83837A;
  border-bottom: 1px solid #2A2A26;
  padding: 18px 12px;
  text-align: left;
}
body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
  border-bottom: 1px solid #2A2A26;
}
body.woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child {
  border-bottom: 0;
}
body.woocommerce-cart table.shop_table.cart td {
  padding: 20px 12px;
  vertical-align: middle;
  color: #F6F6F1;
}

/* Product thumbnail -- rounded, consistent with the card image
   treatment used everywhere else (Section 21). */
body.woocommerce-cart td.product-thumbnail a img,
body.woocommerce-cart td.product-thumbnail img {
  border-radius: 14px !important;
  width: 88px;
  height: 88px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Product name + variation meta ("Spice Level: Fiery" etc.) */
body.woocommerce-cart td.product-name a {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F6F6F1;
  text-decoration: none;
}
body.woocommerce-cart td.product-name a:hover { color: #C2D929; }
body.woocommerce-cart td.product-name dl.variation {
  margin: 6px 0 0;
  font-size: 13px;
  color: #B9B9AE;
}
body.woocommerce-cart td.product-name dl.variation dt,
body.woocommerce-cart td.product-name dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}
body.woocommerce-cart td.product-name dl.variation dt::after { content: ": "; }
body.woocommerce-cart td.product-name dl.variation p { margin: 0; }

/* Unit + subtotal price columns */
body.woocommerce-cart td.product-price .woocommerce-Price-amount,
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  color: #F6F6F1;
}
body.woocommerce-cart td.product-price del .woocommerce-Price-amount {
  font-weight: 400;
  color: #83837A;
  font-size: 13px;
  margin-right: 6px;
}
body.woocommerce-cart td.product-price ins { text-decoration: none; }

/* Quantity input -- enlarged to the same ~64x48 touch-friendly
   treatment used on the single-product page (Section 24), no custom
   stepper buttons added (none exist natively here). */
body.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex;
}
body.woocommerce-cart td.product-quantity input.qty {
  width: 64px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background-color: #131311 !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 12px !important;
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 4px 8px !important;
}
body.woocommerce-cart td.product-quantity input.qty:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 2px;
  border-color: #C2D929 !important;
}

/* Remove-item control -- native "x" link, recoloured, hover = danger */
body.woocommerce-cart td.product-remove a.remove {
  background: transparent !important;
  color: #A3B828 !important;
  border: 1px solid #3A3A34;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  line-height: 30px;
  font-size: 18px;
}
body.woocommerce-cart td.product-remove a.remove:hover {
  background: #E05A4E !important;
  color: #F6F6F1 !important;
  border-color: #E05A4E;
}

/* Coupon field + Apply Coupon (outline secondary) + Update Cart
   (outline secondary) -- same button hierarchy used across the site:
   solid accent-bright = primary action, outline accent = secondary. */
body.woocommerce-cart .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}
body.woocommerce-cart .coupon label { display: none; }
body.woocommerce-cart #coupon_code.input-text {
  background-color: #131311 !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 999px !important;
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  padding: 12px 18px !important;
  height: auto;
  width: 200px;
  max-width: 100%;
}
body.woocommerce-cart #coupon_code.input-text:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 2px;
}
body.woocommerce-cart #coupon_code.input-text::placeholder { color: #83837A; }
body.woocommerce-cart .coupon .button,
body.woocommerce-cart button[name="update_cart"] {
  background: transparent !important;
  border: 2px solid #A3B828 !important;
  color: #A3B828 !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px !important;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
body.woocommerce-cart .coupon .button:hover,
body.woocommerce-cart button[name="update_cart"]:hover {
  background: #A3B828 !important;
  color: #0A0A0A !important;
}
body.woocommerce-cart .coupon .button:disabled,
body.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
body.woocommerce-cart button[name="update_cart"] {
  margin-top: 12px;
}
body.woocommerce-cart .actions {
  border-top: 1px solid #2A2A26;
  padding-top: 4px;
}

/* Cart totals -- a distinct, slightly elevated card so subtotal /
   shipping / tax / total are easy to scan without visual noise. */
body.woocommerce-cart .cart-collaterals { margin-top: 24px; }
body.woocommerce-cart .cart_totals {
  background: #131311 !important;
  border: 1px solid #2A2A26 !important;
  border-radius: 24px !important;
  padding: 28px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
body.woocommerce-cart .cart_totals > h2 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #F6F6F1;
  margin: 0 0 16px;
}
body.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  padding: 14px 0;
  color: #B9B9AE;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid #2A2A26 !important;
}
body.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  color: #F6F6F1;
  font-weight: 600;
}
/* Total row -- the one figure that should carry real visual weight */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0 !important;
  padding-top: 18px;
  font-size: 18px;
  font-weight: 700;
  color: #F6F6F1;
}
body.woocommerce-cart .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
  color: #C2D929 !important;
  font-weight: 800;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals select,
body.woocommerce-cart .cart_totals .shipping-calculator-form input,
body.woocommerce-cart .cart_totals .shipping-calculator-form select {
  background-color: #0A0A0A !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 10px !important;
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  padding: 8px 12px !important;
}
body.woocommerce-cart .cart_totals .shipping-calculator-button {
  color: #A3B828;
  text-decoration: underline;
  font-size: 13px;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
  color: #B9B9AE;
  font-size: 13px;
}
/* Same fix as the Checkout page (Section 27): without an explicit
   font-size directly on the price span, the global
   ".price, .woocommerce-Price-amount { font-size: var(--wp--preset--
   font-size--large) !important }" rule (Section 1) wins here too --
   that custom property never resolves on this classic-rendered
   template, and mobile Chrome's automatic text-size "boosting" was
   re-inflating the isolated price text on top of that. Scoped only to
   the shipping-method price, so the location label stays more
   prominent and every other cart price (line items, cart totals) is
   untouched. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods label {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods .woocommerce-Price-amount {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #B9B9AE !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Proceed to Checkout -- the primary solid pill, matching the
   single-product Add to Cart button (Section 24) so the whole site
   shares one primary-button language. */
body.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 20px;
  padding: 0;
}
body.woocommerce-cart a.checkout-button.button.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 24px !important;
  text-transform: none;
  transition: background-color .15s ease;
}
body.woocommerce-cart a.checkout-button.button.alt:hover {
  background-color: #A3B828 !important;
}

/* Empty-cart state -- centred, matching the brand instead of the
   default plain paragraph + link. */
body.woocommerce-cart .cart-empty.woocommerce-info {
  display: block;
  text-align: center;
  padding: 48px 24px;
  font-size: 16px;
}
body.woocommerce-cart .cart-empty.woocommerce-info::before {
  display: none;
}
body.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-top: 16px;
}
body.woocommerce-cart .return-to-shop .button.wc-backward {
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  padding: 14px 28px !important;
  display: inline-block;
}
body.woocommerce-cart .return-to-shop .button.wc-backward:hover {
  background-color: #A3B828 !important;
}

/* Mobile: WooCommerce's own shop_table_responsive mechanism already
   turns each cart row into a labelled stack (data-title -> ::before)
   -- this only refines spacing/sizing for comfortable one-hand use,
   it does not rebuild the layout. */
@media (max-width: 767px) {
  body.woocommerce-cart .woocommerce-cart-form { padding: 4px 16px; }
  body.woocommerce-cart table.shop_table.cart thead { display: none; }
  body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
    display: block;
    padding: 20px 0;
  }
  body.woocommerce-cart table.shop_table.cart td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border: 0 !important;
  }
  body.woocommerce-cart table.shop_table.cart td::before {
    content: attr(data-title);
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #83837A;
    margin-right: 12px;
  }
  body.woocommerce-cart td.product-remove {
    justify-content: flex-end;
  }
  body.woocommerce-cart td.product-remove::before { display: none; }
  body.woocommerce-cart td.product-thumbnail {
    justify-content: flex-start;
  }
  body.woocommerce-cart td.product-thumbnail::before { display: none; }
  body.woocommerce-cart td.product-thumbnail a img,
  body.woocommerce-cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
  }
  body.woocommerce-cart td.product-name { align-items: flex-start; }
  body.woocommerce-cart .coupon {
    flex-direction: column;
    align-items: stretch;
  }
  body.woocommerce-cart #coupon_code.input-text { width: 100%; }
  body.woocommerce-cart .coupon .button { width: 100%; text-align: center; }
  body.woocommerce-cart .cart_totals { padding: 20px; }
}

/* ---------- 27. Checkout page -- native WooCommerce checkout
   (Elementor's "Checkout" widget wrapping the classic checkout form)
   ---------- */
/* Per the site brief: this is the real WooCommerce checkout form
   (#customer_details billing fields, native selects incl. select2,
   order notes, native payment_methods incl. Paystack, native
   #place_order button, native order review table/totals, native
   coupon toggle) laid out by Elementor's Checkout widget in a
   two-column CSS Grid (.e-checkout__container). Nothing here
   replaces or rebuilds that markup, breaks validation, AJAX totals
   updates, or payment gateway behaviour -- it only restyles it to
   the site's design system (same literal-hex tokens used in
   Sections 21/24/26, classic-rendered, no theme.json vars). Scoped
   to body.woocommerce-checkout so nothing else on the site is
   touched. */

/* Same Grid min-width:auto overflow bug already fixed for the
   container/columns in Section 23 -- also cover column-inner, which
   Section 23 predates and doesn't list. */
.e-checkout__column-inner {
  min-width: 0 !important;
}

/* Section headings ("Billing details", "Your order", "Additional
   information", incl. the "Have a coupon?" prompt) -- one consistent
   heading style instead of Elementor's generic small bold text. */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #F6F6F1;
  margin: 0 0 20px;
}
/* WooCommerce leaves the "Additional information" <h3> empty when no
   filter adds text to it -- an empty heading still takes up a line,
   so collapse it rather than showing a blank gap. */
body.woocommerce-checkout .woocommerce-additional-fields > h3:empty {
  display: none;
  margin: 0;
}

/* Billing card + additional-fields card -- one consistent surface,
   matching the card language used on Cart/Single-product. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2:not(:empty) {
  background: #1B1B17 !important;
  border: 1px solid #2A2A26 !important;
  border-radius: 24px !important;
  padding: 28px !important;
}
body.woocommerce-checkout #customer_details .col-2:empty {
  display: none;
}
body.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #2A2A26;
}

/* Form fields -- labels, inputs, selects, textareas, all one
   consistent look. Moderate radius (not pill), comfortable height,
   readable text, visible focus. */
body.woocommerce-checkout .form-row label {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #B9B9AE;
  margin-bottom: 6px;
  display: inline-block;
}
body.woocommerce-checkout .form-row label .required {
  color: #E05A4E;
  text-decoration: none;
}
body.woocommerce-checkout .form-row label .optional {
  color: #83837A;
  font-weight: 400;
}
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
  background-color: #131311 !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 10px !important;
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  min-height: 48px;
  padding: 12px 16px !important;
  width: 100%;
  box-sizing: border-box;
}
body.woocommerce-checkout textarea {
  min-height: 90px;
  padding-top: 12px !important;
}
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder {
  color: #83837A;
  opacity: 1;
}
body.woocommerce-checkout input:focus-visible,
body.woocommerce-checkout textarea:focus-visible,
body.woocommerce-checkout select:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 1px;
  border-color: #C2D929 !important;
}
body.woocommerce-checkout .form-row {
  margin-bottom: 18px;
}
/* Native error state (validation) -- clear, on-brand red, no reliance
   on colour alone (label + border both change). */
body.woocommerce-checkout .form-row.woocommerce-invalid input,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #E05A4E !important;
}
body.woocommerce-checkout .form-row.woocommerce-invalid label {
  color: #E05A4E !important;
}

/* select2 (country / state dropdowns) -- match native inputs; the
   dropdown popup is appended to <body> so it needs its own rules. */
body.woocommerce-checkout .select2-container .select2-selection--single {
  background-color: #131311 !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 10px !important;
  height: 48px !important;
  display: flex;
  align-items: center;
}
body.woocommerce-checkout .select2-selection__rendered {
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  padding-left: 16px !important;
  line-height: normal !important;
}
body.woocommerce-checkout .select2-selection__arrow {
  height: 46px !important;
}
.select2-container--default .select2-dropdown {
  background-color: #131311;
  border: 1px solid #3A3A34;
  border-radius: 10px;
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0A0A0A;
  border: 1px solid #3A3A34;
  border-radius: 6px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
}
.select2-container--default .select2-results__option {
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #A3B828;
  color: #0A0A0A;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #2A2A26;
}

/* Checkboxes / radios (payment methods, terms, ship-to-different) --
   accent-color keeps the native control, just recolours it. */
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"] {
  accent-color: #A3B828;
  width: 16px;
  height: 16px;
}

/* Order review ("Your order") -- clear product / qty / total columns,
   a properly weighted total row, no border-collapse artifacts. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #83837A;
  border: 0 !important;
  border-bottom: 1px solid #2A2A26 !important;
  padding: 0 0 12px;
  text-align: left;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr th {
  border: 0 !important;
  border-bottom: 1px solid #2A2A26 !important;
  padding: 12px 0;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 14px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr td {
  text-align: right;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  color: #83837A;
  font-weight: 500;
  margin-left: 4px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0 !important;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 700;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
  color: #C2D929 !important;
  font-weight: 800;
}

/* Shipping method list (Pickup + Lagos delivery zones) inside the
   checkout order review. The location name stays at the table's
   normal 14px/#F6F6F1 (unchanged, inherited from the tfoot td rule
   above) so it remains the prominent label; only the fee amount is
   reduced and muted so it reads as secondary information. Scoped to
   .woocommerce-shipping-methods specifically so the order total and
   every other checkout price (line items, taxes, grand total) are
   untouched. */
body.woocommerce-checkout .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Stops mobile Chrome's automatic "font boosting" from re-inflating
     the small, isolated price text below back up to a large size --
     it only kicks in on narrow viewports and only for text it decides
     looks too small next to the amount of surrounding empty width, so
     desktop was never affected but phones were, even though the
     explicit 12px on .woocommerce-Price-amount below was already
     being applied underneath the boost. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.woocommerce-checkout .woocommerce-shipping-methods li {
  padding: 6px 0;
}
body.woocommerce-checkout .woocommerce-shipping-methods label {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.woocommerce-checkout .woocommerce-shipping-methods .woocommerce-Price-amount {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #B9B9AE !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* "Have a coupon?" toggle + inline coupon form -- same secondary
   outline-button language as Cart's Apply Coupon. */
body.woocommerce-checkout .e-woocommerce-coupon-nudge {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: #B9B9AE;
  margin-bottom: 16px;
}
body.woocommerce-checkout .e-show-coupon-form {
  color: #A3B828 !important;
  font-weight: 700;
  text-decoration: underline;
}
body.woocommerce-checkout .e-coupon-anchor input.input-text {
  background-color: #131311 !important;
  border: 1px solid #3A3A34 !important;
  border-radius: 10px !important;
  color: #F6F6F1 !important;
  font-family: Poppins, sans-serif;
  padding: 12px 16px !important;
  min-height: 44px;
}
body.woocommerce-checkout .e-coupon-anchor button,
body.woocommerce-checkout .e-coupon-anchor input[type="submit"] {
  background: transparent !important;
  border: 2px solid #A3B828 !important;
  color: #A3B828 !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  padding: 10px 22px !important;
  white-space: nowrap;
}
body.woocommerce-checkout .e-coupon-anchor button:hover,
body.woocommerce-checkout .e-coupon-anchor input[type="submit"]:hover {
  background: #A3B828 !important;
  color: #0A0A0A !important;
}

/* Payment methods -- native gateway list (Paystack / BACS / COD),
   each option gets a card row so the whole block reads as one
   trustworthy, considered panel rather than a bare native list. */
body.woocommerce-checkout #payment {
  background: #1B1B17 !important;
  border: 1px solid #2A2A26 !important;
  border-radius: 24px !important;
  padding: 24px !important;
  margin-top: 24px;
}
body.woocommerce-checkout ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
  border-bottom: 1px solid #2A2A26;
  padding: 14px 0;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:last-of-type {
  border-bottom: 0;
}
body.woocommerce-checkout ul.wc_payment_methods label {
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Native gateway branding images (e.g. Paystack's payment-options
   badge) are often designed on a light/white background -- rather
   than fight or hide the plugin's own image, give it a small white
   chip so it reads as an intentional "accepted payment methods"
   badge instead of a jarring rectangle on the dark page. */
body.woocommerce-checkout ul.wc_payment_methods label img {
  background: #F6F6F1;
  border-radius: 6px;
  padding: 3px 6px;
  max-height: 22px;
  width: auto;
  vertical-align: middle;
}
body.woocommerce-checkout .payment_box {
  background: #131311 !important;
  border: 1px solid #2A2A26;
  border-radius: 14px !important;
  color: #B9B9AE;
  font-size: 14px;
  margin-top: 12px !important;
  padding: 14px 16px !important;
}
body.woocommerce-checkout .payment_box p { margin: 0; }
body.woocommerce-checkout .payment_box a { color: #A3B828; }

/* Terms & privacy text, Place Order */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  color: #83837A;
  font-size: 13px;
  margin: 16px 0;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: #A3B828;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: #B9B9AE;
  font-size: 14px;
}
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
  width: 100% !important;
  background-color: #C2D929 !important;
  color: #0A0A0A !important;
  border-radius: 999px !important;
  font-family: Poppins, sans-serif;
  font-weight: 700 !important;
  font-size: 16px;
  padding: 18px 24px !important;
  margin-top: 16px;
  transition: background-color .15s ease;
}
body.woocommerce-checkout #place_order:hover {
  background-color: #A3B828 !important;
}

/* WooCommerce notices on checkout (validation errors, "please fill
   in required field", coupon errors) -- same left-accent card as
   the notices already styled on Cart (Section 26). */
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-left: 3px solid #A3B828;
  border-radius: 14px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  padding: 16px 20px;
  list-style: none;
  margin-bottom: 24px;
}
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #E05A4E;
}
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li {
  margin: 0;
}

/* Mobile: full-width fields, comfortable tap targets, no horizontal
   scroll, order summary and Place Order stay easy to reach. Native
   Elementor stacking already puts the order-review column in
   document order after billing -- this only refines spacing/sizing,
   it does not reorder or rebuild the layout. */
@media (max-width: 767px) {
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #payment {
    padding: 20px !important;
    border-radius: 20px !important;
  }
  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
  }
  body.woocommerce-checkout ul.wc_payment_methods label {
    font-size: 14px;
  }
  body.woocommerce-checkout #place_order {
    font-size: 15px;
    padding: 16px 20px !important;
  }
}

/* ---------- 28. Track My Order page ----------
   Built with the same Elementor + literal-hex-token pattern used for
   the Contact page's mailto form (Section 13-ish content widgets) --
   this page is not block/theme.json-rendered, so, consistent with
   Sections 21/24/25/26/27, literal hex values are used rather than
   --wp--preset--* custom properties. Scoped entirely to the
   .boo-track-order wrapper output by the [boo_track_order] shortcode
   (boo-cafe.php), so nothing else on the site is touched. ---------- */

.boo-track-order {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Lookup form -- one card, two fields side by side on tablet+/stacked
   on mobile, same input language as Checkout/Contact. */
.boo-track-form {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.boo-track-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 600px) {
  .boo-track-form-grid { grid-template-columns: 1fr 1fr; }
}
.boo-track-form .boo-field { display: flex; flex-direction: column; gap: 8px; }
.boo-track-form .boo-field label {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #F6F6F1;
}
.boo-track-form .boo-req { color: #C2D929; }
.boo-track-form input {
  background: #0A0A0A;
  border: 1.5px solid #3A3A34;
  border-radius: 10px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  min-height: 48px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}
.boo-track-form input::placeholder { color: #83837A; }
.boo-track-form input:focus-visible {
  outline: 2px solid #C2D929;
  outline-offset: 1px;
  border-color: #C2D929;
}
.boo-track-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #C2D929;
  color: #0A0A0A;
  border: none;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.boo-track-submit:hover { background-color: #A3B828; }
.boo-track-submit:focus-visible { outline: 2px solid #C2D929; outline-offset: 2px; }
.boo-track-form .boo-hint {
  margin: 12px 0 0;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  color: #83837A;
  text-align: center;
}

/* Error / no-match message -- same left-accent notice language used
   on Cart/Checkout, deliberately generic wording so an order number
   alone never confirms whether it exists. */
.boo-track-error {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-left: 3px solid #E05A4E;
  border-radius: 14px;
  padding: 16px 20px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 15px;
}

/* Result card */
.boo-track-result {
  background: #1B1B17;
  border: 1px solid #2A2A26;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  animation: boo-track-fade-in 0.25s ease;
}
@keyframes boo-track-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.boo-track-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2A2A26;
}
.boo-track-eyebrow {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #83837A;
}
.boo-track-result-head h3 {
  margin: 4px 0 0;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #F6F6F1;
}

/* Status pill -- olive by default (every in-progress status), red for
   cancelled/failed/refunded, green for completed. */
.boo-status-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(163, 184, 40, 0.16);
  color: #C2D929;
  border: 1px solid #7A8A1E;
}
.boo-status-pill.is-cancelled,
.boo-status-pill.is-failed,
.boo-status-pill.is-refunded {
  background: rgba(224, 90, 78, 0.14);
  color: #E05A4E;
  border-color: #E05A4E;
}
.boo-status-pill.is-completed {
  background: rgba(111, 191, 115, 0.14);
  color: #6FBF73;
  border-color: #6FBF73;
}

.boo-track-cancelled-note {
  background: rgba(224, 90, 78, 0.1);
  border: 1px solid #E05A4E;
  border-radius: 14px;
  padding: 16px 20px;
  color: #F6F6F1;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Progress stepper -- connected numbered dots, horizontal on
   tablet/desktop, wraps to a comfortable 2-per-row grid on narrow
   mobile so nothing is clipped or forced to scroll horizontally. */
.boo-track-stepper {
  display: flex;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  counter-reset: boo-track-step;
}
.boo-track-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  counter-increment: boo-track-step;
}
.boo-track-step::before {
  content: counter(boo-track-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: #1B1B17;
  border: 2px solid #3A3A34;
  color: #B9B9AE;
  z-index: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.boo-track-step::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 21px);
  right: calc(-50% + 21px);
  height: 2px;
  background: #3A3A34;
  z-index: 0;
  transition: background-color 0.2s ease;
}
.boo-track-step:last-child::after { display: none; }
.boo-track-step-label {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #B9B9AE;
  max-width: 92px;
  line-height: 1.3;
}
.boo-track-step.is-done::before {
  content: "\2713";
  background: #C2D929;
  border-color: #C2D929;
  color: #0A0A0A;
}
.boo-track-step.is-done::after { background: #C2D929; }
.boo-track-step.is-done .boo-track-step-label { color: #F6F6F1; }
.boo-track-step.is-current::before {
  background: #0A0A0A;
  border-color: #C2D929;
  color: #C2D929;
  box-shadow: 0 0 0 4px rgba(194, 217, 41, 0.22);
}
.boo-track-step.is-current .boo-track-step-label { color: #F6F6F1; font-weight: 700; }
@media (max-width: 560px) {
  .boo-track-stepper { flex-wrap: wrap; row-gap: 20px; }
  .boo-track-step { flex: 1 1 30%; }
  .boo-track-step::after { display: none; }
}

/* Order info cards -- reuse the same 2-col responsive grid pattern as
   the rest of the site's info-card groupings. */
.boo-track-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 600px) {
  .boo-track-info-grid { grid-template-columns: repeat(2, 1fr); }
}
.boo-track-info-grid .boo-info-card {
  background: #131311;
  border: 1px solid #2A2A26;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boo-info-label {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #83837A;
}
.boo-info-value {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #F6F6F1;
}
/* Explicit font-size + line-height here (not just color/weight) so this
   beats the global ".price, .wc-block-components-product-price,
   .woocommerce-Price-amount { font-size: var(--wp--preset--font-size--large) }"
   rule from Section 1 -- that custom property never resolves on this
   classic-rendered page, and an unresolved var() falls back to the
   inherited/initial size rather than to a lower-specificity rule,
   which is what was blowing the Order Total up to an oversized,
   inconsistent size here. */
.boo-track-order .boo-info-value .woocommerce-Price-amount {
  color: #C2D929 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}

/* Items list */
.boo-track-items {
  border-top: 1px solid #2A2A26;
  padding-top: 20px;
}
.boo-track-items h4 {
  margin: 0 0 12px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #F6F6F1;
}
.boo-track-items ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boo-track-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #B9B9AE;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed #2A2A26;
}
.boo-track-items li:last-child { border-bottom: 0; }
.boo-track-item-qty { color: #83837A; white-space: nowrap; }

@media (max-width: 480px) {
  .boo-track-form,
  .boo-track-result { padding: 20px; border-radius: 20px; }
}