/* ==========================================================================
   Estel Jewelry — design tokens

   Values are taken from the reference storefront's own custom properties so
   the palette matches rather than approximates: gold #ab8c52 on white, near
   black #212121 ink, a teal announcement bar and a sand utility strip.
   ========================================================================== */

:root {
  --esj-gold: #ab8c52;
  --esj-gold-dark: #806430;
  --esj-gold-light: #e8d4ae;
  --esj-gold-fade: rgba(171, 140, 82, 0.08);
  --esj-teal: #416165;
  --esj-sand: #dcc9a4;

  --esj-ink: #212121;
  --esj-ink-soft: #4a4a4a;
  --esj-muted: #6f6f6f;
  --esj-faint: #9a9a9a;

  --esj-bg: #ffffff;
  --esj-bg-soft: #f7f9fa;
  --esj-bg-grey: #f2f2f2;
  --esj-rule: #e6e6e6;
  --esj-rule-soft: #f0f0f0;
  --esj-sale: #b3261e;

  --esj-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --esj-serif: "Cardo", Georgia, "Times New Roman", serif;

  --esj-max: 1460px;
  --esj-gutter: 20px;

  --esj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--esj-bg);
  color: var(--esj-ink);
  font-family: var(--esj-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--esj-serif);
  font-weight: 400;
  line-height: 1.15;
}

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--esj-rule); margin: 2rem 0; }

::selection { background: var(--esj-gold); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.esj-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--esj-ink); color: #fff; padding: 12px 20px;
}
.esj-skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--esj-gold); outline-offset: 2px; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.esj-container {
  width: 100%;
  max-width: var(--esj-max);
  margin: 0 auto;
  padding: 0 var(--esj-gutter);
}

.esj-container--wide { max-width: 1760px; }
.esj-container--narrow { max-width: 900px; }

.esj-section { padding: 76px 0; }
.esj-section--tight { padding: 46px 0; }
.esj-section--flush { padding: 0; }
.esj-section--soft { background: var(--esj-bg-soft); }

.esj-section__head { text-align: center; margin-bottom: 38px; }

.esj-section__title {
  font-family: var(--esj-serif);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}

.esj-section__sub {
  max-width: 760px;
  margin: 0 auto;
  color: var(--esj-ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.esj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 34px;
  background: var(--esj-gold);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--esj-gold);
  box-shadow: 0 0 0 rgba(171, 140, 82, 0);
  transition: background .25s var(--esj-ease), border-color .25s var(--esj-ease), box-shadow .25s var(--esj-ease), transform .25s var(--esj-ease);
}
.esj-btn:hover {
  background: var(--esj-gold-dark);
  border-color: var(--esj-gold-dark);
  box-shadow: 0 10px 24px rgba(128, 100, 48, 0.28);
  transform: translateY(-1px);
}
.esj-btn svg { flex: none; }

.esj-btn--ghost {
  background: transparent;
  color: var(--esj-gold);
}
.esj-btn--ghost:hover { background: var(--esj-gold); color: #fff; }

.esj-btn--dark {
  background: var(--esj-ink);
  border-color: var(--esj-ink);
  color: #fff;
}
.esj-btn--dark:hover { background: #000; border-color: #000; }

.esj-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--esj-ink);
}
.esj-btn--light:hover { background: var(--esj-gold); border-color: var(--esj-gold); color: #fff; }

/* The hero sits on photography, so its button is a pill rather than a slab. */
.esj-btn--pill { border-radius: 999px; padding: 15px 38px; }

.esj-btn--wide { width: 100%; }

.esj-link-underline {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.esj-link-underline:hover { color: var(--esj-gold); }

.esj-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--esj-ink-soft);
  margin-bottom: 16px;
}

/* ==========================================================================
   Announcement bar + utility strip
   ========================================================================== */

.esj-announce {
  background: var(--esj-teal);
  color: #fff;
  text-align: center;
}

.esj-announce a,
.esj-announce span {
  display: block;
  padding: 11px 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.esj-announce a:hover { color: var(--esj-gold-light); }

.esj-utility {
  background: var(--esj-sand);
  color: var(--esj-ink);
}

.esj-utility__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  gap: 16px;
}

.esj-utility__actions { display: flex; align-items: center; gap: 4px; }

.esj-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--esj-ink);
  transition: color .2s var(--esj-ease);
}
.esj-iconbtn:hover { color: var(--esj-gold-dark); }

.esj-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--esj-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.esj-badge[data-count="0"] { display: none; }

/* Inline search that expands out of the utility strip. */
.esj-searchtoggle { display: inline-flex; align-items: center; gap: 10px; }

.esj-searchbar {
  display: none;
  border-top: 1px solid rgba(33, 33, 33, 0.12);
  background: var(--esj-sand);
}
.esj-searchbar.is-open { display: block; }

.esj-searchbar__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
}

.esj-searchbar__input {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--esj-ink);
  background: transparent;
  padding: 10px 2px;
  font-family: var(--esj-serif);
  font-size: 22px;
  color: var(--esj-ink);
}
.esj-searchbar__input:focus { outline: none; border-bottom-color: var(--esj-gold-dark); }
.esj-searchbar__input::placeholder { color: rgba(33, 33, 33, 0.45); }

/* ==========================================================================
   Masthead — centred wordmark flanked by house plaques
   ========================================================================== */

.esj-header {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--esj-rule-soft);
}

.esj-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 0 18px;
}

.esj-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  padding: 10px 14px;
  border: 1px solid var(--esj-rule);
  font-family: var(--esj-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: var(--esj-ink);
  transition: border-color .25s var(--esj-ease);
}
.esj-plaque:hover { border-color: var(--esj-gold); }
.esj-plaque small {
  display: block;
  font-family: var(--esj-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--esj-muted);
  margin-top: 3px;
}
.esj-plaque--right { justify-self: end; }
.esj-plaque__mark { display: block; margin: 0 auto; max-width: 100%; height: auto; }
/* Badge zyrtare "flush" — pa kornizën/padding-un e "esj-plaque" bazë, si
   vetë grafika e markës (p.sh. distintivi "Official Jeweler"), jo si
   kuti tekst e ngjashme me plaketën e FOPE. TUDOR-i majtas dhe Rolex-i
   djathtas ndajnë të njëjtën kuti 150×75; `contain` i mban të dy brenda
   saj pa i shtrembëruar, meqë burimet nuk kanë saktësisht të njëjtin
   raport (240×120 kundrejt 305×137). */
.esj-plaque--flush {
  border: 0;
  padding: 0;
  height: 75px;
  flex-direction: column;
  gap: 2px;
}
.esj-plaque--flush:hover { border: 0; }
.esj-plaque--flush .esj-plaque__mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.esj-logo { text-align: center; }

.esj-logo__mark {
  display: block;
  font-family: var(--esj-serif);
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esj-ink);
}

.esj-logo__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--esj-muted);
}
.esj-logo__rule::before,
.esj-logo__rule::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--esj-gold);
}

.esj-logo__tagline {
  display: block;
  margin-top: 10px;
  font-family: var(--esj-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--esj-ink-soft);
}

.esj-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; }

/* ==========================================================================
   Primary navigation + mega menu
   ========================================================================== */

.esj-nav { border-top: 1px solid var(--esj-rule-soft); }

.esj-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esj-nav__link {
  display: block;
  padding: 15px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--esj-ink);
  transition: color .2s var(--esj-ease);
}
.esj-nav__link:hover { color: var(--esj-gold-dark); }

.esj-nav__item--sale .esj-nav__link { color: var(--esj-gold); font-weight: 600; }
.esj-nav__item--sale .esj-nav__link:hover { color: var(--esj-gold-dark); }

.esj-nav__item { position: static; }

.esj-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--esj-rule-soft);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--esj-ease), transform .22s var(--esj-ease), visibility .22s;
}

.esj-nav__item:hover > .esj-mega,
.esj-nav__item:focus-within > .esj-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.esj-mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 380px;
  gap: 40px;
  padding: 40px var(--esj-gutter) 46px;
  max-width: var(--esj-max);
  margin: 0 auto;
}

.esj-mega__title {
  font-family: var(--esj-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--esj-muted);
  margin: 0 0 16px;
}

.esj-mega__list { list-style: none; margin: 0; padding: 0; }
.esj-mega__list li { margin-bottom: 10px; }
.esj-mega__list a { font-size: 14.5px; color: var(--esj-ink); }
.esj-mega__list a:hover { color: var(--esj-gold-dark); }

.esj-mega__feature { position: relative; }
.esj-mega__feature img { width: 100%; height: 260px; object-fit: cover; }
.esj-mega__feature figcaption {
  margin-top: 12px;
  font-family: var(--esj-serif);
  font-size: 19px;
}
.esj-mega__feature .esj-link-underline { margin-top: 6px; font-size: 11.5px; }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.esj-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(400px, 88vw);
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .32s var(--esj-ease);
  overflow-y: auto;
}
.esj-drawer.is-open { transform: translateX(0); }

.esj-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--esj-rule);
}

.esj-drawer__search { padding: 16px 20px; border-bottom: 1px solid var(--esj-rule); }

.esj-drawer__form { display: flex; align-items: center; gap: 8px; }
.esj-drawer__form input {
  flex: 1;
  border: 1px solid var(--esj-rule);
  padding: 11px 12px;
  font: inherit;
}

.esj-mobilenav { list-style: none; margin: 0; padding: 8px 0; }
.esj-mobilenav li { border-bottom: 1px solid var(--esj-rule-soft); }
.esj-mobilenav > li > a,
.esj-mobilenav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  font-size: 15.5px;
  text-align: left;
}
.esj-mobilenav__panel { display: none; padding: 0 0 10px; background: var(--esj-bg-soft); }
.esj-mobilenav__panel.is-open { display: block; }
.esj-mobilenav__panel a { display: block; padding: 10px 32px; font-size: 14.5px; color: var(--esj-ink-soft); }
.esj-mobilenav__toggle svg { transition: transform .25s var(--esj-ease); }
.esj-mobilenav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.esj-drawer__foot { margin-top: auto; padding: 22px 20px; background: var(--esj-bg-soft); }

.esj-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--esj-ease), visibility .3s;
}
.esj-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero
   ========================================================================== */

.esj-hero { position: relative; background: var(--esj-bg-grey); }

/* The hero art is a finished campaign slide (see front-page.php), so it runs
   full-bleed and pristine — no overlay, no scrim, no cropping to a fixed
   band — and the real, working headline sits in the caption band below it. */
.esj-hero__media { display: block; background: var(--esj-bg-grey); }
.esj-hero__media img { width: 100%; height: auto; }

.esj-hero__caption {
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 20px 60px;
  text-align: center;
}

.esj-hero__eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--esj-gold-dark);
  margin-bottom: 14px;
}

.esj-hero__title {
  font-family: var(--esj-serif);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 0 0 16px;
}

.esj-hero__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--esj-ink-soft);
  margin: 0 auto 26px;
  max-width: 460px;
}

/* ==========================================================================
   Service strip
   ========================================================================== */

.esj-assurance { border-bottom: 1px solid var(--esj-rule-soft); }

.esj-assurance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--esj-rule-soft);
}

.esj-assurance__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px;
  background: #fff;
}
.esj-assurance__item svg { flex: none; color: var(--esj-gold); }
.esj-assurance__item h4 {
  font-family: var(--esj-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 3px;
}
.esj-assurance__item p { margin: 0; font-size: 13.5px; color: var(--esj-muted); line-height: 1.45; }

/* ==========================================================================
   Editorial split — image one side, copy the other
   ========================================================================== */

.esj-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 18px;
}

.esj-editorial--reverse .esj-editorial__media { order: 2; }

.esj-editorial__media { position: relative; }
.esj-editorial__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

.esj-editorial__copy {
  padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 110px);
  text-align: center;
}

.esj-editorial__title {
  font-family: var(--esj-serif);
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
  margin: 0 0 18px;
}

.esj-editorial__text {
  color: var(--esj-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 auto 28px;
  max-width: 520px;
}

/* ==========================================================================
   Full-bleed campaign banner
   ========================================================================== */

.esj-campaign { position: relative; display: block; background: var(--esj-ink); }

.esj-campaign__media { position: relative; min-height: clamp(320px, 38vw, 520px); }
.esj-campaign__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.esj-campaign__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(320px, 38vw, 520px);
  padding: 50px 20px;
  color: #fff;
}

.esj-campaign__wordmark {
  font-family: var(--esj-serif);
  font-size: clamp(34px, 5vw, 66px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}

.esj-campaign__text {
  font-size: 16px;
  margin-bottom: 26px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Designer grid
   ========================================================================== */

.esj-designers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.esj-designer {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--esj-bg-grey);
}

.esj-designer__media { aspect-ratio: 1 / 1; }
.esj-designer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--esj-ease);
}
.esj-designer:hover .esj-designer__media img { transform: scale(1.045); }

.esj-designer__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  font-family: var(--esj-serif);
  font-size: clamp(17px, 1.5vw, 24px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Tabbed product rail
   ========================================================================== */

.esj-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 34px;
}

.esj-tabs__btn {
  padding: 4px 0 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--esj-muted);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--esj-ease), border-color .2s var(--esj-ease);
}
.esj-tabs__btn:hover { color: var(--esj-ink); }
.esj-tabs__btn.is-active { color: var(--esj-ink); border-bottom-color: var(--esj-ink); }

.esj-panel { display: none; }
.esj-panel.is-active { display: block; }

.esj-rail { position: relative; }

.esj-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.esj-rail__track::-webkit-scrollbar { display: none; }
.esj-rail__track > * { scroll-snap-align: start; }

/* Every item is an implicit column sized to a fraction of the track, so the
   rail shows a fixed number of cards and scrolls the rest. Naming template
   columns instead would let the remaining items collapse into slivers, which
   is what a rail must never do. */
@media (min-width: 900px) {
  .esj-rail__track { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
}

@media (min-width: 1200px) {
  .esj-rail__track { grid-auto-columns: calc((100% - 3 * 22px) / 4); }
}

@media (min-width: 1600px) {
  .esj-rail__track { grid-auto-columns: calc((100% - 4 * 22px) / 5); }
}

.esj-rail__nav {
  position: absolute;
  top: 38%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--esj-ink);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
  transition: background .2s var(--esj-ease), color .2s var(--esj-ease);
}
.esj-rail__nav:hover { background: var(--esj-gold); color: #fff; }
.esj-rail__nav--prev { left: -18px; }
.esj-rail__nav--next { right: -18px; }
.esj-rail__nav[hidden] { display: none; }

/* Lead-in tile: a lifestyle frame that opens the rail and links to the edit. */
.esj-railintro {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  background: var(--esj-bg-grey);
}
.esj-railintro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--esj-ease);
}
.esj-railintro:hover img { transform: scale(1.04); }
.esj-railintro__btn {
  position: relative;
  z-index: 2;
  margin: 0 0 26px;
  padding: 13px 28px;
  background: rgba(171, 140, 82, 0.92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   Product card
   ========================================================================== */

/* A soft lift on hover — shadow rather than a border, so it reads as a piece
   catching the light rather than a UI affordance. */
.esj-product {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--esj-ease);
}
.esj-product:hover { transform: translateY(-3px); }

.esj-product__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--esj-bg-grey);
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow .35s var(--esj-ease);
}
.esj-product:hover .esj-product__media { box-shadow: 0 22px 36px rgba(33, 33, 33, 0.12); }

.esj-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s var(--esj-ease), transform .8s var(--esj-ease);
}
.esj-product:hover .esj-product__media img { transform: scale(1.055); }

.esj-product__media img.esj-product__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.esj-product:hover .esj-product__alt { opacity: 1; }

.esj-product__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  background: #fff;
  color: var(--esj-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.esj-product__flag--sale { background: var(--esj-sale); color: #fff; }

.esj-product__save {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--esj-ink);
  opacity: 0;
  transition: opacity .25s var(--esj-ease), color .2s var(--esj-ease);
}
.esj-product:hover .esj-product__save { opacity: 1; }
.esj-product__save:hover { color: var(--esj-gold); }

.esj-product__body { padding: 16px 8px 4px; text-align: center; }

.esj-product__designer {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--esj-faint);
  margin-bottom: 7px;
}

.esj-product__title {
  font-family: var(--esj-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 9px;
}
.esj-product__title a:hover { color: var(--esj-gold-dark); }

.esj-product__price { font-size: 14.5px; font-weight: 600; }
.esj-product__price del { color: var(--esj-faint); font-weight: 400; margin-right: 8px; }
.esj-product__price ins { color: var(--esj-sale); text-decoration: none; }

/* ==========================================================================
   Category tiles
   ========================================================================== */

.esj-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.esj-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--esj-bg-grey);
}

.esj-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--esj-ease);
}
.esj-cat:hover img { transform: scale(1.05); }

/* A soft floor gradient rather than a flat wash: the label stays readable
   without greying out the photograph above it. */
.esj-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.34) 100%);
}

.esj-cat__label {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  font-size: clamp(16px, 1.7vw, 25px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Gift strip — four frames read as one image band
   ========================================================================== */

.esj-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.esj-strip__frame { aspect-ratio: 3 / 4; overflow: hidden; background: var(--esj-bg-grey); }
.esj-strip__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Newsletter + locations
   ========================================================================== */

.esj-newsletter { background: var(--esj-bg-soft); text-align: center; }

.esj-newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 26px auto 12px;
}
.esj-newsletter__form input {
  flex: 1;
  border: 1px solid var(--esj-rule);
  background: #fff;
  padding: 15px 16px;
  font: inherit;
}
.esj-newsletter__form input:focus { outline: none; border-color: var(--esj-gold); }
.esj-newsletter__note { font-size: 12.5px; color: var(--esj-muted); margin: 0; }

.esj-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.esj-location {
  padding: 30px 28px;
  border: 1px solid var(--esj-rule);
  text-align: center;
}
.esj-location h3 {
  font-family: var(--esj-serif);
  font-size: 23px;
  margin: 0 0 10px;
}
.esj-location p { font-size: 14px; color: var(--esj-muted); margin: 0 0 6px; }
.esj-location .esj-link-underline { margin-top: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.esj-footer { border-top: 1px solid var(--esj-rule); padding-top: 64px; }

.esj-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 38px;
  padding-bottom: 52px;
}

.esj-footer__brand .esj-logo__mark { font-size: 30px; text-align: left; }
.esj-footer__brand p { font-size: 14px; color: var(--esj-muted); margin: 16px 0 0; max-width: 300px; }

.esj-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.esj-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--esj-rule);
  border-radius: 50%;
  color: var(--esj-ink);
  transition: background .2s var(--esj-ease), color .2s var(--esj-ease), border-color .2s var(--esj-ease);
}
.esj-footer__social a:hover { background: var(--esj-gold); border-color: var(--esj-gold); color: #fff; }

.esj-footer__title {
  font-family: var(--esj-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.esj-footer__list { list-style: none; margin: 0; padding: 0; }
.esj-footer__list li { margin-bottom: 11px; }
.esj-footer__list a { font-size: 14px; color: var(--esj-ink-soft); }
.esj-footer__list a:hover { color: var(--esj-gold-dark); }

.esj-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--esj-rule-soft);
  font-size: 13px;
  color: var(--esj-muted);
}

/* ==========================================================================
   Demo notice
   ========================================================================== */

.esj-demo {
  background: var(--esj-ink);
  color: #fff;
  font-size: 12.5px;
  text-align: center;
}
.esj-demo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  flex-wrap: wrap;
}
.esj-demo__tag {
  padding: 2px 9px;
  background: var(--esj-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   Breadcrumbs + generic page shells
   ========================================================================== */

.esj-crumbs { padding: 18px 0; font-size: 12.5px; color: var(--esj-muted); }
.esj-crumbs a:hover { color: var(--esj-gold-dark); }
.esj-crumbs__sep { margin: 0 8px; color: var(--esj-faint); }

.esj-page { padding: 40px 0 80px; }
.esj-page__title { font-size: clamp(30px, 3.4vw, 46px); text-align: center; margin-bottom: 28px; }
.esj-prose { font-size: 16px; line-height: 1.75; color: var(--esj-ink-soft); }
.esj-prose h2 { font-size: 30px; margin-top: 1.6em; }
.esj-prose h3 { font-size: 23px; margin-top: 1.4em; }
.esj-prose a { color: var(--esj-gold-dark); text-decoration: underline; }

/* A button component can end up nested in .esj-prose — the cart page's
   "return to shop" button is rendered inside the_content(), for one — and
   must keep looking like a button rather than an editorial link. */
.esj-prose .esj-btn,
.esj-prose .esj-btn:hover,
.esj-prose .esj-link-underline { text-decoration: none; }
.esj-prose .esj-btn { color: #fff; }
.esj-prose .esj-btn--ghost { color: var(--esj-gold); }
.esj-prose .esj-btn--ghost:hover { color: #fff; }

/* ==========================================================================
   WooCommerce surfaces
   ========================================================================== */

.esj-shop { padding: 30px 0 80px; }

.esj-shop__head { text-align: center; margin-bottom: 34px; }
.esj-shop__title { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 10px; }

.esj-shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--esj-rule);
  border-bottom: 1px solid var(--esj-rule);
  margin-bottom: 34px;
  font-size: 13.5px;
  color: var(--esj-muted);
}

/* The sort control is a bare <select class="orderby"> straight from
   WooCommerce, styled with no theme hook at all, so it rendered in the raw
   OS widget chrome. `appearance: none` drops that and a hand-drawn chevron
   (an inline SVG background image, since the native one goes with it)
   replaces the arrow. */
.esj-shop__bar select.orderby,
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' fill='none' stroke='%234a4a4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--esj-rule);
  padding: 11px 38px 11px 16px;
  font-family: var(--esj-sans);
  font-size: 13px;
  color: var(--esj-ink);
  cursor: pointer;
  transition: border-color .2s var(--esj-ease);
}
.esj-shop__bar select.orderby:hover,
.woocommerce-ordering select.orderby:hover { border-color: var(--esj-gold); }
.esj-shop__bar select.orderby:focus,
.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--esj-gold);
}

/* Shop filters */
.esj-shop__content {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.esj-shop__toolbar {
  border-bottom: 1px solid var(--esj-rule);
  border-top: 1px solid var(--esj-rule);
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 26px;
}
.esj-shop__toolbar .woocommerce-ordering { align-self: center; justify-self: end; margin: 0; padding-right: 0; }
.esj-shop__filter-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--esj-rule);
  color: var(--esj-ink);
  cursor: pointer;
  display: flex;
  font: 600 11px/1 var(--esj-sans);
  gap: 8px;
  letter-spacing: .08em;
  padding: 20px 0;
  text-align: left;
  text-transform: uppercase;
}
.esj-shop__filter-toggle span:last-child { color: var(--esj-muted); font-size: 15px; margin-left: 3px; }
.esj-shop__content.is-filters-hidden { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.esj-shop__content.is-filters-hidden .esj-filters { display: none; }
.esj-filters {
  background: #fff;
  border: 1px solid var(--esj-rule);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(33, 33, 33, 0.05);
  padding: 4px 22px;
}
.esj-filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--esj-rule);
  margin-bottom: 4px;
}
.esj-filters__head h2 { font-family: var(--esj-serif); font-size: 23px; margin: 0; }
.esj-filters__head a {
  color: var(--esj-muted);
  font-family: var(--esj-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s var(--esj-ease);
}
.esj-filters__head a:hover { color: var(--esj-gold); }
.esj-filter { border-top: 1px solid var(--esj-rule); }
.esj-filter summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 17px 0;
  font-family: var(--esj-serif);
  font-size: 18px;
  transition: color .2s var(--esj-ease);
}
.esj-filter summary:hover { color: var(--esj-gold); }
.esj-filter summary::-webkit-details-marker { display: none; }
.esj-filter summary::after {
  content: '+';
  color: var(--esj-gold);
  font-family: var(--esj-sans);
  font-size: 19px;
  font-weight: 300;
  transition: transform .25s var(--esj-ease);
}
.esj-filter[open] summary::after { content: '−'; }
.esj-filter__options { display: grid; gap: 3px; padding: 2px 0 16px; }
.esj-filter__options label,
.esj-filter__sale {
  align-items: center;
  color: var(--esj-ink-soft);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  gap: 9px;
  line-height: 1.3;
  padding: 8px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  transition: background-color .2s var(--esj-ease), color .2s var(--esj-ease);
}
.esj-filter__options label:hover,
.esj-filter__sale:hover { background: var(--esj-gold-fade); color: var(--esj-ink); }
.esj-filter__options label > span { display: flex; align-items: center; gap: 9px; flex: 1; }
.esj-filter__options label:has(input:checked) { color: var(--esj-ink); font-weight: 600; }
.esj-filter input[type="checkbox"] { accent-color: var(--esj-gold); height: 15px; margin: 0; width: 15px; flex: none; }
.esj-filter__options label span em {
  background: var(--esj-rule);
  border-radius: 999px;
  color: var(--esj-ink-soft);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
}
.esj-filter__options label:hover span em { background: #fff; }
.esj-filter__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0 18px; }
.esj-filter__prices label { color: var(--esj-muted); display: grid; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; gap: 7px; }
.esj-filter__prices input {
  border: 1px solid var(--esj-rule);
  border-radius: 6px;
  color: var(--esj-ink);
  font: inherit;
  padding: 10px 12px;
  width: 100%;
  transition: border-color .2s var(--esj-ease), box-shadow .2s var(--esj-ease);
}
.esj-filter__prices input:focus { border-color: var(--esj-gold); outline: none; box-shadow: 0 0 0 3px rgba(171, 140, 82, 0.15); }
.esj-filter__select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' fill='none' stroke='%234a4a4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--esj-rule);
  border-radius: 6px;
  color: var(--esj-ink-soft);
  font: inherit;
  padding: 11px 36px 11px 13px;
  width: 100%;
  transition: border-color .2s var(--esj-ease);
}
.esj-filter__select:hover, .esj-filter__select:focus { border-color: var(--esj-gold); outline: none; }
.esj-filter__sale { border-top: 1px solid var(--esj-rule); padding: 16px 6px; margin: 0 -6px; }
.esj-filters__submit { border: 0; border-radius: 6px; cursor: pointer; font: inherit; margin: 6px 0 22px; width: 100%; }

/* Custom dropdown — the closed <select> above is styled well enough, but a
   browser draws its OPEN option list with its own OS chrome that no
   stylesheet reaches. JS wraps the select in this and hides it visually
   (still present for the actual form submission and as the no-JS fallback,
   which keeps the plain styled select from just above); everything a
   visitor sees and clicks is the button + list built here instead. */
.esj-select { position: relative; display: inline-block; }

.esj-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.esj-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 240px;
  border: 1px solid var(--esj-rule);
  background: #fff;
  padding: 11px 16px;
  font-family: var(--esj-sans);
  font-size: 13px;
  color: var(--esj-ink);
  cursor: pointer;
  transition: border-color .2s var(--esj-ease);
}
.esj-select__trigger svg { flex: none; color: var(--esj-ink-soft); transition: transform .2s var(--esj-ease); }
.esj-select__trigger:hover { border-color: var(--esj-gold); }
.esj-select.is-open .esj-select__trigger { border-color: var(--esj-gold); }
.esj-select.is-open .esj-select__trigger svg { transform: rotate(180deg); }

/* `left:0; right:0` would lock the menu to the trigger's own width — fine for
   short labels, but "Renditi sipas çmimesh: nga i ulëti tek i larti" is far
   wider than the closed box, and with the options set to nowrap (so a label
   never wraps mid-phrase) that text just overflowed the border instead of
   wrapping. Sizing the menu to its own content instead fits the widest
   option — but this control always sits at the right edge of the shop
   toolbar, so it anchors to the trigger's RIGHT edge and grows leftward;
   anchoring left, as a first pass here did, let the wider menu run straight
   off the right side of the viewport instead. */
.esj-select__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--esj-rule);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--esj-ease), transform .18s var(--esj-ease), visibility .18s;
}
.esj-select.is-open .esj-select__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.esj-select__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--esj-ink-soft);
  white-space: nowrap;
  transition: background .15s var(--esj-ease), color .15s var(--esj-ease);
}
.esj-select__option:hover { background: var(--esj-bg-soft); color: var(--esj-ink); }
.esj-select__option.is-selected { color: var(--esj-gold-dark); font-weight: 600; }

@media (max-width: 560px) {
  .esj-select__trigger { min-width: 0; width: 100%; }

  /* The trigger already fills the width here, so there is no room either
     side to widen into — matching the desktop fix (a wider menu than the
     trigger) would just run off one edge or the other. The menu instead
     stays the same width as the trigger and wraps a long option onto a
     second line rather than trying to grow past the screen. */
  .esj-select__menu { width: 100%; max-width: 100%; }
  .esj-select__option { white-space: normal; }
}

.esj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
}

/* woocommerce.css lays its own pagination out as a bordered strip of floated
   <li>s (".woocommerce-pagination ul{border:1px solid #cfc8d8;...}") and
   chains ".woocommerce nav.woocommerce-pagination ul li span.current" for the
   active state — three classes plus four element types, which edges out a
   plain ".esj-pagination .page-numbers.current" on specificity even though
   ours loads later. Matched here with the same ancestor chain rather than
   fought with !important, and the <ul>/<li> box model reset so our own
   spacing applies instead of WooCommerce's float layout. */
.esj-pagination { margin-top: 56px; text-align: center; }

.woocommerce nav.woocommerce-pagination ul,
.esj-pagination ul.page-numbers {
  display: inline-flex;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li,
.esj-pagination ul.page-numbers li {
  float: none;
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.esj-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--esj-rule);
  font-size: 14px;
  font-family: var(--esj-sans);
  line-height: 1;
  transition: background .2s var(--esj-ease), border-color .2s var(--esj-ease), color .2s var(--esj-ease), box-shadow .2s var(--esj-ease), transform .2s var(--esj-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.esj-pagination .page-numbers:not(.current):hover {
  border-color: var(--esj-gold);
  color: var(--esj-gold-dark);
  transform: translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.esj-pagination .page-numbers.current {
  background: var(--esj-ink);
  border-color: var(--esj-ink);
  color: #fff;
  box-shadow: 0 8px 18px rgba(33, 33, 33, 0.22);
}

/* WooCommerce's own notice styling (woocommerce-general.css) sets a colored
   border-TOP and reserves left padding for an icon glyph from its own icon
   font; this rule only ever set border-LEFT, so that top border and the icon
   space both kept showing through underneath. Zeroing every border before
   reapplying one, and hiding the icon pseudo-element, takes the box over
   completely rather than layering on top of it. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 24px;
  padding: 15px 18px;
  border: 0;
  border-left: 3px solid var(--esj-gold);
  background: var(--esj-bg-soft);
  color: var(--esj-ink-soft);
  font-size: 14px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; content: none; }
.woocommerce-error { border-left-color: var(--esj-sale); }

.woocommerce-info a,
.woocommerce-message a { color: var(--esj-gold-dark); text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .esj-mega__inner { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 28px; }
  .esj-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .esj-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .esj-header__bar { grid-template-columns: auto 1fr auto; padding: 16px 0; }
  .esj-plaque { display: none; }
  /* The sidebar's own count badges and longer facet names (Materiali, Guri,
     Madhësia e kutisë...) don't fit a squeezed 200px column, so tablets get
     the same full-width, stacked-above-results layout as phones rather than
     a cramped two-up grid. */
  .esj-shop__content { grid-template-columns: 1fr; }
  .esj-shop__toolbar { grid-template-columns: 1fr auto; gap: 16px; }
  .esj-shop__filter-toggle { border-right: 0; }
  .esj-filters__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .esj-filters__head, .esj-filters__submit { grid-column: 1 / -1; }
  .esj-filter__sale { align-self: start; }
  .esj-burger { display: inline-flex; }
  .esj-nav { display: none; }
  .esj-logo__mark { font-size: 30px; }
  .esj-logo__tagline { display: none; }
  .esj-designers { grid-template-columns: repeat(2, 1fr); }
  .esj-assurance__grid { grid-template-columns: repeat(2, 1fr); }
  .esj-cats { grid-template-columns: repeat(2, 1fr); }
  .esj-locations { grid-template-columns: 1fr; }
  .esj-rail__nav { display: none; }
}

@media (max-width: 860px) {
  .esj-section { padding: 52px 0; }
  .esj-editorial { grid-template-columns: 1fr; }
  .esj-editorial--reverse .esj-editorial__media { order: 0; }
  .esj-editorial__media img { min-height: 320px; }
  .esj-strip { grid-template-columns: repeat(2, 1fr); }
  .esj-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .esj-footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .esj-hero__caption { padding: 40px 20px 48px; }
}

@media (max-width: 560px) {
  :root { --esj-gutter: 16px; }
  .esj-cats { grid-template-columns: 1fr; }
  .esj-filters__form { grid-template-columns: 1fr; }
  .esj-designers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .esj-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .esj-assurance__grid { grid-template-columns: 1fr; }
  .esj-newsletter__form { flex-direction: column; }
  .esj-tabs { gap: 18px; }
  .esj-footer__top { grid-template-columns: 1fr; }
  .esj-rail__track { grid-auto-columns: minmax(62vw, 1fr); }
}

/* ==========================================================================
   Product page
   ========================================================================== */

.esj-pdp { padding: 10px 0 80px; }

.esj-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

.esj-pdp__main { margin: 0; background: var(--esj-bg-grey); text-align: center; }
.esj-pdp__main img { width: 82%; display: inline-block; }

.esj-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.esj-pdp__thumbs figure { margin: 0; background: var(--esj-bg-grey); }

.esj-pdp__buy { position: sticky; top: 24px; }

.esj-pdp__designer {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--esj-muted);
  margin-bottom: 12px;
}

.esj-pdp__title {
  font-family: var(--esj-serif);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.16;
  margin: 0 0 16px;
}

.esj-pdp__price { font-size: 23px; font-weight: 600; margin-bottom: 22px; }
.esj-pdp__price del { color: var(--esj-faint); font-weight: 400; margin-right: 10px; }
.esj-pdp__price ins { color: var(--esj-sale); text-decoration: none; }

.esj-pdp__intro { color: var(--esj-ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; }

.esj-pdp__cart { padding: 22px 0; border-top: 1px solid var(--esj-rule); border-bottom: 1px solid var(--esj-rule); }

.esj-pdp__cart .quantity { display: inline-flex; margin-right: 10px; }
.esj-pdp__cart .quantity input {
  width: 76px;
  height: 52px;
  padding: 0 10px;
  border: 1px solid var(--esj-rule);
  font: inherit;
  text-align: center;
}

.esj-pdp__cart .button,
.esj-pdp__cart button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 40px;
  background: var(--esj-ink);
  color: #fff;
  border: 1px solid var(--esj-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--esj-ease);
}
.esj-pdp__cart .button:hover { background: var(--esj-gold); border-color: var(--esj-gold); }

.esj-pdp__assure { list-style: none; margin: 24px 0 0; padding: 0; }
.esj-pdp__assure li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--esj-ink-soft);
  margin-bottom: 11px;
}
.esj-pdp__assure svg { flex: none; margin-top: 3px; color: var(--esj-gold); }

.esj-pdp__sku { margin-top: 20px; font-size: 12.5px; color: var(--esj-faint); }

.esj-pdp__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  margin-top: 76px;
  padding-top: 46px;
  border-top: 1px solid var(--esj-rule);
}

.esj-pdp__h2 { font-size: 26px; margin-bottom: 18px; }

.esj-specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }
.esj-specs dt {
  padding: 12px 0;
  border-bottom: 1px solid var(--esj-rule-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esj-muted);
  padding-right: 30px;
}
.esj-specs dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--esj-rule-soft);
  font-size: 14.5px;
}

@media (max-width: 900px) {
  .esj-pdp__grid { grid-template-columns: 1fr; }
  .esj-pdp__buy { position: static; }
  .esj-pdp__detail { grid-template-columns: 1fr; margin-top: 48px; }
}

/* ==========================================================================
   Refinements
   ========================================================================== */

/* Editorial art is uncropped at source, so the panel sets the proportion and
   the photograph fills it — otherwise a portrait frame drives the row height
   and leaves the copy stranded in a tall column of white. */
.esj-editorial__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.esj-editorial__media a,
.esj-editorial__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.esj-editorial__media img {
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 860px) {
  .esj-editorial__media { aspect-ratio: 4 / 3; }
}

/* Campaign art is a square portrait; bias the crop upward so the subject sits
   under the wordmark rather than being cut at the chin. */
.esj-campaign__media img { object-position: center 30%; }
.esj-campaign__media { min-height: clamp(380px, 42vw, 620px); }
.esj-campaign__inner { min-height: clamp(380px, 42vw, 620px); }

/* A scrim under the campaign lockup, for the same reason as the hero. */
.esj-campaign__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

/* Rail lead-in tiles are portrait; the cards beside them are square, so the
   tile is pinned to the track's height rather than setting it. */
.esj-railintro { align-self: stretch; min-height: 0; }

/* ==========================================================================
   WooCommerce button override

   woocommerce.css ships ".button.alt { background: #7f54b3 }" at the same
   nominal specificity as our own rules, but wrapped in a `:where()` guard on
   the surrounding selectors — which carries zero specificity — so on a tie
   the cascade falls back to source order and a plugin stylesheet loaded
   before ours can still lose. Matching the ".woocommerce" scope WordPress
   puts on the shortcode wrapper covers pages using our own classic templates;
   the bare selectors below cover the cart/checkout/account pages, where
   esj_strip_woo_defaults() removes that wrapper entirely, so there is no
   ".woocommerce" ancestor to match against.
   ========================================================================== */

.button,
a.button,
button.button,
input.button,
.button.alt,
a.button.alt,
button.button.alt,
input.button.alt,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 40px;
  background: var(--esj-ink);
  color: #fff;
  border: 1px solid var(--esj-ink);
  border-radius: 0;
  font-family: var(--esj-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--esj-ease), border-color .25s var(--esj-ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--esj-gold);
  border-color: var(--esj-gold);
  color: #fff;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Content pages — hero, services, FAQ, stats, closing CTA
   ========================================================================== */

.esj-pagehero { position: relative; background: var(--esj-ink); }

.esj-pagehero__media { position: relative; min-height: clamp(220px, 30vw, 360px); }
.esj-pagehero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.esj-pagehero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.esj-pagehero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(220px, 30vw, 360px);
  padding: 40px 20px;
  color: #fff;
}

.esj-pagehero__eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.esj-pagehero__title {
  font-family: var(--esj-serif);
  font-size: clamp(32px, 4.4vw, 56px);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4);
}

/* Once a page has a photographic hero, its own bare title is redundant. */
.esj-pagehero + .esj-page .esj-page__title { display: none; }

.esj-page__lede {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: var(--esj-ink-soft);
}

/* Service tiles ------------------------------------------------------------ */

.esj-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--esj-rule-soft);
  margin: 40px 0;
}

.esj-service {
  padding: 40px 32px;
  background: #fff;
  text-align: center;
}
.esj-service svg { color: var(--esj-gold); margin: 0 auto 18px; }
.esj-service h3 {
  font-family: var(--esj-serif);
  font-size: 21px;
  margin: 0 0 10px;
}
.esj-service p { font-size: 14.5px; color: var(--esj-ink-soft); margin: 0 0 14px; line-height: 1.65; }

/* FAQ ------------------------------------------------------------------ */

.esj-faq { max-width: 820px; margin: 0 auto; }

.esj-faq__item {
  border-bottom: 1px solid var(--esj-rule);
}
.esj-faq__item[open] .esj-faq__icon { transform: rotate(45deg); }

.esj-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--esj-serif);
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}
.esj-faq__q::-webkit-details-marker { display: none; }
.esj-faq__icon { flex: none; color: var(--esj-gold); transition: transform .25s var(--esj-ease); }

.esj-faq__a { padding: 0 4px 24px; color: var(--esj-ink-soft); font-size: 15px; line-height: 1.75; max-width: 680px; }
.esj-faq__a p:last-child { margin-bottom: 0; }

/* Stats ------------------------------------------------------------------ */

.esj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--esj-rule-soft);
  margin: 48px 0;
}

.esj-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  background: #fff;
  text-align: center;
}
.esj-stats__figure { font-family: var(--esj-serif); font-size: clamp(28px, 3vw, 42px); color: var(--esj-gold-dark); }
.esj-stats__label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--esj-muted); }

/* Closing CTA ------------------------------------------------------------ */

.esj-pagecta {
  text-align: center;
  padding: 52px 24px;
  margin: 56px 0 0;
  background: var(--esj-bg-soft);
}
.esj-pagecta h2 {
  font-family: var(--esj-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 0 0 22px;
}

/* Contact / info cards ----------------------------------------------------- */

.esj-infocards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 40px 0;
}
.esj-infocard {
  padding: 30px 32px;
  border: 1px solid var(--esj-rule);
}
.esj-infocard h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--esj-serif);
  font-size: 20px;
  margin: 0 0 14px;
}
.esj-infocard svg { color: var(--esj-gold); flex: none; }
.esj-infocard p { font-size: 14.5px; color: var(--esj-ink-soft); margin: 0 0 6px; line-height: 1.6; }

@media (max-width: 860px) {
  .esj-services { grid-template-columns: 1fr; }
  .esj-stats { grid-template-columns: repeat(2, 1fr); }
  .esj-infocards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brand banner — a manufacturer's own campaign artwork, logo and wordmark
   already in the shot, so only a caption band runs beneath it.

   The source art here tops out at 1200px wide — it is the brand's own master
   file, not a photograph we can re-crop for more resolution — so unlike the
   hero this never stretches full-bleed: past its native size that would just
   upscale and soften. It runs instead as a contained plate, capped at its own
   resolution, which also reads as the deliberate "featured house" card it is
   rather than an oversized banner.
   ========================================================================== */

.esj-brandbanner {
  margin: 58px auto;
  max-width: 1040px;
  padding: 0 var(--esj-gutter);
}

.esj-brandbanner__card {
  border: 1px solid var(--esj-rule);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* The wide layout runs its art full-bleed rather than boxed — for art that is
   already proper banner resolution, not a square logo lockup — but still
   caps the height so it stays a strip rather than a second hero, per the
   client's own direction not to make it oversized. */
.esj-brandbanner--full {
  margin: 4px 0 24px;
  max-width: none;
  padding: 0;
}
.esj-brandbanner--full .esj-brandbanner__card { border: 0; box-shadow: none; }
.esj-brandbanner--full .esj-brandbanner__media { max-height: 420px; overflow: hidden; }
.esj-brandbanner--full .esj-brandbanner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .esj-brandbanner--full .esj-brandbanner__media { max-height: 260px; }
}

.esj-brandbanner__media {
  display: block;
  background: var(--esj-bg-grey);
}
.esj-brandbanner__media img { width: 100%; }

.esj-brandbanner__caption {
  padding: 18px 20px 20px;
  text-align: center;
  background: var(--esj-bg-soft);
}
.esj-brandbanner__caption p {
  font-size: 15.5px;
  color: var(--esj-ink-soft);
  margin: 0 0 12px;
}

@media (max-width: 860px) {
  .esj-brandbanner { margin: 40px auto; }
}

/* ==========================================================================
   Wishlist
   ========================================================================== */

.esj-product__save.is-saved {
  opacity: 1;
  color: var(--esj-sale);
}
.esj-product__save.is-saved svg { fill: currentColor; }

.esj-wishlist-empty {
  text-align: center;
  padding: 60px 20px 20px;
}
.esj-wishlist-empty svg { color: var(--esj-faint); margin: 0 auto 18px; }
.esj-wishlist-empty p { color: var(--esj-ink-soft); margin-bottom: 24px; }

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.esj-cart-drawer {
  right: 0;
  left: auto;
  transform: translateX(100%);
}
.esj-cart-drawer.is-open { transform: translateX(0); }

.esj-cart-drawer__title {
  font-family: var(--esj-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.esj-drawer-cart__items {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  overflow-y: auto;
  flex: 1;
}

.esj-drawer-cart__item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--esj-rule-soft);
}
.esj-drawer-cart__item:last-child { border-bottom: 0; }

.esj-drawer-cart__thumb {
  flex: none;
  width: 74px;
  height: 74px;
  background: var(--esj-bg-grey);
  overflow: hidden;
}
.esj-drawer-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.esj-drawer-cart__info { flex: 1; min-width: 0; }

.esj-drawer-cart__name {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.esj-drawer-cart__name:hover { color: var(--esj-gold-dark); }

.esj-drawer-cart__price { font-size: 13.5px; font-weight: 600; color: var(--esj-ink-soft); margin-bottom: 10px; }

.esj-drawer-cart__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.esj-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--esj-rule);
}
.esj-qty-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--esj-ink-soft);
  transition: background .2s var(--esj-ease);
}
.esj-qty-stepper__btn:hover { background: var(--esj-bg-grey); }
.esj-qty-stepper__value { min-width: 22px; text-align: center; font-size: 13px; }

.esj-drawer-cart__remove {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--esj-faint);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--esj-ease), border-color .2s var(--esj-ease);
}
.esj-drawer-cart__remove:hover { color: var(--esj-sale); border-color: var(--esj-sale); }

.esj-drawer-cart__foot {
  padding: 20px;
  border-top: 1px solid var(--esj-rule);
}

.esj-drawer-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 6px;
}
.esj-drawer-cart__subtotal strong { font-size: 18px; }

.esj-drawer-cart__note { font-size: 12px; color: var(--esj-faint); margin: 0 0 18px; }

/* Loading state on the single-product button while an AJAX add is in flight. */
.single_add_to_cart_button.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* ==========================================================================
   Cart page — reuses the drawer's own item-row markup and JS handlers, just
   given a two-column layout (lines + summary) with more room than the
   drawer's narrow panel.
   ========================================================================== */

.esj-page-cart { padding: 40px 0 90px; }

.esj-cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.esj-cart-lines__list {
  padding: 0;
  border-top: 1px solid var(--esj-rule);
}
.esj-cart-lines__list .esj-drawer-cart__item { padding: 26px 0; }
.esj-cart-lines__list .esj-drawer-cart__thumb { width: 110px; height: 110px; }
.esj-cart-lines__list .esj-drawer-cart__name { font-size: 16px; }
.esj-cart-lines__list .esj-drawer-cart__price { font-size: 15px; }

.esj-cart-coupon {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  max-width: 420px;
}
.esj-cart-coupon__input {
  flex: 1;
  border: 1px solid var(--esj-rule);
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
}
.esj-cart-coupon__input:focus { outline: none; border-color: var(--esj-gold); }

.esj-cart-summary {
  background: #fff;
  border: 1px solid var(--esj-rule);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(33, 33, 33, 0.06);
  padding: 30px 28px;
}

.esj-cart-summary__title {
  font-size: 20px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--esj-rule-soft);
}

.esj-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14.5px;
  margin-bottom: 10px;
}
.esj-cart-summary__row--discount { color: var(--esj-sale); }

.esj-cart-summary__note { font-size: 12px; color: var(--esj-faint); margin: 4px 0 16px; }

.esj-cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 16px;
  padding-top: 16px;
  margin-bottom: 24px;
  border-top: 1px solid var(--esj-rule-soft);
}
.esj-cart-summary__total strong { font-size: 21px; color: var(--esj-ink); }
.esj-cart-summary__continue { margin-top: 12px; }

@media (max-width: 900px) {
  .esj-cart-grid { grid-template-columns: 1fr; gap: 36px; }
  .esj-cart-summary { order: 2; }
  .esj-cart-coupon { max-width: none; flex-direction: column; }
}