/* Homepage holiday gift module (.kcg). Built from the KnifeCenter design system; design canvas UdjNkRNe8wnxjYerL7jANG. Tabs: /assets/home-gift-module-1.js. v2 (2026-11-12): winter hero + no panel heading, "All gifts" link sits at the end of the chips row. */
.kcg{--orange:#f05a29;--orange-strong:#cc4900;--orange-deep:#b03f00;--orange-text:#bb3800;--on-orange:#ffffff;--ink-900:#222222;--ink-800:#333333;--ink-700:#595959;--on-ink:#ffffff;--surface:#ffffff;--surface-sunk:#f5f5f5;--surface-band:#e8e8e8;--rule-soft:#e8e8e8;--rule:#dddddd;--rule-strong:#8a8a8a;--link:#17608f;--accent-link:var(--link);
  max-width:1200px;margin:0 auto 30px;text-align:left;font-family:"Open Sans",Arial,Helvetica,sans-serif;font-size:14px;line-height:20px;color:var(--ink-800);-webkit-font-smoothing:antialiased}
.kcg *,.kcg *::before,.kcg *::after{box-sizing:border-box}
.kcg :focus-visible{outline:2px solid var(--link);outline-offset:2px}
.kcg-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 48px;background:var(--ink-900);color:var(--on-ink)}
.kcg-hero :focus-visible{outline-color:var(--on-ink)}
.kcg-eyebrow{margin:0 0 10px;font-size:16px;line-height:22px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--orange)}
.kcg-h2{margin:0;font-size:44px;line-height:52px;font-weight:500;color:inherit}
.kcg a.kcg-btn,.kcg a.kcg-btn:visited{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:8px;background:var(--orange-strong);color:var(--on-orange);font-size:16px;line-height:20px;font-weight:600;text-decoration:none;transition:background-color 150ms ease,transform 100ms ease-out}
.kcg-btn:active{transform:scale(.98)}
.kcg-tabs{display:flex;gap:28px;padding:0 48px;background:var(--surface);border-bottom:1px solid var(--rule-soft);overflow-x:auto;scrollbar-width:none}
.kcg-tabs::-webkit-scrollbar{display:none}
/* Edge fade only while tabs are hidden that way (JS sets data-more-*), so the row reads as swipeable. */
.kcg-tabs[data-more-right]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.kcg-tabs[data-more-left]{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px);mask-image:linear-gradient(to right,transparent,#000 56px)}
.kcg-tabs[data-more-left][data-more-right]{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.kcg-tab{position:relative;flex-shrink:0;min-height:48px;padding:15px 0;border:0;background:none;font:inherit;font-size:15px;line-height:18px;font-weight:600;color:var(--ink-700);white-space:nowrap;cursor:pointer;transition:color 150ms ease}
.kcg-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange-strong);opacity:0;transition:opacity 150ms ease}
.kcg-tab[aria-selected="true"]{color:var(--ink-800)}
.kcg-tab[aria-selected="true"]::after{opacity:1}
.kcg-tab:focus-visible{outline-offset:-2px}
.kcg-panels{padding:24px 48px 36px;background:var(--surface-sunk)}
.kcg a.kcg-all,.kcg a.kcg-all:visited{flex-shrink:0;margin-left:6px;font-weight:600;color:var(--accent-link);text-decoration:none}
.kcg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kcg a.kcg-card,.kcg a.kcg-card:visited{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--rule);border-radius:6px;color:inherit;text-decoration:none;transition:border-color 150ms ease}
.kcg-card-img{display:flex;align-items:center;justify-content:center;height:240px;padding:8px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--rule-soft)}
.kcg-card-img img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.kcg-card-body{display:flex;flex-direction:column;flex:1 1 auto;gap:4px;padding:16px}
.kcg-card-title{font-size:16px;line-height:22px;font-weight:600;color:var(--ink-900)}
.kcg-card-desc{font-size:13px;line-height:18px;color:var(--ink-700)}
.kcg .kcg-card-cta{margin-top:auto;padding-top:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--accent-link)}
.kcg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
.kcg-chips-label{margin-right:4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink-900)}
.kcg a.kcg-chip,.kcg a.kcg-chip:visited{display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;border:1px solid var(--rule);border-radius:18px;background:var(--surface);font-size:14px;line-height:1.2;color:var(--ink-800);text-decoration:none;transition:border-color 150ms ease,color 150ms ease,transform 100ms ease-out}
.kcg-chip:active{transform:scale(.97)}
.kcg a:hover,.kcg a:focus{text-decoration:none}
@media (hover:hover){
  .kcg a.kcg-btn:hover{background:var(--orange-deep)}
  .kcg-tab:hover{color:var(--ink-800)}
  .kcg a.kcg-all:hover{text-decoration:underline}
  .kcg a.kcg-card:hover{border-color:var(--rule-strong)}
  .kcg a.kcg-card:hover .kcg-card-cta{text-decoration:underline}
  .kcg a.kcg-chip:hover{border-color:var(--orange-strong);color:var(--orange-strong)}
}
@media (max-width:979px){.kcg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .kcg-hero{flex-direction:column;align-items:stretch;padding:24px 16px}
  .kcg-h2{font-size:28px;line-height:34px}.kcg-eyebrow{font-size:14px;line-height:20px}
  .kcg-btn{width:100%}
  .kcg-tabs{gap:24px;padding:0 16px}
  .kcg-panels{padding:24px 16px}
  .kcg-grid{gap:12px}
  .kcg-card-img{height:170px;padding:6px}
  .kcg-card-body{padding:12px}
  .kcg-card-title{font-size:14px;line-height:20px}
  .kcg-card-cta{display:none}
  .kcg-chips-label{width:100%}
  .kcg a.kcg-chip{min-height:44px}
  .kcg a.kcg-all{display:inline-block;padding:12px 0;line-height:20px;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.kcg *{transition:none!important;transform:none!important}}

/* ===== Seasonal: winter hero (Josh K, 2026-11-12). To revert, delete this block and the four aria-hidden spans at the end of .kcg-hero in index.html. =====
   Snow is a 640x400 tile of randomly scattered dots (no visible grid), split into two layers that fall once (4.5s) and then stay still: looping motion would need a pause control (WCAG 2.2.2).
   Navy is a seasonal exception to the ink-900 hero (FLAG for Bruce). Gradient ends at #10294a so the orange eyebrow stays >= 4.5:1 everywhere. */
.kcg{--kcg-flake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M0 -6V-46M0 -32L-9 -41M0 -32L9 -41M0 -19L-7 -26M0 -19L7 -26'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Ccircle r='6'/%3E%3C/g%3E%3C/svg%3E")}
.kcg .kcg-hero{position:relative;overflow:hidden;isolation:isolate;background:#fff linear-gradient(180deg,#0b1b30 0%,#10294a 100%) 0 0/100% calc(100% - 4px) no-repeat;padding-bottom:40px}
/* Navy stops 4px short and the drift sits on the edge: a fractional hero height otherwise leaves a navy hairline under the drift (Bruce, 11-12). */
.kcg .kcg-hero::before,.kcg .kcg-snow{content:"";position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none}
/* Same 95 dots as before, split by size: small/dim = far layer, large = near layer. At rest they line up exactly as one tile. */
.kcg .kcg-hero::before{bottom:-40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400'%3E%3Cg fill='white'%3E%3Ccircle cx='567' cy='383' r='0.8' fill-opacity='0.59'/%3E%3Ccircle cx='195' cy='37' r='1' fill-opacity='0.61'/%3E%3Ccircle cx='398' cy='131' r='1' fill-opacity='0.56'/%3E%3Ccircle cx='479' cy='252' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='168' cy='113' r='0.9' fill-opacity='0.57'/%3E%3Ccircle cx='2' cy='222' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='294' cy='360' r='0.7' fill-opacity='0.47'/%3E%3Ccircle cx='446' cy='344' r='1' fill-opacity='0.61'/%3E%3Ccircle cx='557' cy='265' r='0.9' fill-opacity='0.62'/%3E%3Ccircle cx='551' cy='99' r='1' fill-opacity='0.57'/%3E%3Ccircle cx='92' cy='13' r='1' fill-opacity='0.68'/%3E%3Ccircle cx='149' cy='333' r='0.7' fill-opacity='0.56'/%3E%3Ccircle cx='542' cy='192' r='0.7' fill-opacity='0.57'/%3E%3Ccircle cx='500' cy='391' r='1' fill-opacity='0.59'/%3E%3Ccircle cx='71' cy='328' r='1' fill-opacity='0.57'/%3E%3Ccircle cx='528' cy='127' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='95' cy='220' r='0.9' fill-opacity='0.54'/%3E%3Ccircle cx='5' cy='353' r='0.9' fill-opacity='0.62'/%3E%3Ccircle cx='321' cy='365' r='0.9' fill-opacity='0.49'/%3E%3Ccircle cx='220' cy='251' r='1' fill-opacity='0.62'/%3E%3Ccircle cx='276' cy='92' r='1' fill-opacity='0.64'/%3E%3Ccircle cx='622' cy='34' r='0.7' fill-opacity='0.39'/%3E%3Ccircle cx='126' cy='376' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='405' cy='331' r='0.9' fill-opacity='0.49'/%3E%3Ccircle cx='169' cy='23' r='0.7' fill-opacity='0.46'/%3E%3Ccircle cx='426' cy='105' r='1' fill-opacity='0.63'/%3E%3Ccircle cx='120' cy='274' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='41' cy='54' r='1' fill-opacity='0.53'/%3E%3Ccircle cx='503' cy='42' r='0.8' fill-opacity='0.46'/%3E%3Ccircle cx='452' cy='89' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='584' cy='88' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='410' cy='42' r='1' fill-opacity='0.53'/%3E%3Ccircle cx='53' cy='217' r='0.8' fill-opacity='0.47'/%3E%3Ccircle cx='250' cy='126' r='1' fill-opacity='0.49'/%3E%3Ccircle cx='245' cy='157' r='1' fill-opacity='0.53'/%3E%3Ccircle cx='210' cy='148' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='531' cy='78' r='0.9' fill-opacity='0.46'/%3E%3C/g%3E%3C/svg%3E") 0 0/640px 400px repeat}
.kcg .kcg-snow{bottom:-400px;right:-14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400'%3E%3Cg fill='white'%3E%3Ccircle cx='135' cy='202' r='1.2' fill-opacity='0.71'/%3E%3Ccircle cx='156' cy='142' r='1.4' fill-opacity='0.72'/%3E%3Ccircle cx='618' cy='197' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='218' cy='336' r='1.6' fill-opacity='0.68'/%3E%3Ccircle cx='43' cy='264' r='1.6' fill-opacity='0.85'/%3E%3Ccircle cx='359' cy='168' r='1.4' fill-opacity='0.64'/%3E%3Ccircle cx='92' cy='40' r='1.6' fill-opacity='0.81'/%3E%3Ccircle cx='356' cy='329' r='1.2' fill-opacity='0.63'/%3E%3Ccircle cx='195' cy='213' r='1.9' fill-opacity='0.87'/%3E%3Ccircle cx='586' cy='197' r='1.1' fill-opacity='0.64'/%3E%3Ccircle cx='461' cy='64' r='1.9' fill-opacity='0.78'/%3E%3Ccircle cx='469' cy='170' r='1.1' fill-opacity='0.71'/%3E%3Ccircle cx='196' cy='373' r='1.1' fill-opacity='0.61'/%3E%3Ccircle cx='70' cy='163' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='130' cy='93' r='1.2' fill-opacity='0.66'/%3E%3Ccircle cx='309' cy='5' r='1.4' fill-opacity='0.77'/%3E%3Ccircle cx='431' cy='196' r='1.6' fill-opacity='0.79'/%3E%3Ccircle cx='209' cy='303' r='1.1' fill-opacity='0.71'/%3E%3Ccircle cx='238' cy='272' r='1.1' fill-opacity='0.6'/%3E%3Ccircle cx='405' cy='70' r='1.4' fill-opacity='0.65'/%3E%3Ccircle cx='530' cy='378' r='1.6' fill-opacity='0.86'/%3E%3Ccircle cx='541' cy='31' r='1.1' fill-opacity='0.65'/%3E%3Ccircle cx='166' cy='53' r='1.9' fill-opacity='0.9'/%3E%3Ccircle cx='28' cy='128' r='1.2' fill-opacity='0.73'/%3E%3Ccircle cx='67' cy='375' r='1.4' fill-opacity='0.67'/%3E%3Ccircle cx='138' cy='59' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='313' cy='254' r='1.4' fill-opacity='0.69'/%3E%3Ccircle cx='97' cy='296' r='1.2' fill-opacity='0.74'/%3E%3Ccircle cx='573' cy='144' r='1.6' fill-opacity='0.85'/%3E%3Ccircle cx='238' cy='76' r='1.1' fill-opacity='0.53'/%3E%3Ccircle cx='100' cy='353' r='1.9' fill-opacity='0.78'/%3E%3Ccircle cx='38' cy='89' r='1.1' fill-opacity='0.56'/%3E%3Ccircle cx='314' cy='63' r='1.2' fill-opacity='0.61'/%3E%3Ccircle cx='325' cy='135' r='1.2' fill-opacity='0.68'/%3E%3Ccircle cx='19' cy='11' r='1.1' fill-opacity='0.62'/%3E%3Ccircle cx='503' cy='216' r='1.2' fill-opacity='0.63'/%3E%3Ccircle cx='294' cy='218' r='1.1' fill-opacity='0.53'/%3E%3Ccircle cx='557' cy='346' r='1.4' fill-opacity='0.73'/%3E%3Ccircle cx='577' cy='236' r='1.4' fill-opacity='0.69'/%3E%3Ccircle cx='156' cy='177' r='1.6' fill-opacity='0.78'/%3E%3Ccircle cx='499' cy='86' r='1.2' fill-opacity='0.65'/%3E%3Ccircle cx='541' cy='300' r='1.9' fill-opacity='0.9'/%3E%3Ccircle cx='622' cy='285' r='1.1' fill-opacity='0.66'/%3E%3Ccircle cx='497' cy='188' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='98' cy='138' r='1.4' fill-opacity='0.65'/%3E%3Ccircle cx='444' cy='277' r='1.9' fill-opacity='0.9'/%3E%3Ccircle cx='259' cy='6' r='1.2' fill-opacity='0.74'/%3E%3Ccircle cx='11' cy='280' r='1.2' fill-opacity='0.72'/%3E%3Ccircle cx='575' cy='34' r='1.9' fill-opacity='0.9'/%3E%3Ccircle cx='621' cy='121' r='1.6' fill-opacity='0.78'/%3E%3Ccircle cx='327' cy='292' r='1.2' fill-opacity='0.61'/%3E%3Ccircle cx='211' cy='12' r='1.1' fill-opacity='0.66'/%3E%3Ccircle cx='420' cy='5' r='1.4' fill-opacity='0.66'/%3E%3Ccircle cx='388' cy='92' r='1.9' fill-opacity='0.9'/%3E%3Ccircle cx='227' cy='194' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='383' cy='185' r='1.1' fill-opacity='0.63'/%3E%3Ccircle cx='257' cy='216' r='1.2' fill-opacity='0.58'/%3E%3Ccircle cx='344' cy='82' r='1.6' fill-opacity='0.82'/%3E%3C/g%3E%3C/svg%3E") 0 0/640px 400px repeat}
/* One snowfall when the hero first comes into view (home-gift-module-1.js adds the classes), 4.5s then still: under WCAG 2.2.2's 5s limit, so no pause control.
   Only transform moves (compositor, no repaint); each layer is taller than the hero by its fall distance so no edge shows. Without JS or with reduced motion the snow just sits still. */
.kcg .kcg-hero.kcg-snow-armed::before{transform:translateY(-40px)}
.kcg .kcg-hero.kcg-snow-armed .kcg-snow{transform:translate(-14px,-110px)}
.kcg .kcg-hero.kcg-snowing::before{animation:kcg-fall-far 4.5s cubic-bezier(.3,.5,.4,1) both}
.kcg .kcg-hero.kcg-snowing .kcg-snow{animation:kcg-fall-near 4.5s cubic-bezier(.3,.5,.4,1) both}
@keyframes kcg-fall-far{from{transform:translateY(-40px)}to{transform:none}}
@keyframes kcg-fall-near{from{transform:translate(-14px,-110px)}to{transform:none}}
/* Hover (mouse only, home-gift-module-1.js): the near layer falls exactly one 400px tile, so the first and last frames match the
   resting snow and nothing jumps. The far layer stays put like distant stars. User-started, so WCAG 2.2.2 doesn't apply. */
.kcg .kcg-hero.kcg-flurry .kcg-snow{animation:kcg-flurry 4s cubic-bezier(.45,0,.55,1)}
@keyframes kcg-flurry{from{transform:translateY(-400px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.kcg .kcg-hero::before,.kcg .kcg-hero .kcg-snow{animation:none!important;transform:none!important}}
.kcg .kcg-hero::after,.kcg .kcg-flake{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--kcg-flake) center/contain no-repeat}
.kcg .kcg-hero::after{right:300px;top:-38px;width:210px;height:210px;opacity:.12}
.kcg .kcg-flake{width:70px;height:70px;opacity:.16}
.kcg .kcg-flake--1{right:250px;bottom:18px}
.kcg .kcg-flake--2{left:58%;top:16px;width:38px;height:38px;opacity:.22}
.kcg .kcg-drift{position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 24V14C80 4 160 18 250 12S420 2 520 10 700 20 800 11 980 3 1080 12 1170 16 1200 10V24Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
@media (max-width:767px){.kcg .kcg-hero::after{right:-40px;top:-50px;width:160px;height:160px}.kcg .kcg-flake{display:none}}