/* Ravair — ordering fixes, 2026-09-22.
 *
 * Loaded LAST, after custom.css. Every rule in this file sits inside a touch-only or phone-only media
 * query, so nothing a desktop or tablet visitor sees can change: no colour, no font, no layout is
 * touched above 768px, and the desktop hover behaviour is left exactly as it was.
 * To roll the whole thing back, remove the <link> in front/common/layout.blade.php. */

/* 1. A product card's "Add to Cart" and wishlist buttons are revealed by `.ul-product:hover`
 *    (assets_front/css/style.css:1286). A phone has no hover, so on every touch device those buttons
 *    stayed at opacity 0 with pointer-events none - the entire shop listing had no way to put anything
 *    in a basket. These are the same three declarations the hover state already uses; only the trigger
 *    is different, and it cannot fire on a device that has a mouse. */
/*    A touch query alone is NOT a phone test: this was first written as (hover: none), (pointer: coarse)
 *    and a 1280px window on a Windows touchscreen laptop reported BOTH, so the buttons sat permanently on
 *    the desktop cards - the exact thing this file promises not to do. The width bound is what keeps a big
 *    screen out; the touch part is what keeps a hover-capable narrow window out. */
@media (hover: none) and (max-width: 1199.98px), (pointer: coarse) and (max-width: 1199.98px) {
  .ul-product .ul-product-actions {
    top: 50%;
    pointer-events: all;
    opacity: 1;
  }
}

/* Phones only. 767.98px is Bootstrap's own md boundary, so this starts exactly where the theme's
 * two-column layouts stop. */
@media (max-width: 767.98px) {

  /* 2. `.contact-form .ul-checkout-form-btn` is width:30% (assets_front/css/style.css:3959). Inside a
   *    161px column that is a 48px button holding 58px of the word "Submit", so the label hung outside
   *    its own pill on the login screen. */
  .contact-form .ul-checkout-form-btn {
    width: auto;
    min-width: 140px;
  }

  /* 3. iOS Safari zooms the whole page when a focused field is smaller than 16px, and the visitor has to
   *    pinch back out to see the rest of the form. The theme sets 14px. 16px is the browser's threshold,
   *    not a design preference. */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px;
  }

  /* 4. The basket quantity stepper (+ and - at 30x27px) is too small for a thumb, but it is NOT fixed here.
   *    Widening .qtybutton-box to 44px was tried and reverted: the + and - glyphs are positioned for a 30px
   *    column, so the minus lost its centring and disappeared. Making that stepper bigger means changing how
   *    it is drawn, which is a design decision, not a CSS patch - it is written up rather than bodged. */

  /* 4b. Product names on this shop are long and contain no spaces to break at - "Dust/Monomer/Fumes and Virus
   *     Pro Extractor unit..." - and the heading is 40px. On a 375px phone that word painted 40px past the edge
   *     and the whole page scrolled sideways. break-word only acts on a word that does not fit; a heading that
   *     already fits is laid out exactly as before. */
  h1, h2, h3, h4,
  .title,
  .ul-product-title,
  .ul-breadcrumb-title,
  .ul-product-details-title {
    overflow-wrap: break-word;
  }

  /* 4c. elevateZoom's magnifier panel is a desktop idea: it draws a 400px window beside the product photo.
   *     On a 375px phone it sat 40px past the right edge, so every product page could be dragged sideways and
   *     the layout looked broken. A phone already has pinch-zoom. !important is needed because the plugin writes
   *     display:block inline from JavaScript. */
  .zoomContainer,
  .zoomWindowContainer,
  .zoomWindow,
  .zoomLens {
    display: none !important;
  }

  /* 5. Touch targets that stay the size they look: an invisible 44x44 area over controls that are drawn
   *    smaller (Apple and Android both document 44px as the minimum). Nothing moves and nothing is
   *    repainted - only the region that accepts the tap changes. */
  .btn-remove {
    position: relative;
  }
  .btn-remove::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
  /* Padding plus a negative margin was the first attempt here and it was wrong: the negative margin pulled
   *    the next icon 12px closer and the search and account icons ended up overlapping by 3px. An overlay
   *    grows only the tap region. 8px a side (36px total) rather than a full 44px, because these icons sit
   *    ~15px apart and a 44px region would start swallowing taps meant for the icon next door. */
  .ul-header-sidebar-opener,
  .ul-header-mobile-search-opener {
    position: relative;
  }
  .ul-header-sidebar-opener::after,
  .ul-header-mobile-search-opener::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* 6. A real "Add to cart" button, at every width.
 *    The theme draws this control as a 62px circle with the words "Add to Cart" loose inside it
 *    (assets_front/css/style.css:1337: width clamp(62px, 2.1vw, 40px) - a minimum larger than its own
 *    maximum - plus aspect-ratio 1/1), so the label wrapped onto three lines and hung over the photo.
 *    It looked like that on desktop hover too; it was simply never seen because it only appeared on hover.
 *    Colours are written as hex rather than var(--ul-primary) on purpose: this button must keep working
 *    whatever happens to the theme's custom properties. #EF2853 is the theme's own primary. */
.ul-product-actions .hx-quick-add {
  width: auto;
  height: 44px;
  aspect-ratio: auto;
  max-width: calc(100% - 24px);
  padding: 0 18px;
  gap: 8px;
  border-radius: 999px;
  background: #EF2853;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ul-product-actions .hx-quick-add span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.ul-product-actions .hx-quick-add i {
  color: #fff;
  font-size: 16px;
  padding-top: 0;
}
.ul-product-actions .hx-quick-add:hover,
.ul-product-actions .hx-quick-add:focus-visible {
  background: #D21344;
}