/**
 * Neutral WooCommerce presentation for the MRN parent theme.
 *
 * This file intentionally styles public WooCommerce surfaces without copying
 * plugin templates. Site-specific branding belongs in the active child theme.
 */

.woocommerce-shell,
.mrn-woocommerce .entry-content {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 80rem);
  margin-inline: auto;
}

.woocommerce-layout {
  display: grid;
  grid-template-areas:
    "sidebar"
    "content";
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.woocommerce-layout__content {
  min-width: 0;
  grid-area: content;
}

[dir="rtl"] .woocommerce-layout {
  direction: ltr;
}

[dir="rtl"] .woocommerce-layout > * {
  direction: rtl;
}

.shop-filters {
  display: grid;
  grid-area: sidebar;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
  background: var(--wp--preset--color--canvas, #fff);
}

.shop-filters__title,
.shop-filters__widget-title {
  margin-block: 0;
}

.shop-filters__title {
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--mrn-border-color);
  font-size: 1.15rem;
}

.shop-filters__widget {
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--mrn-border-color);
}

.shop-filters__widget:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.shop-filters__widget-title {
  margin-block-end: 0.7rem;
  font-size: 0.95rem;
}

.shop-filters ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.shop-filters li {
  padding-block: 0.3rem;
}

.shop-filters a {
  color: inherit;
  text-decoration: none;
}

.shop-filters a:hover,
.shop-filters a:focus-visible {
  color: var(--wp--preset--color--accent, #2457d6);
}

.shop-filters .price_slider_wrapper .ui-widget-content {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}

.shop-filters .price_slider_wrapper .ui-slider .ui-slider-range,
.shop-filters .price_slider_wrapper .ui-slider .ui-slider-handle {
  background-color: var(--wp--preset--color--accent, #2457d6);
}

.shop-filters .price_slider_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-align: start;
}

.shop-filters .price_slider_amount .button {
  float: none;
}

@media (min-width: 64.0625rem) {
  .woocommerce-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-areas: "content sidebar";
  }

  .woocommerce-layout__content .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-filters {
    position: sticky;
    inset-block-start: 1.5rem;
  }
}

.woocommerce .woocommerce-breadcrumb {
  margin-block-end: 1.5rem;
  color: var(--wp--preset--color--muted, #626970);
  font-size: 0.875rem;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-block-end: 1.5rem;
}

/* Custom caret is a single, sized SVG so it can never tile or fill the box. */
.woocommerce .woocommerce-ordering select,
.woocommerce select,
.mrn-woocommerce select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.5rem;
  max-width: 100%;
  padding-block: 0.4rem;
  padding-inline: 0.75rem 1.9rem;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
  color: inherit;
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
  background:
    var(--wp--preset--color--canvas, #fff)
    var(--mrn-select-caret, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23808080' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"))
    no-repeat right 0.7rem center / 0.6rem auto;
}

[dir="rtl"] .woocommerce .woocommerce-ordering select,
[dir="rtl"] .woocommerce select,
[dir="rtl"] .mrn-woocommerce select {
  background-position: left 0.7rem center;
}

.woocommerce select::-ms-expand {
  display: none;
}

.woocommerce ul.products {
  display: grid;
  clear: both;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0;
  margin-block: 2rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  position: relative;
  float: none;
  width: auto;
  padding: 0.6rem;
  margin: 0;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
  background: var(--wp--preset--color--canvas, #fff);
}

/* WooCommerce sizes grid items with a percentage width keyed off the
 * `columns-N` class. That fights the CSS grid (each card ends up a fraction of
 * its track), so neutralise it and let the grid own the columns. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: auto;
  margin: 0;
}

.woocommerce ul.products li.product a img {
  margin-block-end: 0.6rem;
  border-radius: calc(var(--mrn-radius) * 0.8);
  aspect-ratio: 1;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin-block: 0.75rem 0.35rem;
  color: var(--wp--preset--color--contrast, #17191c);
  font-size: 1.05rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wp--preset--color--accent, #2457d6);
  font-weight: 700;
}

.woocommerce span.onsale {
  inset-block-start: 0.75rem;
  inset-inline: 0.75rem auto;
  min-width: auto;
  min-height: auto;
  padding: 0.35rem 0.65rem;
  margin: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--accent, #2457d6);
  color: var(--wp--preset--color--canvas, #fff);
  font-size: 0.75rem;
  line-height: 1.4;
}

/*
 * WooCommerce ships its own button colors under selectors like
 * `.woocommerce a.button.alt` (its default mauve, specificity 0,3,1). The
 * `.woocommerce` class sits on <body>, so a `body .woocommerce ...` selector
 * never matches it (descendant combinator). Doubling the class
 * (`.woocommerce.woocommerce`) matches the body class and outranks the plugin
 * default without !important. The `woocommerce-block-theme-has-button-styles`
 * body class (added in inc/woocommerce.php) also disables those defaults for
 * block cart/checkout surfaces.
 */
.woocommerce.woocommerce a.button,
.woocommerce.woocommerce button.button,
.woocommerce.woocommerce input.button,
.woocommerce.woocommerce #respond input#submit,
.wc-block-components-button.wc-block-components-button {
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--mrn-radius);
  background: var(--wp--preset--color--accent, #2457d6);
  color: var(--wp--preset--color--canvas, #fff);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce.woocommerce a.button:hover,
.woocommerce.woocommerce a.button:focus-visible,
.woocommerce.woocommerce button.button:hover,
.woocommerce.woocommerce button.button:focus-visible,
.woocommerce.woocommerce input.button:hover,
.woocommerce.woocommerce input.button:focus-visible,
.woocommerce.woocommerce #respond input#submit:hover,
.woocommerce.woocommerce #respond input#submit:focus-visible,
.wc-block-components-button.wc-block-components-button:hover,
.wc-block-components-button.wc-block-components-button:focus-visible {
  filter: brightness(0.9);
  background: var(--wp--preset--color--accent, #2457d6);
  color: var(--wp--preset--color--canvas, #fff);
}

.woocommerce.woocommerce a.button.alt,
.woocommerce.woocommerce button.button.alt,
.woocommerce.woocommerce input.button.alt {
  background: var(--wp--preset--color--contrast, #17191c);
}

.woocommerce.woocommerce a.button.disabled,
.woocommerce.woocommerce button.button.disabled,
.woocommerce.woocommerce button.button:disabled,
.woocommerce.woocommerce input.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce div.product div.images img {
  border-radius: var(--mrn-radius);
}

.woocommerce div.product .product_title {
  margin-block-start: 0;
}

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.woocommerce .quantity .qty {
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
  width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  border-block-end: 1px solid var(--mrn-border-color);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0.75rem 1rem;
}

.woocommerce :where(.woocommerce-error, .woocommerce-info, .woocommerce-message),
.wc-block-components-notice-banner {
  padding: 1rem 1.25rem;
  border: 1px solid var(--mrn-border-color);
  border-block-start: 0;
  border-inline-start: 0.3rem solid var(--wp--preset--color--accent, #2457d6);
  border-radius: var(--mrn-radius);
  background: var(--wp--preset--color--surface, #f5f6f7);
  color: var(--wp--preset--color--contrast, #17191c);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  min-height: 2.75rem;
  padding: 0.75rem;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
  background: var(--wp--preset--color--canvas, #fff);
  color: inherit;
}

.woocommerce form .form-row label {
  display: block;
  margin-block-end: 0.35rem;
  font-weight: 600;
}

.woocommerce table.shop_table {
  border-color: var(--mrn-border-color);
  border-radius: var(--mrn-radius);
}

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

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: none;
  width: min(100%, 34rem);
  margin-inline-start: auto;
}

/* The My Account page renders through the normal page template, so its article
 * is otherwise capped at content-size (45rem). Give it more usable width. */
.woocommerce-account .site-main > .entry--page {
  width: 100%;
}

/* My Account as a mini dashboard: navigation sidebar + content panel.
 * The :has() guard keeps the grid off the logged-out login/register layout
 * (no account nav); unsupported browsers fall back to a simple stack. Explicit
 * row/column placement keeps nav and content aligned regardless of any notice
 * wrapper that WooCommerce prints first. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

@media (min-width: 48rem) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 2;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 2;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  margin: 0;
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--mrn-radius);
  color: inherit;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--wp--preset--color--accent, #2457d6);
  color: var(--wp--preset--color--canvas, #fff);
}

/* Per-item icons (monochrome glyphs). */
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  flex: 0 0 auto;
  width: 1.2rem;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  content: "\25C6";
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\25A6"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\25A4"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\25BE"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\2302"; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\25AD"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\270E"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\2192"; }

/* Remove the default WooCommerce form borders, which are redundant with the
 * card-style content panel. */
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register{
  border: 0px !important;
}
/* Content panel. */
.woocommerce-account .woocommerce-MyAccount-content {
  padding: clamp(0.9rem, 2vw, 1.35rem);
  border: 1px solid var(--mrn-border-color);
  border-radius: var(--mrn-radius);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
  margin-block-start: 0;
}

/* Mobile: the navigation collapses behind a toggle and opens as a dropdown. */
.account-nav-toggle {
  display: none;
}

@media (max-width: 47.99rem) {
  .is-account-enhanced .account-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--mrn-border-color);
    border-radius: var(--mrn-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.6rem;
  }

  .is-account-enhanced .account-nav-toggle__icon {
    font-size: 1.1rem;
  }

  .is-account-enhanced .woocommerce-MyAccount-navigation {
    display: none;
    margin-block-start: 0.5rem;
  }

  .is-account-enhanced .woocommerce-MyAccount-navigation[data-open="true"] {
    display: block;
  }
}

@media (max-width: 64rem) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  /* Two columns stay the theme default on phones. */
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* -------------------------------------------------------------------------
 * My Account — login / register card (logged out).
 *
 * A single, centred authentication card. Without JS both panels render and
 * stay usable; auth.js adds `.is-enhanced` and toggles panels via `[hidden]`.
 * ---------------------------------------------------------------------- */
.mrn-auth {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  margin-block: clamp(1rem, 4vw, 2.5rem);
}

.mrn-auth__card {
  padding: clamp(1.4rem, 4vw, 2.25rem) 0;
  border: 1px solid var(--mrn-border-color);
  border-radius: calc(var(--mrn-radius) * 2.5);
  background: var(--wp--preset--color--canvas, #fff);
  box-shadow: var(--mrn-shadow);
}

.mrn-auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-block-end: 1.1rem;
  margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--accent, #2457d6) 12%, transparent);
  color: var(--wp--preset--color--accent, #2457d6);
}

.mrn-auth__header {
  margin-block-end: 1.4rem;
  text-align: center;
}

.mrn-auth__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.6rem);
}

.mrn-auth__lead {
  margin-block: 0.35rem 0;
  color: var(--wp--preset--color--muted, #626970);
  font-size: 0.95rem;
}

/* The card owns row spacing so WooCommerce's default margins stay predictable. */
.mrn-auth .woocommerce-form-row,
.mrn-auth .form-row {
  margin-block: 0 1rem;
  padding: 0;
}

.mrn-auth .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
}

.mrn-auth .woocommerce-form-login__rememberme input {
  min-height: 0;
}

.mrn-auth .woocommerce-form-login__submit,
.mrn-auth .woocommerce-form-register__submit {
  width: 100%;
  margin-block-start: 0.35rem;
}

.mrn-auth .woocommerce-LostPassword {
  margin-block: 0.9rem 0;
  font-size: 0.9rem;
  text-align: center;
}

/* Switch action: a soft divider, prompt text, and a link-styled button. */
.mrn-auth__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin-block-start: 1.4rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--mrn-border-color);
  font-size: 0.95rem;
}

.mrn-auth__switch-text {
  color: var(--wp--preset--color--muted, #626970);
}

.mrn-auth__switch-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--accent, #2457d6);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mrn-auth__switch-button:hover,
.mrn-auth__switch-button:focus-visible {
  text-decoration-thickness: 0.12em;
}

/* No-JS fallback: separate the two stacked panels with clear spacing. */
.mrn-auth:not(.is-enhanced) .mrn-auth__panel--register {
  margin-block-start: 1.75rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--mrn-border-color);
}

/* Enhanced: only the active panel is shown; enforce over any [hidden] resets. */
.mrn-auth.is-enhanced .mrn-auth__panel[hidden] {
  display: none;
}

.mrn-auth.is-enhanced .mrn-auth__panel {
  animation: mrn-auth-fade 0.28s ease;
}

@keyframes mrn-auth-fade {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mrn-auth.is-enhanced .mrn-auth__panel {
    animation: none;
  }
}