/* ==========================================================================
   Pet Saze — shop
   Loaded on WooCommerce pages and the front page. The shop reads cool: its
   ground is white, like the rest of v2 — the shop no longer has a ground
   colour of its own.

   Woo's own stylesheets are dropped on the catalogue and kept on cart,
   checkout and account (see inc/woocommerce.php), so nothing below tries to
   restyle a checkout field.
   ========================================================================== */

/* ----------------------------------------------------------- Product card */

/* The product card moved to petsaze.css, the always-loaded sheet.

   It is not a shop component: the front page draws it, and so does the product
   rail inside an article — and an article loads magazine.css, not this file.
   The result was a rail of cards on every article with no card styles at all,
   most visibly a colour-swatch <ul> falling back to browser bullets. Same trap
   the header chrome fell into: a component drawn outside this sheet's pages
   cannot be styled from inside it. */

/* --------------------------------------------------------- Catalogue page */

/* Filters on the leading side, grid on the trailing side. 248px is the width
   the comp gives the sidebar; the grid takes what is left, which at a 1280
   container leaves four columns of ~232. */
.shop-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.shop-layout__main { min-width: 0; }

.shop-filters {
  position: sticky;
  top: calc(var(--chrome-h) + var(--s4));
  padding: var(--s4);
  border: var(--card-border);
  border-radius: var(--r-card);
  background: var(--paper);
}
.shop-filters__title {
  margin: 0 0 var(--s4);
  font-size: var(--t-md);
  line-height: 1.625;
  font-weight: 500;
}

.filter-group + .filter-group,
.shop-filters__form .filter-group:first-child {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.filter-group__title {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  line-height: 1.857;
  font-weight: 500;
  color: var(--ink);
}

.filter-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.filter-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 6px var(--s2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  line-height: 1.846;
  color: var(--ink-soft);
  text-decoration: none;
}
.filter-list__link:hover { background: var(--mist); color: var(--ink); }
.filter-list__link.is-active { background: var(--brand-surface); color: var(--ink); font-weight: 500; }
.filter-list__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.filter-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s2);
  font-size: var(--t-xs);
  line-height: 1.846;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-check:hover { color: var(--ink); }
.filter-check input { flex: none; margin: 0; }

.filter-price { display: flex; align-items: center; gap: var(--s2); }
.filter-price label { flex: 1; min-width: 0; }
.filter-price input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s2);
  font-size: var(--t-xs);
}
.filter-price__dash { color: var(--ink-muted); }
.filter-price__note { margin: var(--s1) 0 0; font-size: var(--t-xxs); color: var(--ink-muted); }

.shop-filters__form .btn { margin-top: var(--s4); }
.shop-filters__clear {
  display: block;
  margin-top: var(--s2);
  text-align: center;
  font-size: var(--t-xxs);
  color: var(--ink-muted);
}

/* Under 1000px the sidebar stops being a column and becomes a disclosure
   above the grid: a 248px rail beside two cards leaves neither enough room. */
@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; gap: var(--s5); }
  /* A grid item will not shrink below its content unless it is told to, so
     the horizontal filter row below pinned the whole layout to the width of
     its longest run of chips and pushed the page into a sideways scroll. */
  .shop-filters { position: static; min-width: 0; }
  .shop-filters .filter-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    min-width: 0;
    gap: var(--s2);
    padding-bottom: var(--s1);
    scrollbar-width: thin;
  }
  .shop-filters .filter-group__title { margin-bottom: var(--s2); }
  .shop-filters .filter-list__link,
  .shop-filters .filter-check { white-space: nowrap; }
}

@media (max-width: 640px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .shop-filters { padding: var(--s3); }
}

/* Below 420px two cards leave nothing for the price row, so the grid drops to
   a single column rather than clipping. */
@media (max-width: 420px) {
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr; }
}


.shop-main { padding-bottom: var(--s8); }

.woocommerce-products-header { padding-block: var(--s3) 0; }
.woocommerce-products-header__title {
  margin: 0 0 var(--s1);
  font-size: var(--t-3xl);
  line-height: 1.375;
}

.woocommerce-result-count {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--t-xs);
  line-height: 1.846;
}

/* The count and the sort control were two stacked blocks with no space
   between them and none before the grid, so the toolbar read as three lines
   of debris above the products. They share one row now, with the count on the
   reading side and the control opposite it. */
.shop-layout__main {
  display: flex;
  flex-direction: column;
}
.shop-layout__main > .woocommerce-products-header { order: 0; }
.shop-layout__main > .woocommerce-result-count    { order: 1; }
.shop-layout__main > .woocommerce-ordering        { order: 1; }
.shop-layout__main > .woocommerce-notices-wrapper { order: 2; }
.shop-layout__main > ul.products                  { order: 3; }

@supports (display: grid) {
  .shop-layout__main {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: var(--s5);
    column-gap: var(--s4);
  }
  .shop-layout__main > .woocommerce-products-header,
  .shop-layout__main > .woocommerce-notices-wrapper,
  .shop-layout__main > ul.products,
  .shop-layout__main > .woocommerce-no-products-found,
  .shop-layout__main > .woocommerce-pagination { grid-column: 1 / -1; }
  .shop-layout__main > .woocommerce-result-count { grid-column: 1; margin: 0; }
  .shop-layout__main > .woocommerce-ordering     { grid-column: 2; margin: 0; justify-self: end; }
}

.woocommerce-ordering select {
  min-width: 190px;
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--t-xs);
}

/* `ul.products`, never a bare `.products`. WooCommerce marks its related and
   upsell blocks as <section class="related products">, so a selector of
   `.woocommerce .products` turned that whole section into a four-column grid
   and dropped its «محصولات مرتبط» heading into the first cell, beside the
   cards instead of above them. */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products li.product {
  margin: 0;
  width: auto;
  float: none;
  display: flex;
  list-style: none;
}
ul.products li.product > .card { flex: 1; }

ul.products .card__media { aspect-ratio: 1 / 1; }

/* Four across is the desktop target. It steps down before the cards get too
   narrow to read a two-line title and a price on one row.

   Both selectors are repeated at every breakpoint on purpose: the base rule
   above matches `.woocommerce ul.products`, which outranks a bare
   `ul.products`, so a breakpoint written with the short selector alone loses
   no matter where it sits in the file. */
@media (max-width: 1240px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px)  { ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } }

.woocommerce-no-products-found {
  padding: var(--s7);
  text-align: center;
  background: var(--mist);
  border-radius: var(--r-card);
  color: var(--ink-muted);
}

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

.single-product div.product {
  display: grid;
  /* Gallery first in the markup, so it takes column one — which in RTL is the
     right-hand column, where the comp puts it. It is the wider of the two;
     declaring 532 first gave the gallery the buy column's width and the buy
     stack the gallery's. */
  grid-template-columns: minmax(0, 700px) minmax(0, 532px);
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
  padding-block: var(--s5) var(--s8);
}

/* The blocks stacked under the gallery — tabs, upsells, related, guides —
   own their own vertical rhythm: a hairline, then 48px, then the content.
   They used to run three different values (32/32, none, 48/48) on top of the
   grid's own 48px row gap, so the space above the articles came to 96px while
   the space above the related row came to 48. Row-gap is zero here and each
   block states its spacing once. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells,
.single-product div.product > .related,
.single-product div.product > .guides {
  grid-column: 1 / -1;
  margin-top: var(--s7);
  padding-top: var(--s7);
  padding-bottom: 0;
  border-top: 1px solid var(--line);
}
.single-product div.product > .related > h2,
.single-product div.product > .upsells > h2 {
  font-size: var(--t-2xl);
  line-height: 1.429;
  margin: 0 0 var(--s5);
}

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; gap: var(--s6); }
}

.woocommerce-product-gallery { min-width: 0; }
.woocommerce-product-gallery__image img { border-radius: 12px; }
.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-thumbs img {
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
/* The selected thumbnail is marked with a charcoal ring, not an orange one:
   orange means "act", and picking a photo is not an action to sell. */
.flex-control-thumbs .flex-active { border-color: var(--ink); }

.summary .product_title {
  font-size: 1.5rem;      /* 24 */
  line-height: 1.417;     /* /34 */
  margin-bottom: var(--s4);
}

.summary .price {
  font-size: 1.625rem;    /* 26 */
  line-height: 1.385;     /* /36 */
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s5);
  display: block;
}
.summary .price del { color: var(--ink-muted); font-weight: 400; font-size: var(--t-sm); }
.summary .price ins { text-decoration: none; }

.summary .stock {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
}
.summary .stock.in-stock { color: var(--found-ink); background: var(--found-bg); }
.summary .stock.out-of-stock { color: var(--lost-ink); background: var(--lost-bg); }

.woocommerce-product-details__short-description { color: var(--ink-soft); }

/* Add to cart is the page's one primary action, so it is the orange button —
   with a charcoal label, because white on #F66F00 is 2.92:1 and fails AA
   while charcoal on it is 5.53:1 and passes. */
.single_add_to_cart_button,
.button.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 56px;
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand-btn);
  color: #fff;
  font-weight: 500;
  font-size: var(--t-md);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.single_add_to_cart_button:hover,
.button.add_to_cart_button:hover { background: var(--brand-btn-hover); color: #fff; }

.quantity input[type="number"] {
  width: 108px;
  min-height: 56px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-align: center;
}

form.cart { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s5); }

/* A variable product's form holds two block-level children — the attributes
   table and the variation wrapper. As bare flex items they shrank to their
   content, squeezing the whole buy stack into a 190px column and wrapping the
   quantity box onto its own line above the button. Both take the full row;
   the quantity and the button share one row inside the wrapper. */
form.cart > table.variations,
form.cart > .single_variation_wrap { flex: 0 0 100%; }

.woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; min-width: 200px; }

.variations { width: 100%; }
.variations td, .variations th { padding-block: var(--s2); }
.variations td.value { position: relative; }

/* «پاک کردن» sat flush against the select with no gap, so the two ran
   together — and the select's focus ring painted straight over it. It gets
   its own line under the control. */
.variations .reset_variations {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-xxs);
  color: var(--ink-muted);
  text-decoration: none;
}
.variations .reset_variations:hover { color: var(--ink); text-decoration: underline; }

/* The variation's own price replaces the «از …» range once a colour is
   chosen — two 26px prices stacked is not two pieces of information. */
.summary.has-variation > .price { display: none; }
.woocommerce-variation-price .price { font-size: 1.625rem; line-height: 1.385; font-weight: 700; color: var(--ink); }
.woocommerce-variation-price { margin-bottom: var(--s4); }
.variations th { text-align: start; padding-block: var(--s2); font-size: var(--t-sm); }
.variations select {
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.product_meta { font-size: var(--t-sm); color: var(--ink-muted); }
.product_meta a { color: var(--ink); }

/* Tabs */
.woocommerce-tabs { padding-block: 0; }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s5); padding: 0; list-style: none;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  background: var(--mist);
}
.woocommerce-tabs ul.tabs li.active a { background: var(--ink); color: #fff; }
.woocommerce-Tabs-panel { color: var(--ink-soft); line-height: 1.875; }

/* The size table. Its header sits on the neutral ground and the recommended
   row on the warm one, so the row a shopper is being pointed at is legible
   without an extra label. */
.woocommerce-Tabs-panel table,
.sizes table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-xs);
}
.woocommerce-Tabs-panel th,
.sizes th {
  background: var(--mist);
  font-weight: 500;
  color: var(--ink-soft);
  text-align: start;
  padding: var(--s3);
}
.woocommerce-Tabs-panel th:first-child, .sizes th:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.woocommerce-Tabs-panel th:last-child,  .sizes th:last-child  { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.woocommerce-Tabs-panel td, .sizes td { padding: var(--s3); border-bottom: 1px solid var(--line); }
.sizes tr.is-recommended td { background: var(--brand-surface); }

/* Sticky buy bar on small screens — the price and the action stay reachable
   while scrolling a long product page. */
.buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(31, 33, 36, .1);
}
.buybar__price { font-weight: 500; color: var(--ink); }
.buybar .btn { flex: 1; max-width: 220px; }
@media (max-width: 760px) {
  .single-product .buybar { display: flex; }
  .single-product .footer { padding-bottom: 72px; }
}

/* -------------------------------------------------- Buying-guide bridge */

/* The reverse direction of the article rail: a product page answering
   "how do I choose one of these?" before it asks for the sale. */
.guides { padding-block: 0; }

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  border-radius: var(--r-card);
  border-inline-start: 3px solid var(--ink);
  background: var(--mist);
  list-style: none;
}
.woocommerce-error { border-inline-start-color: var(--warn); }
.woocommerce-message { border-inline-start-color: var(--ok); }

/* ------------------------------------------------- Cart, checkout, account */

/* These three pages were rendering with WooCommerce's own stylesheet only —
   a purple checkout button, default table rules and Woo's grey buttons, none
   of which belong to this site. They are the last step of the funnel and the
   place a shopper is most likely to lose their nerve, so they get the same
   surfaces as everything else. */

.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
  font-size: var(--t-sm);
  line-height: 1.857;
}

/* Every WooCommerce button inherits the theme button, including the one Woo
   paints purple by default. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand-btn);
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.857;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--brand-btn-hover); color: #fff; }

/* Secondary actions — «بروزرسانی سبد خرید», «اعمال کدتخفیف» — are quieter
   than the one action the page is asking for. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce .button[disabled] {
  background: var(--mist);
  color: var(--ink);
  border-color: var(--line);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover { background: var(--brand-surface); color: var(--ink); }
.woocommerce .button[disabled] { color: var(--ink-muted); cursor: not-allowed; }

/* Tables: hairlines, no zebra, the head on the neutral ground. */
.woocommerce table.shop_table {
  width: 100%;
  border: var(--card-border);
  border-radius: var(--r-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: var(--s5);
}
.woocommerce table.shop_table th {
  background: var(--mist);
  color: var(--ink-soft);
  font-weight: 500;
  text-align: start;
  padding: var(--s3) var(--s4);
  border: 0;
}
.woocommerce table.shop_table td {
  padding: var(--s4);
  border: 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce table.shop_table img { width: 56px; border-radius: 8px; }
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.shop_table .product-remove a.remove:hover { background: var(--lost-bg); color: var(--lost-ink); }

.woocommerce .quantity input[type="number"] { min-height: 44px; width: 84px; border-radius: var(--r-pill); }

/* Totals and the order review sit in a card, not loose on the page. */
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-order,
.woocommerce-MyAccount-content {
  padding: var(--s5);
  border: var(--card-border);
  border-radius: var(--r-card);
  background: var(--paper);
}
.cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
  font-size: var(--t-xl);
  line-height: 1.545;
  font-weight: 500;
  margin: 0 0 var(--s4);
}
.cart_totals table.shop_table { border: 0; margin: 0; }
.cart_totals table.shop_table th { background: transparent; padding-inline: 0; }
.cart_totals table.shop_table td { padding-inline: 0; }
.cart_totals .order-total td { font-weight: 500; font-size: var(--t-md); }
.wc-proceed-to-checkout { margin-top: var(--s4); }
.wc-proceed-to-checkout .checkout-button { width: 100%; }

/* Cart layout: the table takes the room, the totals card sits beside it. */
@media (min-width: 901px) {
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart-form { margin-bottom: var(--s6); }
  .cart-collaterals { max-width: 420px; margin-inline-start: auto; }
}

/* Checkout: billing on the reading side, the order summary beside it. */
@media (min-width: 901px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--s6);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
}

/* Fields inherit the input spec instead of Woo's own. */
.woocommerce form .form-row { padding: 0; margin-bottom: var(--s4); }
.woocommerce form .form-row label { display: block; margin-bottom: var(--s1); font-size: var(--t-xs); color: var(--ink-soft); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--t-sm);
}
.woocommerce form .form-row textarea { padding-block: var(--s3); min-height: 96px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(246, 111, 0, .18);
  outline: none;
}

/* My account: the nav is a list of pills beside the panel.

   Only when that navigation is actually on the page. Signed out, the same
   container holds a heading and a login form and nothing else, and this grid
   dropped the heading into the 220px navigation track and the form into the
   other one — «ورود» stranded in a narrow column with its own form beside it.
   The layout belongs to the signed-in screen; it now says so. */
@media (min-width: 901px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
  }
}

/* WooCommerce clears its floats with ::before/::after on this container. Those
   generated boxes become grid items, and the first of them took the 220px
   track — so the navigation was pushed into the wide column and the dashboard
   panel wrapped onto a second row underneath it, which is the empty band the
   account screen was showing. Grid needs no clearfix. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
  display: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }

/* WooCommerce's own sheet floats these two and gives them 30% / 68% widths.
   Float is ignored on a grid item but the percentage is not, so each box sized
   itself to a fraction of the wrong track: the navigation came out 308px wide
   inside the content column and the dashboard panel 150px wide inside the
   220px one, which is why the welcome text wrapped a word to a line. The grid
   owns the columns; the items just fill them. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

/* The sign-in screen. One card at the width a short form wants, centred in the
   full container the page now gets — not stretched across it. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  max-width: 460px;
  margin-inline: auto;
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-xl);
  line-height: 1.4;
  text-align: center;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  padding: var(--s5);
  border: var(--card-border);
  border-radius: var(--r-card);
  background: var(--paper);
}
/* Only the row that carries the submit button. WooCommerce puts the
   remember-me checkbox and the button in one <p class="form-row">, and they
   were pressed against each other — but every other row in the form is a label
   stacked over its field, and making them all flex laid the password label
   beside its input and shrank the input to a stub. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.woocommerce-form-login .form-row label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
.woocommerce-form-login .lost_password { margin: var(--s4) 0 0; font-size: var(--t-xs); }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--mist); color: var(--ink); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--brand-surface); color: var(--ink); font-weight: 500; }

/* Notices pick up the status palette rather than Woo's own green/blue. */
.woocommerce-message { border-inline-start-color: var(--found); background: var(--found-bg); }
.woocommerce-info    { border-inline-start-color: var(--adopt); background: var(--adopt-bg); }
.woocommerce-error   { border-inline-start-color: var(--lost);  background: var(--lost-bg); }
.woocommerce-message a.button,
.woocommerce-info a.button { min-height: 40px; padding: 0 var(--s4); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .woocommerce table.shop_table img { width: 44px; }
  .cart-collaterals, .woocommerce-checkout-review-order, .woocommerce-MyAccount-content { padding: var(--s4); }
}

/* WooCommerce sets `width: 48%` and a float on both .cart-collaterals and the
   .cart_totals inside it, so capping the outer box at 420px left the totals
   card 48% of that — a 200px column with «جمع کل سبد خرید» wrapping onto
   three lines. The inner box fills its parent instead. */
.woocommerce .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells {
  width: 100%;
  float: none;
}
.woocommerce .cart_totals table.shop_table th { width: 45%; white-space: nowrap; }

/* WooCommerce marks required fields with `.required { color: red }` — literal
   #FF0000, 4.00:1 on white and the only colour on the site that is not a token.
   Its own selector is `.woocommerce form .form-row .required` (0,4,0), so a
   plain `.required` never reaches it; `p.form-row` adds the element that wins.
   The site's own red says the same thing and can be read. */
.woocommerce form p.form-row .required,
.woocommerce-page form p.form-row .required,
.woocommerce .required,
.woocommerce-page .required,
abbr.required,
span.required { color: var(--lost-ink); text-decoration: none; border: 0; }