/* Generated by inc/css-bundles.php from components.css, mini-cart.css. Edit the sources, not this file. */

/* ===== components.css ===== */
/* Shared components (Blumen design)
   Loaded on every page. Buttons, text links, the product card used by all
   product loops, the WooCommerce loop grid and the mobile side-scroller.
--------------------------------------------- */

/* Quantity stepper (woocommerce/global/quantity-input.php; product + cart pages)
--------------------------------------------- */
.bluthe_qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(22, 40, 63, 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
  float: none;
}
.bluthe_qty__btn {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  touch-action: manipulation; /* no double-tap zoom on phones */
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--bl-font);
  font-size: 16px;
  line-height: 1;
  color: var(--bl-navy);
  cursor: pointer;
  transition: background 0.18s ease;
}
.bluthe_qty__btn:hover {
  background: var(--bl-panel);
}
.bluthe_qty input.qty {
  width: 44px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--bl-font);
  font-size: 16px; /* 16px+ so iOS does not zoom when the field is focused */
  color: var(--bl-navy);
  -moz-appearance: textfield;
  appearance: textfield;
}
.bluthe_qty input.qty::-webkit-outer-spin-button,
.bluthe_qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Filter chips (pills)
--------------------------------------------- */
.bluthe_chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid rgba(22, 40, 63, 0.25);
  border-radius: 999px;
  background: transparent;
  color: var(--bl-navy);
  font-family: var(--bl-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bluthe_chip:hover {
  border-color: var(--bl-navy);
}
.bluthe_chip.is-active {
  background: var(--bl-navy);
  color: var(--bl-cream);
  border-color: var(--bl-navy);
}

/* Payment method choices
   WooCommerce's gateway list (ul.wc_payment_methods > li.wc_payment_method
   at the checkout; the same rules cover WooCommerce's
   ul.woocommerce-PaymentMethods markup): one bordered row per gateway with
   the radio drawn on the label, the chosen row filled, the gateway's
   fields (.payment_box) inside the row.
--------------------------------------------- */
:is(.bluthe_checkout, .bluthe_account) ul:is(.wc_payment_methods, .woocommerce-PaymentMethods) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(22, 40, 63, 0.22);
  border-radius: 12px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
/* Only the gateway's own radio (a direct child) marks the row chosen; the
   gateway's inner radios (saved-card "new" option) must not. */
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod):has(> input.input-radio:checked) {
  border-color: var(--bl-navy);
  background: var(--bl-panel);
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--bl-font);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bl-navy);
  cursor: pointer;
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > input.input-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
/* Radio drawn on the label, so the whole row is the control. */
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(22, 40, 63, 0.4);
  background: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > input:checked + label::before {
  border-color: var(--bl-navy);
  box-shadow: inset 0 0 0 5px var(--bl-navy);
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > input:focus-visible + label::before {
  outline: 2px solid var(--bl-navy);
  outline-offset: 2px;
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > label img {
  max-height: 22px;
  width: auto;
  margin-inline-start: auto;
}
:is(.bluthe_checkout, .bluthe_account) li:is(.wc_payment_method, .woocommerce-PaymentMethod) > label a {
  font-size: 12px;
  color: var(--bl-text-muted);
}
:is(.bluthe_checkout, .bluthe_account) .payment_box {
  margin: 0;
  padding: 0 16px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bl-text-soft);
}
:is(.bluthe_checkout, .bluthe_account) .payment_box::before {
  display: none;
}
:is(.bluthe_checkout, .bluthe_account) .payment_box p:last-child {
  margin-bottom: 0;
}
:is(.bluthe_checkout, .bluthe_account) .payment_box .form-row {
  margin-top: 12px;
}

/* Scroll indicator
   A row that scrolls sideways points at its bar with data-scrollbar="#id";
   woocommerce.js sizes and moves the thumb and shows the bar only while the
   row actually overflows (phones). Native scrollbars auto-hide on touch
   devices, this one does not.
--------------------------------------------- */
.bluthe_scrollbar {
  display: none;
  position: relative;
  height: 3px;
  background: var(--bl-line);
  border-radius: 2px;
  overflow: hidden;
}
.bluthe_scrollbar.is-active {
  display: block;
}
.bluthe_scrollbar__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 30%;
  background: var(--bl-navy);
  border-radius: 2px;
}

/* Buttons
   One button system for the whole theme (new "WEBSITE FINAL" design): pills
   with a soft gradient and an inner highlight. `.bluthe_btn` is the canonical
   class; the other selectors give WooCommerce's and WordPress' own buttons
   (.button, submit inputs, block buttons, add to cart…) the same look, so
   templates and plugins pick it up without extra classes.

   Variants only swap the --btn-* tokens:
     (default) / --solid   navy gradient pill (primary actions: checkout, add to bag)
     .bluthe_btn--glass    pale gradient pill (product cards, secondary actions on cream)
     .bluthe_btn--light    white gradient pill for photographs (hero, banners)
     .bluthe_btn--outline  transparent pill with a hairline border
     .bluthe_btn--whatsapp navy pill, sentence case, with an icon
   Legacy classes (.button.gray, .button.white, .bluthe_404-button.ghost) map onto these.

   The base rule has the specificity of one class + one attribute, so an
   override elsewhere needs two classes (e.g. `.bluthe_slide .bluthe_btn`).
--------------------------------------------- */
/* Token defaults live in :where() (zero specificity) so a variant class can override them. */
:where(
  .bluthe_btn,
  .button,
  input[type="submit"],
  :where(.wc-block-components-button:not(.is-link)),
  .wp-block-button__link,
  .single_add_to_cart_button,
  .checkout-button,
  .woocommerce-Button,
  .woocommerce-button,
  .bluthe_404-button
) {
  --btn-bg: linear-gradient(180deg, #2A466A 0%, #16283F 100%);
  --btn-fg: var(--bl-cream);
  --btn-border: rgba(11, 20, 32, 0.5);
  --btn-shadow: 0 8px 18px rgba(11, 20, 32, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -7px 12px rgba(11, 20, 32, 0.45);
  --btn-hover-bg: linear-gradient(180deg, #35527A 0%, #1B3049 100%);
  --btn-hover-fg: var(--bl-cream);
  --btn-hover-border: rgba(11, 20, 32, 0.5);
}
:is(
  .bluthe_btn,
  .button,
  input[type="submit"],
  :where(.wc-block-components-button:not(.is-link)),
  .wp-block-button__link,
  .single_add_to_cart_button,
  .checkout-button,
  .woocommerce-Button,
  .woocommerce-button,
  .bluthe_404-button
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  margin: 0;
  font-family: var(--bl-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
:is(
  .bluthe_btn,
  .button,
  input[type="submit"],
  :where(.wc-block-components-button:not(.is-link)),
  .wp-block-button__link,
  .single_add_to_cart_button,
  .checkout-button,
  .woocommerce-Button,
  .woocommerce-button,
  .bluthe_404-button
):is(:hover, :focus-visible) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
  text-decoration: none;
}
:is(
  .bluthe_btn,
  .button,
  input[type="submit"],
  :where(.wc-block-components-button:not(.is-link)),
  .wp-block-button__link,
  .single_add_to_cart_button,
  .checkout-button,
  .woocommerce-Button,
  .woocommerce-button,
  .bluthe_404-button
):focus-visible {
  outline: 2px solid var(--bl-accent);
  outline-offset: 2px;
}
:is(
  .bluthe_btn,
  .button,
  input[type="submit"],
  :where(.wc-block-components-button:not(.is-link)),
  .wp-block-button__link,
  .single_add_to_cart_button,
  .checkout-button,
  .woocommerce-Button,
  .woocommerce-button,
  .bluthe_404-button
):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WooCommerce blocks (checkout, cart) style their buttons with two classes;
   re-assert the shared look at higher specificity. */
.wc-block-components-button.wc-block-components-button:not(.is-link) {
  padding: 14px 30px;
  font-family: var(--bl-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  box-shadow: var(--btn-shadow);
}
.wc-block-components-button.wc-block-components-button:not(.is-link):is(:hover, :focus-visible) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-border);
}

/* Variants */
.bluthe_btn--glass {
  --btn-bg: linear-gradient(180deg, #FFFDFB 0%, #F1EBE3 100%);
  --btn-fg: var(--bl-navy);
  --btn-border: rgba(22, 40, 63, 0.14);
  --btn-shadow: 0 4px 12px rgba(22, 40, 63, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --btn-hover-bg: linear-gradient(180deg, #FFFFFF 0%, #E9DFD6 100%);
  --btn-hover-fg: var(--bl-navy);
  --btn-hover-border: rgba(22, 40, 63, 0.22);
}
.bluthe_btn--light,
.button.white {
  --btn-bg: linear-gradient(180deg, #FFFFFF 0%, #EDE7DF 100%);
  --btn-fg: var(--bl-navy);
  --btn-border: rgba(22, 40, 63, 0.12);
  --btn-shadow: 0 6px 18px rgba(11, 20, 32, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --btn-hover-bg: var(--bl-cream);
  --btn-hover-fg: var(--bl-navy);
  --btn-hover-border: rgba(22, 40, 63, 0.12);
}
.bluthe_btn--outline,
.button.gray,
.bluthe_404-button.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bl-navy);
  --btn-border: rgba(22, 40, 63, 0.3);
  --btn-shadow: none;
  --btn-hover-bg: var(--bl-panel);
  --btn-hover-fg: var(--bl-navy);
  --btn-hover-border: var(--bl-navy);
}
.button.white.border {
  --btn-border: var(--bl-navy);
}
.bluthe_btn.bluthe_btn--whatsapp {
  padding: 16px 28px;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.bluthe_btn.bluthe_btn--whatsapp svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
/* Full-width buttons (checkout, forms) */
.bluthe_btn.bluthe_btn--block {
  width: 100%;
}

.bluthe_textlink {
  display: inline-block;
  font-family: var(--bl-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bl-navy);
  border-bottom: 1px solid rgba(22, 40, 63, 0.3);
  padding-bottom: 3px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.bluthe_textlink:hover {
  color: var(--bl-accent);
  border-bottom-color: var(--bl-accent);
}

/* WooCommerce loop grid
--------------------------------------------- */
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(22px, 2.6vw, 34px) clamp(16px, 1.8vw, 24px);
}
ul.products li.product {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
ul.products li.product::before,
ul.products li.product::after {
  content: none;
}

/* Product card
   Wrapper is <li class="product bluthe_product_card"> in WooCommerce loops or
   <div class="bluthe_product_card"> in custom grids; the inner markup comes
   from template-parts/woocommerce/product-card.php.
--------------------------------------------- */
.bluthe_product_card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  position: relative;
  font-family: var(--bl-sans);
  color: var(--bl-navy);
}
.bluthe_product_card.is-hidden {
  display: none;
}
.bluthe_product_card a {
  color: var(--bl-navy);
  text-decoration: none;
}
.bluthe_product_card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--bl-sand-light);
  background-image: repeating-linear-gradient(135deg, rgba(22, 40, 63, 0.05) 0 1px, transparent 1px 10px);
  overflow: hidden;
  border-radius: var(--bl-radius-sm);
  margin-bottom: 4px;
}
.bluthe_product_card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transition: transform 0.6s ease;
}
.bluthe_product_card:hover .bluthe_product_card__media img {
  transform: scale(1.03);
}
.bluthe_product_card__tag,
.bluthe_product_card__kind,
.bluthe_product_card__sale {
  position: absolute;
  top: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
  line-height: 1.2;
  z-index: 1;
}
.bluthe_product_card__tag {
  inset-inline-start: 0;
  background: var(--bl-cream);
  color: rgba(22, 40, 63, 0.75);
}
/* Natural / artificial label in the top corner of the photo. */
.bluthe_product_card__kind {
  inset-inline-end: 0;
  padding: 9px 14px;
  border-end-start-radius: 12px;
  color: var(--bl-cream);
  background: var(--bl-navy);
}
.bluthe_product_card__kind.is-artificial {
  background: var(--bl-brown);
}
.bluthe_product_card__sale {
  top: 10px;
  inset-inline-start: 10px;
  border-radius: 999px;
  background: var(--bl-accent);
  color: var(--bl-cream);
}
/* Category line above the name. */
.bluthe_product_card__meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, 0.62);
}
.bluthe_product_card__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}
.bluthe_product_card__name {
  font-family: var(--bl-sans);
  font-weight: 400;
  font-size: 17px;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  color: var(--bl-navy);
}
.bluthe_product_card__name a:hover {
  color: var(--bl-accent);
}
.bluthe_product_card__price {
  font-size: 13.5px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--bl-navy);
  padding: 0;
}
.bluthe_product_card__price .woocommerce-Price-amount {
  font-weight: 400;
  font-size: inherit;
}
.bluthe_product_card__price del {
  opacity: 0.5;
  margin-inline-end: 6px;
}
.bluthe_product_card__price ins {
  text-decoration: none;
}
.bluthe_product_card__detail {
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(22, 40, 63, 0.7);
  margin-top: 5px;
}
.bluthe_product_card .bluthe_product_card__add,
.bluthe_product_card .button.add_to_cart_button,
.bluthe_product_card .button.product_type_variable,
.bluthe_product_card .button.product_type_grouped,
.bluthe_product_card .button.product_type_external {
  /* The one square button on the site: flat cream with a navy hairline,
     filling navy on hover; every other button keeps the pill shape. */
  --btn-bg: var(--bl-cream);
  --btn-fg: var(--bl-navy);
  --btn-border: rgba(22, 40, 63, 0.28);
  --btn-shadow: none;
  --btn-hover-bg: var(--bl-navy);
  --btn-hover-fg: var(--bl-cream);
  --btn-hover-border: var(--bl-navy);
  border-radius: 0;
  margin: auto 0 0;
  width: 100%;
  float: none;
  padding: 14px 16px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  /* The button is a link: `.bluthe_product_card a` would otherwise keep the
     text navy on the navy "added" background. */
  color: var(--btn-fg);
}
.bluthe_product_card .bluthe_product_card__add:hover,
.bluthe_product_card .bluthe_product_card__add:focus-visible {
  color: var(--btn-hover-fg);
}
.bluthe_product_card .bluthe_product_card__add.is-added,
.bluthe_product_card .bluthe_product_card__add.loading,
.bluthe_product_card .bluthe_product_card__add.added {
  --btn-bg: linear-gradient(180deg, #24405F 0%, #16283F 100%);
  --btn-fg: var(--bl-cream);
  --btn-border: rgba(22, 40, 63, 0.5);
  --btn-hover-bg: linear-gradient(180deg, #24405F 0%, #16283F 100%);
  --btn-hover-fg: var(--bl-cream);
  --btn-hover-border: rgba(22, 40, 63, 0.5);
}
.bluthe_product_card .added_to_cart {
  display: none;
}
/* Out of stock: muted, still links to the product page. */
.bluthe_product_card .bluthe_product_card__add.is-out-of-stock {
  color: var(--bl-text-muted);
  border-style: dashed;
}
.bluthe_product_card .bluthe_product_card__add.is-out-of-stock:hover {
  background: transparent;
  color: var(--bl-navy);
  border-color: rgba(22, 40, 63, 0.4);
}

/* Mobile side-scroller
   Any grid with .bluthe_scroller--mobile becomes a swipeable row on phones.
   Set --bl-scroller-item on the grid to control the card width.
--------------------------------------------- */
@media (max-width: 767px) {
  /* iOS zooms into any focused control smaller than 16px; keep every text
     field, textarea and select at 16px so the keyboard opens without zoom. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  .bluthe_scroller--mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bl-gutter);
    margin-inline: calc(-1 * var(--bl-gutter));
    padding-inline: var(--bl-gutter);
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bluthe_scroller--mobile::-webkit-scrollbar {
    display: none;
  }
  .bluthe_scroller--mobile > * {
    flex: 0 0 var(--bl-scroller-item, 72vw);
    max-width: 360px;
    scroll-snap-align: start;
  }
  .bluthe_scroller--mobile > .is-hidden {
    display: none;
  }

  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
  .bluthe_product_card__name {
    font-size: 16px;
  }
  /* Name above price, both at the inline start (right in Arabic). */
  .bluthe_product_card__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .bluthe_product_card__price {
    text-align: start;
  }
  /* Phones: no category tag on the image. */
  .bluthe_product_card__tag {
    display: none;
  }
  .bluthe_product_card .bluthe_product_card__add,
  .bluthe_product_card .button.add_to_cart_button,
  .bluthe_product_card .button.product_type_variable {
    padding: 11px 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}


/* ===== mini-cart.css ===== */
/* Bag drawer + notifications (Blumen design)
   Loaded on every page. The drawer (#mini-cart, footer.php) slides in from
   the inline start: the left in English, the right in Arabic. Its contents
   are woocommerce/cart/mini-cart.php; the toast is built by showNotification()
   in assets/js/woocommerce.js.
--------------------------------------------- */

/* Overlay + drawer shell
--------------------------------------------- */
.bluthe_cart_overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(11, 20, 32, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.bluthe_cart_overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bluthe_cart {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 9999;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--bl-cream);
  color: var(--bl-navy);
  font-family: var(--bl-font);
  box-shadow: 0 0 0 1px var(--bl-line), 0 24px 60px rgba(11, 20, 32, 0.18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.38s;
}
html[dir="rtl"] .bluthe_cart:not(.is-open) {
  transform: translateX(100%);
}
.bluthe_cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
/* The fragment wrapper WooCommerce swaps; it must fill the drawer. */
.bluthe_cart .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* While an item is being removed WooCommerce blocks the drawer. */
.bluthe_cart .blockUI.blockOverlay {
  background: var(--bl-cream) !important;
  opacity: 0.55 !important;
}

/* Page lock while the drawer is open (position: fixed is what stops iOS). */
body.bluthe_cart-open {
  overflow: hidden;
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

/* Head
--------------------------------------------- */
.bluthe_cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--bl-line);
}
.bluthe_cart__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--bl-font);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--bl-navy);
}
.bluthe_cart__count {
  font-size: 13px;
  color: var(--bl-text-muted);
  letter-spacing: 0.02em;
}
.bluthe_cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--bl-navy);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.bluthe_cart__close:hover {
  background: var(--bl-pill);
  border-color: var(--bl-line);
}

/* Items
--------------------------------------------- */
.bluthe_cart__items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 4px 28px 12px;
  scrollbar-gutter: stable;
}
.bluthe_cart__item {
  display: flex;
  align-items: flex-start; /* a tall item (custom bouquet meta) must not stretch its photo */
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bl-line);
}
.bluthe_cart__item:last-child {
  border-bottom: 0;
}
.bluthe_cart__thumb {
  flex: 0 0 78px;
  align-self: flex-start;
  width: 78px;
  height: 97.5px; /* 4:5, fixed so every item's photo is the same size */
  aspect-ratio: 4 / 5;
  background: var(--bl-panel);
  overflow: hidden;
}
.bluthe_cart__thumb a {
  display: block;
  height: 100%;
}
.bluthe_cart__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bluthe_cart__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bl-text-soft);
}
.bluthe_cart__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.bluthe_cart__name {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--bl-navy);
  text-decoration: none;
}
a.bluthe_cart__name:hover {
  color: var(--bl-brown);
}
/* Attribute / personalisation lines WooCommerce prints for the item. */
.bluthe_cart__body dl.variation {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--bl-text-muted);
}
.bluthe_cart__body dl.variation dt,
.bluthe_cart__body dl.variation dd,
.bluthe_cart__body dl.variation p {
  margin: 0;
  font-weight: 400;
}
.bluthe_cart__qty {
  color: var(--bl-navy);
  font-size: 14px;
}
.bluthe_cart__qty .woocommerce-Price-amount {
  font-weight: 500;
}
/* The remove link comes from WooCommerce; reset the legacy pill look. */
.bluthe_cart .bluthe_cart__remove,
.bluthe_cart .remove_from_cart_button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -3px 0 0;
  padding: 0;
  border: 1px solid rgba(22, 40, 63, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--bl-text-muted);
  font-family: var(--bl-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bluthe_cart .remove_from_cart_button:hover {
  color: var(--bl-cream);
  background: var(--bl-navy);
  border-color: var(--bl-navy);
}

/* Foot
--------------------------------------------- */
.bluthe_cart__foot {
  flex: 0 0 auto;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--bl-line);
  background: var(--bl-cream);
}
.bluthe_cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--bl-navy);
}
.bluthe_cart__amount {
  font-size: 18px;
  font-weight: 500;
}
.bluthe_cart__note {
  margin: 6px 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bl-text-muted);
}
.bluthe_cart__actions {
  display: grid;
  gap: 10px;
  margin: 0;
}
.bluthe_cart__actions .bluthe_btn {
  width: 100%;
}

/* Empty state
--------------------------------------------- */
.bluthe_cart__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 32px 56px;
  text-align: center;
}
.bluthe_cart__empty_icon {
  color: var(--bl-accent);
  margin-bottom: 10px;
}
.bluthe_cart__empty_title {
  margin: 0;
  font-size: 20px;
  color: var(--bl-navy);
}
.bluthe_cart__empty_text {
  max-width: 260px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bl-text-muted);
}

/* Notifications (toast)
--------------------------------------------- */
.bluthe_notifications_div {
  position: fixed;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.bluthe_notification {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  padding-inline-end: 44px;
  background: var(--bl-cream);
  color: var(--bl-navy);
  border: 1px solid var(--bl-line);
  border-inline-start: 3px solid var(--bl-accent);
  box-shadow: 0 14px 36px rgba(22, 40, 63, 0.14);
  font-family: var(--bl-font);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bluthe_notification.show {
  opacity: 1;
  transform: none;
}
.bluthe_notification.hide {
  opacity: 0;
  transform: translateY(-10px);
}
.bluthe_notification.info {
  border-inline-start-color: var(--bl-navy);
}
.bluthe_notification.error {
  border-inline-start-color: #B4534B;
}
/* Icon: check (success), i (info), ! (error), drawn in the accent colour. */
.bluthe_notification::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--bl-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.bluthe_notification.info::before {
  background-color: var(--bl-navy);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><circle cx='10' cy='6.4' r='1' fill='black'/><path d='M10 9v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><circle cx='10' cy='6.4' r='1' fill='black'/><path d='M10 9v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
}
.bluthe_notification.error::before {
  background-color: #B4534B;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M10 5.5v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='10' cy='13.8' r='1' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9.25' fill='none' stroke='black' stroke-width='1.3'/><path d='M10 5.5v5.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='10' cy='13.8' r='1' fill='black'/></svg>");
}
.bluthe_notification__body {
  flex: 1 1 auto;
  min-width: 0;
}
.bluthe_notification__body a {
  color: var(--bl-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bluthe_notification__body ul,
.bluthe_notification__body li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bluthe_notification .close-btn {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bl-text-muted);
  font-family: var(--bl-font);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.bluthe_notification .close-btn:hover {
  color: var(--bl-navy);
}

@media (max-width: 767px) {
  .bluthe_cart__head {
    padding: 20px 20px 16px;
  }
  .bluthe_cart__title {
    font-size: 21px;
  }
  .bluthe_cart__items {
    padding-inline: 20px;
  }
  .bluthe_cart__foot {
    padding: 16px 20px 24px;
  }
  /* Toasts sit at the top on phones, above the drawer. */
  .bluthe_notifications_div {
    top: 12px;
    inset-inline: 0;
    align-items: center;
    width: auto;
    padding: 0 12px;
  }
  .bluthe_notification {
    width: 100%;
    max-width: 480px;
  }
}