/* ==========================================================================
   Ba Dum Tish — WooCommerce styling
   ========================================================================== */

/* Result count + ordering */
.woocommerce-result-count { font-family: var(--bdt-font-head); text-transform: uppercase; letter-spacing: .5px; }
.woocommerce-ordering select { max-width: 260px; }
.bdt-shop .woocommerce-notices-wrapper:empty { display: none; }

/* Product grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bdt-gap);
  margin: 0 0 32px !important;
  padding: 0;
}
/* WooCommerce adds clearfix ::before/::after to ul.products. On a grid
   container those become phantom cells that shove the products out of line —
   kill them so the items fill the columns in order. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--bdt-white);
  border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: var(--bdt-radius);
  box-shadow: var(--bdt-shadow-sm);
  padding: 14px !important;
  display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.woocommerce ul.products li.product:hover { transform: translate(-3px,-3px); box-shadow: var(--bdt-shadow); }
.woocommerce ul.products li.product a img {
  border-radius: var(--bdt-radius-sm);
  border: 3px solid var(--bdt-ink);
  margin-bottom: 12px; background: var(--bdt-cream);
  aspect-ratio: 1/1; object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--bdt-font-head); text-transform: none; font-size: 1.15rem;
  padding: 0 4px 4px !important; color: var(--bdt-ink);
}
.woocommerce ul.products li.product .price {
  color: var(--bdt-ink); font-weight: 700; font-family: var(--bdt-font-head);
  font-size: 1.15rem; padding: 0 4px;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: 6px 4px; color: var(--bdt-pink-deep); }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px){ .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } }

/* Sale badge */
.woocommerce span.onsale, .woocommerce-page span.onsale {
  background: var(--bdt-pink); color: var(--bdt-ink);
  border: 3px solid var(--bdt-ink); border-radius: 999px;
  font-family: var(--bdt-font-head); text-transform: uppercase;
  min-height: auto; min-width: auto; padding: 6px 12px; line-height: 1;
  top: 8px; left: 8px; box-shadow: var(--bdt-shadow-sm);
}

/* Category tiles */
.woocommerce ul.products li.product-category a img { aspect-ratio: 16/10; }
.woocommerce ul.products li.product-category h2 {
  font-family: var(--bdt-font-head); text-transform: uppercase; font-size: 1.1rem; text-align: center;
}
.woocommerce ul.products li.product-category mark { background: var(--bdt-teal); color: var(--bdt-ink); border-radius: 6px; padding: 0 6px; }

/* ==========================================================================
   Single product

   Desktop layout (matches the client wireframe):
     row 1:  [ cover art ] [ audio player ]      | [ sale info ]
     row 2:  [ pill buttons ] (span art+player)  |   (sale info
     row 3:  [ product description ] (span same) |    spans all
     row 4:  [ related products ] (full width)   |    three rows)
   The audio player is lifted out of the Description tab by theme.js and made a
   top-level `.bdt-player` element. The tabs wrapper is `display:contents` so its
   pill nav and description panel become direct grid items: the pills sit as a
   horizontal row spanning the art+player columns, and the description is a wide
   box beneath them spanning the same width; the sale column runs full height on
   the right. Narrower screens fall back to two columns, then one.
   ========================================================================== */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(300px, 400px);
  align-items: start;
  column-gap: clamp(20px, 2.5vw, 44px);
  row-gap: clamp(20px, 3vw, 36px);
}
/* WooCommerce's default `div.images { width:48% }` loads after our styles, so
   force the gallery to fill its (capped) grid column with !important; otherwise
   the cover renders at ~48% of the column and looks tiny. */
.woocommerce div.product .woocommerce-product-gallery {
  grid-column: 1; grid-row: 1;
  margin: 0; width: 100% !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image { width: 100% !important; }
.woocommerce div.product .summary {
  grid-column: 3; grid-row: 1 / span 3;
  align-self: start;
}
/* Audio player box (moved here from the Description tab by theme.js), sitting
   between the cover and the buy info on the top row. */
.woocommerce div.product .bdt-player {
  grid-column: 2; grid-row: 1;
  align-self: start;
  background: var(--bdt-white);
  border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: var(--bdt-radius);
  padding: clamp(14px, 1.6vw, 20px);
}
.woocommerce div.product .bdt-player .wp-playlist { margin: 0; border: 0; padding: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { border: var(--bdt-outline) solid var(--bdt-ink); border-radius: var(--bdt-radius); background: var(--bdt-white); }
.woocommerce div.product .product_title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); text-transform: none; margin-bottom: .2em; line-height: 1.1; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--bdt-ink); font-family: var(--bdt-font-head); font-size: 1.8rem;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }
.woocommerce div.product form.cart { margin: 22px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart .quantity input.qty {
  width: 84px; text-align: center; border: var(--bdt-outline) solid var(--bdt-ink); border-radius: 999px; padding: 14px 8px;
}
.woocommerce div.product form.cart .button { padding: 16px 30px; font-size: 1.15rem; }
.woocommerce div.product .product_meta { border-top: 2px dotted rgba(49,39,131,.3); padding-top: 14px; font-size: .9rem; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* Variations */
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: 6px 0; }
.woocommerce div.product form.cart .variations select { border: var(--bdt-outline) solid var(--bdt-ink); border-radius: 999px; }

/* Tabs — display:contents lets the pill nav and the description panel become
   direct grid items (the wrapper itself paints nothing). Pills tuck under the
   art in col 1; the description panel sits under the player in col 2. */
.woocommerce div.product .woocommerce-tabs { display: contents; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  grid-column: 1 / 3; grid-row: 2; align-self: start;
  padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  grid-column: 1 / 3; grid-row: 3; margin-top: 0 !important;
}
/* Kill WooCommerce's full-width underline beneath the tab pills. It is drawn on
   ::before (absolutely positioned at the bottom of the list) and clips into the
   rounded pills; WooCommerce's own stylesheet loads after ours, so !important is
   needed to beat its equal-specificity rule. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none !important; display: none !important; border: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--bdt-white); border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: 999px; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--bdt-font-head); text-transform: uppercase; color: var(--bdt-ink); padding: 8px 15px; font-size: .82rem; letter-spacing: .3px; }
/* WooCommerce recolours the active tab's bottom border to the panel background
   (#fff) for its "connected tab" look, which leaves our rounded pill open at the
   bottom. Force the full ink outline back on all four sides. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bdt-pink); border-bottom-color: var(--bdt-ink) !important; }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--bdt-white); border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: var(--bdt-radius); padding: clamp(16px,2.4vw,24px); margin-top: 12px;
}
/* Drop WooCommerce's redundant "Description" heading (the tab pill already
   says it). The audio player is moved out of this panel by theme.js, so what
   remains here is the blurb and release images. */
.woocommerce div.product #tab-description > h2:first-child { display: none; }
.woocommerce div.product #tab-description > *:first-child { margin-top: 0; }

/* Related / upsells — full-width band below the description. */
.woocommerce .related, .woocommerce .upsells { grid-column: 1 / -1; grid-row: 4; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 1.8rem; margin-bottom: 20px; }

/* Tablet: two columns — art + player on top, buy full-width, then the pills and
   description. */
@media (max-width: 1024px){
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; max-width: 360px; }
  .woocommerce div.product .bdt-player { grid-column: 2; grid-row: 1; }
  .woocommerce div.product .summary { grid-column: 1 / -1; grid-row: 2; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { grid-column: 1 / -1; grid-row: 3; }
  .woocommerce div.product .woocommerce-tabs .panel,
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel { grid-column: 1 / -1; grid-row: 4; }
  .woocommerce .related, .woocommerce .upsells { grid-row: 5; }
}

/* Single column: everything stacks in DOM order
   (art → player → buy → pills → description → related). */
@media (max-width: 800px){
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .bdt-player,
  .woocommerce div.product .summary,
  .woocommerce div.product .woocommerce-tabs ul.tabs,
  .woocommerce div.product .woocommerce-tabs .panel,
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells { grid-column: 1; grid-row: auto; }
  .woocommerce div.product .woocommerce-product-gallery { max-width: 100%; }
}

/* ==========================================================================
   Cart
   ========================================================================== */
.woocommerce table.shop_table {
  border: var(--bdt-outline) solid var(--bdt-ink); border-radius: var(--bdt-radius);
  border-collapse: separate; overflow: hidden; background: var(--bdt-white);
}
.woocommerce table.shop_table th { font-family: var(--bdt-font-head); text-transform: uppercase; background: var(--bdt-cream); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 2px dotted rgba(49,39,131,.25); padding: 14px; }
.woocommerce table.cart img { width: 68px; border: 3px solid var(--bdt-ink); border-radius: 10px; }
.woocommerce a.remove {
  color: var(--bdt-ink) !important; border: 3px solid var(--bdt-ink); border-radius: 999px;
  width: 26px; height: 26px; line-height: 21px; background: var(--bdt-pink);
}
.woocommerce a.remove:hover { background: var(--bdt-ink); color: #fff !important; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }
.cart_totals, .woocommerce-checkout-review-order {
  background: var(--bdt-white); border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: var(--bdt-radius); box-shadow: var(--bdt-shadow-sm); padding: 22px;
}
.cart_totals h2 { font-size: 1.4rem; }

/* Coupon row */
.woocommerce .coupon .input-text { max-width: 220px; display: inline-block; width: auto; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce form.checkout_coupon,
.woocommerce form.login, .woocommerce form.register {
  border: var(--bdt-outline) solid var(--bdt-ink); border-radius: var(--bdt-radius); background: var(--bdt-white);
}
.woocommerce-checkout #payment {
  background: var(--bdt-cream); border: var(--bdt-outline) solid var(--bdt-ink); border-radius: var(--bdt-radius);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 2px dotted rgba(49,39,131,.3); }
.woocommerce-checkout #payment div.payment_box { background: var(--bdt-white); border-radius: 10px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bdt-white); }
#add_payment_method #payment div.form-row, .woocommerce-checkout #payment div.form-row { padding: 16px; }
.woocommerce .col2-set, .woocommerce-page .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bdt-gap); width: 100%; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100%; float: none; }
@media (max-width: 760px){ .woocommerce .col2-set, .woocommerce-page .col2-set { grid-template-columns: 1fr; } }

/* ==========================================================================
   Notices
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  border-top: 0; border: var(--bdt-outline) solid var(--bdt-ink);
  border-radius: var(--bdt-radius-sm); box-shadow: var(--bdt-shadow-sm);
  background: var(--bdt-white); color: var(--bdt-ink);
}
.woocommerce-message::before { color: var(--bdt-teal-deep); }
.woocommerce-info::before { color: var(--bdt-pink-deep); }
.woocommerce-error { background: #ffe9ef; }
.woocommerce-message .button, .woocommerce-info .button { box-shadow: none; }

/* Account nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; font-family: var(--bdt-font-head); text-transform: uppercase; text-decoration: none;
  border: var(--bdt-outline) solid var(--bdt-ink); border-radius: 999px; padding: 8px 16px; background: var(--bdt-white); color: var(--bdt-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--bdt-pink); }

/* Breadcrumb */
.woocommerce-breadcrumb { font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px; opacity: .85; }

/* Price filter / widgets in store */
.widget_price_filter .ui-slider .ui-slider-range { background: var(--bdt-pink); }
.widget_price_filter .ui-slider .ui-slider-handle { background: var(--bdt-ink); border-radius: 999px; }