/* 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: background 0.18s ease, 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;
  }
}