/**
 * v116-additions.css
 *
 * 1. Size guide — proper full-width on desktop
 * 2. Remember me checkbox — aligned correctly, actually works
 * 3. Password toggle — palette colorway, pill-fade hover
 * 4. Empty category pages — silent (no "no products" text)
 * 5. Back arrow blank screen guard
 */

/* ══════════════════════════════════════════════════════════
   1. SIZE GUIDE — fill the screen on PC and mobile
   ══════════════════════════════════════════════════════════ */

/* Remove the inherited .cb-page max-width constraint on size guide */
.cb-size-guide.cb-page,
.cb-size-guide {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Keep normal page horizontal padding so content isn't flush with edge */
  padding-left: clamp(1.2rem, 5vw, 4rem) !important;
  padding-right: clamp(1.2rem, 5vw, 4rem) !important;
  overflow-x: hidden !important;
}

/* Table wrapper: full width, scroll within the page padding */
.sg-table-wrap {
  margin-left:  calc(-1 * clamp(1.2rem, 5vw, 4rem)) !important;
  margin-right: calc(-1 * clamp(1.2rem, 5vw, 4rem)) !important;
  padding-left:  clamp(1.2rem, 5vw, 4rem) !important;
  padding-right: clamp(1.2rem, 5vw, 4rem) !important;
  overflow-x: auto !important;
  width: auto !important;
  box-sizing: content-box !important;
  /* No white bars — transparent background extends beyond table */
  background: transparent !important;
}

.sg-table {
  width: 100% !important;
  min-width: 360px !important; /* enough for mobile */
  table-layout: auto !important;
  border-collapse: collapse !important;
}

/* Cells scale with viewport on desktop */
.sg-table th, .sg-table td {
  padding: clamp(.55rem, 1.2vw, .9rem) clamp(.7rem, 1.5vw, 1.1rem) !important;
  font-size: clamp(.54rem, 1.1vw, .78rem) !important;
  white-space: nowrap;
}

/* Toggle tabs: full-width on mobile, normal on desktop */
.cb-size-guide .sg-gender-toggle {
  width: max-content !important;
  max-width: 100% !important;
}
@media (max-width: 480px) {
  .cb-size-guide .sg-gender-toggle { width: 100% !important; }
  .cb-size-guide .sg-tab { flex: 1 !important; min-width: 0 !important; }
  .sg-table th, .sg-table td { font-size: .52rem !important; padding: .45rem .5rem !important; }
}

/* Section titles spacing on desktop */
.sg-section-title {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}
.sg-group:first-child .sg-section-title:first-child {
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   2. REMEMBER ME — correctly inline, label next to checkbox
   WooCommerce renders it as <label><input type="checkbox"> Remember me</label>
   Default styling misplaces the checkbox due to float/absolute quirks.
   ══════════════════════════════════════════════════════════ */

/* Force the remember-me row to be a normal flex row */
.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-form .woocommerce-form__label-for-checkbox,
.woocommerce-form-login .inline,
.woocommerce-form .inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  cursor: pointer !important;
  font-size: clamp(.58rem, 1.5vw, .7rem) !important;
  color: #666 !important;
  margin: .6rem 0 !important;
  position: static !important; /* override any absolute */
  float: none !important;
  width: auto !important;
}

/* The checkbox itself */
.woocommerce-form-login .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-form .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--cb-hamburger-pink, #ff4fa3) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* The row that contains remember-me + lost-password link */
.woocommerce-form-login .form-row-last.woocommerce-form__label-for-checkbox,
.woocommerce-form-login .lost_password,
.woocommerce-form-login .woocommerce-LostPassword {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin: .5rem 0 .9rem !important;
}

/* ══════════════════════════════════════════════════════════
   3. PASSWORD TOGGLE — palette color, pill-fade hover
   Colours are set in JS dynamically from CSS vars.
   These rules handle the layout and transition.
   ══════════════════════════════════════════════════════════ */

.cb-pw-wrap {
  position: relative !important;
  display: block !important;
}
.cb-pw-wrap input[type="password"],
.cb-pw-wrap input[type="text"] {
  width: 100% !important;
  padding-right: 2.4rem !important;
  box-sizing: border-box !important;
}
.cb-pw-toggle {
  position: absolute !important;
  right: .5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: .8rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  /* Transition matches the pill fade */
  transition: color .2s ease, opacity .2s ease !important;
  z-index: 2 !important;
  user-select: none !important;
}

/* ══════════════════════════════════════════════════════════
   4. EMPTY CATEGORY PAGES — silent, no text
   ══════════════════════════════════════════════════════════ */

.cb-cat-empty,
.cb-cat-empty p {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   5. BACK ARROW BLANK SCREEN — ensure wrapper always visible
   on non-front pages (belt and braces alongside JS fix)
   ══════════════════════════════════════════════════════════ */

body.cb-not-entered:not(.home):not(.front-page) #cb-site-wrapper,
body.cb-not-entered:not(.home):not(.front-page) #cb-main {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.cb-not-entered:not(.home):not(.front-page) #cb-star-gate {
  display: none !important;
}

/* WooCommerce login: make form wider on desktop */
.cb-signin-page .woocommerce-form-login {
  width: 100% !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   6. GATE RECOVERY — if gate is somehow stuck on an inner
   page (e.g. bfcache restored before JS ran), CSS hides it.
   ══════════════════════════════════════════════════════════ */

/* Any page that is NOT the front page should never show the gate */
body.cb-subpage #cb-star-gate,
body.page-template-page-dashboard #cb-star-gate,
body.page-template-page-account #cb-star-gate,
body.page-template-page-signin #cb-star-gate,
body.page-template-page-signup #cb-star-gate,
body.page-template-page-cart #cb-star-gate,
body.page-template-page-checkout #cb-star-gate,
body.page-template-page-contact #cb-star-gate,
body.page-template-page-about #cb-star-gate,
body.page-template-page-faq #cb-star-gate,
body.page-template-page-privacy-policy #cb-star-gate {
  display: none !important;
  visibility: hidden !important;
}

/* On non-front pages, site-wrapper is always visible regardless of entered state */
body.cb-subpage #cb-site-wrapper,
body.cb-subpage #cb-main {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}