/*
Theme Name: MJ Clothing
Theme URI: https://mjclothingofficial.net
Author: MJ Clothing
Description: An elegant, fast WooCommerce theme for MJ Clothing — Pakistani women's ready-to-wear. Full-width banner slider, collection grids, wishlist, size guide, PKR pricing and offline payment friendly checkout.
Version: 1.9.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mjclothing
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 10.9.4
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --mj-ink:#1c1c1c;
  --mj-ink-soft:#4a4a4a;
  --mj-muted:#757575;          /* 4.61:1 on white, 4.54:1 on cream — was #8d8d8d at 3.32:1 */
  --mj-line:#e8e3e0;
  --mj-line-soft:#f2eeec;
  --mj-cream:#fffdfc;
  --mj-blush:#fbe9ea;
  --mj-blush-deep:#f5d7d9;
  --mj-rose:#dba7ab;           /* decorative only — never used for text */
  --mj-rose-text:#a4585d;      /* 4.60:1 on white, for eyebrows and link hover */
  --mj-line-strong:#948c89;    /* 3.30:1 — control borders need 3:1 (WCAG 1.4.11) */
  --mj-sale:#b3595e;
  --mj-white:#fff;

  --mj-serif:'Cormorant Garamond',"Times New Roman",serif;
  --mj-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --mj-buy-h:50px;
  --mj-wrap:1440px;
  --mj-gut:clamp(16px,4vw,48px);
  --mj-header-h:88px;
  --mj-radius:0px;
  --mj-ease:cubic-bezier(.25,.46,.45,.94);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Keeps the scrollbar gutter reserved, so hiding overflow when a panel opens
     does not resize and reflow the page underneath. */
  scrollbar-gutter:stable
}
body{
  margin:0;background:var(--mj-white);color:var(--mj-ink);
  font-family:var(--mj-sans);font-size:15px;line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none;transition:color .25s var(--mj-ease),opacity .25s var(--mj-ease)}
a:hover{color:var(--mj-rose-text)}
h1,h2,h3,h4,h5,h6{font-family:var(--mj-serif);font-weight:400;line-height:1.2;margin:0 0 .5em;letter-spacing:.02em}
h1{font-size:clamp(30px,4.4vw,52px)}
h2{font-size:clamp(24px,3.2vw,38px)}
h3{font-size:clamp(19px,2.2vw,26px)}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
hr{border:0;border-top:1px solid var(--mj-line);margin:36px 0}
::selection{background:var(--mj-blush-deep);color:var(--mj-ink)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:99999;background:#fff;padding:10px 16px;width:auto;height:auto;clip:auto}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.mj-wrap{max-width:var(--mj-wrap);margin:0 auto;padding:0 var(--mj-gut)}
.mj-wrap--narrow{max-width:860px}
.mj-section{padding:clamp(48px,6vw,84px) 0}
.mj-section--tight{padding:clamp(30px,3.5vw,48px) 0}
.mj-section--blush{background:var(--mj-blush)}
/* muted grey is only 3.94:1 on blush, so step it up inside blush panels */
.mj-section--blush,.mj-page-head,.mj-marquee{--mj-muted:#5f5f5f;--mj-rose-text:#96484e}
.mj-section--cream{background:var(--mj-cream)}
.mj-grid{display:grid;gap:clamp(14px,1.6vw,26px)}
.mj-center{text-align:center}

/* ==========================================================================
   4. TYPE HELPERS / BUTTONS
   ========================================================================== */
.mj-eyebrow{
  font-family:var(--mj-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mj-rose-text);font-weight:400;margin:0 0 12px;display:block;
}
.mj-section-head{text-align:center;max-width:640px;margin:0 auto clamp(28px,3.5vw,48px)}
.mj-section-head h2{text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.mj-section-head p{color:var(--mj-muted);font-size:14.5px;margin:0}
.mj-rule{width:44px;height:1px;background:var(--mj-rose);margin:16px auto 0}

.mj-btn,button,input[type=submit],.button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mj-sans);font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 34px;border:1px solid var(--mj-ink);background:var(--mj-ink);color:#fff;
  border-radius:var(--mj-radius);cursor:pointer;line-height:1;text-align:center;
  transition:background .3s var(--mj-ease),color .3s var(--mj-ease),border-color .3s var(--mj-ease);
  -webkit-appearance:none;appearance:none;
}
.mj-btn:hover,button:hover,input[type=submit]:hover,.button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--mj-white);color:var(--mj-ink);border-color:var(--mj-ink)
}
.mj-btn--ghost{background:transparent;color:var(--mj-ink)}
.mj-btn--ghost:hover{background:var(--mj-ink);color:#fff}
.mj-btn--light{background:#fff;color:var(--mj-ink);border-color:#fff}
.mj-btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.mj-btn--blush{background:var(--mj-blush);border-color:var(--mj-blush);color:var(--mj-ink)}
.mj-btn--blush:hover{background:var(--mj-ink);border-color:var(--mj-ink);color:#fff}
.mj-btn--block{width:100%}
.mj-link-under{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--mj-ink);
  padding-bottom:4px;display:inline-block
}
.mj-link-under:hover{border-color:var(--mj-rose)}
/* The global button rule paints every <button> as a filled black pill, so a
   button carrying .mj-link-under needs those declarations undone. */
button.mj-link-under{
  background:none;border:0;border-bottom:1px solid var(--mj-ink);color:var(--mj-ink);
  padding:0 0 4px;letter-spacing:.2em
}
button.mj-link-under:hover{background:none;color:var(--mj-rose-text);border-color:var(--mj-rose)}

input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],
input[type=number],input[type=url],textarea,select,.select2-container .select2-selection--single{
  width:100%;font-family:var(--mj-sans);font-size:14px;font-weight:300;color:var(--mj-ink);
  padding:13px 16px;border:1px solid var(--mj-line-strong);background:#fff;border-radius:0;
  -webkit-appearance:none;appearance:none;transition:border-color .25s var(--mj-ease)
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--mj-rose-text)}
/*
 * tabindex="-1" is excluded on purpose, and it is the whole fix for the black box
 * that flashed around "…has been added to your bag" on the way to checkout and around
 * "Thank you — we have your receipt".
 *
 * WooCommerce makes a notice focusable with tabindex="-1" and focuses it so a screen
 * reader announces it. -1 means "focusable by script, never by Tab", so the element
 * cannot be somewhere a keyboard user has navigated to — which is the only thing a
 * focus ring is for. Drawing one there just puts a 2px black frame round a message
 * until the next click moves focus away. The same applied to the size pill this theme
 * focuses when a choice is missing; that one already turns red and prints a message
 * under itself, so nothing is lost.
 *
 * Anything genuinely reachable — a control, a link, or tabindex="0" — keeps its ring.
 */
input:focus-visible,textarea:focus-visible,select:focus-visible,
button:focus-visible,a:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--mj-ink);outline-offset:2px
}
/*
 * And nothing draws one in its place. Excluding these elements above only stopped the
 * *theme* painting a ring — the browser still had its own, so the black box became a
 * blue one. Chrome's default focus ring is as unwanted here as ours was, for the same
 * reason: nothing has navigated to this element, a script focused it so the message
 * would be read aloud. Suppressing it is safe precisely because tabindex="-1" cannot
 * be reached by Tab, so no keyboard user can ever be left without an indicator.
 */
[tabindex="-1"]:focus{outline:none}
select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c1c1c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-ink-soft);display:block;margin-bottom:8px}

/* ==========================================================================
   5. ANNOUNCEMENT BAR
   ========================================================================== */
.mj-announce{
  background:var(--mj-ink);color:#fff;text-align:center;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;position:relative;z-index:60
}
.mj-announce a{border-bottom:1px solid rgba(255,255,255,.5)}
.mj-announce a:hover{color:var(--mj-blush-deep)}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.mj-header{
  position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--mj-line-soft);
  transition:background .35s var(--mj-ease),box-shadow .35s var(--mj-ease)
}
.mj-header__inner{
  max-width:var(--mj-wrap);margin:0 auto;padding:0 var(--mj-gut);
  height:var(--mj-header-h);display:flex;align-items:center;gap:clamp(16px,3vw,42px)
}
.mj-logo{flex:0 0 auto;display:block;line-height:0}
.mj-logo img{height:66px;width:auto;transition:opacity .3s var(--mj-ease)}
.mj-logo__text{font-family:var(--mj-serif);font-size:26px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.mj-logo img.mj-logo--light{display:none}

/* nav */
.mj-nav{flex:1 1 auto;display:flex;justify-content:center}
.mj-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.mj-nav li{position:relative}
.mj-nav a{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:400;
  padding:28px 0;display:block;position:relative;white-space:nowrap
}
.mj-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:24px;height:1px;background:currentColor;
  transition:right .35s var(--mj-ease)
}
.mj-nav li:hover>a::after,.mj-nav li.current-menu-item>a::after{right:0}
.mj-nav .menu-item-has-children>a::before{
  content:"";position:absolute;right:-13px;top:50%;width:5px;height:5px;margin-top:-4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)
}
.mj-nav .menu-item-has-children{padding-right:13px}
/* dropdown */
.mj-nav ul ul{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:230px;
  background:#fff;border:1px solid var(--mj-line-soft);box-shadow:0 18px 44px rgba(0,0,0,.07);
  padding:14px 0;display:block;flex-direction:column;gap:0;
  opacity:0;visibility:hidden;z-index:5;
  transition:opacity .3s var(--mj-ease),visibility .3s var(--mj-ease),transform .3s var(--mj-ease)
}
.mj-nav li:hover>ul{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mj-nav ul ul li{width:100%}
.mj-nav ul ul a{padding:9px 24px;letter-spacing:.13em;color:var(--mj-ink-soft)}
.mj-nav ul ul a::after{display:none}
.mj-nav ul ul a:hover{color:var(--mj-ink);background:var(--mj-cream);padding-left:28px}
.mj-nav ul ul ul{top:0;left:100%;transform:translate(10px,0)}
.mj-nav li:hover>ul ul{transform:translate(0,0)}

/* icons */
.mj-actions{flex:0 0 auto;display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.mj-icon-btn{
  position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;color:inherit;cursor:pointer
}
.mj-icon-btn:hover{background:none;color:var(--mj-rose);border:0}
.mj-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.mj-count{
  position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--mj-ink);color:#fff;font-size:9.5px;letter-spacing:0;line-height:17px;text-align:center;font-weight:400
}
.mj-burger{display:none}

/* transparent header over homepage hero */
body.mj-overlay-header .mj-header{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;color:#fff}
body.mj-overlay-header .mj-header .mj-count{background:#fff;color:var(--mj-ink)}
body.mj-overlay-header .mj-header .mj-logo img.mj-logo--dark{display:none}
body.mj-overlay-header .mj-header .mj-logo img.mj-logo--light{display:block}
body.mj-overlay-header .mj-header .mj-nav ul ul a{color:var(--mj-ink-soft)}
body.mj-overlay-header .mj-header a:hover{color:var(--mj-blush-deep)}

/* sticky */
.mj-header.is-stuck{
  position:fixed;top:0;left:0;right:0;background:#fff!important;color:var(--mj-ink)!important;
  box-shadow:0 6px 26px rgba(0,0,0,.07);border-bottom-color:var(--mj-line-soft);animation:mjDrop .4s var(--mj-ease)
}
.mj-header.is-stuck .mj-logo img.mj-logo--dark{display:block}
.mj-header.is-stuck .mj-logo img.mj-logo--light{display:none}
.mj-header.is-stuck .mj-count{background:var(--mj-ink);color:#fff}
.mj-header.is-stuck .mj-header__inner{height:70px}
.mj-header.is-stuck .mj-logo img{height:54px}
@keyframes mjDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* search overlay */
.mj-search{
  position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:120;background:rgba(255,255,255,.98);
  display:flex;align-items:flex-start;justify-content:center;padding-top:16vh;padding-top:16dvh;
  opacity:0;visibility:hidden;transition:opacity .3s var(--mj-ease),visibility .3s
;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mj-search.is-open{opacity:1;visibility:visible}
.mj-search__box{width:min(680px,88vw);text-align:center}
.mj-search__box .mj-eyebrow{margin-bottom:22px}
.mj-search form{display:flex;border-bottom:1px solid var(--mj-ink);transition:border-color .2s var(--mj-ease)}
.mj-search input[type=search]{border:0;font-size:clamp(20px,3vw,32px);font-family:var(--mj-serif);padding:10px 0;text-align:left;flex:1 1 auto;min-width:0}
/*
 * A text input always matches :focus-visible while focused — that is the spec,
 * not a modality question — so the global 2px ring painted a heavy black box
 * round this field the moment the overlay opened and autofocused it. Worse, the
 * ring stopped at the input's right edge while the form's rule carried on past
 * the magnifier, so the two lines disagreed by 34px. The field is a single
 * underline by design: thicken the underline on focus instead.
 */
.mj-search input[type=search]:focus-visible{outline:0}
.mj-search form:focus-within{border-bottom-width:2px;padding-bottom:0}
.mj-search button{background:none;border:0;color:var(--mj-ink);padding:0 6px;flex:0 0 auto}
/* The icon had a viewBox but no width/height and no sizing rule, so it computed
   to 0x0. The submit button collapsed to its 12px of padding, which is what made
   the rule under the field look 12px longer than the input above it. */
.mj-search button svg{
  width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.4
}
.mj-search button:hover{background:none;color:var(--mj-rose);border:0}
.mj-search__hint{font-size:12px;color:var(--mj-muted);margin-top:16px;letter-spacing:.06em}
/* Live results. Kept inside .mj-search__box so the grid can never run wider
   than the rule under the input — any overhang there reads as a misalignment. */
.mj-search__results{margin-top:30px;text-align:left;max-width:100%}
.mj-search__results:empty{display:none}
.mj-search__results ul.products{margin:0;padding:0;gap:16px}
.mj-search__results .mj-card__sizes{display:none}
.mj-search__none{font-size:13px;color:var(--mj-muted);text-align:center;margin:0}
@media(max-width:600px){
  .mj-search__results ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   7. MOBILE DRAWER NAV
   ========================================================================== */
.mj-drawer,.mj-cart-drawer,.mj-filters,.mj-search,.mj-modal{contain:layout paint}
.mj-drawer.is-open,.mj-cart-drawer.is-open,.mj-filters.is-open{will-change:transform}
.mj-scrim{
  position:fixed;inset:0;background:rgba(20,20,20,.42);z-index:110;opacity:0;visibility:hidden;
  will-change:opacity;
  transition:opacity .35s var(--mj-ease),visibility .35s
}
/* No backdrop-filter anywhere. Blurring a viewport full of product photos costs a
   full-screen filter pass every time a panel opens, on any hardware. */
.mj-scrim.is-open{opacity:1;visibility:visible}
.mj-drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(360px,86vw);background:#fff;z-index:130;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .4s var(--mj-ease),visibility .4s var(--mj-ease);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch
}
.mj-drawer.is-open{transform:translateX(0);visibility:visible}
.mj-drawer__top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--mj-line-soft)}
.mj-drawer__top span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mj-muted)}
.mj-drawer nav ul{list-style:none;margin:0;padding:0}
.mj-drawer nav>ul>li{border-bottom:1px solid var(--mj-line-soft)}
.mj-drawer nav a{display:block;padding:15px 22px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.mj-drawer nav ul ul{display:none;background:var(--mj-cream)}
.mj-drawer nav ul ul a{padding-left:36px;text-transform:none;letter-spacing:.06em;font-size:13.5px;color:var(--mj-ink-soft)}
.mj-drawer nav li.is-open>ul{display:block}
.mj-drawer .mj-sub-toggle{
  position:absolute;right:0;top:0;width:56px;height:50px;background:none;border:0;padding:0;color:inherit
}
.mj-drawer .mj-sub-toggle:hover{background:none;border:0}
.mj-drawer .mj-sub-toggle::before,.mj-drawer .mj-sub-toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .3s var(--mj-ease)
}
.mj-drawer .mj-sub-toggle::before{width:11px;height:1px;margin-left:-5.5px}
.mj-drawer .mj-sub-toggle::after{width:1px;height:11px;margin-top:-5.5px}
.mj-drawer li.is-open>.mj-sub-toggle::after{transform:rotate(90deg);opacity:0}
.mj-drawer nav li{position:relative}
.mj-drawer__foot{margin-top:auto;padding:22px;border-top:1px solid var(--mj-line-soft);font-size:12.5px;color:var(--mj-muted)}
.mj-drawer__foot a{display:block;padding:5px 0}
.mj-x{position:relative;width:34px;height:34px;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.mj-x:hover{background:none;border:0;color:var(--mj-rose)}
.mj-x::before,.mj-x::after{content:"";position:absolute;left:8px;top:16px;width:18px;height:1px;background:currentColor}
.mj-x::before{transform:rotate(45deg)}
.mj-x::after{transform:rotate(-45deg)}

/* ==========================================================================
   8. HERO SLIDER
   ========================================================================== */
.mj-hero{position:relative;overflow:hidden;background:var(--mj-blush)}
.mj-hero__track{display:flex;transition:transform .8s var(--mj-ease)}
.mj-hero__slide{flex:0 0 100%;position:relative}
.mj-hero__slide picture,.mj-hero__slide img{width:100%;display:block}
.mj-hero__slide img{aspect-ratio:1440/700;object-fit:cover}
.mj-hero__cap{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:24px;text-shadow:0 2px 22px rgba(0,0,0,.28)
}
.mj-hero__cap.is-left{align-items:flex-start;text-align:left;padding-left:clamp(24px,8vw,120px)}
.mj-hero__cap.is-right{align-items:flex-end;text-align:right;padding-right:clamp(24px,8vw,120px)}
.mj-hero__cap.is-dark{color:var(--mj-ink);text-shadow:none}
.mj-hero__cap h2{font-size:clamp(28px,5vw,64px);text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}
.mj-hero__cap p{font-size:clamp(13px,1.3vw,17px);letter-spacing:.06em;max-width:30ch;margin-bottom:26px}
.mj-hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:999px;
  background:rgba(255,255,255,.82);border:0;color:var(--mj-ink);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s var(--mj-ease),background .3s var(--mj-ease);z-index:3;padding:0
}
.mj-hero:hover .mj-hero__nav{opacity:1}
.mj-hero__nav:hover{background:#fff;border:0}
.mj-hero__nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.mj-hero__nav--prev{left:20px}
.mj-hero__nav--next{right:20px}
.mj-hero__dots{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:9px;z-index:3}
/*
 * The dot stays 9px, but the button no longer is. A 9x9 target is well under
 * the 24px minimum and these sit at the bottom edge of the hero where thumbs
 * land — the visual dot is now drawn with a pseudo-element inside a 26px
 * button, so the thing you aim at is much larger than the thing you see.
 */
.mj-hero__dots button{
  width:26px;height:26px;padding:0;border:0;background:none;border-radius:999px;
  display:flex;align-items:center;justify-content:center
}
.mj-hero__dots button::after{
  content:"";display:block;width:9px;height:9px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
  transition:width .3s var(--mj-ease),background .3s var(--mj-ease)
}
.mj-hero__dots button.is-active::after{background:#fff;width:26px}
.mj-hero__dots button:hover{background:none;border:0}
.mj-hero__dots button:hover::after{background:#fff;border-color:#fff}
@media(max-width:767px){
  .mj-hero__slide img{aspect-ratio:3/4}
  .mj-hero__nav{display:none}
  /* This block assumed dedicated mobile banners that fade to cream at the
     bottom. No mobile images were supplied, so the desktop photo is cropped to
     3/4 and the ink caption lands on whatever is there — grass, in the case of
     the co-ord banner. A soft scrim keeps the text legible on any photo while
     staying light enough not to look like a dark overlay. */
  .mj-hero__cap,.mj-hero__cap.is-left,.mj-hero__cap.is-right{
    align-items:center;text-align:center;justify-content:flex-end;padding:0 26px 52px
  }
  /* Only the dark-text variant gets ink. Forcing ink on every caption put
     #1c1c1c text on the black scrim below, which is unreadable. */
  .mj-hero__cap.is-dark{color:var(--mj-ink);text-shadow:none}
  .mj-hero__cap:not(.is-dark){color:#fff}
  .mj-hero__cap::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;z-index:0;
    background:linear-gradient(to top,rgba(255,255,255,.94),rgba(255,255,255,.72) 42%,rgba(255,255,255,0))
  }
  /* a light-text banner needs the opposite scrim */
  .mj-hero__cap:not(.is-dark)::before{
    background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.22) 42%,rgba(0,0,0,0))
  }
  .mj-hero__cap>*{position:relative;z-index:1}
  .mj-hero__cap h2{font-size:clamp(24px,7vw,34px)}
  .mj-hero__cap p{max-width:32ch;margin-bottom:20px}
  .mj-hero__cap .mj-btn--light{background:var(--mj-ink);border-color:var(--mj-ink);color:#fff}
  .mj-hero__dots{bottom:14px}
  .mj-hero__dots button{background:rgba(28,28,28,.28);border-color:rgba(28,28,28,.45)}
  .mj-hero__dots button.is-active{background:var(--mj-ink);border-color:var(--mj-ink)}
}

/* marquee strip */
.mj-marquee{background:var(--mj-blush);overflow:hidden;padding:13px 0;border-top:1px solid #fff;border-bottom:1px solid #fff}
.mj-marquee__row{display:flex;gap:64px;width:max-content;animation:mjSlide 34s linear infinite}
.mj-marquee span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:var(--mj-ink-soft)}
@keyframes mjSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   9. PRODUCT CARD
   ========================================================================== */
ul.products,.mj-products{
  list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,28px) clamp(10px,1.2vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr))
}
/* Skip layout and paint for cards scrolled out of view; the intrinsic size keeps
   the scrollbar honest while they are skipped. */
@supports (content-visibility:auto){
  ul.products>li{content-visibility:auto;contain-intrinsic-size:auto 520px}
  @media(max-width:767px){ul.products>li{contain-intrinsic-size:auto 340px}}
}
ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1024px){ul.products,.mj-products,ul.products.columns-3,ul.products.columns-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){ul.products,.mj-products,ul.products.columns-3,ul.products.columns-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mj-card{position:relative;text-align:center}
.mj-card__media{position:relative;overflow:hidden;background:var(--mj-cream);display:block;aspect-ratio:3/4}
.mj-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--mj-ease),opacity .5s var(--mj-ease)}
.mj-card__img--alt{position:absolute;inset:0;opacity:0}
.mj-card:hover .mj-card__img--alt{opacity:1}
.mj-card:hover .mj-card__media img{transform:scale(1.045)}
.mj-card__badge{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--mj-ink);color:#fff;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px
}
.mj-card__badge--sale{background:var(--mj-sale)}
.mj-card__badge--soldout{background:#fff;color:var(--mj-ink);border:1px solid var(--mj-line)}
.mj-card__wish{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:999px;
  background:rgba(255,255,255,.92);border:0;padding:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-6px);color:var(--mj-ink);
  transition:opacity .3s var(--mj-ease),transform .3s var(--mj-ease),background .3s var(--mj-ease),color .3s var(--mj-ease)
}
.mj-card:hover .mj-card__wish,.mj-card:focus-within .mj-card__wish,.mj-card__wish:focus-visible{opacity:1;transform:none}
.mj-card__wish:hover{background:#fff;border:0;color:var(--mj-rose)}
.mj-card__wish svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
.mj-card__wish.is-active{color:var(--mj-sale)}
.mj-card__wish.is-active svg{fill:currentColor}
.mj-card__sizes{
  position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(255,255,255,.94);
  display:flex;justify-content:center;flex-wrap:wrap;gap:4px;padding:10px 8px;
  transform:translateY(100%);transition:transform .35s var(--mj-ease)
}
.mj-card:hover .mj-card__sizes{transform:none}

.mj-card__body{padding:14px 6px 4px}
.mj-card__title{
  font-family:var(--mj-sans);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:400;margin:0 0 6px;line-height:1.5;
  /* Two lines are reserved whether or not the name needs them. "Navy Blue
     Co-ord" fits on one line and "Powder Pink Co-ord" does not, so without
     this the prices in a row sat at different heights — most visible in the
     search overlay, where a four-up row had prices on two baselines. */
  min-height:calc(2 * 1.5 * 12.5px)
}
.mj-card__price{font-size:13px;letter-spacing:.05em;color:var(--mj-ink)}
.mj-card__price del{color:var(--mj-muted);margin-right:7px;font-size:12px}
.mj-card__price ins{text-decoration:none;color:var(--mj-sale)}
.mj-card__quick{
  margin-top:12px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--mj-ink);padding-bottom:3px;display:inline-block;
  opacity:0;transform:translateY(5px);
  transition:opacity .3s var(--mj-ease),transform .3s var(--mj-ease)
}
.mj-card:hover .mj-card__quick,.mj-card:focus-within .mj-card__quick,.mj-card__quick:focus-visible{opacity:1;transform:none}
@media(max-width:767px){
  .mj-card__quick{opacity:1;transform:none;font-size:10px}
  /* quick add stays available on phones; shop.css restyles it as a static
     row. Hiding it here left that treatment dead and the feature invisible. */
  .mj-card__wish{opacity:1;transform:none;width:30px;height:30px}
}
/*
 * The reveal above was gated on width alone, so an iPad at 768–1024px got the
 * desktop treatment — hover-only controls on a device that cannot hover. The
 * wishlist heart and "Quick add" link were painted at opacity 0 and never
 * came back, which meant there was no way at all to save a piece from the grid
 * on a tablet. Keying off the pointer instead of the viewport covers every
 * touch device, and touch laptops too.
 */
@media(hover:none){
  .mj-card__wish{opacity:1;transform:none}
  .mj-card__quick{opacity:1;transform:none}
}

/* row of products with peek-scroll on mobile */
.mj-rail{margin:0 calc(var(--mj-gut) * -1);padding:0 var(--mj-gut)}
@media(max-width:767px){
  .mj-rail ul.products,.mj-rail .mj-products{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px
  }
  .mj-rail ul.products::-webkit-scrollbar{display:none}
  .mj-rail ul.products>li{flex:0 0 63%;scroll-snap-align:start}
}

/* ==========================================================================
   10. COLLECTION TILES
   ========================================================================== */
.mj-cats{display:grid;gap:clamp(12px,1.5vw,22px);grid-template-columns:repeat(4,1fr)}
.mj-cats--2{grid-template-columns:repeat(2,1fr)}
.mj-cats--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.mj-cats,.mj-cats--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mj-cats,.mj-cats--2,.mj-cats--3{grid-template-columns:1fr}}
.mj-cat{position:relative;display:block;overflow:hidden;background:var(--mj-blush)}
.mj-cat img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1s var(--mj-ease)}
.mj-cat:hover img{transform:scale(1.06)}
.mj-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 58%)}
.mj-cat__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 18px;text-align:center;color:#fff
}
.mj-cat__label strong{
  display:block;font-family:var(--mj-serif);font-size:clamp(18px,1.7vw,24px);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px
}
.mj-cat__label em{
  font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:3px
}
.mj-cat--wide img{aspect-ratio:16/10}

/* editorial split banner */
.mj-split{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.mj-split--flip .mj-split__media{order:2}
.mj-split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.mj-split__body{padding:clamp(30px,6vw,90px);text-align:center}
.mj-split__body h2{text-transform:uppercase;letter-spacing:.09em}
.mj-split__body p{color:var(--mj-ink-soft);max-width:44ch;margin:0 auto 26px}
@media(max-width:860px){.mj-split{grid-template-columns:1fr}.mj-split--flip .mj-split__media{order:0}}

/* value props */
.mj-props{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,40px);text-align:center}
@media(max-width:860px){.mj-props{grid-template-columns:repeat(2,1fr)}}
.mj-prop svg{width:30px;height:30px;stroke:var(--mj-rose);fill:none;stroke-width:1.2;margin:0 auto 14px}
.mj-prop strong{display:block;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:7px;font-weight:400}
.mj-prop span{font-size:13px;color:var(--mj-muted);line-height:1.65}

/* newsletter */
.mj-news{text-align:center;max-width:560px;margin:0 auto}
/*
 * One flex row, one underline. The form is a plain block so that .mj-form-msg
 * can sit above as a sibling; .mj-news__row is the flex container and the only
 * thing carrying a rule. The previous shape made the *form* the flex container
 * and gave it the underline, while the row inside was a flex item that shrank
 * to its content — so a 560px form held a 246px row, each drawing its own line
 * of a different length, and the field never had anything to fill.
 */
.mj-news form{display:block;margin-top:22px}
.mj-news__row{
  display:flex;align-items:center;gap:0;
  border-bottom:1px solid var(--mj-ink);transition:border-color .2s var(--mj-ease)
}
.mj-news__row:focus-within{border-bottom-color:var(--mj-rose-text)}
.mj-news input[type=email]{
  border:0;background:transparent;letter-spacing:.08em;
  flex:1 1 auto;width:auto;min-width:0;text-align:center;padding-left:0;padding-right:0
}
/* the footer column reads as a left-aligned block, not a centred panel */
.mj-news__row--left input[type=email]{text-align:left}
.mj-news input[type=email]:focus-visible{outline:0}
.mj-news button{background:none;border:0;color:var(--mj-ink);padding:0 4px 0 14px;font-size:11px;letter-spacing:.2em;white-space:nowrap;flex:0 0 auto}
.mj-news button:hover{background:none;border:0;color:var(--mj-rose)}

/* instagram */
.mj-insta{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
@media(max-width:900px){.mj-insta{grid-template-columns:repeat(3,1fr)}}
.mj-insta a{position:relative;display:block;overflow:hidden}
.mj-insta img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .8s var(--mj-ease)}
.mj-insta a:hover img{transform:scale(1.08)}
.mj-insta a::after{
  content:"";position:absolute;inset:0;background:rgba(28,28,28,.22);opacity:0;transition:opacity .3s var(--mj-ease)
}
.mj-insta a:hover::after{opacity:1}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.mj-footer{background:var(--mj-cream);border-top:1px solid var(--mj-line);padding:clamp(44px,5vw,72px) 0 0;font-size:13.5px}
.mj-footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(24px,3vw,52px);
  padding-bottom:clamp(32px,4vw,52px)
}
@media(max-width:960px){.mj-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mj-footer__grid{grid-template-columns:1fr;text-align:center}}
.mj-footer h4{
  font-family:var(--mj-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 18px;font-weight:400;color:var(--mj-ink)
}
.mj-footer ul{list-style:none;margin:0;padding:0}
.mj-footer li{margin-bottom:9px}
.mj-footer a{color:var(--mj-ink-soft)}
.mj-footer a:hover{color:var(--mj-ink)}
/* width:auto is required, not optional: the global `img{height:auto}` is
   overridden by the fixed height here, so without it the width stays at
   whatever candidate srcset picked (364px) and the logo stretches flat. */
.mj-footer__brand img{height:64px;width:auto;margin-bottom:16px}
@media(max-width:560px){.mj-footer__brand img{margin:0 auto 16px}}
.mj-footer__brand p{color:var(--mj-muted);max-width:34ch;font-size:13px}
.mj-social{display:flex;gap:14px;margin-top:18px}
@media(max-width:560px){.mj-social{justify-content:center}}
.mj-social a{
  width:36px;height:36px;border:1px solid var(--mj-line);display:flex;align-items:center;justify-content:center
}
.mj-social a:hover{border-color:var(--mj-ink);background:var(--mj-ink);color:#fff}
.mj-social svg{width:16px;height:16px;fill:currentColor}
.mj-footer__bar{
  border-top:1px solid var(--mj-line);padding:20px 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mj-muted)
}
.mj-pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mj-pay span{
  border:1px solid var(--mj-line);padding:4px 9px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;background:#fff;color:var(--mj-ink-soft)
}

/* whatsapp float */
.mj-wa{
  position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:999px;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.34);transition:transform .3s var(--mj-ease)
}
.mj-wa:hover{transform:scale(1.08);color:#fff}
.mj-wa svg{width:29px;height:29px;fill:currentColor}
@media(max-width:767px){.mj-wa{width:48px;height:48px;bottom:14px;right:14px}.mj-wa svg{width:26px;height:26px}}

/* ==========================================================================
   12. PAGE / POST
   ========================================================================== */
.mj-page-head{background:var(--mj-blush);padding:clamp(34px,5vw,64px) 0;text-align:center}
.mj-page-head h1{text-transform:uppercase;letter-spacing:.08em;margin:0}
.mj-page-head p{color:var(--mj-ink-soft);margin:12px 0 0;font-size:14px}
.mj-breadcrumb,.woocommerce-breadcrumb{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-muted);
  margin:0 0 8px;text-align:center
}
.mj-breadcrumb a,.woocommerce-breadcrumb a{color:var(--mj-muted)}
.mj-breadcrumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--mj-ink)}
.mj-entry{max-width:820px;margin:0 auto}
.mj-entry h2,.mj-entry h3{margin-top:1.8em}
.mj-entry img{margin:1.6em 0}
.mj-entry table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:13.5px}
.mj-entry th,.mj-entry td{border:1px solid var(--mj-line);padding:11px 13px;text-align:left}
.mj-entry th{background:var(--mj-cream);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.mj-entry blockquote{
  margin:1.8em 0;padding:6px 0 6px 26px;border-left:2px solid var(--mj-rose);
  font-family:var(--mj-serif);font-size:20px;color:var(--mj-ink-soft)
}

/* accordion (FAQ / policies) */
.mj-acc{border-top:1px solid var(--mj-line)}
.mj-acc__item{border-bottom:1px solid var(--mj-line)}
.mj-acc__head{
  width:100%;background:none;border:0;color:var(--mj-ink);text-align:left;padding:19px 44px 19px 0;
  position:relative;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  display:block;line-height:1.5
}
.mj-acc__head:hover{background:none;border:0;color:var(--mj-rose)}
.mj-acc__head::before,.mj-acc__head::after{
  content:"";position:absolute;right:8px;top:50%;background:currentColor;transition:transform .3s var(--mj-ease)
}
.mj-acc__head::before{width:13px;height:1px;margin-right:-6.5px}
.mj-acc__head::after{width:1px;height:13px;margin-top:-6.5px;margin-right:0}
.mj-acc__item.is-open .mj-acc__head::after{transform:rotate(90deg);opacity:0}
.mj-acc__body{display:none;padding:0 0 22px;color:var(--mj-ink-soft);font-size:14px}
.mj-acc__item.is-open .mj-acc__body{display:block}

/* contact page */
.mj-contact{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:860px){.mj-contact{grid-template-columns:1fr}}
/*
 * "Get in touch" used to sit 19px lower than "Send us a message". The info
 * column leads with a CONTACT eyebrow and the form column leads straight with
 * its heading; the eyebrow's own 19px of height pushed everything below it
 * down, and its 12px bottom margin collapsed into the heading's 68px top
 * margin rather than adding to it. Taking the eyebrow out of the flow puts it
 * inside the space that top margin was already reserving — visible in the same
 * place, but no longer shifting the heading — so the two headings share a line.
 */
.mj-contact__info{position:relative}
.mj-contact__info>.mj-eyebrow:first-child{position:absolute;top:0;left:0;margin:0}
@media(max-width:860px){
  /* stacked, there is no second column to line up with and the absolute
     eyebrow would overlap the form above it */
  .mj-contact__info>.mj-eyebrow:first-child{position:static;margin:0 0 12px}
}
.mj-contact__info dl{margin:0}
.mj-contact__info dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mj-muted);margin-top:22px}
.mj-contact__info dd{margin:6px 0 0;font-size:15px}
.mj-form .mj-field{margin-bottom:16px}
.mj-form .mj-note{font-size:12.5px;color:var(--mj-muted)}
.mj-alert{padding:14px 18px;border:1px solid var(--mj-line);background:var(--mj-cream);margin-bottom:20px;font-size:13.5px}
.mj-alert--ok{border-color:#b9d8c0;background:#f3faf5}
.mj-alert--err{border-color:#e3bcbe;background:#fdf4f4}

/* Wide data tables (the size charts) scroll inside their own box rather than
   dragging the page sideways on a phone. */
.mj-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mj-table-scroll>table{margin-bottom:0}

/* 404 / empty */
.mj-empty{text-align:center;padding:clamp(50px,9vw,120px) 0}
.mj-empty h1{font-size:clamp(60px,12vw,140px);color:var(--mj-blush-deep);line-height:1;margin-bottom:10px}
/* The empty-cart bag. Sized here as well as by the icon's own attributes so it
   matches the drawer's empty state rather than sitting at the 20px fallback. */
.mj-empty>svg{width:40px;height:40px;stroke:var(--mj-line);fill:none;stroke-width:1.2;margin:0 auto}

/* pagination */
.mj-pager,.woocommerce-pagination{margin:clamp(34px,4vw,56px) 0 0;text-align:center}
.mj-pager ul,.woocommerce-pagination ul{
  list-style:none;display:inline-flex;gap:6px;padding:0;margin:0;border:0!important
}
.mj-pager a,.mj-pager span,
.woocommerce-pagination ul li a,.woocommerce-pagination ul li span{
  min-width:40px;height:40px;display:flex!important;align-items:center;justify-content:center;
  border:1px solid var(--mj-line);font-size:13px;padding:0 8px!important;background:#fff
}
.mj-pager .current,.woocommerce-pagination ul li span.current{background:var(--mj-ink);color:#fff;border-color:var(--mj-ink)}
.woocommerce-pagination ul li{border:0!important;margin:0!important}
.woocommerce-pagination ul li a:hover{background:var(--mj-blush);border-color:var(--mj-blush)}

/* utility */
.mj-hide-desktop{display:none}
@media(max-width:1024px){
  .mj-nav{display:none}
  .mj-burger{display:flex}
  .mj-hide-desktop{display:flex}
  .mj-header__inner{height:72px}
  .mj-logo img{height:54px}
}
@media(max-width:600px){
  body{font-size:14.5px}
  .mj-logo img{height:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .mj-marquee__row{animation:none;transform:none}
  .mj-hero__track{transition:none}
  .mj-card:hover .mj-card__media img{transform:none}
}
@media print{.mj-header,.mj-footer,.mj-wa,.mj-announce{display:none!important}}