/* ==========================================================================
   Buytac — WooCommerce
   ========================================================================== */

/* ------------------------- product loops -------------------------
   WooCommerce prints <ul class="products columns-N"> for shop, category,
   related and upsell loops. Our cards live inside it, so the grid has to be
   declared here — not only on the theme's own .product-grid helper. */
.woocommerce ul.products,
ul.products,
.product-grid {
  display: grid !important;
  gap: 1.5rem;
  /* the reference store runs three across on desktop — auto-fill was packing
     in five, which shrank the product shots noticeably */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
}
@media (min-width: 1000px) {
  .woocommerce ul.products,
  ul.products,
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
}
/* kill Woo's float clearfix, which breaks grid layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce ul.products li.product-card,
ul.products li {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

@media (max-width: 599px) {
  .woocommerce ul.products,
  ul.products,
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* ------------------------- notices ------------------------- */
.woocommerce-notices-wrapper { max-width: var(--container); margin: 1.5rem auto 0; padding-inline: var(--gutter); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none; margin: 0 0 1rem; padding: 1rem 1.35rem;
  border-radius: var(--radius-card); font-size: .9375rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border-left: 3px solid var(--blue-500);
}
.woocommerce-error { border-left-color: var(--sale); color: var(--sale); }
.woocommerce-message { border-left-color: #00a341; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ------------------------- catalog bar ------------------------- */
.woocommerce-result-count { margin: 0; font-size: .875rem; color: var(--text-soft); }
.woocommerce-ordering select,
.variations select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea {
  font-family: inherit; font-size: .9375rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: .75rem 1rem; min-height: 3rem; width: 100%;
}
.woocommerce-ordering select { min-width: 15rem; width: auto; }

/* ------------------------- buttons ------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 2rem; font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1;
  background: var(--text); color: #fff; border: 0; border-radius: var(--radius-pill);
  cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: #000; color: #fff; transform: translateY(-1px); }

/* Woo ships its own purple (#7f54b3) for .button.alt and loads a block
   stylesheet after ours, so the brand accent needs to be forced here. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
  background-color: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: var(--text) !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background-color: var(--yellow-dark) !important;
  border-color: var(--yellow-dark) !important;
  color: var(--text) !important;
}
/* keep the "choose an option first" state readable but clearly inactive */
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button.wc-variation-selection-needed {
  opacity: .55; cursor: not-allowed;
}

.woocommerce .button.disabled,
.woocommerce button.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ------------------------- single product ------------------------- */
.single-product div.product {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  padding-block: clamp(1.5rem, 4vw, 3rem) var(--section-y);
}
@media (max-width: 899px) { .single-product div.product { grid-template-columns: minmax(0, 1fr); } }

.woocommerce-product-gallery { position: relative; width: 100% !important; float: none !important; margin-bottom: 0; }
/* flexslider lays the slides out in a 300%-wide track — the viewport must clip it,
   otherwise the page gains hundreds of pixels of horizontal scroll. */
.woocommerce-product-gallery .flex-viewport {
  width: 100%; overflow: hidden;
  border-radius: var(--radius-card); background: var(--surface);
}
.woocommerce-product-gallery__wrapper { max-width: 100%; }
.woocommerce-product-gallery__wrapper { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; margin: 0; }
.woocommerce-product-gallery__image { width: 100%; }
.woocommerce-product-gallery__image img { width: 100% !important; height: auto; object-fit: contain; }
.woocommerce-product-gallery__trigger { top: 1rem; right: 1rem; left: auto; z-index: 5; }
/* thumbnails sit in a rail to the left of the main image, as on the reference store */
@media (min-width: 700px) {
  .woocommerce-product-gallery {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 1rem;
    align-items: start;
  }
  .woocommerce-product-gallery .flex-viewport,
  .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    grid-column: 2; grid-row: 1;
  }
  .woocommerce-product-gallery .flex-control-thumbs {
    grid-column: 1; grid-row: 1;
    flex-direction: column; flex-wrap: nowrap;
    margin: 0; max-height: 100%; overflow-y: auto;
  }
  /* flexslider writes inline widths onto the thumb items */
  .woocommerce-product-gallery .flex-control-thumbs li { width: 100% !important; float: none !important; }
}

.woocommerce-product-gallery .flex-control-thumbs {
  display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; margin: .85rem 0 0; padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 4px;
  border-radius: 6px; background: var(--surface); cursor: pointer;
  border: 1px solid var(--line); opacity: .7;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--text); }

/* Woo's legacy float/48% layout fights our grid — neutralise it. */
.woocommerce div.product .summary,
.woocommerce div.product div.summary {
  width: 100% !important; float: none !important; margin-bottom: 0;
}

.woocommerce div.product .product_title,
.product_title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: .5rem; }

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.single-product .summary .price {
  font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0 0 1.5rem; display: block;
}
.woocommerce div.product p.price del,
.single-product .summary .price del { opacity: .5; font-weight: 400; margin-right: .5rem; color: var(--text-soft); }
.woocommerce div.product p.price ins,
.single-product .summary .price ins { text-decoration: none; color: var(--sale); }

.woocommerce-product-details__short-description { color: var(--text-soft); margin-bottom: 1.75rem; }

/* variation pills */
table.variations { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
table.variations th, table.variations td { display: block; text-align: left; padding: 0; }
table.variations th.label { font-size: .875rem; font-weight: 600; color: var(--text-soft); margin-bottom: .6rem; }
table.variations th.label .variation-chosen { color: var(--text); font-weight: 700; }
table.variations tr + tr { margin-top: 1.25rem; display: block; }

/* Woo's "Clear" link left a dead gap under the pills */
.reset_variations {
  display: inline-block; margin-top: .35rem; font-size: .75rem;
  color: var(--text-faint); text-decoration: underline;
}
.reset_variations:not([style*="visible"]) { display: none; }

.qty-label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: .6rem; width: 100%;
}
form.cart { row-gap: .75rem; }

/* the native select stays for Woo's JS, but is not shown */
table.variations select.buytac-native-select,
.variable-items-wrapper + select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-height: 0;
}

.variable-items-wrapper { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.variable-items-wrapper .variable-item {
  padding: .7rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.variable-items-wrapper .variable-item:hover { border-color: var(--text-soft); }
.variable-items-wrapper .variable-item.selected { border-color: var(--text); border-width: 2px; font-weight: 700; }
.variable-items-wrapper .variable-item.disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* quantity */
.quantity { display: inline-flex; align-items: center; }
.quantity .qty {
  width: 3.5rem; height: 3rem; text-align: center; border-inline: 0;
  border-radius: 0; border-color: var(--line); min-height: 0; padding: 0;
  -moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buytac-qty-btn {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.buytac-qty-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.buytac-qty-btn:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.buytac-qty-btn:hover { background: var(--surface-alt); }

form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
form.cart .single_add_to_cart_button { flex: 1 1 14rem; }
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; width: 100%; }
.woocommerce-variation-price { width: 100%; font-size: 1.35rem; font-weight: 600; margin-bottom: .5rem; }

.product_meta { font-size: .8125rem; color: var(--text-soft); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.product_meta > span { display: block; margin-bottom: .35rem; }

/* tabs */
.woocommerce-tabs { grid-column: 1 / -1; padding-top: clamp(2rem, 5vw, 4rem); }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.75rem; padding: 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li a {
  display: block; padding: .85rem 1.35rem; font-size: .9375rem; font-weight: 700;
  color: var(--text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--text); border-bottom-color: var(--text); }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-Tabs-panel { max-width: 80ch; }
.woocommerce-Tabs-panel table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; }
.woocommerce-Tabs-panel th, .woocommerce-Tabs-panel td {
  padding: .7rem 1rem; border: 1px solid var(--line); font-size: .9375rem; text-align: left;
}

/* related / upsells */
.related, .upsells { grid-column: 1 / -1; padding-top: var(--section-y); }
.related > h2, .upsells > h2 { font-size: var(--h3); margin-bottom: 2rem; }

/* ------------------------- cart ------------------------- */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce {
  max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter);
}
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border-radius: var(--radius-card); overflow: hidden; margin-bottom: 2rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .9375rem; vertical-align: middle;
}
.woocommerce table.shop_table thead th { background: var(--text); color: #fff; font-weight: 700; }
.woocommerce table.shop_table img { width: 64px; border-radius: 6px; }
.woocommerce .cart_totals, .woocommerce-checkout-review-order {
  background: var(--surface); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.woocommerce .cart_totals h2, .woocommerce-checkout-review-order h3 { font-size: var(--h5); }
.woocommerce-cart-form { margin-bottom: 2rem; }
.cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) { .cart-collaterals { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); justify-content: end; } }

/* ------------------------- checkout ------------------------- */
.woocommerce-checkout .col2-set { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce form .form-row { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.woocommerce form .form-row label { font-size: .875rem; font-weight: 600; }
.woocommerce form .form-row .required { color: var(--sale); text-decoration: none; }
#customer_details h3, #order_review_heading { font-size: var(--h5); margin-bottom: 1.25rem; }
#payment { background: transparent; }
#payment ul.payment_methods { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; }
#payment ul.payment_methods li { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem 1.25rem; background: var(--bg); }
#payment div.payment_box { font-size: .875rem; color: var(--text-soft); margin-top: .75rem; }

/* ------------------------- account ------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .35rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: .75rem 1.15rem; border-radius: var(--radius-card); font-size: .9375rem; font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--text); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--surface); }
@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 16rem; padding-right: 2.5rem; }
  .woocommerce-account .woocommerce-MyAccount-content { overflow: hidden; }
}

/* ------------------------- misc ------------------------- */
.woocommerce .onsale { display: none; }
.woocommerce-breadcrumb { display: none; }
.woocommerce-store-notice { display: none !important; }
.woocommerce .woocommerce-pagination ul { display: flex; gap: .5rem; justify-content: center; list-style: none; margin: 3rem 0 0; padding: 0; }
.woocommerce .woocommerce-pagination a, .woocommerce .woocommerce-pagination span {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .75rem;
  background: var(--surface); border-radius: var(--radius-pill); font-size: .9375rem; font-weight: 600;
}
.woocommerce .woocommerce-pagination span.current { background: var(--text); color: #fff; }

/* ==========================================================================
   Shopping widgets
   ========================================================================== */
.bundler { grid-column: 1 / -1; padding-top: clamp(2rem, 5vw, 3.5rem); }
.bundler__head { margin-bottom: 1.5rem; }
.bundler__head h2 { font-size: var(--h3); margin-bottom: .35rem; }
.bundler__hint { color: var(--text-soft); font-size: .9375rem; margin: 0; }
.bundler__group { margin-top: 2.25rem; }
.bundler__group h3 { font-size: var(--h5); margin-bottom: 1rem; }
.bundler__track { list-style: none; }
.bundler__item { display: block; }
.bundler__item[hidden] { display: none; }
.bundler__item .product-card { height: 100%; }
.bundler__empty { color: var(--text-soft); font-size: .9375rem; margin: .5rem 0 0; }

/* calibre pills on grid cards */
.card-calibres {
  display: flex; flex-wrap: wrap; gap: .35rem;
  list-style: none; margin: .6rem 0 0; padding: 0;
}
.card-calibre {
  padding: .3rem .6rem; font-family: inherit; font-size: .6875rem; font-weight: 700;
  color: var(--text-soft); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  cursor: pointer; transition: all .18s var(--ease);
}
.card-calibre:hover { border-color: var(--text-soft); color: var(--text); }
.card-calibre.is-active { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- My Garage ---------- */
.garage__intro { color: var(--text-soft); }
.garage h3 { font-size: var(--h5); margin: 2rem 0 1rem; }
.garage__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); list-style: none; margin: 0; padding: 0; }
.garage__card { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.garage__media img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: .75rem; background: #fff; }
.garage__body { padding: 1rem; display: grid; gap: .5rem; }
.garage__body h4 { font-size: .9375rem; margin: 0; line-height: 1.35; }
.garage__cal, .garage__price { font-size: .8125rem; color: var(--text-soft); margin: 0; }
.garage__empty { background: var(--surface); border-radius: var(--radius-card); padding: 2rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }

/* ---------- drawer reorder prompt ---------- */
.drawer-reorder { flex-shrink: 0; padding: .85rem 1.5rem; border-top: 1px solid var(--line); background: var(--bg); }
.drawer-reorder__title { font-size: .8125rem; font-weight: 700; margin: 0 0 .5rem; }
.drawer-reorder ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.drawer-reorder li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .8125rem; }
.drawer-reorder__name { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-reorder__add { flex-shrink: 0; background: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .25rem .7rem; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; color: var(--text); }
.drawer-reorder__add:hover { background: var(--text); color: #fff; border-color: var(--text); }

/* ---------- Build Your Kit ---------- */
.kit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px); gap: clamp(1.5rem,4vw,2.5rem); align-items: start; }
@media (max-width: 899px) { .kit { grid-template-columns: minmax(0,1fr); } }
.kit__steps { grid-column: 1 / -1; display: flex; gap: 1rem; list-style: none; margin: 0 0 1rem; padding: 0; flex-wrap: wrap; }
.kit__step { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; font-size: .875rem; font-weight: 700; }
.kit__step.is-active { background: var(--text); color: #fff; }
.kit__num { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.08); display: grid; place-items: center; font-size: .75rem; }
.kit__step.is-active .kit__num { background: rgba(255,255,255,.22); }
.kit__panel { display: none; }
.kit__panel.is-active { display: block; }
.kit__option[hidden] { display: none; }
.kit__option.is-chosen { outline: 2px solid var(--text); outline-offset: 2px; }
.kit__none { color: var(--text-soft); font-size: .9375rem; }
.kit__summary { background: var(--surface); border-radius: var(--radius-card); padding: 1.5rem; position: sticky; top: 100px; }
.kit__summary h3 { font-size: var(--h5); margin-bottom: 1rem; }
.kit__summary ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.kit__summary li { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; align-items: start; }
.kit__summary li button { background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 1.1rem; line-height: 1; }
.kit__summary li button:hover { color: var(--sale); }
.kit__placeholder { color: var(--text-faint); }
.kit__total { display: flex; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--line); margin-bottom: 1rem; }
.kit__total strong { font-size: 1.25rem; }