/* ==========================================================================
   AMAN — WooCommerce storefront skin (wave: woo-storefront-design)

   Scope: enqueued ONLY on is_woocommerce()||is_cart()||is_checkout() pages
   (see aman_woo_enqueue_assets() in functions.php) — never loaded on any
   other page, so nothing here can affect the front pages or admin. Styles
   WooCommerce's own default markup only; no template files were copied.
   Consumes the existing --aw-* public token layer (aman-wow.css / tokens.css)
   exclusively — never --aman-* (admin-only, per that layer's own contract)
   and defines no new tokens there. A few gaps the --aw-* layer has no
   answer for (error/danger red, a subtle "sold out" tone) are scoped
   locally below with an --awc- prefix so they are obviously file-local.
   ========================================================================== */

body.woocommerce-page {
  --awc-danger:     #A23B2E;   /* warm brick red — errors, sold out. Not a generic saturated red. */
  --awc-danger-bg:  #F7E9E4;
  --awc-danger-ink: #7A2A1F;   /* AA text on --awc-danger-bg */
  padding-block: var(--aw-space-m) var(--aw-space-l);
}

body.woocommerce-page * { box-sizing: border-box; }

/* ---------- Breadcrumb — matches .aw-article__breadcrumb ---------- */
body.woocommerce-page nav.woocommerce-breadcrumb {
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--2);
  letter-spacing: .04em;
  color: var(--aw-ink-mut);
  margin-block-end: var(--aw-space-s);
  display: flex;
  flex-wrap: wrap;
  gap: .35em;
}
:lang(ar) body.woocommerce-page nav.woocommerce-breadcrumb { letter-spacing: 0; }
body.woocommerce-page nav.woocommerce-breadcrumb a {
  color: var(--aw-ink-mut);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}
body.woocommerce-page nav.woocommerce-breadcrumb a:hover,
body.woocommerce-page nav.woocommerce-breadcrumb a:focus-visible {
  color: var(--aw-green-ink);
  border-block-end-color: currentColor;
}

/* ---------- Page title (shop archive / page-title filter) ---------- */
body.woocommerce-page .woocommerce-products-header__title.page-title,
body.woocommerce-page h1.entry-title {
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step-3);
  line-height: var(--aw-lh-head);
  color: var(--aw-ink);
  margin-block: 0 var(--aw-space-m);
  text-wrap: balance;
}

/* ---------- Notices (message / error / info) ---------- */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--aw-space-m);
  padding: var(--aw-space-s) var(--aw-space-m);
  border-radius: var(--aw-r-m);
  font-size: var(--aw-step--1);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aw-space-s) var(--aw-space-m);
  box-shadow: var(--aw-sh-1);
}
body.woocommerce-page .woocommerce-message { background: var(--aw-mint); color: var(--aw-green-ink); }
body.woocommerce-page .woocommerce-info    { background: var(--aw-paper-1); color: var(--aw-ink); border: 1px solid var(--aw-line); }
body.woocommerce-page .woocommerce-error   { background: var(--awc-danger-bg); color: var(--awc-danger-ink); }
body.woocommerce-page .woocommerce-error li { margin: 0; }
body.woocommerce-page .woocommerce-message .button,
body.woocommerce-page .woocommerce-info .button {
  order: 2;
  margin-inline-start: auto;
}

/* ---------- Buttons — reuse the site's .aw-btn look on WC's own classes ---------- */
body.woocommerce-page .button,
body.woocommerce-page a.button,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button,
body.woocommerce-page #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.5em;
  min-height: 48px;
  font-family: var(--aw-font-ar);
  font-weight: 600;
  font-size: var(--aw-step-0);
  line-height: 1;
  border: 0;
  border-radius: var(--aw-r-pill);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: var(--aw-grad-cta);
  box-shadow: var(--aw-glow-green), var(--aw-sh-inset-top);
  transition: transform var(--aw-dur-1) var(--aw-ease-spring),
              box-shadow var(--aw-dur-2) var(--aw-ease-out);
}
body.woocommerce-page .button:hover,
body.woocommerce-page #place_order:hover {
  color: #fff;
  box-shadow: var(--aw-glow-green-lg), var(--aw-sh-inset-top);
  transform: translateY(-2px);
}
body.woocommerce-page .button:active,
body.woocommerce-page #place_order:active { transform: scale(.97); }
body.woocommerce-page .button.loading { opacity: .7; pointer-events: none; }
body.woocommerce-page a.remove {
  color: var(--awc-danger);
  font-size: 1.4em;
  line-height: 1;
  text-decoration: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
}
body.woocommerce-page a.remove:hover { background: var(--awc-danger-bg); }

/* ---------- Shop archive — result count + ordering ---------- */
body.woocommerce-page .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-page form.woocommerce-ordering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-s);
  margin-block-end: var(--aw-space-m);
}
body.woocommerce-page .woocommerce-result-count {
  color: var(--aw-ink-mut);
  font-size: var(--aw-step--1);
  margin: 0;
}
body.woocommerce-page select.orderby {
  font-family: var(--aw-font-ar);
  font-size: var(--aw-step--1);
  color: var(--aw-ink);
  background: var(--aw-paper-1);
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-s);
  padding: .55em 1em;
}

/* ---------- Product grid ---------- */
body.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--aw-space-m);
  list-style: none;
  margin: 0 0 var(--aw-space-l);
  padding: 0;
}
/* Two cards per row on a phone. Without this the track minimum (230px) is
   wider than the container, so auto-fill resolves to a single column and the
   customer scrolls one product at a time through the whole catalogue. */
@media (max-width: 600px) {
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aw-space-s);
  }
  /* Two cards to a 375px screen leaves ~150px of text column, where the body
     size runs a long accessory name to six lines and pushes the price below
     the fold. Step the title and button down for that width only. */
  body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
  body.woocommerce-page ul.products li.product h3.woocommerce-loop-product__title {
    font-size: var(--aw-step--1);
    line-height: 1.35;
  }
  body.woocommerce-page ul.products li.product a.add_to_cart_button,
  body.woocommerce-page ul.products li.product a.button {
    font-size: var(--aw-step--2);
    margin-inline: var(--aw-space-s);
    inline-size: calc(100% - 2 * var(--aw-space-s));
  }
  body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link > *:not(img) {
    padding-inline: var(--aw-space-s);
  }
}
/* woocommerce-smallscreen.css is still enqueued (its responsive cart table is
   worth keeping) and it puts width:48% + margin on every card below 768px,
   which would collapse the grid tracks above. Neutralise just those two rules;
   the :nth-child(2n) variant is repeated because WooCommerce's own copy of it
   outranks the plain selector. */
@media (max-width: 768px) {
  body.woocommerce-page ul.products[class*="columns-"] li.product,
  body.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
    float: none;
    clear: none;
    inline-size: auto;
    margin: 0;
  }
}
/* Column layout so the price and the add-to-cart button line up across the row
   however long a product name runs. Without it a two-line name and a six-line
   name put their buttons at different heights and the row looks unfinished. */
body.woocommerce-page ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  box-shadow: var(--aw-sh-1);
  overflow: hidden;
  transition: transform var(--aw-dur-2) var(--aw-ease-out), box-shadow var(--aw-dur-2) var(--aw-ease-out);
}
body.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--aw-sh-2);
}
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
/* Push the price to the foot of the card so it sits directly above the button
   on every card, whatever the name length above it. */
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link .price {
  margin-block-start: auto;
}
/* contain, never cover: 34 of the 40 catalogue photos are portrait, so a
   square cover crop slices the top and bottom off the product — on the Honor
   200 case it cut the brand name clean off. The tile stays square so the cards
   still line up; the photo sits inside it whole. */
body.woocommerce-page ul.products li.product img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--aw-space-xs);
  background: var(--aw-paper-sunk);
}
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link > *:not(img) {
  padding-inline: var(--aw-space-m);
}
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link > img + * {
  margin-block-start: var(--aw-space-s);
}
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link > *:not(img):last-child {
  padding-block-end: var(--aw-space-s);
}
body.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product h3.woocommerce-loop-product__title {
  font-family: var(--aw-font-ar);
  font-weight: 600;
  font-size: var(--aw-step-0);
  color: var(--aw-ink);
  margin: 0 0 .35em;
  line-height: 1.4;
}
body.woocommerce-page ul.products li.product .price {
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--aw-step-0);
  color: var(--aw-green-ink);
}
body.woocommerce-page ul.products li.product .price del {
  color: var(--aw-ink-mut);
  font-weight: 500;
  margin-inline-end: .5em;
  text-decoration-color: var(--awc-danger);
}
body.woocommerce-page ul.products li.product .price ins {
  text-decoration: none;
}
body.woocommerce-page ul.products li.product .star-rating {
  margin-block: .3em;
}
body.woocommerce-page ul.products li.product .onsale {
  position: absolute;
  inset-block-start: var(--aw-space-xs);
  inset-inline-start: var(--aw-space-xs);
  background: var(--aw-grad-cta);
  color: #fff;
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--2);
  font-weight: 700;
  letter-spacing: .04em;
  padding: .35em .8em;
  border-radius: var(--aw-r-pill);
  box-shadow: var(--aw-sh-1);
  z-index: 1;
}
:lang(ar) body.woocommerce-page ul.products li.product .onsale { letter-spacing: 0; }
body.woocommerce-page ul.products li.product.outofstock {
  opacity: .72;
}
body.woocommerce-page ul.products li.product.outofstock img { filter: grayscale(.6); }
body.woocommerce-page ul.products li.product a.add_to_cart_button,
body.woocommerce-page ul.products li.product a.button {
  margin: var(--aw-space-xs) var(--aw-space-m) 0;
  inline-size: calc(100% - 2 * var(--aw-space-m));
  min-height: 42px;
  padding: .6em 1em;
  font-size: var(--aw-step--1);
}
body.woocommerce-page ul.products li.product .stock {
  display: block;
  font-size: var(--aw-step--2);
  margin-block-start: .3em;
}
body.woocommerce-page .stock.in-stock  { color: var(--aw-green-ink); }
body.woocommerce-page .stock.out-of-stock,
body.woocommerce-page p.stock.out-of-stock { color: var(--awc-danger-ink); font-weight: 600; }

/* ---------- Pagination ---------- */
body.woocommerce-page .woocommerce-pagination {
  display: flex;
  justify-content: center;
}
body.woocommerce-page .woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: .4em;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-page .woocommerce-pagination .page-numbers li a,
body.woocommerce-page .woocommerce-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6em;
  block-size: 2.6em;
  border-radius: var(--aw-r-pill);
  color: var(--aw-ink);
  text-decoration: none;
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--1);
}
body.woocommerce-page .woocommerce-pagination .page-numbers li a:hover,
body.woocommerce-page .woocommerce-pagination .page-numbers li span.current {
  background: var(--aw-grad-cta);
  color: #fff;
  box-shadow: var(--aw-glow-green);
}

/* ==========================================================================
   Single product
   ========================================================================== */
body.woocommerce-page div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--aw-space-l);
  align-items: start;
}

body.woocommerce-page .woocommerce-product-gallery { grid-column: 1; }
body.woocommerce-page .woocommerce-product-gallery img {
  border-radius: var(--aw-r-l);
  background: var(--aw-paper-sunk);
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--aw-space-s);
}
body.woocommerce-page .flex-control-thumbs {
  display: flex;
  gap: var(--aw-space-2xs);
  list-style: none;
  padding: 0;
  margin: var(--aw-space-2xs) 0 0;
}
body.woocommerce-page .flex-control-thumbs li img {
  border-radius: var(--aw-r-s);
  cursor: pointer;
  border: 2px solid transparent;
}
body.woocommerce-page .flex-control-thumbs li img.flex-active { border-color: var(--aw-green); }

body.woocommerce-page .summary.entry-summary { grid-column: 2; }
body.woocommerce-page .summary.entry-summary h1.product_title {
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step-2);
  line-height: var(--aw-lh-head);
  color: var(--aw-ink);
  margin: 0 0 var(--aw-space-xs);
}
body.woocommerce-page .summary.entry-summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-block-end: var(--aw-space-xs);
  font-size: var(--aw-step--1);
  color: var(--aw-ink-mut);
}
body.woocommerce-page .summary.entry-summary p.price {
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--aw-step-2);
  color: var(--aw-green-ink);
  margin-block-end: var(--aw-space-s);
}
body.woocommerce-page .summary.entry-summary p.price del { color: var(--aw-ink-mut); font-weight: 500; margin-inline-end: .5em; }
body.woocommerce-page .woocommerce-product-details__short-description {
  color: var(--aw-ink);
  opacity: .85;
  line-height: var(--aw-lh-body);
  margin-block-end: var(--aw-space-m);
}
body.woocommerce-page form.cart {
  display: flex;
  align-items: center;
  gap: var(--aw-space-s);
  flex-wrap: wrap;
  margin-block-end: var(--aw-space-m);
}
body.woocommerce-page .quantity { display: inline-flex; }
body.woocommerce-page .quantity input.qty {
  inline-size: 4.5em;
  min-height: 48px;
  text-align: center;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-s);
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--aw-step-0);
  color: var(--aw-ink);
  background: var(--aw-paper-1);
}
body.woocommerce-page .product_meta {
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
  border-block-start: 1px solid var(--aw-line-soft);
  padding-block-start: var(--aw-space-s);
}
body.woocommerce-page .product_meta > span { display: block; margin-block-end: .3em; }
body.woocommerce-page .product_meta a { color: var(--aw-green-ink); text-decoration: none; }

/* Tabs (description / reviews) */
body.woocommerce-page .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-block-start: var(--aw-space-l);
}
body.woocommerce-page .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--aw-space-m);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--aw-space-m);
  border-block-end: 1px solid var(--aw-line);
}
body.woocommerce-page .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding-block: var(--aw-space-xs);
  color: var(--aw-ink-mut);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--aw-step--1);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
body.woocommerce-page .woocommerce-tabs ul.tabs li.active a {
  color: var(--aw-green-ink);
  border-block-end-color: var(--aw-green);
}
body.woocommerce-page .woocommerce-tabs .panel { color: var(--aw-ink); line-height: var(--aw-lh-body); }

/* Related products reuse the same loop styling above */
body.woocommerce-page .related.products {
  grid-column: 1 / -1;
  margin-block-start: var(--aw-space-l);
}
body.woocommerce-page .related.products > h2 {
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step-1);
  color: var(--aw-ink);
  margin: 0 0 var(--aw-space-m);
}

/* Mobile stack — must come AFTER the unconditional grid-column: 1/2
   declarations above (same specificity; last rule in source order wins,
   media-query nesting does not change that). */
@media (max-width: 780px) {
  body.woocommerce-page div.product { grid-template-columns: 1fr; }
  body.woocommerce-page .woocommerce-product-gallery,
  body.woocommerce-page .summary.entry-summary { grid-column: 1; }
}

/* ==========================================================================
   Cart
   ========================================================================== */
body.woocommerce-page table.shop_table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  overflow: hidden;
  box-shadow: var(--aw-sh-1);
  margin-block-end: var(--aw-space-m);
}
body.woocommerce-page table.shop_table th {
  text-align: start;
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--2);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aw-ink-mut);
  background: var(--aw-paper-sunk);
  padding: var(--aw-space-xs) var(--aw-space-s);
}
:lang(ar) body.woocommerce-page table.shop_table th { letter-spacing: 0; }
body.woocommerce-page table.shop_table td {
  padding: var(--aw-space-s);
  border-block-end: 1px solid var(--aw-line-soft);
  vertical-align: middle;
  color: var(--aw-ink);
}
body.woocommerce-page table.shop_table tr:last-child td { border-block-end: 0; }
body.woocommerce-page td.product-thumbnail img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
  border-radius: var(--aw-r-s);
  background: var(--aw-paper-sunk);
}
body.woocommerce-page td.product-name a { color: var(--aw-ink); font-weight: 600; text-decoration: none; }
body.woocommerce-page td.product-price,
body.woocommerce-page td.product-subtotal {
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--aw-green-ink);
  font-weight: 600;
}

body.woocommerce-page .woocommerce-cart-form .coupon {
  display: flex;
  gap: var(--aw-space-2xs);
  flex-wrap: wrap;
  align-items: center;
}
body.woocommerce-page .woocommerce-cart-form .coupon input#coupon_code {
  min-height: 46px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-s);
  padding-inline: 1em;
  font-family: var(--aw-font-ar);
  background: var(--aw-paper-1);
  color: var(--aw-ink);
}

body.woocommerce-page .cart-collaterals .cart_totals {
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  box-shadow: var(--aw-sh-1);
  padding: var(--aw-space-m);
}
body.woocommerce-page .cart_totals h2 {
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step-1);
  color: var(--aw-ink);
  margin: 0 0 var(--aw-space-s);
}
body.woocommerce-page .cart_totals table.shop_table { box-shadow: none; background: transparent; }
body.woocommerce-page .cart_totals .order-total .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--aw-green-ink);
  font-size: var(--aw-step-0);
}
body.woocommerce-page .wc-proceed-to-checkout { margin-block-start: var(--aw-space-s); }
body.woocommerce-page .wc-proceed-to-checkout .checkout-button {
  inline-size: 100%;
}

body.woocommerce-page .cart-empty {
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  padding: var(--aw-space-l) var(--aw-space-m);
  text-align: center;
  color: var(--aw-ink-mut);
  font-size: var(--aw-step-0);
}
body.woocommerce-page .return-to-shop { margin-block-start: var(--aw-space-s); text-align: center; }

/* ==========================================================================
   Checkout
   ========================================================================== */
body.woocommerce-page form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--aw-space-l);
  align-items: start;
}
body.woocommerce-page #customer_details { grid-column: 1; }
body.woocommerce-page #order_review_heading,
body.woocommerce-page #ship-to-different-address,
body.woocommerce-page .woocommerce-billing-fields h3,
body.woocommerce-page .woocommerce-additional-fields h3 {
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step-1);
  color: var(--aw-ink);
  margin: 0 0 var(--aw-space-s);
}
body.woocommerce-page .woocommerce-billing-fields__field-wrapper,
body.woocommerce-page .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aw-space-s);
}
body.woocommerce-page .form-row { margin-block-end: var(--aw-space-s); }
body.woocommerce-page .form-row.form-row-wide { grid-column: 1 / -1; }
body.woocommerce-page .form-row-first,
body.woocommerce-page .form-row-last { grid-column: span 1; }
body.woocommerce-page p.form-row label {
  display: block;
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
  margin-block-end: .3em;
}
body.woocommerce-page .form-row label .required { color: var(--awc-danger); text-decoration: none; }
body.woocommerce-page .form-row input.input-text,
body.woocommerce-page .form-row textarea,
body.woocommerce-page .form-row select,
body.woocommerce-page .select2-container .select2-selection--single {
  inline-size: 100%;
  min-height: 46px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-s);
  padding-inline: 1em;
  font-family: var(--aw-font-ar);
  font-size: var(--aw-step--1);
  background: var(--aw-paper-1);
  color: var(--aw-ink);
}
body.woocommerce-page .form-row input.input-text:focus,
body.woocommerce-page .form-row textarea:focus,
body.woocommerce-page .form-row select:focus {
  outline: 2px solid var(--aw-green);
  outline-offset: 2px;
}
body.woocommerce-page .form-row.woocommerce-invalid input.input-text {
  border-color: var(--awc-danger);
}

body.woocommerce-page #order_review {
  grid-column: 2;
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  box-shadow: var(--aw-sh-1);
  padding: var(--aw-space-m);
  position: sticky;
  inset-block-start: var(--aw-space-m);
}
body.woocommerce-page #order_review table.shop_table { box-shadow: none; }

body.woocommerce-page ul.wc_payment_methods {
  list-style: none;
  margin: var(--aw-space-s) 0 0;
  padding: 0;
}
body.woocommerce-page ul.wc_payment_methods li.wc_payment_method {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-m);
  padding: var(--aw-space-s);
  margin-block-end: var(--aw-space-2xs);
}
body.woocommerce-page ul.wc_payment_methods li.wc_payment_method label {
  font-weight: 600;
  color: var(--aw-ink);
  display: flex;
  align-items: center;
  gap: .6em;
}
body.woocommerce-page ul.wc_payment_methods .payment_box {
  margin-block-start: var(--aw-space-xs);
  padding: var(--aw-space-xs) var(--aw-space-s);
  background: var(--aw-paper-sunk);
  border-radius: var(--aw-r-s);
  font-size: var(--aw-step--1);
  color: var(--aw-ink-mut);
}
body.woocommerce-page #place_order { inline-size: 100%; margin-block-start: var(--aw-space-s); }

/* Mobile stack — must come AFTER the unconditional grid-column: 1/2
   declarations above (same specificity; last rule in source order wins,
   media-query nesting does not change that). */
@media (max-width: 900px) {
  body.woocommerce-page form.checkout { grid-template-columns: 1fr; }
  body.woocommerce-page #customer_details,
  body.woocommerce-page #order_review { grid-column: 1; }
  body.woocommerce-page #order_review { position: static; }
}

/* ==========================================================================
   Layout that woocommerce-layout.css used to supply

   That stylesheet is now dropped in aman_woo_drop_layout_stylesheet()
   (functions.php): it laid the storefront out with floats and percentage
   widths, and because everything above is CSS Grid, those percentages resolved
   against the grid track instead of the old float container and collapsed the
   contents — product cards to 58px, checkout name fields to 36px. The grid
   above replaces it for the archive, the product page and the checkout. These
   are the remaining regions it also owned, rebuilt without floats.
   ========================================================================== */

/* WooCommerce's legacy clearfix pseudo-elements are `content:" "; display:table`
   on containers that are now grid or flex, where they stop being invisible and
   become real items occupying a cell each. On the shop archive that cost the
   first row a product (three cards in a four-column row, four in every row
   after). Verified live before and after. */
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
body.woocommerce-page .cart-collaterals::before,
body.woocommerce-page .cart-collaterals::after,
body.woocommerce-page .woocommerce-tabs ul.tabs::before,
body.woocommerce-page .woocommerce-tabs ul.tabs::after,
body.woocommerce-page table.cart td.actions .coupon::before,
body.woocommerce-page table.cart td.actions .coupon::after {
  display: none;
}

/* Shop toolbar — result count then sort control, stacked rather than floated
   against each other so the sort stays reachable on a phone. */
body.woocommerce-page .woocommerce-result-count { margin-block-end: var(--aw-space-2xs); }
body.woocommerce-page form.woocommerce-ordering { justify-content: flex-end; }

/* Cart totals — a card of readable width, not a full-bleed table. */
body.woocommerce-page .cart-collaterals {
  display: grid;
  justify-content: end;
  margin-block-start: var(--aw-space-m);
}
body.woocommerce-page .cart-collaterals .cart_totals { inline-size: min(420px, 100%); }

/* Coupon row — the dropped sheet pinned the field to 80px, which clipped the
   Arabic placeholder to "رمز القسي". */
body.woocommerce-page table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--aw-space-s);
}
body.woocommerce-page table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aw-space-2xs);
}
body.woocommerce-page table.cart td.actions .coupon .input-text { inline-size: min(240px, 100%); }

/* My account — signed-in view is a sidebar plus panel; the signed-out view is
   just the login form, so it must not be squeezed into the sidebar column. */
body.woocommerce-page.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--aw-space-l);
  align-items: start;
}
body.woocommerce-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--aw-space-2xs);
}
body.woocommerce-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--aw-space-xs) var(--aw-space-s);
  border-radius: var(--aw-r-s);
  color: var(--aw-ink);
  text-decoration: none;
  font-size: var(--aw-step--1);
}
body.woocommerce-page .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-page .woocommerce-MyAccount-navigation li a:hover {
  background: var(--aw-paper-1);
  color: var(--aw-green-ink);
}
body.woocommerce-page .woocommerce-form-login,
body.woocommerce-page .woocommerce-form-register {
  inline-size: min(460px, 100%);
  background: var(--aw-paper-1);
  border-radius: var(--aw-r-l);
  box-shadow: var(--aw-sh-1);
  padding: var(--aw-space-m);
}
@media (max-width: 780px) {
  body.woocommerce-page.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Store chrome — navigation, search, cart, chips, reassurance

   Inside the shop the site's header stops being a repair-shop header and
   becomes a store's: the catalogue replaces the section links, search takes
   the widest slot, and the basket is permanently in reach. Motion follows the
   same signature as the rest of the skin (--aw-dur-*/--aw-ease-out); nothing
   here animates on a keyboard-repeated action.
   ========================================================================== */

/* ---------- Search ---------- */
.aman-store-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 clamp(180px, 26vw, 380px);
  min-inline-size: 0;
}
.aman-store-search__label,
.aman-store-search__submit { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aman-store-search__icon {
  position: absolute;
  inset-inline-start: 12px;
  display: flex;
  color: var(--aw-ink-mut);
  pointer-events: none;
}
.aman-store-search__input {
  inline-size: 100%;
  min-height: 42px;
  padding-inline: 38px 14px;
  font-family: var(--aw-font-ar);
  font-size: var(--aw-step--1);
  color: var(--aw-ink);
  background: var(--aw-paper-1);
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-pill);
  transition: border-color var(--aw-dur-2) var(--aw-ease-out), box-shadow var(--aw-dur-2) var(--aw-ease-out);
}
.aman-store-search__input::placeholder { color: var(--aw-ink-mut); opacity: .85; }
.aman-store-search__input:focus-visible {
  outline: none;
  border-color: var(--aw-green);
  box-shadow: 0 0 0 3px rgba(31, 74, 46, 0.14);
}

/* ---------- Cart button ---------- */
.aman-store-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 10px 16px;
  border-radius: var(--aw-r-pill);
  font-family: var(--aw-font-ar);
  font-weight: 700;
  font-size: var(--aw-step--1);
  color: #fff;
  background: var(--aw-grad-cta, var(--aw-green));
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--aw-sh-1);
  transition: transform var(--aw-dur-1, 160ms) var(--aw-ease-out), box-shadow var(--aw-dur-2) var(--aw-ease-out);
}
.aman-store-cart:hover { box-shadow: var(--aw-sh-2); }
.aman-store-cart:active { transform: scale(0.97); }
.aman-store-cart__icon { display: flex; }
.aman-store-cart__count {
  min-inline-size: 1.5em;
  padding-inline: .35em;
  text-align: center;
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--aw-step--2);
  line-height: 1.5em;
  color: var(--aw-green-ink);
  background: #fff;
  border-radius: var(--aw-r-pill);
  /* Scale rather than appear from nothing, and never from 0 — an empty badge
     still has shape, so the first item landing in the basket reads as growth. */
  transition: transform var(--aw-dur-2) var(--aw-ease-out), opacity var(--aw-dur-2) var(--aw-ease-out);
}
.aman-store-cart__count.is-empty {
  transform: scale(0.6);
  opacity: 0;
  min-inline-size: 0;
  padding-inline: 0;
}

/* ---------- Store nav ---------- */
.aman-header__nav ul.aman-store-nav .aman-store-nav__group {
  padding: 10px 14px 4px;
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
  letter-spacing: .04em;
}
:lang(ar) .aman-header__nav ul.aman-store-nav .aman-store-nav__group { letter-spacing: 0; }
.aman-header__nav ul.aman-store-nav .aman-store-nav__item--back a {
  color: var(--aw-ink-mut);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* On a wide screen the header keeps only wayfinding — all products, and the
   way back to the repair side. The categories themselves live in the chip row
   directly below, where they carry their counts and mark the current one;
   listing all thirteen up here as well pushed the header 232px past the page
   and squeezed the search field to 54px. Both reference stores do the same:
   a calm header, a category row under it.
   Below 1024px the menu is a vertical dropdown with room to spare, so the full
   catalogue stays in it — that is what the "الفئات" tab in the action bar and
   the hamburger both open. */
@media (min-width: 1024px) {
  .aman-header__nav ul.aman-store-nav .aman-store-nav__group,
  .aman-header__nav ul.aman-store-nav .aman-store-nav__item:not(:first-child):not(.aman-store-nav__item--back) {
    display: none;
  }
  .aman-store-search--header { min-inline-size: 220px; }
}
/* WhatsApp steps back to a quiet button in the shop so the basket is the only
   loud thing in the header — one primary action per page. Two equally green
   CTAs side by side split the customer's attention exactly where it should be
   on buying.
   `!important` is required, not sloppiness: aman-wow.css declares
   `.aw-header .aman-header__wa { background: var(--aw-grad-cta) !important }`,
   and that file is claimed by another wave, so it is overridden here rather
   than edited there. */
.aw-header .aman-header__wa.is-secondary-in-store {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--aw-line);
  box-shadow: none !important;
}
/* The label and the icon are addressed directly: something further up the
   cascade pins the button element's own colour to white, and on a now
   transparent background that would render the button invisible. */
.aw-header .aman-header__wa.is-secondary-in-store,
.aw-header .aman-header__wa.is-secondary-in-store span,
.aw-header .aman-header__wa.is-secondary-in-store svg {
  color: var(--aw-green-ink) !important;
  fill: currentColor;
}
.aw-header .aman-header__wa.is-secondary-in-store:hover {
  border-color: var(--aw-green);
}

/* ---------- Category chips ---------- */
.aman-store-chips {
  display: grid;
  gap: var(--aw-space-2xs);
  margin-block-end: var(--aw-space-m);
}
.aman-store-chips__row {
  display: flex;
  align-items: center;
  gap: var(--aw-space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
}
.aman-store-chips__row::-webkit-scrollbar { display: none; }
.aman-store-chips__legend {
  flex: none;
  font-family: var(--aw-font-mono, monospace);
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
  padding-inline-end: .3em;
}
.aman-store-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 7px 14px;
  border-radius: var(--aw-r-pill);
  border: 1px solid var(--aw-line);
  background: var(--aw-paper-1);
  color: var(--aw-ink);
  font-size: var(--aw-step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--aw-dur-2) var(--aw-ease-out), color var(--aw-dur-2) var(--aw-ease-out), border-color var(--aw-dur-2) var(--aw-ease-out);
}
.aman-store-chip:active { transform: scale(0.97); }
.aman-store-chip__n {
  font-family: var(--aw-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
}
.aman-store-chip.is-current,
.aman-store-chip:hover {
  background: var(--aw-green);
  border-color: var(--aw-green);
  color: #fff;
}
.aman-store-chip.is-current .aman-store-chip__n,
.aman-store-chip:hover .aman-store-chip__n { color: rgba(255, 255, 255, 0.82); }

/* ---------- Low stock ---------- */
body.woocommerce-page ul.products li.product .aman-store-lowstock {
  margin: .2em 0 0;
  font-size: var(--aw-step--2);
  font-weight: 700;
  color: var(--awc-danger-ink);
}

/* ---------- Reassurance ---------- */
.aman-store-reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--aw-space-s);
  margin-block: var(--aw-space-l);
  padding-block-start: var(--aw-space-m);
  border-block-start: 1px solid var(--aw-line-soft);
}
.aman-store-reassure__item {
  display: grid;
  gap: .25em;
  align-content: start;
  padding: var(--aw-space-s);
  border-radius: var(--aw-r-m);
  background: var(--aw-paper-1);
  color: inherit;
  text-decoration: none;
}
.aman-store-reassure__item strong {
  font-family: var(--aw-font-ar);
  font-size: var(--aw-step--1);
  color: var(--aw-green-ink);
}
.aman-store-reassure__item span {
  font-size: var(--aw-step--2);
  color: var(--aw-ink-mut);
  line-height: var(--aw-lh-body);
}
a.aman-store-reassure__item { transition: box-shadow var(--aw-dur-2) var(--aw-ease-out); }
a.aman-store-reassure__item:hover { box-shadow: var(--aw-sh-1); }

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
  /* Search drops onto its own line under the header row. The header is
     flex-wrap: nowrap with a hard 56px height, so without both overrides the
     search shrank to 54px and the wrapped row spilled out of the header and
     printed on top of the page title. Scoped to store pages, so the repair
     header keeps its single-row layout exactly as it was. */
  body.woocommerce-page .aman-header__inner { flex-wrap: wrap; }
  body.woocommerce-page .aman-header,
  body.woocommerce-page .aman-header__inner { height: auto; }
  body.woocommerce-page .aman-header { padding-block-end: 10px; }
  .aman-store-search--header { order: 5; flex-basis: 100%; margin-block-start: 8px; }

  /* The basket and WhatsApp both live in the fixed action bar at the bottom of
     a phone screen, permanently in reach. Repeating them in the header cost a
     third row — 181px of sticky chrome on an 812px screen — for nothing. */
  body.woocommerce-page .aman-store-cart--header,
  body.woocommerce-page .aman-header__wa { display: none; }
}
@media (max-width: 600px) {
  .aman-store-reassure { grid-template-columns: 1fr; }
}

/* Store action bar: shop · categories · basket · WhatsApp. Call and Map are
   the repair business's actions and would push the basket off a small screen. */
.aw-actionbar--store .call,
.aw-actionbar--store .dir { display: none; }
.aw-actionbar--store .aman-store-cart--bar {
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-weight: 600;
}
.aw-actionbar--store .aman-store-cart--bar .aman-store-cart__count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: 50%;
  transform: translateX(50%);
  color: #fff;
  background: var(--awc-danger, #A23B2E);
}
.aw-actionbar--store .aman-store-cart--bar .aman-store-cart__count.is-empty {
  transform: translateX(50%) scale(0.6);
}

/* ---------- Add-to-cart confirmation ----------
   Enters and leaves on the same axis as the basket it came from, so the
   movement explains itself. Transition (not keyframes) because a customer
   adding three things quickly must retarget it, not restart it. */
.aman-store-toast {
  position: fixed;
  inset-block-end: max(16px, env(safe-area-inset-bottom));
  inset-inline: 16px;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-s);
  margin-inline: auto;
  /* Wide enough that a long product name and both actions sit on one row on a
     desktop; at 520px the actions wrapped and the toast stood 168px tall. */
  max-inline-size: 640px;
  padding: var(--aw-space-s) var(--aw-space-m);
  background: var(--aw-paper-1, #fff);
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-l);
  box-shadow: var(--aw-sh-2);
  /* Never from scale(0) — it should read as rising from the basket, not
     materialising out of nothing. */
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--aw-dur-2, 220ms) var(--aw-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    opacity var(--aw-dur-2, 220ms) var(--aw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.aman-store-toast.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.aman-store-toast__body {
  display: flex;
  align-items: center;
  gap: .55em;
  flex: 1 1 240px;
  min-inline-size: 0;
  font-size: var(--aw-step--1);
  color: var(--aw-ink);
}
.aman-store-toast__tick {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--aw-green);
}
.aman-store-toast__text { min-inline-size: 0; }
.aman-store-toast__actions { display: flex; gap: var(--aw-space-2xs); flex: none; }
.aman-store-toast__btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--aw-r-pill);
  font-size: var(--aw-step--1);
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--aw-grad-cta, var(--aw-green));
  transition: transform 160ms var(--aw-ease-out, ease-out);
}
.aman-store-toast__btn:active { transform: scale(0.97); }
.aman-store-toast__btn--ghost {
  color: var(--aw-green-ink);
  background: transparent;
  border: 1px solid var(--aw-line);
}
/* Clear the mobile action bar so the toast never sits on top of the basket
   button it is telling the customer about. */
@media (max-width: 1023px) {
  .aman-store-toast { inset-block-end: calc(72px + max(12px, env(safe-area-inset-bottom))); }
}
@media (max-width: 420px) {
  .aman-store-toast { flex-direction: column; align-items: stretch; }
  .aman-store-toast__actions { justify-content: stretch; }
  .aman-store-toast__btn { flex: 1; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-page * { transition: none !important; animation: none !important; }
  /* Keep the confirmation itself — it carries information, not decoration. */
  .aman-store-toast { transition: opacity 150ms ease !important; transform: none; }
  .aman-store-toast.is-visible { transform: none; }
}