/* ==========================================================================
   Nairomart additions to the Modern design: Help Center panel, "Landing Page" menu link, brand text
   (the same rules as the Nairomart storefront, nairomart.css)
   ========================================================================== */
.brand span b,
.fbr span b { color: var(--or); font-weight: 800; }
.brand span { font: 800 28px/1 Poppins, sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.fbr img { height: 38px; width: auto; }
.fbr span { font: 800 24px/1 Poppins, sans-serif; color: #fff; letter-spacing: -0.03em; }
a.hc-r { text-decoration: none; }

/* ===== Help Center panel (opened from the menu) ===== */
.mb.hcm { padding: 0; overflow: hidden; width: min(430px, 100%); border-radius: 22px; box-shadow: 0 30px 70px -20px #000a; }
.hcm > .x { top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: #ffffff2e; color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.hc-h { background: linear-gradient(135deg, #f26b0f, #e05a05); color: #fff; padding: 28px 64px 24px 28px; }
.hc-h h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: #fff; }
.hc-h p { margin: 0; opacity: 0.95; font-size: 15px; }
.hc-l { padding: 10px 14px 16px; display: grid; }
.hc-r { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 12px; border-radius: 14px; text-align: left; background: none; color: inherit; font: inherit; cursor: pointer; transition: background 0.15s; }
.hc-r:hover, .hc-r:focus-visible { background: #fff6ee; }
.hc-i { flex: none; width: 52px; height: 52px; border-radius: 15px; background: #fff1e6; display: grid; place-items: center; color: #f26b0f; }
.hc-i svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-r.hc-wa .hc-i { color: #1fb85a; }
.hc-t { display: flex; flex-direction: column; min-width: 0; }
.hc-t b { font-size: 16.5px; font-weight: 700; color: #0f172a; }
.hc-t small { font-size: 14px; color: #6b7280; margin-top: 2px; }

/* optional "Landing Page" menu link */
.mi-landing,
.ni > a.lp-nav-a {
  color: #f26b0f;
  font-weight: 700;
}

/* Top menu: a hover answers like the active link (orange text, the orange line grows in) */
.ni > a { transition: color 0.2s; }
.ni > a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or); transform: scaleX(0); transition: transform 0.25s; }
.ni > a:hover, .ni:hover > a { color: var(--or); }
.ni > a:hover:after, .ni:hover > a:after, .ni.on > a:after { transform: scaleX(1); }

/* Shop: the list while the next filter result loads (modern.js shopGo) */
/* No dimming or fade: the list is swapped quietly once its pictures are in (modern.js shopGo) */
[data-nm-shop].nm-ld #sg { pointer-events: none; }

/* "Purchased" product of a home review is a link */
a.rp { color: inherit; text-decoration: none; }

/* Size pop-up of a product card: the sizes are radio buttons (partials/card-sizes) */
label.szb { position: relative; cursor: pointer; }
label.szb input { position: absolute; opacity: 0; pointer-events: none; }
label.szb:has(input:checked) { background: var(--or); border-color: var(--or); color: #fff; }
label.szb:has(input:checked) small { color: #fff; }
label.szb:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
label.szb:has(input:disabled) { opacity: 0.5; cursor: not-allowed; background: #f4f4f4; text-decoration: line-through; }
label.szb:has(input:disabled) small { color: #c0392b; text-decoration: none; }

/* Home: New Collection (hanging rack), from the design; its product pop-up is the card size pop-up */
.hr-wrap{overflow-x:auto;overflow-anchor:none;padding-top:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding-bottom:calc(var(--h)*.14)}.hr-wrap::-webkit-scrollbar{display:none}
.hr-row{display:flex;justify-content:center;align-items:flex-start;gap:calc(var(--h)*.16)}
.hr-it{all:unset;cursor:pointer;position:relative;flex:none;width:calc(var(--h)*.42);height:var(--h);transition:width .6s cubic-bezier(.3,.8,.3,1);opacity:0;animation:hrf .9s ease forwards;animation-delay:calc(var(--i)*.1s);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@keyframes hrf{to{opacity:1}}
.hr-it img{position:absolute;top:0;left:50%;height:var(--h);width:auto;max-width:none;transform:translateX(-50%);transition:opacity .45s ease,transform .9s cubic-bezier(.3,1.45,.5,1)}
.hr-it img{transform-origin:50% 0;pointer-events:none;-webkit-user-drag:none;will-change:transform}
.hr-it{--sc:1}.hr-it.on{--sc:1.1;z-index:3}
.hr-sw{position:absolute;inset:0;transform-origin:50% 0}
.hr-it .s{opacity:1;transform:translateX(-50%) scale(1) scaleX(1);transition:transform .45s cubic-bezier(.2,.8,.3,1) .26s,opacity 0s}
.hr-it .f{opacity:.01;transform:translateX(-50%) scale(1) scaleX(0);transition:transform .28s cubic-bezier(.5,0,.9,.6),opacity 0s .28s}
.hr-it.on .s{opacity:.01;transform:translateX(-50%) scale(1) scaleX(0);transition:transform .28s cubic-bezier(.5,0,.9,.6),opacity 0s .28s}
.hr-it.on .f{opacity:1;transform:translateX(calc(-50% + var(--nx,0px))) scale(var(--sc)) scaleX(1);transition:transform .45s cubic-bezier(.2,.8,.3,1) .26s,opacity 0s}
.hr-it.on .hr-sw{animation:hrsw 1.6s ease-out .1s both}.hr-it.bk .hr-sw{animation:hrsw2 1.6s ease-out .1s both}
@keyframes hrsw{0%{transform:rotate(-7deg)}28%{transform:rotate(5deg)}54%{transform:rotate(-3deg)}78%{transform:rotate(1.2deg)}100%{transform:rotate(0)}}
@keyframes hrsw2{0%{transform:rotate(6deg)}28%{transform:rotate(-4deg)}54%{transform:rotate(2.2deg)}78%{transform:rotate(-.8deg)}100%{transform:rotate(0)}}
@media (hover:hover){.hr-it:hover,.hr-it:focus-visible{width:calc(var(--h)*.95);z-index:3}
.hr-it:hover .s,.hr-it:focus-visible .s{opacity:.01;transform:translateX(-50%) scale(1) scaleX(0);transition:transform .28s cubic-bezier(.5,0,.9,.6),opacity 0s .28s}
.hr-it:hover .f,.hr-it:focus-visible .f{opacity:1;transform:translateX(-50%) scale(1) scaleX(1);transition:transform .45s cubic-bezier(.2,.8,.3,1) .26s,opacity 0s}
.hr-it:hover .hr-sw,.hr-it:focus-visible .hr-sw{animation:hrsw 1.6s ease-out .1s both}}
.hr-it:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.hr-it{animation:none;opacity:1}.hr-it img{transition:none}}
.hr{--h:min(340px,23vw);position:relative;overflow:hidden;background-color:#fff6ec;background-image:radial-gradient(circle at 10% 72%,#ffdfb9 0,#ffdfb900 24%),radial-gradient(circle at 92% 58%,#ffd9ad 0,#ffd9ad00 30%),linear-gradient(180deg,#fff9f2 0%,#fdecd8 72%,#fae0c2 100%);border:1px solid #fbd9ae;border-radius:24px;padding:clamp(18px,2.4vw,30px) 0 clamp(18px,2.4vw,28px);text-align:center;color:#1a1a1a;box-shadow:0 14px 34px #f7931e1a}
.hr-wm{position:absolute;right:3%;top:40%;font-family:'Segoe Script','Brush Script MT','Lucida Handwriting',cursive;font-size:clamp(30px,4.6vw,70px);color:#f7931e;opacity:.3;transform:rotate(-12deg);pointer-events:none;white-space:nowrap}
.hr-hd{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;text-align:left;padding:0 clamp(18px,3vw,46px)}
.hr-eb{display:flex;align-items:center;gap:14px}.hr-eb span{background:linear-gradient(90deg,#f7931e,#f26b0f);color:#fff;font-weight:700;font-size:clamp(11px,1.15vw,16px);letter-spacing:.06em;text-transform:uppercase;padding:5px 16px;border-radius:999px}.hr-eb i{width:clamp(24px,3vw,46px);height:2px;background:#f26b0f}
.hr-hd h2{font-size:clamp(28px,4.2vw,58px);font-weight:800;line-height:1.05;margin:clamp(6px,1vw,12px) 0 6px;color:#1a1a1a;letter-spacing:-.01em}.hr-hd h2 span{color:#f26b0f}
.hr-hd p{color:#444;font-size:clamp(13px,1.25vw,18px);margin:0}
.hr-va{flex:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid #f26b0f;color:#1a1a1a;font-weight:600;font-size:clamp(13px,1.2vw,17px);border-radius:999px;padding:10px 24px;background:#ffffffb3;transition:.2s}.hr-va:hover{background:#fff}.hr-va .i{width:20px;height:20px;color:#f26b0f}
.hr-rack{position:relative;width:max-content;margin:0 auto;padding:0 calc(var(--h)*.42) calc(var(--h)*.16)}
.hr-st{position:relative;z-index:1}
/* the floor the rack stands on */
.hr-st:before{content:"";position:absolute;left:0;right:0;bottom:-30px;height:calc(var(--h)*.16 + 40px);background:linear-gradient(#f3d6b5,#fbe6d0 45%,#fff2e400);opacity:.6;pointer-events:none;z-index:-1}
/* The rack: a black bar with end caps on two posts with feet */
.hr-rod{position:absolute;top:2px;left:calc(var(--h)*.16 - 10px);right:calc(var(--h)*.16 - 10px);height:9px;border-radius:5px;background:linear-gradient(#444,#111 60%,#2a2a2a);pointer-events:none;z-index:2}
.hr-rod:before,.hr-rod:after{content:"";position:absolute;top:-6px;width:16px;height:21px;background:#1a1a1a;border-radius:4px}.hr-rod:before{left:0}.hr-rod:after{right:0}
.hr-po{position:absolute;top:4px;bottom:6px;width:9px;background:linear-gradient(90deg,#3a3a3a,#111 55%,#2b2b2b);border-radius:4px;pointer-events:none}.hr-po.l{left:calc(var(--h)*.16 - 6px)}.hr-po.r{right:calc(var(--h)*.16 - 6px)}
.hr-po:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:36px;height:11px;border-radius:6px;background:#1a1a1a}
.hr-tag{position:absolute;top:calc(var(--h)*.13);left:calc(50% + var(--h)*.03);z-index:4;background:linear-gradient(90deg,#f7931e,#f26b0f);color:#fff;border-radius:999px;padding:3px 11px;font-size:clamp(10px,1vw,14px);font-weight:700;pointer-events:none;white-space:nowrap;box-shadow:0 4px 10px #f26b0f55}
.hr-cap{position:relative;z-index:2;margin-top:clamp(4px,1vh,12px)}
.hr-cl{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 16px}.hr-cl:before,.hr-cl:after{content:"";flex:0 1 clamp(30px,8vw,110px);height:1.5px;background:#3a3a3a}
.hr-cap h3{font-size:clamp(13px,1.3vw,18px);font-weight:600;color:#333;margin:0;min-height:1.5em}.hr-cap h3 b{color:#f26b0f;font-weight:700;margin-left:6px}
.hr-btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(10px,1.4vw,16px);background:linear-gradient(90deg,#f7931e,#f26b0f);color:#fff;border-radius:999px;padding:clamp(11px,1.2vw,15px) clamp(24px,2.6vw,38px);font-size:clamp(14px,1.3vw,18px);font-weight:700;box-shadow:0 10px 22px #f26b0f40;transition:.2s}.hr-btn:hover{color:#fff;filter:brightness(1.05);transform:translateY(-1px)}.hr-btn .i{width:22px;height:22px}
.hr-trs{display:flex;justify-content:center;flex-wrap:wrap;row-gap:8px;margin-top:clamp(12px,1.5vw,18px)}.hr-trs span{display:flex;align-items:center;gap:8px;padding:0 clamp(12px,2vw,26px);font-size:clamp(12px,1.1vw,15px);color:#333;font-weight:500}
.hr-trs span+span{border-left:2px solid #f26b0f}.hr-trs .i{width:24px;height:24px;color:#f26b0f;flex:none}
@media (max-width:760px){.hr{--h:calc((100vw - 30px)/1.28);border-radius:18px}.hr-wm{display:none}.hr-hd{flex-direction:column;gap:10px}.hr-va{padding:8px 18px}.hr-trs span{padding:0 10px}.hr-cl:before,.hr-cl:after{display:none}}
/* Background picture with its own rack (Settings → General → New Collection rack): the section keeps the picture's 1672 × 941
   shape and every place is a part of its width (cqw), so the clothes hang on the picture's rod at any screen width */
@media (min-width:761px){
    .hr.hr-own{container-type:inline-size;aspect-ratio:1672/941;--h:26cqw;padding:0}
    .hr-own .hr-rod,.hr-own .hr-po,.hr-own .hr-st:before{display:none}
    .hr-own .hr-hd{position:absolute;top:2.8cqw;left:0;right:0;padding:0 4.6cqw}
    .hr-own .hr-eb span{font-size:max(10px,1.15cqw);padding:.35cqw 1.1cqw}.hr-own .hr-eb i{width:2.6cqw}
    .hr-own .hr-hd h2{font-size:max(22px,3.6cqw);margin:.6cqw 0 .3cqw}.hr-own .hr-hd p{font-size:max(11px,1.25cqw)}
    .hr-own .hr-va{font-size:max(11px,1.15cqw);padding:.7cqw 1.7cqw;margin-top:.5cqw}
    .hr-own .hr-st{position:absolute;top:12.2cqw;left:18.4cqw;right:18.4cqw}
    .hr-own .hr-wrap{padding:0}.hr-own .hr-rack{padding:0}.hr-own .hr-row{gap:1.8cqw;justify-content:safe center}
    .hr-own .hr-tag{font-size:max(9px,1cqw);padding:.2cqw .75cqw}
    .hr-own .hr-cap{position:absolute;left:0;right:0;top:42.6cqw;margin:0}
    .hr-own .hr-cap h3{font-size:max(11px,1.3cqw)}
    .hr-own .hr-btn{font-size:max(11px,1.25cqw);padding:.9cqw 2.4cqw;margin-top:1cqw}.hr-own .hr-btn .i{width:1.5cqw;height:1.5cqw}
    .hr-own .hr-trs{margin-top:1.1cqw}.hr-own .hr-trs span{font-size:max(10px,1.05cqw);padding:0 1.6cqw}.hr-own .hr-trs .i{width:1.6cqw;height:1.6cqw}
}
/* phones: the title above, the whole picture (never cut) with the clothes on its rod, the button and lines below */
@media (max-width:760px){
    .hr.hr-own{background:var(--rc,#fff6ec)!important}
    .hr-own .hr-st{container-type:inline-size;--h:26cqw;aspect-ratio:1672/941;margin:14px 0 6px;background:var(--rimg) center / 100% 100% no-repeat}
    .hr-own .hr-rod,.hr-own .hr-po,.hr-own .hr-st:before{display:none}
    .hr-own .hr-wrap{position:absolute;top:12.2cqw;left:18.4cqw;right:18.4cqw;padding:0}.hr-own .hr-rack{padding:0}.hr-own .hr-row{gap:1.8cqw;justify-content:safe center}
    .hr-own .hr-tag{font-size:max(8px,2.4cqw);padding:.3cqw 1.4cqw}
}
.hr-act{display:none}

/* New Collection pop-up, as the design picture (1455 × 920): every size is a part of that picture (--u = 1 px of it),
   so the whole pop-up grows / shrinks together and always fits the screen. Data: the product form */
.hr-mo{--card:#fdf3e6;--u:min(calc(min(1180px, 94vw) / 1455), calc((100vh - 40px) / 920));position:fixed;inset:0;z-index:110;background:#0009;display:none;place-items:center;padding:20px;overflow:auto}
.hr-mo.open{display:grid;animation:hrf2 .25s}@keyframes hrf2{from{opacity:0}}
.hr-md{position:relative;background:#fff;color:#1a1a1a;border-radius:calc(var(--u)*40);width:calc(var(--u)*1455);display:grid;grid-template-columns:calc(var(--u)*676) 1fr;column-gap:calc(var(--u)*64);padding:calc(var(--u)*44) calc(var(--u)*40) calc(var(--u)*26) calc(var(--u)*48);box-shadow:0 30px 80px #0006}
.hr-x{position:absolute;top:calc(var(--u)*38);right:calc(var(--u)*38);z-index:2;width:calc(var(--u)*62);height:calc(var(--u)*62);border-radius:50%;border:1.5px solid #e4e4e4;background:#fff;display:grid;place-items:center;color:#1a1a1a;cursor:pointer;transition:background .2s}
.hr-x:hover{background:#f6f6f6}.hr-x svg{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.hr-gal{min-width:0}
.hr-pt{display:flex;gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*16)}
.hr-pt button{height:calc(var(--u)*58);padding:0 calc(var(--u)*36);border:1.5px solid #ececec;background:#fff;border-radius:999px;font-weight:600;font-size:calc(var(--u)*24);color:#1a1a1a;cursor:pointer;transition:.2s}
.hr-pt button[aria-pressed="true"]{background:#f7931e;border-color:#f7931e;color:#fff;box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) #f7931e55}
.hr-v{position:relative;background:var(--card);border-radius:calc(var(--u)*28);height:calc(var(--u)*640)}
.hr-v img{position:absolute;inset:calc(var(--u)*16);width:calc(100% - var(--u)*32);height:calc(100% - var(--u)*32);object-fit:contain;transition:opacity .35s}
.hr-v:fullscreen{background:#fff;border-radius:0;height:100%}
.hr-zm{position:absolute;top:calc(var(--u)*20);right:calc(var(--u)*28);z-index:1;width:calc(var(--u)*58);height:calc(var(--u)*58);border-radius:calc(var(--u)*16);border:0;background:#ffffffe6;display:grid;place-items:center;color:#1a1a1a;cursor:pointer}
.hr-zm svg{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.hr-th{display:flex;align-items:center;justify-content:space-between;margin-top:calc(var(--u)*18)}.hr-th[hidden]{display:none}
#hrTh{display:flex;gap:calc(var(--u)*20);justify-content:center;flex:1;min-width:0}
#hrTh button{width:calc(var(--u)*124);height:calc(var(--u)*120);padding:calc(var(--u)*8);border:calc(var(--u)*2.5) solid #efe3d3;border-radius:calc(var(--u)*16);background:var(--card);cursor:pointer;transition:border-color .2s}
#hrTh img{width:100%;height:100%;object-fit:contain}#hrTh button[aria-pressed="true"]{border-color:#f7931e}
.hr-nv{width:calc(var(--u)*62);height:calc(var(--u)*62);flex:none;border-radius:50%;border:1.5px solid #e4e4e4;background:#fff;display:grid;place-items:center;color:#1a1a1a;cursor:pointer}
.hr-nv svg{width:calc(var(--u)*28);height:calc(var(--u)*28)}
#hrForm{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:calc(var(--u)*26)}
.hr-bd{display:inline-flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*42);padding:0 calc(var(--u)*18);background:#fff0dc;color:#e8650a;font-weight:600;font-size:calc(var(--u)*20);border-radius:999px;margin-bottom:calc(var(--u)*18)}
.hr-bd[hidden]{display:none}.hr-bd svg{width:calc(var(--u)*24);height:calc(var(--u)*24)}.hr-bd[data-k="new"] svg{display:none}
.hr-md h4{font-size:calc(var(--u)*42);line-height:1.15;font-weight:800;margin:0;letter-spacing:-.01em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hr-md #hrForm>u{display:block;width:calc(var(--u)*78);height:calc(var(--u)*4);background:#f7931e;margin:calc(var(--u)*16) 0 calc(var(--u)*20)}
.hr-pr{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*14) calc(var(--u)*40);margin-bottom:calc(var(--u)*22)}
.hr-pr b{font-size:calc(var(--u)*50);font-weight:800;color:#f7811e;line-height:1}
.hr-pr s{font-size:calc(var(--u)*24);color:#8a8a8a;font-weight:600;margin-left:calc(var(--u)*-16)}
.hr-pr em{font-style:normal;background:#ffe1e1;color:#e0242f;font-weight:700;font-size:calc(var(--u)*22);padding:calc(var(--u)*8) calc(var(--u)*18);border-radius:999px;margin-left:calc(var(--u)*-16)}
.hr-pr s[hidden],.hr-pr em[hidden]{display:none}
.hr-ds{color:#4b4b4b;font-size:calc(var(--u)*21);line-height:1.6;margin:0 0 calc(var(--u)*22);width:100%;overflow-wrap:anywhere}.hr-ds{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hr-ds[hidden]{display:none}
.hr-lb{font-size:calc(var(--u)*21);color:#1a1a1a;font-weight:700;width:100%;border-top:1px solid #ececec;padding-top:calc(var(--u)*22)}
.hr-sz{display:flex;flex-wrap:wrap;gap:calc(var(--u)*14);margin:calc(var(--u)*14) 0 calc(var(--u)*26);border-radius:10px}
.hr-sz button{min-width:calc(var(--u)*70);height:calc(var(--u)*56);padding:0 calc(var(--u)*12);border:calc(var(--u)*2) solid #e3e3e3;border-radius:calc(var(--u)*12);background:#fff;font-weight:700;font-size:calc(var(--u)*21);color:#1a1a1a;cursor:pointer;transition:.2s}
.hr-sz button[aria-pressed="true"]{border-color:#f7931e;background:#fff4e6;color:#e8650a}
.hr-sz button:disabled{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.hr-ad{width:100%;height:calc(var(--u)*72);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*14);background:linear-gradient(90deg,#f7931e,#f48514);color:#fff;border:0;border-radius:999px;font-weight:700;font-size:calc(var(--u)*26);cursor:pointer;box-shadow:0 calc(var(--u)*14) calc(var(--u)*28) #f7931e55;transition:.2s}
.hr-ad:hover{filter:brightness(1.05);transform:translateY(-1px)}.hr-ad .i{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.hr-tr{display:flex;width:100%;margin-top:calc(var(--u)*26)}
.hr-tr span{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*14);color:#333}
.hr-tr span+span{border-left:1.5px solid #e6e6e6}
.hr-tr em{font-style:normal;font-size:calc(var(--u)*19);font-weight:500;line-height:1.15;max-width:calc(var(--u)*122)}
.hr-tr .i{width:calc(var(--u)*32);height:calc(var(--u)*32);flex:none}
.hr-tr .hr-tr-w{flex:1.35}.hr-tr .hr-tr-w em{max-width:calc(var(--u)*190)}
/* Phones and narrow screens: one column, a sheet from the bottom, the same look */
@media (max-width:760px){
    .hr-mo{--u:calc(100vw / 720);place-items:end center;padding:0}
    .hr-md{width:100%;grid-template-columns:1fr;row-gap:calc(var(--u)*30);border-radius:calc(var(--u)*40) calc(var(--u)*40) 0 0;max-height:92vh;overflow:auto;padding:calc(var(--u)*40) calc(var(--u)*32);animation:hrup .3s cubic-bezier(.2,.8,.2,1)}
    .hr-v{height:auto;aspect-ratio:676/640}
    #hrForm{padding-top:0}
}
@keyframes hrup{from{transform:translateY(40px);opacity:0}}

/* rack carousel: the row slides along the rod (--tx from nairomart-rack.js); the ones off the rod fade out. When a hoodie opens
   (wider), the row moves back by half of it so the open one never runs past the posts */
.hr-sc .hr-wrap,.hr-own .hr-wrap{overflow:visible}
.hr-sc .hr-wrap{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hr-sc .hr-row{justify-content:flex-start;transform:translateX(calc(var(--tx,0px) - var(--ex,0px) / 2));transition:transform .6s cubic-bezier(.3,.8,.3,1)}
@media (hover:hover){.hr-sc .hr-row:has(.hr-it:not(.out):hover,.hr-it:not(.out):focus-visible){--ex:calc(var(--h)*.53)}}
.hr-it{transition:width .6s cubic-bezier(.3,.8,.3,1),filter .45s ease}.hr-it.out{filter:opacity(0);pointer-events:none}
.hr-nav{display:none;position:absolute;z-index:5;top:calc(22px + var(--h) + 4px);left:50%;width:30px;height:30px;border-radius:50%;border:0;padding:0;background:linear-gradient(135deg,#f7931e,#f26b0f);color:#fff;box-shadow:0 4px 12px #f26b0f55;cursor:pointer;align-items:center;justify-content:center;transition:opacity .2s}
.hr-nav .i{width:58%;height:58%;stroke-width:3.6}.hr-nav.p .i{transform:scaleX(-1)}.hr-nav.p{margin-left:-36px}.hr-nav.n{margin-left:6px}
.hr-nav:disabled{opacity:.35;cursor:default}.hr-sc .hr-nav{display:flex}
@media (min-width:761px){.hr-own .hr-nav{top:calc(var(--h) + .9cqw);width:max(24px,2.2cqw);height:max(24px,2.2cqw)}.hr-own .hr-nav.p{margin-left:calc(-1 * max(24px,2.2cqw) - .4cqw)}.hr-own .hr-nav.n{margin-left:.4cqw}}
@media (max-width:760px){.hr-own .hr-nav{top:calc(12.2cqw + var(--h) + 7cqw);width:24px;height:24px}.hr-own .hr-nav.p{margin-left:-27px}.hr-own .hr-nav.n{margin-left:3px}}