/**
 * Refinements — loaded last.
 *
 * Corrections from a round of visual review. Each block records the problem it
 * solves so it can be folded back into the main sheets later.
 */

/* ---------------------------------------------------------------------------
 * 1. Type scale
 *
 * Headings read too large, the page <h1> most of all. Cairo has a tall x-height
 * and Arabic sets optically larger than Latin at the same point size, so the
 * original Latin-derived scale over-shot. Stepping the top of the scale down.
 * ------------------------------------------------------------------------- */

:root {
  --jm-fs-lg:   1.25rem;   /* was 1.375 */
  --jm-fs-xl:   1.5rem;    /* was 1.75  */
  --jm-fs-2xl:  1.875rem;  /* was 2.25  — page <h1> */
  --jm-fs-3xl:  2.375rem;  /* was 3     — hero only */
}

/* ---------------------------------------------------------------------------
 * 2. Page appears inset / extra gutter around the whole page
 *
 * Spectra writes a fixed pixel width onto its containers
 * (.wp-block-spectra-container { width: 1200px }). On any viewport narrower
 * than that, the document becomes wider than the screen. Everything sized to
 * 100% — header, footer — then spans only the viewport, and the body ground
 * shows beyond them, which reads as padding around the entire page.
 *
 * Capping the inline size keeps those containers inside the viewport without
 * touching their intended layout on wide screens.
 * ------------------------------------------------------------------------- */

.wp-block-spectra-container,
.wp-block-spectra-container[class*="wp-block"] {
  max-inline-size: 100%;
}

/* Belt and braces: nothing should be able to scroll the document sideways. */
html {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * 3. Checkout — empty band above the order summary
 *
 * #customer_details spans both rows. With implicit auto rows, a spanning item
 * distributes its surplus height across the rows it covers, so row 1 grew far
 * beyond the heading and pushed the summary down. Pinning row 1 to its content
 * and letting row 2 absorb the rest keeps the summary directly under its title.
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .jm-woo .woocommerce-checkout {
    grid-template-rows: auto 1fr;
  }

  .jm-woo #order_review_heading {
    margin-block: 0 var(--jm-space-3);
  }
}

/* ---------------------------------------------------------------------------
 * 4. Product card — breathing room above the title
 * ------------------------------------------------------------------------- */

.jm-woo ul.products li.product .woocommerce-loop-product__title,
.jm-product-card .woocommerce-loop-product__title {
  margin-block-start: var(--jm-space-2);
}

/* ---------------------------------------------------------------------------
 * 5. Pagination — sat on its own surface colour instead of the page ground
 * ------------------------------------------------------------------------- */

.jm-woo .woocommerce-pagination .page-numbers {
  background-color: transparent;
}

.jm-woo .woocommerce-pagination .page-numbers:hover {
  background-color: var(--jm-color-surface-2);
}

/* The current page keeps its accent fill. */
.jm-woo .woocommerce-pagination .page-numbers.current,
.jm-woo .woocommerce-pagination .page-numbers.current:hover {
  background-color: var(--jm-color-accent);
  color: var(--jm-color-on-accent);
}

/* ---------------------------------------------------------------------------
 * 6. Search panel — control alignment
 *
 * The form printed a visible label above the field, which made the form taller
 * than the icon buttons beside it and threw the row out of alignment. Inside
 * the panel the placeholder already names the field, so the label becomes
 * screen-reader only.
 * ------------------------------------------------------------------------- */

.jm-search__inner .jm-search-form__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jm-search__inner .jm-search-form,
.jm-search__inner .jm-search-form__field {
  display: flex;
  align-items: center;
  gap: var(--jm-space-2);
  margin: 0;
}

.jm-search__inner .jm-search-form__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.jm-search__inner .jm-search-form__submit,
.jm-search__close {
  flex: 0 0 auto;
  align-self: center;
}

/* ---------------------------------------------------------------------------
 * 7. Legacy builder pages (Collections, New Arrivals)
 *
 * Their product grids sit inside narrow Spectra flex columns, which squeezed
 * the cards down to thumbnails and left large empty areas beside them. Letting
 * the grid choose its own column count from a sensible minimum card width fills
 * the row properly at any container size.
 * ------------------------------------------------------------------------- */

.jm-woo .wp-block-spectra-container ul.products {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--jm-space-5) var(--jm-space-4);
}

@media (min-width: 768px) {
  .jm-woo .wp-block-spectra-container ul.products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Those columns must be free to grow rather than holding a builder-set width. */
.jm-woo .wp-block-spectra-container:has(ul.products) {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* Headings inside builder heroes were clipping their descenders and wrapping
   mid-word because the container constrained them. */
.wp-block-spectra-content,
.wp-block-spectra-container h1,
.wp-block-spectra-container h2,
.wp-block-spectra-container h3 {
  max-inline-size: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Decorative rule inherited from the starter template — reads as a stray line. */
.wp-block-spectra-container[style*="border-left"],
.jm-prose .wp-block-spectra-container {
  border-inline-start-width: 0;
}

/* The newsletter band ran edge to edge with no internal padding. */
.jm-prose .wp-block-spectra-container:has(.wp-block-hostinger-reach-subscription),
.jm-prose .wp-block-hostinger-reach-subscription {
  padding-block: var(--jm-space-5);
  padding-inline: var(--jm-space-4);
}

/* ---------------------------------------------------------------------------
 * 8. Mobile product grid — WooCommerce's smallscreen sheet was winning
 *
 * WooCommerce enqueues assets/css/woocommerce-smallscreen.css scoped to
 * `<link media="only screen and (max-width: 768px)">`, so its rules only
 * apply below 768px — not gated by an @media block inside the CSS itself.
 * Its selector:
 *
 *   .woocommerce ul.products[class*=columns-] li.product { width:48%; float:right; ... }
 *
 * carries FOUR class-level selectors (.woocommerce, .products, the attribute
 * selector, .product) against the theme's THREE (.jm-woo, .products,
 * .product) — (0,4,2) beats (0,3,2). No amount of loading this sheet later
 * fixes that; a less specific selector loses to a more specific one
 * regardless of source order. This is what produced the two floated,
 * gap-heavy columns on phones instead of the grid.
 *
 * Matching the attribute selector brings the theme's rule to equal
 * specificity, and this file loads last, so it wins the tie.
 * ------------------------------------------------------------------------- */

.jm-woo ul.products[class*="columns-"] li.product,
.jm-woo ul.products[class] li.product {
  inline-size: auto;
  max-inline-size: none;
  float: none;
  clear: none;
  margin: 0;
}

.jm-woo ul.products[class*="columns-"] li.product:nth-child(2n),
.jm-woo ul.products[class] li.product:nth-child(2n) {
  float: none;
  clear: none;
}

/* ---------------------------------------------------------------------------
 * 9. Generic content buttons — unreadable text on a dark background
 *
 * .wp-block-button__link (WordPress core's button block, used on the rebuilt
 * Collections page) has no theme styling at all, so it fell back to whatever
 * WordPress prints inline by default. That default is legitimate on its own
 * (#fff on #32373c), but it does not match the brand and is exactly the kind
 * of ungoverned rendering that produced the low-contrast pairing reported.
 * Styling it explicitly, once, removes the guesswork for every future button
 * of this kind.
 * ------------------------------------------------------------------------- */

.jm-prose .wp-block-button__link,
.jm-entry__content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm-space-2);
  background-color: var(--jm-color-accent);
  color: var(--jm-color-on-accent);
  font-family: var(--jm-font-head);
  font-weight: var(--jm-fw-medium);
  border-radius: var(--jm-radius);
  border: 1px solid var(--jm-color-accent);
  transition: background-color var(--jm-transition), border-color var(--jm-transition);
}

.jm-prose .wp-block-button__link:hover,
.jm-entry__content .wp-block-button__link:hover {
  background-color: var(--jm-color-accent-hover);
  border-color: var(--jm-color-accent-hover);
  color: var(--jm-color-on-accent);
}

/* An outline-style button (transparent fill) reads its text in ink, not
   on-accent, since there is no accent surface behind it. */
.jm-prose .wp-block-button.is-style-outline .wp-block-button__link,
.jm-entry__content .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--jm-color-accent);
  border-color: var(--jm-color-accent);
}

/* ---------------------------------------------------------------------------
 * 10. Search panel — field not filling the row, submit button hover colour
 * ------------------------------------------------------------------------- */

.jm-search__inner .jm-search-form__field {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.jm-search-form__submit:hover {
  color: var(--jm-color-accent-hover);
}

/* ---------------------------------------------------------------------------
 * 11. Single product — use more of the available width
 *
 * 1280px reads as a large empty margin on wide screens for a two-column
 * gallery/summary layout specifically (unlike the shop grid, which already
 * fills a 4-column row well at that width). Widening only this template.
 * ------------------------------------------------------------------------- */

body.single-product .jm-woo.jm-container {
  max-inline-size: 1520px;
}

@media (min-width: 1024px) {
  .jm-woo div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--jm-space-9);
  }
}

/* ---------------------------------------------------------------------------
 * 12. Themed buttons losing their colour inside .jm-woo
 *
 * .jm-woo a { color: inherit } (woocommerce.css) is a class+type selector,
 * (0,1,1) — higher specificity than .jm-btn--primary's (0,1,0), so it always
 * won regardless of load order. This was invisible until the front page
 * itself started carrying .jm-woo (needed so its product cards get the
 * catalogue styles), at which point it started overriding the hero button's
 * text colour too. Restating the button colour here with higher specificity
 * fixes it without touching the original rule's intent for plain content
 * links, which should still inherit.
 * ------------------------------------------------------------------------- */

.jm-woo a.jm-btn.jm-btn--primary {
  color: var(--jm-color-on-accent);
}

.jm-woo a.jm-btn.jm-btn--secondary,
.jm-woo a.jm-btn.jm-btn--ghost {
  color: var(--jm-color-accent);
}

/* ---------------------------------------------------------------------------
 * 13. 404 page — entirely unstyled
 *
 * .jm-error-404* had no CSS anywhere, the same gap the breadcrumb had before
 * it was closed — every element rendered with zero spacing, stacked flush
 * against the next.
 * ------------------------------------------------------------------------- */

.jm-error-404 {
  display: flex;
  flex-direction: column;
  gap: var(--jm-space-7);
  padding-block: var(--jm-space-8) var(--jm-space-9);
  text-align: center;
}

.jm-error-404__header {
  display: flex;
  flex-direction: column;
  gap: var(--jm-space-3);
  align-items: center;
}

.jm-error-404__code {
  margin: 0;
  color: var(--jm-color-muted);
  font-size: var(--jm-fs-sm);
  font-variant-numeric: tabular-nums;
}

.jm-error-404__title {
  margin: 0;
}

.jm-error-404__text {
  margin: 0;
  max-inline-size: 44ch;
  color: var(--jm-color-ink-2);
}

.jm-error-404__search {
  inline-size: 100%;
  max-inline-size: 26rem;
  margin-inline: auto;
}

.jm-error-404__search .jm-search-form__field {
  display: flex;
  gap: var(--jm-space-2);
}

.jm-error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jm-space-4);
}

.jm-error-404__subtitle {
  margin-block-end: var(--jm-space-4);
  font-size: var(--jm-fs-base);
  color: var(--jm-color-muted);
}

.jm-error-404__category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jm-space-3) var(--jm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
 * 14. Search buttons — hover feedback still not visible
 *
 * Both search-related buttons already carry .jm-btn.jm-btn--icon, whose own
 * :hover rule in components.css is just as specific as a single-class hover
 * rule aimed at them individually. Matching that compound selector exactly
 * (rather than adding another same-specificity rule and hoping load order
 * carries it) is what actually guarantees the win.
 * ------------------------------------------------------------------------- */

.jm-header__action.jm-btn.jm-btn--icon:hover,
.jm-search-form__submit.jm-btn.jm-btn--icon:hover {
  background-color: var(--jm-color-surface-2);
  color: var(--jm-color-accent-hover);
}

/* ---------------------------------------------------------------------------
 * 15. Single product — gallery/summary still width:48% (confirmed via devtools)
 *
 * The gallery wrapper carries BOTH "images" and "woocommerce-product-gallery"
 * on the same element, so core's grouped rule
 *   .woocommerce #content div.product div.images, div.product div.images,
 *   .woocommerce #content div.product div.summary, div.product div.summary
 *   { float:left; width:48%; clear:none; }
 * targets it directly at specificity (0,2,2) — one class higher than the
 * earlier `.jm-woo div.product .woocommerce-product-gallery` /
 * `.jm-woo div.product .summary` rules (0,2,1), so core won regardless of
 * load order. A grid item ignores `float`, but `width` still applies to its
 * own box — that's exactly what was shrinking the gallery.
 *
 * Matching core's actual selector shape (two classes, two type selectors)
 * brings this to equal specificity; this file loads last, so it wins the tie.
 * ------------------------------------------------------------------------- */

.jm-woo div.product div.images,
.jm-woo div.product div.summary {
  float: none;
  clear: none;
  inline-size: auto;
  max-inline-size: none;
}

/* ---------------------------------------------------------------------------
 * 16. Header icon buttons — hover was colour-only, too subtle to register
 * ------------------------------------------------------------------------- */

.jm-header__action:hover {
  background-color: var(--jm-color-surface-2);
}

/* ---------------------------------------------------------------------------
 * 17. Phone numbers reversing digit-by-digit inside RTL paragraphs
 *
 * A plain "+961 81 140 884" with no direction of its own, inside a dir="rtl"
 * ancestor, can have the Unicode Bidi Algorithm reorder it incorrectly rather
 * than just repositioning it. unicode-bidi: plaintext makes each of these
 * text nodes resolve its own direction from its own first strong character —
 * numeric/Latin content reads LTR, Arabic content is unaffected and still
 * reads RTL exactly as before.
 * ------------------------------------------------------------------------- */

.wp-block-spectra-content,
.jm-prose a,
.jm-prose li,
.jm-footer__contact-value,
.jm-delivery__value {
  unicode-bidi: plaintext;
}

/* ---------------------------------------------------------------------------
 * 18. Free-delivery progress notice — cart & checkout
 * ------------------------------------------------------------------------- */

.jm-free-delivery-notice {
  display: flex;
  flex-direction: column;
  gap: var(--jm-space-2);
  margin-block-end: var(--jm-space-5);
  padding: var(--jm-space-3) var(--jm-space-4);
  border: 1px solid var(--jm-color-accent-line, var(--jm-color-line));
  border-radius: var(--jm-radius);
  background-color: var(--jm-color-accent-soft, var(--jm-color-surface-2));
  color: var(--jm-color-ink);
  font-size: var(--jm-fs-sm);
}

.jm-notice--success.jm-free-delivery-notice {
  flex-direction: row;
  align-items: center;
  gap: var(--jm-space-2);
  background-color: var(--jm-color-keep-soft, var(--jm-color-surface-2));
  border-color: var(--jm-color-keep, var(--jm-color-accent));
  color: var(--jm-color-keep, var(--jm-color-ink));
}

.jm-free-delivery-notice__bar {
  display: block;
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--jm-radius-pill, 100px);
  background-color: var(--jm-color-surface);
  overflow: hidden;
}

.jm-free-delivery-notice__bar-fill {
  display: block;
  block-size: 100%;
  background-color: var(--jm-color-accent);
  transition: inline-size var(--jm-transition);
}

@media (prefers-reduced-motion: reduce) {
  .jm-free-delivery-notice__bar-fill {
    transition: none;
  }
}