/**
 * Styles for WooCommerce pages rendered via woocommerce-bypass.php.
 * Scoped under .a1-wc-main so they only affect the bypass shell.
 * Several rules use !important to win against WC core styles, which
 * use high specificity selectors.
 */

.a1-wc-page { display: flex; flex-direction: column; min-height: 100vh; background: #0a1628; }

.a1-wc-main { flex: 1; width: 100%; max-width: 80rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; color: #fff; }
@media (min-width: 1280px) { .a1-wc-main { padding-left: 0; padding-right: 0; } }

.a1-wc-main h1,
.a1-wc-main h2,
.a1-wc-main h3 { color: #fff; font-weight: 800; letter-spacing: -.02em; }

.a1-wc-main a:not(.button):not(.btn-gold):not(.btn-silver) { color: #D6A23A; }
.a1-wc-main a:not(.button):hover { opacity: .85; }

.a1-wc-main .woocommerce-breadcrumb,
.a1-wc-main .woocommerce-result-count { color: rgba(255,255,255,.65); }
.a1-wc-main .woocommerce-breadcrumb a { color: rgba(255,255,255,.65); }

.a1-wc-main .woocommerce-ordering select {
  background: rgba(255,255,255,.05); color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  padding: .5rem .75rem; border-radius: .5rem; font-family: inherit;
}

/* Shop archive header: WC's defaults float the result-count left and the
   sort form right, which clears nothing and leaves the page looking
   right-skewed when the ordering <select> stretches to fill the row.
   Replace the floats with a flex row so both items sit naturally on a
   single line, and stop the select from expanding (our generic form
   select rule below width-100s every select on the page). */
.a1-wc-main .woocommerce-notices-wrapper + .woocommerce-result-count,
.a1-wc-main .woocommerce-result-count { float: none !important; margin: 0 !important; }
.a1-wc-main .woocommerce-ordering { float: none !important; margin: 0 !important; }
.a1-wc-main .woocommerce-ordering select { width: auto !important; min-height: 0; padding: .5rem .75rem !important; }

/* Wrap the result-count + ordering as a flex row sitting just above the
   product grid. Uses :has() (supported everywhere we care about) so we
   don't have to add markup. */
.a1-wc-main .woocommerce-products-header,
.a1-wc-main main.a1-wc-main { /* no-op anchor, keeps cascade explicit */ }
.a1-wc-main .woocommerce-result-count,
.a1-wc-main .woocommerce-ordering {
  display: inline-block; vertical-align: middle;
}
.a1-wc-main .woocommerce-result-count { margin-right: 1.5rem !important; }
.a1-wc-main form.woocommerce-ordering + ul.products { clear: both; }

/* Product grid */
.a1-wc-main ul.products {
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.5rem !important;
  padding: 0 !important; margin: 2rem 0 !important;
  float: none !important; width: 100% !important;
  justify-content: start !important;
  justify-items: stretch !important;
  text-align: left !important;
}
/* WC's core CSS adds ::before / ::after pseudos to ul.products as a
   float-layout clearfix. In a grid container those pseudos become real
   grid items, occupying the first and last cells and pushing actual
   products to the right. Hide them — they're not needed in grid mode. */
.a1-wc-main ul.products::before,
.a1-wc-main ul.products::after { content: none !important; display: none !important; }
.a1-wc-main ul.products li.product {
  background: #E8E9EB; border: 1px solid rgba(0,0,0,.08); border-radius: 1rem;
  padding: 1rem; margin: 0 !important; width: auto !important; float: none !important;
  transition: transform .2s, border-color .2s, box-shadow .2s; color: #1F1F1F;
}
.a1-wc-main ul.products li.product:hover { transform: translateY(-2px); border-color: #D6A23A; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.a1-wc-main ul.products li.product img { width: 100%; border-radius: .75rem; margin-bottom: .75rem; }
.a1-wc-main ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem !important; font-weight: 700 !important; color: #1F1F1F !important;
  padding: 0 !important; margin: .5rem 0 !important;
}
.a1-wc-main ul.products li.product .price { color: #A46F16 !important; font-weight: 700; font-size: 1rem; display: block; margin: .5rem 0; }
.a1-wc-main ul.products li.product .price del { color: rgba(31,31,31,.5) !important; }
.a1-wc-main ul.products li.product .price ins { text-decoration: none; }
.a1-wc-main ul.products li.product .onsale {
  background: #D6A23A !important; color: #1F1F1F !important; border-radius: 9999px !important;
  padding: .25rem .75rem !important; font-size: .75rem !important; font-weight: 700 !important;
  top: 1rem !important; right: 1rem !important; left: auto !important;
  min-height: 0 !important; min-width: 0 !important; line-height: 1.4 !important;
}

/* Buttons (WC classic + Blocks) */
.a1-wc-main a.button,
.a1-wc-main button.button,
.a1-wc-main input.button,
.a1-wc-main #respond input#submit,
.a1-wc-main .wc-block-components-button {
  background: linear-gradient(180deg, #D6A23A 0%, #B58330 100%) !important;
  color: #1F1F1F !important; border-radius: 9999px !important;
  padding: .625rem 1.25rem !important; font-weight: 600 !important;
  font-family: inherit !important; border: none !important;
  margin-top: .5rem !important; display: inline-block; text-decoration: none;
}
.a1-wc-main a.button:hover,
.a1-wc-main button.button:hover { filter: brightness(1.06); }

/* Single product */
.a1-wc-main div.product .product_title { font-size: 2.5rem; color: #fff; }
.a1-wc-main div.product p.price,
.a1-wc-main div.product span.price { color: #D6A23A; font-weight: 700; font-size: 1.5rem; }
.a1-wc-main div.product .woocommerce-tabs ul.tabs li { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); }
.a1-wc-main div.product .woocommerce-tabs ul.tabs li.active { background: #D6A23A; color: #1F1F1F; }
.a1-wc-main div.product .woocommerce-tabs .panel { background: rgba(255,255,255,.04); color: #fff; padding: 1.5rem; border-radius: .75rem; }

/* Forms — match the SPA's PopupLogin / PopupCreateAccount field styling:
   dark slate fill, subtle top bevel, gold focus ring instead of a border swap. */
.a1-wc-main form .form-row,
.a1-wc-main form .form-row-wide,
.a1-wc-main form .form-row-first,
.a1-wc-main form .form-row-last { color: #fff; margin-bottom: 1.25rem; }

.a1-wc-main form .form-row label,
.a1-wc-main .woocommerce-billing-fields label,
.a1-wc-main .woocommerce-shipping-fields label,
.a1-wc-main .woocommerce-additional-fields label {
  display: block; color: #fff; font-size: .875rem; font-weight: 500;
  margin-bottom: .5rem; letter-spacing: .01em;
}
.a1-wc-main form .form-row label .required { color: #D6A23A; text-decoration: none; }
.a1-wc-main form .form-row label .optional { color: rgba(255,255,255,.5); font-weight: 400; }

.a1-wc-main form input.input-text,
.a1-wc-main form textarea,
.a1-wc-main form select,
.a1-wc-main .woocommerce-input-wrapper input.input-text,
.a1-wc-main .woocommerce-input-wrapper textarea,
.a1-wc-main .select2-container--default .select2-selection--single,
.a1-wc-main .select2-container--default .select2-selection--multiple {
  width: 100%;
  background: #3C3C55 !important;
  color: #fff !important;
  border: none !important;
  border-top: 1px solid #000 !important;
  border-radius: .5rem !important;
  padding: .75rem .875rem !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  min-height: 2.875rem;
  outline: none !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.a1-wc-main form textarea { min-height: 6rem; resize: vertical; }

.a1-wc-main form input.input-text::placeholder,
.a1-wc-main form textarea::placeholder { color: #717182; font-size: .875rem; font-weight: 400; }

.a1-wc-main form input.input-text:focus,
.a1-wc-main form textarea:focus,
.a1-wc-main form select:focus,
.a1-wc-main .select2-container--default.select2-container--focus .select2-selection--single,
.a1-wc-main .select2-container--default.select2-container--focus .select2-selection--multiple {
  box-shadow: 0 0 0 2px #D6A23A !important;
  background: #41415C !important;
}

.a1-wc-main form input.input-text:disabled,
.a1-wc-main form textarea:disabled,
.a1-wc-main form select:disabled { opacity: .5; cursor: not-allowed; }

/* Select2 — Woo uses it for country/state pickers. Match the dark field. */
.a1-wc-main .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important; line-height: 1.4 !important; padding: 0 !important;
}
.a1-wc-main .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important; right: .75rem !important;
}
.a1-wc-main .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #D6A23A transparent transparent !important; }
.select2-dropdown {
  background: #3C3C55 !important; color: #fff !important;
  border: 1px solid rgba(214,162,58,.4) !important; border-radius: .5rem !important; overflow: hidden;
}
.select2-results__option { color: #fff !important; }
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted.select2-results__option--selectable {
  background: #D6A23A !important; color: #1F1F1F !important;
}
.select2-search--dropdown .select2-search__field {
  background: #2A2A40 !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: .375rem !important;
  padding: .5rem .625rem !important;
}

/* Field error state */
.a1-wc-main form .form-row.woocommerce-invalid input.input-text,
.a1-wc-main form .form-row.woocommerce-invalid textarea,
.a1-wc-main form .form-row.woocommerce-invalid .select2-selection {
  box-shadow: 0 0 0 2px #ef4444 !important;
}
.a1-wc-main .woocommerce-error li { color: #fecaca; }

/* Checkboxes (terms, create-account, etc.) */
.a1-wc-main form .form-row input[type="checkbox"],
.a1-wc-main form input[type="radio"] {
  width: 1rem; height: 1rem; min-height: 0;
  accent-color: #D6A23A;
  margin-right: .5rem; vertical-align: middle;
}
.a1-wc-main form .form-row.woocommerce-form__input-checkbox,
.a1-wc-main form label.checkbox { display: flex; align-items: center; gap: .5rem; color: #fff; }

/* Coupon field on cart */
.a1-wc-main .coupon { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.a1-wc-main .coupon input.input-text { max-width: 14rem; }

/* Two-column billing layout (first name / last name) — keep WC's grid */
.a1-wc-main .form-row-first,
.a1-wc-main .form-row-last { width: calc(50% - .5rem); display: inline-block; }
.a1-wc-main .form-row-first { margin-right: 1rem; }
@media (max-width: 640px) {
  .a1-wc-main .form-row-first,
  .a1-wc-main .form-row-last { width: 100%; margin-right: 0; }
}

/* Tables (cart, order details) */
.a1-wc-main table.shop_table {
  background: rgba(255,255,255,.04); color: #fff;
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; overflow: hidden;
  width: 100%;
}
.a1-wc-main table.shop_table th,
.a1-wc-main table.shop_table td {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .875rem 1rem; vertical-align: middle;
}
.a1-wc-main table.shop_table th { color: rgba(255,255,255,.7); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
.a1-wc-main table.shop_table tfoot th,
.a1-wc-main table.shop_table tfoot td { background: rgba(214,162,58,.06); }
.a1-wc-main table.shop_table tfoot tr:last-child th,
.a1-wc-main table.shop_table tfoot tr:last-child td { font-size: 1.1rem; color: #D6A23A; }

/* Checkout layout — single-row 2-column grid so heading + review can't
   spread apart vertically. WC's separate #order_review_heading is hidden
   and the title is rendered inside #order_review via ::before, so the
   billing column's tall height can't push the heading to the top of an
   inflated row while the table sits at the top of a second inflated row. */
@media (min-width: 900px) {
  .a1-wc-main form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 2rem;
    align-items: start;
  }
  .a1-wc-main form.checkout > .col2-set,
  .a1-wc-main form.checkout > #customer_details { grid-column: 1; min-width: 0; }
  .a1-wc-main form.checkout > #order_review_heading { display: none; }
  .a1-wc-main form.checkout > #order_review { grid-column: 2; min-width: 0; }
  .a1-wc-main form.checkout > #order_review::before {
    content: "Your order";
    display: block;
    font-size: 1.5rem; font-weight: 800; color: #fff;
    margin: 0 0 1.25rem; letter-spacing: -.01em;
  }
}

/* Stack billing + shipping inside customer_details — no internal grid. */
.a1-wc-main .woocommerce-checkout .col2-set { display: block; }
.a1-wc-main .woocommerce-checkout .col2-set .col-1,
.a1-wc-main .woocommerce-checkout .col2-set .col-2 {
  width: 100% !important; float: none !important; margin: 0 0 1rem !important; padding: 0 !important;
}
.a1-wc-main .woocommerce-checkout .col2-set .col-2:empty,
.a1-wc-main .woocommerce-checkout .col2-set .col-2 .woocommerce-shipping-fields:empty { display: none; }

.a1-wc-main #customer_details,
.a1-wc-main #order_review {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem; padding: 1.5rem;
}
.a1-wc-main #order_review_heading {
  margin: 0; font-size: 1.5rem; color: #fff;
}

/* Keep the order-review panel pinned to the top of its column while the
   user scrolls the billing fields, instead of letting the grid stretch a
   short summary against tall billing content. */
@media (min-width: 900px) {
  .a1-wc-main form.checkout > #order_review {
    position: sticky; top: 1.5rem; align-self: start;
  }
}

/* Tighten internal spacing so the box hugs its content rather than
   trailing whitespace below the Place Order button. */
.a1-wc-main #order_review > *:last-child,
.a1-wc-main #order_review #payment > *:last-child { margin-bottom: 0 !important; }
.a1-wc-main #order_review table.shop_table { margin-bottom: 1rem; }
.a1-wc-main #order_review #payment { margin-top: 0; margin-bottom: 0; padding-bottom: 0; }
.a1-wc-main #order_review .woocommerce-terms-and-conditions-wrapper,
.a1-wc-main #order_review .woocommerce-privacy-policy-text {
  margin: .75rem 0 0; font-size: .75rem; color: rgba(255,255,255,.6); line-height: 1.5;
}
.a1-wc-main #order_review .woocommerce-privacy-policy-text p { margin: 0; }
.a1-wc-main #order_review #place_order { margin-top: 1rem !important; margin-bottom: 0 !important; }

/* Payment methods box */
.a1-wc-main #payment {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; padding: 1rem; margin-top: 1rem;
}
.a1-wc-main #payment ul.payment_methods { padding: 0 !important; margin: 0 0 1rem !important; border: none !important; list-style: none; }
.a1-wc-main #payment ul.payment_methods li {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem; padding: .75rem 1rem; margin-bottom: .5rem; list-style: none;
}
.a1-wc-main #payment ul.payment_methods li input[type="radio"] { margin-right: .5rem; }
.a1-wc-main #payment ul.payment_methods li label img { vertical-align: middle; max-height: 28px; margin-left: .5rem; }
.a1-wc-main #payment div.payment_box {
  background: rgba(214,162,58,.08) !important; color: rgba(255,255,255,.85);
  border: 1px solid rgba(214,162,58,.25); border-radius: .5rem; padding: .875rem 1rem !important; margin-top: .5rem;
}
.a1-wc-main #payment div.payment_box::before { border-bottom-color: rgba(214,162,58,.25) !important; }
.a1-wc-main #place_order { width: 100%; margin-top: 1rem !important; font-size: 1.05rem !important; padding: .875rem 1.5rem !important; }

/* WC notices */
.a1-wc-main .woocommerce-info,
.a1-wc-main .woocommerce-message,
.a1-wc-main .woocommerce-error {
  background: rgba(255,255,255,.04) !important; color: #fff !important;
  border-top-color: #D6A23A !important;
}
.a1-wc-main .woocommerce-info::before,
.a1-wc-main .woocommerce-message::before { color: #D6A23A !important; }

/* Custom: "Already have an account?" link on checkout (replaces WC's inline login form) */
.a1-wc-login-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: rgba(214,162,58,.08);
  border: 1px solid rgba(214,162,58,.25);
  border-radius: .75rem; padding: .875rem 1.25rem;
  margin: 0 0 1.5rem;
}
.a1-wc-login-link p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; }
.a1-wc-login-link a {
  display: inline-block; background: linear-gradient(180deg, #D6A23A 0%, #B58330 100%);
  color: #1F1F1F !important; padding: .5rem 1.25rem; border-radius: 9999px;
  font-weight: 600; text-decoration: none !important;
}
.a1-wc-login-link a:hover { filter: brightness(1.06); opacity: 1 !important; }