/*
 * Superior Glass Brisbane - WooCommerce overrides
 *
 * Layered on top of WooCommerce's own stylesheets (kept for layout/forms).
 * Uses the brand tokens Tailwind v4 emits as CSS variables on :root, so this
 * file needs no Tailwind rebuild. Hand-written, not compiled.
 */

/* ----------------------------------------------------------------
   Restore theme image sizing on Woo pages
   woocommerce-layout.css sets `.woocommerce-page img { height: auto }`
   (0,1,1), which outranks Tailwind's single-class height utilities
   (0,1,0) and blows the header/footer logos up to their native size.
   Re-assert the utilities the theme uses on logos and icons at a
   higher specificity.
   ---------------------------------------------------------------- */

.woocommerce-page img.h-8,  .woocommerce img.h-8  { height: 2rem; }
.woocommerce-page img.h-10, .woocommerce img.h-10 { height: 2.5rem; }
.woocommerce-page img.h-12, .woocommerce img.h-12 { height: 3rem; }
.woocommerce-page img.h-16, .woocommerce img.h-16 { height: 4rem; }
.woocommerce-page img.h-full, .woocommerce img.h-full { height: 100%; }

@media (min-width: 64rem) {
  .woocommerce-page img.lg\:h-12, .woocommerce img.lg\:h-12 { height: 3rem; }
}

/* ----------------------------------------------------------------
   Header cart link
   ---------------------------------------------------------------- */

.sg-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: color 0.2s ease;
}

.sg-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  color: var(--color-neutral-900);
  background: var(--color-brand-orange);
  border-radius: 9999px;
}

.sg-cart-count.is-visible { display: block; }

/* ----------------------------------------------------------------
   Buttons - match .btn-primary / .btn-secondary
   ---------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-neutral-900);
  background-color: var(--color-brand-orange);
  border: 0;
  border-radius: 0.375rem;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  color: var(--color-neutral-900);
  background-color: var(--color-brand-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  color: var(--color-neutral-900);
  background-color: var(--color-brand-orange);
  opacity: 0.5;
}

/* Secondary (blue) actions: view cart, update cart, coupon */
.woocommerce a.added_to_cart,
.woocommerce .wc-forward,
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
  color: #fff !important;
  background-color: var(--color-brand-blue) !important;
}

.woocommerce a.added_to_cart:hover,
.woocommerce .wc-forward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
  background-color: var(--color-brand-blue-dark) !important;
}

.woocommerce a.added_to_cart {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------------
   Product grid (shop / category archives)
   ---------------------------------------------------------------- */

.sg-woocommerce .woocommerce-result-count,
.sg-woocommerce .woocommerce-ordering {
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  color: var(--color-neutral-500);
}

.sg-woocommerce .woocommerce-ordering select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.375rem;
  background-color: #fff;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  padding: 1.25rem 1.25rem 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  line-height: 1.3;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
  color: var(--color-brand-blue);
}

.woocommerce ul.products li.product .price {
  padding: 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-brand-blue);
}

.woocommerce ul.products li.product .price del {
  color: var(--color-neutral-400);
  font-weight: 500;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product .button {
  margin: 1rem 1.25rem 1.25rem;
  align-self: flex-start;
}

.woocommerce ul.products li.product .added_to_cart {
  margin: -0.5rem 1.25rem 1.25rem;
}

.woocommerce span.onsale {
  min-height: auto;
  min-width: auto;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: var(--color-brand-blue);
  border-radius: 0.375rem;
  top: 0.75rem;
  left: 0.75rem;
  margin: 0;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 0.375rem;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 0.5rem 0.875rem;
  font-family: var(--font-heading);
  font-weight: 600;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.375rem;
  color: var(--color-neutral-700);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  color: #fff;
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

/* ----------------------------------------------------------------
   Single product - two-column layout (woocommerce/content-single-product.php)
   Left: breadcrumb, title, descriptions, meta. Right: gallery + buy panel.
   ---------------------------------------------------------------- */

.sg-product-section {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

@media (min-width: 64rem) {
  .sg-product-section {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
}

.sg-product__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .sg-product__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

/* Mobile: image + buy panel first, copy second. Desktop: copy left, buy right. */
.sg-product__buy  { order: 1; }
.sg-product__info { order: 2; }

@media (min-width: 64rem) {
  .sg-product__info { order: 1; }
  .sg-product__buy  { order: 2; position: sticky; top: 6rem; }
}

/* Breadcrumb (Woo's, restyled for a white background) */
.woocommerce .sg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--color-neutral-500);
}

.woocommerce .sg-crumbs a {
  color: var(--color-neutral-500);
}

.woocommerce .sg-crumbs a:hover {
  color: var(--color-brand-blue);
}

.woocommerce .sg-crumbs .sg-crumb-sep {
  color: var(--color-neutral-300);
}

/* Left column */
.sg-product .product_title {
  margin-bottom: 1rem;
}

.sg-product .woocommerce-product-details__short-description {
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-neutral-200);
}

.sg-product__description {
  margin-bottom: 2rem;
}

.sg-product .product_meta {
  margin-top: 0.5rem;
}

.sg-product .product_meta > span {
  display: block;
  margin-bottom: 0.25rem;
}

/* Right column: gallery - undo Woo's float/48% width */
.woocommerce .sg-product div.images,
.woocommerce .sg-product div.woocommerce-product-gallery {
  float: none;
  width: 100%;
  margin-bottom: 0;
}

.sg-product__gallery {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.sg-product__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  border-radius: 0;
}

.sg-product__gallery .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-neutral-50);
}

.woocommerce .sg-product div.images .flex-control-thumbs li {
  width: 5rem;
  float: none;
}

.woocommerce .sg-product div.images .flex-control-thumbs li img {
  border-radius: 0.375rem;
  border: 2px solid transparent;
  opacity: 0.7;
}

.woocommerce .sg-product div.images .flex-control-thumbs li img.flex-active,
.woocommerce .sg-product div.images .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--color-brand-blue);
}

.sg-product__gallery .onsale {
  z-index: 2;
}

/* Right column: buy panel */
.sg-product__panel {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
}

.woocommerce .sg-product .sg-product__panel p.price,
.woocommerce .sg-product .sg-product__panel span.price {
  display: block;
  margin: 0 0 1.25rem;
  font-size: 2rem;
  line-height: 1.2;
}

.woocommerce .sg-product .sg-product__panel form.cart {
  margin: 0;
}

.woocommerce .sg-product .sg-product__panel form.cart .single_add_to_cart_button {
  flex: 1;
}

/* Related products sit below the grid */
.sg-product .related.products,
.sg-product .upsells.products {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-neutral-200);
}

/* ----------------------------------------------------------------
   Single product - shared element styles
   ---------------------------------------------------------------- */

.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-neutral-900);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-brand-blue);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--color-neutral-600);
}

.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 0.75rem;
}

.woocommerce div.product form.cart {
  margin: 1.5rem 0 2rem;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.woocommerce div.product form.cart div.quantity {
  float: none;
  margin: 0;
}

.woocommerce .quantity .qty {
  height: 100%;
  min-height: 3rem;
  width: 4.5rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.375rem;
  font-family: var(--font-body);
  font-size: 1rem;
}

.woocommerce div.product form.cart .button {
  float: none;
}

.woocommerce div.product .product_meta {
  padding-top: 1rem;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 0.875rem;
  color: var(--color-neutral-500);
}

.woocommerce div.product .product_meta a {
  color: var(--color-brand-blue);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--color-neutral-200);
  overflow: visible;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.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 {
  margin: 0 0 -2px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-neutral-500);
  border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-brand-blue);
  border-bottom-color: var(--color-brand-blue);
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--color-neutral-600);
  font-size: 1.0625rem;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.woocommerce div.product .woocommerce-tabs .panel ul li {
  margin-bottom: 0.5rem;
}

.woocommerce div.product .woocommerce-tabs .panel ul li::marker {
  color: var(--color-brand-orange);
}

/* Related products */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
   Notices
   ---------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-width: 0;
  border-left: 4px solid var(--color-brand-blue);
  border-radius: 0.5rem;
  background: var(--color-brand-blue-50);
  color: var(--color-neutral-800);
  font-size: 0.9375rem;
}

.woocommerce-message { border-left-color: #16a34a; background: #f0fdf4; }
.woocommerce-error   { border-left-color: #dc2626; background: #fef2f2; }

.woocommerce-message::before { color: #16a34a; }
.woocommerce-info::before    { color: var(--color-brand-blue); }
.woocommerce-error::before   { color: #dc2626; }

/* ----------------------------------------------------------------
   Cart & checkout (classic shortcode templates)
   ---------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.75rem;
  border-collapse: separate;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-neutral-800);
  background: var(--color-neutral-50);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--color-neutral-200);
}

.woocommerce-cart table.cart img {
  width: 72px;
  border-radius: 0.5rem;
}

.woocommerce-cart table.cart td.product-name a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-neutral-900);
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-neutral-900);
}

.woocommerce .cart-collaterals .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
  color: var(--color-brand-blue);
  font-family: var(--font-heading);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart .coupon .input-text,
.select2-container--default .select2-selection--single {
  padding: 0.75rem 0.875rem;
  min-height: 3rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 1px;
  border-color: var(--color-brand-blue);
}

.woocommerce form .form-row label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-800);
}

.woocommerce form .form-row .required {
  color: var(--color-brand-orange-dark);
  text-decoration: none;
}

.woocommerce-checkout #payment {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.75rem;
}

.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border-radius: 0.5rem;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: #fff;
}

/* ----------------------------------------------------------------
   Cart & checkout (block templates, WooCommerce default since 8.3)
   ---------------------------------------------------------------- */

.wc-block-components-product-name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-neutral-900);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--color-brand-blue);
  font-family: var(--font-heading);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--font-heading);
}

.wc-block-components-text-input input,
.wc-block-components-select .components-custom-select-control__button {
  border-radius: 0.375rem;
  border-color: var(--color-neutral-300);
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 1px var(--color-brand-blue);
}

.wc-block-components-button:disabled {
  opacity: 0.5;
}

/* ----------------------------------------------------------------
   My Account
   ---------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-neutral-700);
  border-radius: 0.375rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--color-brand-blue);
  background: var(--color-brand-blue-50);
}

/* ----------------------------------------------------------------
   Links inside Woo content

   Scoped to the Woo content containers only: the theme wrapper on
   shop/product pages (.sg-woocommerce), the classic shortcode wrapper
   on cart/checkout/account (div.woocommerce) and the cart/checkout
   blocks. `.woocommerce` is also the <body> class on every shop page,
   so matching `.woocommerce a` painted the utility bar, hero breadcrumb
   and outline buttons blue on their blue backgrounds.
   ---------------------------------------------------------------- */

.sg-woocommerce a:not(.button):not(.added_to_cart):not(.sg-cart-link),
div.woocommerce a:not(.button):not(.added_to_cart),
.wp-block-woocommerce-cart a:not(.wc-block-components-button),
.wp-block-woocommerce-checkout a:not(.wc-block-components-button) {
  color: var(--color-brand-blue);
}

.sg-woocommerce a:not(.button):not(.added_to_cart):not(.sg-cart-link):hover,
div.woocommerce a:not(.button):not(.added_to_cart):hover,
.wp-block-woocommerce-cart a:not(.wc-block-components-button):hover,
.wp-block-woocommerce-checkout a:not(.wc-block-components-button):hover {
  color: var(--color-brand-blue-dark);
}