/* WooCommerce overrides */
.woocommerce-breadcrumb { font-size: 11px; letter-spacing: .1em; color: var(--g400); }
.woocommerce-breadcrumb a { color: var(--g400); text-decoration: none; transition: color .2s; }
.woocommerce-breadcrumb a:hover { color: var(--black); }

/* Loop add-to-cart */
.woocommerce ul.products li.product .button,
.woocommerce .add_to_cart_button {
  display: block; width: 100%; text-align: center;
  font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  background: none; color: var(--g600); border: 1px solid var(--g100);
  padding: 10px 16px; transition: all .2s; border-radius: 0; cursor: pointer; margin-top: 8px;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce .add_to_cart_button:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* Price */
.woocommerce del { color: var(--g400); font-size: .85em; }
.woocommerce ins { text-decoration: none; }
.woocommerce .price { font-family: var(--serif); font-size: 15px; }

/* Notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  border-top: 2px solid var(--black); padding: 14px 20px; margin-bottom: 24px;
  font-size: 13px; font-weight: 300; background: var(--g100);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.woocommerce-error { border-color: #cc0000; }
.woocommerce-info { border-color: var(--g400); }
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none; }
.woocommerce-message a.button { background: var(--black); color: var(--white); padding: 8px 16px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }

/* Cart table */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.woocommerce table.shop_table th { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--g400); padding: 12px 0; border-bottom: 1px solid var(--g100); font-weight: 400; text-align: left; }
.woocommerce table.shop_table td { padding: 20px 0; border-bottom: 1px solid var(--g100); vertical-align: middle; }
.woocommerce table.shop_table .product-thumbnail img { width: 80px; height: 106px; object-fit: cover; }
.woocommerce-cart-form__cart-item .product-name a { font-family: var(--serif); font-size: 17px; font-weight: 300; color: var(--black); text-decoration: none; }
.woocommerce .quantity .qty { width: 60px; height: 44px; text-align: center; border: 1px solid var(--g100); font-family: var(--sans); font-size: 14px; background: none; outline: none; -moz-appearance: textfield; }
.woocommerce .quantity .qty::-webkit-inner-spin-button, .woocommerce .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Checkout */
.woocommerce form .form-row { margin-bottom: 20px; }
.woocommerce form .form-row label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--g400); display: block; margin-bottom: 8px; }
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--g100); font-family: var(--sans); font-size: 13px; font-weight: 300; background: none; outline: none; transition: border-color .2s; border-radius: 0; }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--black); }
#place_order, .woocommerce button.button.alt { background: var(--black) !important; color: var(--white) !important; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; padding: 15px 32px; border: 2px solid var(--black); border-radius: 0; cursor: pointer; transition: background .25s; width: 100%; }
#place_order:hover, .woocommerce button.button.alt:hover { background: var(--g600) !important; border-color: var(--g600) !important; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { display: flex; gap: 2px; list-style: none; padding: 0; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 12px; border: 1px solid var(--g100); text-decoration: none; color: var(--g600); transition: all .2s; }
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--black); color: var(--white); border-color: var(--black); }

/* Stars */
.woocommerce .star-rating span::before { color: var(--black); }
.woocommerce .star-rating::before { color: var(--g200); }

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--g600); display: block; padding: 10px 0; border-bottom: 1px solid var(--g100); transition: color .2s; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--black); }

/* ── HIDE COLOUR DROPDOWN WHEN SWATCHES ARE SHOWING ──────── */
/* When a swatch-group exists for a colour attribute, hide the matching WC select row */
.product-form-wrap .variations tr.has-swatches { display: none !important; }

/* Keep the select in the DOM (WC needs it) but visually hide it when swatches present */
.swatch-driven-select { 
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* ── LOGO HEIGHT FIX ─────────────────────────────────────────
   WooCommerce sets height:auto on all images which overrides
   our logo height. This more specific rule beats it.
─────────────────────────────────────────────────────────── */
.woocommerce .site-logo-img,
.woocommerce-page .site-logo-img,
.woocommerce .nav-logo .site-logo-img,
.woocommerce-page .nav-logo .site-logo-img,
.woocommerce #navbar .site-logo-img,
.woocommerce-page #navbar .site-logo-img {
  height: var(--logo-h) !important;
  width: auto !important;
  max-width: var(--logo-w) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Footer logo on WC pages */
.woocommerce .site-logo--footer,
.woocommerce-page .site-logo--footer {
  height: 32px !important;
  max-width: 180px !important;
}