/* UNIQLO US clone — hand-authored (build-free). Tokens measured from uniqlo.com/us/en. */

/* ---------- Fonts (UniqloPro subsets for headings; Helvetica/Arial for body) ---------- */
@font-face{font-family:UniqloProRegular;src:url(../fonts/UniqloProRegular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:UniqloProBold;src:url(../fonts/UniqloProBold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:UniqloProLight;src:url(../fonts/UniqloProLight.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --uq-red:#ff0000;              /* logo */
  --uq-sale:#ee0000;             /* sale / promotional price */
  --uq-black:#000;
  --uq-ink:#1b1b1b;
  --uq-white:#fff;
  --uq-bg:#fff;
  --uq-gray-bg:#f4f4f4;
  --uq-border:#dadada;
  --uq-text-2:#6a6a6a;           /* secondary */
  --uq-text-3:#767676;           /* tertiary/placeholder */
  --uq-disabled:#ababab;
  --uq-hover:#2a2a2a;
  --uq-topbar-h:56px;
  --uq-gendernav-h:44px;
  --uq-header-h:100px;      /* top bar + gender nav (for sticky offsets) */
  --uq-maxw:1200px;
  --uq-gutter:24px;
  --uq-font-title:UniqloProBold,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --uq-font-reg:UniqloProRegular,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --uq-font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --uq-ls:.025rem;
  --uq-radius-pill:999px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--uq-font-body);color:var(--uq-black);background:var(--uq-bg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4,p{margin:0}
ul{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}
.screen-reader-text,.uq-skip{position:absolute;left:-9999px}
.uq-skip:focus{left:8px;top:8px;background:#000;color:#fff;padding:8px 12px;z-index:1000}
:focus-visible{outline:2px solid #006ed7;outline-offset:2px}
.uq-container{max-width:var(--uq-maxw);margin:0 auto;padding:0 var(--uq-gutter)}

/* ---------- Buttons ---------- */
.uq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--uq-font-reg);font-size:16px;font-weight:400;line-height:1;padding:0 24px;height:52px;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;text-align:center}
.uq-btn--pill{border-radius:var(--uq-radius-pill)}
.uq-btn--dark{background:var(--uq-black);color:#fff}
.uq-btn--dark:hover{background:var(--uq-hover)}
.uq-btn--outline{background:#fff;color:#000;border-color:#000}
.uq-btn--outline:hover{background:#f4f4f4}
.uq-btn--light{background:#f4f4f4;color:#000}
.uq-btn--block{width:100%}
.uq-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--uq-black);border-radius:50%}
.uq-iconbtn:hover{background:#f4f4f4}
.uq-icon{display:block}
.uq-badge{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--uq-sale);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

/* ---------- Header (top bar + gender nav row) ---------- */
.uq-header{position:sticky;top:0;z-index:60;background:#fff}
.uq-header__bar{display:flex;align-items:center;gap:12px;height:var(--uq-topbar-h);max-width:1360px;margin:0 auto;padding:0 16px;background:#fff;position:relative;z-index:3;border-bottom:1px solid var(--uq-border)}
.uq-logo{flex:0 0 auto;display:flex;align-items:center}
.uq-logo svg{width:70px;height:32px;display:block}
.uq-search{flex:1 1 auto;max-width:640px;position:relative;min-width:0}
.uq-search__form{display:flex;align-items:center;height:38px;background:#fff;border:1px solid var(--uq-border);border-radius:var(--uq-radius-pill);padding:0 4px 0 12px}
.uq-search__input{flex:1;border:0;background:transparent;outline:none;font-size:16px;color:#000;min-width:0}
.uq-search__input::placeholder{color:var(--uq-text-3)}
.uq-search__icon{display:flex;align-items:center;color:#ababab;margin-left:4px;flex:0 0 auto}
.uq-search__panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--uq-border);box-shadow:0 8px 24px rgba(0,0,0,.1);border-radius:8px;padding:12px;z-index:80;max-height:70vh;overflow:auto}
.uq-header__icons{flex:0 0 auto;display:flex;align-items:center;gap:0}
.uq-show-sm{display:none}

.uq-gendernav{position:relative;z-index:2;background:#fff;border-bottom:1px solid var(--uq-border)}
.uq-gendernav__list{display:flex;align-items:center;gap:2px;height:var(--uq-gendernav-h);max-width:1360px;margin:0 auto;padding:0 10px;overflow-x:auto;scrollbar-width:none}
.uq-gendernav__list::-webkit-scrollbar{display:none}
.uq-gendernav__item{position:relative;height:100%;flex:0 0 auto}
.uq-gendernav__item>a{display:flex;align-items:center;height:100%;padding:0 14px;font-family:var(--uq-font-reg);font-weight:400;font-size:15px;line-height:18px;letter-spacing:.36px;text-transform:uppercase;color:var(--uq-black);white-space:nowrap;border-bottom:2px solid transparent}
.uq-gendernav__item.is-active>a{border-bottom-color:currentColor}
.uq-gendernav__item>a:hover{color:var(--uq-text-2)}
.uq-mega{position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--uq-border);box-shadow:0 8px 24px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;z-index:70}
.uq-gendernav__item:hover .uq-mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}
.uq-mega__inner{padding:20px 24px}
.uq-mega__list{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:2px 32px}
.uq-mega__list a{display:block;padding:8px 0;font-size:14px;color:var(--uq-ink);text-shadow:none}
.uq-mega__list a:hover{color:var(--uq-sale)}

/* Homepage: ENTIRE header transparent over the hero, turns solid on scroll.
   position:fixed (not sticky+negative margin) — the hero starts at the very top
   of the document and the header floats over it. No calc/var tricks. */
body.home .uq-header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:0}
body.home .uq-header__bar{background:transparent;border-bottom-color:transparent}
body.home .uq-header:not(.is-solid) .uq-search__form{background:rgba(255,255,255,.95)}
/* icons are WHITE over the transparent hero header (measured on source) */
body.home .uq-header:not(.is-solid) .uq-iconbtn{color:#fff}
body.home .uq-header:not(.is-solid) .uq-iconbtn:hover{background:rgba(255,255,255,.18)}
body.home .uq-gendernav{background:transparent;border-bottom-color:transparent}
body.home .uq-gendernav__item>a{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
body.home .uq-header.is-solid .uq-header__bar{background:#fff;border-bottom-color:var(--uq-border)}
body.home .uq-header.is-solid .uq-gendernav{background:#fff;border-bottom-color:var(--uq-border)}
body.home .uq-header.is-solid .uq-gendernav__item>a{color:var(--uq-black);text-shadow:none}

/* search panel content */
.uq-sp-title{font-size:12px;color:var(--uq-text-3);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 8px}
.uq-sp-sugg{display:flex;flex-wrap:wrap;gap:8px}
.uq-sp-sugg a{border:1px solid var(--uq-border);border-radius:999px;padding:6px 12px;font-size:13px}
.uq-sp-res{display:flex;gap:10px;padding:8px 4px;align-items:center}
.uq-sp-res img{width:44px;height:59px;object-fit:cover;background:#f4f4f4}
.uq-sp-res__name{font-size:13px}
.uq-sp-res__price{font-size:13px;color:var(--uq-sale);font-family:var(--uq-font-reg)}

/* ---------- Drawers ---------- */
.uq-drawer{position:fixed;inset:0;z-index:100}
.uq-drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.uq-drawer.is-open .uq-drawer__overlay{opacity:1}
.uq-drawer__panel{position:absolute;top:0;bottom:0;width:min(400px,90vw);background:#fff;display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.uq-drawer--left .uq-drawer__panel{left:0;transform:translateX(-100%)}
.uq-drawer--right .uq-drawer__panel{right:0;transform:translateX(100%)}
.uq-drawer.is-open .uq-drawer__panel{transform:translateX(0)}
.uq-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--uq-border);flex:0 0 auto}
.uq-drawer__logo{font-family:var(--uq-font-body);font-weight:700}
.uq-drawer__nav{overflow:auto;flex:1}
.uq-drawer__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px;font-size:16px;font-weight:700;font-family:var(--uq-font-body);border-bottom:1px solid #eee}
.uq-drawer__sub{padding:0 0 8px}
.uq-drawer__sub a{display:block;padding:10px 24px;font-size:14px;color:var(--uq-ink)}
.uq-drawer__foot{border-top:1px solid var(--uq-border);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.uq-drawer__foot a{display:flex;align-items:center;gap:8px;font-size:14px}

/* ---------- Cart drawer ---------- */
.uq-cart__title{font-weight:700;font-family:var(--uq-font-body);display:flex;align-items:center;gap:8px}
.uq-cart__count{font-family:var(--uq-font-reg);font-weight:400;color:var(--uq-text-2)}
.uq-cart__ship{padding:14px 16px;border-bottom:1px solid #eee}
.uq-cart__ship-msg{font-size:13px;margin-bottom:8px}
.uq-cart__ship-msg b{color:var(--uq-sale)}
.uq-cart__ship-bar{height:4px;background:#eee;border-radius:2px;overflow:hidden}
.uq-cart__ship-bar span{display:block;height:100%;background:#000;width:0;transition:width .4s}
.uq-cart__items{flex:1;overflow:auto;padding:8px 16px}
.uq-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #eee}
.uq-line__img{width:80px;height:107px;object-fit:cover;background:#f4f4f4;flex:0 0 auto}
.uq-line__body{flex:1;min-width:0}
.uq-line__name{font-size:14px;margin-bottom:4px}
.uq-line__meta{font-size:12px;color:var(--uq-text-2);margin-bottom:8px}
.uq-line__row{display:flex;align-items:center;justify-content:space-between}
.uq-qty{display:inline-flex;align-items:center;border:1px solid var(--uq-border);border-radius:999px}
.uq-qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px}
.uq-qty span{min-width:24px;text-align:center;font-size:14px}
.uq-line__price{font-family:var(--uq-font-reg)}
.uq-line__remove{font-size:12px;color:var(--uq-text-2);text-decoration:underline}
.uq-cart__empty{padding:40px 16px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.uq-cart__empty-title{font-size:15px;color:var(--uq-text-2)}
.uq-cart__footer{border-top:1px solid var(--uq-border);padding:16px}
.uq-cart__row{display:flex;justify-content:space-between;font-size:15px;margin-bottom:6px}
.uq-cart__note{font-size:12px;color:var(--uq-text-2);margin-bottom:12px}
.uq-cart__viewbag{display:block;text-align:center;margin-top:10px;font-size:13px;text-decoration:underline}

/* ---------- Home: hero ---------- */
.uq-home>*+*{margin-top:16px}
.uq-hero{position:relative;display:block}
.uq-hero__img{width:100%;height:auto;aspect-ratio:1425/820;object-fit:cover}
/* Hero copy: CMS banner text uses the BODY font at weight 400 (measured on source,
   NOT UniqloPro bold). Prices are STACKED: big red, struck below, offer below. */
.uq-hero__text{position:absolute;left:34px;right:24px;bottom:12%;max-width:640px;color:#fff}
.uq-hero__title{font-family:var(--uq-font-body);font-weight:400;font-size:34px;line-height:1.2;letter-spacing:normal}
.uq-hero__sub{font-size:16px;line-height:1.3;margin-top:8px}
.uq-hero__pricing{display:block;margin-top:16px}
.uq-hero__price{display:block;font-family:var(--uq-font-reg);font-size:36px;line-height:1.2;color:var(--uq-sale)}
.uq-hero__was{display:block;font-family:var(--uq-font-body);font-size:14px;line-height:1.2;color:#fff;text-decoration:line-through}
.uq-hero__offer{display:block;margin-top:4px;font-size:13px;color:var(--uq-sale)}

/* ---------- Home: category grid ---------- */
/* Category grid measured 1:1: heading 18px/400 LEFT · label 13px/400 BLACK CENTER
   · tile background TRANSPARENT (no gray box) */
.uq-cats{padding:40px 0 8px;text-align:left}
.uq-cats__title{font-family:var(--uq-font-body);font-weight:400;font-size:18px;line-height:1.2;margin-bottom:24px;text-align:left}
.uq-cats__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 16px}
.uq-cats__tile{display:flex;flex-direction:column;gap:8px;text-align:center}
.uq-cats__thumb{width:100%;aspect-ratio:1/1;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center}
.uq-cats__thumb img{width:100%;height:100%;object-fit:contain}
.uq-cats__label{font-family:var(--uq-font-body);font-size:13px;font-weight:400;line-height:1.3;color:var(--uq-black);text-align:center}
.uq-cats__all{margin:28px auto 0;min-width:280px;display:flex}

/* ---------- Home: editorial banner ---------- */
.uq-editorial{position:relative;display:block}
.uq-editorial__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.uq-editorial__text{position:absolute;left:6%;bottom:12%;max-width:460px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.uq-editorial--light .uq-editorial__text{color:#000;text-shadow:none}
.uq-editorial__title{font-family:var(--uq-font-body);font-weight:400;font-size:30px;line-height:1.2;letter-spacing:normal}
.uq-editorial__sub{font-size:15px;margin-top:8px}
.uq-editorial__pricing{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.uq-editorial__price{font-family:var(--uq-font-reg);font-size:28px;line-height:1;color:var(--uq-sale)}
.uq-editorial__was{font-family:var(--uq-font-reg);font-size:15px;text-decoration:line-through;opacity:.75}
.uq-editorial__cta{display:inline-block;margin-top:14px;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- Home: product strip ---------- */
.uq-strip{padding:40px 0}
.uq-strip__head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.uq-strip__title{font-family:var(--uq-font-body);font-weight:400;font-size:18px;line-height:1.2}
.uq-strip__sub{font-size:14px;color:var(--uq-text-2)}
.uq-strip__all{margin-left:auto;font-size:14px;text-decoration:underline}

/* ---------- Product grid + card ---------- */
.uq-grid{display:grid}
.uq-grid--products{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:32px}
.uq-grid--strip,.uq-grid--rail{grid-template-columns:repeat(4,1fr);gap:0}
.uq-card{position:relative}
.uq-card__media{position:relative;display:block;background:#f4f4f4;overflow:hidden;aspect-ratio:3/4}
.uq-card__img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.uq-card__img--hover{position:absolute;inset:0;opacity:0}
.uq-card__media:hover .uq-card__img--hover{opacity:1}
.uq-card__tag{position:absolute;top:8px;left:8px;background:#fff;border:1px solid #000;border-radius:4px;padding:2px 10px;font-size:12px;font-family:var(--uq-font-reg);z-index:2}
.uq-card__heart{position:absolute;top:6px;right:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#000;z-index:2}
.uq-card__heart.is-active{color:var(--uq-sale)}
.uq-card__heart.is-active svg path{fill:var(--uq-sale)}
.uq-card__body{padding:10px 8px 4px}
.uq-card__meta{font-size:11px;color:var(--uq-text-2);margin-bottom:4px}
.uq-card__name{font-size:14px;font-weight:400;line-height:1.3}
.uq-card__name a:hover{text-decoration:underline}
.uq-price{font-family:var(--uq-font-reg);color:#000;display:inline-flex;align-items:baseline;gap:8px;margin-top:4px}
.uq-price--sm{font-size:20px}
.uq-price--md{font-size:24px}
.uq-price--lg{font-size:32px}
.uq-price--sale .uq-price__now{color:var(--uq-sale)}
.uq-price__was{font-size:.7em;color:var(--uq-text-2);text-decoration:line-through}
.uq-rating{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--uq-ink);margin-top:6px}
.uq-rating__star{color:#000}
.uq-rating__count{color:var(--uq-text-2)}
.uq-card__swatches{display:flex;align-items:center;gap:6px;margin-top:8px}
.uq-swatch{width:14px;height:14px;border-radius:0;background:var(--sw);border:1px solid rgba(0,0,0,.15)}
.uq-card__more{font-size:11px;color:var(--uq-text-2)}

/* ---------- PLP ---------- */
.uq-plp{padding:20px 0 60px}
.uq-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--uq-text-2);margin:8px 0 16px}
.uq-breadcrumb a:hover{text-decoration:underline}
.uq-breadcrumb__sep{color:var(--uq-disabled)}
.uq-plp__head{margin-bottom:16px}
.uq-plp__title{font-family:var(--uq-font-body);font-size:32px;font-weight:400;line-height:1.1}
.uq-plp__desc{font-size:14px;color:var(--uq-text-2);margin-top:8px;max-width:640px}
.uq-plp__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.uq-plp__tile{border:1px solid var(--uq-border);border-radius:8px;padding:14px;font-size:14px;text-align:center}
.uq-plp__tile:hover{border-color:#000}
.uq-plp__toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--uq-border);margin-bottom:24px}
.uq-plp__count{font-size:14px;color:var(--uq-text-2)}
.uq-plp__controls{display:flex;align-items:center;gap:16px}
.uq-plp__filterbtn{display:inline-flex;align-items:center;gap:6px;font-size:14px;border:1px solid var(--uq-border);border-radius:999px;padding:8px 14px}
.uq-plp__pager{margin-top:40px;text-align:center}
.uq-plp__pager .page-numbers{display:inline-block;padding:8px 12px;border:1px solid var(--uq-border);margin:0 2px;font-size:14px}
.uq-plp__pager .current{background:#000;color:#fff;border-color:#000}
.uq-empty{padding:60px 0;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}

/* ---------- PDP ---------- */
.uq-pdp{padding:16px 0 60px}
.uq-pdp__grid{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
.uq-pdp__gallery{display:grid;grid-template-columns:64px 1fr;gap:12px}
.uq-pdp__thumbs{display:flex;flex-direction:column;gap:8px}
.uq-pdp__thumb{border:1px solid transparent;aspect-ratio:3/4;overflow:hidden;background:#f4f4f4}
.uq-pdp__thumb img{width:100%;height:100%;object-fit:cover}
.uq-pdp__thumb.is-active{border-color:#000}
.uq-pdp__stage{position:relative;background:#f4f4f4;aspect-ratio:3/4}
.uq-pdp__main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.uq-pdp__main.is-active{opacity:1;position:relative}
.uq-pdp__info-sticky{position:sticky;top:calc(var(--uq-header-h) + 20px)}
.uq-pdp__id{font-size:12px;color:var(--uq-text-2);margin-bottom:8px}
.uq-pdp__name{font-size:18px;font-weight:400;line-height:1.35;margin-bottom:8px}
.uq-pdp__rating{margin-bottom:12px}
.uq-pdp__price{margin-bottom:6px}
.uq-pdp__promo{font-size:13px;color:var(--uq-sale);margin-bottom:16px}
.uq-pdp__opt{margin:20px 0}
.uq-pdp__opt-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
.uq-pdp__opt-sel{color:var(--uq-text-2)}
.uq-pdp__sizeguide{font-size:13px;text-decoration:underline;color:var(--uq-ink)}
.uq-pdp__colors{display:flex;flex-wrap:wrap;gap:8px;padding:5px;margin:-5px}
.uq-pdp__color{width:36px;height:36px;border-radius:50%;border:1px solid var(--uq-border);background:var(--sw);position:relative}
/* the ring follows the circle, so it must be round too — a square outline round a circular
   swatch reads as a rendering bug */
.uq-pdp__color.is-selected{outline:2px solid #000;outline-offset:2px;border-color:#000;border-radius:50%}
.uq-pdp__sizes{display:flex;flex-wrap:wrap;gap:8px}
.uq-pdp__size{min-width:36px;height:36px;padding:0 8px;border:1px solid var(--uq-text-2);background:#fff;font-size:14px}
.uq-pdp__size:hover{border-color:#000}
.uq-pdp__size.is-selected{background:#000;color:#fff;border-color:#000}
.uq-pdp__size:disabled{color:var(--uq-disabled);border-color:var(--uq-border);cursor:not-allowed;text-decoration:line-through}
.uq-pdp__sizeerr{color:var(--uq-sale);font-size:13px;margin-top:8px}
.uq-pdp__actions{display:flex;gap:10px;margin:24px 0}
.uq-pdp__atc{flex:1}
.uq-accordion{border-top:1px solid var(--uq-border);margin-top:16px}
.uq-accordion__item{border-bottom:1px solid var(--uq-border)}
.uq-accordion__head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;font-size:15px;text-align:left}
.uq-accordion__body{font-size:14px;color:var(--uq-ink);line-height:1.6}  /* padding moved to __inner */
.uq-pdp__related{padding-top:40px}
.uq-pdp__related-title{font-family:var(--uq-font-body);font-weight:400;font-size:18px;margin-bottom:20px}

/* ---------- Cart / Checkout / forms ---------- */
.uq-cartpage,.uq-checkout,.uq-wishlist,.uq-account,.uq-track,.uq-sitemap,.uq-page,.uq-404,.uq-search-results{padding:32px 0 60px;min-height:50vh}
.uq-cartpage__title,.uq-checkout__title,.uq-wishlist__title,.uq-account__title,.uq-track__title,.uq-sitemap__title,.uq-page__title,.uq-search-results__title{font-family:var(--uq-font-body);font-size:28px;font-weight:400;margin-bottom:24px}
.uq-cartpage__grid,.uq-checkout__grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.uq-cartpage__summary,.uq-checkout__summary{background:#f4f4f4;padding:24px;border-radius:8px;position:sticky;top:calc(var(--uq-header-h) + 16px)}
.uq-cartpage__summary h2,.uq-checkout__summary h2{font-size:16px;margin-bottom:16px}
.uq-cartpage__row,.uq-checkout__row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}
.uq-cartpage__row--total,.uq-checkout__row--total{font-size:16px;font-weight:700;border-top:1px solid var(--uq-border);padding-top:12px;margin-top:6px}
.uq-fieldset{border:0;padding:0;margin:0 0 28px}
.uq-fieldset legend{font-size:16px;font-weight:700;font-family:var(--uq-font-body);margin-bottom:14px}
.uq-field{display:block;margin-bottom:14px}
.uq-field>span{display:block;font-size:13px;color:var(--uq-text-2);margin-bottom:6px}
.uq-field input,.uq-field select{width:100%;height:44px;border:1px solid var(--uq-border);border-radius:0;padding:0 12px;background:#fff}
.uq-field input:focus,.uq-field select:focus{border-color:#000;outline:none}
.uq-field-row{display:flex;gap:12px}
.uq-field-row .uq-field{flex:1}
.uq-field--sm{max-width:120px}
.uq-radio{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--uq-border);margin-bottom:8px;font-size:14px;cursor:pointer}
.uq-mockpay{margin-top:8px}
.uq-checkout__err,.uq-account__err,.uq-track__err{color:var(--uq-sale);font-size:13px;margin-top:8px}
.uq-checkout__items,.uq-cartpage__items{margin-bottom:16px}
.uq-checkout__done{max-width:560px;margin:40px auto;text-align:center}
.uq-checkout__check{color:#00ab0f;margin-bottom:16px;display:flex;justify-content:center}
.uq-checkout__done-title{font-family:var(--uq-font-body);font-weight:400;font-size:24px;margin-bottom:10px}
.uq-checkout__done-sub{color:var(--uq-text-2);margin-bottom:8px}
.uq-checkout__done-num{margin-bottom:24px}
.uq-checkout__done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Wishlist / Account / Tracking / Sitemap ---------- */
.uq-account__login,.uq-track__form{max-width:420px}
.uq-account__intro{color:var(--uq-text-2);margin-bottom:20px}
.uq-account__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.uq-account__logout{font-size:13px;text-decoration:underline}
.uq-account__tabs{display:flex;gap:8px;border-bottom:1px solid var(--uq-border);margin-bottom:24px}
.uq-account__tabs button{padding:12px 16px;font-size:14px;border-bottom:2px solid transparent}
.uq-account__tabs button.is-active{border-bottom-color:#000;font-weight:700}
.uq-order-card{border:1px solid var(--uq-border);border-radius:8px;padding:16px;margin-bottom:16px}
.uq-order-card__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.uq-order-card__num{font-weight:700}
.uq-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#f4f4f4;border-radius:999px;padding:4px 10px}
.uq-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#00ab0f}
.uq-order-card__items{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.uq-order-card__items img{width:48px;height:64px;object-fit:cover;background:#f4f4f4}
.uq-order-card__track{font-size:13px;text-decoration:underline}
.uq-address-card{border:1px solid var(--uq-border);border-radius:8px;padding:16px;margin-bottom:12px;font-size:14px;line-height:1.6}

/* Timeline */
.uq-timeline{margin:24px 0}
.uq-timeline__step{display:flex;gap:16px;padding-bottom:24px;position:relative}
.uq-timeline__step::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--uq-border)}
.uq-timeline__step:last-child::before{display:none}
.uq-timeline__dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--uq-border);background:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;z-index:1}
.uq-timeline__step.is-done .uq-timeline__dot{background:#000;border-color:#000;color:#fff}
.uq-timeline__step.is-current .uq-timeline__dot{border-color:#000}
.uq-timeline__label{font-size:15px;font-weight:700}
.uq-timeline__desc{font-size:13px;color:var(--uq-text-2);margin-top:2px}
.uq-timeline__at{font-size:12px;color:var(--uq-text-3);margin-top:4px}

.uq-sitemap__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.uq-sitemap__col h2{font-size:15px;margin-bottom:12px}
.uq-sitemap__col h2 a:hover{text-decoration:underline}
.uq-sitemap__col li a{display:block;padding:6px 0;font-size:14px;color:var(--uq-ink)}
.uq-sitemap__col li a:hover{text-decoration:underline}

/* ---------- Footer (single stacked column like the source) ---------- */
.uq-footer{background:var(--uq-gray-bg);margin-top:40px}
.uq-footer__inner{max-width:var(--uq-maxw);margin:0 auto;padding:32px 16px 28px}
.uq-footer__sec{margin-bottom:28px}
.uq-footer__heading{font-family:var(--uq-font-body);font-size:13px;font-weight:400;color:var(--uq-text-2);margin-bottom:14px}
.uq-footer__list li a{display:block;padding:9px 0;font-size:15px;color:var(--uq-black)}
.uq-footer__list li a:hover{text-decoration:underline}
.uq-footer__inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.uq-footer__inline a{color:var(--uq-black)}
.uq-footer__inline a:hover{text-decoration:underline}
.uq-footer__sep{color:var(--uq-border)}
.uq-footer__ship{font-size:15px;color:var(--uq-sale);margin-bottom:14px}
.uq-footer__ship strong{color:var(--uq-sale)}
.uq-footer__promo-link{display:block;font-size:15px;margin-bottom:12px;text-decoration:underline;color:var(--uq-black)}
.uq-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;padding:8px 0 20px}
.uq-footer__legal a{font-size:14px;color:var(--uq-black)}
.uq-footer__legal a:hover{text-decoration:underline}
.uq-footer__bottom{border-top:1px solid var(--uq-border);padding-top:20px}
.uq-footer__copy{font-size:13px;color:var(--uq-text-2);line-height:1.5;margin-bottom:18px}
.uq-footer__social{display:flex;gap:14px;align-items:center}
.uq-footer__social a{color:var(--uq-black);display:flex}
.uq-footer__social svg{display:block}

/* ---------- Mobile menu overlay (mirrors source) ---------- */
.uq-menu{position:fixed;inset:0;z-index:100}
.uq-menu__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .32s ease}
.uq-menu.is-open .uq-menu__backdrop{opacity:1}
/* slides in from the RIGHT (source behaviour) */
.uq-menu__panel{position:absolute;top:0;right:0;bottom:0;width:100%;max-width:480px;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);will-change:transform;box-shadow:-8px 0 24px rgba(0,0,0,.10)}
.uq-menu.is-open .uq-menu__panel{transform:translateX(0)}
/* staggered reveal of the tiles once the panel is open */
.uq-menu.is-open .uq-menu__tile{animation:uqTileIn .34s cubic-bezier(.4,0,.2,1) both}
.uq-menu.is-open .uq-menu__tile:nth-child(3n+1){animation-delay:.10s}
.uq-menu.is-open .uq-menu__tile:nth-child(3n+2){animation-delay:.14s}
.uq-menu.is-open .uq-menu__tile:nth-child(3n+3){animation-delay:.18s}
@keyframes uqTileIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.uq-menu.is-open .uq-menu__promo,.uq-menu.is-open .uq-menu__top,.uq-menu.is-open .uq-menu__tabs{animation:uqFadeUp .3s cubic-bezier(.4,0,.2,1) both;animation-delay:.06s}
@media (prefers-reduced-motion:reduce){
  .uq-menu__panel{transition:none}
  .uq-menu.is-open .uq-menu__tile,.uq-menu.is-open .uq-menu__promo,.uq-menu.is-open .uq-menu__top,.uq-menu.is-open .uq-menu__tabs{animation:none}
}
.uq-menu__promo{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#000;color:#fff;padding:11px 16px;font-size:13px;flex:0 0 auto}
.uq-menu__promo strong{text-decoration:underline}
.uq-menu__top{display:flex;align-items:center;gap:6px;padding:8px 12px;flex:0 0 auto}
.uq-menu__search{flex:1 1 auto;background:#fff;border:1px solid var(--uq-border)}
.uq-menu__tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--uq-border);flex:0 0 auto}
.uq-menu__tab{flex:1;display:flex;align-items:center;justify-content:center;height:44px;font-family:var(--uq-font-reg);font-size:15px;font-weight:400;line-height:18px;letter-spacing:.36px;text-transform:uppercase;color:var(--uq-text-2);border-bottom:2px solid transparent}
.uq-menu__tab.is-active{color:var(--uq-black);border-bottom-color:var(--uq-black)}
.uq-menu__scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
.uq-menu__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
.uq-menu__tile{display:flex;flex-direction:column;gap:6px;text-align:center}
.uq-menu__thumb{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.uq-menu__thumb img{width:100%;height:100%;object-fit:contain}
.uq-menu__label{font-family:var(--uq-font-body);font-size:15px;font-weight:400;line-height:1.35;color:var(--uq-black)}
.uq-menu__foot{border-top:1px solid var(--uq-border);margin-top:24px;padding-top:16px;display:flex;flex-direction:column;gap:12px}
.uq-menu__foot a{display:flex;align-items:center;gap:8px;font-size:15px}

/* Back to top */
.uq-totop{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--uq-border);box-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;z-index:50}

/* Reveal animation */
.uq-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.uq-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.uq-reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .uq-pdp__grid{grid-template-columns:1fr 380px}
}
@media(max-width:900px){
  .uq-show-sm{display:inline-flex}
  .uq-hide-sm{display:none}
  .uq-gendernav__item>a{font-size:15px;padding:0 12px}
  .uq-cats__grid{grid-template-columns:repeat(4,1fr)}
  .uq-grid--products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uq-grid--strip,.uq-grid--rail{grid-template-columns:repeat(2,1fr)}
  .uq-pdp__grid{grid-template-columns:1fr;gap:24px}
  .uq-pdp__gallery{grid-template-columns:1fr}
  .uq-pdp__thumbs{flex-direction:row;order:2;overflow:auto}
  .uq-pdp__info-sticky{position:static}
  .uq-cartpage__grid,.uq-checkout__grid{grid-template-columns:1fr}
  .uq-footer__cols{grid-template-columns:repeat(2,1fr)}
  .uq-sitemap__cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  :root{--uq-header-h:100px;--uq-topbar-h:56px}
  /* Header measured 1:1 from source @430: logo 62x28 @x28 · search 126x38 ·
     icons 44x44 flush (0 gap) · 12px between search and icons · right inset 18 */
  .uq-logo svg{width:62px;height:28px}
  /* search FLEXES to fill logo→icons (source rule): @470 => 231px/49% */
  .uq-header__bar{gap:0;padding:0 6px 0 16px}
  .uq-search{flex:1 1 auto;width:auto;max-width:none;min-width:0;margin-left:23px;margin-right:0}
  .uq-search__form{height:38px;padding:0 4px 0 12px}
  .uq-search__input{font-size:16px}
  .uq-iconbtn{width:44px;height:44px}
  .uq-gendernav__list{justify-content:space-between;padding:0 20px}
  .uq-gendernav__item>a{padding:0 4px}
  /* Hero: portrait 2:3 mobile image, white overlay text like the source */
  .uq-hero__img{aspect-ratio:2/3}
  .uq-hero__text{left:34px;right:20px;bottom:11%;max-width:none}
  .uq-hero__title{font-size:22px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
  .uq-hero__sub{font-size:16px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
  .uq-hero__price{font-size:36px}
  .uq-hero__was{font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
  /* Editorial banners: portrait 2:3 like the source mobile */
  .uq-editorial__img{aspect-ratio:2/3}
  .uq-editorial__text{left:20px;right:20px;bottom:8%;max-width:none}
  .uq-editorial__title{font-size:22px}
  .uq-editorial__sub{font-size:14px}
  .uq-cats__grid{grid-template-columns:repeat(3,1fr)}
  .uq-grid--products{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .uq-plp__title{font-size:22px;line-height:26.4px}
  .uq-container{padding:0 16px}
  .uq-footer__inner{padding:32px 16px 24px}
}

/* ---------- Homepage strip card (source layout, not the PLP card) ---------- */
.uq-scard{display:flex;flex-direction:column}
.uq-scard__media{display:block;background:#f4f4f4;aspect-ratio:3/4;overflow:hidden}
.uq-scard__img{width:100%;height:100%;object-fit:cover}
.uq-scard__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 2px}
.uq-scard__swatches{display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto;overflow-y:hidden;padding-block:4px;margin-block:-4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.uq-scard__swatches::-webkit-scrollbar{display:none}
.uq-scard__dot{width:16px;height:16px;border-radius:50%;background:var(--sw);border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.uq-scard__heart{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#000;flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer}
.uq-scard__heart.is-active svg path{fill:var(--uq-sale)}
.uq-scard__name{font-family:var(--uq-font-body);font-size:14px;font-weight:400;line-height:1.35;padding:0 8px}
.uq-scard .uq-price{padding:0 8px;margin-top:2px}

/* ---------- Editorial: brand logo badge, offer line, video pause button ---------- */
.uq-editorial__logo{height:30px;width:auto;margin-bottom:10px;display:block}
.uq-editorial--light .uq-editorial__logo{filter:none}
.uq-editorial__offer{display:block;margin-top:4px;font-size:13px;color:var(--uq-sale)}
.uq-editorial__pause{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;z-index:3;backdrop-filter:blur(2px)}
.uq-editorial__pause:hover{background:rgba(255,255,255,.55)}

/* thinner outline button (source) */
.uq-btn--outline{border-width:1px;font-size:14px;height:48px}

/* scroll-to-top: plain circle + thin arrow (source) */
.uq-totop{width:48px;height:48px;background:#fff;border:1px solid var(--uq-border);box-shadow:0 1px 4px rgba(0,0,0,.10);color:#000}
.uq-totop svg{width:18px;height:18px}

@media(max-width:600px){
  .uq-editorial__logo{height:26px;margin-bottom:8px}
  .uq-editorial__offer{font-size:12px}
  .uq-scard__name{font-size:14px}
}

/* ---------- Search panel (source screen) ---------- */
.uq-sp-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 0 14px;border-bottom:1px solid var(--uq-border)}
.uq-sp-tool{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--uq-black);text-align:center}
.uq-sp-sugg a{display:inline-flex;align-items:center;gap:6px}
.uq-sp-hist{padding:14px 0;border-top:1px solid var(--uq-border);margin-top:12px}
.uq-sp-hist-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--uq-border);margin-bottom:10px}
.uq-sp-hist p{font-size:13px;color:var(--uq-text-2)}
.uq-sp-cta{padding-top:12px}
.uq-sp-cta p{font-size:14px;margin-bottom:10px}
.uq-sp-empty{padding:16px 4px;font-size:14px;color:var(--uq-text-2)}
@media(max-width:600px){
  .uq-search__panel{position:fixed;left:0;right:0;top:var(--uq-topbar-h);bottom:0;border:0;border-radius:0;max-height:none;box-shadow:none;padding:16px}
}

/* ---------- Cart drawer: source empty state ---------- */
.uq-cart__body{flex:1 1 auto;overflow-y:auto}
.uq-cart__ship-banner{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--uq-border)}
.uq-cart__ship-icon{flex:0 0 auto;color:var(--uq-sale)}
.uq-cart__ship-banner p{font-size:13px;line-height:1.5}
.uq-cart__ship-banner strong{color:var(--uq-sale)}
.uq-cart__empty{padding:20px 16px;text-align:left;display:block}
.uq-cart__empty-title{font-size:15px;margin-bottom:12px;color:var(--uq-black)}
.uq-cart__empty-sub{font-size:14px;color:var(--uq-black);line-height:1.6;margin-bottom:12px}
.uq-cart__empty-link{display:inline-block;font-size:14px;color:#005db5;text-decoration:underline;margin-bottom:20px}
.uq-cart__help{display:flex;align-items:center;gap:14px;border:1px solid var(--uq-black);padding:14px;margin-bottom:26px}
.uq-cart__help-badge{flex:0 0 auto;border:1px solid var(--uq-black);border-radius:3px;padding:3px 7px;font-size:11px}
.uq-cart__help p{font-size:14px;line-height:1.45}
.uq-cart__rec-title{font-family:var(--uq-font-body);font-size:18px;font-weight:400;padding-bottom:10px;border-bottom:1px solid var(--uq-border);margin-bottom:14px}
.uq-cart__rec-sub{font-family:var(--uq-font-body);font-size:15px;font-weight:700;margin-bottom:12px}
.uq-cart__rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 8px}

/* ---------- PLP: sub-category carousel (measured @390: tile 106, pitch 114.3 => gap 8,
   first tile inset 16 via track padding-inline, thumb box 106x140 w/ 1px border+1px pad) ---------- */
.uq-subcats{position:relative;margin:6px 0 18px}
.uq-subcats__track{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}
.uq-subcats__track::-webkit-scrollbar{display:none}
.uq-subcat{flex:0 0 106px;width:106px;flex-shrink:0;display:block}
.uq-subcat__thumb{display:block;width:106px;height:140px;background:#f4f4f4;overflow:hidden;border:1px solid transparent;padding:1px;transition:border-color .2s ease}
.uq-subcat__thumb img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.uq-subcat.is-active .uq-subcat__thumb{border-color:var(--uq-black)}
.uq-subcat__label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:12px 0 0 2px;font-family:var(--uq-font-body);font-size:13px;font-weight:400;line-height:16.9px;color:var(--uq-black);text-align:left;text-transform:none}
.uq-subcat.is-active .uq-subcat__label{font-weight:600}
.uq-subcats__dots{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:13px}
.uq-subcats__dots span{flex:0 0 auto;width:3px;height:3px;border-radius:10px;background:var(--uq-border);transition:width .25s ease,background .25s ease}
.uq-subcats__dots span.is-active{width:20px;background:var(--uq-black)}

/* ---------- PLP: sticky filter bar + results ---------- */
.uq-plp__filterbar{position:sticky;top:var(--uq-topbar-h);z-index:40;background:#fff;transition:transform .3s ease,box-shadow .2s ease}
.uq-plp__filterbar.is-stuck{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.uq-plp__chips{display:flex;align-items:center;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}
.uq-plp__chips::-webkit-scrollbar{display:none}
.uq-plp__chipbtn{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#000}
.uq-plp__chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--uq-border);border-radius:999px;font-size:13px;color:#000;white-space:nowrap;background:#fff;transition:border-color .18s,background .18s}
.uq-plp__chip:hover{border-color:#000}
.uq-plp__caret{display:inline-block;font-size:10px;color:var(--uq-text-2);transition:transform .18s ease}
/* Open chip = pressed state (the panel it controls is showing) */
.uq-plp__chip[aria-expanded="true"]{background:#000;border-color:#000;color:#fff}
.uq-plp__chip[aria-expanded="true"] .uq-plp__caret{color:inherit;transform:rotate(180deg)}
.uq-plp__resultrow{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0}
.uq-plp__count{font-size:14px;color:#000}

/* Filter panels — one per chip, measured @390: absolute card under the chip bar, full viewport
   width, white, no radius, height follows content (167-380px seen).
   The panel is a child of .uq-plp__filterbar (position:sticky = its containing block) and that
   bar is full-bleed, so width:100% == viewport width. NEVER use 100vw here: it resolves to the
   visual viewport and adds a horizontal scrollbar at 390-474. */
.uq-fpanel{position:absolute;top:100%;left:0;width:100%;max-width:100%;z-index:40;background:#fff;border-radius:0;border-top:1px solid var(--uq-border);box-shadow:0 8px 16px rgba(0,0,0,.12);max-height:60vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:uqFadeUp .18s cubic-bezier(.4,0,.2,1) both}
.uq-fpanel__count{padding:14px 16px 8px;font-size:14px;line-height:19.6px;color:var(--uq-text-2)}
.uq-fpanel__body{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 16px;padding:0 16px 12px}
.uq-fpanel__full{grid-column:1/-1}
.uq-fopt{display:flex;align-items:center;gap:12px;min-height:44px;padding:2px 0;font-size:14px;line-height:19.6px;color:#000;cursor:pointer}
.uq-fopt>input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:#000;cursor:pointer}
.uq-fopt>span{min-width:0}
/* Colour options: 16px round swatch before the name, fill from --sw (same as the card swatches) */
.uq-fpanel[data-uq-fpanel="color"] .uq-fopt>span,.uq-fopt--sw>span{display:inline-flex;align-items:center;gap:8px}
.uq-fpanel[data-uq-fpanel="color"] .uq-fopt>span::before,.uq-fopt--sw>span::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--sw,#fff);border:1px solid rgba(0,0,0,.15)}
/* readonly path dropdown (Gender > Category) + any full-width row inside a panel */
.uq-fpanel__select{grid-column:1/-1;width:100%;height:44px;padding:0 12px;border:1px solid var(--uq-border);border-radius:0;background:#fff;font-size:14px;color:#000;cursor:pointer}
/* ---- Cart PAGE -------------------------------------------------------------------
   The source has no cart drawer; this is the only cart surface. Every number below was
   measured live at 390 — see specs/cart-page.spec.md. */
.uq-cartpage{padding:0 0 40px;min-height:50vh}
.uq-cartpage__wrap{max-width:1176px;margin:0 auto;padding:24px 16px 0}

.uq-cartpage__title{font-family:var(--uq-font-body);font-size:22px;line-height:30.8px;font-weight:400;margin:0 0 16px}

/* free-shipping line + "see what's recommended" link: both 14px/19.6px */
.uq-cartpage__ship{font-size:14px;line-height:19.6px;color:#000;margin:0 0 8px}
.uq-cartpage__reclink{display:inline-block;font-size:14px;line-height:19.6px;text-decoration:underline;margin-bottom:24px}

/* ---- cart line: 88x117 image at x16, body column at x120, heart pinned right ---- */
.uq-cartpage__items{margin:0 0 24px}
.uq-cline{position:relative;display:flex;gap:16px;padding:0 0 24px;border:0}
.uq-cline__media{flex:0 0 88px;display:block}
.uq-cline__img{width:88px;height:117px;object-fit:cover;background:#f4f4f4;display:block}
.uq-cline__body{flex:1 1 auto;min-width:0}
/* only the NAME sits beside the heart, so only the name is inset — insetting the whole body
   squeezed the total row onto two lines */
.uq-cline__name{font-size:13px;line-height:16.9px;font-weight:400;margin:0 0 8px;padding-right:56px}
.uq-cline__attr{font-size:12px;line-height:14.4px;color:#000;margin:0 0 4px}
.uq-cline__price{font-family:var(--uq-font-reg);font-size:16px;line-height:23px;margin:8px 0 0}
/* Quantity + remove sit on ONE row: the source leaves them floating with no visible boundary,
   which reads as decoration. A bordered stepper makes the control obvious and puts "Kaldır"
   next to what it removes. */
.uq-cline__controls{display:flex;align-items:center;gap:16px;margin-top:10px}
.uq-cline__qty{display:inline-flex;align-items:center;border:1px solid var(--uq-border);height:36px}
.uq-cline__qty button{width:36px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;font-size:18px;line-height:1;color:#000;cursor:pointer}
.uq-cline__qty button:disabled{color:#c4c4c4;cursor:default}
.uq-cline__qtyval{min-width:40px;padding:0 4px;text-align:center;font-size:15px;
  border-inline:1px solid var(--uq-border);line-height:34px}
.uq-cline__remove{padding:0;background:none;border:0;font-size:13px;line-height:20px;color:var(--uq-text-2);
  text-decoration:underline;cursor:pointer}
.uq-cline__remove:hover{color:#000}
/* line total gets its own ruled row so it can't be confused with the unit price above */
.uq-cline__sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;line-height:18.2px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--uq-border)}
.uq-cline__sub>span{color:var(--uq-text-2)}
.uq-cline__sub>strong{font-family:var(--uq-font-reg);font-size:15px;font-weight:400;white-space:nowrap}
/* no box behind the heart — icon only */
.uq-cline__heart{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;color:#000;cursor:pointer}
.uq-cline__heart.is-active{color:var(--uq-sale,#ee0000)}
.uq-cline__heart.is-active svg{fill:currentColor}
/* neutralise the shared .uq-line rules — .uq-line stays only as a click-handler hook */
.uq-cline.uq-line{border-bottom:0;padding-top:0}

/* ---- Coupon / Gift option rows: 358 wide, ~53px, label + chevron ---- */
.uq-cartpage__links{list-style:none;margin:0 0 24px;padding:0}
.uq-cartpage__links li{border-top:1px solid var(--uq-border)}
.uq-cartpage__links li:last-child{border-bottom:1px solid var(--uq-border)}
.uq-cartpage__link{display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;
  padding:0 2px;background:none;border:0;font-size:14px;color:#000;cursor:pointer;text-align:left}
.uq-cartpage__chev{font-size:20px;line-height:1;color:var(--uq-text-2)}

/* ---- order summary table: 326 wide (16px inside the 358 content box) ---- */
.uq-cartpage__table{width:calc(100% - 32px);margin:0 16px 24px;border-collapse:collapse}
.uq-cartpage__table th,.uq-cartpage__table td{font-size:14px;line-height:19.6px;font-weight:400;padding:10px 0}
.uq-cartpage__table th{text-align:left;color:#000}
.uq-cartpage__table td{text-align:right;font-family:var(--uq-font-reg)}
.uq-cartpage__tr--rule{border-bottom:1px solid var(--uq-border)}
/* Source row heights are 45 / 47 / 39 / 39 / 47 / 45 — rows touching a rule breathe more.
   Plain rows are 19.6 + 2x10 = 39.6; the rest add padding to land on 45 and 47. */
.uq-cartpage__tr--rule:first-child th,.uq-cartpage__tr--rule:first-child td{padding:12px 0}
.uq-cartpage__tr--rule:first-child + tr th,.uq-cartpage__tr--rule:first-child + tr td{padding-top:18px}
.uq-cartpage__tr--rule:not(:first-child) th,.uq-cartpage__tr--rule:not(:first-child) td{padding:13px 0}
.uq-cartpage__tr--total th,.uq-cartpage__tr--total td{font-size:16px;line-height:23px;padding:11px 0}


/* CTA pills: 52px tall, fully rounded, 15px/18px uppercase — as measured */
.uq-cartpage__cta,.uq-cartpage__continue{display:flex;align-items:center;justify-content:center;
  height:52px;padding:0 16px;border-radius:999px;font-size:15px;line-height:18px;text-transform:uppercase}
.uq-cartpage__cta{background:#000;color:#fff;border:1px solid #000}
/* the source's CONTINUE SHOPPING is white with black text, NOT a second black pill */
.uq-cartpage__continue{background:#fff;color:#000;border:1px solid #000;margin:24px 0 0}
.uq-cartpage__policy{display:flex;align-items:center;justify-content:center;height:44px;
  font-size:14px;text-decoration:underline;margin-top:8px}

/* ---- empty state ---- */
.uq-cartpage__empty{padding:8px 0 32px}
.uq-cartpage__empty-title{font-size:15px;line-height:21px;margin:0 0 12px}
.uq-cartpage__empty-sub{font-size:14px;line-height:19.6px;color:var(--uq-text-2);margin:0 0 12px}
.uq-cartpage__empty-link{font-size:14px;text-decoration:underline}

/* ---- recommendation rails ---- */
.uq-cartpage__reclead{font-size:20px;line-height:24px;font-weight:400;margin:32px 0 0}
.uq-cartpage__rail{margin-top:24px}
.uq-cartpage__rail-title{font-size:16px;line-height:22px;font-weight:700;margin:0 0 12px}
.uq-cartpage__rail-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin-inline:-16px;padding-inline:16px}
.uq-cartpage__rail-track::-webkit-scrollbar{display:none}
.uq-cartpage__rail-track>*{flex:0 0 45%;min-width:0}

/* ---- fixed bottom bar: button 171x52, right edge 16px from the viewport ---- */
.uq-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;
  box-shadow:0 -1px 0 var(--uq-border)}
.uq-cartbar[hidden]{display:none}
.uq-cartbar__inner{display:flex;align-items:center;gap:16px;max-width:1176px;margin:0 auto;padding:16px}
.uq-cartbar__left{flex:1 1 auto;min-width:0}
.uq-cartbar__total{font-size:14px;line-height:20px;margin:0}
.uq-cartbar__total strong{font-family:var(--uq-font-reg);font-size:16px;font-weight:400}
.uq-cartbar__cta{flex:0 0 171px;display:flex;align-items:center;justify-content:center;height:52px;
  background:#000;color:#fff;border-radius:999px;font-size:15px;line-height:18px;text-transform:uppercase}
/* The fixed bar overlays the bottom 84px of the viewport, but the footer sits below this
   block and already supplies that clearance — 140px of padding here only opened a hole
   between the last button and the footer. */
body.uq-has-cartbar .uq-cartpage{padding-bottom:24px}

/* ---- Cart modals: Kupon + Hediye paketi ------------------------------------------
   Measured on the source: backdrop rgba(27,27,27,.5) z-60; small box 358 wide;
   large box full-bleed at mobile; title 18/21.6; buttons 52 tall, radius 999. */
.uq-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.uq-modal[hidden]{display:none}
.uq-modal__backdrop{position:absolute;inset:0;background:rgba(27,27,27,.5);opacity:0;transition:opacity .2s}
.uq-modal.is-open .uq-modal__backdrop{opacity:1}
.uq-modal__box{position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100% - 32px);
  background:#fff;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.uq-modal.is-open .uq-modal__box{opacity:1;transform:none}
.uq-modal__box--small{max-width:358px}
.uq-modal__box--large{max-width:600px}

.uq-modal__head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.uq-modal__title{font-size:18px;line-height:21.6px;font-weight:400;margin:0}
.uq-modal__x{margin-left:auto;width:44px;height:46px;padding:4px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;color:#000;cursor:pointer}
.uq-modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 16px}
.uq-modal__foot{flex:0 0 auto;display:flex;flex-direction:column;gap:16px;padding:8px 16px 16px}
.uq-modal__cta,.uq-modal__ghost{display:flex;align-items:center;justify-content:center;height:52px;
  padding:0 16px;border-radius:999px;font-size:15px;line-height:18px;text-transform:uppercase;cursor:pointer}
.uq-modal__cta{background:#000;color:#fff;border:1px solid #000}
.uq-modal__ghost{background:#fff;color:#000;border:1px solid #000}

.uq-modal__label{display:block;font-size:13px;line-height:18px;color:var(--uq-text-2);margin-bottom:6px}
.uq-modal__input{width:100%;height:48px;padding:0 12px;border:1px solid var(--uq-border);border-radius:0;
  background:#fff;font-size:16px;color:#000;text-transform:uppercase} /* 16px: iOS zooms below that */
.uq-modal__input:focus{outline:2px solid #000;outline-offset:-2px}
.uq-modal__msg{margin:8px 0 0;font-size:13px;line-height:18px}
.uq-modal__msg.is-error{color:var(--uq-sale,#ee0000)}
.uq-modal__msg.is-ok{color:#0a7c2f}
.uq-modal__applied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding:12px;background:#f4f4f4;font-size:14px}
.uq-modal__unlink{padding:0;background:none;border:0;font-size:13px;color:var(--uq-text-2);
  text-decoration:underline;cursor:pointer}
.uq-modal__note{font-size:14px;line-height:19.6px;margin:0 0 16px}
.uq-modal__lead{font-size:16px;line-height:22px;font-weight:700;margin:0 0 8px}

/* gift options: 20px radio at the left, text column beside it */
.uq-gopt{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer;
  border-top:1px solid var(--uq-border)}
.uq-gopt:first-of-type{border-top:0}
.uq-gopt input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:#000;cursor:pointer}
.uq-gopt__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.uq-gopt__name{font-size:15px;line-height:21px;color:#000}
.uq-gopt__size{font-size:13px;line-height:18px;color:var(--uq-text-2)}
.uq-gopt__note{font-size:13px;line-height:18px;color:var(--uq-text-2)}
.uq-gopt:has(input:checked){background:#fafafa}

/* the cart row echoes the current selection, right-aligned before the chevron */
.uq-cartpage__linkval{margin-left:auto;padding-right:8px;font-size:13px;color:var(--uq-text-2)}
.uq-cartpage__tr--discount td{color:var(--uq-sale,#ee0000)}

/* ---- desktop: two columns, measured at 1440 on the source ----
   content 776 | gap 24 | summary 376  (= the 1176 container)
   h1 32/44.8 · line image 152x203 · promo 976 centred · NO fixed bottom bar. */
@media(min-width:900px){
  .uq-cartpage__rail-track>*{flex:0 0 20%}
  /* the source's 1176 container has no side padding at this width — keeping ours would make
     the two columns 754/366 instead of the measured 776/376 */
  .uq-cartpage__wrap{padding-inline:0}
  .uq-cartpage__title{font-size:32px;line-height:44.8px;margin-bottom:24px}

  .uq-cartpage__filled{display:grid;grid-template-columns:minmax(0,776fr) minmax(0,376fr);
    column-gap:24px;align-items:start}
  .uq-cartpage__side{position:sticky;top:calc(var(--uq-header-h) + 16px)}

  .uq-cline__media{flex:0 0 152px}
  .uq-cline__img{width:152px;height:203px}
  .uq-cline__name{font-size:17px;line-height:22.1px}

  /* the summary table is inset 24px inside the 376 column (328 wide on the source) */
  .uq-cartpage__table{width:calc(100% - 48px);margin-inline:24px}

  /* the source drops the fixed bar entirely on desktop — the CHECKOUT in the side column
     is always visible there, so the bar would be redundant */
  .uq-cartbar{display:none}
  body.uq-has-cartbar .uq-cartpage{padding-bottom:40px}
}

/* ---- Filter drawer (gear button) -------------------------------------------------
   Measured from .fr-ec-drawer--start.--full-width on the source @390 — see
   specs/filter-drawer.spec.md. Slides in from the LEFT; full-screen at mobile.
   Panel is fixed + inset 0 so the header/footer stay put and only the middle scrolls. */
/* The source stacks this at z-index 54, above its own chrome — verified by probing (20,20)
   with the drawer open and hitting the drawer's title, not the site header. Our sticky header
   sits at 60, so 54 would let it cover the drawer's title row; 70 restores the same result. */
.uq-fdrawer{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;width:100%;background:#fff;
  transform:translateX(-100%);transition:transform .4s cubic-bezier(0,0,.2,1)}
.uq-fdrawer.is-open{transform:translateX(0)}
.uq-fdrawer[hidden]{display:none}
.uq-fdrawer__scrim{position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.4);opacity:0;transition:opacity .4s cubic-bezier(0,0,.2,1)}
.uq-fdrawer__scrim.is-open{opacity:1}
.uq-fdrawer__scrim[hidden]{display:none}

/* header: 63px tall, padding 8px 16px, 1px #dadada keyline */
.uq-fdrawer__head{flex:0 0 auto;display:flex;align-items:center;min-height:63px;padding:8px 16px;
  border-bottom:1px solid var(--uq-border);background:#fff}
.uq-fdrawer__title{font-size:18px;line-height:21.6px;font-weight:400;color:#000;margin:0}
.uq-fdrawer__count{margin-left:24px;font-size:14px;line-height:19.6px;font-weight:400;color:#000}
.uq-fdrawer__close{margin-left:auto;width:44px;height:46px;padding:4px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;color:#000;cursor:pointer}

/* body: the only scrolling region */
.uq-fdrawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:16px}
.uq-facc{list-style:none;margin:0;padding:0}
/* collapsed group measures 52px on the source: a 44px control plus an 8px gap.
   It has to be padding, not margin — margin sits outside the box and would leave
   the item's own measured height at 44. */
.uq-facc__item{border:0;padding-bottom:8px}
.uq-facc__heading{margin:0;font-size:inherit}
.uq-facc__control{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;
  padding:0;background:none;border:0;cursor:pointer;text-align:left}
.uq-facc__label{font-size:15px;line-height:21px;font-weight:700;color:#000}
/* the source draws a minus when open and a plus when closed */
.uq-facc__sign{position:relative;flex:0 0 auto;width:16px;height:16px}
.uq-facc__sign::before,.uq-facc__sign::after{content:"";position:absolute;left:50%;top:50%;background:#000;
  transform:translate(-50%,-50%);transition:opacity .2s}
.uq-facc__sign::before{width:16px;height:1px}
.uq-facc__sign::after{width:1px;height:16px}
.uq-facc__control[aria-expanded="true"] .uq-facc__sign::after{opacity:0}
.uq-facc__panel{padding-bottom:8px}
.uq-facc__panel[hidden]{display:none}
/* the moved-in body must not keep the dropdown panel's own 16px inset */
.uq-facc__panel .uq-fpanel__body{padding:0}

/* footer: exactly 84px (16px padding + a 52px pill). The keyline is a box-shadow, not a
   border, so it does not add a 85th pixel the way border-top would. */
.uq-fdrawer__foot{flex:0 0 auto;display:flex;align-items:center;height:84px;padding:16px;
  box-shadow:0 -1px 0 var(--uq-border);background:#fff}
.uq-fdrawer__apply{flex:1 1 auto;min-width:0;height:52px;padding:0 16px;background:#000;color:#fff;border:0;
  border-radius:26px;font-size:15px;line-height:18px;text-transform:uppercase;cursor:pointer}

/* desktop: the source caps the drawer at 400px instead of going full-bleed */
@media(min-width:900px){
  .uq-fdrawer{width:400px;max-width:100%;box-shadow:0 0 24px rgba(0,0,0,.16)}
}
@media(prefers-reduced-motion:reduce){
  .uq-fdrawer,.uq-fdrawer__scrim{transition:none}
}

/* cards the filter excluded */
.uq-pcard.is-filtered-out,.uq-card.is-filtered-out{display:none}

/* Sort flyout (measured @390: full-bleed card under the results row, 5 rows x 44.6px) */
.uq-sort{position:relative;align-self:stretch;display:inline-flex;align-items:center}
.uq-sort__btn{display:inline-flex;align-items:center;gap:6px;height:100%;font-size:16px;font-weight:400;line-height:1;color:#000}
.uq-sort__btn svg{display:block;flex:0 0 auto}
/* right:-16px + width:100vw pins the card to left:0 / full viewport width without
   overflowing past the right viewport edge (container padding is 16px on mobile) */
.uq-sort__panel{position:absolute;top:100%;right:-16px;left:auto;width:100vw;z-index:42;background:#fff;border:1px solid var(--uq-border);border-radius:0;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.uq-sort__panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.uq-sort__panel ul{padding:0 16px}
.uq-sort__opt{display:flex;align-items:center;width:100%;height:44.2px;padding:0;font-size:14px;line-height:19.6px;font-weight:400;color:#000;text-align:left}
.uq-sort__opt.is-active{font-weight:400;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.uq-sort__panel{transition:none}}
/* >=601px the container gutter is 24px and a 100vw card would be absurd: dock it right */
@media(min-width:601px){
  .uq-sort__panel{right:0;left:auto;width:280px}
}

/* ---------- PLP card (measured) ---------- */
.uq-grid--plp{grid-template-columns:repeat(2,1fr);column-gap:8px;row-gap:28px}
.uq-pcard{display:flex;flex-direction:column}
.uq-pcard__media{position:relative;display:block;background:#f4f4f4;aspect-ratio:3/4;overflow:hidden}
.uq-pcard__img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.uq-pcard__media:hover .uq-pcard__img{transform:scale(1.03)}
.uq-pcard__badge{position:absolute;left:8px;bottom:8px;background:#fff;border:1px solid #000;border-radius:4px;padding:2px 9px;font-size:13px;z-index:2}
.uq-pcard__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px 4px}
/* Swatches scroll horizontally when a product has more colours than fit; min-width:0 is what
   lets this flex child actually shrink instead of pushing the heart off the card. */
.uq-pcard__swatches{display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto;overflow-y:hidden;padding-block:4px;margin-block:-4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-padding-left:0}
.uq-pcard__swatches::-webkit-scrollbar{display:none}
.uq-pcard__dot{width:16px;height:16px;border-radius:50%;background:var(--sw);border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.uq-pcard__heart{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#000;flex:0 0 auto;background:none;border:0;cursor:pointer;padding:0}
.uq-pcard__heart.is-active svg path{fill:var(--uq-sale)}
/* Uppercase like the source ("MEN, XXS-3XL"). The page is lang="tr", so the browser applies
   Turkish casing here — i becomes İ and ı becomes I, never the English mapping. */
.uq-pcard__meta{font-size:12px;color:var(--uq-text-2);padding:0 2px;text-transform:uppercase}
.uq-pcard__name{font-family:var(--uq-font-body);font-size:13px;font-weight:400;line-height:1.35;padding:2px 2px 0}
.uq-pcard .uq-price--plp{font-family:var(--uq-font-reg);font-size:18px;padding:0 2px;margin-top:3px;display:inline-flex}
.uq-pcard__offer{font-size:12px;color:var(--uq-sale);padding:0 2px;margin-top:2px}
.uq-pcard__rating{display:flex;align-items:center;gap:4px;padding:0 2px;margin-top:4px}
.uq-pcard__star{font-size:12px}
.uq-pcard__rate{font-size:12px;font-weight:600}
.uq-pcard__revs{font-size:10px}

/* Mobile PLP cards — measured on the source at 390: the grid is FULL-BLEED (card left 0,
   width 195, zero column gap) while the card's text rows stay inset 16px, and the heart is a
   44x44 tap target flush with the card's right edge. */
/* Homepage product strip gets the same edge-to-edge treatment as the collection grid:
   full-bleed cells, 16px text inset, 44px heart. minmax(0,1fr) is required or the swatch row
   plus the heart set a min-content floor that widens the columns and blocks scrolling. */
@media(max-width:899px){
  .uq-grid--strip,.uq-grid--rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-inline:-24px}
  .uq-scard__row{padding:8px 0 2px 16px}
  .uq-scard__name,.uq-scard__meta{padding:0 16px}   /* keep the meta line flush with the name */
  .uq-scard .uq-price{padding:0 16px}
}
@media(max-width:600px){
  .uq-grid--strip,.uq-grid--rail{margin-inline:-16px}
}

@media(max-width:899px){
  /* Cancel the container's own padding so the grid reaches both screen edges. The offset is
     stated per breakpoint on purpose: `vw` is unreliable here (it resolves to the visual
     viewport, not the layout width) and overshooting adds a horizontal scrollbar. */
  /* minmax(0,1fr): plain 1fr floors each column at the card's min-content width, and a card
     holding six swatches plus a 44px heart is ~214px wide — that silently widened the columns,
     overflowed the page and stopped the swatch strip from ever scrolling. */
  .uq-grid--plp{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2px;margin-inline:-24px}
  .uq-pcard__row{padding:8px 0 4px 16px}
  .uq-pcard__meta,.uq-pcard__name,.uq-pcard__offer,.uq-pcard__rating{padding:0 16px}
  .uq-pcard .uq-price--plp{padding-left:16px;padding-right:16px}
}
@media(max-width:600px){
  .uq-grid--plp{margin-inline:-16px}
}

@media(min-width:900px){
  .uq-grid--plp{margin-inline:0}
  /* Desktop PLP — measured on the source at 1425: content column 1176 (l=125), sub-cat tile
     150x198 (img 146x194) pitch 158, chips row in-column, cards 294 FLUSH (no column gap)
     with a 56px row gap, price 20px. */
  .uq-grid--plp{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:56px}
  .uq-plp__filterbar{top:var(--uq-header-h)}
  .uq-plp .uq-container{max-width:1224px}  /* 1176 content + 2x24 gutter */
  .uq-subcats__track{padding:0 calc(max(16px,(100% - 1176px)/2))}
  .uq-subcat{flex:0 0 150px;width:150px}
  .uq-subcat__thumb{width:150px;height:198px}
  .uq-plp__chips{padding:10px calc(max(16px,(100% - 1176px)/2))}
  /* panel text lines up with the chips row inside the 1176 content column */
  .uq-fpanel__count,.uq-fpanel__body{padding-inline:calc(max(16px,(100% - 1176px)/2))}
  /* ...but not once the body has been moved into the drawer, which owns its own 16px inset */
  .uq-facc__panel .uq-fpanel__body{padding-inline:0}
  .uq-plp__count{font-size:15px}
  .uq-pcard .uq-price--plp{font-size:20px}
  /* Desktop home — hero band 1425x820; category band: 22px heading, 80px centered icons,
     tile rows 105 high (icon 80 + 13px centered label), grid gap 16x24. All measured. */
  .uq-cats__title{font-size:22px}
  .uq-cats__grid{gap:16px 24px}
  .uq-cats__thumb{width:80px;height:80px;aspect-ratio:auto;margin:0 auto}
  .uq-cats__tile{gap:8px}
}

/* ---------- Mobile full-screen search surface (measured on the source @390) ---------- */
.uq-searchpanel{position:fixed;inset:0;z-index:80;background:#fff;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.uq-searchpanel.is-open{opacity:1;transform:translateY(0)}
.uq-searchpanel__inner{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 24px}
.uq-searchpanel__bar{display:flex;align-items:center;gap:0;margin:3px 0 0 -16px}
.uq-searchpanel__form{flex:1;display:flex;align-items:center;height:38px;border:1px solid var(--uq-border);border-radius:999px;padding:0 0 0 12px;min-width:0}
.uq-searchpanel__input{flex:1;border:0;background:transparent;outline:none;font-size:16px;color:#000;min-width:0}
.uq-searchpanel__input::placeholder{color:var(--uq-text-3)}
.uq-searchpanel__submit{width:44px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#000;cursor:pointer}
.uq-searchpanel__submit:disabled{color:rgba(16,16,16,.3)}
.uq-searchpanel__shortcuts{display:flex;gap:24px;margin-top:10px}
.uq-searchpanel__shortcuts a{width:56px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#000;text-decoration:none}
.uq-searchpanel__shortcuts span{font-size:10px;line-height:1.2;white-space:nowrap}
.uq-searchpanel__head{font-size:14px;font-weight:400;color:#000;margin:33px 0 0}
.uq-searchpanel__chips{display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.uq-searchpanel__chips::-webkit-scrollbar{display:none}
.uq-searchpanel__chip{flex:0 0 auto;height:36px;padding:0 12px;background:#fff;border:1px solid var(--uq-border);border-radius:999px;font-size:13.33px;color:#000;cursor:pointer;white-space:nowrap}
.uq-searchpanel__histrow{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.uq-searchpanel__histrow .uq-searchpanel__head{margin:0}
.uq-searchpanel__histrow .uq-iconbtn:disabled{color:rgba(16,16,16,.3)}
.uq-searchpanel__hist{margin-top:17px}
.uq-searchpanel__empty{font-size:14px;color:#000;margin:0}
.uq-searchpanel__histitem{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 0;font-size:14px;color:#000;cursor:pointer;border-bottom:1px solid var(--uq-border)}
.uq-searchpanel__cantfind{font-size:14px;color:#000;margin:32px 0 0}
.uq-searchpanel__bycat{display:block;width:100%;height:52px;margin-top:15px;background:#fff;border:0;border-radius:999px;font-size:16px;font-weight:400;color:#000;cursor:pointer;box-shadow:0 0 0 1px var(--uq-border) inset}
@media(min-width:901px){.uq-searchpanel{display:none}}

/* ---------- Card colour swipe: one photo per colour inside the card media ---------- */
.uq-cswipe{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.uq-cswipe::-webkit-scrollbar{display:none}
.uq-cswipe__img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
/* Selected swatch: measured on the source — 1px white ring then a 2px black ring, and the
   swatch keeps its own grey edge. The fill is the colour itself, so it must never change. */
.uq-cdot{padding:0;margin-inline:2px;background:var(--sw);border:1px solid var(--uq-text-2);border-radius:50%;cursor:pointer;flex:0 0 auto;transition:box-shadow .15s ease}
.uq-cdot.is-active{box-shadow:0 0 0 1px #fff,0 0 0 2px #000}
.uq-cdot:focus-visible{outline:2px solid #006ed7;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.uq-cswipe{scroll-behavior:auto}}

/* ---------- Motion: drawers, menus, panels, tiles, loading ---------- */
.uq-subcats{max-height:340px;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin .35s ease}
.uq-subcats.is-collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}
.uq-menu__panel-grid{animation:uqFadeUp .28s cubic-bezier(.4,0,.2,1) both}
@keyframes uqFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.uq-search__panel{animation:uqFadeUp .22s cubic-bezier(.4,0,.2,1) both}
.uq-menu__tile,.uq-cats__tile,.uq-subcat{transition:opacity .2s ease,transform .2s ease}
.uq-menu__tile:active,.uq-cats__tile:active,.uq-subcat:active{transform:scale(.97)}
.uq-menu__tab,.uq-menu__tab::after{transition:color .2s ease,border-color .2s ease}
.uq-pcard,.uq-scard,.uq-card{animation:uqFadeIn .35s ease both}
@keyframes uqFadeIn{from{opacity:0}to{opacity:1}}
.uq-line{transition:opacity .2s ease}
.uq-btn,.uq-iconbtn,.uq-plp__chip{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease}
.uq-btn:active,.uq-iconbtn:active{transform:scale(.97)}
.uq-accordion__body{overflow:hidden}
.uq-accordion__head .uq-accordion__ico{transition:transform .25s ease}
.uq-accordion__head[aria-expanded="true"] .uq-accordion__ico{transform:rotate(45deg)}
.uq-totop{transition:opacity .25s ease,transform .25s ease}
img{transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){
  .uq-subcats,.uq-menu__panel-grid,.uq-search__panel,.uq-pcard,.uq-scard,.uq-card,.uq-btn,.uq-iconbtn,.uq-fpanel,.uq-plp__caret{animation:none!important;transition:none!important}
}
.uq-checkout__row--discount span:last-child{color:var(--uq-sale,#ee0000)}
/* "Size önerilenlere göz atın" jumps to the first rail on this same page; the sticky header
   would otherwise cover the heading it lands on. */
.uq-cartpage__rail{scroll-margin-top:calc(var(--uq-header-h) + 16px)}
/* The back-to-top button is fixed bottom-right and the cart page's fixed bar occupies the
   same corner — it landed on top of "ÖDEMEYE GEÇ". Lift it clear of the bar (84px) while
   that bar is on screen. */
body.uq-has-cartbar .uq-totop{bottom:calc(84px + 20px)}
/* Wishlist cards sat edge-to-edge with no separation. The flush look belongs to the
   collection grid and the homepage strip, not here — this page is a saved-items list.
   Scoped to the wishlist so the archive and search grids keep their current spacing. */
.uq-wishlist .uq-grid--products{column-gap:16px;row-gap:32px}

/* ---- Checkout: Turkish, conversion-oriented ------------------------------------- */
/* legend is now an <h2> (a <legend> cannot be styled reliably across browsers) */
.uq-fieldset__legend{font-size:16px;font-weight:700;font-family:var(--uq-font-body);margin:0 0 14px}
.uq-field textarea{width:100%;min-height:76px;padding:10px 12px;border:1px solid var(--uq-border);
  border-radius:0;background:#fff;font:inherit;resize:vertical}
.uq-field textarea:focus{border-color:#000;outline:none}
/* 16px keeps iOS from zooming the page when a field is focused */
.uq-field input,.uq-field select,.uq-field textarea{font-size:16px}
.uq-field__hint{font-size:12px;line-height:17px;color:var(--uq-text-2);margin:-6px 0 0}
.uq-field__err{display:block;margin-top:6px;font-size:12px;line-height:16px;color:var(--uq-sale,#ee0000);font-style:normal}
.uq-field__err[hidden],.uq-field__err:empty{display:none}  /* slots start empty, not hidden */
.uq-field.has-error input,.uq-field.has-error textarea{border-color:var(--uq-sale,#ee0000)}

/* İl / İlçe / Mahalle combobox */
.uq-combo{position:relative;display:block;margin-bottom:14px}
.uq-combo>span{display:block;font-size:13px;color:var(--uq-text-2);margin-bottom:6px}
.uq-combo input{width:100%;height:44px;border:1px solid var(--uq-border);border-radius:0;padding:0 12px;background:#fff;font-size:16px}
.uq-combo input:focus{border-color:#000;outline:none}
.uq-combo__list{position:absolute;left:0;right:0;top:100%;z-index:60;max-height:260px;overflow-y:auto;
  margin:2px 0 0;padding:0;list-style:none;background:#fff;border:1px solid var(--uq-border);
  box-shadow:0 8px 16px rgba(0,0,0,.12);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.uq-combo__list[hidden]{display:none}
.uq-combo__list li{padding:11px 12px;font-size:15px;line-height:20px;cursor:pointer;min-height:44px}
.uq-combo__list li:hover{background:#f4f4f4}
.uq-field-row .uq-combo{flex:1;min-width:0} /* min-width:0 or a long mahalle name blows the row out */

/* the amount rides on the CTA so it is never a surprise */
.uq-checkout__place{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;
  margin-top:8px;padding:0 16px;background:#000;color:#fff;border:0;border-radius:999px;
  font-size:16px;line-height:20px;cursor:pointer}
.uq-checkout__place:disabled{opacity:.6;cursor:default}


/* collapsed summary at the top — mobile only; on desktop the sidebar is already visible */
.uq-checkout__peek{display:none;align-items:center;gap:10px;width:100%;min-height:52px;margin-bottom:20px;
  padding:0 16px;background:#f4f4f4;border:0;font-size:14px;color:#000;cursor:pointer;text-align:left}
.uq-checkout__peek-total{margin-left:auto;font-family:var(--uq-font-reg)}
.uq-checkout__peek-caret{transition:transform .2s}
.uq-checkout__peek[aria-expanded="true"] .uq-checkout__peek-caret{transform:rotate(180deg)}
.uq-checkout__row--discount span:last-child{color:var(--uq-sale,#ee0000)}

@media(max-width:899px){
  .uq-checkout__peek{display:flex}
  /* The sidebar becomes the disclosure panel. It stays in the DOM and in flow — a
     display:none -> block swap would skip the transition and the panel would pop open.
     grid-template-rows 0fr -> 1fr eases all the way to the content's natural height. */
  /* Height is animated from an explicit px value set by JS. The grid 0fr->1fr trick did not
     interpolate here (measured: 0 -> 257px in a single frame), and animating `height` from a
     real number always does. Padding lives on the inner wrapper so it never fights the tween. */
  .uq-checkout__summary{position:static;top:auto;display:block;overflow:hidden;
    height:0;opacity:0;padding:0;margin:-12px 0 20px;border-radius:0;
    transition:height .3s cubic-bezier(.4,0,.2,1),opacity .22s ease}
  .uq-checkout__summary-inner{padding:16px}
  .uq-checkout__summary.is-open{opacity:1}
  .uq-checkout__summary h2{font-size:14px;margin-bottom:12px}
  /* keep it plain: thin rows, no heavy borders */
  .uq-checkout__summary .uq-checkout__row{font-size:14px;padding:4px 0;margin:0}
  .uq-checkout__summary .uq-checkout__items{margin-bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  .uq-checkout__summary,.uq-checkout__peek-caret{transition:none}
}

/* Checkout grid placement. Title spans the top; on mobile the collapsed summary sits directly
   under the toggle that controls it, instead of at the very bottom of the page. */
.uq-checkout__grid{grid-template-areas:"title title" "main summary";row-gap:0}
.uq-checkout__title{grid-area:title}
.uq-checkout__main{grid-area:main}
.uq-checkout__summary{grid-area:summary}
.uq-checkout__peek{grid-area:peek}
@media(max-width:899px){
  .uq-checkout__grid{grid-template-areas:"title" "peek" "summary" "main"}
}

/* Checkout summary line: real product photo, quantity badge, price on the right.
   .uq-coline__media keeps a grey tile even when the image is missing or fails, so the row
   never collapses into a broken-image box. */
.uq-coline{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.uq-coline:last-child{border-bottom:0}
.uq-coline__media{position:relative;flex:0 0 64px;width:64px;height:85px;background:#e9e9e9;display:block}
.uq-coline__img{width:100%;height:100%;object-fit:cover;display:block}
.uq-coline__qty{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;background:#000;color:#fff;
  border-radius:10px;font-size:11px;line-height:1}
.uq-coline__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.uq-coline__name{font-size:13px;line-height:17px;color:#000}
.uq-coline__meta{font-size:12px;line-height:16px;color:var(--uq-text-2)}
.uq-coline__price{flex:0 0 auto;font-family:var(--uq-font-reg);font-size:14px;white-space:nowrap}

/* the copy under the button is never collapsed and needs its own spacing */
.uq-checkout__summary--static{margin-top:24px;height:auto;opacity:1;background:#f4f4f4}

/* ---- Beden Tablosu (PDP size chart) ---------------------------------------------
   Values come from Uniqlo's own size-charts API, already in cm. Wide tables scroll
   inside their own box so the modal never pushes the page sideways. */
.uq-pdp__sizeguide{padding:0;background:none;border:0;font-size:13px;color:var(--uq-text-2);
  text-decoration:underline;cursor:pointer}
.uq-pdp__sizeguide:hover{color:#000}

.uq-sg__tabs{display:flex;gap:0;margin:0 0 16px;border-bottom:1px solid var(--uq-border)}
.uq-sg__tab{flex:1 1 0;min-width:0;height:44px;padding:0 8px;background:none;border:0;
  border-bottom:2px solid transparent;font-size:14px;color:var(--uq-text-2);cursor:pointer}
.uq-sg__tab.is-active{color:#000;font-weight:700;border-bottom-color:#000}
.uq-sg__panel[hidden]{display:none}

/* the table is the one thing allowed to scroll horizontally */
.uq-sg__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-16px;padding-inline:16px}
.uq-sg__table{border-collapse:collapse;width:100%;min-width:max-content;font-size:13px}
.uq-sg__table th,.uq-sg__table td{padding:10px 12px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--uq-border)}
.uq-sg__table thead th{font-weight:700;color:#000;vertical-align:bottom;background:#fafafa}
.uq-sg__table thead th span{display:block;font-weight:400;font-size:11px;color:var(--uq-text-2)}
/* the size column stays put while the measurements scroll under it */
.uq-sg__table tbody th{position:sticky;left:0;z-index:1;background:#fff;text-align:left;font-weight:700}
.uq-sg__table thead th:first-child{position:sticky;left:0;z-index:2;background:#fafafa;text-align:left}
.uq-sg__table tbody tr:nth-child(even) th,.uq-sg__table tbody tr:nth-child(even) td{background:#fafafa}
.uq-sg__note{margin:12px 0 0;font-size:12px;line-height:17px;color:var(--uq-text-2)}

/* Colour row: the chosen colour name replaces the "Renk" label and sits where it did,
   so it reads as the heading for the swatches rather than a value floated to the right. */
.uq-pdp__opt-head--color{justify-content:flex-start}
.uq-pdp__opt-head--color .uq-pdp__opt-sel{color:#000}

/* Wishlist heart: the icon path is an OUTLINE shape, so filling it produced a red outline
   rather than a red heart. A solid duplicate sits underneath and only shows when active. */
.uq-heart-solid{opacity:0;transition:opacity .18s ease}
.is-active .uq-heart-solid{opacity:1}

/* The related rail sat flush against the accordion above it (measured gap: 0). */
.uq-pdp__related{margin-top:48px}
.uq-pdp__related-title{margin-bottom:16px}

/* PDP accordions open and close on a height tween — `hidden` alone skips the transition.
   The padding lives on an INNER wrapper: animating height AND padding together made the
   panel jump ~16px at the end, because scrollHeight was read while the padding was still
   mid-transition. Only height moves now, so the motion is continuous. */
.uq-accordion__body{overflow:hidden;height:0;opacity:0;padding:0;
  transition:height .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.uq-accordion__body.is-open{opacity:1}
.uq-accordion__inner{padding:0 0 16px}
.uq-accordion__ico{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.uq-accordion__head[aria-expanded="true"] .uq-accordion__ico{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){
  .uq-accordion__body,.uq-accordion__ico,.uq-heart-solid{transition:none}
}

/* Selected size: the ring is NOT on the chip — the source puts a double box-shadow on the
   wrapper (2px white, then 2px black), which reads as a square band offset from the fill.
   The row gets matching padding/negative margin or the ring is clipped by its own box. */
.uq-pdp__size.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
.uq-pdp__sizes{padding:5px;margin:-5px}

/* Add-to-cart row, measured on the source: grey 156x52 stepper pill, 16px gap,
   black 204x52 pill. Widths are given as flex ratios so the row still fits at 390. */
.uq-pdp__actions{gap:16px;align-items:center}
.uq-pdp__qty{flex:0 1 156px;display:flex;align-items:center;justify-content:space-between;
  height:52px;background:#f4f4f4;border-radius:999px}
.uq-pdp__qtybtn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;font-size:20px;line-height:1;color:#000;cursor:pointer}
.uq-pdp__qtybtn:disabled{color:#c4c4c4;cursor:default}
.uq-pdp__qtyval{min-width:32px;text-align:center;font-family:var(--uq-font-reg);font-size:16px}
.uq-pdp__atc{flex:1 1 204px;height:52px;font-size:16px}  /* sole item beside the stepper */

/* "kadın, XXS-XXL" on the PDP related rail. Uppercased in CSS with the page's lang="tr",
   so "ı" becomes "I" and "i" becomes "İ" — strtoupper() in PHP would get both wrong. */
.uq-scard__meta{font-size:12px;line-height:16px;color:var(--uq-text-2);margin:0 0 2px;
  padding:0 8px;text-transform:uppercase;   /* same inset as .uq-scard__name */
  /* one line always: "ERKEK, KADIN, XXS-3XL" wrapped in the narrow mobile column and pushed
     that card's name and price 16px below its neighbour's */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Card names run to one or two lines, which pushed the price to different heights and made
   a row look ragged (measured: price at 495 vs 514 in the same row). Reserving two lines
   for the name lands every price on the same baseline. */
.uq-scard__name{min-height:calc(2 * 1.35em)}
/* min-height alone was not enough: a long Turkish name ran to THREE lines and pushed its
   price 19px below the neighbour's. Clamping to two lines fixes the ceiling as well. */
.uq-scard__name a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* This file's later rules win over earlier media queries, so the mobile inset for the meta
   line has to be restated here — the block above set it back to the 8px desktop value. */
@media(max-width:899px){
  .uq-scard__meta{padding:0 16px}
}

/* Guest order lookup: the "no order for this e-mail" panel. */
.uq-account__noorders{margin-top:24px;padding:20px;background:#f4f4f4}
.uq-account__noorders-title{font-size:15px;line-height:21px;color:#000;margin:0 0 6px}
.uq-account__noorders-sub{font-size:13px;line-height:19px;color:var(--uq-text-2);margin:0 0 16px}
.uq-hero__from,.uq-editorial__from{font-size:13px;font-weight:400;margin-left:4px;opacity:.85}

/* A LATER media query sets .uq-container{padding:0 16px}, and that shorthand resets the
   vertical padding these page wrappers declared earlier — so every one of them rendered
   flush against the nav. Restated here (after all of them) using padding-block only. */
.uq-checkout,.uq-wishlist,.uq-track,.uq-sitemap,.uq-page,.uq-404,.uq-search-results{padding-block:32px 60px}
.uq-account{padding-block:40px 60px}   /* the greeting needs a little more room than the rest */

/* ---- Order tracking, redesigned ---------------------------------------------------
   Was: a bare form, then plain "Sipariş No / Durum" text lines, then the timeline, all
   stacked with no separation — everything read as one cramped column. Now each part is a
   card with real breathing room, and the status is the same chip the account page uses. */
.uq-track__intro{max-width:520px;font-size:14px;line-height:20px;color:var(--uq-text-2);margin:-12px 0 24px}

.uq-track__form{max-width:520px;padding:20px;background:#f4f4f4;margin-bottom:32px}
.uq-track__form .uq-field-row{gap:16px}
.uq-track__form .uq-field input{background:#fff}
.uq-track__submit{width:100%;height:52px;margin-top:4px;padding:0 16px;background:#000;color:#fff;
  border:0;border-radius:999px;font-size:15px;line-height:18px;cursor:pointer}
.uq-track__submit:disabled{opacity:.6;cursor:default}

.uq-track__summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px;border:1px solid var(--uq-border);margin-bottom:24px}
.uq-track__label{font-size:12px;line-height:16px;color:var(--uq-text-2);margin:0 0 4px}
.uq-track__num{font-family:var(--uq-font-reg);font-size:18px;line-height:24px;margin:0}
.uq-track__chip{flex:0 0 auto;font-size:13px;padding:6px 12px}

.uq-track__panel{padding:24px 20px;border:1px solid var(--uq-border);margin-bottom:24px}
.uq-track__panel-title{font-size:15px;line-height:21px;font-weight:700;margin:0 0 20px}

/* timeline: taller steps, bigger dots, the rail centred under the dot */
.uq-track__panel .uq-timeline{margin:0}
.uq-track__panel .uq-timeline__step{gap:20px;padding-bottom:32px}
.uq-track__panel .uq-timeline__step:last-child{padding-bottom:0}
.uq-track__panel .uq-timeline__step::before{left:13px;top:28px}
.uq-track__panel .uq-timeline__dot{width:28px;height:28px;font-size:13px}
.uq-track__panel .uq-timeline__label{font-size:15px;line-height:21px}
.uq-track__panel .uq-timeline__desc{font-size:13px;line-height:19px;margin-top:4px}
.uq-track__panel .uq-timeline__at{font-size:12px;line-height:16px;margin-top:8px}
/* steps still to come are dimmed so "where is it now" is obvious at a glance */
.uq-track__panel .uq-timeline__step:not(.is-done):not(.is-current) .uq-timeline__label{color:var(--uq-text-2);font-weight:400}

.uq-track__panel--items .uq-coline:last-child{border-bottom:0}

@media(min-width:900px){
  .uq-track__form{padding:24px}
  .uq-track__panel{padding:28px}
}

/* ---- HTML sitemap: full category tree + products ---------------------------------- */
.uq-sitemap__intro{max-width:640px;font-size:14px;line-height:20px;color:var(--uq-text-2);margin:-12px 0 32px}
.uq-sitemap__group{margin-bottom:40px}
.uq-sitemap__grouptitle{font-size:20px;line-height:26px;font-weight:700;margin:0 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--uq-border)}
.uq-sitemap__list,.uq-sitemap__sub,.uq-sitemap__flat{list-style:none;margin:0;padding:0}
.uq-sitemap__flat li{padding:6px 0;font-size:14px}
.uq-sitemap__node{padding:6px 0}
.uq-sitemap__sub{margin-left:18px;padding-left:14px;border-left:1px solid var(--uq-border)}
.uq-sitemap__cat{font-size:14px;line-height:20px;color:#000}
.uq-sitemap__cat:hover{text-decoration:underline}
.uq-sitemap__products{display:inline-block;margin-left:8px;vertical-align:baseline}
.uq-sitemap__products>summary{display:inline;font-size:12px;color:var(--uq-text-2);cursor:pointer;list-style:none}
.uq-sitemap__products>summary::-webkit-details-marker{display:none}
.uq-sitemap__products>summary::before{content:"(";}
.uq-sitemap__products>summary::after{content:")";}
.uq-sitemap__products>summary:hover{color:#000;text-decoration:underline}
.uq-sitemap__products>ul{list-style:none;margin:8px 0 8px 14px;padding:0 0 0 14px;border-left:1px dotted var(--uq-border)}
.uq-sitemap__products>ul li{padding:3px 0;font-size:13px;line-height:18px}
.uq-sitemap__products>ul a{color:var(--uq-text-2)}
.uq-sitemap__products>ul a:hover{color:#000;text-decoration:underline}
@media(min-width:900px){
  .uq-sitemap__flat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
}

/* ---- sitemap: every level collapses -------------------------------------------- */
.uq-sitemap__toggleall{margin:0 0 20px;padding:8px 16px;background:#fff;border:1px solid #000;
  border-radius:999px;font-size:13px;cursor:pointer}
.uq-sitemap__group{margin-bottom:12px;border-bottom:1px solid var(--uq-border)}
.uq-sitemap__group>summary,.uq-sitemap__branch>summary{list-style:none;cursor:pointer}
.uq-sitemap__group>summary::-webkit-details-marker,
.uq-sitemap__branch>summary::-webkit-details-marker{display:none}
.uq-sitemap__grouptitle{display:flex;align-items:center;gap:10px;padding:14px 0;margin:0;
  font-size:18px;line-height:24px;font-weight:700;border:0}
.uq-sitemap__grouptitle::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;line-height:1}
.uq-sitemap__group[open]>.uq-sitemap__grouptitle::after{content:"−"}
.uq-sitemap__groupbody,.uq-sitemap__branchbody{padding:0 0 16px}

.uq-sitemap__summary{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:14px;line-height:20px}
.uq-sitemap__summary::after{content:"+";margin-left:auto;color:var(--uq-text-2);font-size:15px;line-height:1}
.uq-sitemap__branch[open]>.uq-sitemap__summary::after{content:"−"}
.uq-sitemap__summary:hover .uq-sitemap__name{text-decoration:underline}
.uq-sitemap__name{color:#000}
.uq-sitemap__meta{font-size:12px;color:var(--uq-text-2);font-weight:400}
.uq-sitemap__leaf{display:flex;align-items:baseline;gap:8px;padding:7px 0}
.uq-sitemap__all{display:inline-block;margin:4px 0 8px;font-size:13px;color:var(--uq-text-2);text-decoration:underline}
.uq-sitemap__all:hover{color:#000}

/* ---- Contact form (visual preview; no endpoint yet) ------------------------------- */
.uq-contact{max-width:640px;margin:0 0 32px;padding:24px;background:#f4f4f4}
.uq-contact__row{display:flex;gap:16px}
.uq-contact__row .uq-field{flex:1;min-width:0}
.uq-contact .uq-field>span em{font-style:normal;color:var(--uq-text-3)}
.uq-contact .uq-field input,.uq-contact .uq-field select,.uq-contact .uq-field textarea{background:#fff}
/* disabled while the form is a preview — keep it readable, not greyed into illegibility */
.uq-contact .uq-field input:disabled,.uq-contact .uq-field select:disabled,
.uq-contact .uq-field textarea:disabled{color:var(--uq-text-3);-webkit-text-fill-color:var(--uq-text-3);opacity:1;cursor:not-allowed}
.uq-contact__notice{margin:4px 0 16px;padding:12px 14px;background:#fff;border-left:3px solid #000;
  font-size:13px;line-height:19px;color:var(--uq-text-2)}
.uq-contact__notice a{color:#000;text-decoration:underline}
.uq-contact__submit{width:100%;height:52px;background:#000;color:#fff;border:0;border-radius:999px;
  font-size:15px;line-height:18px;cursor:pointer}
.uq-contact__submit:disabled{background:#c4c4c4;cursor:not-allowed}
@media(max-width:600px){ .uq-contact{padding:16px} .uq-contact__row{flex-direction:column;gap:0} }

/* ---------------------------------------------------------------------------
 * Editorial / policy pages (page.php) — İade, Gizlilik, SSS, Kurumsal…
 * These render raw post_content, which had no styling at all: headings, lists
 * and <details> came out at browser defaults. Selectors here are new, so
 * appending at the end of the file cannot override an earlier media query.
 * ------------------------------------------------------------------------- */
.uq-page__content{max-width:760px;font-size:15px;line-height:1.75;color:var(--uq-ink)}
.uq-page__content > *:first-child{margin-top:0}
.uq-page__content p{margin:0 0 16px}
.uq-page__content h2{font-family:var(--uq-font-body);font-size:20px;font-weight:700;line-height:1.35;margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--uq-border)}
.uq-page__content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.uq-page__content h3{font-family:var(--uq-font-body);font-size:16px;font-weight:700;line-height:1.4;margin:24px 0 8px}
.uq-page__content ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.uq-page__content ol{margin:0 0 16px;padding-left:20px;list-style:decimal}
.uq-page__content li{margin-bottom:6px}
.uq-page__content a{color:var(--uq-ink);text-decoration:underline;text-underline-offset:2px}
.uq-page__content a:hover{color:var(--uq-text-2)}
.uq-page__content strong{font-weight:700}

/* FAQ rows: native <details>, styled as the accordion used elsewhere. */
.uq-page__content details{border-bottom:1px solid var(--uq-border)}
.uq-page__content h2 + details,.uq-page__content h3 + details{border-top:1px solid var(--uq-border)}
.uq-page__content summary{position:relative;list-style:none;cursor:pointer;padding:16px 40px 16px 0;font-size:15px;font-weight:700;line-height:1.4}
.uq-page__content summary::-webkit-details-marker{display:none}
.uq-page__content summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:1.5px solid var(--uq-ink);border-bottom:1.5px solid var(--uq-ink);transform:rotate(45deg);transition:transform .2s ease}
.uq-page__content details[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
.uq-page__content summary:hover{color:var(--uq-text-2)}
.uq-page__content details > *:not(summary){margin-left:0}
.uq-page__content details p:last-child{margin-bottom:16px}

@media (max-width:768px){
  .uq-page__content{font-size:14px}
  .uq-page__content h2{font-size:18px;margin-top:32px}
}

/* Two-part size picking (bra: göğüs altı + kap). One <div> per group with its own
   label, so the two radiogroups never read as one long list. */
.uq-pdp__sizegroup{margin-bottom:14px}
.uq-pdp__sizegroup:last-of-type{margin-bottom:0}
.uq-pdp__sizegroup-label{display:block;margin-bottom:6px;font-size:13px;color:var(--uq-text-2)}
.uq-pdp__sizegroup-label em{font-style:normal;color:var(--uq-text-3)}

/* ---------------------------------------------------------------------------
 * "Sepete eklendi" panel. A confirmation, not a mini-cart: it slides in from the
 * right, never locks the page scroll, and closes itself. Selectors are new, so
 * appending here cannot override an earlier media query.
 * ------------------------------------------------------------------------- */
.uq-added{position:fixed;inset:0;z-index:80;pointer-events:none}
.uq-added__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.18);opacity:0;transition:opacity .28s ease}
.uq-added.is-open .uq-added__backdrop{opacity:1;pointer-events:auto}
.uq-added__panel{position:absolute;top:0;right:0;width:min(392px,100vw);max-height:100vh;overflow-y:auto;
  background:var(--uq-white);box-shadow:0 8px 32px rgba(0,0,0,.18);padding:20px;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);pointer-events:auto}
.uq-added.is-open .uq-added__panel{transform:translateX(0)}

.uq-added__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.uq-added__title{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700}
.uq-added__tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#1b7f3b;color:#fff;flex:0 0 auto}
.uq-added__x{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;background:none;color:var(--uq-ink);cursor:pointer;margin:-6px -6px -6px 0}
.uq-added__x:hover{color:var(--uq-text-2)}

.uq-added__item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:start;
  padding-bottom:16px;border-bottom:1px solid var(--uq-border)}
.uq-added__img{width:72px;height:96px;object-fit:cover;background:var(--uq-gray-bg)}
.uq-added__meta{min-width:0}
.uq-added__name{margin:0 0 4px;font-size:14px;line-height:1.35}
.uq-added__vars,.uq-added__qty{margin:0;font-size:12px;color:var(--uq-text-2);line-height:1.5}
.uq-added__price{font-size:14px;font-weight:700;white-space:nowrap}

.uq-added__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;font-size:14px}
.uq-added__actions{display:grid;gap:10px}
.uq-added__go{width:100%;height:48px;display:inline-flex;align-items:center;justify-content:center}
.uq-added__keep{height:44px;border:1px solid var(--uq-border);background:none;border-radius:var(--uq-radius-pill);
  font-size:14px;cursor:pointer;color:var(--uq-ink)}
.uq-added__keep:hover{background:var(--uq-gray-bg)}

@media (max-width:768px){
  /* full width, and anchored to the bottom where the thumb is */
  .uq-added__panel{top:auto;bottom:0;width:100%;border-radius:12px 12px 0 0;
    transform:translateY(100%);padding:16px}
  .uq-added.is-open .uq-added__panel{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .uq-added__panel,.uq-added__backdrop{transition:none}
}

/* Category panel: the selected path is a caption, and the category you are actually
   looking at is marked with an underline — it used to be a readonly <input>, which the
   browser drew as a grey inset box that also clipped the longer names. */
.uq-fpanel__path{margin:0 0 8px;font-size:12px;line-height:1.4;color:var(--uq-text-2)}
.uq-fopt--link{text-decoration:none;color:var(--uq-ink)}
.uq-fopt--link:hover .uq-fopt__label{text-decoration:underline;text-underline-offset:3px}
.uq-fopt--link.is-active .uq-fopt__label{font-weight:700;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:4px}

/* The Sıralama button itself goes bold while its list is open, so it is obvious which
   control the panel belongs to. The chosen criterion inside the list is underlined
   instead of bold — bold on both read as two selections. */
.uq-sort__btn[aria-expanded="true"]{font-weight:700}