/** Shopify CDN: Minification failed

Line 289:0 All "@import" rules must come first
Line 290:0 All "@import" rules must come first

**/
/** Shopify CDN: Minification failed

Line 283:0 All "@import" rules must come first
Line 284:0 All "@import" rules must come first
Line 902:0 Unexpected "+"
Line 904:0 Expected identifier but found "+"
Line 905:0 Expected identifier but found "+"
Line 906:0 Expected identifier but found "+"
Line 908:0 Unexpected "+"
Line 910:0 Expected identifier but found "+"
Line 911:0 Expected identifier but found "+"
Line 912:0 Expected identifier but found "+"
... and 28 more hidden warnings

**/


/*
 * NOOR Best-Sellers carousel — mockup-proportion override
 *
 * Load this after assets/noor-card.css and after the section's inline styles,
 * or paste it at the very end of the Best-Sellers section stylesheet.
 */

/* Let a product card read as a product card, not a four-column catalog tile. */
#noorbeard_best_sellers .nb-carousel {
  gap: 16px;
  scroll-padding-inline: 16px;
}

#noorbeard_best_sellers .nb-carousel__slide {
  width: min(88vw, 390px) !important;
}

/* Keep badges subordinate to the product name, matching the mockup hierarchy. */
#noorbeard_best_sellers .noorCard-badges {
  top: 18px;
  left: 18px;
  right: 18px;
}

#noorbeard_best_sellers .noorBadge {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.07em;
}

#noorbeard_best_sellers .noorCard-wishlist {
  width: 38px;
  height: 38px;
}

#noorbeard_best_sellers .noorCard-inspiredPill {
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  padding: 7px 14px;
  font-size: 11px;
}

#noorbeard_best_sellers .noorCard-body {
  gap: 0.85rem;
  padding: 1.45rem 1.6rem 1.65rem;
}

#noorbeard_best_sellers .noorCard-head {
  gap: 0.55rem;
}

#noorbeard_best_sellers .noorCard-title {
  font-size: clamp(2.4rem, 2.1vw, 3rem);
  line-height: 1.16;
}

#noorbeard_best_sellers .noorCard-stars svg {
  width: 20px;
  height: 20px;
}

#noorbeard_best_sellers .noorCard-ratingValue {
  font-size: 1.28rem;
}

#noorbeard_best_sellers .noorCard-ratingCount {
  font-size: 1.18rem;
}

#noorbeard_best_sellers .noorCard-scentNote {
  font-size: 1.55rem;
  line-height: 1.45;
}

#noorbeard_best_sellers .noorCard-optLabel {
  font-size: 11px;
}

#noorbeard_best_sellers .noorPlusBadge {
  gap: 5px;
  padding: 6px 11px;
  font-size: 10px;
}

#noorbeard_best_sellers .noorPill {
  min-width: 112px;
  padding: 14px 28px;
  font-size: 1.55rem;
}

#noorbeard_best_sellers .noorPricePill {
  min-height: 64px;
  padding: 9px 14px;
  border-radius: 14px;
}

#noorbeard_best_sellers .noorPricePill-label {
  font-size: 1.08rem;
}

#noorbeard_best_sellers .noorPricePill-price {
  font-size: 1.5rem;
}

#noorbeard_best_sellers .noorAddBtn {
  min-height: 56px;
  padding: 16px 20px;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

@media (min-width: 640px) {
  #noorbeard_best_sellers .nb-carousel {
    gap: 20px;
  }

  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 20px) / 2) !important;
  }
}

@media (min-width: 1024px) {
  #noorbeard_best_sellers .nb-carousel {
    gap: 24px;
  }

  /* Deliberately three cards: the previous four-card rule produced 302px cards. */
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 48px) / 3) !important;
  }
}

@media (max-width: 639px) {
  #noorbeard_best_sellers .nb-carousel {
    padding-inline: 16px;
  }

  #noorbeard_best_sellers .noorCard-body {
    align-items: stretch;
    padding: 1.2rem 1.3rem 1.45rem;
    text-align: left;
  }

  #noorbeard_best_sellers .noorCard-head {
    align-items: flex-start;
    text-align: left;
  }

  #noorbeard_best_sellers .noorCard-rating {
    justify-content: flex-start;
  }

  #noorbeard_best_sellers .noorCard-optLabelRow {
    text-align: left;
  }

  #noorbeard_best_sellers .noorPill {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #noorbeard_best_sellers .noorCard-inner,
  #noorbeard_best_sellers .noorPill,
  #noorbeard_best_sellers .noorPricePill,
  #noorbeard_best_sellers .noorAddBtn {
    transition: none;
  }
}


/* The Ordinary-inspired inline size selector. Keep purchase type as the primary pills. */
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabelRow {
  display: contents;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabel {
  grid-column: 1;
  grid-row: 1;
  color: var(--noorInk);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.6rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPlusBadge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
  min-width: 0;
  padding: 0.35rem 0.15rem 0.45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--noorMuted);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill:hover {
  border-color: var(--noorGoldSoft);
  color: var(--noorInk);
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill.is-active {
  border-color: var(--noorInk);
  background: transparent;
  color: var(--noorInk);
  font-weight: 700;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"],
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"] {
  font-size: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"]::after {
  content: "30 mL";
  font-size: 1.55rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"]::after {
  content: "60 mL";
  font-size: 1.55rem;
}

@media (max-width: 639px) {
  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 1.15rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
    gap: 1.35rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
    flex: 0 0 auto;
  }
}
/* NOOR — refreshed card system, matching the new mockup direction: bold clean sans title, chic tan/gold pills, subtler badges */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,450;9..144,560&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');

:root{
  --noorInk:#1B2E22;
  --noorInkDark:#0F1D14;
  --noorGold:#B8892E;
  --noorGoldSoft:#E4C878;
  --noorCream:#F8F4EC;
  --noorCreamBorder:#E6DCC3;
  --noorMuted:#6B6558;
  --noorMutedSoft:#8C8571;
  --noorBody:#3E3A33;
  --noorTan:#E3C48F;
  --noorTanDeep:#C9A467;
  --noorTerracotta:#B8672E;
}

/* Dossier-style catalog grid spacing — wider gutters between cards.
   NOTE: this theme's root font-size is 10px (not the browser default 16px),
   so gap values are set in px directly to guarantee the intended ~44-48px
   desktop gutters regardless of any rem-scaling on the html element. */
#ajaxSection.cards,
x-grid.cards{ gap:48px 44px !important; }
@media (max-width:777px){
  #ajaxSection.cards,
  x-grid.cards{ gap:28px 18px !important; }
}

.noorCard{ height:100%; }
.noorCard-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--noorCream);
  border:1px solid var(--noorCreamBorder);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(27,46,34,.04), 0 10px 24px rgba(27,46,34,.06);
  transition:box-shadow .25s ease, transform .25s ease;
}
.noorCard-inner:hover{ box-shadow:0 4px 8px rgba(27,46,34,.06), 0 20px 36px rgba(27,46,34,.12); transform:translateY(-2px); }

.noorCard-media{ position:relative; background:#F1ECDF; }
.noorCard-media .card-aspect-ratio{ display:none; }
.noorCard-mediaLink{ display:block; }
.noorCard-imgWrap{
  position:relative;
  aspect-ratio:4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.85rem 1.6rem;
}
.noorCard-imgWrap picture,
.noorCard-imgWrap img{ width:100%; height:100%; object-fit:contain; }
.noorCard-media .secondary{
  position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  display:flex; align-items:center; justify-content:center; padding:1.85rem 1.6rem;
}
.noorCard-media:hover .secondary{ opacity:1; }

.noorCard-badges{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;
  z-index:2;
}
.noorCard-badges-left{ display:flex; flex-wrap:wrap; gap:.4rem; pointer-events:none; }
.noorCard-badges-right{ display:flex; align-items:center; gap:.4rem; }
.noorBadge{
  font-family:inherit; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; line-height:1; white-space:nowrap; font-weight:600;
  pointer-events:none;
}
.noorBadge--new{ background:var(--noorInk); color:var(--noorCream); }
.noorBadge--sale{ background:#FFFFFF; color:var(--noorGold); border:1px solid var(--noorGold); }
.noorBadge--soldout{ background:rgba(255,255,255,.92); color:var(--noorMuted); border:1px solid var(--noorCreamBorder); }
.noorBadge--preorder{ background:var(--noorCream); color:var(--noorInk); border:1px solid var(--noorInk); }
.noorBadge--bestseller{ background:var(--noorTan); color:var(--noorInkDark); font-weight:700; }

/* Wishlist heart — top-right over image */
.noorCard-wishlist{
  pointer-events:auto;
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.92); border:1px solid var(--noorCreamBorder);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .18s ease, background .18s ease; padding:0;
}
.noorCard-wishlist svg{ width:16px; height:16px; fill:none; stroke:var(--noorInk); stroke-width:1.6; transition:fill .18s ease, stroke .18s ease; }
.noorCard-wishlist:hover{ transform:scale(1.08); }
.noorCard-wishlist.is-active svg{ fill:#C0374B; stroke:#C0374B; }

/* "Inspired by X" / scent-descriptor pill — bottom-left over image */
.noorCard-inspiredPill{
  position:absolute; left:14px; bottom:14px; z-index:2;
  background:rgba(15,29,20,.88); color:var(--noorCream);
  border:1px solid rgba(248,244,236,.22);
  font-size:10px; letter-spacing:.03em; font-style:italic;
  padding:6px 12px; border-radius:999px; max-width:calc(100% - 28px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.noorCard-body{
  position:static !important; inset:auto !important; top:auto !important;
  padding:1.1rem 1.25rem 1.35rem;
  display:flex; flex-direction:column; gap:.7rem; flex:1;
}
.noorCard-head{ display:flex; flex-direction:column; gap:.42rem; }
.noorCard-footer{ opacity:1 !important; visibility:visible !important; position:static !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; margin:0 !important; width:100%; }
.noorCard-vendor{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--noorGold); font-weight:700;
}
.noorCard-title{
  font-family:'General Sans', sans-serif; font-size:1.85rem; font-weight:700;
  letter-spacing:-.01em; color:var(--noorInk); line-height:1.22; margin:0;
}
.noorCard-title a{ text-decoration:none; color:inherit; }
.noorCard-subtitle{ font-family:'General Sans', sans-serif; font-size:1.05rem; font-weight:600; color:var(--noorGold); margin:0; }

/* Star rating row — chic, moderate sizing */
.noorCard-rating{ display:flex; align-items:center; gap:.5rem; }
.noorCard-stars{ display:inline-flex; gap:2px; }
.noorCard-stars svg{ width:14px; height:14px; fill:var(--noorGold); }
.noorCard-ratingValue{ font-size:1rem; font-weight:600; color:var(--noorInk); }
.noorCard-ratingCount{ font-size:.92rem; color:var(--noorMuted); }

/* One-line scent description */
.noorCard-scentNote{
  font-family:'General Sans', sans-serif; font-size:1.05rem; font-weight:400; color:var(--noorBody); margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Price row with member (subscription) price */
.noorCard-priceRow{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.noorCard-price{ font-family:'General Sans', sans-serif; font-size:1.4rem; font-weight:700; color:var(--noorInk); }
.noorCard-memberPrice{ font-family:'General Sans', sans-serif; font-size:1rem; color:var(--noorTerracotta); font-weight:500; }

.noorPlusBadge{
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
  background:var(--noorInkDark); color:var(--noorCream);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:5px 11px; border-radius:999px;
}
.noorPlusBadge::before{ content:'\2605'; color:var(--noorGold); margin-right:1px; }

.noorPicker{ display:flex; flex-direction:column; gap:.65rem; margin-top:.15rem; }
.noorHiddenSelect{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden;
}
.noorCard-optGroup{ display:flex; flex-direction:column; gap:.4rem; }
.noorCard-optLabel{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--noorMutedSoft); }
.noorCard-optLabelRow{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.noorCard-pills, .noorCard-pricePills{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* Size pills — chic rounded-rect (not full capsule), tan fill when selected, per new mockup */
.noorPill{
  font-family:'General Sans', sans-serif; font-size:1.15rem; font-weight:500; padding:10px 20px; border-radius:14px;
  border:1px solid var(--noorCreamBorder); background:#FFFFFF; color:var(--noorInk);
  cursor:pointer; transition:all .15s ease; line-height:1.3;
  width:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
}
.noorPill:hover{ border-color:var(--noorTanDeep); }
.noorPill.is-active{ background:var(--noorTan); border-color:var(--noorTanDeep); color:var(--noorInkDark); font-weight:600; }
.noorPill.is-unavailable{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

.noorPricePill{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  font-family:'General Sans', sans-serif; padding:7px 14px; border-radius:12px;
  border:1px solid var(--noorCreamBorder); background:#FFFFFF; cursor:pointer;
  text-align:left; min-width:132px; width:auto; flex:1 1 0%; transition:all .15s ease;
}
.noorPricePill:hover{ border-color:var(--noorInk); }
.noorPricePill-label{ font-size:.85rem; letter-spacing:.03em; color:var(--noorMuted); }
.noorPricePill-price{ font-size:1.15rem; font-weight:600; color:var(--noorInk); }
.noorPricePill.is-active{ border-color:var(--noorInk); box-shadow:inset 0 0 0 1px var(--noorInk); }
.noorPricePill.is-active .noorPricePill-label{ font-weight:700; color:var(--noorInk); }
.noorPricePill.is-active .noorPricePill-price{ font-weight:700; }
.noorPricePill.is-subscribe{ background:#FBF3E1; border-color:var(--noorGoldSoft); }
.noorPricePill.is-subscribe .noorPricePill-label{ color:#96741E; }
.noorPricePill.is-subscribe.is-active{ border-color:var(--noorGold); box-shadow:inset 0 0 0 1px var(--noorGold); }
.noorPricePill.is-disabled{ opacity:.4; pointer-events:none; }

.noorAddBtn{
  margin-top:auto; width:100%; display:flex; align-items:center; justify-content:center;
  gap:.6rem; background:var(--noorCream) !important; color:var(--noorInk) !important; border:1.5px solid var(--noorInk) !important; border-radius:999px;
  font-family:'General Sans', sans-serif; padding:13px 18px; font-size:1.15rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; transition:background .2s ease, color .2s ease;
}
.noorAddBtn:hover, .noorAddBtn:active, .noorAddBtn:focus-visible{ background:var(--noorInk) !important; color:var(--noorGold) !important; }
.noorAddBtn .cartPriceAdd{ display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; }
.noorAddBtn-price{ opacity:.75; font-weight:400; }
.noorAddBtn[disabled]{ opacity:.5; cursor:not-allowed; }
.noorAddBtn--soldout{ background:#E7E1D3; color:var(--noorMutedSoft); }

/* Scent-switch swatches (product page) */
.noorScentSwitch{ display:flex; flex-direction:column; gap:.65rem; margin:1.4rem 0; }
.noorScentSwitch-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--noorMutedSoft); }
.noorScentSwitch-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.noorScentSwitch-item{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  width:76px; text-decoration:none; cursor:pointer;
}
.noorScentSwitch-swatch{
  width:64px; height:64px; border-radius:14px; overflow:hidden;
  border:2px solid transparent; background:#F1ECDF; transition:border-color .18s ease, transform .18s ease;
  display:flex; align-items:center; justify-content:center;
}
.noorScentSwitch-swatch img{ width:100%; height:100%; object-fit:cover; }
.noorScentSwitch-item:hover .noorScentSwitch-swatch{ transform:translateY(-2px); }
.noorScentSwitch-item.is-current .noorScentSwitch-swatch{ border-color:var(--noorInk); box-shadow:0 0 0 1px var(--noorInk); }
.noorScentSwitch-name{
  font-size:.74rem; letter-spacing:.02em; color:var(--noorMuted); text-align:center; line-height:1.2;
}
.noorScentSwitch-item.is-current .noorScentSwitch-name{ color:var(--noorInk); font-weight:600; }

@media (max-width:777px){
  .noorCard-body{ padding:.9rem 1rem 1.1rem; gap:.55rem; }
  .noorCard-title{ font-size:1.6rem; }
  .noorPricePill{ min-width:auto; }
  .noorScentSwitch-item{ width:68px; }
  .noorScentSwitch-swatch{ width:56px; height:56px; }

  /* First 3 lines (title, rating) centered as a group; scent note left-aligned + smaller so ellipsis works correctly */
  .noorCard-head{ align-items:center; text-align:center; }
  .noorCard-rating{ justify-content:center; }
  .noorCard-scentNote{ font-size:.95rem; text-align:left; width:100%; }

  /* SIZE label pushed to the left; Noor+ badge stays on the right */
  .noorCard-optLabelRow{ justify-content:space-between; text-align:left; }
}

/* === NOOR CAROUSEL FINAL OVERRIDE — 2026-07-11 === */
/*
 * NOOR Best-Sellers carousel — mockup-proportion override
 *
 * Load this after assets/noor-card.css and after the section's inline styles,
 * or paste it at the very end of the Best-Sellers section stylesheet.
 */

/* Let a product card read as a product card, not a four-column catalog tile. */
#noorbeard_best_sellers .nb-carousel {
  gap: 16px;
  scroll-padding-inline: 16px;
}

#noorbeard_best_sellers .nb-carousel__slide {
  width: min(88vw, 390px) !important;
}

/* Keep badges subordinate to the product name, matching the mockup hierarchy. */
#noorbeard_best_sellers .noorCard-badges {
  top: 18px;
  left: 18px;
  right: 18px;
}

#noorbeard_best_sellers .noorBadge {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.07em;
}

#noorbeard_best_sellers .noorCard-wishlist {
  width: 38px;
  height: 38px;
}

#noorbeard_best_sellers .noorCard-inspiredPill {
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  padding: 7px 14px;
  font-size: 11px;
}

#noorbeard_best_sellers .noorCard-body {
  gap: 0.85rem;
  padding: 1.45rem 1.6rem 1.65rem;
}

#noorbeard_best_sellers .noorCard-head {
  gap: 0.55rem;
}

#noorbeard_best_sellers .noorCard-title {
  font-size: clamp(2.4rem, 2.1vw, 3rem);
  line-height: 1.16;
}

#noorbeard_best_sellers .noorCard-stars svg {
  width: 20px;
  height: 20px;
}

#noorbeard_best_sellers .noorCard-ratingValue {
  font-size: 1.28rem;
}

#noorbeard_best_sellers .noorCard-ratingCount {
  font-size: 1.18rem;
}

#noorbeard_best_sellers .noorCard-scentNote {
  font-size: 1.55rem;
  line-height: 1.45;
}

#noorbeard_best_sellers .noorCard-optLabel {
  font-size: 11px;
}

#noorbeard_best_sellers .noorPlusBadge {
  gap: 5px;
  padding: 6px 11px;
  font-size: 10px;
}

#noorbeard_best_sellers .noorPill {
  min-width: 112px;
  padding: 14px 28px;
  font-size: 1.55rem;
}

#noorbeard_best_sellers .noorPricePill {
  min-height: 64px;
  padding: 9px 14px;
  border-radius: 14px;
}

#noorbeard_best_sellers .noorPricePill-label {
  font-size: 1.08rem;
}

#noorbeard_best_sellers .noorPricePill-price {
  font-size: 1.5rem;
}

#noorbeard_best_sellers .noorAddBtn {
  min-height: 56px;
  padding: 16px 20px;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

@media (min-width: 640px) {
  #noorbeard_best_sellers .nb-carousel {
    gap: 20px;
  }

  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 20px) / 2) !important;
  }
}

@media (min-width: 1024px) {
  #noorbeard_best_sellers .nb-carousel {
    gap: 24px;
  }

  /* Deliberately three cards: the previous four-card rule produced 302px cards. */
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 48px) / 3) !important;
  }
}

@media (max-width: 639px) {
  #noorbeard_best_sellers .nb-carousel {
    padding-inline: 16px;
  }

  #noorbeard_best_sellers .noorCard-body {
    align-items: stretch;
    padding: 1.2rem 1.3rem 1.45rem;
    text-align: left;
  }

  #noorbeard_best_sellers .noorCard-head {
    align-items: flex-start;
    text-align: left;
  }

  #noorbeard_best_sellers .noorCard-rating {
    justify-content: flex-start;
  }

  #noorbeard_best_sellers .noorCard-optLabelRow {
    text-align: left;
  }

  #noorbeard_best_sellers .noorPill {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #noorbeard_best_sellers .noorCard-inner,
  #noorbeard_best_sellers .noorPill,
  #noorbeard_best_sellers .noorPricePill,
  #noorbeard_best_sellers .noorAddBtn {
    transition: none;
  }
}

/* The Ordinary-inspired inline size selector. Keep purchase type as the primary pills. */
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabelRow {
  display: contents;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabel {
  grid-column: 1;
  grid-row: 1;
  color: var(--noorInk);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.6rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPlusBadge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
  min-width: 0;
  padding: 0.35rem 0.15rem 0.45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--noorMuted);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill:hover {
  border-color: var(--noorGoldSoft);
  color: var(--noorInk);
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill.is-active {
  border-color: var(--noorInk);
  background: transparent;
  color: var(--noorInk);
  font-weight: 700;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"],
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"] {
  font-size: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"]::after {
  content: "30 mL";
  font-size: 1.55rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"]::after {
  content: "60 mL";
  font-size: 1.55rem;
}

@media (max-width: 639px) {
  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 1.15rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
    gap: 1.35rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
    flex: 0 0 auto;
  }
}


/* Keep collection filters readable in the tablet / narrow-desktop range. */
@media (max-width: 1023px) {
  #noorbeard_best_sellers .container > .header {
    display: block !important;
  }

  #noorbeard_best_sellers .header .title {
    margin-bottom: 1.4rem;
  }

  #noorbeard_best_sellers .list.collections {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.8rem;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #noorbeard_best_sellers .list.collections::-webkit-scrollbar {
    display: none;
  }

  #noorbeard_best_sellers .list.collections .item {
    flex: 0 0 auto;
    width: auto !important;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  #noorbeard_best_sellers .noorCard-inner,
  #noorbeard_best_sellers .noorPill,
  #noorbeard_best_sellers .noorPricePill,
  #noorbeard_best_sellers .noorAddBtn {
    transition: none;
  }
}

/* The Ordinary-inspired inline size selector. Keep purchase type as the primary pills. */
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabelRow {
  display: contents;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-optLabel {
  grid-column: 1;
  grid-row: 1;
  color: var(--noorInk);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.6rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPlusBadge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
  min-width: 0;
  padding: 0.35rem 0.15rem 0.45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--noorMuted);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill:hover {
  border-color: var(--noorGoldSoft);
  color: var(--noorInk);
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill.is-active {
  border-color: var(--noorInk);
  background: transparent;
  color: var(--noorInk);
  font-weight: 700;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"],
#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"] {
  font-size: 0;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="30ml"]::after {
  content: "30 mL";
  font-size: 1.55rem;
}

#noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill[data-value="60ml"]::after {
  content: "60 mL";
  font-size: 1.55rem;
}



/* Preserve the loved single-card composition through tablet widths. */
@media (min-width: 640px) and (max-width: 1023px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: min(88vw, 390px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 24px) / 2) !important;
  }
}

@media (min-width: 1200px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 48px) / 3) !important;
  }
}
@media (max-width: 639px) {
  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 1.15rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorCard-pills {
    gap: 1.35rem;
  }

  #noorbeard_best_sellers .noorCard-optGroup:has(.noorCard-pills) .noorPill {
    flex: 0 0 auto;
  }
}


/* NOOR carousel tablet filter hotfix */
@media (max-width: 1023px) {
  #noorbeard_best_sellers#noorbeard_best_sellers .container > .header {
    display: block !important;
  }
  #noorbeard_best_sellers#noorbeard_best_sellers .header .title {
    margin-bottom: 1.4rem;
  }
  #noorbeard_best_sellers#noorbeard_best_sellers .header .list.collections {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 1.8rem !important;
    overflow-x: auto !important;
    padding-bottom: .8rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #noorbeard_best_sellers#noorbeard_best_sellers .header .list.collections::-webkit-scrollbar {
    display: none;
  }
  #noorbeard_best_sellers#noorbeard_best_sellers .header .list.collections .item {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}


/* Final loved-card breakpoint restoration — clean CSS. */
@media (min-width: 640px) and (max-width: 1023px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: min(88vw, 390px) !important;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 24px) / 2) !important;
  }
}
@media (min-width: 1200px) {
  #noorbeard_best_sellers .nb-carousel__slide {
    width: calc((100% - 48px) / 3) !important;
  }
}