/**
 * Revelo Gift Box module — product button, cart/mini-cart packaging options, modal.
 *
 * Plain CSS compiled from the original Tailwind @apply source. The accent colour
 * (#1c6b76) and the theme's custom font sizes (text-14/15/base) are inlined so
 * the plugin no longer depends on the theme's Tailwind build.
 *
 * !important NOTE: the theme's Bud/Tailwind build wraps every class in a triple
 * `:not(#\#)` specificity hack (e.g. `.btn:not(#\#):not(#\#):not(#\#)` ⇒ effective
 * specificity (3,1,0)). When these styles lived inside the theme bundle they got
 * the same boost and competed fairly; as a standalone file they would always lose
 * to the theme on shared elements (buttons, headings, links, inputs). The theme
 * relies on specificity rather than !important, so marking these declarations
 * !important makes the plugin's own rules win reliably in both dev and production.
 */

/* --- Product page CTA ----------------------------------------------------- */
.revelo-gift-product-cta {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  width: 100% !important;
}

.revelo-gift-product-cta .revelo-gift-button {
  width: 100% !important;
  min-width: 280px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-transform: uppercase !important;
  font-size: 0.938rem !important;
  line-height: 24px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  color: #262223 !important;
  border: 1.5px solid #262223 !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

@media (min-width: 768px) {
  .revelo-gift-product-cta .revelo-gift-button {
    font-size: 1rem !important;
    line-height: 28px !important;
  }
}

.revelo-gift-product-cta .revelo-gift-button:hover {
  background: #262223 !important;
  color: #f6f3e9 !important;
}

/* --- Packaging options (cart + mini-cart) --------------------------------- */
.revelo-gift-packaging {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.revelo-gift-packaging--cart {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.revelo-gift-packaging .revelo-gift-option {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem !important;
}

.revelo-gift-packaging .revelo-gift-option__head {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.revelo-gift-packaging .revelo-gift-option__head input[type='checkbox'] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  accent-color: #1c6b76 !important;
}

.revelo-gift-packaging .revelo-gift-option__title {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.revelo-gift-packaging .revelo-gift-option__price {
  margin-left: auto !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
}

.revelo-gift-packaging .revelo-gift-option__desc {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  color: rgba(0, 0, 0, 0.6) !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
  padding-left: 1.75rem !important;
}

.revelo-gift-packaging .revelo-gift-edit-link {
  display: inline-block !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  text-decoration: underline !important;
  margin-top: 0.5rem !important;
  padding-left: 1.75rem !important;
  color: #1c6b76 !important;
}

.revelo-gift-packaging .revelo-gift-edit-link:hover {
  color: #000 !important;
}

.revelo-gift-cart-row > td {
  padding: 0 !important;
  border: 0 !important;
}

/* Gift-box price line above the mini-cart grand total. */
.revelo-gift-total-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: 700 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 22px !important;
}

/* Gift-box price row in the cart-page totals table. */
.revelo-gift-cart-total th,
.revelo-gift-cart-total td {
  font-weight: 700 !important;
}

/* --- Modal ----------------------------------------------------------------
   "Sabotage" gift-wrap popup (design canvas GiftWrap / GiftWrapMobile):
   cream card, Roboto Slab title, framed box hero, image swatches, green
   "in the box" cards, pill search, green message toggle, orange CTA.
   Scoped under #reveloGiftModal and marked !important so these rules win over
   the theme's specificity-boosted (`:not(#\#)`) classes regardless of load order.
   Mobile (<768px) is a bottom sheet. */
#reveloGiftModal {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  font-family: Geologica, system-ui, sans-serif !important;
  color: #262223 !important;
}

@media (min-width: 768px) {
  #reveloGiftModal {
    align-items: center !important;
    padding: 24px !important;
  }
}

#reveloGiftModal .revelo-gift-modal__overlay {
  cursor: pointer !important;
  background: rgba(38, 34, 35, 0.6) !important;
}

#reveloGiftModal .revelo-gift-modal__inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 600px !important;
  max-height: 92vh !important;
  padding: 22px 16px 28px !important;
  border-radius: 24px 24px 0 0 !important;
  background: #f7f4eb !important;
  color: #262223 !important;
  box-shadow: 0 -10px 40px rgba(38, 34, 35, 0.25) !important;
  text-align: center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#reveloGiftModal .revelo-gift-modal__inner::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  width: 40px !important;
  height: 4px !important;
  margin-left: -20px !important;
  border-radius: 999px !important;
  background: rgba(38, 34, 35, 0.2) !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__inner {
    max-height: 90vh !important;
    padding: 28px 32px 26px !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(38, 34, 35, 0.35) !important;
  }

  #reveloGiftModal .revelo-gift-modal__inner::before {
    display: none !important;
  }
}

#reveloGiftModal .revelo-gift-modal__inner * {
  box-sizing: border-box !important;
}

#reveloGiftModal .revelo-gift-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e7ddc3 !important;
  color: #262223 !important;
  font-size: 22px !important;
  line-height: 36px !important;
  text-align: center !important;
  cursor: pointer !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__close {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
}

#reveloGiftModal .revelo-gift-modal__close:hover {
  background: #262223 !important;
  color: #f6f3e9 !important;
}

#reveloGiftModal .revelo-gift-modal__title {
  margin: 8px 0 0 !important;
  font-family: "Roboto Slab", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #262223 !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__title {
    margin-top: 6px !important;
    font-size: 26px !important;
  }
}

#reveloGiftModal .revelo-gift-modal__image {
  display: grid !important;
  place-items: center !important;
  width: 180px !important;
  height: 124px !important;
  margin: 14px 0 0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

#reveloGiftModal .revelo-gift-modal__image img {
  width: 140px !important;
  max-height: 110px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__image {
    width: 220px !important;
    height: 150px !important;
  }

  #reveloGiftModal .revelo-gift-modal__image img {
    width: 170px !important;
    max-height: 132px !important;
  }
}

#reveloGiftModal .revelo-gift-modal__color-label,
#reveloGiftModal .revelo-gift-modal__contents-label {
  margin: 18px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #262223 !important;
}

#reveloGiftModal .revelo-gift-modal__colors {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 10px 0 0 !important;
}

/* Colour swatches: 48px tile, 36px rounded image / colour inside */
#reveloGiftModal .revelo-gift-swatch {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: #fffdf6 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 35, 0.15) !important;
  cursor: pointer !important;
  transition: box-shadow 0.15s ease !important;
}

#reveloGiftModal .revelo-gift-swatch::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 7px !important;
  background: var(--revelo-swatch, #ccc) center / cover no-repeat !important;
}

#reveloGiftModal .revelo-gift-swatch:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(38, 34, 35, 0.45) !important;
}

#reveloGiftModal .revelo-gift-swatch.is-selected {
  box-shadow: inset 0 0 0 2px #e04514 !important;
}

#reveloGiftModal .revelo-gift-modal__slots {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  text-align: left !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Shared "card in the box" look: main product, extra products, cart checklist */
#reveloGiftModal .revelo-gift-slot,
#reveloGiftModal .revelo-gift-check {
  display: grid !important;
  grid-template-columns: 24px 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f2fbe4 !important;
  box-shadow: inset 0 0 0 1.5px #108622 !important;
  text-align: left !important;
  cursor: pointer !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-slot,
  #reveloGiftModal .revelo-gift-check {
    min-height: 72px !important;
  }
}

#reveloGiftModal .revelo-gift-slot img,
#reveloGiftModal .revelo-gift-check img {
  width: 40px !important;
  height: 52px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  object-fit: contain !important;
}

#reveloGiftModal .revelo-gift-slot__text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

#reveloGiftModal .revelo-gift-slot__name,
#reveloGiftModal .revelo-gift-check__name {
  display: block !important;
  font-family: "Roboto Slab", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #262223 !important;
}

#reveloGiftModal .revelo-gift-slot__desc {
  display: block !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: rgba(38, 34, 35, 0.7) !important;
}

/* Unchecked / excluded cards go neutral */
#reveloGiftModal .revelo-gift-slot--main.is-excluded,
#reveloGiftModal .revelo-gift-check:not(.is-checked) {
  background: #fffdf6 !important;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 35, 0.15) !important;
  opacity: 1 !important;
}

#reveloGiftModal .revelo-gift-slot--main.is-excluded .revelo-gift-slot__name,
#reveloGiftModal .revelo-gift-check:not(.is-checked) .revelo-gift-check__name {
  color: rgba(38, 34, 35, 0.6) !important;
}

#reveloGiftModal .revelo-gift-check.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Green rounded checkboxes (main slot, extras, cart checklist, message toggle) */
#reveloGiftModal input[type='checkbox'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px #262223 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

#reveloGiftModal input[type='checkbox']:checked {
  background: #108622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff7df' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  box-shadow: none !important;
}

#reveloGiftModal input[type='checkbox']:focus-visible {
  outline: 2px solid #e04514 !important;
  outline-offset: 2px !important;
}

/* Empty slot: dashed-feel outline button with a plus */
#reveloGiftModal .revelo-gift-slot--empty {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgba(38, 34, 35, 0.3) !important;
  font-family: Geologica, system-ui, sans-serif !important;
  color: rgba(38, 34, 35, 0.8) !important;
}

#reveloGiftModal .revelo-gift-slot--empty:hover {
  box-shadow: inset 0 0 0 1.5px #262223 !important;
}

#reveloGiftModal .revelo-gift-slot--empty .revelo-gift-slot__name {
  font-family: Geologica, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

#reveloGiftModal .revelo-gift-slot__plus {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
}

#reveloGiftModal .revelo-gift-slot__remove {
  margin-left: auto !important;
  color: rgba(38, 34, 35, 0.4) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#reveloGiftModal .revelo-gift-slot__remove:hover {
  color: #262223 !important;
}

/* Search picker (product page): pill input + results list */
#reveloGiftModal .revelo-gift-picker {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  max-height: 12rem !important;
  overflow-y: auto !important;
}

#reveloGiftModal .revelo-gift-picker--search {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

#reveloGiftModal .revelo-gift-search-input {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 18px 0 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fffdf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04514' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 18px center / 18px no-repeat !important;
  box-shadow: inset 0 0 0 1.5px #262223 !important;
  font: inherit !important;
  font-size: 14px !important;
  color: #262223 !important;
}

#reveloGiftModal .revelo-gift-search-input::placeholder {
  color: rgba(38, 34, 35, 0.55) !important;
}

#reveloGiftModal .revelo-gift-search-input:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #e04514 !important;
}

#reveloGiftModal .revelo-gift-search-results {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 8px !important;
  max-height: 14rem !important;
  overflow-y: auto !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#reveloGiftModal .revelo-gift-picker__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #fffdf6 !important;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 35, 0.15) !important;
  text-align: left !important;
  cursor: pointer !important;
}

#reveloGiftModal .revelo-gift-picker__item:hover {
  box-shadow: inset 0 0 0 1.5px #262223 !important;
}

#reveloGiftModal .revelo-gift-picker__item img {
  width: 32px !important;
  height: 40px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  object-fit: contain !important;
}

#reveloGiftModal .revelo-gift-picker__item span {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #262223 !important;
}

#reveloGiftModal .revelo-gift-picker__empty {
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(38, 34, 35, 0.65) !important;
  text-align: center !important;
}

/* Message toggle + textarea */
#reveloGiftModal .revelo-gift-modal__message-toggle {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 22px 0 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #fffdf6 !important;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 35, 0.15) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #262223 !important;
  text-align: left !important;
  cursor: pointer !important;
}

#reveloGiftModal .revelo-gift-modal__message-toggle:has(input:checked) {
  background: #f2fbe4 !important;
  box-shadow: inset 0 0 0 1.5px #108622 !important;
}

#reveloGiftModal .revelo-gift-modal__message {
  position: relative !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  text-align: right !important;
}

#reveloGiftModal .revelo-gift-modal__message.hidden {
  display: none !important;
}

#reveloGiftModal .revelo-gift-modal__message textarea {
  display: block !important;
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #fffdf6 !important;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 35, 0.18) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #262223 !important;
  resize: none !important;
}

#reveloGiftModal .revelo-gift-modal__message textarea::placeholder {
  font-family: Georgia, serif !important;
  font-style: italic !important;
  color: rgba(38, 34, 35, 0.5) !important;
}

#reveloGiftModal .revelo-gift-modal__message textarea:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px #262223 !important;
}

#reveloGiftModal .revelo-gift-modal__message-count {
  position: static !important;
  display: inline-block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: rgba(38, 34, 35, 0.6) !important;
}

/* Actions */
#reveloGiftModal .revelo-gift-modal__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
}

#reveloGiftModal .revelo-gift-modal__submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e04514 !important;
  color: #fff7df !important;
  font-family: Geologica, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

@media (min-width: 768px) {
  #reveloGiftModal .revelo-gift-modal__submit {
    width: 300px !important;
    min-width: 0 !important;
  }
}

#reveloGiftModal .revelo-gift-modal__submit:hover {
  background: #262223 !important;
}

#reveloGiftModal .revelo-gift-modal__submit.loading,
#reveloGiftModal .revelo-gift-modal__submit:disabled {
  opacity: 0.6 !important;
  cursor: wait !important;
}

#reveloGiftModal .revelo-gift-modal__continue {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #262223 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
}

#reveloGiftModal .revelo-gift-modal__continue:hover {
  color: #e04514 !important;
}

#reveloGiftModal .revelo-gift-modal__error {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: #fde3d8 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #b8360e !important;
}

#reveloGiftModal .revelo-gift-modal__error:empty {
  display: none !important;
}

body.revelo-gift-open {
  overflow: hidden !important;
}