.filterbar{position:sticky;top:64px;z-index:80;background:#F2EEE4;border-top:2px solid #16130F;border-bottom:2px solid #16130F}
.filterbar .inner{max-width:1440px;margin:0 auto;padding:18px clamp(18px,4.5vw,64px)}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.frow+.frow{margin-top:12px}
.flabel{font-family:"DM Mono",ui-monospace,monospace;font-size:.62rem;text-transform:uppercase;color:#4A443B;width:70px;flex:none}
.chip{font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;text-transform:uppercase;border:1.5px solid #16130F;padding:8px 13px;border-radius:999px;background:#F2EEE4;transition:background .16s,color .16s,transform .1s;white-space:nowrap}
.chip:hover{transform:translateY(-1px)}
.chip.on{background:#16130F;color:#F2EEE4}
.chip.on.mari{background:#FF8A14;color:#16130F;border-color:#FF8A14}
@media(max-width:620px){.flabel{width:100%}}

/* catalogue grid */
.catalogue{padding:clamp(40px,5vw,64px) clamp(18px,4.5vw,64px) 140px}
.pgrid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.pcard{border:2px solid #16130F;background:#F2EEE4;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.pcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #FF8A14}
.pcard.selected{box-shadow:6px 6px 0 #FF3E86}
.pcard.selected:hover{box-shadow:8px 8px 0 #FF3E86}
.pcard-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border-bottom:2px solid #16130F;transition:background .25s,color .25s}
.pcard-img svg{width:38%;height:auto;color:#16130F;transition:color .25s}
.pcard:hover .pcard-img{background:#16130F}
.pcard:hover .pcard-img svg{color:#F2EEE4}
.pcard-img.knits{background:#E7E1D3}
.pcard-img.wovens{background:#E4E7DE}
.pcard-img.denim{background:#D9E0E8}
.pcard-img.active{background:#FCE6CE}
.pcard-img.swim{background:#FBD9E6}
.pcard-img.acc{background:#EDE7D8}
.pcard-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pcard-top h3{font-size:1.15rem;line-height:1;letter-spacing:-.02em}
.pcard-top .moq{font-family:"DM Mono",ui-monospace,monospace;font-size:.58rem;text-transform:uppercase;color:#4A443B;white-space:nowrap}
.pcard-meta{display:flex;gap:6px;flex-wrap:wrap}
.ctag,.otag{font-family:"DM Mono",ui-monospace,monospace;font-size:.56rem;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.ctag{background:#FF8A14}
.otag{border:1px solid rgba(22,19,15,.16);color:#4A443B}
.fabs{font-family:"DM Mono",ui-monospace,monospace;font-size:.6rem;text-transform:uppercase;color:#4A443B;line-height:1.7}
.swatches{display:flex;gap:5px;margin-top:auto;padding-top:6px}
.swatches i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(22,19,15,.16);display:block}
.selbtn{font-family:"DM Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;border-top:2px solid #16130F;padding:13px;background:#F2EEE4;transition:background .18s,color .18s;display:flex;align-items:center;justify-content:center;gap:8px}
.selbtn:hover{background:#16130F;color:#F2EEE4}
.selbtn .plus{font-weight:700}
.pcard.selected .selbtn{background:#FF3E86;color:#fff;border-color:#FF3E86}
.noresults{grid-column:1/-1;padding:60px 0;text-align:center;font-family:"DM Mono",ui-monospace,monospace;font-size:.8rem;text-transform:uppercase;color:#4A443B}

/* palette */
.palette{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,44px)}
.sw{display:flex;flex-direction:column;align-items:center;gap:8px;width:74px}
.sw i{width:54px;height:54px;border-radius:50%;border:2px solid #16130F;display:block}
.sw span{font-family:"DM Mono",ui-monospace,monospace;font-size:.56rem;text-transform:uppercase;text-align:center;line-height:1.3}
.palnote{margin-top:24px;font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;text-transform:uppercase;color:#4A443B}

/* selection tray */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:85;background:#16130F;color:#F2EEE4;
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.tray.show{transform:none}
.tray .inner{max-width:1440px;margin:0 auto;padding:16px clamp(18px,4.5vw,64px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tray .cnt{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;text-transform:lowercase}
.tray .cnt em{font-style:normal;color:#FF8A14}
.tray .spacer{flex:1}
.tray .clr{font-family:"DM Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;color:#8E877C;border-bottom:1px solid transparent}
.tray .clr:hover{color:#F2EEE4;border-bottom-color:#FF8A14}
.tray .go{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.05rem;text-transform:lowercase;letter-spacing:-.02em;background:#FF8A14;color:#16130F;padding:12px 22px;border-radius:999px;transition:transform .16s,box-shadow .16s}
.tray .go:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #FF3E86}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal .scrim{position:absolute;inset:0;background:rgba(22,19,15,.55);backdrop-filter:blur(2px)}
.modal .panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:#F2EEE4;
  border-left:2px solid #16130F;overflow-y:auto;padding:clamp(24px,4vw,44px);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.modal.open .panel{transform:none}
.modal .x{position:absolute;top:20px;right:24px;font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;text-transform:uppercase}
.modal h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.selitems{margin:24px 0;display:flex;flex-direction:column;gap:8px}
.selitem{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1.5px solid #16130F;padding:10px 14px;background:#F2EEE4}
.selitem .nm{font-family:"Space Grotesk",system-ui,sans-serif;font-size:.95rem}
.selitem .nm small{font-family:"DM Mono",ui-monospace,monospace;font-size:.56rem;text-transform:uppercase;color:#4A443B;display:block;margin-top:2px}
.selitem .rm{font-family:"DM Mono",ui-monospace,monospace;font-size:.62rem;text-transform:uppercase;color:#FF3E86}
.mfield{margin-top:18px}
.mfield label{font-family:"DM Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;color:#4A443B;display:block;margin-bottom:7px}
.mfield input,.mfield textarea{width:100%;background:transparent;border:0;border-bottom:2px solid #16130F;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1rem;color:#16130F;padding:7px 0 10px}
.mfield input:focus,.mfield textarea:focus{outline:0;border-bottom-color:#FF8A14}
.mfield textarea{resize:vertical;min-height:70px}
.mtwo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mqty{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.msend{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.msendbtn{background:#16130F;color:#F2EEE4;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.1rem;text-transform:lowercase;letter-spacing:-.02em;padding:14px 26px;border-radius:999px;transition:transform .16s,box-shadow .16s}
.msendbtn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #FF8A14}
.msendnote{font-family:"DM Mono",ui-monospace,monospace;font-size:.62rem;text-transform:uppercase;color:#4A443B}
.msub{font-family:"Space Grotesk",system-ui,sans-serif;color:#4A443B;font-size:.9rem;margin-top:14px}
.mhead{font-family:"DM Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;color:#4A443B;letter-spacing:.06em;margin:28px 0 4px;display:flex;align-items:center;gap:10px;padding-top:22px;border-top:2px solid #16130F}
.mhead i{width:20px;height:2px;background:#FF8A14;display:inline-block}
.selitem{border:1.5px solid #16130F;padding:13px 15px;background:#F2EEE4;display:block}
.selitem-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.selitem .nm{font-family:"Space Grotesk",system-ui,sans-serif;font-size:.98rem;font-weight:500;line-height:1.25}
.selitem .nm small{font-family:"DM Mono",ui-monospace,monospace;font-size:.53rem;text-transform:uppercase;color:#4A443B;display:block;margin-top:4px;font-weight:400;letter-spacing:.02em}
.selitem .rm{font-family:"DM Mono",ui-monospace,monospace;font-size:.58rem;text-transform:uppercase;color:#FF3E86;flex:none}
.selitem-ctrls{margin-top:13px;display:flex;flex-direction:column;gap:13px}
.ctrl .cl{font-family:"DM Mono",ui-monospace,monospace;font-size:.56rem;text-transform:uppercase;color:#4A443B;display:block;margin-bottom:7px}
.mini{display:flex;flex-wrap:wrap;gap:5px}
.mini button{font-family:"DM Mono",ui-monospace,monospace;font-size:.6rem;text-transform:uppercase;border:1.5px solid #16130F;background:#F2EEE4;padding:6px 9px;border-radius:999px;transition:background .14s,color .14s}
.mini button:hover{background:#E7E1D3}
.mini.qty button.on{background:#FF8A14;color:#16130F;border-color:#FF8A14}
.mini.col button{min-width:32px}
.mini.col button.on{background:#16130F;color:#F2EEE4}
.swpick{display:flex;flex-wrap:wrap;gap:7px}
.swpick .sw2{width:22px;height:22px;border-radius:50%;border:2px solid rgba(22,19,15,.16);cursor:pointer;padding:0;transition:transform .12s,box-shadow .12s}
.swpick .sw2:hover{transform:scale(1.12)}
.swpick .sw2.on{box-shadow:0 0 0 2px #F2EEE4,0 0 0 4px #16130F}
.mchips{display:flex;flex-wrap:wrap;gap:7px}
.mchips .chip.on{background:#16130F;color:#F2EEE4}
.mchips .chip.mari.on{background:#FF8A14;color:#16130F;border-color:#FF8A14}
.req{color:#FF3E86}

/* custom quantity input, shown only when "custom" is picked — matches other form fields */
.qtycustomwrap{display:flex;flex-direction:column;gap:6px;max-width:280px}
.qtycustom{font-family:"Space Grotesk",system-ui,sans-serif;font-size:1rem;color:#16130F;background:transparent;border:0;border-bottom:2px solid #16130F;border-radius:0;padding:7px 0 10px;width:100%}
.qtycustom:focus{outline:0;border-bottom-color:#FF8A14}

/* ---------------------------------------------------------------
 * Theme-override fixes
 * The parent theme applies its own button/input skinning (background,
 * border, box-shadow, radius, focus rings) which was bleeding through
 * on a few controls. Everything below re-asserts the intended look
 * with !important, scoped tightly to just those controls, so it wins
 * regardless of the theme's own specificity or load order.
 * ------------------------------------------------------------- */

/* bottom tray: "clear all" */
.fam-products-app .tray .clr{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  color:#8E877C!important;
}
.fam-products-app .tray .clr:hover,
.fam-products-app .tray .clr:focus{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#F2EEE4!important;
  border-bottom:1px solid #FF8A14!important;
}

/* side drawer: close (×) button */
.fam-products-app .modal .x{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:4px 2px!important;
  color:#16130F!important;
}
.fam-products-app .modal .x:hover,
.fam-products-app .modal .x:focus{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#FF3E86!important;
}

/* side drawer: per-item "remove" */
.fam-products-app .selitem .rm{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  color:#FF3E86!important;
}
.fam-products-app .selitem .rm:hover,
.fam-products-app .selitem .rm:focus{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#B92E5C!important;
  text-decoration:underline!important;
}

/* side drawer: qty / colour-count mini buttons — theme was turning the
   hover text white against a light background, making it unreadable */
.fam-products-app .mini button{
  color:#16130F!important;
  background:#F2EEE4!important;
  background-image:none!important;
  box-shadow:none!important;
}
.fam-products-app .mini button:hover{
  color:#16130F!important;
  background:#E7E1D3!important;
}
.fam-products-app .mini.qty button.on,
.fam-products-app .mini.qty button.on:hover{
  color:#16130F!important;
  background:#FF8A14!important;
}
.fam-products-app .mini.col button.on,
.fam-products-app .mini.col button.on:hover{
  color:#F2EEE4!important;
  background:#16130F!important;
}

/* email / phone fields, plus custom quantity + "other" market fields —
   all share the same underline look as the rest of the form */
.fam-products-app .mfield input[type="email"],
.fam-products-app .mfield input[type="tel"],
.fam-products-app .mfield input[type="text"],
.fam-products-app .mfield input:not([type]),
.fam-products-app #m-email,
.fam-products-app #m-mobile,
.fam-products-app .qtycustom{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:2px solid #16130F!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:7px 0 10px!important;
  margin:0!important;
  height:auto!important;
  width:100%!important;
  font-family:"Space Grotesk",system-ui,sans-serif!important;
  font-size:1rem!important;
  color:#16130F!important;
}
.fam-products-app .mfield input[type="email"]:focus,
.fam-products-app .mfield input[type="tel"]:focus,
.fam-products-app .mfield input[type="text"]:focus,
.fam-products-app .mfield input:not([type]):focus,
.fam-products-app #m-email:focus,
.fam-products-app #m-mobile:focus,
.fam-products-app .qtycustom:focus{
  outline:0!important;
  box-shadow:none!important;
  border-bottom-color:#FF8A14!important;
}

/* side drawer: eyebrow + heading */
.fam-products-app .modal .eyebrow{
  font-family:"DM Mono",ui-monospace,monospace!important;
  font-size:.66rem!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  color:#4A443B!important;
  background:transparent!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 10px!important;
  padding:0!important;
}
.fam-products-app .modal .eyebrow i{
  width:20px!important;
  height:2px!important;
  background:#FF8A14!important;
  display:inline-block!important;
  border:0!important;
}
.fam-products-app .modal .panel h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  text-transform:lowercase!important;
  color:#16130F!important;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}