/* Catalogue navigation and page layout. Shared, deliberately unminified. */
.masthead { position: relative; z-index: 35; }
.nav-category { position: relative; }
.nav-category summary { cursor: pointer; list-style: none; white-space: nowrap; }
.nav-category summary::-webkit-details-marker { display: none; }
.nav-category summary::after { content: '⌄'; margin-left: 7px; }
.category-menu {
  position: absolute; left: 0; top: calc(100% + 14px); z-index: 40;
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 4px; width: 420px; max-height: 65vh; overflow: auto;
  padding: 18px; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 12px 35px #152e2620;
}
.category-menu a { padding: 9px; border-radius: 2px; }
.category-menu a:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.category-menu a:hover, .category-menu a:focus-visible { background: var(--tint); }
.category-browser { margin: 24px 0; }
.category-browser a[aria-current] { background: var(--ink); color: #fff; }
.category-browser small { margin-left: 5px; opacity: .7; }
.category-description { max-width: 800px; color: var(--muted); }
.product-info { min-width: 0; }
.product-info h1 { width: 100%; overflow-wrap: anywhere; }
.product-info h1.title-medium { font-size: clamp(36px, 4vw, 60px); letter-spacing: -1.5px; }
.product-info h1.title-long { font-size: clamp(31px, 3.2vw, 48px); letter-spacing: -.8px; }
.product-info .product-description { width: 100%; max-width: none; margin-bottom: 24px; }
.product-description p { max-width: none; }
.product-description :is(h2,h3) { font-size: 23px; margin: 22px 0 12px; }
.product-description :is(ul,ol) { padding-left: 22px; }
.product-description table { width: 100%; border-collapse: collapse; }
.product-description :is(td,th) { padding: 7px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.product-description a { overflow-wrap: anywhere; }
.price-reduction { color: #7b3a24; font-size: 13px; line-height: 1.6; }
.price-reduction-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.price-reduction del { color: var(--muted); font-size: 15px; }
.sale-price-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.sale-price-pair > .price-reduction { margin: 0; }
.sale-price-pair .price-reduction-summary { flex-direction: column; align-items: flex-start; gap: 3px; }
.sale-price-pair .price-reduction del {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #67685e;
  text-decoration-thickness: 2px;
}
.sale-price-pair .price-reduction-summary > span {
  padding: 3px 7px;
  background: #f8e6cc;
  color: #783c21;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.sale-price-pair .card-price { flex: 1; min-width: 0; flex-wrap: wrap; }
@media (max-width: 560px) {
  .sale-price-pair { gap: 8px; }
  .sale-price-pair .price-reduction del { font-size: 22px; }
}

/* Two real layout regions. The page scrolls in the available viewport above
   the notice, so text and the yarn purchase bar can never slide behind it.
   Wrapped text, zoom and reopening the notice need no height calculation. */
body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.site-scroll {
  flex: 1 1 auto; min-height: 0; width: 100%; position: relative; overflow: auto;
  scroll-behavior: smooth; scroll-padding-top: 24px; scroll-padding-bottom: 20px;
}
.sticky-choice { bottom: 12px; }
.cookie-banner {
  position: relative; bottom: auto; left: auto; right: auto; max-width: none;
  flex-shrink: 0; width: 100%;
  padding: 18px 0; border: 0; border-top: 1px solid #c8d4c8;
  box-shadow: 0 -4px 25px #152e2612;
}
.cookie-content { max-width: 1440px; margin: auto; padding: 0 64px; display: flex; align-items: center; gap: 40px; }
.cookie-content > div:first-child { flex: 1; min-width: 0; }
.cookie-banner strong { font-size: 24px; }
.cookie-banner p { margin: 6px 0 0; max-width: 980px; }
.cookie-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.cookie-actions a { font-size: 12px; }
@media (max-width: 1000px) {
  .main-nav { gap: 16px; }
  .cookie-content { padding: 0 30px; gap: 24px; }
}
@media (max-width: 820px) {
  .nav-category { position: static; }
  .category-menu { top: 100%; left: 20px; right: 20px; width: auto; }
}
@media (max-width: 560px) {
  .main-nav { flex-wrap: wrap; justify-content: flex-start; gap: 14px 22px; }
  .product-info h1 { font-size: 44px; letter-spacing: -1.5px; }
  .product-info h1.title-medium { font-size: 36px; letter-spacing: -1px; }
  .product-info h1.title-long { font-size: 31px; letter-spacing: -.5px; }
  .product-info .product-description { font-size: 14px; line-height: 1.8; }
  .cookie-banner { left: auto; right: auto; bottom: auto; padding: 15px 0 max(15px, env(safe-area-inset-bottom)); }
  .cookie-content { padding: 0 20px; display: block; }
  .cookie-banner strong { font-size: 22px; }
  .cookie-banner p { font-size: 11px; line-height: 1.6; }
  .cookie-actions { margin-top: 12px; }
  .cookie-banner a { margin: 0; }
  .sticky-choice { bottom: 7px; }
}
@media print {
  body { height: auto; overflow: visible; display: block; }
  .site-scroll { overflow: visible; height: auto; }
}
/* Additional facts stay available without making the compact search crowded. */
.catalog-more-filters { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 15px; }
.catalog-more-filters summary { cursor: pointer; font-size: 13px; padding: 5px 0; }
.catalog-property-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
@media(max-width:1100px) { .catalog-property-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:820px) { .catalog-property-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .catalog-property-grid { gap: 12px; } .catalog-property-grid label:first-child { grid-column: auto; } }
.product-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.product-gallery a { width: 85px; height: 85px; display: block; border: 1px solid var(--line); background: #fff; padding: 5px; }
.product-gallery img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery a[aria-current=true] { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.product-gallery-controls { display: flex; align-items: center; gap: 15px; margin: 18px 0 0; font-size: 12px; }
.product-gallery-controls button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); font-size: 20px; }
.product-gallery-controls span { flex: 1; text-align: center; }
[data-product-gallery] .image-stage { touch-action: pan-y pinch-zoom; }
[data-product-gallery] .selected-photo { z-index: 2; }
.product-zoom-open { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; cursor: zoom-in; }
.product-zoom-open span { position: absolute; bottom: 18px; left: 18px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface,#fff); font-size: 12px; }
.product-zoom-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.product-zoom-open[hidden], [data-product-zoom-toggle][hidden] { display: none; }
.product-zoom-dialog { width: min(1400px,96vw); height: min(1000px,94dvh); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid var(--line); color: var(--ink); background: var(--surface,#fff); }
.product-zoom-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.product-zoom-dialog::backdrop { background: #142b28c9; }
.product-zoom-toolbar { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.product-zoom-toolbar > div { min-width: 0; flex: 1; }
.product-zoom-toolbar strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.product-zoom-toolbar span { display: block; font-size: 12px; margin-top: 5px; color: var(--muted); }
.product-zoom-dialog button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); font-size: 12px; flex-shrink: 0; }
.product-zoom-canvas { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #f3f3ee; }
.product-zoom-canvas[data-original-size=true] { cursor: grab; }
.product-zoom-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.product-zoom-surface { display: grid; place-items: center; width: max-content; min-width: 100%; min-height: 100%; }
.product-zoom-surface img { display: block; max-width: none; object-fit: contain; user-select: none; }
.product-zoom-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.product-zoom-footer p { font-size: 12px; margin: 0; text-align: center; line-height: 1.5; }
@media(max-width:560px) {
  .product-gallery a { width: 68px; height: 68px; }
  .product-zoom-open span { bottom: 12px; left: 12px; padding: 8px; font-size: 11px; }
  .product-zoom-dialog { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border: 0; }
  .product-zoom-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .product-zoom-toolbar > div { flex-basis: calc(100% - 100px); }
  .product-zoom-toolbar strong { font-size: 14px; }
  .product-zoom-toolbar [data-product-zoom-toggle] { order: 1; }
  .product-zoom-footer { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .product-zoom-footer p { flex-basis: 100%; order: 1; text-align: left; font-size: 11px; }
}
.payment-choice{display:grid;gap:8px;margin:20px 0}.bank-instructions{border:1px solid #94ac9e;background:#f8fbf7;border-radius:12px;padding:22px;margin:24px 0}.bank-payment-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}.bank-payment-grid dt{font-size:13px;color:#57665d;margin-top:14px}.bank-payment-grid dd{margin:3px 0;overflow-wrap:anywhere;font-size:17px}.bank-qr img{max-width:100%;height:auto;background:white}.bank-qr p{font-size:13px}.bank-paid{padding:18px;background:#e7f1e4;border-radius:8px}@media(max-width:680px){.bank-payment-grid{grid-template-columns:1fr}.bank-instructions{padding:16px}.bank-qr{max-width:280px;margin:auto}}

/* Compact site-wide search replaces the category links while expanded. */
.header-search{display:flex;align-items:center;flex-shrink:0;margin:0;min-width:0}
.header-search-toggle{display:grid;place-items:center;min-width:34px;min-height:34px;padding:4px;border-radius:5px;color:var(--accent)}
.header-search-toggle:hover{background:var(--tint)}
.header-search-fields[hidden]{display:none!important}
.header-search-fields{display:flex;align-items:center;flex:1;min-width:0;margin-right:8px;animation:header-search-reveal .16s ease-out}
.header-search-fields input{flex:1;width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:14px}
.main-nav[data-search-open]>:not(.header-search){display:none}
.main-nav[data-search-open] .header-search{flex:1;width:100%}
@media(max-width:820px){.header-search-fields input{font-size:16px}.main-nav[data-search-open]{flex-wrap:nowrap}}
@keyframes header-search-reveal{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.header-search-fields{animation:none}}
@media(max-width:560px){.main-nav{column-gap:6px}.header-search-fields{margin-right:6px}}

.shop-intro>.home-intro-copy{width:100%;max-width:none}
.shop-intro>.home-intro-copy>p:not(.eyebrow){max-width:none}

/* Search suggestions stay within the viewport and reuse the menu search. */
.header-search{position:relative}.search-suggestions{position:absolute;top:calc(100% + 8px);right:0;width:min(540px,82vw);max-height:420px;overflow-y:auto;z-index:80;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px #17342b24}.search-suggestions[hidden]{display:none}.search-suggestions a{display:flex;flex-direction:column;gap:4px;padding:12px 15px;border-bottom:1px solid var(--line);white-space:normal}.search-suggestions a:hover,.search-suggestions [aria-selected=true]{background:var(--tint)}.search-suggestions small{font-size:12px}.reorder-panel{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:10px;background:#fff}.reorder-row{padding:16px 0;border-bottom:1px solid var(--line)}.reorder-row input[type=number]{width:90px;padding:8px}.reorder-row p{margin:6px 0}.order-history{flex-wrap:wrap}.reorder-panel button{margin:14px 8px 0 0}

/* Search actions share the primary row; technical facts stay in details. */
.catalog-filters { grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)) 44px; }
.catalog-filters > .catalog-search-submit { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; }
.catalog-search-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media(max-width:1100px) { .catalog-filters { grid-template-columns: repeat(3,minmax(0,1fr)) 44px; } .catalog-filters > label:first-child { grid-column: 1 / -1; } }
@media(max-width:560px) { .catalog-filters { grid-template-columns: repeat(2,minmax(0,1fr)) 44px; } .catalog-filters > label:nth-child(4) { grid-column: 1 / 3; } }