/* ==========================================================================
   BGalz - WooCommerce skin
   Everything here is scoped under a .woocommerce* / .bgalz-* ancestor so the
   theme never bleeds into wp-admin or into a third-party gateway's markup.
   ========================================================================== */

/* --- product card -------------------------------------------------------- */
.bgalz-products{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:34px var(--bg-gap);
  list-style:none;margin:0;padding:0;
}
/* WooCommerce clearfixes ul.products with ::before/::after. In a grid those
   become real grid items and push the first card into the second column. */
.bgalz-products::before,
.bgalz-products::after,
.woocommerce ul.products.bgalz-products::before,
.woocommerce ul.products.bgalz-products::after{content:none;display:none}
.bgalz-products.cols-2{--cols:2}
.bgalz-products.cols-3{--cols:3}
.bgalz-products.cols-4{--cols:4}

.bgalz-card{position:relative;list-style:none;text-align:left;width:auto;float:none;margin:0;clear:none}

/*
 * WooCommerce lays its catalogue out with floats and percentage widths, across
 * three stylesheets that each restate the rule at a different breakpoint. The
 * theme uses a grid instead, and the two cannot both be half-applied: a floated
 * 48%-wide item inside a two-column grid track overflows the viewport, which is
 * what happened on phones. These are the only !important declarations in the
 * theme, and they exist to switch off one layout model, not to win a colour
 * argument.
 */
.woocommerce ul.products.bgalz-products,
.woocommerce-page ul.products.bgalz-products{
  display:grid !important;
  float:none !important;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
}
.woocommerce ul.products.bgalz-products li.product,
.woocommerce-page ul.products.bgalz-products li.product,
.woocommerce ul.products.bgalz-products li.bgalz-card,
.woocommerce-page ul.products.bgalz-products li.bgalz-card{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  clear:none !important;
  max-width:100%;
}
.bgalz-card .media-wrap{position:relative;overflow:hidden;margin-bottom:16px}
.bgalz-card .media{
  position:relative;display:block;overflow:hidden;background:#fafafa;margin:0;aspect-ratio:1/1;
}
.bgalz-card .media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  padding:6%;transition:opacity .4s ease,transform .6s ease;
}
.bgalz-card .media .alt-img{opacity:0}
.bgalz-card:hover .media .alt-img{opacity:1}
.bgalz-card:hover .media .main-img{opacity:0}
.bgalz-card.single-image:hover .media img{transform:scale(1.05)}

.bgalz-card .flag{
  position:absolute;top:10px;left:10px;z-index:3;background:var(--bg-accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;padding:4px 9px;line-height:1.4;
}
.bgalz-card .flag.out{background:#8c8c8c}

.bgalz-card .quick{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:1px;
  transform:translateY(102%);transition:transform .3s ease;
}
.bgalz-card:hover .quick{transform:translateY(0)}
.bgalz-card .quick a,.bgalz-card .quick button{
  flex:1;border:0;background:rgba(50,50,50,.94);color:#fff;font-size:11px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;padding:11px 6px;text-align:center;line-height:1.3;transition:background .2s ease;
}
.bgalz-card .quick a:hover,.bgalz-card .quick button:hover{background:var(--bg-accent);color:#fff}
.bgalz-card .quick a.added_to_cart{display:none}

.bgalz-card .cat{display:block;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--bg-faint);margin-bottom:5px}
/* Marketplace titles vary from four words to twenty. Clamping to two lines
   keeps the rows aligned; the full title is still the link's own text. */
.bgalz-card h3,.bgalz-card .title{
  font-size:14px;font-weight:500;line-height:1.5;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;
}
.bgalz-card h3 a{color:var(--bg-ink)}
.bgalz-card h3 a:hover{color:var(--bg-accent)}
.bgalz-card .price{font-size:14px;color:var(--bg-ink);font-weight:600;display:block}
.bgalz-card .price del{color:var(--bg-muted);font-weight:400;margin-right:7px;font-size:13px}
.bgalz-card .price ins{text-decoration:none;color:var(--bg-accent)}
.bgalz-card .stars{margin-bottom:5px}

.stars{display:inline-flex;gap:2px;line-height:1}
.stars svg{width:13px;height:13px;fill:#f0b200}
.stars svg.off{fill:#dcdcdc}
.stars .n{font-size:11px;color:var(--bg-faint);margin-left:5px}

/* --- shop toolbar -------------------------------------------------------- */
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--bg-line);padding-bottom:16px;margin-bottom:32px;
}
.shop-toolbar .count{font-size:13px;color:var(--bg-muted);margin:0}
.shop-toolbar select{
  border:1px solid var(--bg-line);padding:9px 12px;font-size:13px;color:var(--bg-body);background:#fff;
  max-width:100%;
}
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count{margin:0}

/* --- shop sidebar -------------------------------------------------------- */
/* Not flex: the category widget nests a child <ul> inside each <li>, and as a
   flex item that sub-list lines up beside the parent link instead of under it. */
.shop-aside .widget ul li{display:block;margin-bottom:9px;line-height:1.5}
.shop-aside .widget ul li a{color:var(--bg-body);display:inline-block;max-width:78%;vertical-align:top}
.shop-aside .widget ul li a:hover{color:var(--bg-accent)}
.shop-aside .widget ul li.current-cat > a{color:var(--bg-ink);font-weight:600}
.shop-aside .widget ul li .count{color:var(--bg-faint);font-size:12px;float:right}
.shop-aside .widget ul ul{padding-left:14px;margin-top:9px;border-left:1px solid var(--bg-line-soft)}
.shop-aside .widget ul ul li{font-size:13px}
.shop-aside .widget_product_search .woocommerce-product-search{display:flex;border:1px solid var(--bg-line)}
.shop-aside .widget_product_search input[type=search]{flex:1;border:0;padding:10px 12px;font-size:13px;outline:none;min-width:0;background:transparent}
.shop-aside .widget_product_search button{border:0;background:var(--bg-ink);color:#fff;padding:0 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600}
.shop-aside .widget_product_search button:hover{background:var(--bg-accent)}
.shop-aside .product_list_widget li{display:flex;gap:12px;align-items:flex-start}
.shop-aside .product_list_widget li a{display:block;max-width:100%;font-size:13px;color:var(--bg-ink);line-height:1.45}
.shop-aside .product_list_widget img{width:56px;height:56px;object-fit:contain;background:#fafafa;flex:0 0 56px;margin:0}
.shop-aside .product_list_widget .amount{font-size:13px;color:var(--bg-ink);font-weight:600}

/* --- single product ------------------------------------------------------ */
.product-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:50px;align-items:start;margin-bottom:56px}
.product-media{position:relative}
/* Woo floats .summary at 48%; the grid owns the columns here. */
.woocommerce div.product .product-summary.summary{width:100%;float:none;margin:0;clear:none}
.woocommerce div.product .product-top{margin-bottom:56px}
/* No clearfix pseudo-elements on a grid container - they become grid items. */
.product-top::before,.product-top::after{content:none;display:none}

/* Woo renders the gallery as a plain list; the theme lays it out as one large
   image with a thumbnail rail underneath. No slider script involved.
   The .images class has to stay for plugin compatibility, so Woo's own
   `div.images { width:48%; float:left }` is undone here. */
.woocommerce div.product div.images.bgalz-gallery,
.bgalz-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;width:100%;float:none}
.bgalz-gallery .gal-main{grid-column:1 / -1;background:#fafafa;aspect-ratio:1/1;overflow:hidden;margin:0}
.bgalz-gallery .gal-main a,.bgalz-gallery .gal-thumb a{display:block;width:100%;height:100%}
.bgalz-gallery .gal-main img{width:100%;height:100%;object-fit:contain;padding:5%;transition:transform .5s ease}
.bgalz-gallery .gal-main:hover img{transform:scale(1.04)}
.bgalz-gallery .gal-thumb{background:#fafafa;aspect-ratio:1/1;overflow:hidden;border:1px solid transparent;margin:0}
.bgalz-gallery .gal-thumb:hover{border-color:var(--bg-line)}
.bgalz-gallery .gal-thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{display:none}
.woocommerce span.onsale{
  background:var(--bg-accent);color:#fff;border-radius:0;font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;min-height:0;min-width:0;line-height:1.4;padding:5px 11px;top:10px;left:10px;right:auto;margin:0;position:absolute;z-index:5
}

/* Woo's own tab markup, restyled */
.woocommerce div.product .woocommerce-tabs{margin-bottom:58px}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:0;padding:0;margin:0 0 0;border-bottom:1px solid var(--bg-line)
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;margin:0;padding:0;box-shadow:none
}
.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{
  display:block;padding:14px 22px;font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--bg-muted);border-bottom:2px solid transparent;margin-bottom:-1px
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--bg-ink);border-bottom-color:var(--bg-ink)}
.woocommerce div.product .woocommerce-tabs .panel{
  padding:28px 0 0;margin:0;font-size:14px;line-height:1.95;color:var(--bg-body)
}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:20px;margin:0 0 14px}
.woocommerce div.product .woocommerce-tabs .panel h3{font-size:17px;margin:24px 0 10px}
.woocommerce div.product .woocommerce-tabs .panel table{width:100%;border:1px solid var(--bg-line);font-size:13.5px;margin:0 0 20px}
.woocommerce div.product .woocommerce-tabs .panel th,
.woocommerce div.product .woocommerce-tabs .panel td{border:1px solid var(--bg-line);padding:10px 14px;text-align:left;vertical-align:top}
.woocommerce div.product .woocommerce-tabs .panel th{background:var(--bg-tint);width:230px;color:var(--bg-ink);font-weight:600}
.woocommerce div.product .woocommerce-tabs .panel a{color:var(--bg-accent);text-decoration:underline}

/* Woo default single-product summary bits */
.woocommerce div.product .product_title{font-size:28px;line-height:1.3;margin:0 0 10px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-size:26px;color:var(--bg-ink);font-weight:600;margin:0 0 18px;line-height:1.3
}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{color:var(--bg-muted);font-weight:400;font-size:19px;margin-right:10px;opacity:1}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none;color:var(--bg-accent);font-weight:600}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:14px;color:var(--bg-body);line-height:1.9;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--bg-line)
}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:14px}
/* Woo colours the stock line amber, which reads as a warning on an in-stock
   item. Green for available, red only when it actually is not. */
.woocommerce div.product .stock{font-size:13px;font-weight:600;margin:0 0 16px}
.woocommerce div.product .stock.in-stock{color:#2e9e5b}
.woocommerce div.product .stock.out-of-stock{color:var(--bg-accent)}
.woocommerce div.product .stock.available-on-backorder{color:var(--bg-muted)}
.woocommerce .star-rating span::before{color:#f0b200}
.woocommerce div.product form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0 0 22px}
.woocommerce div.product form.cart::before,.woocommerce div.product form.cart::after{display:none}
.woocommerce div.product form.cart div.quantity{display:flex;border:1px solid var(--bg-line);margin:0;float:none}
.woocommerce div.product form.cart div.quantity input[type=number]{
  width:70px;border:0;text-align:center;font-size:14px;padding:12px 4px;background:transparent;color:var(--bg-ink)
}
.woocommerce div.product form.cart .button{
  flex:1;min-width:210px;padding:15px 26px;float:none
}
.woocommerce div.product form.cart .variations{width:100%;margin-bottom:6px}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{padding:6px 0;border:0}

.product-summary h1{font-size:28px;line-height:1.3;margin:0 0 10px}
.product-summary .sku-line{font-size:12.5px;color:var(--bg-faint);margin:0 0 14px}
.product-summary .sku-line span{margin-right:16px}
.product-summary .price-block{font-size:26px;color:var(--bg-ink);font-weight:600;margin:0 0 18px;line-height:1.3}
.product-summary .price-block del{color:var(--bg-muted);font-weight:400;font-size:19px;margin-right:10px}
.product-summary .price-block ins{text-decoration:none;color:var(--bg-accent)}
.product-summary .short{font-size:14px;color:var(--bg-body);line-height:1.9;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--bg-line)}
.product-summary .stock-line{font-size:13px;margin:0 0 18px;font-weight:600}
.product-summary .in-stock{color:#2e9e5b}
.product-summary .out-stock{color:var(--bg-accent)}

.woocommerce .product-summary form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0 0 22px}
.woocommerce .product-summary form.cart .quantity{display:flex;border:1px solid var(--bg-line)}
.woocommerce .product-summary form.cart .quantity input[type=number]{
  width:64px;border:0;text-align:center;font-size:14px;padding:12px 4px;background:transparent;color:var(--bg-ink)
}
.woocommerce .product-summary form.cart button[type=submit]{
  flex:1;min-width:210px;background:var(--bg-ink);color:#fff;border:1px solid var(--bg-ink);
  font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:15px 26px;
  transition:background .22s ease,border-color .22s ease
}
.woocommerce .product-summary form.cart button[type=submit]:hover{background:var(--bg-accent);border-color:var(--bg-accent)}
.product-summary .meta-line{font-size:13px;color:var(--bg-muted);margin:0 0 6px}
.product-summary .meta-line a{color:var(--bg-body)}
.product-summary .meta-line a:hover{color:var(--bg-accent)}

/* shipping / trust panel on the product page */
.ship-panel{border:1px solid var(--bg-line);background:var(--bg-tint-2);padding:18px 20px;margin:22px 0 0}
.ship-panel h4{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 12px;color:var(--bg-ink)}
.ship-panel ul{list-style:none;margin:0;padding:0}
.ship-panel li{display:flex;gap:10px;font-size:13px;line-height:1.7;color:var(--bg-body);margin-bottom:9px}
.ship-panel li:last-child{margin-bottom:0}
.ship-panel li .ico{flex:0 0 auto;color:var(--bg-accent);margin-top:3px}
.ship-panel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ship-panel a{color:var(--bg-accent);text-decoration:underline}

/* tabs */
.product-tabs{margin-bottom:58px}
.product-tabs .tabnav{display:flex;gap:0;border-bottom:1px solid var(--bg-line);flex-wrap:wrap}
.product-tabs .tabnav button{
  border:0;background:none;padding:14px 22px;font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--bg-muted);border-bottom:2px solid transparent;margin-bottom:-1px
}
.product-tabs .tabnav button.on{color:var(--bg-ink);border-bottom-color:var(--bg-ink)}
.product-tabs .tabpane{display:none;padding:28px 0 0}
.product-tabs .tabpane.on{display:block}
.product-tabs .tabpane table{width:100%;border:1px solid var(--bg-line);font-size:13.5px}
.product-tabs .tabpane th,.product-tabs .tabpane td{border:1px solid var(--bg-line);padding:10px 14px;text-align:left}
.product-tabs .tabpane th{background:var(--bg-tint);width:210px;color:var(--bg-ink);font-weight:600}

/* --- cart / checkout / account ------------------------------------------- */

/* Cart, checkout and account are shortcode pages, so they render inside the
   article wrapper and pick up its underlined accent link colour. Editorial link
   styling is wrong for a checkout: undo it for anything WooCommerce prints. */
.entry-body .woocommerce a,
.entry-body .woocommerce-cart-form a,
.entry-body .cart-collaterals a{text-decoration:none}
.entry-body .woocommerce a.button,
.entry-body .woocommerce button.button,
.entry-body .woocommerce input.button,
.entry-body .woocommerce a.checkout-button{color:#fff;text-decoration:none}
.entry-body .woocommerce a.button:hover,
.entry-body .woocommerce a.checkout-button:hover{color:#fff}
.entry-body .woocommerce table.shop_table a{color:var(--bg-ink)}
.entry-body .woocommerce table.shop_table a:hover{color:var(--bg-accent)}
.entry-body .woocommerce .woocommerce-info a,
.entry-body .woocommerce .woocommerce-message a{color:var(--bg-accent)}

.woocommerce table.shop_table{border:1px solid var(--bg-line);border-radius:0;font-size:13.5px;width:100%}
.woocommerce table.shop_table th{background:var(--bg-tint);color:var(--bg-ink);font-weight:600;padding:14px 12px;border-bottom:1px solid var(--bg-line)}
.woocommerce table.shop_table td{padding:14px 12px;border-top:1px solid var(--bg-line-soft)}
.woocommerce table.shop_table img{width:64px;height:auto}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--bg-ink);
  color:#fff;
  border:1px solid var(--bg-ink);
  border-radius:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:14px 26px;
  line-height:1.2;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--bg-accent);border-color:var(--bg-accent);color:#fff}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5}

.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button.button{width:100%;text-align:center}

.woocommerce form .form-row{margin-bottom:16px;padding:0}
.woocommerce form .form-row label{font-size:13px;color:var(--bg-ink);font-weight:600;margin-bottom:6px;display:block}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--bg-line);border-radius:0;padding:11px 13px;font-size:14px;color:var(--bg-ink);
  background:#fff;width:100%;height:auto;line-height:1.5;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.5;color:var(--bg-ink)}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{top:9px;right:6px}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:0;border-color:var(--bg-ink)}

/*
 * Validation colouring.
 *
 * WooCommerce marks every empty required field `woocommerce-invalid` as soon as
 * the checkout script runs, so a first-time visitor met a form where the name,
 * address, city, postcode and email were all outlined in red before they had
 * typed anything - it reads as six errors rather than an empty form. Those
 * classes are neutralised here and the feedback comes from :user-invalid
 * instead, which the browser only applies once the field has actually been
 * interacted with and left in a bad state.
 */
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row.woocommerce-validated label{color:var(--bg-ink)}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select{border-color:var(--bg-line)}
/* Woo's select2 rules carry a :not(), which counts toward specificity - these
   have to repeat it or the green "validated" border stays on the State field. */
.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection,
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection{border-color:var(--bg-line)}

.woocommerce form .form-row input.input-text:user-invalid,
.woocommerce form .form-row textarea:user-invalid,
.woocommerce form .form-row select:user-invalid{border-color:var(--bg-accent)}
.woocommerce form .form-row input.input-text:user-invalid:focus,
.woocommerce form .form-row textarea:user-invalid:focus,
.woocommerce form .form-row select:user-invalid:focus{border-color:var(--bg-accent);outline:0}

/* Required marker stays visible without turning the whole label red. */
.woocommerce form .form-row .required{color:var(--bg-accent);text-decoration:none;border:0}
.woocommerce form .form-row .optional{color:var(--bg-faint)}

.woocommerce-checkout .col2-set,
.woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{width:auto;float:none;margin:0}
/* WooCommerce clearfixes .col2-set with ::before/::after. On a grid container
   those are grid items, and they push billing into the second column and
   shipping onto the next row. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after{content:none;display:none}
.woocommerce-checkout h3{font-size:19px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--bg-line)}
.woocommerce-checkout #order_review{margin-top:34px}
.woocommerce-checkout #payment{background:var(--bg-tint-2);border:1px solid var(--bg-line);border-radius:0;margin-top:22px}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--bg-line);padding:18px}
.woocommerce-checkout #payment div.form-row{padding:18px}
.woocommerce-checkout #payment div.payment_box{background:#fff;border:1px solid var(--bg-line);font-size:13px;color:var(--bg-body)}
.woocommerce-checkout #payment div.payment_box::before{display:none}

.woocommerce .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce-cart .cart-collaterals{display:grid;grid-template-columns:1fr;max-width:440px;margin-left:auto}
.woocommerce .cart_totals h2{font-size:19px;margin:0 0 16px}

/* Coupon row: Woo sizes the field at 100px, which truncates its own
   "Coupon code" placeholder. */
.woocommerce table.shop_table td.actions{padding:16px 12px}
.woocommerce table.shop_table td.actions .coupon{display:flex;gap:10px;float:left;align-items:stretch}
.woocommerce table.shop_table td.actions .coupon label{display:none}
.woocommerce #coupon_code,
.woocommerce table.shop_table td.actions .coupon .input-text{
  width:190px;min-width:190px;border:1px solid var(--bg-line);padding:11px 13px;font-size:13.5px;margin:0
}
.woocommerce table.shop_table td.actions .button{padding:12px 22px;font-size:11.5px}
@media (max-width:560px){
  .woocommerce table.shop_table td.actions .coupon{float:none;width:100%;margin-bottom:12px}
  .woocommerce #coupon_code,
  .woocommerce table.shop_table td.actions .coupon .input-text{width:100%;min-width:0}
  .woocommerce table.shop_table td.actions .button{width:100%}
}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border-top:0;border-left:3px solid var(--bg-ink);background:var(--bg-tint-2);
  padding:15px 18px 15px 22px;font-size:13.5px;color:var(--bg-body);border-radius:0;list-style:none;margin:0 0 24px
}
.woocommerce-error,.woocommerce .woocommerce-error{border-left-color:var(--bg-accent)}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-message .button{float:right;margin-left:16px;padding:9px 16px;font-size:11px}

.woocommerce-account .woocommerce-MyAccount-navigation{width:24%}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--bg-line)}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--bg-line-soft)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:11px 16px;font-size:13.5px;color:var(--bg-body)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--bg-tint);color:var(--bg-ink);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{width:71%}

/* reviews */
.woocommerce #reviews #comments ol.commentlist{padding:0;margin:0 0 26px}
.woocommerce #reviews #comments ol.commentlist li{margin-bottom:22px}
.woocommerce #reviews #comments ol.commentlist li .comment-text{border:1px solid var(--bg-line);border-radius:0;padding:18px 20px}
.woocommerce #review_form #respond textarea{border:1px solid var(--bg-line);padding:11px 13px;width:100%}

/* price filter widget */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{background:var(--bg-line);border-radius:0;height:4px}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range{background:var(--bg-ink)}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--bg-ink);border-radius:50%;width:13px;height:13px;top:-5px}
.woocommerce .widget_price_filter .price_slider_amount .button{float:left;padding:9px 16px;font-size:11px}
.woocommerce .widget_price_filter .price_slider_amount .price_label{float:right;font-size:12.5px;padding-top:9px;color:var(--bg-body)}

/* block-editor cart/checkout blocks, if ever enabled */
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button{border-radius:0;background:var(--bg-ink)}

/* --- related / upsell rails ---------------------------------------------- */
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;border-bottom:1px solid var(--bg-line);padding-bottom:14px}
.rail-head h2{font-size:21px;margin:0}
.rail-head a{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--bg-muted)}
.rail-head a:hover{color:var(--bg-accent)}

/* --- empty states -------------------------------------------------------- */
.empty-state{text-align:center;padding:60px 20px;border:1px solid var(--bg-line);background:var(--bg-tint-2)}
.empty-state h2{font-size:22px;margin:0 0 10px}
.empty-state p{color:var(--bg-muted);margin:0 0 22px}

/* The column-count overrides have to repeat the .cols-N class: a bare
   .bgalz-products rule inside a media query loses to .bgalz-products.cols-4,
   which is why the grid stayed four-wide on a phone and ran off the screen. */
@media (max-width:992px){
  .bgalz-products,
  .bgalz-products.cols-3,
  .bgalz-products.cols-4{--cols:3}
  .product-top{grid-template-columns:1fr;gap:30px}
  .woocommerce-checkout .col2-set,
  .woocommerce .col2-set{grid-template-columns:1fr;gap:0}
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none;margin-bottom:26px}
}
@media (max-width:768px){
  .bgalz-products,
  .bgalz-products.cols-2,
  .bgalz-products.cols-3,
  .bgalz-products.cols-4{--cols:2;gap:26px 16px}
  .bgalz-card .quick{transform:translateY(0);position:static;margin-top:10px}
  .bgalz-card .quick a,.bgalz-card .quick button{background:var(--bg-ink);font-size:10px;letter-spacing:.6px;padding:9px 4px}
  .bgalz-card h3{font-size:13px}
  .bgalz-card .cat{font-size:10px}
  .product-summary h1{font-size:22px}
  .product-summary .price-block{font-size:22px}
  .woocommerce table.shop_table img{width:48px}
  .bgalz-gallery{grid-template-columns:repeat(3,1fr)}
  .shop-toolbar{gap:10px}
  .shop-toolbar select{width:100%}
}
@media (max-width:480px){
  .woocommerce .product-summary form.cart button[type=submit]{min-width:0;width:100%}
  .woocommerce div.product form.cart .button{min-width:0;width:100%;flex:1 1 100%}
}