/* ==========================================================================
   GODHEAD Coffees — Loop "Build Your Own Bundle" custom theme
   Palette: Black (#000000) background / White (#FFFFFF) text / Gold (#CFB023) accents
   ========================================================================== */

/* ---- Page background ---- */
.loop-background,
#loop-background,
.loop-container.loop-bs-container {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* ---- Header / title area ---- */
.loop-bundle-header-wrapper-new,
.loop-bundle-image-container-wrapper {
  background-color: #000000 !important;
}

.loop-h1.loop-bundle-title,
.loop-bundle-new-description {
  color: #FFFFFF !important;
}

/* Hide the page title block entirely — display:none removes its margin/padding
   from the layout too, so no empty gap is left behind */
.loop-bundle-title-wrapper-new {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrapper div — let it span the full available width */
div.loop-bundle-image-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* The image itself — override its fixed width="100" height="100" HTML attributes
   so it scales full-width and keeps its aspect ratio at any screen size */
img.loop-bundle-image-container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border: 2px solid #CFB023 !important;
  border-radius: 8px !important;
}

/* ---- Section title / subtitle text ---- */
.loop-bundle-select-product-title-new,
.loop-h2 {
  color: #FFFFFF !important;
}

.loop-category-header-content-left-subTitle,
.loop-bundle-loop-category-header-content-left-subTitle,
#loop-background .loop-bundle-loop-category-header-content-left-subTitle,
#loop-background p.loop-text-p1.loop-bundle-loop-category-header-content-left-subTitle,
.loop-category-header .loop-category-header-content-left p.loop-bundle-loop-category-header-content-left-subTitle {
  color: #FFFFFF !important;
}

/* ---- Category pill/tab list ---- */
.loop-category-list-new-container {
  background-color: #000000 !important;
  border-bottom: 1px solid #CFB023 !important;
}

.loop-category-item {
  background-color: #0A0A0A !important;
  border: 1px solid #CFB023 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.loop-category-item:hover {
  background-color: #CFB023 !important;
}

.loop-category-item:hover .loop-bundle-text-category-title-p1,
.loop-category-item:hover p {
  color: #000000 !important;
}

.loop-category-item .loop-bundle-text-category-title-p1 {
  color: #FFFFFF !important;
}

.loop-category-item img.loop-category-rounded-image {
  border: 1px solid #CFB023 !important;
}

/* ---- Category section header (Signatures / Personalised) ---- */
.loop-category-header {
  background-color: #000000 !important;
  border-bottom: 1px solid #CFB023 !important;
}

.loop-category-header svg path {
  fill: #CFB023 !important;
}

/* ---- Product cards ---- */
.loop-card.loop-bundle-product-card {
  background-color: #0A0A0A !important;
  border: 1px solid #CFB023 !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

.loop-card.loop-bundle-product-card:hover {
  border-color: #E8CE4D !important;
  box-shadow: 0 0 12px rgba(207, 176, 35, 0.35) !important;
}

/* Blanket rule: no border/shadow/outline on ANY image anywhere in the bundle widget */
#loop img,
.loop img,
#loop-background img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Category tab thumbnails (Signatures / Personalised) — remove ring + any pseudo-element ring.
   NOTE: scoped to *descendants* only (not the bare .loop-category-item) so the pill's own
   border above isn't cancelled out by this catch-all. */
.loop-category-item *,
.loop-rounded-image,
.loop-category-rounded-image {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loop-category-item::before,
.loop-category-item::after,
.loop-rounded-image::before,
.loop-rounded-image::after {
  content: none !important;
  display: none !important;
}

/* Kill any highlight border Loop applies around the thumbnail on selection —
   scoped to every element inside the card's image header, whatever class Loop adds */
.loop-card-header,
.loop-card-header * {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loop-bundle-product-image-container,
.loop-image-product-lg,
.loop-card-header img,
.loop-card.loop-bundle-product-card img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loop-bundle-product-card-title {
  color: #FFFFFF !important;
}

.loop-bundle-product-card-description {
  color: #FFFFFF !important;
}

/* ---- Pricing ---- */
.loop-discounted-price {
  color: #CFB023 !important;
  font-weight: 600 !important;
}

.loop-product-price.strike-through {
  color: #FFFFFF !important;
}

/* ---- Add / quantity controls on product cards ---- */
.loop-btn-add-product {
  background-color: #000000 !important;
  color: #CFB023 !important;
  border: 1px solid #CFB023 !important;
}

.loop-btn-add-product:hover {
  background-color: #CFB023 !important;
  color: #000000 !important;
}

.loop-bundle-product-quantity-controls {
  border: 1px solid #CFB023 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.loop-btn-input-decrease,
.loop-btn-input-increase,
.loop-btn-input-decrease-small,
.loop-btn-input-increase-small {
  background-color: #000000 !important;
  color: #CFB023 !important;
}

.loop-form-input,
.loop-form-input-small {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.loop-btn-input-decrease,
.loop-btn-input-increase,
.loop-btn-input-decrease-small,
.loop-btn-input-increase-small {
  border: none !important;
}

/* ---- Sticky "Your bundle" sidebar ---- */
/* Default: no product selected yet — stays flat black, no gold border */
.loop-selected-bundle {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 12px !important;
}

/* Once at least one real product is selected, reveal the gold border */
.loop-selected-bundle:has(.loop-selected-variant-container) {
  background-color: #0A0A0A !important;
  border-color: #CFB023 !important;
}

.loop-selected-bundle-title,
.loop-selected-bundle-items-count p {
  color: #FFFFFF !important;
}

/* ---- Progress bar (discount milestones) ---- */
/* Base track ("filler") — always visible as a subtle grey line, even with nothing selected */
.loop-new-progress-range-line:not(.left) {
  background-color: #2A2A2A !important;
}

/* The actual progress fill overlay — transparent by default (0% width when empty anyway) */
.loop-progress-range-bar {
  background-color: transparent !important;
  border: none !important;
}

.loop-progress-range-line-container {
  background-color: transparent !important;
}

.loop-new-progress-range-line.left {
  background-color: transparent !important;
}

.loop-progress-range-dot,
.loop-progress-range-dot.dot-1,
.loop-progress-range-dot.active-dots,
.loop-progress-range-dot.completed,
.loop-progress-range-dot.colored,
.dot-container .loop-progress-range-dot {
  background-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 2px solid #2A2A2A !important;
  outline: none !important;
}

.loop-progress-range-dot::before,
.loop-progress-range-dot::after,
.label.colored::before,
.label.colored::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.label.colored {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border: none !important;
}

/* Once a product is selected: fill line turns gold, dot stays black with a gold ring */
.loop-selected-bundle:has(.loop-selected-variant-container) .loop-new-progress-range-line.left {
  background-color: #CFB023 !important;
}

.loop-selected-bundle:has(.loop-selected-variant-container) .loop-progress-range-dot {
  border-color: #CFB023 !important;
}

.loop-selected-bundle:has(.loop-selected-variant-container) .loop-progress-range-dot.completed,
.loop-selected-bundle:has(.loop-selected-variant-container) .loop-progress-range-dot.colored {
  background-color: #000000 !important;
}

.loop-selected-bundle:has(.loop-selected-variant-container) .label.colored {
  color: #CFB023 !important;
  background-color: transparent !important;
  border: none !important;
}

/* ---- Selected items list in sidebar ---- */
.loop-selected-variant-container {
  background-color: #000000 !important;
  border: 1px solid #3A3320 !important;
  border-radius: 8px !important;
}

.loop-selected-variant-title {
  color: #FFFFFF !important;
}

.loop-selected-variant-price-actual.strike-through {
  color: #FFFFFF !important;
}

.loop-selected-variant-price-discount {
  color: #CFB023 !important;
}

.loop-selected-variant-container img {
  border: 1px solid #CFB023 !important;
}

/* ---- Subscription / selling plan widget ---- */
.loop-bundle-widget-selling-plan-container {
  background-color: #0A0A0A !important;
  border: 1px solid #CFB023 !important;
  border-radius: 10px !important;
}

.loop-bundle-widget-selling-plan-container.selected {
  border-color: #CFB023 !important;
  box-shadow: 0 0 0 1px #CFB023 !important;
}

.loop-bundle-widget-radio-btn {
  border: 2px solid #CFB023 !important;
}

.loop-bundle-widget-radio-btn-inner {
  background-color: #CFB023 !important;
}

.loop-bundle-widget-selling-plan-text {
  color: #FFFFFF !important;
}

.loop-bundle-widget-discount-badge-container {
  background-color: #CFB023 !important;
  color: #000000 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.loop-bundle-widget-selling-plan-actual-price {
  color: #FFFFFF !important;
}

.loop-bundle-widget-selling-plan-discount-price {
  color: #CFB023 !important;
}

.loop-bundle-widget-frequency-button-label-fixed {
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

.loop-bundle-widget-frequency-button-container {
  gap: 10px !important;
}

.loop-bundle-widget-frequency-interval-button {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid #CFB023 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.loop-bundle-widget-frequency-interval-button p {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: inherit !important;
  text-align: center !important;
}

.loop-bundle-widget-frequency-interval-button.selected {
  background-color: #CFB023 !important;
  color: #000000 !important;
}

/* ---- Final add-to-cart button ---- */
.loop-btn-add-to-cart {
  background-color: #CFB023 !important;
  color: #000000 !important;
  border: 1px solid #CFB023 !important;
  font-weight: 700 !important;
}

.loop-btn-add-to-cart:hover {
  background-color: #E8CE4D !important;
  border-color: #E8CE4D !important;
}

.loop-bundle-total-label,
.loop-bundle-total-label.bundle_total_label_mobile {
  color: #000000 !important;
}

.loop-bundle-saved-label {
  color: #000000 !important;
}

/* ---- Keep the Total / Add to cart bar pinned to the bottom of the screen ---- */
/* .loop-actions-container is already sticky at the top (top: 60px, set inline by Loop),
   but it's taller than the viewport, so the button was hidden below the fold until
   the whole page was scrolled to the bottom. Making its wrapper sticky to bottom:0
   keeps it visible the entire time the sidebar is in view. */
.loop-bundle-widget-add-to-cart-container {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background-color: #000000 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ---- Category content border (Signatures / Personalised sections) ---- */
.loop-category-container-section {
  border: 1px solid #CFB023 !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.loop-products-available {
  border-top: 1px solid #CFB023 !important;
  background-color: #000000 !important;
}

/* ---- "Your bundle" sidebar: empty / pre-selection state ---- */
.loop-selected-bundle-info p {
  color: #FFFFFF !important;
}

/* Loading skeleton placeholders (shown before any product is selected) —
   force black instead of the default grey, with a subtle gold pulse */
.loop-selected-bundle-items .loop-skeleton,
.loop-selected-bundle-items .bg-gray-300 {
  background-color: #000000 !important;
  border: 1px solid #2A2A2A !important;
}

/* Hide the placeholder skeleton block entirely until a real product is added */
.loop-selected-bundle-items .loop-skeleton-container {
  display: none !important;
}

/* ---- Footer text ---- */
.loop-bundle-footer-description {
  color: #FFFFFF !important;
}