/*
Theme Name: Pepbros Generated Homepage
Author: Pepbros
Version: 4.1
Description: Pepbros homepage using the generated storefront image as the exact visual reference.
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pepbros-generated-homepage
*/

html, body {
  margin: 0;
  padding: 0;
  background: #000;
}

.pb-home {
  background: #000;
  min-height: 100vh;
}

.pb-home__wrap {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.pb-home__image {
  display: block;
  width: 100%;
  height: auto;
}

.pb-link {
  position: absolute;
  display: block;
  z-index: 10;
  text-indent: -9999px;
  overflow: hidden;
}

.pb-shop-nav { left: 34.5%; top: 1.2%; width: 8%; height: 3%; }
.pb-faq-nav { left: 40.2%; top: 1.2%; width: 6%; height: 3%; }
.pb-about-nav { left: 45.3%; top: 1.2%; width: 8%; height: 3%; }
.pb-contact-nav { left: 56.2%; top: 1.2%; width: 10%; height: 3%; }
.pb-cart-nav { right: 1.5%; top: 1.2%; width: 10%; height: 3%; }
.pb-main-cta { left: 31%; top: 53.7%; width: 38%; height: 5.2%; }
.pb-view-all { right: 4%; top: 76.2%; width: 11%; height: 3%; }
.woocommerce-cart-form,
.cart_totals,
.woocommerce {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
  color: #fff;
}

.woocommerce a {
  color: #57e6b3 !important;
}

.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid rgba(87,230,179,.25);
  background: rgba(0,40,28,.45);
  border-radius: 18px;
  overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  color: #fff;
  padding: 16px;
  border-color: rgba(87,230,179,.18);
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce .checkout-button {
  background: #57e6b3 !important;
  color: #000 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
}

.cart_totals {
  background: rgba(0,40,28,.5);
  border: 1px solid rgba(87,230,179,.25);
  border-radius: 18px;
  padding: 24px;
}
/* =========================================================
   PEPBROS FIX — MOBILE CHECKOUT / CART FIELD COLORS
   Keeps inputs dark like desktop and makes typed text visible
   ========================================================= */

body.woocommerce-cart input,
body.woocommerce-cart select,
body.woocommerce-cart textarea,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-account input,
body.woocommerce-account select,
body.woocommerce-account textarea {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #8dffbd !important;
  border: 1px solid rgba(180, 255, 210, 0.75) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Placeholder text inside fields */
body.woocommerce-cart input::placeholder,
body.woocommerce-cart textarea::placeholder,
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder,
body.woocommerce-account input::placeholder,
body.woocommerce-account textarea::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
}

/* Dropdown fields */
body.woocommerce-cart select,
body.woocommerce-checkout select,
body.woocommerce-account select {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dropdown option menu when opened */
body.woocommerce-cart select option,
body.woocommerce-checkout select option,
body.woocommerce-account select option {
  color: #071f17 !important;
  background: #ffffff !important;
}

/* iPhone / Safari autofill fix */
body.woocommerce-cart input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-account input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #8dffbd !important;
  box-shadow: 0 0 0 1000px #1b2722 inset !important;
  border: 1px solid rgba(180, 255, 210, 0.75) !important;
}
.pb-faq-nav {
  position: absolute;
  top: 18px;
  left: 31%;
  width: 65px;
  height: 35px;
  z-index: 20;
}

.pb-privacy-nav {
  position: absolute;
  top: 18px;
  left: 66%;
  width: 95px;
  height: 35px;
  z-index: 20;
}

/* =========================================================
   PEPBROS AGE / RESEARCH POPUP - DESKTOP + MOBILE FINAL FIX
   Scoped only to the age/research warning popup.
   ========================================================= */

#pepbros-age-gate,
#pepbrosAgeGate,
.pepbros-age-gate,
.pepbros-age-modal,
.pepbros-warning-popup,
.pepbros-research-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background: rgba(0, 12, 5, 0.92) !important;
}

/* Popup card */
#pepbros-age-gate > div,
#pepbrosAgeGate > div,
.pepbros-age-gate > div,
.pepbros-age-modal > div,
.pepbros-warning-popup > div,
.pepbros-research-popup > div {
  width: min(92vw, 780px) !important;
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  margin: 0 auto !important;
  padding: 46px 52px !important;
  box-sizing: border-box !important;
  border: 2px solid #38ff7a !important;
  border-radius: 32px !important;
  background: #031008 !important;
  text-align: center !important;
}

/* Notice pill */
#pepbros-age-gate *:has(> span),
#pepbrosAgeGate *:has(> span),
.pepbros-age-gate *:has(> span),
.pepbros-age-modal *:has(> span),
.pepbros-warning-popup *:has(> span),
.pepbros-research-popup *:has(> span) {
  box-sizing: border-box !important;
}

/* Main heading */
#pepbros-age-gate h1,
#pepbrosAgeGate h1,
.pepbros-age-gate h1,
.pepbros-age-modal h1,
.pepbros-warning-popup h1,
.pepbros-research-popup h1 {
  width: 100% !important;
  max-width: 620px !important;
  margin: 32px auto 38px auto !important;
  text-align: center !important;
  font-size: clamp(38px, 4.8vw, 64px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.03em !important;
}

/* Paragraphs */
#pepbros-age-gate p,
#pepbrosAgeGate p,
.pepbros-age-gate p,
.pepbros-age-modal p,
.pepbros-warning-popup p,
.pepbros-research-popup p {
  width: 100% !important;
  max-width: 660px !important;
  margin: 0 auto 28px auto !important;
  text-align: center !important;
  font-size: clamp(20px, 2.1vw, 30px) !important;
  line-height: 1.55 !important;
}

/* Checkbox confirmation box */
#pepbros-age-gate label,
#pepbrosAgeGate label,
.pepbros-age-gate label,
.pepbros-age-modal label,
.pepbros-warning-popup label,
.pepbros-research-popup label {
  width: 100% !important;
  max-width: 620px !important;
  margin: 34px auto !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  column-gap: 18px !important;
  align-items: start !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Checkbox */
#pepbros-age-gate input[type="checkbox"],
#pepbrosAgeGate input[type="checkbox"],
.pepbros-age-gate input[type="checkbox"],
.pepbros-age-modal input[type="checkbox"],
.pepbros-warning-popup input[type="checkbox"],
.pepbros-research-popup input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  grid-column: 1 !important;
}

/* Checkbox text */
#pepbros-age-gate label *,
#pepbrosAgeGate label *,
.pepbros-age-gate label *,
.pepbros-age-modal label *,
.pepbros-warning-popup label *,
.pepbros-research-popup label * {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Buttons */
#pepbros-age-gate button,
#pepbrosAgeGate button,
.pepbros-age-gate button,
.pepbros-age-modal button,
.pepbros-warning-popup button,
.pepbros-research-popup button,
#pepbros-age-gate a,
#pepbrosAgeGate a,
.pepbros-age-gate a,
.pepbros-age-modal a,
.pepbros-warning-popup a,
.pepbros-research-popup a {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* =========================================================
   MOBILE ONLY
   ========================================================= */

@media screen and (max-width: 700px) {
  #pepbros-age-gate,
  #pepbrosAgeGate,
  .pepbros-age-gate,
  .pepbros-age-modal,
  .pepbros-warning-popup,
  .pepbros-research-popup {
    align-items: flex-start !important;
    padding: 14px !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  #pepbros-age-gate > div,
  #pepbrosAgeGate > div,
  .pepbros-age-gate > div,
  .pepbros-age-modal > div,
  .pepbros-warning-popup > div,
  .pepbros-research-popup > div {
    width: 100% !important;
    max-height: calc(100svh - 28px) !important;
    padding: 28px 18px 34px 18px !important;
    border-radius: 24px !important;
  }

  #pepbros-age-gate h1,
  #pepbrosAgeGate h1,
  .pepbros-age-gate h1,
  .pepbros-age-modal h1,
  .pepbros-warning-popup h1,
  .pepbros-research-popup h1 {
    font-size: clamp(30px, 7.5vw, 42px) !important;
    line-height: 1.16 !important;
    margin: 28px auto 32px auto !important;
  }

  #pepbros-age-gate p,
  #pepbrosAgeGate p,
  .pepbros-age-gate p,
  .pepbros-age-modal p,
  .pepbros-warning-popup p,
  .pepbros-research-popup p {
    font-size: clamp(17px, 4.3vw, 22px) !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }

  #pepbros-age-gate label,
  #pepbrosAgeGate label,
  .pepbros-age-gate label,
  .pepbros-age-modal label,
  .pepbros-warning-popup label,
  .pepbros-research-popup label {
    max-width: 100% !important;
    grid-template-columns: 26px 1fr !important;
    column-gap: 14px !important;
    padding: 20px 16px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  #pepbros-age-gate input[type="checkbox"],
  #pepbrosAgeGate input[type="checkbox"],
  .pepbros-age-gate input[type="checkbox"],
  .pepbros-age-modal input[type="checkbox"],
  .pepbros-warning-popup input[type="checkbox"],
  .pepbros-research-popup input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }
}