/* Phase 1.1: functional price range, unified account menu and readable checkout terms. */
.ll-v3-shop-price-filter {
  display: grid;
  gap: 12px;
  padding-top: 4px
}

.ll-v3-shop-price-filter>strong {
  color: #f2d368
}

.ll-v3-price-values {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #f6f7fb;
  font-weight: 900
}

.ll-v3-price-slider {
  --ll-min: 0%;
  --ll-max: 100%;
  position: relative;
  height: 32px
}

.ll-v3-price-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(255, 255, 255, .13) 0 var(--ll-min), #d4af37 var(--ll-min) var(--ll-max), rgba(255, 255, 255, .13) var(--ll-max) 100%)
}

.ll-v3-price-slider input[type=range] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none
}

.ll-v3-price-slider input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 3px solid #10131b;
  border-radius: 50%;
  background: #e4c34e;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, .35), 0 5px 14px rgba(0, 0, 0, .45);
  pointer-events: auto;
  cursor: grab
}

.ll-v3-price-slider input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #10131b;
  border-radius: 50%;
  background: #e4c34e;
  pointer-events: auto;
  cursor: grab
}

.ll-v3-price-apply {
  min-height: 42px;
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 999px;
  background: linear-gradient(180deg, #e7ca61, #d4af37);
  color: #080b11;
  font-weight: 900;
  cursor: pointer
}

body:not(.wp-admin) .ll-c4-account-menu {
  min-width: 260px !important;
  padding: 12px !important;
  border: 1px solid rgba(212, 175, 55, .36) !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, rgba(16, 18, 29, .99), rgba(22, 8, 31, .99)) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .05) !important;
  clip-path: none !important
}

.ll-c4-account-menu:before {
  content: "My Lootcave";
  display: block;
  padding: 8px 12px 10px;
  color: #e6c75b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase
}

.ll-c4-account-menu a,
.ll-c4-account-menu button.ll-c4-account-rank-link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 2px 0 !important;
  padding: 11px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #f5f5f7 !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important
}

.ll-c4-account-menu a:hover,
.ll-c4-account-menu button.ll-c4-account-rank-link:hover {
  border-color: rgba(212, 175, 55, .25) !important;
  background: rgba(212, 175, 55, .09) !important;
  color: #f2d368 !important
}

html.ll-terms-open {
  overflow: hidden
}

.woocommerce-terms-and-conditions {
  display: none !important
}

.ll-terms-modal[hidden] {
  display: none !important
}

.ll-terms-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 18px
}

.ll-terms-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 3, 8, .82);
  backdrop-filter: blur(8px)
}

.ll-terms-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(84vh, 900px);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, .42);
  border-radius: 25px;
  background: linear-gradient(165deg, #111522, #090b12);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .72), 0 0 42px rgba(125, 63, 224, .18);
  color: #f4f5f8
}

.ll-terms-dialog header {
  padding: 24px 62px 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.ll-terms-dialog header span {
  color: #d8b94a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase
}

.ll-terms-dialog h2 {
  margin: 5px 0 0;
  color: #fff;
  font-size: clamp(23px, 4vw, 34px);
  line-height: 1.12
}

.ll-terms-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer
}

.ll-terms-content {
  min-height: 0;
  overflow: auto;
  padding: 22px 24px;
  font-size: 16px;
  line-height: 1.7
}

.ll-terms-content h1,
.ll-terms-content h2,
.ll-terms-content h3 {
  color: #f0cf5d
}

.ll-terms-content a {
  color: #efd05f
}

.ll-terms-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .16)
}

.ll-terms-dialog footer a {
  color: #e7c95b;
  font-weight: 800
}

.ll-terms-dialog footer button {
  min-width: 110px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e7cb64, #d4af37);
  color: #090b10;
  font-weight: 900
}

@media(max-width:600px) {
  .ll-terms-modal {
    padding: 10px
  }

  .ll-terms-dialog {
    max-height: 90vh;
    border-radius: 20px
  }

  .ll-terms-dialog header {
    padding: 20px 58px 15px 18px
  }

  .ll-terms-content {
    padding: 18px;
    font-size: 15px
  }

  .ll-terms-dialog footer {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom))
  }

  .ll-terms-dialog footer button {
    width: 100%
  }
}

/* Phase 1.2: target the actual body-level mobile account portal created by Concept 4. */
body:not(.wp-admin) .ll-c4-account-menu-mobile-portal {
  width: min(300px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  gap: 7px !important;
  padding: 14px !important;
  border: 1px solid rgba(212, 175, 55, .42) !important;
  border-radius: 22px !important;
  clip-path: none !important;
  background: radial-gradient(circle at 88% 0, rgba(126, 65, 207, .20), transparent 38%), linear-gradient(160deg, rgba(14, 17, 27, .995), rgba(12, 7, 20, .995)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 28px rgba(111, 49, 179, .13) !important;
}

body:not(.wp-admin) .ll-c4-account-menu-mobile-portal::before {
  content: "" !important;
  top: -7px !important;
  right: 35px !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid rgba(212, 175, 55, .40) !important;
  background: #11101b !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .ll-c4-account-menu-mobile-portal a,
body:not(.wp-admin) .ll-c4-account-menu-mobile-portal button.ll-c4-account-rank-link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
  color: #f7f5ef !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .ll-c4-account-menu-mobile-portal a:hover,
body:not(.wp-admin) .ll-c4-account-menu-mobile-portal a:focus-visible,
body:not(.wp-admin) .ll-c4-account-menu-mobile-portal button.ll-c4-account-rank-link:hover,
body:not(.wp-admin) .ll-c4-account-menu-mobile-portal button.ll-c4-account-rank-link:focus-visible {
  border-color: rgba(212, 175, 55, .46) !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, .12), rgba(111, 49, 179, .14)) !important;
  color: #f2d368 !important;
  box-shadow: inset 3px 0 0 rgba(212, 175, 55, .72) !important;
}

/* Phase 1.3: isolate the mobile account portal from page-level grid/button rules. */
body:not(.wp-admin) div.ll-c4-account-menu-mobile-portal {
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--ll-c4-account-portal-top, 120px) - 18px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

body:not(.wp-admin) div.ll-c4-account-menu-mobile-portal>a,
body:not(.wp-admin) div.ll-c4-account-menu-mobile-portal>button.ll-c4-account-rank-link {
  position: relative !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 14px !important;
  outline: 0 !important;
}

body:not(.wp-admin) div.ll-c4-account-menu-mobile-portal>button.ll-c4-account-rank-link {
  cursor: pointer !important;
}

/* ========================================================================
   Phase 1.5 — tablets always use the proven mobile experience.
   Scoped to touch-tablet detection so normal desktop/laptop layouts remain.
   ======================================================================== */
@media (max-width: 1366px) {
  html.ll-force-tablet-mobile body:not(.wp-admin) {
    --ll-tablet-mobile-gutter: 14px;
    overflow-x: clip !important;
  }

  /* Always expose Concept 4 and use its mobile controls. */
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-header-shell {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-desktop-nav,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-desktop-menu,
  html.ll-force-tablet-mobile body:not(.wp-admin) .lldcm-shell,
  html.ll-force-tablet-mobile body:not(.wp-admin) .lldcm-wrap,
  html.ll-force-tablet-mobile body:not(.wp-admin) .lldcm-nav {
    display: none !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-mobile-toggle {
    display: grid !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-main-frame {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 72px !important;
    margin: 8px auto 10px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-left-zone,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-actions {
    display: flex !important;
    align-items: center !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-actions {
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-action,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-mobile-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-logo-orb {
    width: 106px !important;
    height: 70px !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-logo-img {
    width: 88px !important;
    max-height: 66px !important;
  }

  /* Suppress any legacy/theme header bridge once Concept 4 exists. */
  html.ll-force-tablet-mobile body:not(.wp-admin):has(.ll-c4-header-shell) .ll-premium-header,
  html.ll-force-tablet-mobile body:not(.wp-admin):has(.ll-c4-header-shell) header.site-header:not(.ll-c4-header-shell),
  html.ll-force-tablet-mobile body:not(.wp-admin):has(.ll-c4-header-shell) .wp-site-blocks>header:not(.ll-c4-header-shell) {
    display: none !important;
  }

  html.ll-force-tablet-mobile body.single-product:not(.wp-admin) .llce-mobile-buybar:not(.llce-mobile-buybar-disabled) {
    display: grid !important;
  }

  /* Catalogue/archive: same two-column touch layout used on phones. */
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-v3-shop-results ul.products,
  html.ll-force-tablet-mobile body:not(.wp-admin).woocommerce .ll-v3-shop-results ul.products,
  html.ll-force-tablet-mobile body:not(.wp-admin).woocommerce-page .ll-v3-shop-results ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html.ll-force-tablet-mobile body:not(.wp-admin) .llc-shop-page,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-v3-shop-shell,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-v3-shop-results,
  html.ll-force-tablet-mobile body:not(.wp-admin) main,
  html.ll-force-tablet-mobile body:not(.wp-admin) .site-main {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  /* Mobile filter controls remain usable on tablets. */
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-filter-fab,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-v3-filter-toggle,
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-filter-toggle {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Account and floating panels stay within the tablet viewport. */
  html.ll-force-tablet-mobile body:not(.wp-admin) .ll-c4-account-menu-mobile-portal {
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}