/* ==========================================================================
   MANSA — "Atelier" override layer
   Load AFTER the existing theme CSS. Pure CSS, no HTML changes.
   Concept: every ground is cloth, not paper. Rules become stitches.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — twill gold, thread green, unbleached calico
   -------------------------------------------------------------------------- */
:root {
  --mn-twill:  #C9A22E;   /* the mustard ground of the embroidered patch     */
  --mn-twill-d:#AE8A20;   /* shade side of the wale                          */
  --mn-thread: #333F26;   /* thread green — this is the ink                  */
  --mn-thread-2: rgba(51, 63, 38, 0.58);
  --mn-thread-3: rgba(51, 63, 38, 0.26);
  --mn-deep:   #1E2515;   /* deepest green — footer ground                   */
  --mn-calico: #F3EEE0;   /* unbleached cotton — replaces pure white         */
  --mn-chalk:  #FBF8F0;   /* one step lighter — card ground                  */
  --mn-tailor: #B84A2E;   /* burnt tailor's chalk — SALE only                */

  /* woven twill: diagonal wale over a warp/weft grid */
  --mn-weave:
    repeating-linear-gradient(63deg, rgba(51,63,38,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(63deg, rgba(255,255,255,.055) 1px 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg,  rgba(51,63,38,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(51,63,38,.022) 0 1px, transparent 1px 3px);

  /* a run of stitches, horizontal and vertical */
  --mn-stitch-h: repeating-linear-gradient(90deg, var(--mn-thread-2) 0 7px, transparent 7px 13px);
  --mn-stitch-v: repeating-linear-gradient(180deg, var(--mn-thread-2) 0 7px, transparent 7px 13px);

  --mn-display: "Newsreader", Georgia, "Times New Roman", serif;
  --mn-ui: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- remap the theme's own variables ---- */
  --body-bg: var(--mn-calico) !important;
  --body-text: var(--mn-thread) !important;

  --hd-bg: var(--mn-calico) !important;
  --hd-text: var(--mn-thread) !important;

  --ann-bg: var(--mn-thread) !important;
  --ann-text: var(--mn-twill) !important;

  --ft-bg: var(--mn-deep) !important;          /* was #C9CC00 acid lime */
  --ft-text: var(--mn-twill) !important;

  --product-badge-bg: var(--mn-tailor) !important;   /* was raw #cd1515 */
  --product-badge-text: #FBF8F0 !important;
  --product-name-text: var(--mn-thread) !important;
  --product-price-text: var(--mn-thread) !important;
  --product-sale-price-text: var(--mn-tailor) !important;

  --buy-btn-bg: var(--mn-thread) !important;
  --buy-btn-text: var(--mn-calico) !important;
  --buy-btn-border: var(--mn-thread) !important;
  --crt-btn-bg: var(--mn-twill) !important;
  --crt-btn-text: var(--mn-thread) !important;
  --crt-btn-border: var(--mn-thread) !important;

  --input-bg: var(--mn-chalk) !important;
  --input-text: var(--mn-thread) !important;
  --input-border: var(--mn-thread-3) !important;

  --section-heading-font: var(--mn-display) !important;
  --color-primary: 51, 63, 38 !important;
}

/* --------------------------------------------------------------------------
   2. The ground is cloth
   -------------------------------------------------------------------------- */
body {
  font-family: var(--mn-ui);
  -webkit-font-smoothing: antialiased;
}

/* their rule uses `background: ... !important`, so layer only the image back on */
.app_container,
.content_container {
  background-image: var(--mn-weave) !important;
}

/* Full-bleed cloth panels — no floating rounded cards.
   Class is doubled on purpose: the theme's Emotion class (.css-xxxx) sits later
   in the cascade at equal specificity, so a single class loses to it. */
.home_section_container.home_section_container {
  padding: 0 !important;
  margin-block: 0 !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Announcement bar — woven selvedge tape
   -------------------------------------------------------------------------- */
.ab-announce {
  font-family: var(--mn-ui);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ab-announce::before,
.ab-announce::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, rgba(201,162,46,.5) 0 5px, transparent 5px 10px);
  z-index: 2;
  pointer-events: none;
}
.ab-announce::before { top: 3px; }
.ab-announce::after  { bottom: 3px; }

.ab-ann-marquee-sep { color: var(--mn-twill); opacity: .65; }

/* --------------------------------------------------------------------------
   4. Header — a stitched seam, not a border
   -------------------------------------------------------------------------- */
.ab-header {
  background-image: var(--mn-weave);
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.ab-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-image: var(--mn-stitch-h);
  opacity: .5;
  transition: opacity .2s ease;
}
/* at the top of the homepage the header is transparent over the hero —
   a floating stitch line there would read as a stray rule */
html.ab-route-home .ab-theme:not(.scrolled) .ab-header::after { opacity: 0; }

/* ---- the logo, painted in thread green -----------------------------------
   The theme knocks the logo out to white (brightness(0) invert(1)). Masking
   instead lets us paint the exact brand green, on the calico header and over
   the gold hero alike — the mark reads as embroidery, not a pasted PNG.
   >> If you upload a new logo, update BOTH urls below to the new file. <<   */
.ab-logo {
  display: inline-flex;
  align-items: center;
  background-color: var(--mn-thread);
  -webkit-mask: url("https://files.easy-orders.net/1785157502797862172.png") center / contain no-repeat;
          mask: url("https://files.easy-orders.net/1785157502797862172.png") center / contain no-repeat;
}
.ab-logo img { opacity: 0 !important; filter: none !important; }

/* footer logo sits on the deep green ground — paint it gold */
.ab-footer-logo {
  display: inline-flex;
  align-items: center;
  background-color: var(--mn-twill);
  -webkit-mask: url("https://files.easy-orders.net/1785157848276201408.png") center / contain no-repeat;
          mask: url("https://files.easy-orders.net/1785157848276201408.png") center / contain no-repeat;
}
.ab-footer-logo img { opacity: 0 !important; filter: none !important; }

.ab-nav a,
.ab-mobile-nav a {
  position: relative;
  font-family: var(--mn-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mn-thread);
}

/* link underline drawn as a stitch */
.ab-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background-image: var(--mn-stitch-h);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.7,0,.3,1);
}
.ab-nav a:hover::after,
.ab-nav a:focus-visible::after { transform: scaleX(1); }

.ab-cart-count {
  background: var(--mn-tailor) !important;
  color: var(--mn-chalk) !important;
  border-radius: 0 !important;
  font-family: var(--mn-ui);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. The gold marquee band — fix the contrast, add stitch rails
   -------------------------------------------------------------------------- */
.ab-marquee-section {
  --mq-bg: var(--mn-twill) !important;
  --mq-color: var(--mn-thread) !important;   /* was #ffffff — weak on gold */
  position: relative;
}
.ab-marquee-band {
  background-image: var(--mn-weave);
  position: relative;
}
.ab-marquee-band::before,
.ab-marquee-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background-image: var(--mn-stitch-h);
  opacity: .45;
}
.ab-marquee-band::before { top: 8px; }
.ab-marquee-band::after  { bottom: 8px; }

.ab-marquee-item { font-family: var(--mn-ui); }

/* --------------------------------------------------------------------------
   6. Section headings — Newsreader italic over a stitched rule
   -------------------------------------------------------------------------- */
.ab-pgrid-title,
.ab-plist-title,
.ab-featured-section-title,
.ab-categories-title,
.ab-reviews-title,
.ab-pd-name,
.ab-thanks-title {
  font-family: var(--mn-display) !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--mn-thread);
  text-wrap: balance;
}

.ab-pgrid-header,
.ab-plist-header,
.ab-categories-header,
.ab-reviews-header {
  position: relative;
  padding-bottom: 14px;
}
.ab-pgrid-header::after,
.ab-plist-header::after,
.ab-categories-header::after,
.ab-reviews-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-image: var(--mn-stitch-h);
  opacity: .35;
}

.ab-pgrid-subtitle,
.ab-plist-subtitle,
.ab-featured-subtitle {
  font-family: var(--mn-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mn-thread-2);
}

/* --------------------------------------------------------------------------
   7. Product cards — pattern pieces, with registration corners
   -------------------------------------------------------------------------- */
.ab-pgrid-card,
.ab-plist-card,
.ab-featured-card,
.ab-cat-card {
  position: relative;
  background: var(--mn-chalk);
  background-image: var(--mn-weave);
  border: 0;
  border-radius: 0 !important;
  overflow: visible;
  transition: transform .4s cubic-bezier(.2,.8,.25,1);
}
.ab-pgrid-card:hover,
.ab-plist-card:hover,
.ab-featured-card:hover { transform: translateY(-4px); }

/* stitched frame, drawn on hover */
.ab-pgrid-card::after,
.ab-plist-card::after,
.ab-featured-card::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  background-image: var(--mn-stitch-h), var(--mn-stitch-h), var(--mn-stitch-v), var(--mn-stitch-v);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
}
.ab-pgrid-card:hover::after,
.ab-plist-card:hover::after,
.ab-featured-card:hover::after { opacity: .5; }

.ab-pgrid-media,
.ab-plist-media,
.ab-featured-media,
.ab-cat-image-wrapper { border-radius: 0 !important; }

.ab-pgrid-img-primary,
.ab-plist-img-primary,
.ab-featured-img-primary {
  filter: saturate(.9) contrast(1.02);
  transition: filter .5s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.ab-pgrid-card:hover .ab-pgrid-img-primary,
.ab-plist-card:hover .ab-plist-img-primary,
.ab-featured-card:hover .ab-featured-img-primary { filter: saturate(1.05); }

.ab-pgrid-name,
.ab-plist-name,
.ab-featured-name {
  font-family: var(--mn-ui) !important;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--mn-thread);
}

.ab-pgrid-price,
.ab-plist-price,
.ab-featured-price,
.ab-pd-price,
.ab-price-sale,
.ab-price-old,
.ab-fixed-buy-price {
  font-family: var(--mn-ui) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
.ab-price-old,
.ab-pd-price-old,
.ab-fixed-buy-price-old { color: var(--mn-thread-3) !important; }

/* --------------------------------------------------------------------------
   8. Badges — stamped, not rounded pills
   -------------------------------------------------------------------------- */
.ab-pgrid-badge,
.ab-plist-badge,
.ab-featured-badge,
.ab-out-of-stock-badge {
  border-radius: 0 !important;
  font-family: var(--mn-ui) !important;
  font-weight: 700;
  font-size: 9px !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 5px 9px !important;
}
.ab-out-of-stock-badge {
  background: var(--mn-thread) !important;
  color: var(--mn-calico) !important;
}

/* --------------------------------------------------------------------------
   9. Buttons — a stitch that travels the perimeter on hover
   -------------------------------------------------------------------------- */
.ab-pgrid-add-btn,
.ab-plist-add-btn,
.ab-featured-add-btn,
.ab-pgrid-viewall-btn,
.ab-plist-viewall-btn,
.ab-pgrid-loadmore-btn,
.ab-fixed-buy-btn,
.ab-reviews-write-btn,
.ab-review-submit-btn,
.ab-thanks-home-btn,
.ab-featured-hero-cta,
.ab-pgrid-hero-cta,
.ab-invoice-track-btn {
  position: relative;
  border-radius: 0 !important;
  font-family: var(--mn-ui) !important;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease;
}

.ab-pgrid-add-btn::after,
.ab-plist-add-btn::after,
.ab-featured-add-btn::after,
.ab-pgrid-viewall-btn::after,
.ab-plist-viewall-btn::after,
.ab-pgrid-loadmore-btn::after,
.ab-fixed-buy-btn::after,
.ab-reviews-write-btn::after,
.ab-featured-hero-cta::after,
.ab-pgrid-hero-cta::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,  currentColor 0 6px, transparent 6px 11px),
    repeating-linear-gradient(90deg,  currentColor 0 6px, transparent 6px 11px),
    repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 11px),
    repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 11px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .3s ease;
}
.ab-pgrid-add-btn:hover::after,
.ab-plist-add-btn:hover::after,
.ab-featured-add-btn:hover::after,
.ab-pgrid-viewall-btn:hover::after,
.ab-plist-viewall-btn:hover::after,
.ab-pgrid-loadmore-btn:hover::after,
.ab-fixed-buy-btn:hover::after,
.ab-reviews-write-btn:hover::after,
.ab-featured-hero-cta:hover::after,
.ab-pgrid-hero-cta:hover::after {
  opacity: .6;
  animation: mn-stitch-travel 1.1s linear infinite;
}
@keyframes mn-stitch-travel {
  to { background-position: 11px 0, -11px 100%, 0 -11px, 100% 11px; }
}

/* keyboard focus must stay obvious */
.ab-nav a:focus-visible,
.ab-icon-btn:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--mn-thread);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. Inputs — care-label fields
   -------------------------------------------------------------------------- */
.ab-footer-subscribe-input,
.ab-review-input,
.ab-review-textarea {
  border-radius: 0 !important;
  font-family: var(--mn-ui);
  letter-spacing: .06em;
}
.ab-footer-subscribe-input::placeholder {
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   11. Footer — deep green bolt with a gold selvedge
   -------------------------------------------------------------------------- */
.ab-footer {
  position: relative;
  background-image: var(--mn-weave);
}
/* the printed edge of the fabric bolt */
.ab-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--mn-twill) 0 14px, transparent 14px 26px);
  opacity: .85;
}

.ab-footer-heading {
  font-family: var(--mn-display) !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--mn-twill);
}
.ab-footer-links a,
.ab-footer-contact-item,
.ab-footer-copy,
.ab-footer-powered,
.ab-footer-social-label {
  font-family: var(--mn-ui);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201, 162, 46, .72);
}
.ab-footer-links a { transition: color .25s ease; }
.ab-footer-links a:hover { color: var(--mn-twill); }

.ab-footer-bottom {
  border-top: 0 !important;
  position: relative;
  padding-top: 22px;
}
.ab-footer-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(201,162,46,.45) 0 7px, transparent 7px 13px);
}

.ab-footer-subscribe-btn { border-radius: 0 !important; }
.ab-footer-social-img { transition: transform .25s ease, opacity .25s ease; opacity: .8; }
.ab-footer-social-img:hover { transform: translateY(-2px); opacity: 1; }

/* --------------------------------------------------------------------------
   12. Reviews, breadcrumbs, small type
   -------------------------------------------------------------------------- */
.ab-review-card {
  background: var(--mn-chalk);
  background-image: var(--mn-weave);
  border-radius: 0 !important;
  border: 1px solid var(--mn-thread-3);
}
.ab-review-author {
  font-family: var(--mn-ui);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.ab-review-comment { font-family: var(--mn-display); font-size: 15px; line-height: 1.65; }

.ab-pd-star-filled,
.ab-review-rating-star,
.ab-reviews-avg-stars { color: var(--mn-twill) !important; }

.ab-breadcrumbs-list {
  font-family: var(--mn-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ab-breadcrumbs-sep { color: var(--mn-thread-3); }

.ab-pd-description,
.lq-desc-content { font-family: var(--mn-ui); line-height: 1.75; }
.lq-desc-toggle-label {
  font-family: var(--mn-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
}

.ab-fake-visitor,
.ab-fake-stock,
.ab-fake-counter {
  font-family: var(--mn-ui);
  letter-spacing: .08em;
}
.ab-fs-bar { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ab-pgrid-card,
  .ab-plist-card,
  .ab-featured-card { transition: none; }
  .ab-pgrid-card:hover,
  .ab-plist-card:hover,
  .ab-featured-card:hover { transform: none; }
  .ab-nav a::after { transition: none; transform: scaleX(1); opacity: .4; }
  [class*="add-btn"]:hover::after,
  [class*="viewall-btn"]:hover::after,
  [class*="hero-cta"]:hover::after { animation: none; }
}