/* ─────────────────────────────────────────────────────────────────────────────
   10/27: product listing (/hats, /hats/{brand}) and product pages (/hats/{brand}/{style}).
   Same look as the new ordering process. Everything is under .pl so nothing leaks.
   ───────────────────────────────────────────────────────────────────────────── */
.pl { --ink: #17201a; --mut: #6b7280; --line: #e3e6ea; --soft: #f5f6f8; --green: #39b91c; --green-d: #2e8f16; --blue: #1350c1; --orange: #ff7a1a;
      font-family: Montserrat, Arial, sans-serif; color: var(--ink); background: #fff; text-align: left; }
.pl * { box-sizing: border-box; }
.pl img { display: block; }
.pl a { text-decoration: none; color: inherit; }
.pl .plWrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.pl .plCrumb { font-size: 12px; color: var(--mut); font-weight: 700; padding: 16px 0 0; }
.pl .plCrumb a { color: var(--mut); }
.pl .plCrumb a:hover { color: var(--ink); }
.pl .plCrumb b { color: var(--ink); }

/* buttons */
.pl .plBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); color: #fff; border: 0; border-radius: 10px; padding: 14px 22px; font: 800 15px Montserrat, Arial, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s; }
.pl .plBtn:hover { background: #f06a0a; color: #fff; }
.pl .plBtn.ghostW { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.pl .plBtn.ghostW:hover { background: rgba(255,255,255,.18); }
.pl .plBtn.blue { background: var(--blue); }
.pl .plBtn.blue:hover { background: #0f43a3; }

/* ── category hero ── */
.pl .plHero { position: relative; background: #111 center/cover no-repeat; color: #fff; }
.pl .plHero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,12,.92) 0%, rgba(10,14,12,.75) 55%, rgba(10,14,12,.35) 100%); }
.pl .plHero .plWrap { position: relative; padding-top: 54px; padding-bottom: 48px; }
.pl .plEyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fe07a; }
.pl .plHero h1 { font-size: 46px; line-height: 1.05; font-weight: 800; margin: 10px 0 12px; max-width: 660px; color: #fff; }
.pl .plHero p { font-size: 16px; line-height: 1.55; color: #d6dbd8; max-width: 580px; margin: 0 0 22px; font-weight: 600; }
.pl .plRow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pl .plTrust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.pl .plTrust div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #e6ebe8; }
.pl .plTrust i { width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-style: normal; color: #fff; font-size: 12px; }

/* brand logo strip */
.pl .plBrands { border-bottom: 1px solid var(--line); background: #fff; }
.pl .plBrands .plWrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; overflow-x: auto; }
.pl .plBrands a { flex: none; display: flex; align-items: center; justify-content: center; height: 48px; opacity: .75; transition: opacity .15s; }
.pl .plBrands a:hover { opacity: 1; }
.pl .plBrands img { height: 26px; width: auto; max-width: 200px; object-fit: contain; }
/* logos get their size from their shape (plFitLogos): wide ones shorter, compact ones taller, so they read as the same weight */

/* filter bar */
.pl .plFilters { position: sticky; top: 70px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); z-index: 5; }
.pl .plFilters .plWrap { display: flex; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; }
.pl .plChip { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 20px; padding: 8px 14px; font: 700 13px Montserrat, Arial, sans-serif; color: #374151; cursor: pointer; white-space: nowrap; }
.pl .plChip:hover { border-color: #c4c9d0; }
.pl .plChip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pl .plCount { margin-left: auto; flex: none; font-size: 12.5px; color: var(--mut); font-weight: 700; }

/* sections + grid */
.pl .plSec { padding: 34px 0 8px; scroll-margin-top: 140px; }
.pl .plSecHd { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pl .plSecHd > img { height: 30px; width: auto; max-width: 170px; object-fit: contain; flex: none; }
.pl .plSecHd > a { align-self: flex-end; }
.pl .plSecHd .t { flex: 1; min-width: 0; }
.pl .plSecHd h2 { margin: 0; font-size: 22px; font-weight: 800; }
.pl .plSecHd p { margin: 4px 0 0; font-size: 13.5px; color: var(--mut); font-weight: 600; }
.pl .plSecHd > a { font-size: 13px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.pl .plOwn { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #e7f6e2; color: var(--green-d); border-radius: 8px; padding: 3px 8px; margin-left: 8px; vertical-align: middle; }
.pl .plEmpty { display: none; padding: 40px 0; text-align: center; color: var(--mut); font-weight: 700; }

.pl .plGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pl .plCard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; position: relative; }
.pl .plCard:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
.pl .plCard .ph { aspect-ratio: 1/1; background: #f4f5f7; overflow: hidden; }
.pl .plCard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pl .plCard:hover .ph img { transform: scale(1.04); }
.pl .plCard .tag { position: absolute; top: 10px; left: 10px; background: var(--green); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; border-radius: 8px; padding: 4px 8px; z-index: 1; }
.pl .plCard .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pl .plCard .br { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.pl .plCard h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.pl .plCard .attrs { display: flex; flex-wrap: wrap; gap: 4px; }
.pl .plCard .attrs span { font-size: 10.5px; font-weight: 700; color: #374151; background: var(--soft); border-radius: 6px; padding: 3px 7px; }
.pl .plDots { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--mut); font-weight: 700; }
.pl .plDots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: #eee center/240% no-repeat; flex: none; }
.pl .plDots span { margin-left: 3px; }
.pl .plCard .pr { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.pl .plCard .pr b { font-size: 18px; font-weight: 800; }
.pl .plCard .pr small { font-size: 11.5px; color: var(--mut); font-weight: 700; }

/* help band + fun band */
.pl .plBand { margin: 40px 0 0; background: var(--soft); border-top: 1px solid var(--line); }
.pl .plBand .plWrap { padding-top: 30px; padding-bottom: 34px; display: flex; align-items: center; gap: 24px; }
.pl .plBand .t { flex: 1; }
.pl .plBand h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.pl .plBand p { margin: 0; color: var(--mut); font-size: 14px; font-weight: 600; line-height: 1.5; }
.pl .plFun { background: #111 center/cover no-repeat; position: relative; color: #fff; text-align: center; }
.pl .plFun::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.pl .plFun .plWrap { position: relative; padding-top: 40px; padding-bottom: 40px; }
.pl .plFun h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #fff; }
.pl .plFun p { margin: 0; color: #cfd5d1; font-weight: 600; }

/* ── brand page ── */
.pl .plBHero { position: relative; background: #fff center/cover no-repeat; }
.pl .plBHero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 46%, rgba(255,255,255,0) 72%); }
.pl .plBHero .plWrap { position: relative; padding-top: 6px; padding-bottom: 44px; }
.pl .plBHero .in { max-width: 580px; }
.pl .plBHero img.logo { height: 44px; width: auto; margin: 26px 0 16px; }
.pl .plBHero h1 { margin: 0 0 10px; font-size: 34px; font-weight: 800; line-height: 1.1; }
.pl .plBHero p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #374151; font-weight: 600; }
.pl .plStats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pl .plStats div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.pl .plStats b { display: block; font-size: 18px; font-weight: 800; }
.pl .plStats span { font-size: 11.5px; font-weight: 700; color: var(--mut); }

.pl .plStyles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pl .plSCard { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.pl .plSCard:hover { box-shadow: 0 14px 30px rgba(0,0,0,.10); transform: translateY(-2px); }
.pl .plSCard .ph { aspect-ratio: 4/3; background: #f4f5f7; overflow: hidden; }
.pl .plSCard .ph img { width: 100%; height: 100%; object-fit: cover; }
.pl .plSCard .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pl .plSCard h3 { margin: 0; font-size: 18px; font-weight: 800; }
.pl .plSw { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl .plSw i { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line); background: #f4f5f7 center/cover no-repeat; }
.pl .plSw span { font-size: 12px; color: var(--mut); font-weight: 700; margin-left: 4px; }
.pl .plFeat { display: flex; flex-wrap: wrap; gap: 6px; }
.pl .plFeat span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #374151; background: var(--soft); border-radius: 8px; padding: 5px 9px; }
.pl .plFeat span i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* product page spec icons (the black tiles from the old page, cleaned up) */
.pl .plSpecs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pl .plSpec { width: 84px; background: #111; color: #fff; border-radius: 12px; padding: 10px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pl .plSpec img { width: 40px; height: 40px; object-fit: contain; }
.pl .plSpec span { font-size: 10.5px; font-weight: 800; line-height: 1.2; }
.pl .plSpec.key { background: var(--green-d); }
.pl .plSCard .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.pl .plSCard .foot b { font-size: 20px; font-weight: 800; }
.pl .plSCard .foot small { display: block; font-size: 11.5px; color: var(--mut); font-weight: 700; }
.pl .plSCard .foot .plBtn { padding: 11px 16px; font-size: 13.5px; }
.pl .plGallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pl .plGallery a { display: block; }
.pl .plGallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; background: #f4f5f7; }

/* ── product page ── */
.pl .plPP { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 18px 0 40px; align-items: start; }
.pl .plGal { position: sticky; top: 86px; }
.pl .plGal .main { aspect-ratio: 1/1; background: #f4f5f7; border-radius: 16px; overflow: hidden; position: relative; }
.pl .plGal .main img { width: 100%; height: 100%; object-fit: cover; }
.pl .plGal .main.contain img { object-fit: contain; padding: 6%; }
.pl .plGal .main .plBadge { /* not .badge: site.css has a global .badge */ position: absolute; top: 14px; left: 14px; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pl .plGal .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 20px; font-weight: 800; color: var(--ink); cursor: pointer; display: none; }
.pl .plGal .nav.l { left: 12px; } .pl .plGal .nav.r { right: 12px; }
.pl .plGal .main.multi .nav { display: block; }
.pl .plThumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.pl .plThumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 2px solid transparent; background: #f4f5f7; cursor: pointer; }
.pl .plThumbs img.on { border-color: var(--blue); }

.pl .plInfo .brandPill img { height: 18px; width: auto; }
.pl .plInfo h1 { margin: 10px 0 6px; font-size: 32px; font-weight: 800; line-height: 1.1; }
.pl .plFrom { font-size: 15px; font-weight: 700; color: var(--mut); margin-bottom: 4px; }
.pl .plFrom b { color: var(--ink); font-size: 22px; font-weight: 800; }
.pl .plLbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: 18px 0 8px; }
.pl .plLbl b { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }
.pl .plColors { display: flex; gap: 8px; flex-wrap: wrap; }
.pl .plColors button { width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--line); background: #f4f5f7 center/cover no-repeat; cursor: pointer; padding: 0; }
.pl .plColors button.on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,80,193,.15); }

.pl .plSeg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--soft); border-radius: 12px; padding: 5px; }
.pl .plSeg button { border: 0; background: none; border-radius: 9px; padding: 10px 6px; font: 800 13px Montserrat, Arial, sans-serif; color: var(--mut); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl .plSeg button small { font-size: 11px; font-weight: 700; }
.pl .plSeg button.on { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pl .plNew { font-size: 9.5px; background: var(--orange); color: #fff; border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; font-style: normal; }

.pl .plPT { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px; table-layout: fixed; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pl .plPT th, .pl .plPT td { text-align: center; padding: 9px 2px; }
.pl .plPT th { background: var(--soft); font-size: 11.5px; font-weight: 800; color: var(--mut); }
.pl .plPT td { font-weight: 800; font-size: 15px; border-top: 1px solid var(--line); }
.pl .plPT .cur { background: #eef3ff; color: var(--blue); }
.pl .plPT td.na { color: #b9bec6; font-size: 12px; }
.pl .plNote { font-size: 12.5px; color: var(--mut); font-weight: 600; margin-top: 8px; line-height: 1.5; }
.pl .plNote b { color: var(--ink); }
.pl .plPvcNote { margin-top: 10px; background: #fff7ef; border: 1px solid #ffd9bd; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: #7a3d00; line-height: 1.5; }
.pl .plQty { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pl .plQty > span { font-size: 12.5px; font-weight: 700; color: var(--mut); }
.pl .plQty button { border: 1.5px solid var(--line); border-radius: 18px; padding: 6px 12px; font: 800 12.5px Montserrat, Arial, sans-serif; cursor: pointer; background: #fff; color: var(--ink); }
.pl .plQty button.on { border-color: var(--blue); color: var(--blue); background: #eef3ff; }
.pl .plQty .inCart { font-size: 12px; font-weight: 800; color: var(--green-d); }
.pl .plPerks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.pl .plPerks div { border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 12px; font-weight: 700; color: var(--mut); }
.pl .plPerks b { display: block; color: var(--ink); font-size: 13px; }
.pl .plCta { display: flex; gap: 10px; margin-top: 20px; }
.pl .plCta .plBtn { flex: 1; padding: 16px; font-size: 16px; }
.pl .plMini { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.pl .plMini span::before { content: '\2713\00a0'; color: var(--green); font-weight: 800; }
.pl .plExtra { font-size: 12px; color: var(--mut); font-weight: 600; margin-top: 6px; }

.pl .plDetails { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 6px 0 30px; border-top: 1px solid var(--line); }
.pl .plDetails h3 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.pl .plDetails p, .pl .plDesc { font-size: 14.5px; line-height: 1.65; color: #374151; margin: 0; font-weight: 500; }
.pl .plSizes { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pl .plSizes div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; font-weight: 700; }
.pl .plSizes div + div { border-top: 1px solid var(--line); }
.pl .plSizes span { color: var(--mut); text-align: right; }

/* screen print table (ShirtLaunch) in the new look */
.pl .plSP .priceTable { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
.pl .plSP .priceTable td { padding: 7px 2px; border-top: 1px solid var(--line); font-weight: 700; }
.pl .plSP .priceTableHeader td { background: var(--soft); color: var(--mut); font-size: 11.5px; font-weight: 800; }
.pl .plSP .currentPriceTier { background: #eef3ff; color: var(--blue); }
.pl .plSP .selectedCarrot { display: none; }
.pl .plSP .currentPriceTierText { color: var(--blue); font-size: 12.5px; }

/* mobile sticky bar */
.pl .plMBar { display: none; }

/* quantity drawer (the existing color / size picker) */
#plShade { position: fixed; inset: 0; background: rgba(17,24,20,.45); z-index: 2000; display: none; }
#plShade.on { display: block; }
.pl .hatStyleSetQty { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: #fff; z-index: 2001; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.2); }
.pl .hatStyleSetQty.on { display: flex; }
.pl .plDrawerHd { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.pl .plDrawerHd div { flex: 1; }
.pl .plDrawerHd h2 { margin: 0; font-size: 19px; font-weight: 800; }
.pl .plDrawerHd p { margin: 3px 0 0; font-size: 12.5px; color: var(--mut); font-weight: 600; }
.pl .plX { width: 32px; height: 32px; border-radius: 50%; background: #f2f4f7; border: 0; font-size: 20px; line-height: 1; font-weight: 700; color: var(--mut); cursor: pointer; flex: none; }
.pl .itemQuantityTable { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.pl .itemBlock { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pl .itemBlock.hasValue { border-color: var(--blue); background: #f7f9ff; }
.pl .hatPreviewImage { flex: none; }
.pl .hatPreviewImage img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #f4f5f7; }
.pl .hatPreviewImage .beanieColorCell { width: 56px; height: 56px; border-radius: 10px; }
.pl .itemColorName { flex: 1; min-width: 0; }
.pl .colorOption { font-weight: 800; font-size: 14px; }
.pl .sizeBlockHolder { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pl .sizeBlock { border: 1.5px solid var(--line); border-radius: 10px; padding: 5px 6px; text-align: center; min-width: 118px; }
.pl .sizeBlock:has(.colorQty.hasValue) { border-color: var(--blue); background: #eef3ff; }
.pl .sizeNameHolder { font-size: 11px; font-weight: 800; color: var(--mut); margin-bottom: 3px; }
.pl .sizeActionHolder { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pl .incrementButton input[type="button"] { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font: 800 16px Montserrat, Arial, sans-serif; cursor: pointer; padding: 0; color: var(--ink); }
.pl .incrementButton.disabled input[type="button"] { background: #eee; color: #aaa; cursor: default; }
.pl .colorQty { width: 46px; height: 30px; border: 1.5px solid var(--line); border-radius: 8px; text-align: center; font: 800 14px Montserrat, Arial, sans-serif; -moz-appearance: textfield; }
.pl .colorQty::-webkit-outer-spin-button, .pl .colorQty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl .colorQty.hasValue { border-color: var(--blue); color: var(--blue); }
.pl .plDrawerFt { border-top: 1px solid var(--line); padding: 14px 16px; display: flex; gap: 10px; align-items: center; }
.pl .plDrawerFt .tot { flex: 1; font-size: 12.5px; color: var(--mut); font-weight: 700; }
.pl .plDrawerFt .tot b { display: block; font-size: 17px; color: var(--ink); font-weight: 800; }
.pl #bottomAddToCartButtonInner { background: var(--orange); color: #fff; border-radius: 10px; padding: 14px 20px; font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap; }

/* cart updated popup */
#cartUpdatePopup { display: none; position: fixed; inset: 0; background: rgba(17,24,20,.45); z-index: 2005; }
#cartUpdatePopupInner { width: 420px; max-width: calc(100% - 32px); background: #fff; margin: 120px auto 0; border-radius: 16px; overflow: hidden; font-family: Montserrat, Arial, sans-serif; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
#cartUpdatePopupTop { padding: 26px 22px 18px; font-size: 20px; font-weight: 800; text-align: center; color: #17201a; }
#cartUpdatePopupBottom { display: flex; gap: 10px; padding: 0 18px 18px; }
#cartContinueShopping, #cartProceedPurchase { flex: 1; padding: 14px 10px; border-radius: 10px; text-align: center; cursor: pointer; font-weight: 800; font-size: 14px; }
#cartContinueShopping { border: 1.5px solid #e3e6ea; color: #17201a; }
#cartProceedPurchase { background: #ff7a1a; color: #fff; }

@media only screen and (max-width: 1100px) {
    .pl .plGrid { grid-template-columns: repeat(3, 1fr); }
    .pl .plPP { gap: 26px; }
}
@media only screen and (max-width: 900px) {
    .pl .plPP { grid-template-columns: 1fr; }
    .pl .plGal { position: static; }
    .pl .plStyles { grid-template-columns: 1fr 1fr; }
    .pl .plDetails { grid-template-columns: 1fr; gap: 0; }
}
@media only screen and (max-width: 750px) {
    .pl .plWrap { padding: 0 16px; }
    .pl .plHero .plWrap { padding-top: 30px; padding-bottom: 28px; }
    .pl .plHero h1 { font-size: 30px; }
    .pl .plHero p { font-size: 14px; }
    .pl .plHero .plBtn { flex: 1; }
    .pl .plTrust { gap: 10px; margin-top: 20px; flex-direction: column; }
    .pl .plBrands .plWrap { justify-content: flex-start; gap: 26px; }
    .pl .plBrands a { height: 36px; }
    .pl .plFilters { top: 62px; }
    .pl .plCount { display: none; }
    .pl .plSecHd { flex-wrap: wrap; }
    .pl .plSecHd p { display: none; }
    .pl .plGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pl .plCard h3 { font-size: 13px; }
    .pl .plCard .attrs { display: none; }
    .pl .plCard .pr b { font-size: 15px; }
    .pl .plCard .bd { padding: 10px; }
    .pl .plBand .plWrap { flex-direction: column; align-items: stretch; }
    .pl .plBHero::before { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.97) 34%); }
    .pl .plBHero .plWrap { padding-bottom: 26px; }
    .pl .plBHero img.logo { margin-top: 110px; }
    .pl .plBHero h1 { font-size: 24px; }
    .pl .plBHero p { font-size: 14px; }
    .pl .plStyles { grid-template-columns: 1fr; gap: 12px; }
    .pl .plGallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pl .plPP { padding-top: 10px; gap: 16px; }
    .pl .plInfo h1 { font-size: 24px; }
    .pl .plThumbs { grid-template-columns: repeat(5, 1fr); }
    .pl .plColors button { width: 52px; height: 52px; }
    .pl .plSpec { width: 74px; }
    .pl .plPT th { font-size: 10px; } .pl .plPT td { font-size: 12px; padding: 8px 0; }
    .pl .plCta { display: none; }
    .pl .plMBar { display: flex; position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(0,0,0,.08); padding: 10px 14px; gap: 10px; align-items: center; z-index: 6; }
    .pl .plMBar div { flex: 1; font-size: 11.5px; color: var(--mut); font-weight: 700; }
    .pl .plMBar div b { display: block; font-size: 18px; color: var(--ink); font-weight: 800; }
    .pl .plMBar .plBtn { padding: 13px 18px; }
    .pl .hatStyleSetQty { top: auto; width: 100%; height: 88vh; border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.2); }
    .pl .itemBlock { flex-wrap: wrap; }
    .pl .sizeBlockHolder { width: 100%; justify-content: flex-start; }
}