/* ==========================================================================
   Emerald Workwear, design system
   Tokens and component styles from the approved design (README §1).
   ========================================================================== */

:root{
  --em-red:#e32227;
  --em-ink:#101418;
  --em-muted:#5b636b;
  --em-faint:#78818a;
  --em-ticker:#cfd5da;
  --em-border:#e3e6e9;
  --em-hairline:#eef0f2;
  --em-surface:#f1f3f5;
  --em-line:#d7dbdf;
  --em-dim:#9aa2aa;
  --em-promo:#b9c0c7;
  --em-sep:#3a424a;
  --em-white:#fff;
  --em-container:1320px;
  --em-gutter:28px;
  --em-font-head:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --em-font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--em-font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--em-ink);
  background:var(--em-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--em-ink);text-decoration:none;transition:color .18s ease}
a:hover,a:focus{color:var(--em-red)}
img{max-width:100%;height:auto;display:block}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--em-font-head);margin:0;line-height:1.2}
:focus-visible{outline:2px solid var(--em-red);outline-offset:2px}
/* Fields carry their own focus state, ink border plus a soft ring, matching
   the checkout inputs. A <select> matches :focus-visible on a plain mouse
   click too, so the red ring fired on every click and read as an error.
   Links and buttons keep the red outline: there it only fires on keyboard use.
   Checkbox, radio and range are excluded, they have no border to tint, so
   they would be left with no visible focus at all. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;border-color:var(--em-ink);box-shadow:0 0 0 3px rgba(16,20,24,.06);
}

.em-wrap{max-width:var(--em-container);margin:0 auto;padding:0 var(--em-gutter);width:100%}
.em-site{min-height:100vh;display:flex;flex-direction:column}
.em-main{flex:1}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- keyframes ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawLine{from{stroke-dashoffset:2600}to{stroke-dashoffset:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Scroll reveal (JS adds .is-in) */
[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .em-ticker__track{animation:none}
  .em-hero__lines g{animation:none;stroke-dashoffset:0}
}

/* ---------- buttons ---------- */
.em-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:999px;cursor:pointer;
  font-family:var(--em-font-head);font-weight:600;
  letter-spacing:0;text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.em-btn--red{background:var(--em-red);color:#fff;height:56px;padding:0 30px;font-size:16px}
.em-btn--red:hover{background:var(--em-ink);color:#fff;transform:translateY(-2px)}
.em-btn--dark{background:var(--em-ink);color:#fff;height:40px;padding:0 18px;font-size:13px}
.em-btn--dark:hover{background:var(--em-red);color:#fff}
.em-btn--white{background:#fff;color:var(--em-ink);height:56px;padding:0 30px;font-size:15px;letter-spacing:.04em;box-shadow:0 10px 26px rgba(16,20,24,.22)}
.em-btn--white:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(16,20,24,.3);color:var(--em-ink)}
.em-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);height:56px;padding:0 30px;font-size:15px;letter-spacing:.04em}
.em-btn--ghost:hover{background:#fff;color:var(--em-ink);border-color:#fff}
.em-btn--outline{background:transparent;color:var(--em-ink);border:1px solid var(--em-ink);height:38px;padding:0 16px;font-size:13px}
.em-btn--outline:hover{background:var(--em-red);border-color:var(--em-red);color:#fff}
.em-btn--block{width:100%}

/* ---------- promo bar ---------- */
.em-promo{background:var(--em-ink);color:var(--em-promo);font-size:12px;letter-spacing:.02em}
/* Only the links live here now, so keep them right where they have always
   been; space-between would have dragged them to the left edge. */
.em-promo .em-wrap{min-height:36px;display:flex;align-items:center;justify-content:flex-end;gap:24px}
.em-promo__group{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.em-promo__sep{color:var(--em-sep)}
.em-promo__links{gap:20px}
.em-promo__links a{
  font-family:var(--em-font-head);font-weight:600;font-size:13px;
  letter-spacing:0;
}
.em-promo a{color:var(--em-promo)}
.em-promo a:hover{color:#fff}

/* ---------- header ---------- */
.em-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--em-border)}
.em-header__bar{height:88px;display:flex;align-items:center;gap:40px}
.em-logo{flex:none;display:block}
.em-logo img{height:64px;width:auto;display:block}

.em-search{
  flex:1;max-width:520px;display:flex;align-items:center;gap:4px;
  border:1px solid var(--em-line);border-radius:999px;height:46px;padding-right:4px;
  transition:border-color .18s ease;
}
.em-search:focus-within{border-color:var(--em-muted)}
.em-search input{flex:1;border:0;outline:none;padding:0 6px 0 18px;font-size:14px;color:var(--em-ink);background:transparent;min-width:0}
/* The global field focus ring draws a box-shadow, and this input has no
   border-radius, so it rendered as a rectangle inside the rounded pill. The
   pill's own :focus-within border is the focus cue here. */
.em-search input:focus,
.em-search input:focus-visible{outline:none;box-shadow:none}
/* A filled black submit block read as the main element of the bar and
   crowded the field on mobile. A magnifier says the same thing quietly. */
.em-search button{
  border:0;background:var(--em-surface);color:var(--em-ink);cursor:pointer;
  width:38px;height:38px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease;
}
.em-search button svg{width:19px;height:19px}
.em-search button:hover{background:var(--em-red);color:#fff}

.em-header__actions{margin-left:auto;display:flex;align-items:center;gap:28px}
.em-phone{display:flex;flex-direction:column;line-height:1.15}
.em-phone__label{font-size:13px;letter-spacing:0;color:var(--em-faint)}
.em-phone__num{font-family:var(--em-font-head);font-size:17px;font-weight:600;color:var(--em-ink)}
.em-phone__num:hover{color:var(--em-red)}

.em-icons{display:flex;align-items:center;gap:10px}
/* Bare icons, no pill and no filled black cart. The 44px box is kept as the
   touch target even though nothing is drawn around it. */
.em-icon-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:none;cursor:pointer;flex:none;
  color:var(--em-ink);transition:color .18s ease;
}
.em-icon-btn svg{width:23px;height:23px}
.em-icon-btn--light,
.em-icon-btn--dark{border:0;background:none;color:var(--em-ink)}
.em-icon-btn--light:hover,
.em-icon-btn--dark:hover{background:none;color:var(--em-red)}
.em-cart-count{
  position:absolute;top:3px;right:2px;min-width:18px;height:18px;border-radius:9px;
  background:var(--em-red);color:#fff;font-family:var(--em-font-head);font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;
}
/* Without the filled disc behind it, a red 0 next to a bare icon is noise. */
.em-cart-count.is-empty{display:none}

/* burger, mobile only */
.em-burger{display:none;border:0;background:none;color:var(--em-ink);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.em-burger:hover{color:var(--em-red)}

/* ---------- category nav ---------- */
/* ---------- mobile menu ---------- */
.em-menu{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s ease;
}
.em-menu.is-open{visibility:visible;opacity:1}
.em-menu__backdrop{position:absolute;inset:0;background:rgba(16,20,24,.55)}
.em-menu__panel{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s ease;
  box-shadow:-18px 0 44px rgba(16,20,24,.18);
}
.em-menu.is-open .em-menu__panel{transform:translateX(0)}
.em-menu__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--em-border);flex:none;
}
.em-menu__logo{display:block;flex:1;min-width:0}
.em-menu__logo img{height:44px;width:auto;display:block}
.em-menu__brand{
  font-family:var(--em-font-head);font-weight:600;font-size:14px;
  letter-spacing:0;
}
/* Account and wishlist sit above the menu proper: they are the two things a
   returning customer opens the panel for. */
.em-menu__quick{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--em-hairline);
}
.em-menu__quick a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:78px;padding:12px 8px;border:1px solid var(--em-border);border-radius:14px;
  font-family:var(--em-font-head);font-size:12px;font-weight:600;letter-spacing:.03em;
  text-align:center;line-height:1.25;color:var(--em-ink);
  transition:border-color .18s ease,color .18s ease;
}
.em-menu__quick a:hover{border-color:var(--em-red);color:var(--em-red)}
.em-menu__quick svg{width:22px;height:22px;flex:none}
.em-menu__close{
  width:40px;height:40px;border:1px solid var(--em-border);background:#fff;
  color:var(--em-ink);border-radius:999px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex:none;
}
.em-menu__close:hover{border-color:var(--em-ink)}
.em-menu__scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px;flex:1}
.em-menu__section{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--em-hairline)}
.em-menu__label{
  font-size:13px;letter-spacing:0;
  color:var(--em-faint);padding:10px 20px 6px;
}
.em-menu__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;min-height:48px;
  font-family:var(--em-font-head);font-weight:600;font-size:15px;
  letter-spacing:0;color:var(--em-ink);
}
.em-menu__link--sub{font-size:14px;text-transform:none;letter-spacing:0;font-weight:500}
.em-menu__link:hover{color:var(--em-red);background:var(--em-hairline)}
.em-menu__n{font-size:12px;color:var(--em-dim);font-weight:400}
.em-menu__pill{
  background:var(--em-red);color:#fff;font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:999px;letter-spacing:.04em;
}
.em-menu__foot{display:flex;flex-direction:column;gap:6px;padding:18px 20px;font-size:14px;color:var(--em-muted)}
.em-menu__tel{font-family:var(--em-font-head);font-weight:600;font-size:17px;color:var(--em-ink)}

.em-nav{border-top:1px solid var(--em-hairline)}
.em-nav__row{
  height:52px;display:flex;align-items:stretch;gap:2px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.em-nav__row::-webkit-scrollbar{display:none}
.em-nav__link{
  display:flex;align-items:center;padding:0 16px;white-space:nowrap;
  font-family:var(--em-font-head);font-weight:600;font-size:14px;letter-spacing:0;
  color:var(--em-ink);border-bottom:3px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.em-nav__link.is-active{color:var(--em-red);border-bottom-color:var(--em-red)}
/* Touch browsers keep :hover after a tap, and this hover state is identical to
   .is-active, so a tapped category stayed red and underlined, indistinguishable
   from the one you are actually on. Pointers only. */
@media (hover:hover){
  .em-nav__link:hover{color:var(--em-red);border-bottom-color:var(--em-red)}
}
.em-nav__link--sets{gap:7px;padding:0 14px}
.em-nav__pill{background:var(--em-red);color:#fff;font-size:10px;letter-spacing:.06em;padding:3px 7px;border-radius:999px}
/* Sits after the :hover rule above on purpose, so the red fill wins. */
.em-nav__link--account{
  gap:8px;margin-left:auto;flex:none;align-self:center;
  height:36px;padding:0 18px;border-radius:999px;border-bottom:0;
  background:var(--em-red);color:#fff;font-size:13px;letter-spacing:.05em;
}
.em-nav__link--account:hover{background:var(--em-ink);color:#fff}

/* ---------- subcategory chips ---------- */
.em-subcats{display:flex;flex-wrap:wrap;gap:10px;padding-top:24px}
.em-subcats__link{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  border:1px solid var(--em-line);border-radius:999px;background:#fff;
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--em-ink);white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.em-subcats__link.is-active{background:var(--em-red);border-color:var(--em-red);color:#fff}
.em-subcats__n{font-size:11px;font-weight:600;color:var(--em-muted)}
.em-subcats__link.is-active .em-subcats__n{color:rgba(255,255,255,.75)}
/* Pointers only, same reason as .em-nav__link: a tapped chip kept :hover and
   was indistinguishable from the active one. */
@media (hover:hover){
  .em-subcats__link:hover{border-color:var(--em-red);color:var(--em-red)}
  .em-subcats__link:hover .em-subcats__n{color:var(--em-red)}
  .em-subcats__link.is-active:hover{color:#fff}
  .em-subcats__link.is-active:hover .em-subcats__n{color:rgba(255,255,255,.75)}
}

/* ---------- ticker ---------- */
.em-ticker{background:var(--em-ink);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.em-ticker__track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.em-ticker__item{
  display:flex;align-items:center;gap:16px;padding:11px 26px;white-space:nowrap;
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--em-ticker);
}
.em-ticker__dot{width:5px;height:5px;border-radius:999px;background:var(--em-red);flex:none}

/* ---------- hero ---------- */
.em-hero{position:relative;background:var(--em-red);color:#fff;overflow:hidden}
.em-hero__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.em-hero__lines g{stroke-dasharray:2600;animation:drawLine 2.4s cubic-bezier(.22,1,.36,1) forwards}
.em-hero__lines g:nth-of-type(2){animation-delay:.18s}
.em-hero__lines g:nth-of-type(3){animation-delay:.36s}
.em-hero__inner{position:relative;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:48px;min-height:660px}
.em-hero__copy{padding:88px 0;display:flex;flex-direction:column;gap:26px}
.em-hero__title{
  font-size:68px;line-height:1.02;font-weight:700;letter-spacing:-.025em;color:#fff;
  text-wrap:balance;animation:fadeUp .8s .18s both;
}
.em-hero__sub{margin:0;max-width:480px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.92);animation:fadeUp .8s .3s both}
.em-hero__cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px;animation:fadeUp .8s .42s both}
.em-hero__media{position:relative;padding:40px 0 56px;animation:fadeUp .9s .24s both}
.em-hero__frame{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:20px 130px 20px 130px;              /* brand signature, keep */
  box-shadow:0 30px 70px rgba(16,20,24,.28);
}
.em-hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- trust strip ---------- */
.em-trust{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--em-border);
  border-radius:18px;overflow:hidden;margin-top:28px;background:#fff;
  box-shadow:0 18px 44px rgba(16,20,24,.08);
}
.em-trust__cell{padding:24px 26px;border-right:1px solid var(--em-border);display:flex;gap:15px;align-items:center}
.em-trust__cell:last-child{border-right:0}
.em-trust__cell svg{width:26px;height:26px;flex:none;stroke:var(--em-red)}
.em-trust__title{font-family:var(--em-font-head);font-size:15px;font-weight:600}
.em-trust__body{font-size:13px;line-height:1.5;color:var(--em-muted)}

/* ---------- sections ---------- */
.em-section{padding-top:76px}
.em-section--last{padding-bottom:90px}
.em-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:26px}
.em-section__head--end{align-items:flex-end}
.em-h2{font-size:27px;font-weight:600;letter-spacing:0;line-height:1.5;min-width:0}
/* A highlighted phrase is one pill: nowrap moves the whole thing to the next
   line instead of splitting it, which on a phone turned "një çmim" into two
   separate red boxes on two lines. The clone stays as a safety net. */
.em-mark{background:var(--em-red);color:#fff;padding:0 12px 3px;border-radius:7px;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.em-mark--ink{background:var(--em-ink)}
/* Never wraps and never shrinks, so it stays on the heading's line on a
   phone instead of being pushed onto one of its own. */
.em-more{font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:0;color:var(--em-red);flex:none;white-space:nowrap}
.em-more:hover{color:var(--em-ink)}

/* ---------- grids ---------- */
.em-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.em-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- category tiles ---------- */
.em-tile{display:block;border:1px solid var(--em-border);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.em-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,20,24,.1);border-color:var(--em-ink);color:var(--em-ink)}
.em-tile__img{aspect-ratio:1/1;background:#fff;overflow:hidden}
.em-tile__img img{width:100%;height:100%;object-fit:cover}
.em-tile__foot{padding:16px 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.em-tile__name{font-family:var(--em-font-head);font-size:17px;font-weight:600;letter-spacing:0}
.em-tile__count{font-size:13px;color:var(--em-faint)}

/* ---------- product card ---------- */
.em-card{
  border:1px solid var(--em-border);border-radius:16px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;list-style:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.em-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,20,24,.12);border-color:var(--em-ink)}
.em-card__media{display:block;position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.em-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.em-card__std{
  position:absolute;top:12px;left:12px;background:var(--em-ink);color:#fff;
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:.1em;padding:4px 9px;
}
.em-card__low{
  position:absolute;top:12px;right:12px;background:var(--em-red);color:#fff;
  font-family:var(--em-font-head);font-size:12px;font-weight:600;letter-spacing:.08em;padding:4px 9px;
}
.em-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.em-card__title{font-family:var(--em-font-head);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:0}
.em-card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.em-card__price{font-family:var(--em-font-head);font-size:22px;font-weight:600}
.em-card__swatches{display:flex;gap:6px;flex-wrap:wrap}
.em-card__swatch{width:14px;height:14px;border-radius:999px;border:1px solid rgba(16,20,24,.14);display:block;flex:0 0 auto}
a.em-card__swatch:hover{border-color:var(--em-ink)}
.em-card__swatch.is-on{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--em-ink);border-color:transparent}

/* ---------- set (bundle) card ---------- */
.em-set{border:1px solid var(--em-border);border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column;list-style:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.em-set:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,20,24,.1);border-color:var(--em-ink)}
.em-set__media{display:block;position:relative;background:#fff;border-bottom:1px solid var(--em-hairline)}
.em-set__badge{
  position:absolute;z-index:3;top:14px;left:14px;                 /* above the collage, README §5 */
  background:var(--em-red);color:#fff;font-family:var(--em-font-head);font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:6px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(227,34,39,.28);
}
/* One marketing photo now, cropped square so the set cards match the category
   tiles and every card in a row lines up regardless of the source ratio. */
.em-set__shot{position:relative;aspect-ratio:1/1;overflow:hidden}
.em-set__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.em-set__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.em-set__name{font-family:var(--em-font-head);font-size:18px;font-weight:600;line-height:1.3}
.em-set__contents{font-size:13px;color:var(--em-muted);line-height:1.55}
.em-set__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.em-set__prices{display:flex;align-items:baseline;gap:8px}
.em-set__price{font-family:var(--em-font-head);font-size:24px;font-weight:600;letter-spacing:-.01em}
.em-set__was{font-size:14px;color:var(--em-dim);text-decoration:line-through}

/* ---------- marketing banners ---------- */
.em-banners{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.em-banner-dark{position:relative;border-radius:20px;overflow:hidden;background:var(--em-ink);color:#fff;min-height:300px;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.em-banner-dark__copy{padding:38px 0 38px 38px;display:flex;flex-direction:column;justify-content:center;gap:16px;z-index:2}
.em-banner-dark__copy h3{font-size:30px;font-weight:600;line-height:1.5;letter-spacing:-.02em;color:#fff}
.em-banner-dark__copy p{margin:0;font-size:14px;line-height:1.6;color:var(--em-promo);max-width:280px}
.em-banner-dark__media{position:relative;padding:22px 22px 22px 8px;display:flex;align-items:center}
.em-banner-dark__frame{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border-radius:16px;overflow:hidden}
.em-banner-dark__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px}
.em-banner-red{position:relative;border-radius:20px;overflow:hidden;background:var(--em-red);color:#fff;min-height:300px;padding:38px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.em-banner-red>*{position:relative}
.em-banner-red__lines{position:absolute;inset:0;width:100%;height:100%}
.em-banner-red h3{font-size:27px;font-weight:600;line-height:1.5;letter-spacing:-.02em;color:#fff}
.em-banner-red p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.92)}
.em-btn--pill-light{align-self:flex-start;border:0;border-radius:999px;background:#fff;color:var(--em-ink);height:46px;padding:0 24px;display:inline-flex;align-items:center;font-family:var(--em-font-head);font-weight:600;font-size:13px;letter-spacing:0;transition:all .18s ease;cursor:pointer}
.em-btn--pill-light:hover{background:var(--em-red);color:#fff}
.em-btn--pill-outline{align-self:flex-start;border:1.5px solid rgba(255,255,255,.8);border-radius:999px;color:#fff;height:46px;padding:0 24px;display:inline-flex;align-items:center;font-family:var(--em-font-head);font-weight:600;font-size:13px;letter-spacing:0;transition:all .18s ease}
.em-btn--pill-outline:hover{background:#fff;color:var(--em-ink);border-color:#fff}

/* ---------- winter set banner ---------- */
.em-winter{border:1px solid var(--em-border);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;background:#fff}
.em-winter__copy{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.em-winter__copy h3{font-size:30px;font-weight:600;line-height:1.45;letter-spacing:-.02em}
.em-winter__copy p{margin:0;font-size:15px;line-height:1.65;color:var(--em-muted);max-width:400px}
.em-winter__prices{display:flex;align-items:baseline;gap:12px;padding-top:4px}
.em-winter__price{font-family:var(--em-font-head);font-size:32px;font-weight:600;letter-spacing:-.02em}
.em-winter__was{font-size:16px;color:var(--em-dim);text-decoration:line-through}
.em-winter__cta{align-self:flex-start;border:0;border-radius:999px;background:var(--em-red);color:#fff;height:50px;padding:0 28px;display:inline-flex;align-items:center;font-family:var(--em-font-head);font-weight:600;font-size:14px;letter-spacing:0;transition:all .18s ease}
.em-winter__cta:hover{background:var(--em-ink);color:#fff;transform:translateY(-2px)}
.em-winter__shot{position:relative;min-height:320px;border-left:1px solid var(--em-border);overflow:hidden}
.em-winter__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.em-winter__grid{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--em-border)}
.em-winter__cell{position:relative;min-height:150px}
.em-winter__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px}
.em-winter__cell:nth-child(1){border-right:1px solid var(--em-hairline)}
.em-winter__cell:nth-child(2){border-bottom:1px solid var(--em-hairline)}
.em-winter__cell:nth-child(3){border-right:1px solid var(--em-hairline);border-top:1px solid var(--em-hairline)}

/* ---------- standards panel ---------- */
.em-standards{background:var(--em-surface);border-radius:22px;padding:44px 48px;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.em-standards__copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.em-standards__copy h2{font-size:26px;font-weight:600;line-height:1.5}
.em-standards__copy p{margin:0;font-size:15px;line-height:1.6;color:var(--em-muted)}
/* Says plainly that this panel is about footwear, which the codes alone do not. */
.em-standards__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--em-border);border-radius:999px;padding:7px 14px 7px 12px;
  font-family:var(--em-font-head);font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--em-ink);
}
.em-standards__eyebrow svg{stroke:var(--em-red);flex:none}
.em-standards__all{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--em-red);
}
.em-standards__all:hover{color:var(--em-ink)}
/* A five-across grid rather than a wrapping row, which broke 3 + 2 ragged. */
.em-standards__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.em-std-chip{
  border:1px solid var(--em-border);border-radius:14px;background:#fff;color:var(--em-ink);
  padding:16px 14px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.em-std-chip svg{stroke:var(--em-red);flex:none}
.em-std-chip__code{font-family:var(--em-font-head);font-size:20px;font-weight:600;letter-spacing:.04em;line-height:1}
.em-std-chip__desc{font-size:13px;letter-spacing:0;color:var(--em-muted);line-height:1.35}
@media (hover:hover){
  .em-std-chip:hover{border-color:var(--em-ink);transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,20,24,.1)}
}

/* ---------- help banner ---------- */
.em-help{position:relative;background:var(--em-red);color:#fff;overflow:hidden}
.em-help__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.em-help__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding-top:52px;padding-bottom:52px}
.em-help h3{font-size:30px;font-weight:600;line-height:1.45;letter-spacing:-.02em;color:#fff}
.em-help p{margin:0;max-width:520px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.94)}
.em-help__copy{display:flex;flex-direction:column;gap:12px}
.em-help__actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:264px}
.em-help__tel{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--em-ink);border-radius:999px;height:52px;font-family:var(--em-font-head);font-size:16px;font-weight:600;letter-spacing:.01em;transition:transform .18s ease}
.em-help__tel:hover{transform:translateY(-2px);color:var(--em-ink)}
.em-help__mail{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;height:52px;color:#fff;font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:.03em;transition:all .18s ease}
.em-help__mail:hover{background:#fff;color:var(--em-ink);border-color:#fff}
.em-help__hours{text-align:center;font-size:13px;color:rgba(255,255,255,.85);padding-top:2px}

/* ---------- footer ---------- */
.em-footer{margin-top:auto;background:var(--em-ink);color:var(--em-promo)}
.em-footer__cols{padding:56px 0 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.em-footer__brand{display:flex;flex-direction:column;gap:16px}
.em-footer__brand img{height:40px;width:auto;align-self:flex-start;filter:brightness(0) invert(1)}
.em-footer__brand p{margin:0;font-size:14px;line-height:1.7;max-width:320px}
.em-footer__col{display:flex;flex-direction:column;gap:10px}
.em-footer__title{font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:0;color:#fff;padding-bottom:4px}
.em-footer__col a,.em-footer__col span{font-size:14px;color:var(--em-promo)}
.em-footer__col a:hover{color:#fff}
.em-footer__bottom{border-top:1px solid #232a31}
.em-footer__bottom .em-wrap{padding-top:18px;padding-bottom:18px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--em-faint);flex-wrap:wrap}

/* ---------- breadcrumb ---------- */
.em-crumb{font-size:13px;color:var(--em-faint);padding-bottom:18px}
.em-crumb a{color:var(--em-faint)}
.em-crumb a:hover{color:var(--em-red)}
.em-crumb__sep{padding:0 8px}
.em-crumb__cur{color:var(--em-ink)}

/* ==========================================================================
   WooCommerce, archive
   ========================================================================== */
.em-archive{padding-top:26px;padding-bottom:90px}
.em-archive__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--em-border)}
.em-archive__titles{display:flex;flex-direction:column;gap:8px}
.em-archive__h1{font-size:34px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.em-archive__count{font-size:14px;color:var(--em-muted)}
.em-archive__sort{display:flex;align-items:center;gap:12px}
.em-archive__sort label{font-size:13px;color:var(--em-faint)}
.em-archive__sort select{height:42px;border:1px solid var(--em-line);background:#fff;padding:0 14px;font-size:14px;color:var(--em-ink);border-radius:10px;transition:border-color .18s ease,box-shadow .18s ease}
.em-archive__layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;padding-top:32px;align-items:start}
.em-filters{display:flex;flex-direction:column;gap:30px;border-right:1px solid var(--em-border);padding-right:32px}
.em-filters__panel{display:flex;flex-direction:column;gap:30px}
.em-filters__title{font-family:var(--em-font-head);font-size:15px;font-weight:600;letter-spacing:0;padding-bottom:14px}
.em-filters__list{display:flex;flex-direction:column;gap:10px}
.em-filters__opt{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;color:#2c343c}
.em-filters__opt input{width:16px;height:16px;accent-color:var(--em-red)}
.em-filters__n{margin-left:auto;color:var(--em-dim);font-size:13px}
.em-filters__sizes{display:flex;flex-wrap:wrap;gap:8px}
.em-size-chip{
  min-width:44px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--em-line);
  background:#fff;color:var(--em-ink);font-size:14px;cursor:pointer;transition:all .15s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.em-size-chip:hover{border-color:var(--em-ink);color:var(--em-ink)}
.em-size-chip.is-on{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.em-filters__clear{border:1px solid var(--em-line);background:#fff;color:var(--em-muted);height:42px;display:flex;align-items:center;justify-content:center;font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:0;cursor:pointer;transition:all .18s ease}
.em-filters__clear:hover{border-color:var(--em-ink);color:var(--em-ink)}
.em-filters__toggle{display:none}
.em-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0}
.em-empty{border:1px solid var(--em-border);padding:60px 28px;text-align:center;color:var(--em-muted)}
.em-empty__t{font-family:var(--em-font-head);font-size:24px;font-weight:600;color:var(--em-ink)}
.em-empty__b{padding-top:8px;font-size:14px}
.em-pagination{padding-top:36px;display:flex;justify-content:center}
.em-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--em-border);margin:0 4px;border-radius:10px;font-family:var(--em-font-head);font-weight:600;font-size:14px}
.em-pagination .page-numbers.current{background:var(--em-ink);border-color:var(--em-ink);color:#fff}

/* ==========================================================================
   WooCommerce, single product
   ========================================================================== */
.em-single{padding-top:26px;padding-bottom:90px}
.em-single__layout{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.em-gallery{display:flex;flex-direction:column;gap:12px}
.em-gallery__main{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--em-border);border-radius:18px;overflow:hidden}
.em-gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.em-gallery__thumbs{display:flex;gap:12px;flex-wrap:wrap}
.em-gallery__thumb{width:96px;height:96px;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--em-border);background:#fff;cursor:pointer;transition:border-color .15s ease}
.em-gallery__thumb[hidden]{display:none}
.em-gallery__thumb.is-on,.em-gallery__thumb:hover{border-color:var(--em-ink)}
.em-gallery__thumb img{width:100%;height:100%;object-fit:cover}

.em-summary{display:flex;flex-direction:column;gap:26px}
/* Woo prints the add-to-cart form as one block; give it the same rhythm
   as the summary so Ngjyra / Madhësia / quantity are evenly spaced. */
.em-summary .variations_form,
.em-set-form{display:flex;flex-direction:column;gap:26px;margin:0}
.em-summary .single_variation_wrap{display:flex;flex-direction:column;gap:26px}
/* Woo's own variation price / availability / "Clear" duplicate our design. */
.em-summary .single_variation,
.em-summary .reset_variations,
.em-summary .woocommerce-variation-description{display:none!important}
.em-summary__head{display:flex;flex-direction:column;gap:10px}
.em-summary__title{font-size:38px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.em-summary__colour{color:var(--em-muted);font-weight:400;white-space:nowrap}
.em-summary__meta{display:flex;align-items:baseline;gap:14px;padding-top:2px;flex-wrap:wrap;row-gap:8px}
.em-summary__price{font-family:var(--em-font-head);font-size:34px;font-weight:600;letter-spacing:-.01em}
.em-summary__price del{font-size:20px;color:var(--em-dim);font-weight:400;margin-right:8px}
.em-summary__price ins{text-decoration:none}
.em-summary__std{background:var(--em-ink);color:#fff;font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:.1em;padding:6px 11px}
.em-summary__stock{font-size:13px}
.em-summary__stock.is-ok{color:#3d7a4a}
.em-summary__stock.is-low{color:var(--em-red)}
.em-summary__material{font-size:15px;line-height:1.65;color:var(--em-muted);margin:0}
.em-rule{height:1px;background:var(--em-border)}

.em-field{display:flex;flex-direction:column;gap:14px}
.em-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:20px}
.em-field>.em-field__label{min-height:20px;display:block}
.em-field__label{font-family:var(--em-font-head);font-size:15px;font-weight:600;letter-spacing:0}
.em-field__value{font-size:14px;color:var(--em-muted)}
.em-guide-link{border:0;background:transparent;padding:0;font-size:13px;color:var(--em-red);text-decoration:underline;cursor:pointer}

/* colour swatches */
.em-swatches{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.em-swatch{width:44px;height:44px;padding:3px;border-radius:999px;border:2px solid var(--em-border);background:#fff;cursor:pointer;transition:border-color .15s ease}
.em-swatch:hover{border-color:var(--em-line)}
.em-swatch.is-on{border-color:var(--em-ink)}
.em-swatch span{display:block;width:100%;height:100%;border-radius:999px;border:1px solid rgba(16,20,24,.14)}
.em-swatch.is-out{opacity:.4;cursor:not-allowed}

/* size pills */
.em-sizes{display:flex;flex-wrap:wrap;gap:8px}
.em-size{
  min-width:56px;height:48px;padding:0 12px;border-radius:10px;border:1px solid var(--em-line);
  background:#fff;color:var(--em-ink);font-size:15px;font-weight:500;cursor:pointer;transition:all .15s ease;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
.em-size:hover:not(.is-out){border-color:var(--em-ink)}
.em-size.is-on{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.em-size.is-out{
  color:var(--em-dim);cursor:not-allowed;background:#fafbfb;
  background-image:linear-gradient(to top left,transparent calc(50% - 1px),var(--em-line) 50%,transparent calc(50% + 1px));
}
.em-error{font-size:13px;color:var(--em-red)}
.em-error[hidden]{display:none}

/* qty + add to cart */
.em-buy{display:flex;gap:12px;align-items:stretch}
.em-qty{display:flex;align-items:center;border:1px solid var(--em-line);height:56px;flex:none}
.em-qty button{width:48px;height:54px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--em-muted);line-height:1}
.em-qty button:hover{color:var(--em-ink)}
.em-qty input{width:44px;text-align:center;font-size:17px;font-weight:600;border:0;outline:none;-moz-appearance:textfield;background:transparent}
.em-qty input::-webkit-outer-spin-button,.em-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.em-reassure{border:1px solid var(--em-border);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.em-reassure__cell{padding:16px 18px}
.em-reassure__cell:first-child{border-right:1px solid var(--em-border)}
.em-reassure__k{font-size:13px;letter-spacing:0;color:var(--em-faint)}
.em-reassure__v{font-size:14px;padding-top:4px}

.em-specs__title{font-family:var(--em-font-head);font-size:15px;font-weight:600;letter-spacing:0;padding-bottom:12px}
.em-specs__list{border-top:1px solid var(--em-border)}
.em-specs__row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--em-border);font-size:14px;align-items:baseline}
.em-specs__k{color:var(--em-faint)}
.em-specs__row>span:last-child{color:var(--em-ink)}

.em-related{padding-top:76px}
.em-related h2{margin:0 0 24px;font-size:25px;font-weight:600;}

/* size guide modal */
.em-modal{position:fixed;inset:0;z-index:90;background:rgba(16,20,24,.55);display:flex;align-items:center;justify-content:center;padding:32px}
.em-modal[hidden]{display:none}
.em-modal__box{background:#fff;border-radius:20px;max-width:660px;width:100%;max-height:82vh;overflow:auto;animation:fadeUp .3s both}
.em-modal__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--em-border)}
.em-modal__head span{font-family:var(--em-font-head);font-size:22px;font-weight:600;}
.em-modal__close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--em-muted)}
.em-modal__body{padding:26px}
/* Two scales now: S to 3XL for tops, 46 to 60 for leg wear. */
.em-guide__title{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--em-faint);
  padding:18px 0 8px;
}
.em-guide__title:first-child{padding-top:0}
.em-guide{border-top:1px solid var(--em-border)}
.em-guide__row{display:grid;grid-template-columns:100px 1fr 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--em-border);font-size:14px}
.em-guide__size{font-family:var(--em-font-head);font-size:16px;font-weight:600}
.em-guide__cell{color:var(--em-muted)}
.em-modal__note{margin:18px 0 0;font-size:13px;color:var(--em-faint);line-height:1.6}

/* ---------- bundle (set) detail ---------- */
.em-field__hint{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--em-muted)}

/*
 * Each member of a set is sized on its own row: identity across the top,
 * its own pills underneath. The row is the unit that can be "missing", so
 * the error state lives there rather than on the form.
 */
.em-set-rows{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.em-set-row{
  border:1px solid var(--em-border);border-radius:14px;padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .18s ease,box-shadow .18s ease;
}
.em-set-row.is-missing{border-color:var(--em-red);box-shadow:0 0 0 3px rgba(214,40,40,.08)}
.em-set-row__top{display:grid;grid-template-columns:auto 48px minmax(0,1fr) auto;gap:12px;align-items:center}
.em-set-row__no{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--em-surface);color:var(--em-muted);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
}
.em-set-row img{width:48px;height:48px;object-fit:contain;background:#fff}
.em-set-row__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.em-set-row__n{font-family:var(--em-font-head);font-size:14px;font-weight:600;line-height:1.3}
.em-set-row__c{font-size:13px;color:var(--em-faint);letter-spacing:0}
.em-set-row__pick{
  font-family:var(--em-font-head);font-size:12px;font-weight:600;white-space:nowrap;
  padding:5px 11px;border-radius:999px;border:1px dashed var(--em-line);color:var(--em-faint);
}
.em-set-row__pick.is-set{border-style:solid;border-color:var(--em-ink);background:var(--em-ink);color:#fff}
.em-set-row.is-missing .em-set-row__pick:not(.is-set){border-color:var(--em-red);color:var(--em-red)}
/* Pills are secondary to the product page's own, so they sit a size smaller. */
/* Colour swatches sit above the size pills in a set row. */
.em-set-row__colours{padding-top:2px}
.em-set-row__sizes .em-size{min-width:48px;height:42px;font-size:14px}

.em-bundle-items{display:flex;flex-direction:column;gap:10px}
.em-bundle-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--em-border);border-radius:12px;padding:10px 14px}
.em-bundle-item img{width:56px;height:56px;object-fit:contain;background:#fff}
.em-bundle-item__n{font-family:var(--em-font-head);font-size:14px;font-weight:600;line-height:1.3}
.em-bundle-item__c{font-size:13px;color:var(--em-faint);letter-spacing:0}
.em-bundle-item__p{font-family:var(--em-font-head);font-size:14px;font-weight:600;color:var(--em-muted);white-space:nowrap}
.em-save-note{font-size:14px;color:var(--em-red);font-weight:600}

/* ==========================================================================
   WooCommerce, cart
   ========================================================================== */
.em-page{padding-top:26px;padding-bottom:90px}
.em-page__h1{font-size:34px;font-weight:600;line-height:1.05;letter-spacing:-.01em;padding-bottom:6px}
.em-page__sub{font-size:14px;color:var(--em-muted);display:block}

.em-cart{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:40px;align-items:start;padding-top:24px}
.em-cart__lines{border:1px solid var(--em-border);border-radius:16px;overflow:hidden;min-width:0}
.em-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;padding:18px 20px;border-bottom:1px solid var(--em-hairline);align-items:center}
.em-line:last-child{border-bottom:0}
.em-line__img{width:96px;height:96px;border:1px solid var(--em-border);border-radius:12px;overflow:hidden;background:#fff;flex:none}
.em-line__img img{width:100%;height:100%;object-fit:cover}
.em-line__info{min-width:0;display:flex;flex-direction:column;gap:6px}
.em-line__name{font-family:var(--em-font-head);font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.em-line__meta{font-size:13px;color:var(--em-muted)}
.em-line__unit{font-size:13px;color:var(--em-faint)}
.em-line__right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.em-line__total{font-family:var(--em-font-head);font-size:18px;font-weight:600;white-space:nowrap}
.em-line__remove{border:0;background:transparent;color:var(--em-faint);font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.em-line__remove:hover{color:var(--em-red)}
.em-qty--sm{height:40px}
.em-qty--sm button{width:34px;height:38px;font-size:17px}
.em-qty--sm input{width:34px;font-size:15px}

.em-summary-panel{border:1px solid var(--em-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;position:sticky;top:120px}
.em-summary-panel h2{font-family:var(--em-font-head);font-size:18px;font-weight:600;letter-spacing:0;padding-bottom:4px}
.em-sum-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--em-muted)}
.em-sum-row span:last-child{color:var(--em-ink)}
.em-sum-total{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-top:14px;border-top:1px solid var(--em-border)}
.em-sum-total__k{font-family:var(--em-font-head);font-size:15px;font-weight:600;letter-spacing:0}
.em-sum-total__v{font-family:var(--em-font-head);font-size:26px;font-weight:700;letter-spacing:-.02em}
.em-freebar{background:var(--em-surface);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--em-muted);line-height:1.5}
.em-freebar strong{color:var(--em-ink)}
.em-freebar__track{height:6px;border-radius:999px;background:#e0e4e8;margin-top:8px;overflow:hidden}
.em-freebar__fill{height:100%;background:var(--em-red);border-radius:999px;transition:width .3s ease}

/* ---------- thank you ---------- */
.em-thanks{padding:56px 0 90px;max-width:720px}
.em-thanks__badge{width:64px;height:64px;border-radius:999px;background:var(--em-red);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.em-thanks h1{font-size:42px;font-weight:700;letter-spacing:-.02em;padding-bottom:10px}
.em-thanks__lead{font-size:16px;line-height:1.7;color:var(--em-muted);margin:0 0 28px}
.em-thanks__box{border:1px solid var(--em-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.em-thanks__row{display:flex;justify-content:space-between;gap:16px;font-size:14px;flex-wrap:wrap}
.em-thanks__row span:first-child{color:var(--em-faint)}
.em-thanks__row strong{font-family:var(--em-font-head);font-weight:600}
.em-thanks__summary{background:var(--em-surface);border-radius:12px;padding:16px 18px;font-size:14px;line-height:1.6;color:var(--em-muted);margin-bottom:28px}

/* ---------- notices ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  border:1px solid var(--em-border);border-left:4px solid var(--em-ink);border-radius:12px;
  background:#fff;padding:16px 20px;margin:0 0 20px;font-size:14px;list-style:none;
}
.woocommerce-error{border-left-color:var(--em-red)}
.woocommerce-message{border-left-color:#3d7a4a}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none}

/*
 * Success and failure must be unmistakable at a glance. A white box with a
 * hairline border is not a success state, customers read "Produkti u shtua
 * në shportë" as something that had gone wrong. Colour carries the meaning,
 * the icon repeats it, and !important is deliberate: these three rules have to
 * win over whatever a plugin or a cached sheet paints on the same element.
 */
.em-notice{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-radius:12px;padding:15px 20px;margin:0 0 20px;
  font-size:14px;line-height:1.5;list-style:none;
}
.em-notice__icon{
  width:26px;height:26px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.em-notice__icon svg{width:16px;height:16px;stroke-width:2.4}
.em-notice__text{flex:1 1 auto;min-width:0}

.em-notice--ok{
  border:1px solid #bfdcc6 !important;border-left:4px solid #3d7a4a !important;
  background:#f3f9f4 !important;color:var(--em-ink) !important;
}
.em-notice--ok .em-notice__icon{background:#3d7a4a;color:#fff}

.em-notice--bad{
  border:1px solid #f3c6c7 !important;border-left:4px solid var(--em-red) !important;
  background:#fdf4f4 !important;color:var(--em-ink) !important;
}
.em-notice--bad .em-notice__icon{background:var(--em-red);color:#fff}
/*
 * An error list stacks, several failures must not run across in one row.
 * The generic notice rule further down centres its children at (0,2,0), so
 * the type selector here buys the weight to stack them left-aligned instead.
 */
.em-notice--bad,.woocommerce ul.em-notice--bad{flex-direction:column;align-items:stretch}
.em-notice--bad li{display:flex;align-items:center;gap:12px;list-style:none}
.em-notice--bad li + li{margin-top:10px}

/*
 * Info notices. The white box with a hairline border and a left accent bar is
 * the stock browser-alert look and read as unfinished. This is a filled
 * surface card with a round icon, matching the summary panels elsewhere.
 *
 * `.woocommerce-info` is styled alongside `.em-notice--info` because plugins
 * (the wishlist, for one) print that class on their own markup and never go
 * through the theme's notice template, so the icon has to come from CSS.
 */
.em-notice--info,
.woocommerce-info,
.woocommerce p.cart-empty{
  display:flex;align-items:center;gap:14px;
  border:0 !important;border-radius:14px !important;
  background:var(--em-surface) !important;color:var(--em-ink) !important;
  padding:16px 20px !important;margin:0 0 20px;
  font-size:14px;line-height:1.5;list-style:none;
}
.em-notice--info::before,
.woocommerce-info::before,
.woocommerce p.cart-empty::before{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--em-ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v5.2'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/*
 * The onward link ("Shiko shportën") sits at the far end as a quiet button.
 * The generic notice-link rule further down paints links red, which would be
 * a failure colour inside a success banner, hence the overrides.
 */
.em-notice .button,.em-notice a.wc-forward,
.woocommerce .em-notice a.button:not(.em-btn),.woocommerce .em-notice a.wc-forward:not(.em-btn){
  /* It renders inside the message text, so it must be inline-level. */
  display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px;
  border:1px solid currentColor;border-radius:999px;background:transparent;
  padding:8px 18px;height:auto;font-family:var(--em-font-head);font-size:13px;font-weight:600;
  letter-spacing:0;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.em-notice--ok .button,
.woocommerce .em-notice--ok a.button:not(.em-btn),.woocommerce .em-notice--ok a.wc-forward:not(.em-btn){
  background:transparent;border-color:#3d7a4a;color:#3d7a4a;
}
.em-notice--ok .button:hover,
.woocommerce .em-notice--ok a.button:not(.em-btn):hover,.woocommerce .em-notice--ok a.wc-forward:not(.em-btn):hover{
  background:#3d7a4a;border-color:#3d7a4a;color:#fff;transform:none;
}

/* ==========================================================================
   WooCommerce, my account
   ========================================================================== */
.em-account{display:grid;grid-template-columns:290px minmax(0,1fr);gap:36px;align-items:start;padding-top:24px}

/*
 * woocommerce-layout.css floats the two columns and sizes them at 30%/68% of
 * the container. Inside our grid that made the sidebar 30% of its own 290px
 * track, an 87px sliver the menu labels spilled out of, and left the content
 * short of the right edge. Specificity has to beat .woocommerce-account .x.
 */
.woocommerce-account .em-account .woocommerce-MyAccount-navigation,
.woocommerce-account .em-account .woocommerce-MyAccount-content{
  width:100%;float:none;margin:0;
}

.em-account__nav{
  border:1px solid var(--em-border);border-radius:16px;padding:10px;
  display:flex;flex-direction:column;gap:2px;position:sticky;top:120px;
}
.em-account__who{
  display:flex;align-items:center;gap:12px;padding:14px 14px 16px;margin-bottom:6px;
  border-bottom:1px solid var(--em-hairline);
}
.em-account__avatar{
  width:40px;height:40px;flex:none;border-radius:50%;background:var(--em-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--em-font-head);font-size:14px;font-weight:600;letter-spacing:.02em;
}
.em-account__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.em-account__name{
  font-family:var(--em-font-head);font-size:14px;font-weight:600;color:var(--em-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.em-account__email{
  font-size:12px;color:var(--em-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.em-account__nav a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  font-family:var(--em-font-head);font-size:14px;font-weight:600;line-height:1.3;color:var(--em-ink);
  transition:background .18s ease,color .18s ease;
}
.em-account__nav a:hover{background:var(--em-surface);color:var(--em-ink)}
.em-account__nav li.is-active a{background:var(--em-ink);color:#fff}
.em-account__nav li.is-active a svg{color:#fff}
.em-account__nav svg{width:18px;height:18px;flex:none;color:var(--em-faint)}
.em-account__nav a:hover svg{color:var(--em-red)}
.em-account__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.em-account__nav li{list-style:none}
/* Sign-out is not a destination like the others, set it apart and keep it quiet. */
.em-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:6px;padding-top:8px;border-top:1px solid var(--em-hairline);
}
.em-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--em-muted)}
.em-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{color:var(--em-red)}

.em-account__body{min-width:0;display:flex;flex-direction:column;gap:24px}
.em-panel{border:1px solid var(--em-border);border-radius:16px;padding:28px}
.em-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--em-hairline);flex-wrap:wrap}
.em-panel__title{font-family:var(--em-font-head);font-size:18px;font-weight:600;letter-spacing:0}
.em-panel__lead{font-size:15px;line-height:1.7;color:var(--em-muted);margin:0}
.em-panel__lead strong{color:var(--em-ink)}

/* account tiles */
.em-account-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.em-account-tile{
  display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--em-border);
  border-radius:14px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.em-account-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,20,24,.08);border-color:var(--em-ink);color:var(--em-ink)}
.em-account-tile svg{width:22px;height:22px;color:var(--em-red)}
.em-account-tile__t{font-family:var(--em-font-head);font-size:15px;font-weight:600}
.em-account-tile__d{font-size:13px;line-height:1.5;color:var(--em-muted)}

/* orders table */
.em-orders{display:flex;flex-direction:column;gap:12px}
.em-order-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:20px;align-items:center;padding:18px 20px;border:1px solid var(--em-border);border-radius:14px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.em-order-row:hover{border-color:var(--em-ink);box-shadow:0 10px 26px rgba(16,20,24,.06)}
.em-order-row__k{font-size:13px;letter-spacing:0;color:var(--em-faint);display:block;padding-bottom:3px}
.em-order-row__v{font-family:var(--em-font-head);font-size:15px;font-weight:600;overflow-wrap:anywhere}
.em-order-row__v--muted{font-family:var(--em-font-body);font-weight:400;color:var(--em-muted);font-size:14px}
.em-status{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-family:var(--em-font-head);font-size:12px;font-weight:600;letter-spacing:.04em;
  background:var(--em-surface);color:var(--em-ink);white-space:nowrap;
}
.em-status::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--em-dim)}
.em-status--processing::before,.em-status--on-hold::before{background:#c98a12}
.em-status--completed::before{background:#3d7a4a}
.em-status--cancelled::before,.em-status--failed::before,.em-status--refunded::before{background:var(--em-red)}
.em-status--pending::before{background:var(--em-faint)}

/* order detail */
.em-order-lines{display:flex;flex-direction:column}
.em-order-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--em-hairline)}
.em-order-line:last-child{border-bottom:0}
.em-order-line img{width:64px;height:64px;border:1px solid var(--em-border);border-radius:10px;object-fit:cover;background:#fff}
.em-order-line__n{font-family:var(--em-font-head);font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.em-order-line__m{font-size:13px;color:var(--em-muted);padding-top:3px}
.em-order-line__p{font-family:var(--em-font-head);font-size:15px;font-weight:600;white-space:nowrap}
.em-order-totals{display:flex;flex-direction:column;gap:10px;padding-top:20px;margin-top:20px;border-top:1px solid var(--em-border)}

.em-address-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.em-address{border:1px solid var(--em-border);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.em-address address{font-style:normal;font-size:14px;line-height:1.7;color:var(--em-muted)}

/* forms inside account / login */
.em-form{display:flex;flex-direction:column;gap:18px}
.em-form__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:4px}
/* ---------- sign in / register ---------- */
/* One centred card showing one form at a time, not two forms side by side. */
.em-auth{display:flex;justify-content:center;padding:8px 0 56px}
.em-auth__card{
  width:100%;max-width:460px;background:#fff;
  border:1px solid var(--em-border);border-radius:20px;
  padding:36px 34px 30px;box-shadow:0 24px 60px rgba(16,20,24,.07);
}
.em-auth__brand{display:flex;justify-content:center;margin-bottom:26px}
.em-auth__brand img{max-width:170px;height:auto;display:block}
.em-auth__wordmark{
  font-family:var(--em-font-head);font-size:24px;font-weight:700;
  letter-spacing:0;
}
.em-auth__panel[hidden]{display:none}
.em-auth__title{font-family:var(--em-font-head);font-size:23px;font-weight:600;margin:0 0 6px}
.em-auth__sub{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--em-muted)}
.em-auth__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:2px 0 20px;
}
.em-auth__row .em-check{margin:0}
.em-auth__submit{width:100%;justify-content:center}
.em-auth__swap{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--em-hairline);
  text-align:center;font-size:14px;color:var(--em-muted);
}
.em-auth__swap a{font-weight:600;color:var(--em-red)}
.em-auth__swap a:hover{text-decoration:underline}

@media (max-width:480px){
  .em-auth{padding-bottom:40px}
  .em-auth__card{padding:28px 22px 24px;border-radius:16px}
}
.em-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--em-muted);cursor:pointer}
.em-check input{width:17px;height:17px;accent-color:var(--em-red);flex:none}
.em-hint{font-size:13px;color:var(--em-faint);line-height:1.6;margin:0}
.em-lostpass{font-size:13px;color:var(--em-red)}

/* WooCommerce's own account markup, restyled */
.woocommerce-MyAccount-content>p:first-child{font-size:15px;line-height:1.7;color:var(--em-muted)}
.woocommerce-MyAccount-content mark{background:transparent;color:var(--em-ink);font-weight:600}

/* ---------- empty states ---------- */
.em-blank{
  border:1px solid var(--em-border);border-radius:18px;padding:64px 32px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.em-blank__icon{
  width:64px;height:64px;border-radius:999px;background:var(--em-surface);
  display:flex;align-items:center;justify-content:center;color:var(--em-faint);margin-bottom:4px;
}
.em-blank__t{font-family:var(--em-font-head);font-size:22px;font-weight:600;color:var(--em-ink)}
.em-blank__d{font-size:15px;line-height:1.7;color:var(--em-muted);max-width:420px;margin:0}
.em-blank__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:8px}

/* ---------- toast ---------- */
.em-toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:95;
  background:var(--em-ink);color:#fff;border-radius:999px;padding:14px 14px 14px 24px;
  display:flex;align-items:center;gap:18px;animation:toastIn .22s ease-out;font-size:14px;
}
.em-toast a{border:0;border-radius:999px;background:var(--em-red);color:#fff;height:36px;padding:0 18px;display:inline-flex;align-items:center;font-family:var(--em-font-head);font-weight:600;font-size:14px;letter-spacing:0;}
.em-toast a:hover{color:#fff;background:#c41c21}

/* ==========================================================================
   Responsive, 1320 / 1024 / 768 / 480
   ========================================================================== */
@media (max-width:1320px){
  .em-hero__title{font-size:56px}
}
@media (max-width:1024px){
  /* No room beside the logo at this width, so the search wraps onto its own
     full-width row under the logo and stays there. */
  .em-header__bar{height:auto;gap:16px;flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px}
  .em-search{order:3;flex:1 0 100%;max-width:none;height:44px}
  /* iOS zooms the page when a focused field is under 16px. */
  .em-search input{font-size:16px}
  .em-search button{width:36px;height:36px}
  .em-hero__inner{grid-template-columns:1fr;gap:0;min-height:0}
  .em-hero__copy{padding:56px 0 8px}
  .em-hero__title{font-size:46px}
  .em-hero__media{padding:8px 0 56px}
  .em-trust{grid-template-columns:repeat(2,1fr)}
  .em-trust__cell:nth-child(2n){border-right:0}
  .em-trust__cell:nth-child(-n+2){border-bottom:1px solid var(--em-border)}
  .em-grid-4{grid-template-columns:repeat(3,1fr)}
  .em-banners{grid-template-columns:1fr}
  .em-winter{grid-template-columns:1fr}
  .em-winter__grid{border-left:0;border-top:1px solid var(--em-border)}
  .em-winter__shot{border-left:0;border-top:1px solid var(--em-border);min-height:220px}
  .em-standards{grid-template-columns:1fr;gap:28px;padding:36px}
  .em-standards__chips{grid-template-columns:repeat(3,1fr)}
  .em-help__inner{grid-template-columns:1fr;gap:28px}
  .em-single__layout{grid-template-columns:1fr;gap:36px}
  .em-summary__title{font-size:30px}
  .em-archive__layout{grid-template-columns:1fr;gap:24px}
  .em-filters{border-right:0;padding-right:0;border-bottom:1px solid var(--em-border);padding-bottom:24px;gap:0}
  .em-filters__toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    border:1px solid var(--em-ink);background:#fff;color:var(--em-ink);height:48px;padding:0 18px;border-radius:10px;
    -webkit-appearance:none;appearance:none;
    font-family:var(--em-font-head);font-weight:600;font-size:14px;letter-spacing:0;cursor:pointer;
  }
  .em-filters__panel{display:none;padding-top:24px}
  .em-filters.is-open .em-filters__panel{display:flex}
  .em-cart{grid-template-columns:1fr;gap:28px}
  .em-summary-panel{position:static}
  .em-footer__cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:768px){
  :root{--em-gutter:26px}
  /* Phones get a wider gutter than the desktop ratio implies: the grid is
     already edge-to-edge, so the side margin is the only thing framing it. */
  .em-archive,.em-single,.em-page{padding-top:20px;padding-bottom:64px}
  .em-archive__layout{padding-top:24px}
  .em-archive__head{padding-bottom:20px}
  /* Hidden on phones. Home, Kompania, Blog and Kontakt are in the burger
     menu, so nothing here is lost. */
  .em-promo{display:none}
  .em-burger{display:flex}
  .em-header__actions{gap:12px}
  .em-phone{display:none}
  .em-nav__row{height:48px}
  .em-logo img{height:52px}
  .em-nav__link--account{margin-left:0}
  .em-hero__title{font-size:40px}
  .em-hero__cta .em-btn{width:100%}
  .em-grid-4{grid-template-columns:repeat(2,1fr)}
  .em-products{grid-template-columns:repeat(2,1fr)}
  /* A set card carries a four-image collage; two-up it becomes unreadable,
     so bundles keep the full row on phones. */
  .em-grid-3,.em-archive__layout--wide .em-products{grid-template-columns:1fr}
  .em-section{padding-top:52px}
  .em-section--last{padding-bottom:60px}
  .em-h2{font-size:23px}
  .em-section__head{gap:12px}
  .em-more{font-size:12px;letter-spacing:.04em}
  .em-banner-dark{grid-template-columns:1fr}
  .em-banner-dark__copy{padding:32px 32px 0}
  .em-banner-dark__media{padding:20px 32px 32px}
  /* Carries the longest mark ("në veshje pune"), which can no longer break.
     38px of padding at 27px type overflowed a 320px screen once it had to
     stay on one line, so both come down to the phone scale. */
  .em-banner-red{padding:32px}
  .em-banner-red h3{font-size:23px}
  .em-winter__copy{padding:32px}
  /* Four stacked badges ate most of a phone screen, so they become one
     swipeable row of two, snapping a clean pair at a time. */
  .em-trust{
    display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .em-trust::-webkit-scrollbar{display:none}
  .em-trust__cell{
    /* Two per screen. At this width an icon beside the label would leave it
       about 84px and wrap "Pagesë e sigurtë online" to four lines, so the
       icon stacks above and the label gets the full cell. */
    flex:0 0 50%;scroll-snap-align:start;padding:18px 16px;
    flex-direction:column;align-items:flex-start;gap:10px;
    border-right:1px solid var(--em-border);border-bottom:0;
  }
  .em-trust__cell svg{width:24px;height:24px}
  .em-trust__title{font-size:13px;line-height:1.35}
  /* Beats the 2-up tablet rules above, which strip borders on even cells. */
  .em-trust__cell:nth-child(2n){border-right:1px solid var(--em-border)}
  .em-trust__cell:nth-child(-n+2){border-bottom:0}
  .em-trust__cell:last-child{border-right:0}
  .em-archive__head{flex-direction:column;align-items:flex-start;gap:16px}
  .em-archive__h1{font-size:28px}
  .em-summary__title{font-size:26px}
  .em-summary__price{font-size:28px}
  .em-form-grid{grid-template-columns:1fr}
  .em-line{grid-template-columns:72px minmax(0,1fr);row-gap:12px}
  .em-line__img{width:72px;height:72px}
  .em-line__right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .em-footer__cols{grid-template-columns:1fr}
  .em-thanks h1{font-size:32px}
}
@media (max-width:480px){
  .em-logo img{height:46px}
  /* Two-up, not one-up. A single full-width card per row reads as an
     unstyled list; the pair keeps the catalogue looking like a catalogue. */
  .em-grid-4,.em-products{grid-template-columns:repeat(2,1fr);gap:12px}
  .em-grid-3,.em-archive__layout--wide .em-products{grid-template-columns:1fr}
  .em-card__body{padding:12px 13px 14px;gap:7px}
  .em-card__title{font-size:14px;letter-spacing:0}
  .em-card__price{font-size:18px}
  /* Price over a full-width button: side by side they collide at this width. */
  .em-card__foot{flex-direction:column;align-items:stretch;gap:9px;padding-top:10px}
  .em-card__foot .em-btn{width:100%}
  .em-card__std{font-size:11px;padding:3px 7px;top:8px;left:8px}
  .em-card__low{font-size:10px;padding:3px 7px;top:8px;right:8px}
  .em-tile__foot{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 13px 14px}
  .em-tile__name{font-size:14px}
  .em-hero__title{font-size:34px}
  .em-hero__frame{border-radius:16px 70px 16px 70px}
  .em-standards{padding:26px 22px}
  .em-standards__chips{grid-template-columns:1fr 1fr;gap:8px}
  /* Five cards leave a lone one on the last row; let it take the width. */
  .em-std-chip:last-child:nth-child(odd){grid-column:1/-1}
  .em-std-chip{padding:14px 12px 16px}
  .em-buy{flex-wrap:wrap}
  .em-qty{width:100%;justify-content:center}
  .em-buy .em-btn{width:100%}
  .em-specs__row{grid-template-columns:1fr;gap:4px}
  .em-guide__row{grid-template-columns:60px 1fr;row-gap:4px}
  .em-bundle-item{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .em-bundle-item img{width:44px;height:44px}
  /* The chosen-size chip drops below the name rather than squeezing it. */
  .em-set-row__top{grid-template-columns:auto 44px minmax(0,1fr);row-gap:8px}
  .em-set-row img{width:44px;height:44px}
  .em-set-row__pick{grid-column:2/-1;justify-self:start}
  .em-set-row__sizes .em-size{min-width:44px;height:44px}
}

/* Below ~360px the wide gutter would starve the two-up grid, so it yields.
   Everything from 360px up keeps the roomier margin. */
@media (max-width:359px){
  :root{--em-gutter:16px}
  .em-card__title{font-size:13px}
  .em-card__price{font-size:17px}
}

/* hit targets >= 44px on touch */
@media (pointer:coarse){
  .em-nav__link{min-height:44px}
  .em-line__remove{min-height:44px;display:inline-flex;align-items:center}
  .em-footer__col a{min-height:32px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   WooCommerce form primitives
   Woo prints its own wrappers and classes; map them onto the Emerald controls
   so every input across checkout, account and login looks identical.
   ========================================================================== */
.woocommerce form .form-row,
.em-form-row{display:flex;flex-direction:column;gap:7px;margin:0}
.woocommerce form .form-row label,
.em-form-row label{
  font-size:13px;letter-spacing:0;color:var(--em-faint);
  font-weight:500;line-height:1.4;
}
.em-label{
  font-size:13px;letter-spacing:0;color:var(--em-faint);
  font-weight:500;line-height:1.4;
}
.woocommerce form .form-row label .required,
.em-label .required{color:var(--em-red);text-decoration:none;border:0}
.woocommerce form .form-row .optional{color:var(--em-dim);text-transform:none;letter-spacing:0}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input,
.em-input,.em-select,.em-textarea{
  width:100%;height:52px;border:1px solid var(--em-line);border-radius:10px;padding:0 14px;
  font-family:var(--em-font-body);font-size:15px;color:var(--em-ink);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.woocommerce form .form-row textarea,
.em-textarea{height:auto;min-height:104px;padding:14px;line-height:1.6;resize:vertical}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.em-input:focus,.em-select:focus,.em-textarea:focus{
  outline:none;border-color:var(--em-ink);box-shadow:0 0 0 3px rgba(16,20,24,.06);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--em-red)}
.woocommerce-input-wrapper{display:block;width:100%}

/* Emerald checkout two-up rows */
.em-checkout .form-row-first,
.em-checkout .form-row-last{width:100%}
.em-checkout__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Woo buttons anywhere we have not templated */
.woocommerce .button:not(.em-btn),
.woocommerce button.button:not(.em-btn),
.woocommerce input.button:not(.em-btn),
.woocommerce a.button:not(.em-btn){
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:var(--em-ink);color:#fff;
  height:48px;padding:0 24px;cursor:pointer;
  font-family:var(--em-font-head);font-weight:600;font-size:14px;letter-spacing:0;
  transition:background .18s ease,transform .18s ease;
}
.woocommerce .button:not(.em-btn):hover,
.woocommerce button.button:not(.em-btn):hover,
.woocommerce input.button:not(.em-btn):hover,
.woocommerce a.button:not(.em-btn):hover{background:var(--em-red);color:#fff;transform:translateY(-1px)}
#place_order,
button#place_order,
input#place_order,
.woocommerce #place_order,
.woocommerce button#place_order{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:56px;padding:0 30px;margin-top:4px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--em-red);color:#fff;
  font-family:var(--em-font-head);font-weight:600;font-size:16px;
  letter-spacing:0;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
#place_order:hover,
.woocommerce #place_order:hover{background:var(--em-ink);color:#fff;transform:translateY(-2px)}
#place_order:disabled,
#place_order[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Checkout login / coupon panels */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle{margin-bottom:20px}
.woocommerce-form-login,
.woocommerce-form-coupon{
  border:1px solid var(--em-border);border-radius:14px;padding:22px;margin:0 0 22px;
  display:flex;flex-direction:column;gap:16px;
}
.woocommerce-form-coupon .form-row{flex-direction:row;gap:10px;align-items:stretch}
.woocommerce-form-coupon .form-row input{flex:1}

/* Shipping rows inside the review panel */
.woocommerce-shipping-totals.shipping{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--em-muted)}
.woocommerce-shipping-totals.shipping th{display:block;font-weight:400;text-align:left}
.woocommerce-shipping-totals.shipping td{display:block;text-align:right;color:var(--em-ink)}
.woocommerce-shipping-methods{list-style:none;margin:0;padding:0}
.woocommerce-shipping-methods li{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.woocommerce-shipping-destination{font-size:12px;color:var(--em-faint);padding-top:4px}

/* Woo tables we have not replaced (order details, downloads) */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;border:1px solid var(--em-border);
  border-radius:14px;overflow:hidden;margin:0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--em-hairline);
  font-size:14px;vertical-align:top;
}
.woocommerce table.shop_table th{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--em-faint);background:var(--em-surface);
}
.woocommerce table.shop_table tfoot th{background:#fff;color:var(--em-ink);letter-spacing:.05em}
.woocommerce table.shop_table tr:last-child td,
.woocommerce table.shop_table tr:last-child th{border-bottom:0}
.woocommerce table.shop_table .wc-item-meta{list-style:none;margin:6px 0 0;padding:0;font-size:13px;color:var(--em-muted)}
.woocommerce table.shop_table .wc-item-meta li{display:flex;gap:6px}
.woocommerce table.shop_table .wc-item-meta p{margin:0}
.woocommerce .woocommerce-customer-details address{
  font-style:normal;border:1px solid var(--em-border);border-radius:14px;padding:20px;
  font-size:14px;line-height:1.7;color:var(--em-muted);
}
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-customer-details h2{
  font-family:var(--em-font-head);font-size:18px;font-weight:600;
  letter-spacing:0;margin:32px 0 16px;
}
.woocommerce .woocommerce-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.woocommerce .woocommerce-columns .col-1,
.woocommerce .woocommerce-columns .col-2{width:auto;float:none}

/* Password strength meter */
.woocommerce-password-strength{font-size:13px;padding:8px 0 0;font-weight:600}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{color:var(--em-red)}
.woocommerce-password-strength.good{color:#c98a12}
.woocommerce-password-strength.strong{color:#3d7a4a}
.woocommerce-password-hint{font-size:13px;color:var(--em-faint);line-height:1.6}

@media (max-width:1024px){
  .em-account{grid-template-columns:1fr;gap:24px}
  .em-account__nav{position:static;flex-direction:column}
  .em-account__who{padding:10px 12px 14px;margin-bottom:4px}
  .em-account__nav ul{flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none}
  .em-account__nav ul::-webkit-scrollbar{display:none}
  .em-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--em-hairline);margin-left:6px;padding-left:6px}
  .em-account__nav a{white-space:nowrap}
  .em-order-row{grid-template-columns:1fr 1fr;row-gap:16px}
  .em-order-row>*:last-child{grid-column:1/-1}
}
@media (max-width:768px){
  .em-panel{padding:22px}
  .em-account-tiles{grid-template-columns:1fr}
  .em-checkout__grid{grid-template-columns:1fr}
  .em-order-row{grid-template-columns:1fr}
  .em-blank{padding:44px 22px}
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{padding:12px 14px;font-size:13px}
}

/* ==========================================================================
   Checkout field grid
   Woo tags its billing fields form-row-first / -last / -wide; lay them out on
   a real two-column grid so labels and inputs line up across the form.
   ========================================================================== */
.em-checkout .woocommerce-billing-fields__field-wrapper,
.em-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.em-checkout .form-row-wide,
.em-checkout .woocommerce-additional-fields__field-wrapper .form-row{grid-column:1/-1}
/*
 * Half-width rows flow into the next free cell rather than being pinned to
 * column 1 / column 2. Pinning meant that if field order ever shifted, one
 * row claimed column 2 and left an empty gap in column 1.
 */
.em-checkout .form-row-first,
.em-checkout .form-row-last{grid-column:auto}
.em-checkout .em-hidden{display:none!important}
.em-checkout datalist{display:none}
.em-checkout .woocommerce-billing-fields h3,
.em-checkout .woocommerce-additional-fields h3{display:none}
.em-checkout .woocommerce-billing-fields__field-wrapper{margin:0}

.em-checkout__main{min-width:0;display:flex;flex-direction:column}
.em-checkout .em-fieldset:last-child{padding-bottom:0}

/* Filter rail, price range */
.em-filters__range{width:100%;accent-color:var(--em-red);height:20px;cursor:pointer}
.em-filters__range-out{
  display:flex;justify-content:space-between;font-size:13px;
  color:var(--em-muted);padding-top:8px;
}
.em-filters__range-out b{color:var(--em-ink);font-weight:600}

/* Sets archive spans the full width, it has no filter rail */
.em-archive__layout--wide{grid-template-columns:minmax(0,1fr)}

/* Cart action bar */
.em-cart__actions{
  padding:16px 20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--em-hairline);
}

@media (max-width:768px){
  .em-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  .em-checkout .form-row-first,
  .em-checkout .form-row-last{grid-column:1/-1}
}

/* ==========================================================================
   Small shared utilities used by the templates
   ========================================================================== */
.em-btn--lg{height:56px;padding:0 26px;font-size:15px}
.em-btn--start{align-self:flex-start}
.em-form__actions--split{justify-content:space-between;padding-top:20px}
.em-form__actions--spaced{padding-top:20px}
.em-fieldset--flush{padding-bottom:0}
.em-panel__lead--spaced{padding-bottom:20px}
.em-summary-panel__note{font-size:13px;color:var(--em-faint);text-align:center;line-height:1.5}
.em-order-row__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.em-archive__results{min-width:0}
.em-note{padding:14px 0;border-bottom:1px solid var(--em-hairline)}
.em-note:last-child{border-bottom:0}
.em-note__body{font-size:14px;line-height:1.7;padding-top:4px}
.em-note__body p{margin:0 0 8px}
.em-note__body p:last-child{margin:0}

/* Panels stack inside the account body, so their own margins must not fight
   the flex gap. */
.em-account__body>.em-panel{margin:0}
.em-account__body>form>.em-panel{margin:0 0 24px}
.em-account__body>form>.em-panel:last-of-type{margin-bottom:0}
.em-account__body>form{display:flex;flex-direction:column;gap:24px}

/* The account page inherits the generic page wrapper; drop its bottom padding
   duplication and give the grid room. */
.woocommerce-account .em-page__content{padding-top:0}
.woocommerce-account .woocommerce{width:100%}

/* Notices Woo injects inside the checkout form must not become grid columns. */
.em-checkout>.woocommerce-NoticeGroup,
.em-checkout>.woocommerce-error,
.em-checkout>.woocommerce-message,
.em-checkout>.woocommerce-info{grid-column:1/-1}
.em-checkout .woocommerce-shipping-fields{margin:0}
.em-checkout .woocommerce-additional-fields{margin:0}

/* ==========================================================================
   Checkout, rebuilt
   Left column: Kontakti / Dërgesa / Faturimi / Pagesa.
   Right rail: sticky order summary.
   ========================================================================== */

/* ---------- step indicator ---------- */
.em-steps{
  list-style:none;margin:0 0 26px;padding:0;
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
}
.em-step{display:flex;align-items:center;gap:10px;color:var(--em-faint)}
.em-step:not(:last-child)::after{
  content:"";width:44px;height:1px;background:var(--em-border);margin:0 14px;flex:none;
}
.em-step a,.em-step>span{display:flex;align-items:center;gap:10px;color:inherit}
.em-step__num{
  width:26px;height:26px;border-radius:999px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--em-border);background:#fff;
  font-family:var(--em-font-head);font-size:12px;font-weight:600;color:var(--em-faint);
}
.em-step__label{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;
  letter-spacing:0;white-space:nowrap;
}
.em-step.is-current{color:var(--em-ink)}
.em-step.is-current .em-step__num{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.em-step.is-done{color:var(--em-ink)}
.em-step.is-done .em-step__num{background:var(--em-red);border-color:var(--em-red);color:#fff}
.em-step.is-done a:hover{color:var(--em-red)}
.em-step.is-done:not(:last-child)::after{background:var(--em-red)}

/* ---------- layout ---------- */
.em-checkout{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:48px;align-items:start;padding-top:8px;
}
.em-checkout__main{min-width:0;display:flex;flex-direction:column;gap:0}

/* ---------- numbered sections ---------- */
.em-fieldset{
  display:flex;flex-direction:column;gap:18px;
  padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--em-hairline);
}
.em-fieldset--flush{padding-bottom:0;margin-bottom:0;border-bottom:0}
.em-fieldset--extra{margin:0}
.em-fieldset__head{display:flex;align-items:flex-start;gap:14px}
.em-fieldset__step{
  width:28px;height:28px;border-radius:999px;flex:none;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--em-ink);color:#fff;
  font-family:var(--em-font-head);font-size:13px;font-weight:600;
}
.em-fieldset__title{
  font-family:var(--em-font-head);font-size:16px;font-weight:600;
  letter-spacing:0;line-height:1.3;
}
.em-fieldset__note{font-size:13px;color:var(--em-muted);line-height:1.5;padding-top:3px}

/* ---------- VAT block ---------- */
.em-vat-toggle{padding-top:2px}
.em-vat-toggle label,
.em-checkout .em-vat-toggle label{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--em-font-body);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--em-ink);font-weight:500;
}
.em-vat-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--em-red);flex:none;margin:0}
.em-vat-field{display:none}
.em-vat-field.is-open{display:flex}

/* ---------- payment cards ---------- */
.em-checkout #payment,
.woocommerce-checkout-payment{background:transparent;border:0;padding:0}
.wc_payment_methods,
.em-pay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.em-pay__opt{
  display:block;border:1px solid var(--em-border);border-radius:14px;padding:0;
  transition:border-color .18s ease,box-shadow .18s ease;background:#fff;
}
.em-pay__opt:hover{border-color:var(--em-line)}
.em-pay__opt.is-on{border-color:var(--em-ink);box-shadow:0 0 0 1px var(--em-ink)}
.em-pay__opt label{
  display:flex;gap:14px;align-items:center;cursor:pointer;margin:0;padding:18px 20px;
  font-size:inherit;letter-spacing:0;text-transform:none;color:var(--em-ink);
}
.em-pay__opt input[type=radio]{accent-color:var(--em-red);width:18px;height:18px;flex:none;margin:0}
.em-pay__icon{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--em-surface);color:var(--em-ink);
}
.em-pay__opt.is-on .em-pay__icon{background:var(--em-ink);color:#fff}
.em-pay__text{display:flex;flex-direction:column;min-width:0}
.em-pay__t{font-family:var(--em-font-head);font-size:15px;font-weight:600;line-height:1.3}
.em-pay__d{font-size:13px;color:var(--em-muted);padding-top:3px;line-height:1.5}
.em-pay__box,
.em-pay__opt .payment_box{
  padding:0 20px 18px 78px;font-size:13px;line-height:1.6;color:var(--em-muted);
}
.em-pay__opt .payment_box p{margin:0 0 8px}
.em-pay__opt .payment_box p:last-child{margin:0}

/* place order */
.woocommerce-checkout .place-order{margin:24px 0 0;padding:0}
.woocommerce-privacy-policy-text{font-size:13px;color:var(--em-faint);line-height:1.6;margin:0 0 14px}
.em-checkout .woocommerce-terms-and-conditions-wrapper{margin:0 0 14px}

/* ---------- summary rail ---------- */
.em-order-review{position:sticky;top:120px;min-width:0}
.em-review{
  border:1px solid var(--em-border);border-radius:18px;padding:24px;
  display:flex;flex-direction:column;gap:18px;background:#fff;
}
.em-review__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:18px;border-bottom:1px solid var(--em-hairline);
}
.em-review__count{font-size:13px;color:var(--em-faint);white-space:nowrap}

.em-review__items{margin:0}
.em-review__summary{
  display:none;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;padding:12px 0;
  font-family:var(--em-font-head);font-size:14px;font-weight:600;
}
.em-review__summary::-webkit-details-marker{display:none}
.em-review__summary::after{content:"▾";color:var(--em-faint);transition:transform .2s ease}
.em-review__items[open] .em-review__summary::after{transform:rotate(180deg)}
.em-review__summary-total{margin-left:auto;padding-right:10px}

.em-review__lines{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.em-review-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.em-review-line__media{position:relative;width:52px;height:52px;flex:none}
.em-review-line__media img{
  width:52px;height:52px;border:1px solid var(--em-border);border-radius:10px;
  object-fit:cover;background:#fff;
}
.em-review-line__qty{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--em-ink);color:#fff;border:2px solid #fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--em-font-head);font-size:11px;font-weight:700;
}
.em-review-line__info{display:flex;flex-direction:column;min-width:0;gap:2px}
.em-review-line__n{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.em-review-line__m{font-size:12px;color:var(--em-muted);line-height:1.5}
.em-review-line__m p{margin:0}
.em-review-line__p{font-family:var(--em-font-head);font-size:14px;font-weight:600;white-space:nowrap}

.em-review__totals{display:flex;flex-direction:column;gap:11px;padding-top:18px;border-top:1px solid var(--em-hairline)}
.em-freebar--won{background:#eef5f0;color:#2f6b3d}
.em-freebar--won strong{color:#2f6b3d}

.em-review__trust{
  list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--em-hairline);
  display:flex;flex-direction:column;gap:11px;
}
.em-review__trust li{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.5;color:var(--em-muted)}
.em-review__trust svg{flex:none;color:var(--em-red);margin-top:1px}
.em-review__trust a{color:var(--em-ink);font-weight:600}
.em-review__trust a:hover{color:var(--em-red)}
.em-review__back{
  font-size:13px;color:var(--em-faint);text-align:center;
  padding-top:4px;font-family:var(--em-font-head);font-weight:600;
}
.em-review__back:hover{color:var(--em-red)}

/* ---------- login / coupon prompts above the form ---------- */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--em-border);border-left:4px solid var(--em-ink);
  border-radius:12px;background:#fff;padding:14px 18px;margin:0 0 14px;
  font-size:14px;color:var(--em-muted);
}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a{
  font-family:var(--em-font-head);font-weight:600;color:var(--em-red);
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .em-checkout{grid-template-columns:1fr;gap:28px}
  .em-order-review{position:static;order:-1}
  .em-review__summary{display:flex}
  .em-review__lines{max-height:none}
  .em-steps{margin-bottom:20px}
}
@media (max-width:768px){
  .em-fieldset{padding-bottom:26px;margin-bottom:26px}
  .em-step:not(:last-child)::after{width:20px;margin:0 8px}
  .em-step__label{font-size:11px}
  .em-review{padding:20px}
  .em-pay__opt label{padding:16px}
  .em-pay__box,.em-pay__opt .payment_box{padding:0 16px 16px 16px}
}
@media (max-width:480px){
  .em-step__label{display:none}
  .em-step:not(:last-child)::after{width:28px}
  .em-fieldset__head{gap:11px}
  .em-pay__icon{width:38px;height:38px}
}

/* ==========================================================================
   Wishlist (TI WooCommerce Wishlist)
   The plugin's own CSS is left in place for its icon font and dialog; these
   rules override everything the customer actually sees so the wishlist reads
   as part of the shop.
   ========================================================================== */

/* header heart badge */
.em-wish-count{
  position:absolute;top:3px;right:2px;min-width:18px;height:18px;border-radius:9px;
  background:var(--em-red);color:#fff;font-family:var(--em-font-head);font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;
}
.em-wish-count.is-empty{display:none}

/* ---------- the add-to-wishlist control on the product page ---------- */
.em-summary .tinv-wraper,
.em-summary .tinv-wishlist{margin:0}
.em-summary .tinvwl_add_to_wishlist_button,
.tinv-wraper .tinvwl_add_to_wishlist_button{
  display:inline-flex!important;align-items:center;gap:9px;
  background:transparent!important;border:0!important;padding:0!important;margin:0!important;
  height:auto!important;line-height:1.4!important;border-radius:0!important;box-shadow:none!important;
  font-family:var(--em-font-body)!important;font-size:14px!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;
  color:var(--em-muted)!important;cursor:pointer;transition:color .18s ease;
}
.em-summary .tinvwl_add_to_wishlist_button:hover,
.tinv-wraper .tinvwl_add_to_wishlist_button:hover{color:var(--em-red)!important}
.tinvwl_add_to_wishlist_button.tinvwl-product-in-list{color:var(--em-red)!important;font-weight:600!important}
.tinvwl_add_to_wishlist_button::before{font-size:17px!important;line-height:1!important;margin:0!important}
.tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text{font:inherit!important;color:inherit!important}

/* the plugin's tooltip bubble */
.tinvwl-tooltip{
  font-family:var(--em-font-body);font-size:12px;background:var(--em-ink);color:#fff;
  border-radius:8px;padding:6px 10px;
}

/* ---------- the wishlist page ---------- */
.tinv-wishlist{font-family:var(--em-font-body);color:var(--em-ink)}
/*
 * The plugin prints its own "Lista e dëshirave" heading inside the page, which
 * repeats the h1 that page.php has already rendered from the page title. One
 * heading per page: the plugin's goes.
 */
.tinv-wishlist .tinv-header{display:none}

.tinv-wishlist table.tinvwl-table{
  width:100%;border-collapse:collapse;border:1px solid var(--em-border);
  border-radius:16px;overflow:hidden;margin:0;
}
.tinv-wishlist table.tinvwl-table th,
.tinv-wishlist table.tinvwl-table td{
  padding:16px 18px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--em-hairline);font-size:14px;
}
.tinv-wishlist table.tinvwl-table thead th{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--em-faint);background:var(--em-surface);border-bottom:1px solid var(--em-border);
}
.tinv-wishlist table.tinvwl-table tbody tr:last-child td{border-bottom:0}
.tinv-wishlist table.tinvwl-table tfoot td{background:#fff;border-top:1px solid var(--em-border)}

.tinv-wishlist .product-thumbnail{width:96px}
.tinv-wishlist .product-thumbnail img{
  width:80px;height:80px;object-fit:cover;background:#fff;
  border:1px solid var(--em-border);border-radius:12px;
}
.tinv-wishlist .product-name a{
  font-family:var(--em-font-head);font-size:15px;font-weight:600;line-height:1.35;
  color:var(--em-ink);overflow-wrap:anywhere;
}
.tinv-wishlist .product-name a:hover{color:var(--em-red)}
.tinv-wishlist .product-price{font-family:var(--em-font-head);font-weight:600;white-space:nowrap}
.tinv-wishlist .product-price del{color:var(--em-dim);font-weight:400;margin-right:6px}
.tinv-wishlist .product-price ins{text-decoration:none}
.tinv-wishlist .product-stock .stock.in-stock{color:#3d7a4a;font-weight:600}
.tinv-wishlist .product-stock .stock.out-of-stock{color:var(--em-red);font-weight:600}
.tinv-wishlist .product-date,
.tinv-wishlist time{color:var(--em-muted);font-size:13px}

/* buttons inside the wishlist */
.tinv-wishlist button.button,
.tinv-wishlist a.button,
.tinv-wishlist .tinvwl-buttons-group button{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--em-ink);background:transparent;color:var(--em-ink);
  height:40px;padding:0 18px;border-radius:999px;cursor:pointer;
  font-family:var(--em-font-head);font-weight:600;font-size:13px;
  letter-spacing:0;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.tinv-wishlist button.button:hover,
.tinv-wishlist a.button:hover,
.tinv-wishlist .tinvwl-buttons-group button:hover{
  background:var(--em-red);border-color:var(--em-red);color:#fff;
}
.tinv-wishlist .product-action .button{width:auto}
.tinv-wishlist .product-remove button,
.tinv-wishlist button.tinvwl-remove{
  border:0!important;background:transparent!important;color:var(--em-faint)!important;
  height:auto!important;padding:6px!important;font-size:18px!important;
}
.tinv-wishlist .product-remove button:hover,
.tinv-wishlist button.tinvwl-remove:hover{color:var(--em-red)!important;background:transparent!important}

/* selection + footer bars */
.tinv-wishlist .tinvwl-table-manage-list td,
.tinv-wishlist .tinvwl-table-manage-person td{background:#fff}
.tinv-wishlist .social-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:18px}
.tinv-wishlist .social-buttons li{list-style:none}
.tinv-wishlist .tinv-wishlist-clear{clear:both}
.tinv-wishlist input[type=checkbox]{width:17px;height:17px;accent-color:var(--em-red)}

/* empty state */
.tinv-wishlist .tinv-wishlist-empty,
.tinv-wishlist .wishlist-empty{
  border:1px solid var(--em-border);border-radius:18px;padding:56px 32px;text-align:center;
  color:var(--em-muted);font-size:15px;line-height:1.7;
}

/* the "added to wishlist" dialog */
.tinvwl-modal .tinvwl-content,
.tinv-modal .tinv-modal-inner{
  border-radius:18px;border:1px solid var(--em-border);
  font-family:var(--em-font-body);
}
.tinv-modal .tinvwl-title{font-family:var(--em-font-head);font-weight:600}

@media (max-width:768px){
  .tinv-wishlist table.tinvwl-table thead{display:none}
  .tinv-wishlist table.tinvwl-table,
  .tinv-wishlist table.tinvwl-table tbody,
  .tinv-wishlist table.tinvwl-table tr,
  .tinv-wishlist table.tinvwl-table td{display:block;width:100%}
  .tinv-wishlist table.tinvwl-table tr{
    border-bottom:1px solid var(--em-hairline);padding:8px 0;
  }
  .tinv-wishlist table.tinvwl-table td{border-bottom:0;padding:8px 16px}
  .tinv-wishlist .product-thumbnail{width:auto}
}

/* ==========================================================================
   Content pages (Transporti, Kthimi, Tabela e madhësive, Porosi për kompani)
   Built in Elementor so the client can edit them; styled here so they match
   the shop rather than inheriting Elementor's defaults.
   ========================================================================== */
.em-page__content{padding-top:8px}
.em-prose h2,
.em-prose h3,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3{
  font-family:var(--em-font-head);font-size:17px;font-weight:600;
  letter-spacing:0;color:var(--em-ink);
  margin:28px 0 12px;
}
.em-prose p,
.elementor-widget-text-editor p{margin:0 0 14px;line-height:1.75}
.em-prose ul,
.elementor-widget-text-editor ul{margin:0 0 16px;padding-left:20px}
.em-prose li,
.elementor-widget-text-editor li{margin:0 0 7px;line-height:1.7}
.em-prose a:not([class]),
.elementor-widget-text-editor a:not([class]){color:var(--em-red);font-weight:600}
.em-prose a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):hover{color:var(--em-ink)}
.em-prose strong,
.elementor-widget-text-editor strong{color:var(--em-ink)}

/* tables inside editable content (the size guide) */
.em-prose table,
.elementor-widget-text-editor table{
  width:100%;max-width:560px;border-collapse:collapse;
  border:1px solid var(--em-border);border-radius:14px;overflow:hidden;
  margin:0 0 20px;font-size:14px;
}
.em-prose th,
.elementor-widget-text-editor th{
  font-family:var(--em-font-head);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--em-faint);background:var(--em-surface);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--em-border);
}
.em-prose td,
.elementor-widget-text-editor td{
  padding:12px 16px;border-bottom:1px solid var(--em-hairline);color:var(--em-muted);
}
.em-prose tr:last-child td,
.elementor-widget-text-editor tr:last-child td{border-bottom:0}
.em-prose td strong,
.elementor-widget-text-editor td strong{font-family:var(--em-font-head);color:var(--em-ink)}

/* the footer "Informata" menu renders as list items */
.em-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.em-footer__col li{list-style:none;margin:0}
.em-footer__col li a{font-size:14px;color:var(--em-promo)}
.em-footer__col li a:hover{color:#fff}

/* Defensive: the step indicator is an <ol>, so kill list markers on the items
   too, inherited list-style is enough in every current browser, but a stray
   plugin reset can put them back. */
.em-steps,.em-step{list-style:none!important}
.em-steps li::marker{content:""}

/* ==========================================================================
   Checkout form, beat WooCommerce's float layout
   woocommerce-layout.css sets .form-row-first/-last to width:47% + float, at
   higher specificity than our grid rules, so fields rendered at 47% of their
   grid column while form-row-wide stayed 100%. Our grid owns the columns; the
   rows must simply fill them.
   ========================================================================== */
.woocommerce form.em-checkout .form-row,
.woocommerce form.em-checkout .form-row-first,
.woocommerce form.em-checkout .form-row-last,
.woocommerce form.em-checkout .form-row-wide,
.woocommerce-page form.em-checkout .form-row-first,
.woocommerce-page form.em-checkout .form-row-last{
  width:100%;float:none;margin:0;padding:0;overflow:visible;
}
.woocommerce form.em-checkout .form-row input.input-text,
.woocommerce form.em-checkout .form-row select,
.woocommerce form.em-checkout .form-row textarea{width:100%;min-width:0}
.em-checkout .woocommerce-input-wrapper{display:block;width:100%;min-width:0}

/* Validation states in our own palette, not WooCommerce's maroon */
.woocommerce form.em-checkout .form-row label,
.woocommerce form.em-checkout .form-row.woocommerce-validated label,
.woocommerce form.em-checkout .form-row.woocommerce-invalid label{
  color:var(--em-faint);
}
.woocommerce form.em-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.em-checkout .form-row.woocommerce-invalid select{
  border-color:var(--em-red);box-shadow:0 0 0 3px rgba(227,34,39,.08);
}
.woocommerce form.em-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.em-checkout .form-row.woocommerce-validated select{
  border-color:var(--em-border);box-shadow:none;
}

/* ==========================================================================
   Notice bars (coupon prompt, login prompt)
   WooCommerce hangs a clearfix and an icon on ::before/::after and pads the
   box to make room for them; with our own layout that glyph landed on top of
   the text. Drop both and lay the bar out honestly.
   ========================================================================== */
.woocommerce-info::before,.woocommerce-info::after,
.woocommerce-message::before,.woocommerce-message::after,
.woocommerce-error::before,.woocommerce-error::after{content:none!important;display:none!important}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--em-border);border-top:0;border-left:3px solid var(--em-ink);
  border-radius:12px;background:#fff;
  padding:15px 20px;margin:0 0 16px;list-style:none;
  font-family:var(--em-font-body);font-size:14px;line-height:1.5;color:var(--em-muted);
}
.woocommerce .woocommerce-message{border-left-color:#3d7a4a}
.woocommerce .woocommerce-error{border-left-color:var(--em-red);color:var(--em-ink)}
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a{
  font-family:var(--em-font-head);font-weight:600;color:var(--em-red);
  text-decoration:none;margin-left:auto;
}
.woocommerce .woocommerce-info a:hover{color:var(--em-ink)}
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button{margin-left:auto}

.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle{margin:0 0 16px}
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info{margin:0}

@media (max-width:600px){
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-message{align-items:flex-start;flex-direction:column;gap:6px}
  .woocommerce .woocommerce-info a,
  .woocommerce .woocommerce-message a{margin-left:0}
}

/* Rows hidden by script (postcode for Kosovo) must leave no grid cell behind. */
.em-checkout .em-row-hidden,
.em-checkout .form-row[hidden]{display:none!important}

/* A checkbox that already reads as a choice does not need "(optional)". */
.em-vat-toggle .optional{display:none}

/* ---------- polish ----------
   One easing curve for every hover and swap, so the site moves the same way
   everywhere instead of snapping at .15s in some places and gliding in others. */
:root{--em-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
a,.em-btn,.em-btn--pill-light,.em-btn--pill-outline,.em-winter__cta,.em-help__tel,.em-help__mail,
.em-tile,.em-card,.em-set,.em-swatch,.em-size,.em-gallery__thumb,.em-filters__clear,.em-icon-btn{
  transition-duration:.3s;transition-timing-function:var(--em-ease);
}
/* Cards lift on a soft shadow; the black outline read as a hard frame. */
.em-card:hover,.em-tile:hover,.em-set:hover{border-color:rgba(16,20,24,.16)}
.em-card__media img,.em-tile__img img,.em-set__media img{transition:transform .7s var(--em-ease),opacity .5s ease}
.em-card:hover .em-card__media img,.em-tile:hover .em-tile__img img,.em-set:hover .em-set__media img{transform:scale(1.035)}
/* Photos fade in as they arrive instead of popping in. Gated on .em-js so the
   images stay visible if the script never runs. */
.em-js .em-card__media img:not(.is-loaded),
.em-js .em-tile__img img:not(.is-loaded),
.em-js .em-set__media img:not(.is-loaded){opacity:0}
/* Colour swaps crossfade the main product photo. */
.em-gallery__main img{transition:opacity .25s ease}
.em-gallery__main img.is-swapping{opacity:0}
/* Logged-in admins: keep the sticky header below the admin bar. */
.admin-bar .em-header{top:32px}
@media (max-width:782px){.admin-bar .em-header{top:46px}}
@media (max-width:600px){.admin-bar .em-header{top:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .em-card:hover .em-card__media img,.em-tile:hover .em-tile__img img,.em-set:hover .em-set__media img{transform:none}
}

/* ---------- professional pass ----------
   Visual only, no layout changes: squarer buttons in normal case outside the
   hero, no swooshes on the red banners, highlight words as plain colour
   instead of boxes, lighter shadows, and a taller hero on desktop. The hero
   itself keeps its original lines, frame and buttons. */
.em-banner-red__lines,.em-help__lines{display:none}
@media (min-width:1025px){
  .em-hero__inner{min-height:760px}
  .em-hero__copy{padding:120px 0}
}

.em-btn,.em-btn--pill-light,.em-btn--pill-outline,.em-winter__cta,.em-help__tel,.em-help__mail,.em-filters__clear{
  border-radius:8px;text-transform:none;letter-spacing:0;
}
.em-btn--white,.em-btn--ghost,.em-btn--red{font-size:16px;font-weight:600}
.em-btn--white{box-shadow:none}
.em-btn--white:hover{box-shadow:none;transform:none;background:var(--em-ink);color:#fff}
.em-btn--red:hover,.em-winter__cta:hover,.em-help__tel:hover{transform:none}
.em-btn--outline,.em-btn--dark{font-size:14px}
.em-btn--pill-light,.em-btn--pill-outline{font-size:15px}
.em-winter__cta{font-size:15px}

/* Every button on the site shares the same slightly rounded corners and
   normal capitalisation, the hero and "My Emerald" included. The hero white
   button keeps its soft lift so it still reads on the red background. */
.em-hero .em-btn--white{box-shadow:0 10px 26px rgba(16,20,24,.22)}
.em-hero .em-btn--white:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(16,20,24,.3);background:#fff;color:var(--em-ink)}
.em-nav__link--account{border-radius:8px;text-transform:none;letter-spacing:0;font-size:14px}
.em-notice .button,.em-notice a.wc-forward,.em-toast a,
.woocommerce .button:not(.em-btn),.woocommerce button.button:not(.em-btn),
.woocommerce input.button:not(.em-btn),.woocommerce a.button:not(.em-btn),
#place_order,button#place_order,input#place_order,.woocommerce #place_order,.woocommerce button#place_order,
.tinv-wishlist button.button,.tinv-wishlist a.button,.tinv-wishlist .tinvwl-buttons-group button{border-radius:8px}

.em-mark,.em-mark--ink{background:none;padding:0;border-radius:0;white-space:normal}
.em-mark{color:var(--em-red)}
.em-mark--ink{color:inherit}

/* Top bar and ticker: no more near-black strips. The top bar goes light, the
   ticker becomes a deeper shade of the hero red so it flows out of it. */
.em-promo{background:#f3f4f6;color:#4b525a;border-bottom:1px solid var(--em-border)}
.em-promo a{color:#4b525a}
.em-promo a:hover{color:var(--em-red)}
/* Ticker: a calm white band under the hero. Normal-case readable text,
   slower scroll, soft faded edges, pauses on hover. */
.em-ticker{
  background:#fff;border-top:0;border-bottom:1px solid var(--em-border);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.em-ticker__track{animation-duration:48s}
.em-ticker:hover .em-ticker__track{animation-play-state:paused}
.em-ticker__item{
  padding:15px 30px;gap:30px;color:#3a4047;
  font-family:var(--em-font-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;
}
.em-ticker__dot{width:6px;height:6px;background:var(--em-red)}

/* Trust badges: four separate cards, icon in a soft red tile, a detail line. */
.em-trust{border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;gap:16px;margin-top:32px}
.em-trust .em-trust__cell{
  background:#fff;border:1px solid var(--em-border);border-radius:14px;padding:20px 22px;gap:16px;
  transition:transform .3s var(--em-ease),box-shadow .3s var(--em-ease),border-color .3s var(--em-ease);
}
.em-trust .em-trust__cell:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,20,24,.08);border-color:rgba(16,20,24,.14)}
.em-trust__icon{width:48px;height:48px;flex:none;border-radius:12px;background:#fdeeee;display:grid;place-items:center}
.em-trust__icon svg{width:24px;height:24px;stroke:var(--em-red)}
.em-trust__title{font-size:15px;line-height:1.3}
.em-trust__body{margin-top:3px}
@media (max-width:768px){
  /* A 2x2 grid that stays inside the screen. The swipe row with a card
     peeking past the edge read as the layout spilling off the page. */
  .em-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;scroll-snap-type:none}
  .em-trust .em-trust__cell{flex:none;min-width:0;padding:14px;gap:10px;flex-direction:column;align-items:flex-start}
  .em-trust__icon{width:38px;height:38px;border-radius:10px}
  .em-trust__icon svg{width:20px;height:20px}
  .em-trust__title{font-size:14px}
  .em-trust__body{font-size:12.5px;line-height:1.4}
  /* The category row scrolls sideways on phones; fade its right edge so the
     cut-off last item reads as "more to swipe", not as a broken layout. */
  .em-nav__row{
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
            mask-image:linear-gradient(90deg,#000 82%,transparent);
  }
}