/*
 * BesaPharm — Global 1280px + flow styles.
 * Cart and checkout layout is handled exclusively in bp-overrides.css
 */

/* ==========================================================
 * 0. GLOBAL 1280px
 * ========================================================== */

.oxa-page,
#primary.content-area,
body.woocommerce #primary,
body.woocommerce-page #primary,
body.woocommerce .site-main,
body.woocommerce-page .site-main {
  max-width: 1280px;
  margin-inline: auto;
  /* No inline padding: sections are meant to reach the 1280px content edges.
   * bp-mobile.css puts 15px back below the mobile breakpoint so content never
   * touches the screen edge on a phone. */
  padding-inline: 0;
}

.woocommerce .bp-site-header + .oxa-page,
.woocommerce-page .bp-site-header + .oxa-page,
body.post-type-archive-product .oxa-page,
body.tax-product_cat .oxa-page {
  max-width: 1280px !important;
}

/* Full-bleed breakout */
.oxa-page > .oxa-slider,
.oxa-page > .oxa-cta--soft,
.oxa-page > .wp-block-cover {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Vertical padding */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main {
  padding-block: 1.5rem 3rem;
}

/* ==========================================================
 * HOMEPAGE
 * ========================================================== */

body.home .oxa-slider__content { display: none !important; }
body.home .oxa-slider__slide--has-image::before { background: none !important; }

body.home .oxa-cta--soft .oxa-cta__title { display: none; }
body.home .oxa-cta--soft .oxa-cta__subtitle {
  max-width: 900px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #1d1d1d;
  white-space: pre-line;
}

/* ==========================================================
 * GLOBAL — breadcrumbs, shop title
 * ========================================================== */

.woocommerce-products-header__title.page-title { display: none !important; }

.woocommerce-breadcrumb {
  font-size: 15px !important;
  color: #1d1d1d !important;
  margin-bottom: 1.5rem;
  padding: 0;
}
.woocommerce-breadcrumb a { color: #1d1d1d !important; }
.woocommerce-breadcrumb a:hover { color: var(--bp-brand-hover, #3d3d3d) !important; }

/* ==========================================================
 * SHOP — product card center
 * ========================================================== */

ul.products li.product,
.woocommerce ul.products li.product {
  text-align: center !important;
  align-items: center !important;
}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center !important;
  padding-inline: 0.75rem !important;
}
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  text-align: center !important;
  padding-inline: 0.75rem !important;
}
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button {
  align-self: center !important;
  margin-inline: auto !important;
}
ul.products li.product .star-rating { margin-inline: auto !important; }

/* ==========================================================
 * WC NOTICES
 * ========================================================== */

/* All three notices are measured off the checkout they appear in: 16px on a 2
 * line-height is the label size beside them, and the square corner is the one
 * the inputs and the "Bëje porosinë" button use. A 10px radius was the only
 * rounded box on the page.
 *
 * `margin` rather than `margin-bottom`: the form is a two-column grid and a
 * validation error lands directly under the order-notes box, so with no top
 * margin it read as part of that field. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  padding: 1rem 1.25rem;
  border-radius: 0;
  margin: 1.5rem 0;
  font-size: 16px;
  line-height: 2;
}
.woocommerce-message, .woocommerce-info {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  display: flex; align-items: center; gap: 0.75rem;
}
.woocommerce-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.woocommerce-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  list-style: none; padding-left: 1.25rem;
}
/* Each row inherits the box: same size, same red. The bold part is the field
 * name, so it carries weight rather than a second colour — a third colour in a
 * four-line box is noise. */
.woocommerce-error li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.woocommerce-error li strong { font-weight: 600; color: inherit; }
/* The row is a jump link to the field it names. Underlined only on hover, so it
 * is discoverable without four underlined sentences reading as body copy. */
.woocommerce-error li a { color: inherit; text-decoration: none; }
.woocommerce-error li a:hover,
.woocommerce-error li a:focus-visible { text-decoration: underline; }
/* WooCommerce core draws a glyph of its own icon font in ::before and places it
 * absolutely — `top: 1em; left: 1.5em` — inside the `padding: 1em 2em 1em 3.5em`
 * that woocommerce.css gives all three notices. The three rules above restate
 * the padding as `1rem 1.25rem`, so the 3.5em indent that the glyph was sitting
 * in is gone while the glyph itself is still drawn at left: 1.5em: it lands on
 * top of the first line instead of beside it, which is the stray mark customers
 * see over a checkout error.
 *
 * Removed rather than re-indented: the design carries no glyphs on notices, so
 * putting the 3.5em back would only reserve room for a mark nothing here wants.
 * `content: none` produces no box at all, so the ::before also stays out of the
 * flex row above and `.woocommerce-message a.button` is still pushed to the
 * right edge by its own `margin-left: auto`. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* The returning-customer strip at the top of the checkout.
 *
 * WooCommerce prints it as a plain .woocommerce-info, so without this it arrives
 * in the light-blue notice paint above. On the client's storefront it is a black
 * bar with white 16px type, tight to the form below it — measured at
 * 1280 × 41.88, padding 8px 12px, margin-bottom 12px, and those are the numbers
 * used here.
 *
 * Scoped to .woocommerce-form-login-toggle, which is the only wrapper
 * WooCommerce gives this one notice, so the blue paint still applies to every
 * other .woocommerce-info — the empty-cart message, the my-account notices.
 *
 * The link is stated explicitly: main.css excludes notices from its editorial
 * link rule, so without this it would inherit white-with-no-underline and stop
 * looking like the thing you are meant to click. */
.woocommerce-form-login-toggle .woocommerce-info {
  background: #000000;
  border: 0;
  color: #ffffff;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
}
.woocommerce-form-login-toggle .woocommerce-info a {
  color: #ffffff;
  text-decoration: underline;
}

/* The login form the strip reveals.
 *
 * WooCommerce dresses `form.login` as a card of its own — 1px #cfc8d8 at a 5px
 * radius with 20px of padding — and paints its submit the default grey
 * (#e9e6ed on #515151, 3px radius). Dropped onto this checkout it read as a
 * panel borrowed from another site sitting inside the form. Everything below
 * either removes that box or restates a value the checkout already uses, so the
 * revealed form looks like the fields underneath it: no border, square corners,
 * flush left, black button.
 *
 * Scoped to the checkout body. The my-account login screen has its own design in
 * bp-auth.css and is deliberately left alone.
 *
 * Specificity beats WooCommerce's own (`.woocommerce form.login`, 0-2-1) without
 * !important, so a later rule can still override any of this. */
body.woocommerce-checkout form.woocommerce-form-login {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 16px;
  /* Username and password share a row, the way Emër and Mbiemër do below.
   * WooCommerce already asks for it — it puts form-row-first on the one and
   * form-row-last on the other — but nothing was laying the form out to receive
   * them, so both spanned the full width. Same two-column grid with explicit
   * columns that bp-cart.css gives the billing wrapper, and for the same reason:
   * assigned rather than auto-flowed, so a row WooCommerce adds later cannot
   * land in a free cell and split the pair. Column gap only — the rows carry
   * their own vertical margins. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  align-items: start;
}
body.woocommerce-checkout form.woocommerce-form-login > .form-row-first { grid-column: 1; }
body.woocommerce-checkout form.woocommerce-form-login > .form-row-last { grid-column: 2; }
body.woocommerce-checkout form.woocommerce-form-login > p:not(.form-row-first):not(.form-row-last),
body.woocommerce-checkout form.woocommerce-form-login > .woocommerce-privacy-policy-text {
  grid-column: 1 / -1;
}
/* The intro line and the field labels at the size the billing labels use. */
body.woocommerce-checkout form.woocommerce-form-login > p,
body.woocommerce-checkout form.woocommerce-form-login label {
  font-size: 16px;
  color: #43454b;
}
/* Same box as #billing_first_name and its neighbours. */
body.woocommerce-checkout form.woocommerce-form-login input.input-text {
  border: 1px solid #e5e7eb;
  border-radius: 0;
}
/* Same button as the rest of the flow, at form scale rather than the larger
   "Bëje porosinë" size. */
body.woocommerce-checkout form.woocommerce-form-login button[name="login"] {
  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
}
body.woocommerce-checkout form.woocommerce-form-login button[name="login"]:hover {
  background: #3d3d3d;
}
/* "Mbamë mend" above the button, not beside it.
 *
 * WooCommerce puts both inside one <p class="form-row"> with the button first,
 * so inline flow left the tickbox hanging off the button's right shoulder. A
 * flex column stacks them and `order` puts the choice before the action, which
 * is the order the client's storefront reads in. The row is addressed as the
 * one .form-row that is neither first nor last — the two named ones are the
 * username and password. */
body.woocommerce-checkout form.woocommerce-form-login > p.form-row:not(.form-row-first):not(.form-row-last) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__rememberme {
  order: -1;
  margin: 0;
}

.woocommerce-message a.button, .woocommerce-info a.button {
  margin-left: auto; padding: 0.5rem 1.25rem;
  background: var(--bp-brand, #111111); color: #fff; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}

/* ==========================================================
 * CART TABLE (shared cart + checkout)
 * ========================================================== */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.woocommerce table.shop_table th {
  background: #f3f4f6;
  font-weight: 600; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
  padding: 1rem 1.25rem; text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.woocommerce table.shop_table td {
  padding: 1rem 1.25rem; vertical-align: middle;
  border-bottom: 1px solid #e5e7eb; color: #1d1d1d;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table .product-thumbnail img {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb; padding: 0.25rem;
}
.woocommerce table.shop_table .product-name a { font-weight: 500; color: #1d1d1d; }
.woocommerce table.shop_table .product-name a:hover { color: var(--bp-brand-hover, #3d3d3d); }
.woocommerce table.shop_table .quantity .qty {
  width: 56px; height: 40px; text-align: center;
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9375rem; font-weight: 600;
}
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px;
  color: #6b7280 !important; font-size: 1.25rem;
}
.woocommerce table.shop_table .product-remove a.remove:hover { background: #fee2e2; color: #dc2626 !important; }
.woocommerce table.shop_table td.actions { padding: 1.25rem; }
.woocommerce table.shop_table td.actions .coupon { display: inline-flex; gap: 0.5rem; align-items: center; }
.woocommerce table.shop_table td.actions .coupon .input-text {
  height: 44px; padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb; border-radius: 9999px; font-size: 0.875rem; min-width: 140px;
}
.woocommerce table.shop_table td.actions .coupon .input-text:focus { outline: none; border-color: var(--bp-brand, #111111); }
.woocommerce table.shop_table td.actions .coupon .button,
.woocommerce table.shop_table td.actions button[name="update_cart"] {
  height: 44px; padding: 0 1.25rem;
  background: var(--bp-brand, #111111); color: #fff; border: 0;
  border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.woocommerce table.shop_table td.actions button[name="update_cart"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================
 * CART TOTALS table inside the right panel
 * ========================================================== */

.woocommerce .cart_totals > h2 {
  font-size: 1.125rem !important; font-weight: 700; margin-bottom: 1rem; color: #1d1d1d;
}
.woocommerce .cart_totals table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: 0.75rem 0; border-bottom: 1px solid #e5e7eb;
  font-size: 0.9375rem; vertical-align: top;
}
.woocommerce .cart_totals table th {
  font-weight: 600; color: #6b7280; text-align: left; width: 38%; white-space: nowrap;
}
.woocommerce .cart_totals table td { color: #1d1d1d; word-break: break-word; }
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
  font-weight: 700; font-size: 1.125rem; color: #1d1d1d; border-bottom: 0; padding-top: 1rem;
}

/* ==========================================================
 * CHECKOUT form
 * ========================================================== */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: 1.25rem; font-weight: 700; color: #1d1d1d;
  margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
.woocommerce-checkout .form-row label {
  display: block; font-size: 0.8125rem; font-weight: 600; color: #1d1d1d; margin-bottom: 0.375rem;
}
.woocommerce-checkout .form-row label .required { color: #dc2626; }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection {
  width: 100%; height: 48px; padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 0.9375rem; color: #1d1d1d; background: #fff;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none; border-color: var(--bp-brand, #111111); box-shadow: 0 0 0 3px rgba(17, 17, 17,0.1);
}
.woocommerce-checkout .form-row textarea { height: auto; min-height: 100px; resize: vertical; }
.woocommerce-checkout #payment { background: transparent; margin-top: 1.5rem; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--bp-brand-hover, #3d3d3d); background: #f5f5f5; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; font-size: 0.9375rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; }
.woocommerce-checkout #payment .payment_box { padding: 0.75rem 0 0 1.75rem; font-size: 0.8125rem; color: #6b7280; }

/* ==========================================================
 * SELECT2
 * ========================================================== */

.select2-container--default .select2-selection--single {
  height: 48px !important; border: 1px solid #e5e7eb !important;
  border-radius: 10px !important; display: flex !important; align-items: center !important; padding-left: 1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #1d1d1d !important; font-size: 0.9375rem !important; line-height: 48px !important; padding-left: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 0.75rem !important; }
.select2-dropdown { border: 1px solid #e5e7eb !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; overflow: hidden; }
.select2-results__option { padding: 0.625rem 1rem !important; font-size: 0.9375rem !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bp-brand, #111111) !important; }

/* ==========================================================
 * EMPTY CART
 * ========================================================== */

.woocommerce .cart-empty { text-align: center; padding: 4rem 2rem; color: #6b7280; font-size: 1.125rem; }
.woocommerce .return-to-shop a.button {
  display: inline-block; padding: 0.875rem 2rem;
  background: var(--bp-brand, #111111); color: #fff; border-radius: 10px; font-weight: 600; margin-top: 1rem;
}

@media (max-width: 768px) {
  /* The login form stacks with them: "Emër përdoruesi ose email" beside a
     password field left each about 170px on a phone. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  body.woocommerce-checkout form.woocommerce-form-login { grid-template-columns: 1fr; }

  /* And the placement goes with the template. A `grid-column: 2` left standing
     against a one-column template does not stack — it creates an implicit
     second track, auto-sized to its content, which is how the two fields came
     out 104px and 240px instead of one above the other. */
  body.woocommerce-checkout form.woocommerce-form-login > .form-row-first,
  body.woocommerce-checkout form.woocommerce-form-login > .form-row-last {
    grid-column: 1;
  }
}