/* The Exact Rug - homepage (#proto-home) styles.
   Extracted verbatim from the inline <style id="proto-css"> block in index.asp
   (no rule changes) so the page markup is clean and the CSS lives in a file,
   matching the rug-range.css pattern. Loaded in <head> AFTER the bundles so the
   #proto-home rules keep winning. The hero-carousel block stays inline in index.asp
   because it depends on a per-host ASP value (<%= cfgHeroRatio %>). */
@font-face{font-family:'MuseoSans-300';src:url("/fonts/34309F_2_0.woff2") format("woff2"),url("/fonts/34309F_2_0.woff") format("woff");font-display:swap}
@font-face{font-family:'MuseoSans-500';src:url("/fonts/34309F_3_0.woff2") format("woff2"),url("/fonts/34309F_3_0.woff") format("woff");font-display:swap}
@font-face{font-family:'MuseoSans-700';src:url("/fonts/34309F_1_0.woff2") format("woff2"),url("/fonts/34309F_1_0.woff") format("woff");font-display:swap}
#proto-home{--bg:#fcfcfa; --ink:#24251f; --soft:#7e8278; --line:#e9eae5; --accent:#7f8d6c; --serif:'MuseoSans-300', system-ui, sans-serif; --sans:'MuseoSans-300', system-ui, sans-serif; --med:'MuseoSans-500', system-ui, sans-serif; --pad:clamp(20px,7vw,140px);}
#proto-home *{box-sizing:border-box}
#proto-home{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300}
#proto-home img{display:block;max-width:100%}
#proto-home a{color:inherit}
#proto-home .eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 16px;white-space:nowrap}
#proto-home .serif{font-family:var(--serif)}
#proto-home .h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.2vw,82px);line-height:1.01;letter-spacing:-.01em;margin:0}
#proto-home .h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,54px);line-height:1.06;margin:0}
#proto-home .lead{font-size:clamp(15px,1.35vw,18px);line-height:1.75;color:var(--soft);max-width:58ch}
#proto-home .btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;text-decoration:none;padding:15px 28px;border-radius:40px;transition:.25s}
#proto-home .fill{background:var(--ink);color:#fff}
#proto-home .fill:hover{background:var(--accent)}
#proto-home .ghost{border:1px solid var(--line);color:var(--ink)}
#proto-home .ghost:hover{border-color:var(--ink)}
#proto-home .ar{font-family:var(--serif);font-size:16px}
#proto-home .nav{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad)}
#proto-home .logo{font-weight:500;letter-spacing:.16em;font-size:20px}
#proto-home .logo b{color:var(--accent)}
#proto-home .nav .links{display:flex;gap:30px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
#proto-home .nav .links a{text-decoration:none}
@media(max-width:860px){#proto-home .nav .links{display:none}
}
#proto-home .hero{position:relative;height:clamp(420px,70vh,720px);overflow:hidden}
#proto-home .hero img{width:100%;height:100%;object-fit:cover;object-position:center 100%}
#proto-home .hero .p{position:absolute;left:var(--pad);bottom:clamp(26px,6vh,60px);max-width:420px;background:rgba(0,0,0,.4);color:#fff;padding:28px 30px;border-radius:6px}
#proto-home .hero .p h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:0 0 12px}
#proto-home .hero .p .shown{font-size:12.5px;color:rgba(255,255,255,.8)}
#proto-home .tag{position:absolute;top:14px;right:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.5);color:#fff;padding:6px 11px;border-radius:20px}
#proto-home .sec{padding:0 15px;max-width:1183px;margin:0 auto}  /* match the site .container (1183px / 15px gutters); VERTICAL padding comes ONLY from the BAND PADDING panel at the end of this file */
#proto-home .rule-top{border-top:1px solid var(--line)}
#proto-home .cyo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
#proto-home .cyo .copy .h1{margin-bottom:8px!important}
#proto-home .cyo .steps{list-style:none;margin:34px 0 38px;padding:0;border-top:1px solid var(--line)}
#proto-home .cyo .steps li{display:flex;gap:18px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
#proto-home .cyo .steps .n{font-family:var(--serif);font-size:20px;color:var(--accent);min-width:34px}
#proto-home .cyo .steps .t{font-size:16px;color:var(--ink)}
#proto-home .cyo .steps .t small{display:block;color:var(--soft);font-size:13.5px;margin-top:3px}
#proto-home .cyo .art{position:relative;width:100%;height:0;padding-bottom:125%;border-radius:10px;overflow:hidden}
#proto-home .cyo .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#proto-home .cyo .art .badge{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;font-size:13px;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
@media(max-width:820px){#proto-home .cyo{grid-template-columns:1fr}
/* stacked (mobile) CYO: hide the portrait rug entirely (owner 2026-07-13) */
#proto-home .cyo .art{display:none}
}
#proto-home .mat{background:#f2ede4}
#proto-home .mat .head{text-align:left;max-width:62ch;margin:0 0 clamp(40px,5vw,60px)}  /* left-aligned over the duo (owner 2026-07-13) */
#proto-home .mat .head .lead{margin:14px 0 0}
#proto-home .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,46px)}
#proto-home .duo .m{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#proto-home .duo .m img{width:100%;aspect-ratio:3/2;object-fit:cover}
#proto-home .duo .m .b{padding:clamp(22px,2.6vw,34px)}
#proto-home .duo .m h3{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 8px}
#proto-home .duo .m p{color:var(--soft);font-size:14.5px;line-height:1.65;margin:0 0 16px}
#proto-home .duo .m .tags{display:flex;flex-wrap:wrap;gap:8px}
#proto-home .duo .m .tags span{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:6px 12px;color:var(--ink)}
#proto-home .mat .note{text-align:center;font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);line-height:1.45;max-width:60ch;margin:clamp(40px,5vw,58px) auto 0}
#proto-home .mat .note a{display:inline-block;margin-top:22px}
@media(max-width:760px){#proto-home .duo{grid-template-columns:1fr}
}
#proto-home .galhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 40px}
#proto-home .galhead a{white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
#proto-home .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#proto-home .grid a{position:relative;overflow:hidden;border-radius:8px;text-decoration:none;color:#fff;aspect-ratio:4/5}
#proto-home .grid a.wide{grid-column:span 2;aspect-ratio:auto}
#proto-home .grid a img{width:100%;height:100%;object-fit:cover}
#proto-home .grid a .cap{position:absolute;left:18px;bottom:16px;font-family:var(--med);font-size:14px;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* lightup: same --tile-hover-filter-photo token virtual/head.asp uses for .home-product /
   .thumb-col photo tiles (single source of truth - see css/bundle-rc.css .lightup comment).
   brightness() is a multiplier though, so it can never lift the .grid a::after dark scrim -
   that overlay is literal black (rgba(0,0,0,.72)) and 0 * anything is still 0. So the img gets
   brightened AND the scrim gets thinned separately; together the whole tile reads lighter. */
@media (hover: hover) {
  #proto-home .grid a img{transition:filter var(--tile-hover-dur, 420ms) var(--tile-hover-ease, cubic-bezier(.22,1,.36,1))}
  #proto-home .grid a:hover img{filter:var(--tile-hover-filter-photo, contrast(1.06) saturate(1.10) brightness(1.02))}
  #proto-home .grid a::after{transition:opacity var(--tile-hover-dur, 420ms) var(--tile-hover-ease, cubic-bezier(.22,1,.36,1))}
  #proto-home .grid a:hover::after{opacity:.65}
}
@media(max-width:760px){#proto-home .grid{grid-template-columns:1fr 1fr}
#proto-home .grid a.wide{grid-column:span 2}
}
#proto-home .coll .galhead .soon{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:5px 11px;border-radius:20px}
#proto-home .crow{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px}
#proto-home .crow .c{flex:0 0 clamp(230px,26vw,320px);aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative}
#proto-home .crow .c img{width:100%;height:100%;object-fit:cover}
#proto-home .crow .c .g{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%)}
#proto-home .crow .c .l{position:absolute;left:18px;bottom:16px;color:#fff}
#proto-home .crow .c .l .s{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e7c79b}
#proto-home .crow .c .l h4{font-family:var(--serif);font-weight:400;font-size:23px;margin:3px 0 0}
#proto-home .close{text-align:center;padding:clamp(70px,10vw,128px) var(--pad);background:#f2ede4}
#proto-home .close .h2{max-width:18ch;margin:0 auto}
#proto-home .close .lead{margin:16px auto 30px}
#proto-home .h1, #proto-home .h2{font-weight:600;letter-spacing:-.018em}
#proto-home .eyebrow, #proto-home .btn, #proto-home .nav .links a, #proto-home .galhead a, #proto-home .sec-head a.more, #proto-home .more, #proto-home .chips a, #proto-home .step, #proto-home .duo .m .tags span, #proto-home .cyo .art .badge, #proto-home .cyo .steps .n, #proto-home .coll .galhead .soon, #proto-home .crow .c .l .s, #proto-home .hero .p .shown, #proto-home .hero .panel .shown, #proto-home .tag, #proto-home .tag-existing, #proto-home .logo{font-family:var(--med)!important}
#proto-home{font-weight:400}
#proto-home .mat, #proto-home .close{background:#FAF5F1}
#proto-home .duo .m{background:#fff;border-color:#e9eae5}
#proto-home .btn{border-radius:40px}
#proto-home .duo .m, #proto-home .cyo .art, #proto-home .grid a, #proto-home .crow .c{border-radius:4px}
#proto-home .eyebrow{letter-spacing:.34em}
#proto-home .fill{background:var(--ink)}
#proto-home .fill:hover{background:var(--accent)}
#proto-home .grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(116px,12vw,184px);gap:16px}
#proto-home .grid a{grid-row:span 2;aspect-ratio:auto;height:auto}
#proto-home .grid a.wide{aspect-ratio:auto}
#proto-home .grid a:nth-child(1){grid-column:span 7}
#proto-home .grid a:nth-child(2){grid-column:span 5}
#proto-home .grid a:nth-child(3){grid-column:span 4}
#proto-home .grid a:nth-child(4){grid-column:span 4}
#proto-home .grid a:nth-child(5){grid-column:span 4}
@media(max-width:760px){#proto-home .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw}
#proto-home .grid a:nth-child(1), #proto-home .grid a:nth-child(2), #proto-home .grid a:nth-child(3), #proto-home .grid a:nth-child(4), #proto-home .grid a:nth-child(5){grid-column:span 1;grid-row:span 1}
#proto-home .grid a:nth-child(1){grid-column:span 2}
}
#proto-home .crow{scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
#proto-home .crow::-webkit-scrollbar{display:none}
#proto-home .crow .c{scroll-snap-align:start}
#proto-home .crow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;overflow:visible}
#proto-home .crow .c{flex:none;width:auto}
@media(max-width:820px){#proto-home .crow{grid-template-columns:1fr 1fr}
}
#proto-home .h1, #proto-home .h2, #proto-home .h-xl, #proto-home .h-lg{font-weight:400!important;letter-spacing:-.006em;line-height:1.03}
#proto-home .duo .m h3, #proto-home .crow .c .l h4, #proto-home .grid a .cap, #proto-home .gal a .cap, #proto-home .hero .p h2, #proto-home .hero .panel h2, #proto-home .cyo .art .badge{font-family:var(--med)!important}
#proto-home .grid{display:grid!important;grid-template-columns:repeat(12,1fr)!important;grid-auto-rows:clamp(116px,12vw,184px)!important;gap:16px}
#proto-home .grid a{grid-row:span 2!important;aspect-ratio:auto!important;height:auto!important;overflow:hidden}
#proto-home .grid a.wide{aspect-ratio:auto!important}
#proto-home .grid a:nth-child(1){grid-column:span 7!important}
#proto-home .grid a:nth-child(2){grid-column:span 5!important}
#proto-home .grid a:nth-child(3){grid-column:span 4!important}
#proto-home .grid a:nth-child(4){grid-column:span 4!important}
#proto-home .grid a:nth-child(5){grid-column:span 4!important}
#proto-home .grid a img{width:100%!important;height:100%!important;object-fit:cover!important}
@media(max-width:760px){#proto-home .grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:44vw!important}
#proto-home .grid a:nth-child(1), #proto-home .grid a:nth-child(2), #proto-home .grid a:nth-child(3), #proto-home .grid a:nth-child(4), #proto-home .grid a:nth-child(5){grid-column:span 1!important;grid-row:span 1!important}
#proto-home .grid a:nth-child(1){grid-column:span 2!important}
}

#proto-home,#proto-home p,#proto-home a,#proto-home li,#proto-home span,#proto-home div{font-family:var(--sans)}
#proto-home .eyebrow{font-family:var(--med)!important;font-size:11.5px!important;font-weight:500!important;letter-spacing:.34em!important;text-transform:uppercase!important}
#proto-home .h1{font-family:var(--serif)!important;font-weight:400!important;font-size:clamp(40px,6.2vw,82px)!important;line-height:1.03!important;letter-spacing:-.01em!important;margin:0!important}
#proto-home .h2{font-family:var(--serif)!important;font-weight:400!important;font-size:clamp(30px,4.4vw,54px)!important;line-height:1.06!important;margin:0!important}
#proto-home .lead{font-family:var(--sans)!important;font-weight:300!important;font-size:clamp(15px,1.35vw,18px)!important;line-height:1.75!important;color:var(--soft)!important}
#proto-home .duo .m h3{font-family:var(--serif)!important;font-weight:400!important;font-size:30px!important;margin:0 0 8px!important;color:inherit}
#proto-home .crow .c .l h4{font-family:var(--serif)!important;font-weight:400!important;font-size:23px!important;margin:3px 0 0!important}
#proto-home .grid a .cap{font-family:var(--med)!important;font-weight:500!important;font-size:14px!important;letter-spacing:.01em!important;text-transform:none!important}
#proto-home .mat .note{font-family:var(--serif)!important;font-weight:400!important}
#proto-home .cyo .steps .n{font-family:var(--serif)!important;font-size:20px!important}
#proto-home .btn{font-family:var(--med)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.13em!important;text-transform:uppercase!important}
#proto-home .galhead a,#proto-home .more,#proto-home .step,#proto-home .duo .m .tags span,#proto-home .crow .c .l .s,#proto-home .coll .galhead .soon{font-family:var(--med)!important}
#proto-home .cyo .art .badge{display:inline-block!important;width:auto!important;color:#fff!important;background:transparent!important;font-family:var(--med)!important;font-size:13px!important;font-weight:500!important;line-height:1.2!important;white-space:nowrap;border-radius:0!important;padding:0!important;text-shadow:0 1px 8px rgba(0,0,0,.45)!important}
/* faint bottom scrim so the borderless caption stays legible over any runner photo */
#proto-home .cyo .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none;z-index:1}
#proto-home a{text-decoration:none}
#proto-home .duo .m h3,#proto-home .crow .c .l h4,#proto-home h1,#proto-home h2,#proto-home h3,#proto-home h4{text-transform:none!important;letter-spacing:normal}

/* fix .close clashing with Bootstrap's .close (float:right/opacity:.2/inherited text-shadow) + centre it.
   Bootstrap's .close sets text-shadow:0 1px 0 #fff which inherits down to the CTA and blurs its
   white text on hover (white text + white shadow halo) - kill it here. */
#proto-home .close{float:none!important;opacity:1!important;text-shadow:none!important;text-align:center!important;clear:both;display:block!important}
#proto-home .close .h2{max-width:20ch!important;margin:0 auto!important}
#proto-home .close .lead{margin:16px auto 30px!important}
/* tighten vertical rhythm between sections */
#proto-home .mat .head{margin-bottom:clamp(28px,4vw,44px)!important}
#proto-home .sec-head,#proto-home .galhead{margin-bottom:34px!important}


/* tighter vertical rhythm (desktop) */
#proto-home .sec-head,#proto-home .galhead{margin-bottom:28px!important}
#proto-home .mat .head{margin-bottom:clamp(24px,3vw,38px)!important}
#proto-home .cyo .steps{margin:28px 0 30px!important}
/* Collections cards: portrait -> square */
#proto-home .crow .c{aspect-ratio:1/1!important}
/* even tighter on phones */
@media(max-width:767px){
  #proto-home .sec-head,#proto-home .galhead{margin-bottom:20px!important}
  #proto-home .mat .head{margin-bottom:20px!important}
  #proto-home .cyo .steps{margin:22px 0 26px!important}
}
/* footer flush with the centred band: drop the footer's empty white spacer (this page only) */
#home-page footer > .bg-white{display:none!important}


/* 1: close excess vertical space from materials down (not too tight) */
#proto-home .mat .head{margin-bottom:clamp(18px,2.4vw,30px)!important}
#proto-home .duo{gap:clamp(14px,2.2vw,32px)!important}
@media(max-width:767px){#proto-home .mat .head{margin-bottom:16px!important}}
/* 2: overlay text on images must be light (site forces it black) + a scrim for legibility */
#proto-home .crow .c .l h4{color:#fff!important}
#proto-home .crow .c .l .s{color:#e7c79b!important}
#proto-home .grid a{color:#fff!important}
#proto-home .grid a .cap{color:#fff!important;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.5)!important}
#proto-home .grid a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.32) 42%,rgba(0,0,0,0));pointer-events:none;z-index:1}
/* 3: scroll reveal + parallax base (motion-safe) */
@media(prefers-reduced-motion:no-preference){
 #proto-home .rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .9s cubic-bezier(.22,.7,.2,1)}
 #proto-home .rv.in{opacity:1;transform:none}
}


/* materials band inner rhythm (desktop only; mobile left as-is) */
@media(min-width:768px){
  #proto-home .mat .head{margin-bottom:clamp(22px,2.6vw,34px)!important;margin-top:0!important}
  #proto-home .mat .note{margin-top:clamp(26px,3vw,38px)!important;margin-bottom:0!important}
}


/* DESKTOP: band inner-content rhythm. Band PADDING lives in the
   control panel at the end of this file. */
@media(min-width:768px){
  #proto-home .mat .head{margin-top:0!important;margin-bottom:24px!important}
  #proto-home .mat .note{margin-top:26px!important;margin-bottom:0!important}
  #proto-home .sec-head,#proto-home .galhead{margin-bottom:24px!important}
}


/* .mat clashes with a bundle rule that adds 120px padding - reset it; the inner .sec owns the spacing */
#proto-home .mat{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}

/* Homepage CTAs are NOT purchase actions - black is reserved for the buy button -
   so these use a light outline button: global 4px radius, slim padding, fills on hover. */
#proto-home a.home-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--med);font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;padding:13px 26px;border:1px solid var(--ink);border-radius:var(--btn-radius,4px);color:var(--ink);background:transparent;transition:.25s}
#proto-home a.home-cta:hover{background:var(--ink);color:#fff}
#proto-home a.home-cta:hover *{color:#fff}
#proto-home a.home-cta .ar{font-size:15px}
/* Collections card titles were oversized on phones - shrink on mobile only */
@media(max-width:767px){
  #proto-home .crow .c .l h4{font-size:14px!important}
  #proto-home .crow .c .l .s{font-size:10px!important}
}

/* CYO closing band: two columns - copy left, colour-swatch image right (equal height).
   Overrides the centred .close defaults above for the copy column; stacks image-on-top on mobile. */
#proto-home .close .close-promo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;max-width:1100px;margin:0 auto;text-align:left}
#proto-home .close .close-copy{align-self:center}
#proto-home .close .close-copy .eyebrow{text-align:left}
#proto-home .close .close-copy .h2{max-width:none!important;margin:0!important;text-align:left!important}
#proto-home .close .close-copy .lead{max-width:48ch!important;margin:16px 0 30px!important;text-align:left!important}
#proto-home .close .close-media{border-radius:4px;overflow:hidden}
#proto-home .close .close-media img{width:100%;height:auto;aspect-ratio:1/1;display:block}
@media(max-width:767px){
  #proto-home .close .close-promo{grid-template-columns:1fr;gap:22px;text-align:center}
  #proto-home .close .close-copy{order:2}
  #proto-home .close .close-media{order:1}
  #proto-home .close .close-copy .eyebrow{text-align:center}
  #proto-home .close .close-copy .h2{max-width:20ch!important;margin:0 auto!important;text-align:center!important}
  #proto-home .close .close-copy .lead{max-width:58ch!important;margin:16px auto 30px!important;text-align:center!important}
}

/* fresh-from-the-range rows: banded like .mat, containment + tile
   classes are the range page's own (Bootstrap cols inside .rr-v2,
   see index.asp) - nothing of ours to add */

/* ===================================================================
   BAND VERTICAL PADDING - THE control panel (owner 2026-07-13).
   The ONLY place band top/bottom padding is set: one knob per band,
   desktop (>=768px) and mobile (<=767px). Edit a value, bump
   ASSET_VERSION in virtual/head-meta.asp, done. Every older padding
   rule in this file has been stripped; keep it that way.
   NOTE: the colourways band's BOTTOM knobs are the desired VISUAL
   gap - the trailing margin its last tile row carries (36px desktop /
   32px mobile, from rug-range.css) is subtracted automatically.
   =================================================================== */
#proto-home{
  /* --------------- desktop --------------- */
  --cyo-top-d:60px;        --cyo-bot-d:60px;        /* Create your own rug */
  --colourways-top-d:50px; --colourways-bot-d:50px; /* Have something in mind */
  --range-top-d:50px;      --range-bot-d:60px;      /* See it in the room */
  --mat-top-d:50px;        --mat-bot-d:50px;        /* Wool & Art Silk */
  --coll-top-d:50px;       --coll-bot-d:60px;       /* Collections */
  --close-top-d:46px;      --close-bot-d:46px;      /* closing CYO band */
  /* --------------- mobile ---------------- */
  --cyo-top-m:26px;        --cyo-bot-m:26px;
  --colourways-top-m:26px; --colourways-bot-m:26px;
  --range-top-m:26px;      --range-bot-m:26px;
  --mat-top-m:26px;        --mat-bot-m:26px;
  --coll-top-m:26px;       --coll-bot-m:26px;
  --close-top-m:36px;      --close-bot-m:44px;
}
@media(min-width:768px){
  #proto-home .band-cyo{padding-top:var(--cyo-top-d)!important;padding-bottom:var(--cyo-bot-d)!important}
  #proto-home .band-colourways .sec{padding-top:var(--colourways-top-d)!important;padding-bottom:max(0px,calc(var(--colourways-bot-d) - 36px))!important}
  #proto-home .band-range{padding-top:var(--range-top-d)!important;padding-bottom:var(--range-bot-d)!important}
  #proto-home .band-mat .sec{padding-top:var(--mat-top-d)!important;padding-bottom:var(--mat-bot-d)!important}
  #proto-home .band-coll{padding-top:var(--coll-top-d)!important;padding-bottom:var(--coll-bot-d)!important}
  #proto-home .band-close{padding-top:var(--close-top-d)!important;padding-bottom:var(--close-bot-d)!important}
}
@media(max-width:767px){
  #proto-home .band-cyo{padding-top:var(--cyo-top-m)!important;padding-bottom:var(--cyo-bot-m)!important}
  #proto-home .band-colourways .sec{padding-top:var(--colourways-top-m)!important;padding-bottom:max(0px,calc(var(--colourways-bot-m) - 32px))!important}
  #proto-home .band-range{padding-top:var(--range-top-m)!important;padding-bottom:var(--range-bot-m)!important}
  #proto-home .band-mat .sec{padding-top:var(--mat-top-m)!important;padding-bottom:var(--mat-bot-m)!important}
  #proto-home .band-coll{padding-top:var(--coll-top-m)!important;padding-bottom:var(--coll-bot-m)!important}
  #proto-home .band-close{padding-top:var(--close-top-m)!important;padding-bottom:var(--close-bot-m)!important}
}
