/* ==========================================================================
   Auris Atelier — WooCommerce pages
   Product, cart, checkout and account screens, built on the same tokens as the
   ported section styles. The product grid itself is styled in sections.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archive header
   -------------------------------------------------------------------------- */

.woocommerce-products-header { margin-bottom: 34px; text-align: center; }

.woocommerce-products-header__title,
.woocommerce-loop-category__title {
  font-family: var(--font-heading-family);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--auris-wood);
}

.term-description,
.woocommerce-product-details__short-description {
  color: var(--auris-muted);
  font-size: 16px;
  line-height: 1.75;
}

.term-description { max-width: 68ch; margin: 14px auto 0; text-align: center; }

.woocommerce .woocommerce-result-count { color: var(--auris-muted); font-size: 14px; }

.woocommerce .woocommerce-ordering { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.auris-searchform input[type="search"] {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--auris-line);
  border-radius: 4px;
  background: #fff;
  color: var(--auris-ink);
  font-family: var(--font-body-family);
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}

.woocommerce textarea { min-height: 120px; }

.woocommerce form .form-row { margin-bottom: 16px; padding: 0; }

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  color: var(--auris-wood);
  font-size: 14px;
  font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; }

.auris-hidden-field { display: none !important; }

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery { width: 100%; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--auris-radius); }

.woocommerce div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
}
.woocommerce div.product .flex-control-thumbs li { width: 76px; margin: 0; list-style: none; }
.woocommerce div.product .flex-control-thumbs img {
  border-radius: 4px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }

.woocommerce div.product .summary { margin: 0; }

.woocommerce div.product .product_title {
  margin-bottom: 12px;
  font-family: var(--font-heading-family);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--auris-wood);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--auris-wood);
  font-size: 27px;
}
.woocommerce div.product p.price del { color: var(--auris-muted); font-size: 19px; opacity: .7; }
.woocommerce div.product p.price ins { text-decoration: none; font-weight: 700; }

.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 22px; }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.woocommerce div.product form.cart .quantity { display: flex; }
.woocommerce .quantity input.qty {
  width: 78px;
  min-height: 50px;
  border: 1px solid var(--auris-line);
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}
.woocommerce div.product form.cart .button { flex: 1; min-width: 190px; }

.auris-product-wa {
  display: inline-flex;
  width: 100%;
  margin-bottom: 16px;
  background: var(--auris-success) !important;
  border-color: var(--auris-success) !important;
  color: #fff !important;
}
.auris-product-wa:hover { background: #1a3f2f !important; border-color: #1a3f2f !important; }
.auris-product-wa svg { width: 18px; height: 18px; }

.auris-product-trust {
  display: grid;
  gap: 9px;
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: var(--auris-radius);
  background: var(--auris-cream);
  list-style: none;
}
.auris-product-trust li { position: relative; padding-left: 22px; font-size: 15px; }
.auris-product-trust li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--auris-gold);
}

.woocommerce div.product .product_meta { font-size: 14px; color: var(--auris-muted); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 26px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 26px;
  padding: 0;
  border-bottom: 1px solid var(--auris-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  color: var(--auris-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--auris-wood);
  border-bottom-color: var(--auris-gold);
}

.woocommerce-Tabs-panel { max-width: 78ch; font-size: 16px; line-height: 1.8; }
.woocommerce-Tabs-panel > h2:first-child { display: none; }
.woocommerce-Tabs-panel h2 { margin: 28px 0 10px; font-size: 21px; }
.woocommerce-Tabs-panel ul { padding-left: 20px; }
.woocommerce-Tabs-panel li { margin-bottom: 7px; }

/* Related */
.woocommerce .related, .woocommerce .upsells { grid-column: 1 / -1; margin-top: 60px; }
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  margin-bottom: 28px;
  font-family: var(--font-heading-family);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: center;
}

@media (max-width: 899px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Cart & checkout
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--auris-line);
  border-radius: var(--auris-radius);
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce table.shop_table th {
  color: var(--auris-wood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 14px 12px; }
.woocommerce table.cart img { width: 72px; border-radius: 4px; }

.woocommerce .cart_totals,
.woocommerce-checkout #payment {
  padding: 24px;
  border-radius: var(--auris-radius);
  background: var(--auris-cream);
}

.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--auris-line); }
.woocommerce-checkout #payment div.payment_box {
  border-radius: 4px;
  background: var(--auris-cream-soft);
  color: var(--auris-ink);
  font-size: 15px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--auris-cream-soft); }

.auris-cod-note {
  padding: 13px 16px;
  margin-bottom: 16px;
  border-left: 3px solid var(--auris-gold);
  background: var(--auris-cream);
  color: var(--auris-ink);
  font-size: 15px;
}

.woocommerce #payment #place_order,
.woocommerce-checkout .wc-proceed-to-checkout a.button { width: 100%; }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  margin: 0 0 18px;
  font-family: var(--font-heading-family);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--auris-gold);
  border-radius: var(--auris-radius);
  background: var(--auris-cream);
  color: var(--auris-ink);
  font-size: 15px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--auris-gold-dark); }
.woocommerce-error { border-top-color: #b4432a; }
.woocommerce-error::before { color: #b4432a; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 42px;
  padding: 10px;
  border: 1px solid var(--auris-line);
  border-radius: 4px;
  color: var(--auris-wood);
  font-size: 15px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--auris-wood);
  border-color: var(--auris-wood);
  color: #fffaf1;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: 20px;
  color: var(--auris-muted);
  font-size: 14px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--auris-gold-dark); text-decoration: none; }

/* --------------------------------------------------------------------------
   Pages & rich text
   -------------------------------------------------------------------------- */

.auris-page { max-width: 820px; }
.auris-richtext { font-size: 17px; line-height: 1.8; color: var(--auris-ink); }
.auris-richtext h2 { margin: 32px 0 10px; font-size: clamp(22px, 2.4vw, 31px); }
.auris-richtext h3 { margin: 24px 0 8px; font-size: 20px; }
.auris-richtext ul, .auris-richtext ol { padding-left: 22px; }
.auris-richtext li { margin-bottom: 8px; }
.auris-richtext a { color: var(--auris-gold-dark); }

.auris-searchform { display: flex; gap: 10px; max-width: 520px; margin-bottom: 30px; }
.auris-searchform input[type="search"] { flex: 1; }

.auris-entry { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--auris-line); }

/* ==========================================================================
   Fixes — v1.1
   ========================================================================== */

/* --- Trust bar: keep all four benefits on one row --------------------------
   The original Shopify CSS was written for 3 blocks; the section has 4. */
@media (min-width: 900px) {
  .auris-trust__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Shop archive toolbar --------------------------------------------------
   WooCommerce floats the result count and the sort dropdown, which pushed the
   product grid up alongside them. Float them off, lay them out as a row. */
.auris-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--auris-line);
}
.woocommerce .auris-shop-toolbar .woocommerce-result-count,
.woocommerce .auris-shop-toolbar .woocommerce-ordering {
  float: none !important;
  margin: 0 !important;
}
.woocommerce .woocommerce-ordering select { min-width: 210px; }

/* --- Single product: two real columns --------------------------------------
   WooCommerce's own stylesheet sets width:48% + float on these, which shrank
   them inside our grid cells. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Summary follows you down the stacked gallery, as on the original. */
@media (min-width: 900px) {
  .woocommerce div.product .summary {
    position: sticky;
    top: calc(var(--header-height, 80px) + 24px);
  }
}

/* --- Stacked gallery, matching the original's "stacked" media layout ------- */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  display: grid;
  gap: 14px;
  margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image {
  margin: 0;
  border-radius: var(--auris-radius);
  overflow: hidden;
  background: var(--auris-cream);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}
.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .flex-direction-nav { display: none !important; }

/* --- Buttons: WooCommerce's ".alt" class was overriding the brand style ---- */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--auris-wood);
  border: 1px solid var(--auris-wood);
  border-radius: var(--auris-radius-sm);
  color: var(--auris-paper);
  font-family: var(--font-ui, var(--font-body-family));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .035em;
  min-height: 50px;
  padding: 13px 24px;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--auris-gold-dark);
  border-color: var(--auris-gold-dark);
  color: #fff;
}
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled { background: var(--auris-muted); border-color: var(--auris-muted); }

/* --- Confidence block: full width under the two columns ------------------- */
.woocommerce div.product .auris-confidence,
.woocommerce div.product .auris-size-chart { grid-column: 1 / -1; }
.auris-confidence__benefits { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 749px) {
  .auris-confidence__benefits { grid-template-columns: 1fr; }
  .auris-confidence__benefit { border-right: 0; border-bottom: 1px solid var(--auris-line); }
}

/* ==========================================================================
   Fixes — v1.2
   The two-column area now has its own wrapper (.auris-product-top), so the
   sticky summary is constrained to it and can no longer overlap the tabs,
   related products or the FAQ block below.
   ========================================================================== */

.woocommerce div.product {
  display: block;
}

.auris-product-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 72px);
}

@media (min-width: 900px) {
  .auris-product-top .summary {
    position: sticky;
    top: calc(var(--header-height, 80px) + 24px);
  }
}

@media (max-width: 899px) {
  .auris-product-top { grid-template-columns: 1fr; }
  .auris-product-top .summary { position: static; }
}

/* These no longer need to span grid columns — they're block-level siblings. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .auris-confidence,
.woocommerce div.product .auris-size-chart {
  grid-column: auto;
  clear: both;
}

/* Add to cart was rendering dark-on-dark: WooCommerce's own colour rule was
   winning on the single-product button. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt {
  color: var(--auris-paper) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button.alt:hover {
  color: #fff !important;
}

/* Add to cart — explicit colour so it can never fall back to inherited ink. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt { color: #fffaf1 !important; }

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { color: #ffffff !important; }