/* Etram — WooCommerce styling to match the site's luxury gold/ink theme */

/* Safety net: this theme has no sidebar design. If WooCommerce (or any
   plugin) still outputs its default "Search / Pages / Archives /
   Categories" widget list anywhere, hide it outright rather than let it
   show up unstyled. */
#secondary, .widget-area, aside.widget-area, .sidebar, .woocommerce-widget-area {
  display: none !important;
}

.woocommerce-page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; font-family: 'Inter', sans-serif; color: var(--ink, #1b1b1b); }

/* Shop grid
   !important + column-count/float resets: WooCommerce's own core plugin
   stylesheet (assets/css/woocommerce.css, loaded by the plugin itself, not
   this theme) ships `ul.products.columns-4 li.product{width:22%;float:left}`
   style rules with matching specificity — depending on enqueue order those
   can win over a plain grid rule and squeeze every card into a sliver.
   Forcing every relevant property here with !important guarantees this
   theme's grid wins regardless of load order. */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: start !important;
  column-count: auto !important;
  width: 100% !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  background: var(--off, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  transition: box-shadow .25s ease, transform .25s ease;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 14px 30px rgba(0,0,0,.10); transform: translateY(-4px); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
.woocommerce ul.products li.product img {
  border-radius: 10px;
  margin-bottom: 12px;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: var(--line, #eee);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 8px 0 6px; color: var(--ink, #1b1b1b); }
.woocommerce ul.products li.product .price { color: var(--gold-deep, #9c7a2e); font-weight: 600; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del { opacity: .55; margin-right: 6px; }
.woocommerce ul.products li.product .star-rating { color: #d9b46b; }

/* Buttons — Add to cart, checkout, place order, etc.
   High-specificity + !important: WooCommerce's block-based styles
   (.wp-element-button, .wc-block-components-button, single_add_to_cart_button)
   ship their own purple default and otherwise win over theme CSS. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce button.single_add_to_cart_button,
.woocommerce a.add_to_cart_button, .woocommerce a.ajax_add_to_cart,
.woocommerce .wp-element-button, .woocommerce .wc-block-components-button,
.woocommerce-page .wp-element-button, .woocommerce-checkout #payment #place_order,
.woocommerce a.checkout-button,
.wp-block-woocommerce-checkout .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  background: var(--ink, #1b1b1b) !important;
  color: var(--off, #fff) !important;
  border: 1px solid var(--gold, #b3873c) !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: .85rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  box-shadow: none !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce a.add_to_cart_button:hover,
.woocommerce .wp-element-button:hover, .woocommerce .wc-block-components-button:hover,
.woocommerce-checkout #payment #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--gold-deep, #9c7a2e) !important;
  border-color: var(--gold-deep, #9c7a2e) !important;
  color: var(--off, #fff) !important;
}
.woocommerce a.added_to_cart { color: var(--gold-deep, #9c7a2e); font-weight: 600; margin-left: 10px; }
.woocommerce a.remove { color: var(--gold-deep, #9c7a2e) !important; border-color: var(--gold-deep, #9c7a2e) !important; }
.woocommerce a.remove:hover { background: var(--gold-deep, #9c7a2e) !important; color: var(--off, #fff) !important; }

/* Quantity input on single product / cart pages */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
  border: 1px solid var(--line, rgba(0,0,0,.15));
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Manrope', sans-serif;
  background: var(--off, #fff);
  color: var(--ink, #1b1b1b);
  height: auto;
}
.wc-block-components-quantity-selector { border: 1px solid var(--line, rgba(0,0,0,.15)) !important; border-radius: 999px !important; background: var(--off, #fff) !important; overflow: hidden; }
.wc-block-components-quantity-selector__button { color: var(--ink, #1b1b1b) !important; }
.wc-block-components-quantity-selector__input { background: transparent !important; color: var(--ink, #1b1b1b) !important; font-family: 'Manrope', sans-serif !important; }

/* ============ Single product page (PDP) — premium pass ============ */
.woocommerce div.product {
  background: var(--off, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}
.woocommerce div.product .woocommerce-product-gallery { border-radius: 14px; overflow: hidden; background: var(--off, #fff); }
.woocommerce div.product .woocommerce-product-gallery__wrapper { aspect-ratio: 4 / 5; }
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 14px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.woocommerce div.product .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce div.product .summary { padding-left: 32px; }
.woocommerce div.product .summary .product_title {
  font-family: 'Playfair Display', 'Fraunces', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink, #1b1b1b);
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.woocommerce div.product .summary .woocommerce-product-rating { margin-bottom: 1rem; }
.woocommerce div.product .summary .star-rating { color: #d9b46b; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--gold-deep, #9c7a2e);
  font-size: 1.6rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1.2rem;
}
.woocommerce div.product p.price del { opacity: .5; font-weight: 400; margin-right: 8px; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-soft, #6d6455);
  line-height: 1.75;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1.4rem;
}
.woocommerce div.product form.cart {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line, rgba(0,0,0,.1));
}
.woocommerce div.product .product_meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(0,0,0,.1));
  font-size: .85rem;
  color: var(--ink-soft, #6d6455);
  font-family: 'Manrope', sans-serif;
}
.woocommerce div.product .product_meta a { color: var(--gold-deep, #9c7a2e); text-decoration: none; }

/* Tabs (Description / Additional info / Reviews) */
.woocommerce-tabs { margin-top: 2.5rem; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line, rgba(0,0,0,.1)); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 10px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6d6455);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ink, #1b1b1b);
  border-bottom-color: var(--gold, #b3873c);
}
.woocommerce-tabs .panel { color: var(--ink-soft, #6d6455); line-height: 1.75; }
.woocommerce-Tabs-panel--additional_information table { width: 100%; border-collapse: collapse; }
.woocommerce-Tabs-panel--additional_information table th,
.woocommerce-Tabs-panel--additional_information table td { padding: 10px 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); }

/* Related products
   WooCommerce's own core stylesheet lays out div.product (gallery + summary)
   as a 2-column CSS grid. Because the "Related products" section is output
   *inside* that same div.product (via the woocommerce_after_single_product_
   summary hook), without an explicit reset it becomes a grid ITEM too and
   gets squeezed into one of those two narrow columns instead of spanning
   full width below — that's what was causing the tall, narrow, wrapped-text
   related product card. Force it back to a full-width block. */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.woocommerce div.product .cross-sells {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  clear: both;
}
.related.products {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line, rgba(0,0,0,.1));
}
.related.products ul.products,
.related.products .wc-block-grid__products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
.related.products > h2 {
  font-family: 'Playfair Display', 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-bottom: 1.4rem;
  color: var(--ink, #1b1b1b);
}

/* ============ Cart page (Block-based) ============ */
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; border: 1px solid var(--line, rgba(0,0,0,.08)); }
.woocommerce table.shop_table th { background: var(--off, #f7f5f2); font-family: 'Fraunces', serif; text-align: left; padding: 14px; color: var(--ink, #1b1b1b); }
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }
.woocommerce-cart-form .quantity input { width: 60px; padding: 8px; border-radius: 6px; border: 1px solid var(--line, rgba(0,0,0,.15)); }
.woocommerce-cart .cart-collaterals .cart_totals { background: var(--off, #f7f5f2); border-radius: 14px; padding: 24px; }
.woocommerce-cart .cart_totals h2 { font-family: 'Fraunces', serif; color: var(--ink, #1b1b1b); }

.wp-block-woocommerce-cart, .wc-block-cart { font-family: 'Inter', sans-serif; color: var(--ink, #1b1b1b); }
.wc-block-cart-items { border-top: 1px solid var(--line, rgba(0,0,0,.1)); }
.wc-block-cart-items__header, .wc-block-cart-item { border-bottom: 1px solid var(--line, rgba(0,0,0,.08)) !important; }
.wc-block-cart-items__header th { font-family: 'Manrope', sans-serif; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft, #6d6455); }
.wc-block-components-product-name { font-family: 'Fraunces', serif; color: var(--ink, #1b1b1b); text-decoration: none; }
.wc-block-components-product-price, .wc-block-components-totals-item__value { color: var(--gold-deep, #9c7a2e); font-weight: 600; }
.wc-block-cart__totals-title, .wc-block-components-panel__button { font-family: 'Fraunces', serif !important; color: var(--ink, #1b1b1b) !important; }
.wc-block-cart-items__row, .wc-block-components-totals-wrapper, .wc-block-components-sidebar-layout__sidebar {
  background: transparent;
}
.wc-block-components-totals-wrapper { border-color: var(--line, rgba(0,0,0,.1)) !important; }
.wc-block-cart .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--off, #f7f5f2) !important;
  border: 1px solid var(--line, rgba(0,0,0,.1)) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
.wc-block-components-order-summary__button-text,
.wc-block-components-totals-coupon-link { color: var(--gold-deep, #9c7a2e) !important; }
.wc-block-components-shipping-rates-control__package .components-radio-control__option label,
.wc-block-checkout__form label,
.wc-block-components-radio-control__label { color: var(--ink, #1b1b1b) !important; }

/* ============ Checkout page (Block-based) ============ */
.woocommerce-checkout #payment { background: var(--off, #f7f5f2); border-radius: 14px; padding: 20px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border-radius: 8px; border: 1px solid var(--line, rgba(0,0,0,.15)); padding: 10px 12px; background: var(--off, #fff); color: var(--ink, #1b1b1b);
}
.woocommerce-checkout-review-order-table { background: var(--off, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; }

.wp-block-woocommerce-checkout, .wc-block-checkout { font-family: 'Inter', sans-serif; color: var(--ink, #1b1b1b); }
.wc-block-checkout__form .wc-block-components-text-input input,
.wc-block-checkout__form .wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-block-checkout__form select,
.wc-block-components-country-input input {
  background: var(--off, #fff) !important;
  border: 1px solid var(--line, rgba(0,0,0,.15)) !important;
  border-radius: 8px !important;
  color: var(--ink, #1b1b1b) !important;
  font-family: 'Manrope', sans-serif !important;
}
.wc-block-checkout__form .wc-block-components-text-input label,
.wc-block-components-checkbox label {
  font-family: 'Manrope', sans-serif !important;
  color: var(--ink-soft, #6d6455) !important;
}
.wc-block-components-title, .wc-block-checkout__actions_row {
  font-family: 'Fraunces', serif !important;
  color: var(--ink, #1b1b1b) !important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-payment-method-label {
  color: var(--ink, #1b1b1b) !important;
}
.wc-block-components-radio-control__input {
  accent-color: var(--gold, #b3873c);
}

/* ============ WooCommerce Blocks product grid ============
   Category/archive pages built with the block editor (Product Collection /
   "All Products" block) render with wc-block-grid__* / product-template
   classes instead of the classic ul.products markup above — without this,
   those pages fall back to the browser's unstyled default (narrow column,
   huge gaps, wrapping button) since none of the classic rules match. */
.wc-block-grid__products,
.wp-block-woocommerce-product-template,
.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: start !important;
}
.wc-block-grid__product,
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li,
.wc-block-product {
  background: var(--off, #fff) !important;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  width: auto !important;
  max-width: none !important;
}
.wc-block-grid__product-image, .wc-block-components-product-image {
  margin-bottom: 12px;
}
.wc-block-grid__product-image img, .wc-block-components-product-image img,
.wc-block-grid__product img {
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--line, #eee);
}
.wc-block-grid__product-title, .wc-block-components-product-name {
  font-family: 'Fraunces', serif !important;
  color: var(--ink, #1b1b1b) !important;
  font-size: 1.05rem;
  text-decoration: none;
}
.wc-block-grid__product-price, .wc-block-components-product-price,
.wc-block-components-product-price__value {
  color: var(--gold-deep, #9c7a2e) !important;
  font-weight: 600;
}
.wc-block-grid__product-onsale, .wc-block-components-product-sale-badge {
  background: var(--gold, #b3873c) !important;
  color: var(--ink-deep, #1b1b1b) !important;
}
.wc-block-grid__product-add-to-cart, .wc-block-components-product-button {
  margin-top: 10px;
}

/* My account page */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 6px; color: var(--ink, #1b1b1b); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--gold-deep, #9c7a2e); font-weight: 600; }

/* Star ratings, messages, notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--gold-deep, #9c7a2e);
  border-radius: 10px;
  background: var(--off, #f7f5f2);
  color: var(--ink, #1b1b1b);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gold-deep, #9c7a2e); }

@media (max-width: 860px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product .summary { padding-left: 0; margin-top: 1.5rem; }
}
@media (max-width: 560px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .woocommerce div.product form.cart { flex-wrap: wrap; }
}