/* Small additions on top of the ported theme (main.less/main.css) - not a
   replacement for it. Keeps the same visual language (Bootstrap 3 grid, the
   theme's colors/fonts) rather than introducing a second design system. */

/* Footer: simple column layout + bottom bar (theme's own <footer> has no styles
   for this structure). */
.shop-footer { background: #fff; border-top: 1px solid #e2e2e2; margin-top: 40px; }
.shop-footer__grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 32px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.shop-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #999; margin: 0 0 10px; }
.shop-footer ul { list-style: none; margin: 0; padding: 0; }
.shop-footer li { margin-bottom: 6px; font-size: 14px; }
.shop-footer li a:hover { color: #337ab7; }
.shop-footer__bottom { border-top: 1px solid #eee; padding: 14px 15px; text-align: center; font-size: 12px; color: #999; }

/* Product card image: theme's `.item img` has no fixed aspect ratio - real photos
   vary a lot in size, this keeps the grid tidy. */
.content .item .img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f7f7f7; }
.content .item .img img { width: 100%; height: 100%; object-fit: cover; }
.mainSection2 .item img { aspect-ratio: 1 / 1; object-fit: cover; background: #f7f7f7; }

/* Category chip grid (index page "Categories" section - no theme equivalent). */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.chip-grid a { border: 1px solid #e2e2e2; background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #555; }
.chip-grid a:hover { border-color: #5cb85c; color: #333; text-decoration: none; }
.chip-grid a span { color: #aaa; margin-left: 4px; }

.price-tag { font-weight: 600; }

/* Quick-view modal - matches the reference site's "click a tile, see it without
   leaving the grid" pattern (prev/next, ESC/arrow-key close). */
.qv-modal { position: fixed; inset: 0; z-index: 2000; }
.qv-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.qv-modal__dialog {
  position: relative;
  max-width: 960px;
  margin: 4vh auto;
  background: #fff;
  border-radius: 4px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qv-modal__toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  color: #777;
}
.qv-nav { border: 1px solid #ddd; background: #fff; border-radius: 3px; padding: 3px 10px; cursor: pointer; }
.qv-nav:hover { background: #f5f5f5; }
.qv-full-link { margin-left: 4px; }
.qv-hint { margin-left: auto; }
.qv-close { border: 0; background: none; font-size: 22px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.qv-close:hover { color: #333; }
.qv-modal__body { padding: 20px; overflow-y: auto; }
.qv-loading { text-align: center; padding: 60px 0; color: #999; }
.qv-content { display: flex; gap: 24px; flex-wrap: wrap; }
.qv-gallery { flex: 1 1 320px; max-width: 380px; }
.qv-main-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f7f7f7; border: 1px solid #eee; }
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.qv-thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #eee; cursor: pointer; }
.qv-info { flex: 1 1 320px; }
.qv-title { font-size: 22px; margin: 0 0 8px; }
.qv-price { font-size: 22px; color: #5cb85c; margin-bottom: 14px; }
.qv-attrs { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid #eee; }
.qv-attrs li { padding: 5px 0; border-bottom: 1px dotted #eee; font-size: 13px; }
@media (max-width: 700px) {
  .qv-hint { display: none; }
  .qv-modal__dialog { margin: 0; max-height: 100vh; border-radius: 0; }
}

/* "New"/"Discount" corner badges on product cards - theme already styles
   .btn-new/.btn-sale (see main.less), just needed a positioned wrapper. */
.tagg { position: absolute; top: 6px; left: 6px; z-index: 2; }
.tagg .btn {
  display: block;
  min-width: 38px;
  margin-bottom: 3px;
  padding: 3px 8px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

/* Facet sidebar (Yarn Tags / Fiber Content) active-filter link. */
.leftBar .accordion ul li a.blue { font-weight: 600; }

/* Search/catalog results: denser legacy marketplace layout from the supplied
   reference, scoped to search so category and campaign pages keep their sizing. */
.search-results-page .gray.p20 { padding: 36px 20px 70px; }
.search-results-page .mainProductList > .container { max-width: 1140px; }
.search-results-page .breadcrumb {
  min-height: 46px;
  margin-bottom: 14px;
  padding: 7px 0;
  border-color: #ddd;
}
.search-results-page .breadcrumb .btn { padding: 7px 12px; font-size: 13px; }
.search-results-page .breadcrumb > div { display: inline-block; }
.search-results-page .leftBar { background: #fff; padding: 0 15px 18px; }
.search-results-page .leftBar .white { padding: 0; }
.search-results-page .leftBar .accordion { padding: 18px 0; margin: 0; }
.search-results-page .leftBar .accordion h4 {
  margin: 0 0 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  background: #4d8dcc;
}
.search-results-page .leftBar .accordion h4 .fa { float: right; margin-top: 2px; }
.search-results-page .leftBar .accordion h4.is-collapsed .fa { transform: rotate(-90deg); }
.search-results-page .leftBar .accordion .accordionContent { padding: 0 7px; }
.search-results-page .leftBar .accordion ul { margin: 0; padding: 0; list-style: none; }
.search-results-page .leftBar .accordion li { margin: 0 0 7px; line-height: 1.35; }
.search-results-page .leftBar .accordion li a { display: block; color: #777; font-size: 11px; }
.search-results-page .leftBar .accordion li a:hover { color: #337ab7; text-decoration: none; }
.search-results-page .facet-list li a:before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 7px 0 0;
  vertical-align: -2px;
  border: 1px solid #d8d8d8;
  background: #fff;
}
.search-results-page .facet-list li a.blue:before { background: #4d8dcc; box-shadow: inset 0 0 0 3px #fff; }
.search-results-page .facet-extra { display: none; }
.search-results-page .facet-more { display: inline-block; margin-top: 3px; color: #4d8dcc; font-size: 11px; }
.search-results-page #kaldir { margin: 0 -15px -18px; width: calc(100% + 30px); font-size: 12px; }

.search-results-page .rightBar .result { min-height: 38px; padding: 5px 0 10px; font-size: 11px; }
.search-results-page .rightBar .result .pull-right { margin-top: -5px; }
.search-results-page .rightBar .result select { min-width: 145px; padding: 6px 9px; font-size: 11px; }
.search-results-page .active-search-tags { min-height: 47px; padding: 13px 0 8px; border-bottom: 1px solid #e4e5e5; }
.search-results-page .active-search-tags span {
  display: inline-block;
  padding: 6px 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  background: #4d8dcc;
  border-radius: 2px;
  margin: 0 6px 4px 0;
}
.search-results-page .active-search-tags a { margin-left: 4px; color: #fff; font-size: 16px; line-height: 10px; }
.search-results-page .productList { padding-top: 18px; }
.search-results-page .productList .row { margin-left: -10px; margin-right: -10px; }
.search-results-page .productList .item { padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
.search-results-page .productList .item > div { border-color: #dedede; background: #fff; }
.search-results-page .productList .name { min-height: 74px; padding: 8px; }
.search-results-page .productList .name h4 {
  height: 34px;
  margin: 0 0 6px;
  padding: 0 !important;
  overflow: hidden;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
}
.search-results-page .productList .name .price { margin: 0; font-size: 15px; line-height: 18px; }
.search-results-page .productList .name .kod { padding-top: 2px; font-size: 9px; }
.search-results-page .productList .select select { height: 38px; padding: 7px 3px; font-size: 10px; }
.search-results-page .productList .buy a { padding: 7px; font-size: 19px; }
.search-results-page .tagg { top: 0; left: 0; }
.search-results-page .tagg .btn { height: 24px; padding: 3px 7px; font-size: 11px; line-height: 18px; }
.search-results-page .shop-footer { margin-top: 0; }

@media (max-width: 991px) {
  .search-results-page .productList .item { width: 33.333333%; }
}
@media (max-width: 767px) {
  .search-results-page .gray.p20 { padding: 20px 10px 40px; }
  .search-results-page .leftBar { margin: 0 15px 20px; }
  .search-results-page .rightBar .result .pull-left,
  .search-results-page .rightBar .result .pull-right { float: none !important; display: block; margin: 0 0 8px; }
  .search-results-page .productList .item { width: 50%; }
}

/* Product grids: Bootstrap's floated columns can climb into a previous row when
   titles differ in height. Flex rows keep every listing line aligned. */
.mainProductList .productList .items > ul.row {
  display: flex;
  flex-wrap: wrap;
}
.mainProductList .productList .item {
  float: none;
  display: flex;
}
.mainProductList .productList .item > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}
.mainProductList .productList .item .buy {
  margin-top: auto;
}
.detailSection .productList .item .name {
  min-height: 94px;
}

@media (max-width: 767px) {
  .detailSection .productList .item .name { min-height: 112px; }
}

/* Discovery-led storefront refresh. It intentionally sits on top of the legacy
   theme so catalog, basket and checkout behavior remain shared. */
:root {
  --shop-blue: #3f82bd;
  --shop-blue-dark: #28699f;
  --shop-ink: #24323f;
  --shop-muted: #71808d;
  --shop-line: #dfe6eb;
  --shop-wash: #f3f6f8;
  --shop-orange: #ef7d42;
}
body { color: var(--shop-ink); }
.shop-header { border-bottom: 1px solid var(--shop-line) !important; }
.shop-header .gray { padding: 15px 0; background: #fff; }
.shop-header .navbar-header { width: 100%; }
.shop-header .navbar-brand {
  height: 42px;
  padding: 3px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--shop-ink);
  font-size: 18px;
  font-weight: 700;
}
.shop-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: #fff;
  background: var(--shop-blue);
  font-family: Georgia, serif;
  font-size: 21px;
}
.shop-header .navbar-form { padding: 0; margin: 4px 0; }
.shop-header .form-control { height: 40px; border: 1px solid #cfd9e0; border-radius: 4px 0 0 4px; }
.shop-header .btn-success { height: 40px; border-radius: 0 4px 4px 0; }
.shop-header .basket { padding-top: 4px; text-align: right; white-space: nowrap; }
.shop-header .basket .btn { height: 40px; padding-top: 9px; }
.shop-header .basket .btn-cart { border-radius: 4px; }
.shop-header .basket .btn-cart { position: relative; }
.shop-header #navbar { height: 46px !important; background: #fff; border-top: 1px solid #edf1f4; }
.shop-header #navbar ul li:after { display: none; }
.shop-header #navbar ul li a { padding: 13px 24px; color: #5b6873; font-size: 14px; font-weight: 600; }
.shop-header #navbar ul li.active a,
.shop-header #navbar ul li a:hover { color: var(--shop-blue-dark); }

/* Mobile header: hamburger + cart icon together (top row), and the hamburger
   drawer also carries a duplicate currency/language picker plus (via JS, see
   footer.ejs) a listing page's filter sidebar - desktop is untouched, these
   stay hidden there and the original .basket dropdowns/sidebar position keep
   working exactly as before. */
.shop-header__mobile-tools { display: none; align-items: center; gap: 10px; }
.shop-header__mobile-cart { display: none; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; background: var(--shop-blue); color: #fff; }
.shop-header__mobile-cart:hover { background: var(--shop-blue-dark); color: #fff; text-decoration: none; }
.shop-header__mobile-cart .fa { font-size: 17px; }
.shop-header__mobile-cart .count {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px;
  border-radius: 50%; background: var(--shop-orange); color: #fff; font-size: 10px; text-align: center; border: 2px solid #fff;
}
.shop-header__drawer-utils { display: none; }
.shop-header__drawer-group { padding: 12px 15px; border-top: 1px solid var(--shop-line); }
.shop-header__drawer-label { display: block; margin-bottom: 8px; color: var(--shop-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.shop-header__drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-header__drawer-chip { padding: 6px 14px; border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-ink); font-size: 13px; text-decoration: none; }
.shop-header__drawer-chip.is-active { border-color: var(--shop-blue); background: var(--shop-blue); color: #fff; }
.shop-header__drawer-filters { border-top: 1px solid var(--shop-line); }
.shop-header__drawer-filters .shop-listing__sidebar { padding: 4px 15px 16px; }
.shop-header__drawer-filters .shop-filter-clear { display: inline-block; margin: 8px 0; }

.home-discovery { overflow-x: hidden; background: #fff; }
.home-discovery .shop-footer { margin-top: 0; }
.home-section { padding: 62px 0; }
.eyebrow { color: var(--shop-blue); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.home-heading { margin-bottom: 30px; text-align: center; }
.home-heading h2 { margin: 7px 0 7px; color: var(--shop-ink); font-size: 30px; font-weight: 600; }
.home-heading p { margin: 0; color: var(--shop-muted); }
.home-heading--row { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; }
.home-heading--row h2 { margin-bottom: 0; }
.home-heading--row > a { padding-bottom: 5px; color: var(--shop-blue-dark); font-weight: 600; }

.home-hero { min-height: 390px; overflow: hidden; background: linear-gradient(115deg, #edf4f8 0%, #f9fbfc 58%, #e8f0f5 100%); }
.home-hero__inner { min-height: 390px; display: flex; align-items: center; }
.home-hero__copy { position: relative; z-index: 2; width: 48%; padding: 50px 0; }
.home-hero__copy h1 { margin: 10px 0 16px; color: #263848; font-family: Georgia, serif; font-size: 46px; font-weight: 400; line-height: 1.08; }
.home-hero__copy p { max-width: 500px; margin-bottom: 25px; color: #667986; font-size: 16px; line-height: 1.65; }
.home-primary-btn { display: inline-block; padding: 13px 23px; border-radius: 3px; color: #fff; background: var(--shop-blue); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.home-primary-btn:hover { color: #fff; background: var(--shop-blue-dark); text-decoration: none; }
.home-primary-btn .fa { margin-left: 14px; }
.home-hero__visual { position: relative; width: 52%; height: 390px; }
.hero-yarn { position: absolute; width: 255px; height: 255px; border: 8px solid rgba(255,255,255,.88); border-radius: 50%; object-fit: cover; box-shadow: 0 18px 45px rgba(44,83,110,.18); }
.hero-yarn--1 { z-index: 2; top: 66px; left: 92px; }
.hero-yarn--2 { top: 18px; right: -12px; width: 205px; height: 205px; }
.hero-yarn--3 { right: 4px; bottom: -42px; width: 225px; height: 225px; }
.hero-note { position: absolute; z-index: 3; top: 42px; left: 34px; width: 96px; height: 96px; padding-top: 25px; border-radius: 50%; color: #fff; background: var(--shop-orange); text-align: center; font-size: 11px; line-height: 1.3; transform: rotate(-7deg); box-shadow: 0 7px 18px rgba(188,80,29,.22); }

.home-finder { background: #fff; }
.finder-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--shop-line); border-radius: 4px; background: #fff; box-shadow: 0 8px 26px rgba(35,61,78,.06); }
.finder-column { position: relative; min-height: 300px; padding: 28px 28px 22px; border-right: 1px solid var(--shop-line); }
.finder-column:last-child { border-right: 0; }
.finder-icon { float: left; width: 34px; height: 34px; margin-right: 10px; padding-top: 7px; border-radius: 50%; color: var(--shop-blue); background: #eaf3f9; text-align: center; }
.finder-column h3 { min-height: 40px; margin: 6px 0 16px; font-size: 17px; font-weight: 600; }
.finder-column > a { display: flex; justify-content: space-between; padding: 6px 2px; color: #5d6d79; font-size: 13px; }
.finder-column > a span { color: #a0aab1; font-size: 11px; }
.finder-column > a:hover { color: var(--shop-blue-dark); text-decoration: none; }
.finder-column .finder-all { position: absolute; right: 26px; bottom: 19px; left: 26px; padding-top: 11px; border-top: 1px solid #edf0f2; color: var(--shop-blue-dark); font-weight: 600; }
.finder-az { margin-top: 18px; text-align: center; }
.finder-az a { color: var(--shop-blue-dark); font-weight: 600; }
.finder-az .fa { margin-left: 8px; }

.home-categories { background: var(--shop-wash); }
.category-discovery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.category-discovery-card { position: relative; height: 230px; overflow: hidden; border-radius: 4px; background: #dfe7ec; }
.category-discovery-card:after { position: absolute; inset: 35% 0 0; content: ''; background: linear-gradient(transparent, rgba(17,30,40,.82)); }
.category-discovery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.category-discovery-card:hover img { transform: scale(1.04); }
.category-discovery-card > span { position: absolute; z-index: 2; right: 15px; bottom: 16px; left: 15px; color: #fff; }
.category-discovery-card b { display: block; font-size: 16px; }
.category-discovery-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.78); }

.home-featured .home-product-grid { padding-top: 0; }
.home-product-grid .row { display: flex; flex-wrap: wrap; }
.home-product-grid .item { float: none; display: flex; }
.home-product-grid .item > div { display: flex; flex: 1; flex-direction: column; width: 100%; border-color: var(--shop-line); background: #fff; }
.home-product-grid .item .buy { margin-top: auto; }

/* Clear, consistent product information hierarchy across every product grid. */
.productList .item .name { padding: 12px 12px 10px; background: #fff; }
.productList .item .name h4.card-family { height: auto; min-height: 20px; margin: 0; padding: 0 !important; color: var(--shop-ink); font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left; text-transform: uppercase; }
.productList .card-color { min-height: 18px; margin: 2px 0 0; color: #5f6f7b; font-size: 12px; }
.productList .card-meta { min-height: 17px; margin: 7px 0; overflow: hidden; color: #89959e; font-size: 10px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.productList .item .name .price { margin-top: 8px; color: var(--shop-blue-dark); font-size: 17px; font-weight: 700; }
.productList .item .name .kod { color: #9ba5ad; font-size: 10px; font-weight: 500; }
.productList .select select { border-color: var(--shop-line); background: #f8fafb; }
.productList .buy a { min-height: 40px; padding: 10px 6px; font-size: 14px; font-weight: 600; }
.productList .buy .fa { margin-right: 3px; }
.tagg { top: 8px; left: 8px; }
.tagg .btn { border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,.14); text-transform: uppercase; letter-spacing: .04em; }
.home-trust { padding: 24px 0; color: #fff; background: var(--shop-blue); }
.home-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.home-trust__grid > div { display: flex; align-items: center; justify-content: center; gap: 13px; border-right: 1px solid rgba(255,255,255,.25); }
.home-trust__grid > div:last-child { border-right: 0; }
.home-trust__grid .fa { font-size: 27px; }
.home-trust__grid b, .home-trust__grid small { display: block; }
.home-trust__grid small { margin-top: 2px; color: rgba(255,255,255,.72); }

@media (max-width: 991px) {
  .shop-header .basket { text-align: left; }
  .home-hero__copy { width: 52%; }
  .home-hero__visual { width: 48%; }
  .hero-yarn--1 { left: 30px; }
  .hero-yarn--2, .hero-yarn--3 { right: -70px; }
  .finder-grid { grid-template-columns: repeat(2, 1fr); }
  .finder-column:nth-child(2) { border-right: 0; }
  .finder-column:nth-child(-n+2) { border-bottom: 1px solid var(--shop-line); }
  .category-discovery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Modern catalog listing (category / new-yarns / products / discount / search) -
   reuses the homepage's --shop-blue/--shop-orange design language instead of
   introducing a third one. */
.shop-listing { padding: 30px 0 60px; background: #fff; }
.shop-listing .container { max-width: 1180px; }
.shop-listing__crumb { margin: 0 0 8px; font-size: 12px; color: var(--shop-muted); }
.shop-listing__crumb a { color: var(--shop-muted); }
.shop-listing__crumb a:hover { color: var(--shop-blue-dark); text-decoration: none; }
.shop-listing__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.shop-listing__head h1 { margin: 0; color: var(--shop-ink); font-size: 26px; font-weight: 700; }
.shop-listing__head .shop-count { color: var(--shop-muted); font-size: 13px; }

.shop-pillbar { margin-bottom: 22px; }
.shop-pillbar__tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--shop-line); margin-bottom: 12px; }
.shop-pillbar__tab {
  padding: 0 0 9px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--shop-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.shop-pillbar__tab:hover { color: var(--shop-ink); }
.shop-pillbar__tab.is-active { color: var(--shop-ink); border-bottom-color: var(--shop-blue); }
.shop-pillbar__row {
  display: none; flex-wrap: nowrap; align-items: center; gap: 8px;
  overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.shop-pillbar__row.is-active { display: flex; }
.shop-pill {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px;
  padding: 6px 13px; border: 1px solid var(--shop-line); border-radius: 999px;
  background: #fff; color: #5b6873; font-size: 13px; white-space: nowrap; text-decoration: none;
}
.shop-pill:hover { border-color: var(--shop-blue); color: var(--shop-blue-dark); text-decoration: none; }
.shop-pill.is-active { border-color: var(--shop-blue); background: var(--shop-blue); color: #fff; }
.shop-pill span { color: inherit; opacity: .72; font-size: 11px; }

.shop-listing__grid { display: flex; gap: 34px; align-items: flex-start; }
.shop-listing__sidebar { flex: 0 0 230px; }
.shop-listing__main { flex: 1 1 auto; min-width: 0; }

.shop-filter { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--shop-line); }
.shop-filter:last-child { border-bottom: 0; }
.shop-filter h4 { margin: 0 0 12px; color: var(--shop-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shop-filter ul { margin: 0; padding: 0; list-style: none; max-height: 210px; overflow-y: auto; }
.shop-filter li { margin-bottom: 9px; font-size: 13px; }
.shop-filter a { display: flex; align-items: center; color: #445; text-decoration: none; }
.shop-filter a:hover { color: var(--shop-blue-dark); }
.shop-filter a .shop-checkbox {
  flex: 0 0 auto; width: 15px; height: 15px; margin-right: 9px;
  border: 1px solid #c7cfd6; border-radius: 3px; background: #fff; position: relative;
}
.shop-filter a.is-active .shop-checkbox { border-color: var(--shop-blue); background: var(--shop-blue); }
.shop-filter a.is-active .shop-checkbox:after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.shop-filter a .shop-count { margin-left: auto; padding-left: 10px; color: var(--shop-muted); font-size: 12px; }
.shop-filter a.is-active { color: var(--shop-blue-dark); font-weight: 600; }
.shop-filter-clear { display: inline-block; margin: 0 0 18px; color: var(--shop-blue-dark); font-size: 12px; font-weight: 600; text-decoration: none; }
.shop-filter-clear:hover { text-decoration: underline; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--shop-line); }
.shop-toolbar__count { color: var(--shop-muted); font-size: 13px; }
.shop-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--shop-muted); }
.shop-toolbar__sort select { border: 1px solid var(--shop-line); border-radius: 4px; padding: 6px 10px; color: var(--shop-ink); background: #fff; }

.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; }
.shop-listing__grid.is-full .shop-grid { grid-template-columns: repeat(4, 1fr); }
.shop-card { position: relative; }
.shop-card__img-wrap { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 4px; background: #f4f6f7; }
.shop-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.shop-card:hover .shop-card__img-wrap img { transform: scale(1.03); }
.shop-card__badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 2px; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--shop-blue); }
.shop-card__badge.is-sale { background: var(--shop-orange); }
.shop-card__brand { margin: 14px 0 3px; color: var(--shop-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.shop-card__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.shop-card__title a { color: var(--shop-ink); text-decoration: none; }
.shop-card__title a:hover { color: var(--shop-blue-dark); }
/* "New Colors" nav page (see storefront.js's /new-colors + productRepo's
   listNewColorsGrouped) - one card per yarn line, badge shows how many of its
   colors were just added rather than listing them individually. */
.shop-card__new-colors { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--shop-muted); font-size: 12px; font-weight: 600; }
.shop-card__new-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--shop-orange); color: #fff; font-size: 11px; font-weight: 700;
}
.shop-card__badge.is-new-colors { border-radius: 999px; padding: 4px 10px; text-transform: none; letter-spacing: 0; background: var(--shop-orange); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.shop-card__new-thumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.shop-card__new-thumb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s;
}
.shop-card__new-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card__new-thumb:hover { transform: scale(1.12); box-shadow: 0 0 0 1px var(--shop-blue); }
.shop-card__new-thumb.is-more { background: var(--shop-wash) !important; color: var(--shop-ink); font-size: 11px; font-weight: 700; text-decoration: none; }
.shop-card__choose-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px 0; border-radius: 4px;
  border: 1px solid var(--shop-blue); color: var(--shop-blue-dark); font-size: 13px; font-weight: 600; text-decoration: none;
}
.shop-card__choose-btn:hover { background: var(--shop-blue); color: #fff; text-decoration: none; }
@media (max-width: 767px) {
  .shop-card__new-thumb { width: 24px; height: 24px; }
  .shop-card__badge.is-new-colors { font-size: 10px; padding: 3px 8px; }
}
.shop-card__swatch { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.shop-card__swatch-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; display: inline-block; }
.shop-card__swatch-dot:hover { transform: scale(1.15); }
.shop-card__swatch-name, .shop-card__swatch-count { color: var(--shop-muted); font-size: 12px; margin-left: 2px; }
.shop-card__tags { margin: 0 0 10px; }
.shop-card__tags span { display: inline-block; margin: 0 5px 5px 0; padding: 2px 8px; border-radius: 3px; background: var(--shop-wash); color: #5b6873; font-size: 11px; }
.shop-card__in-cart { margin: 0 0 6px; color: #b42318; font-size: 11px; }
.shop-card__foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 2px; }
.shop-card__price { color: var(--shop-ink); font-size: 15px; font-weight: 700; }
.shop-card__price-was { margin-left: 4px; color: var(--shop-muted); font-size: 12px; text-decoration: line-through; }
.shop-card__view { color: var(--shop-blue-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.shop-card__view:hover { text-decoration: underline; }
.shop-card__cart { margin-top: 10px; }
.shop-card__cart select.pack-select { width: 100%; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--shop-line); border-radius: 4px; font-size: 12px; background: #fff; color: var(--shop-ink); }
.shop-card__cart-row { display: flex; gap: 6px; }
.shop-card__cart-row form.card-add-form { flex: 1; }
.shop-card__cart-row a.card-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 0; border-radius: 4px; color: #fff; font-size: 13px; font-weight: 600;
  background: var(--shop-blue); text-decoration: none;
}
.shop-card__cart-row a.card-add-btn:hover { background: var(--shop-blue-dark); color: #fff; text-decoration: none; }
.shop-card__cart-row form.card-remove-form { flex: 0 0 40px; }
.shop-card__cart-row a.card-remove-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 4px; color: #fff; background: #b42318; text-decoration: none;
}

@media (max-width: 991px) {
  .shop-grid, .shop-listing__grid.is-full .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-listing__sidebar { flex: 0 0 200px; }
}
@media (max-width: 767px) {
  .shop-listing__grid { flex-direction: column; }
  .shop-listing__sidebar { flex: 1 1 auto; width: 100%; }
  .shop-filter ul { max-height: none; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .shop-listing__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 767px) {
  .shop-header .gray { padding: 9px 0; }
  .shop-header__brand-wrap { min-height: 45px; }
  .shop-header .navbar-header { display: flex; align-items: center; justify-content: space-between; }
  .shop-header .navbar-brand { max-width: calc(100% - 100px); padding-left: 15px; }
  .shop-header__mobile-tools { display: flex; }
  .shop-header__mobile-cart { display: flex; }
  .shop-header .basket { display: none; }
  .shop-header__drawer-utils { display: block; }
  .shop-header .navbar-form { margin: 6px 15px; }
  .shop-header .navbar-form { border: 0; box-shadow: none; }
  .shop-header #navbar { height: auto !important; text-align: left; }
  .shop-header #navbar ul { display: block; margin: 0 -15px; }
  .shop-header #navbar ul li a { padding: 11px 20px; }
  .home-section { padding: 42px 0; }
  .home-hero, .home-hero__inner { min-height: 520px; }
  .home-hero__inner { display: block; }
  .home-hero__copy { width: 100%; padding: 38px 4px 12px; text-align: center; }
  .home-hero__copy h1 { max-width: 100%; font-size: 32px; line-height: 1.12; }
  .home-hero__copy p { font-size: 14px; }
  .home-hero__visual { width: 100%; height: 225px; }
  .hero-yarn { width: 170px; height: 170px; }
  .hero-yarn--1 { top: 22px; left: 50%; transform: translateX(-50%); }
  .hero-yarn--2 { top: 48px; right: -55px; width: 135px; height: 135px; }
  .hero-yarn--3 { bottom: -12px; left: -54px; width: 140px; height: 140px; }
  .hero-note { top: 5px; left: 14px; width: 76px; height: 76px; padding-top: 19px; font-size: 9px; }
  .home-heading h2 { font-size: 25px; }
  .home-heading--row { align-items: flex-start; }
  .home-heading--row > a { max-width: 120px; text-align: right; font-size: 12px; }
  .finder-grid { grid-template-columns: 1fr; }
  .finder-column { min-height: 0; padding-bottom: 22px; border-right: 0; border-bottom: 1px solid var(--shop-line); }
  .finder-column .finder-all { position: static; margin-top: 10px; }
  .finder-column:nth-child(3) { border-bottom: 1px solid var(--shop-line); }
  .finder-column:last-child { border-bottom: 0; }
  .category-discovery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-discovery-card { height: 190px; }
  .home-product-grid .item { width: 50%; padding-right: 7px; padding-left: 7px; }
  .home-product-grid .row { margin-right: -7px; margin-left: -7px; }
  .productList .item .name { padding: 9px; }
  .productList .item .name h4.card-family { min-height: 34px; font-size: 11px; }
  .productList .card-color { font-size: 11px; }
  .productList .card-meta { font-size: 9px; }
  .card-add-label { display: none; }
  .home-trust__grid { grid-template-columns: 1fr; gap: 0; }
  .home-trust__grid > div { justify-content: flex-start; padding: 14px 25px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .home-trust__grid > div:last-child { border-bottom: 0; }
}

/* Basket page - a flex-row list instead of a Bootstrap <table> (tables don't
   reflow on narrow screens without extra markup; this collapses to a stacked
   card per line naturally via flex-wrap, no separate mobile layout needed). */
.basket-page { padding: 30px 15px 60px; }
.basket-page h1 { margin: 0 0 20px; color: var(--shop-ink); font-size: 26px; }
.basket-lines { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--shop-line); }
.basket-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--shop-line); }
.basket-line__img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: var(--shop-wash); }
.basket-line__img img { width: 100%; height: 100%; object-fit: cover; }
.basket-line__info { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.basket-line__title { color: var(--shop-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.basket-line__title:hover { color: var(--shop-blue-dark); }
.basket-line__meta { color: var(--shop-muted); font-size: 12px; }
/* Header account dropdown's "Log out" - a <form><button> made to look like the
   sibling <a> menu items (Bootstrap's .dropdown-menu li a styling), since a real
   logout has to be a POST, not a link. */
.btn-link-logout { display: block; width: 100%; padding: 3px 20px; border: 0; background: none; text-align: left; font-size: 14px; line-height: 1.42857143; color: #333; cursor: pointer; }
.btn-link-logout:hover { background: #f5f5f5; color: #262626; }

.basket-line__qty { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.basket-line__qty-val { min-width: 56px; text-align: center; font-size: 13px; color: var(--shop-ink); }
.basket-line__qty button { padding: 6px 10px; border: 1px solid var(--shop-line); border-radius: 4px; background: #fff; color: var(--shop-ink); font-size: 12px; cursor: pointer; }
.basket-line__qty button:hover { border-color: var(--shop-blue); color: var(--shop-blue-dark); }
.basket-line__qty button:disabled { opacity: .4; cursor: not-allowed; }
.basket-line__qty button:disabled:hover { border-color: var(--shop-line); color: var(--shop-ink); }
.basket-line__total { flex: 0 0 auto; min-width: 70px; color: var(--shop-ink); font-weight: 700; text-align: right; }
.basket-line__remove button { padding: 6px 10px; border: 0; background: none; color: #b42318; font-size: 13px; cursor: pointer; }
.basket-line__remove button:hover { text-decoration: underline; }
.basket-summary { display: flex; justify-content: space-between; max-width: 320px; margin: 0 0 20px auto; padding-top: 12px; border-top: 2px solid var(--shop-ink); font-size: 17px; font-weight: 700; color: var(--shop-ink); }
.basket-checkout-btn { display: block; max-width: 320px; margin-left: auto; padding: 14px; border-radius: 4px; background: var(--shop-blue); color: #fff; text-align: center; font-weight: 700; text-decoration: none; }
.basket-checkout-btn:hover { background: var(--shop-blue-dark); color: #fff; text-decoration: none; }

@media (max-width: 480px) {
  .basket-line { position: relative; padding-right: 0; }
  .basket-line__total { order: 3; margin-left: 80px; }
  .basket-line__qty { order: 2; margin-left: 80px; }
  .basket-line__remove { position: absolute; top: 16px; right: 0; }
  .basket-summary, .basket-checkout-btn { max-width: none; }
}

/* 404 page - previously a bare "404 / Not found." with no nav or way back;
   reuses the same nav/footer and .home-primary-btn CTA as the rest of the
   site instead of stranding the visitor. */
.error-404 { max-width: 480px; margin: 0 auto; padding: 70px 15px 90px; text-align: center; }
.error-404 h1 { font-size: 72px; margin: 0; color: var(--shop-blue); font-weight: 700; }
.error-404 p { color: var(--shop-muted); font-size: 16px; margin: 12px 0 28px; }

/* Search/listing empty state - previously just "No products found." with no
   way forward. Same pattern as .error-404: a CTA back into the catalog, plus
   a few real (non-empty) categories pulled from the same sidebar data. */
.shop-empty { padding: 40px 15px 60px; text-align: center; }
.shop-empty__title { font-size: 20px; font-weight: 700; color: var(--shop-ink); margin: 0 0 6px; }
.shop-empty__hint { color: var(--shop-muted); font-size: 14px; margin: 0 0 24px; }
.shop-empty__categories { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 28px 0 0; }
.shop-empty__categories a { display: inline-block; padding: 7px 16px; border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-ink); font-size: 13px; text-decoration: none; }
.shop-empty__categories a:hover { border-color: var(--shop-blue); color: var(--shop-blue-dark); text-decoration: none; }

/* Product detail breadcrumb (.breadcrumb, detail.ejs only): each segment after
   Back/Home is a <div> for the non-link (texture/parent category) segments -
   <div> is block-level by default with no rule making it sit inline here, so
   with more than one segment they stacked on separate lines instead of
   reading as one breadcrumb trail. */
.breadcrumb > div { display: inline-block; }

/* Product detail main image - main.css only sets width:100%/height:auto, so the
   image's real height is unknown until it loads and everything below (title,
   price, add-to-cart) jumps down - a layout shift on the page visitors actually
   convert on. aspect-ratio reserves the space upfront, same pattern already used
   for every other product image on the site (listing cards, quick-view). */
.productDetail .left .img { aspect-ratio: 1 / 1; overflow: hidden; background: #f7f7f7; }
.productDetail .left .img img { width: 100%; height: 100%; object-fit: cover; }
/* Rounded corners + a hard size cap on every product-detail image. Non-Shopify
   URLs (e.g. yarn.im) aren't resized by shopifyImage(), so a raw 1600px file can
   land in any slot; the caps keep it inside its box. */
.productDetail .left .img { border-radius: 12px; max-height: 720px; }
.productDetail .left ul img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; max-width: 100%; }
.soldOutColors img { max-width: 64px; max-height: 64px; }

/* Product detail "sold out colors" section - other colors in the same yarn line
   with no current stock, shown as color-swatch pills (name + code) rather than
   product-photo cards, since the point here is "pick a color to follow," not a
   browsable image grid - the Colors/Related/Recently Viewed sections above already
   cover that. Each pill links to that color's own product page (see storefront.js's
   POST /notify-stock, stockNotifyRepo, and the .pdp-notify block below for what's
   there when it's still out of stock). */
.soldOutColors { padding: 34px 0 44px; border-top: 1px solid var(--shop-line); }
.soldOutColors__title { margin: 0 0 6px; color: var(--shop-ink); font-size: 20px; font-weight: 700; }
.soldOutColors__hint { margin: 0 0 20px; color: var(--shop-muted); font-size: 13px; }
.soldOutColors__list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.soldOutColors__pill {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--shop-line); border-radius: 999px;
  background: #fff; color: var(--shop-ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.soldOutColors__pill:hover { border-color: var(--shop-blue); box-shadow: 0 2px 8px rgba(35,61,78,.08); color: var(--shop-ink); text-decoration: none; }
.soldOutColors__dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); background-size: cover; }
.soldOutColors__name { font-size: 14px; font-weight: 600; }
.soldOutColors__sku { color: var(--shop-muted); font-size: 12px; }
.soldOutColors__pill--img { padding: 5px 14px 5px 5px; }
.soldOutColors__thumb { flex: 0 0 auto; width: 28px; height: 28px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

@media (max-width: 767px) {
  .soldOutColors__pill { padding: 8px 13px; }
  .soldOutColors__pill--img { padding: 4px 12px 4px 4px; }
  .soldOutColors__thumb { width: 26px; height: 26px; }
}

/* Product detail page's own "Notify Me" - only rendered when the product being
   viewed is itself out of stock (see detail.ejs), replacing the Add To Cart
   form in that case. Plain inline badge, not the theme's .tagg/.btn-soldout
   (those are absolutely-positioned for a corner-of-an-image placement on
   product cards - dropped inline here with no positioned ancestor, it landed
   off-page instead of showing). */
.pdp-soldout-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 5px 10px; border-radius: 2px; color: #fff; background: #767676;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pdp-notify { display: flex; gap: 8px; max-width: 420px; }
.pdp-notify .notify-email {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;
}
.pdp-notify .notify-submit {
  flex: 0 0 auto; padding: 8px 14px; border: none; border-radius: 3px; background: #1978c8; color: #fff;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.pdp-notify .notify-submit:disabled { opacity: 0.6; cursor: default; }
.pdp-notify-done { color: #1a7f37; font-size: 13px; margin: 8px 0 0; }

/* Favorite/wishlist heart - card corner badge (.shop-card and .content .item
   .img are already position:relative ancestors, both defined above in this
   file - same as the New/Sale .shop-card__badge/.tagg badges those already
   host) and the product detail page's own inline button. */
.fav-toggle-form { margin: 0; }
.fav-toggle-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #767676; font-size: 15px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.fav-toggle-btn:hover { color: #b42318; }
.fav-toggle-btn.is-favorited { color: #b42318; }
.pdp-fav-form { margin-top: 10px; }
.pdp-fav-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #444;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pdp-fav-btn:hover { border-color: #b42318; color: #b42318; }
.pdp-fav-btn.is-favorited { border-color: #b42318; color: #b42318; }
.pdp-fav-btn.is-favorited i { color: #b42318; }

.shop-listing__intro { margin: 0 0 18px; max-width: 760px; color: #5b6673; font-size: 15px; line-height: 1.6; }

.home-site-content { overflow-wrap: anywhere; }
.home-site-content img { max-width: 100%; height: auto; }
.home-site-content table { max-width: 100%; }

.account-icon-row { display:flex; align-items:center; gap:4px; padding:6px 10px; }
.account-icon-action { display:inline-flex!important; align-items:center; justify-content:center; width:44px; height:44px; padding:8px!important; border:0; border-radius:8px; background:transparent; color:inherit; cursor:pointer; text-decoration:none; }
.account-icon-action:hover { background:#edf3f8; color:#23527c; }
.account-icon-action:focus-visible { outline:2px solid #23527c; outline-offset:2px; }