/* devices.css - touch / phone / tablet usability layer. Loaded after app.css.
   Nothing here changes the look on a mouse-driven desktop: every visual rule is inside
   (pointer:coarse) or a narrow-width query; the few global rules are behaviour only. */

/* ---- behaviour (all devices): no 300ms tap delay / double-tap-zoom on controls, subtle tap feedback ---- */
a, button, input, select, textarea, label, summary, [role="button"], .clickable, .expander, .btn {
  touch-action: manipulation;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }
.az-overly img, .az-zoom img, .az-large img, .cboxPhoto, .slick-slide img, .ws_images img, .rev_slider img, #cboxLoadedContent img { max-width: none; }

/* notch / home-bar safe areas (viewport-fit=cover). All env() values are 0 on devices without a cutout. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
header .navbar-compact { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#off-canvas-menu .expander-list { padding-left: calc(42px + env(safe-area-inset-left)); }
.modal { padding-left: env(safe-area-inset-left); }

/* ---- touch devices ---- */
@media (pointer: coarse) {
  a, button, input, select, textarea, label, [role="button"], .clickable { -webkit-tap-highlight-color: rgba(161, 36, 16, .12); }

  /* iOS Safari zooms the page when a field under 16px is focused */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea, .form-control { font-size: 16px; }
  input.form-control, select.form-control, .input-group .btn, .form-control.h34 { min-height: 44px; }

  /* buttons that are visibly boxes: grow the box to 44px */
  .btn, .button, .btn-cool, button.btn-cool, a.btn-cool, .sign-btn, button[type=submit], input[type=submit] {
    min-height: 44px;
  }
  .btn-cool, a.btn-cool, .button, .btn.btn-sm { line-height: 1.4; padding-top: 11px; padding-bottom: 11px; }
  .input-group-btn .btn { min-width: 44px; }

  /* small icon controls: invisible 44px hit area around the existing box (layout is not touched).
     Only elements that are already positioned get the ::after overlay, so nothing moves. */
  #off-canvas-menu-toggle, .product-preview .product-controls-list li a, .product-preview .product-controls-list li button,
  .socials a, #openSearch button, .navbar-secondary-menu a.btn, .top-link a.btn { position: relative; }
  #off-canvas-menu-toggle::after, .product-preview .product-controls-list li a::after, .product-preview .product-controls-list li button::after,
  .slick-prev::after, .slick-next::after, .owl-prev::after, .owl-next::after, .navbar-secondary-menu a.btn::after, .top-link a.btn::after,
  body.responsive .collapsed-block .expander::after, #off-canvas-menu-close::after, #openSearch button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  }
  #off-canvas-menu-toggle::after { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .navbar-secondary-menu a.btn::after, .top-link a.btn::after { width: calc(100% + 10px); margin-left: -5px; left: 0; }
  #cboxClose { width: 44px; height: 44px; right: 5px; top: 5px; opacity: 1 !important; }
  #cboxClose::before { top: 15px; left: 15px; }
  #off-canvas-menu-close { padding: 12px; right: 3px; top: 3px; }

  /* real links in lists / menus: give each row a 44px target */
  #off-canvas-menu .expander-list .name { display: flex; align-items: center; padding: 0; min-height: 47px; }
  #off-canvas-menu .expander-list .name a { flex: 1 1 auto; display: block; padding: 10px 0; }
  #off-canvas-menu .expander-list .name .expander { flex: 0 0 auto; margin: 0; padding: 12px 8px; order: 3; float: none; text-align: right; }
  #off-canvas-menu .expander-list .name .expander + a { order: 1; }
  #off-canvas-menu .expander-list li li .name { min-height: 44px; }
  /* nicescroll is not loaded on touch (see app.js): native momentum scrolling instead */
  .scrollable { overflow-x: hidden !important; overflow-y: auto !important; }
  #off-canvas-menu, #cboxLoadedContent, .modal, .dropdown-menu.scrollable, .translation-links {
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }

  .navbar-main-menu .item .btn-main { min-width: 44px; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 14px; }
  footer .menu a, footer .menu-icon a { display: inline-block; padding: 15px 8px; margin: -5px -8px; }
  .navbar-welcome a { position: relative; }
  .navbar-welcome a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; margin-top: -22px; }
  footer .menu li { padding-bottom: 0; }
  .dropdown-menu > li > a { padding-top: 12px; padding-bottom: 12px; }
  .translation-links > li > a { padding-top: 12px; padding-bottom: 12px; }
  .breadcrumbs a { padding: 8px 10px; margin: 0 -10px; line-height: 28px; }
  /* these lists already have 10-12px of spacing between rows: the extra target height is borrowed from it (net growth ~12px/row) */
  .simple-list li:not(:has(.post-thumb)) a, .accordion-simple .panel-body li a, .filters-by-category li a { display: inline-block; padding: 15px 8px; margin: -8px; }
  .checkbox label { display: block; line-height: 20px; margin: -8px 0 -8px -25px; padding: 12px 0 12px 30px; min-height: 44px; }
  ul.tags li a { padding-top: 9px; padding-bottom: 9px; }
  ul.tags li { margin-bottom: 0; }
  .pagination > li > a, .pagination > li > span { min-width: 44px; min-height: 44px; padding-top: 10px; text-align: center; }
  .pagination a, body.responsive .pagination a { width: 44px; height: 44px; line-height: 42px; }
  .product-preview .title a, .title a.load-frame { display: inline-block; padding: 15px 0; margin: -15px 0; }
  a.btn-forgotpassword { display: inline-block; padding: 15px 0; }
  button.btn.btn-sm { min-width: 44px; }
  .socials a, .socials.socials-lg a { width: 44px; height: 44px; line-height: 42px; }
  .socials li { margin-bottom: 8px; }
  .expander-list .expander { min-width: 44px; }
  body.responsive .collapsed-block .expander { width: 44px; height: 44px; line-height: 42px; top: -10px; }
  .collapsed-block h3 { padding-left: 55px; }

  /* wide tables scroll inside their own box, never the page */
  .jj-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* lock the page behind open dialogs / the off-canvas menu */
  html.jj-lock, html:has(body.modal-open) { overflow: hidden; }
}

/* the table wrapper is harmless on any device */
.jj-tablewrap { max-width: 100%; }
@media (max-width: 1199px) { .jj-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- keyboard focus (QA D5 / minor): a visible ring on keyboard focus only, nothing changes for mouse or touch ---- */
a[role="button"]:focus-visible, a.preview-image:focus-visible, .cz-steps a:focus-visible, .subscribe .btn-cool:focus-visible, .subscribe button:focus-visible {
  outline: 3px solid #a12410; outline-offset: -3px; transition: none; /* the ring shows at once, not after the button's own .3s transition */
}
.product-preview a.quick-view:focus-visible { outline: 3px solid #222; outline-offset: 2px; }
.product-preview a.preview-image:focus-visible { outline-offset: -3px; }
.cz-steps a:focus-visible { outline-offset: 2px; border-radius: 4px; }
.subscribe button:focus-visible, .subscribe .btn-cool:focus-visible { outline-offset: 2px; }
.modal-header .close:focus-visible, button.close:focus-visible { outline: 3px solid #a12410; outline-offset: 2px; opacity: 1; }

/* ---- details pop-up: the close X is a real 44px target with readable contrast on touch and narrow screens (QA D6) ---- */
@media (pointer: coarse), (max-width: 1199px) {
  .modal-header .close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -12px -12px 8px; padding: 0; font-size: 32px; line-height: 1; color: #000; opacity: .8; text-shadow: none; }
  .modal-header .close:hover, .modal-header .close:focus { opacity: 1; }
  .modal-header .close span { display: block; margin-top: -3px; }
}

/* ---- touch / narrow: the footer newsletter field must not trigger the iOS focus zoom (QA D12) ---- */
@media (pointer: coarse), (max-width: 1199px) {
  .subscribe input.form-control, .subscribe .form-control, footer input[type=email], footer input[type=text] { font-size: 16px; min-height: 44px; }
  .subscribe .btn-cool, .subscribe button[type=submit] { min-height: 44px; }
}

/* ---- cart (QA D11): below 768px each product becomes a stacked card, nothing is clipped or scrolled sideways, every control is >= 44px ---- */
#cart a.remove-from-cart { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
#cart .btn.disabled { white-space: normal; text-align: left; height: auto; }
@media (pointer: coarse), (max-width: 1199px) {
  #cart .table-shop .btn-sm { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
  #cart .wrapper .btn-cool, #cart .btn.btn-cool { height: auto !important; min-height: 44px; line-height: 1.4; padding-top: 11px; padding-bottom: 11px; }
  #cart .table-shop .btn-sm.disabled { display: inline-flex; }
  #cart .nospinner .btn, #cart .nospinner input.form-control { min-height: 44px; height: 44px; }
  #cart .nospinner .btn { min-width: 44px; font-size: 18px; }
  #cart .nospinner input.form-control { font-size: 16px; }
}
@media (max-width: 767px) {
  #cart .rect-nohover { padding: 0 12px 16px; }
  #cart .jj-tablewrap { overflow: visible; }
  #cart .table-shop td, #cart .table-shop td.notitle { padding: 10px 0 !important; text-align: left; }
  #cart .table-shop td.notitle:first-child { text-align: center !important; }
  #cart .table-shop > tbody > tr { margin-bottom: 14px; padding: 4px 12px; border: 1px dotted #ddd; background: #fff; }
  #cart .table-shop > tbody > tr > td { border: 0; border-bottom: 1px dotted #e6e6e6; }
  #cart .table-shop > tbody > tr > td:last-child { border-bottom: 0; text-align: right !important; padding-bottom: 0 !important; }
  #cart .table-shop > tbody > tr:hover > td { background: transparent; color: inherit; }
  #cart .table-shop td div.th_title { position: static; width: auto; margin: 0 0 4px; padding: 0; text-align: left; white-space: normal; color: #6b6b6b; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
  #cart .table-shop td div.th_title.input-label { line-height: 1.3; }
  #cart .nospinner { width: 100%; max-width: 200px; margin: 0; }
  #cart .wrapper .btn-cool { float: none !important; display: block; width: 100%; margin: 0 0 8px; text-align: center; }
  #cart .wrapper .btn-space { display: none; }
}

/* the footer "+" toggles are 44px on every narrow screen, not only where the browser reports a touch pointer (same values as the touch rule above) */
@media (max-width: 991px) {
  body.responsive .collapsed-block .expander { width: 44px; height: 44px; line-height: 42px; top: -10px; }
  .collapsed-block h3 { padding-left: 55px; }
}

/* ---- keyboard focus for everything not covered above (round-2 QA): header and footer links, cart buttons, Add To Cart,
   fitting radios. Two-tone (dark ring + white halo) so it shows on red buttons and white pages alike. Keyboard only. ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #222 !important; outline-offset: 2px; box-shadow: 0 0 0 4px #fff;
}
label:focus-within { outline: 2px solid #222; outline-offset: 2px; }

/* Pages reached by a form post (checkout, cart) can lose the touch flag in some browsers' emulation, so the iOS zoom guard
   also keys off the screen width (round-2 QA: checkout fields were 12px at 320-768). */
@media (max-width: 1199px) {
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea, .form-control { font-size: 16px; }
}