/* ==========================================================================
   Bully Pals — WordPress / WooCommerce additions
   style.css is a byte-identical copy of the approved template. Everything that only exists
   in WordPress (admin bar, notices, cart/checkout/account pages, review form, blog) lives here
   and uses the template's tokens.
   1. WordPress chrome   2. Template add-ons   3. Pages & entry content
   4. Notices            5. Forms              6. Cart / checkout / account
   ========================================================================== */

/* 1. WORDPRESS CHROME ----------------------------------------------------- */
/* Logged-in admin bar (32px desktop, 46px ≤ 782px, scrolls away ≤ 600px).
   Only offset elements while they are actually sticky in style.css — on smaller screens the
   template turns them static (≤ 960px) or into a drawer (filters, ≤ 1180px), and a fixed
   height/top here would override that (e.g. the "Why" story scrolling inside itself). */
.admin-bar .header { top: 32px; }
.admin-bar .drawer, .admin-bar .search { top: 32px; }
@media (min-width: 961px) {
  .admin-bar .hstory__pin { top: 32px; height: calc(100vh - 32px); }
  .admin-bar .gallery { top: calc(var(--header-h) + 52px); }
  .admin-bar .faq__aside,
  .admin-bar .rv__summary { top: calc(var(--header-h) + 62px); }
}
@media (min-width: 1181px) {
  .admin-bar .filters { top: calc(var(--header-h) + 56px); max-height: calc(100vh - var(--header-h) - 80px); }
}
@media (max-width: 1180px) {
  .admin-bar .filters { top: 32px; }   /* filters drawer */
}
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
  .admin-bar .drawer, .admin-bar .search, .admin-bar .filters { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .header { top: 0; }
  .admin-bar .drawer, .admin-bar .search, .admin-bar .filters { top: 0; }
}

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 2. TEMPLATE ADD-ONS ----------------------------------------------------- */
/* wp_get_attachment_image() prints width/height attributes the static template did not have.
   Zero specificity: any template rule that sizes an image still wins. */
:where(img[height]) { height: auto; }

/* Out-of-stock pack sizes */
.variant[data-out] { opacity: .45; cursor: not-allowed; }
.variant[data-out] strong { text-decoration: line-through; }
#atc[disabled], #atcSticky[disabled] { opacity: .5; pointer-events: none; }
.js-checkout[disabled] { opacity: .5; pointer-events: none; }

/* Review form under the review list */
.rv__form { margin-top: 26px; padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.rv__form .comment-reply-title { margin: 0 0 16px; }
.rv__form .comment-form { display: grid; gap: 14px; }
.rv__form .comment-form p { margin: 0; }
.rv__form .form-submit { margin-top: 6px; }
.rv__form .select { display: block; max-width: 280px; }
.review > p { margin: 0; }

/* 3. PAGES & ENTRY CONTENT ----------------------------------------------- */
.bp-page__title { margin: 18px 0 clamp(22px, 3vw, 36px); }
.bp-entry { max-width: 820px; color: var(--ink-2); }
.bp-page--woo .bp-entry { max-width: none; }
.bp-entry > * + * { margin-top: 1.1em; }
.bp-entry h2, .bp-entry h3, .bp-entry h4 { color: var(--ink); font-family: var(--font-display); line-height: 1.2; margin-top: 1.6em; }
.bp-entry a { text-decoration: underline; text-underline-offset: 3px; }
.bp-entry ul, .bp-entry ol { padding-left: 22px; }
.bp-entry ul { list-style: disc; }
.bp-entry img { border-radius: var(--radius-sm); height: auto; }
.bp-entry blockquote { margin-left: 0; padding-left: 20px; border-left: 4px solid var(--amber); }
.bp-entry table { width: 100%; border-collapse: collapse; }
.bp-entry th, .bp-entry td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.bp-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.bp-post { display: grid; gap: 10px; align-content: start; }
.bp-post__img img { border-radius: var(--radius-sm); width: 100%; height: auto; }
.bp-pagination { margin-top: 40px; }
.bp-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); display: inline-grid; place-items: center; font-weight: 600; }
.bp-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 4. NOTICES -------------------------------------------------------------- */
.bp-notices { padding-top: 18px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice,
.wc-block-components-notice-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 16px 20px;
  border-radius: var(--radius-sm); background: var(--lime-l); color: var(--ink); border: 1px solid rgba(94, 127, 11, .25);
  list-style: none; font-weight: 500;
}
.woocommerce-info, .wc-block-components-notice-banner.is-info { background: var(--cream); border-color: var(--line); }
.woocommerce-error, .wc-block-components-notice-banner.is-error { background: #FBE7DF; border-color: rgba(196, 80, 43, .3); color: var(--rust); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }
.wc-block-components-notice-banner > svg { display: none; }

/* 5. FORMS ---------------------------------------------------------------- */
.bp-entry input[type="text"], .bp-entry input[type="email"], .bp-entry input[type="tel"], .bp-entry input[type="password"],
.bp-entry input[type="number"], .bp-entry input[type="search"], .bp-entry select, .bp-entry textarea,
.rv__form input[type="text"], .rv__form input[type="email"], .rv__form select, .rv__form textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; transition: border-color .25s;
}
.bp-entry textarea, .rv__form textarea { min-height: 130px; resize: vertical; }
.bp-entry input:focus, .bp-entry select:focus, .bp-entry textarea:focus,
.rv__form input:focus, .rv__form select:focus, .rv__form textarea:focus { outline: none; border-color: var(--ink); }
.bp-entry label, .rv__form label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink); font-size: 14px; }
.bp-entry .required, .rv__form .required { color: var(--rust); text-decoration: none; }
.rv__form select, .bp-entry .select select { appearance: none; padding-right: 44px; }

/* WooCommerce classic buttons → template .btn look */
.bp-entry .button, .bp-entry button[type="submit"], .bp-entry input[type="submit"],
.bp-notices .button, .woocommerce-message .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 700 15px/1 var(--font-body);
  cursor: pointer; text-decoration: none; transition: background .3s, transform .3s var(--ease);
}
.bp-entry .button:hover, .bp-entry button[type="submit"]:hover { background: var(--ink-deep); transform: translateY(-2px); }
.bp-entry .button.alt, .bp-entry #place_order, .bp-entry .checkout-button { background: var(--amber); }
.bp-entry .button.alt:hover, .bp-entry #place_order:hover, .bp-entry .checkout-button:hover { background: var(--amber-d); }

/* 6. CART / CHECKOUT / ACCOUNT ------------------------------------------- */
/* Block cart & checkout (default since WooCommerce 8.3): map to template tokens. */
.bp-page--woo .wp-block-woocommerce-cart,
.bp-page--woo .wp-block-woocommerce-checkout { font-family: var(--font-body); color: var(--ink); }
.bp-page--woo .wc-block-components-button:not(.is-link) {
  min-height: 54px; border-radius: 999px; background: var(--amber); color: #fff; border: 0; font-weight: 700;
}
.bp-page--woo .wc-block-components-button:not(.is-link):hover { background: var(--amber-d); }
.bp-page--woo .wc-block-components-totals-wrapper,
.bp-page--woo .wc-block-cart__sidebar .wc-block-components-sidebar,
.bp-page--woo .wc-block-checkout__sidebar {
  border-color: var(--line);
}
.bp-page--woo .wp-block-woocommerce-cart-order-summary-block,
.bp-page--woo .wp-block-woocommerce-checkout-order-summary-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 6px;
}
.bp-page--woo .wc-block-components-text-input input,
.bp-page--woo .wc-block-components-combobox .wc-block-components-combobox-control input,
.bp-page--woo .wc-blocks-components-select .wc-blocks-components-select__select {
  border-radius: 12px !important; border-color: var(--line) !important; background: #fff;
}
.bp-page--woo .wc-block-components-product-name { font-weight: 700; color: var(--ink); }
.bp-page--woo .wc-block-components-formatted-money-amount { font-family: var(--font-display); font-weight: 700; }
.bp-page--woo .wc-block-components-checkout-step__title,
.bp-page--woo .wc-block-cart__totals-title { font-family: var(--font-display) !important; font-weight: 800 !important; text-transform: none !important; font-size: 20px !important; }
.bp-page--woo a { color: inherit; }
.bp-page--woo .bp-entry a { text-decoration: none; }
.bp-page--woo .bp-entry ul { list-style: none; padding-left: 0; }

/* Classic (shortcode) cart & checkout */
.bp-entry table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.bp-entry table.shop_table th { background: var(--cream); font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.bp-entry table.shop_table img { width: 64px; border-radius: 10px; }
.bp-entry .cart-collaterals, .bp-entry #order_review { margin-top: 30px; }
.bp-entry .woocommerce-checkout #customer_details,
.bp-entry .col2-set { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bp-entry .form-row { margin: 0 0 14px; }
.bp-entry #payment { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.bp-entry #payment ul.payment_methods { list-style: none; padding: 0; display: grid; gap: 10px; }

/* My account */
.bp-page--woo .woocommerce { display: grid; gap: 30px; }
@media (min-width: 900px) {
  .bp-page--woo .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 250px 1fr; align-items: start; }
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 8px; margin: 0; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: 10px; font-weight: 600; text-decoration: none !important; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: #fff; }
.woocommerce-MyAccount-navigation a:hover { background: var(--cream); }
.woocommerce-MyAccount-navigation .is-active a:hover { background: var(--ink); }
.bp-entry .woocommerce-form-login, .bp-entry .woocommerce-form-register { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }