/* Churchfront shop. Churchfront Brand: Midnight, Grey and Refresh only, Figtree
   300/600/700, bold caps headers and labels over light body, hairlines rather
   than card chrome, the slanted button.

   Every store page uses the same parts in the same order:
     .cfs-top   Midnight band: crumbs, label, short H1, one-line lead, search
     .cfs-tabs  sticky store bar under the site header (lanes + cart)
     .cfs-sec   full-bleed Grey sections split by hairlines, each opening with
                .cfs-head (label, H2, optional see-all link)
     .cfs-card  the one product card
     .cfs-band  Refresh closing band
   Everything aligns to the site header's container (.cf-sh-in: 1240px wide,
   same gutter). Product photos stay in colour on a Grey tile (multiply);
   nothing else here is a photo. Everything is scoped under .cf-shop. */

/* The theme wrapper caps content at 1200px; store pages run full bleed. */
.cf-shop-page .site.grid-container{max-width:none}
.cf-shop-page .site-content{display:block}

.cf-shop{--mid:#090E14;--grey:#E6E7E8;--refresh:#CAE7F9;
  --ink-muted:rgba(9,14,20,.7);--hair:rgba(9,14,20,.16);--line:rgba(9,14,20,.5);
  --on-mid-muted:rgba(230,231,232,.72);--on-mid-hair:rgba(230,231,232,.16);
  --gutter:clamp(24px,5vw,80px);--sh:96px;--btn-h:52px;
  width:100%;background:var(--grey);color:var(--mid);font-family:'Figtree','Inter',Arial,sans-serif;font-weight:300;font-size:17px;line-height:1.6}
.cf-shop *{box-sizing:border-box}
.cf-shop a{color:inherit}
.cf-shop p{margin:0}
.cf-shop h1,.cf-shop h2,.cf-shop h3{font-family:inherit;font-weight:700;text-transform:uppercase;color:inherit;margin:0;letter-spacing:-.005em}
.cf-shop h1{font-size:clamp(34px,4vw,52px);line-height:1.02}
.cf-shop h2{font-size:clamp(26px,2.6vw,34px);line-height:1.05}
.cfs-wrap{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.cfs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cfs-lead{font-size:18px;line-height:1.6;max-width:62ch}

/* Small bold caps label: section labels, field labels, brand names. */
.cfs-label,.cfs-eyebrow{display:block;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-decoration:none}
.cf-shop a.cfs-label:hover{color:var(--mid)}
.cfs-label--accent{color:var(--refresh)}
.cfs-meta{font-size:14px;color:var(--ink-muted)}
.cf-shop .cfs-more{display:inline-flex;align-items:center;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.cfs-more span{margin-left:6px}
.cf-shop .cfs-more:hover{text-decoration:underline;text-underline-offset:4px}

/* Buttons: left end a true semicircle, right edge slanted (bottom inset 0.211 x height). */
.cf-shop .cfs-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 calc(var(--btn-h) * .211 + 28px) 0 30px;border:0;border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--btn-h) * .211) 100%,0 100%);background:var(--mid);color:var(--grey);
  font:700 14px/1 'Figtree','Inter',Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.cf-shop .cfs-btn:hover{opacity:.86}
.cf-shop .cfs-btn[disabled]{opacity:.5;cursor:not-allowed}
.cfs-btn--wide{width:100%}
.cf-shop :focus-visible{outline:2px solid var(--mid);outline-offset:3px}
.cfs-top :focus-visible,.cfs-tabs :focus-visible{outline-color:var(--refresh)}

/* Top band (Midnight): sits under the fixed site header. */
.cfs-top{background:var(--mid);color:var(--grey)}
.cfs-top__in{padding-top:calc(var(--sh) + 40px);padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.cfs-top__copy{flex:1 1 520px;min-width:0;display:grid;gap:12px}
.cfs-top h1{max-width:20ch}
.cfs-top .cfs-lead,.cfs-top .cfs-meta{color:var(--on-mid-muted)}
.cfs-crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:var(--on-mid-muted)}
.cfs-crumbs a{text-decoration:none;color:var(--on-mid-muted)}
.cfs-crumbs a:hover{color:var(--grey);text-decoration:underline}
.cfs-crumbs [aria-current]{color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48ch}

/* Search: brand button geometry; Grey field, Refresh button, on Midnight. */
.cfs-search{--btn-h:52px;flex:0 1 440px;min-width:0;display:flex;height:var(--btn-h);background:var(--grey);border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--btn-h) * .211) 100%,0 100%)}
.cfs-search input{flex:1;min-width:0;height:100%;padding:0 12px 0 24px;border:0;border-radius:0;background:transparent;font:300 16px 'Figtree','Inter',Arial,sans-serif;color:var(--mid);outline:0}
.cfs-search input::placeholder{color:var(--ink-muted)}
.cfs-search:focus-within{box-shadow:inset 0 0 0 2px var(--refresh)}
.cfs-search button{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 calc(var(--btn-h) * .211 + 20px) 0 18px;border:0;background:var(--refresh);color:var(--mid);
  font:700 13px/1 'Figtree','Inter',Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}

/* Store bar: sticky directly under the fixed site header. */
.cfs-tabs{position:sticky;top:var(--sh);z-index:50;background:var(--mid);border-top:1px solid var(--on-mid-hair);border-bottom:1px solid var(--on-mid-hair)}
.cfs-tabs__in{display:flex;align-items:stretch;gap:32px;overflow-x:auto;scrollbar-width:none}
.cfs-tabs__in::-webkit-scrollbar{display:none}
.cf-shop .cfs-tabs a{display:flex;align-items:center;flex:none;min-height:56px;padding-top:3px;border-bottom:3px solid transparent;color:var(--on-mid-muted);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.cf-shop .cfs-tabs a:hover{color:var(--grey)}
.cf-shop .cfs-tabs a[aria-current]{color:var(--refresh);border-bottom-color:var(--refresh)}
.cf-shop .cfs-tabs .cfs-cartlink{position:sticky;right:0;margin-left:auto;padding-left:36px;background:linear-gradient(90deg,rgba(9,14,20,0),var(--mid) 28px);color:var(--grey)}
.cf-shop .cfs-tabs .cfs-cartlink[aria-current]{border-bottom-color:transparent}
.cfs-cartlink[aria-current]::after{content:'';position:absolute;left:36px;right:var(--cart-pr,0px);bottom:0;height:3px;background:var(--refresh)}
.cfs-cartlink span:not(:empty){margin-left:6px}

/* Sections: full-bleed Grey, hairline between each. */
.cfs-sec{padding-top:64px;padding-bottom:64px}
.cfs-sec+.cfs-sec>.cfs-wrap{position:relative}
.cfs-sec+.cfs-sec{padding-top:0}
.cfs-sec+.cfs-sec>.cfs-wrap::before{content:'';display:block;height:1px;background:var(--hair);margin-bottom:64px}
.cfs-sec--first{padding-top:48px}
.cfs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:32px}
.cfs-head__copy{display:grid;gap:10px;min-width:0}
.cfs-intro{max-width:62ch;margin:-12px 0 32px!important;color:var(--ink-muted)}

/* The product card (also category cards). */
.cfs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:40px 24px}
.cf-shop .cfs-card{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none}
.cfs-card__media{position:relative;display:grid;place-items:center;aspect-ratio:1/1;margin-bottom:10px;background:var(--grey);border:1px solid var(--hair);overflow:hidden}
.cfs-card__media img,.cfs-gallery img,.cfs-thumbs img,.cfs-line__media img{mix-blend-mode:multiply;object-fit:contain;filter:none}
.cfs-card__media img{width:82%;height:82%;transition:transform .25s ease}
.cfs-card:hover .cfs-card__media{border-color:var(--line)}
.cfs-card:hover .cfs-card__media img{transform:scale(1.03)}
.cfs-card__none{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.cfs-card__brand{min-height:1.4em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.cfs-card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;font-weight:600;font-size:16px;line-height:1.3}
.cfs-card:hover .cfs-card__name{text-decoration:underline;text-underline-offset:3px}
.cfs-card__price{margin-top:2px;font-weight:700;font-size:17px;line-height:1.3}
.cfs-card__status{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--ink-muted)}
.cfs-card__status::before{content:'';flex:none;width:7px;height:7px;border:1.5px solid var(--line);border-radius:50%}
.cfs-card__status[data-state=in]::before{background:var(--mid);border-color:var(--mid)}
.cfs-card--cat .cfs-card__name{min-height:0;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;-webkit-line-clamp:1}
.cfs-card--cat .cfs-card__status::before{display:none}

/* Brands: hairline grid. */
.cfs-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--hair)}
.cf-shop .cfs-brands a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 0;margin-right:24px;border-bottom:1px solid var(--hair);text-decoration:none}
.cfs-brands strong{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.cfs-brands span{font-size:14px;color:var(--ink-muted);white-space:nowrap}
.cf-shop .cfs-brands a:hover strong{text-decoration:underline;text-underline-offset:3px}

/* Closing band: Midnight on Refresh. */
.cfs-band{background:var(--refresh);color:var(--mid)}
.cfs-band .cfs-wrap{padding-top:80px;padding-bottom:80px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.cfs-band .cfs-wrap>div{display:grid;gap:12px;max-width:720px}

/* Listing */
.cfs-chips{display:flex;flex-wrap:wrap;gap:8px 24px;padding-bottom:24px;margin-bottom:40px;border-bottom:1px solid var(--hair)}
.cf-shop .cfs-chips a{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-muted)}
.cf-shop .cfs-chips a:hover{color:var(--mid);text-decoration:underline;text-underline-offset:4px}
.cfs-cols{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.cfs-facets{flex:1 1 220px;max-width:250px;display:grid;gap:32px}
.cfs-facets fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.cfs-facets legend{padding:0 0 12px;margin:0;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.cf-shop .cfs-facet{display:flex;gap:10px;align-items:center;font-size:15px;line-height:1.35;text-decoration:none}
.cfs-facet__box{width:16px;height:16px;border:1.5px solid var(--line);flex:none}
.cfs-facet[aria-pressed=true] .cfs-facet__box{background:var(--mid);border-color:var(--mid);box-shadow:inset 0 0 0 3px var(--grey)}
.cfs-facet__n{margin-left:auto;font-size:14px;color:var(--ink-muted)}
.cf-shop .cfs-clear{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.cfs-help{display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--hair);font-size:15px}
.cfs-results{flex:999 1 560px;min-width:0}
.cfs-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-bottom:16px;margin-bottom:32px;border-bottom:1px solid var(--hair)}
.cfs-bar .cfs-label{color:var(--mid)}
.cfs-sort{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px}
.cf-shop .cfs-sort a{text-decoration:none;color:var(--ink-muted)}
.cf-shop .cfs-sort a[aria-current]{color:var(--mid);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.cfs-empty{margin:0;padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* Product */
.cfs-buy{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:flex-start}
.cfs-gallery{flex:1 1 480px;min-width:0;display:grid;gap:12px}
.cfs-gallery__main{display:grid;place-items:center;aspect-ratio:1/1;max-height:640px;background:var(--grey);border:1px solid var(--hair)}
.cfs-gallery__main img{width:84%;height:84%}
.cfs-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.cfs-thumbs button{display:grid;place-items:center;width:80px;height:80px;padding:0;background:var(--grey);border:1px solid var(--hair);cursor:pointer}
.cfs-thumbs button[aria-pressed=true]{border:2px solid var(--mid)}
.cfs-thumbs img{width:84%;height:84%}
.cfs-caption{font-size:13px;color:var(--ink-muted)}
.cfs-info{flex:1 1 400px;min-width:0;display:grid;gap:20px;align-content:start}
.cf-shop .cfs-info h1{font-size:clamp(28px,2.8vw,40px);line-height:1.08}
.cfs-short{font-size:17px}
.cfs-short p{margin:0 0 8px}
.cfs-short ul{margin:0;padding-left:20px}
.cfs-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-top:20px;border-top:1px solid var(--hair)}
.cfs-price strong{font-weight:700;font-size:36px;line-height:1}
.cfs-price s{color:var(--ink-muted)}
.cfs-opts{border:0;margin:0;padding:0;min-width:0}
.cfs-opts legend{padding:0 0 10px;margin:0;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.cfs-opts div{display:flex;flex-wrap:wrap;gap:8px}
.cfs-opts button{min-width:60px;min-height:44px;padding:10px 16px;border:1.5px solid var(--line);border-radius:0;background:transparent;font:600 15px 'Figtree','Inter',Arial,sans-serif;color:var(--mid);cursor:pointer}
.cfs-opts button[aria-pressed=true]{background:var(--mid);border-color:var(--mid);color:var(--grey)}
.cfs-avail{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cfs-avail svg{flex:none;margin-top:2px}
.cfs-avail>span{display:grid;gap:2px;font-size:15px}
.cfs-avail strong{font-weight:600;font-size:16px}
.cfs-add{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cfs-add .cfs-btn{flex:1;min-width:220px;width:auto}
.cfs-qty{display:flex;align-items:center;height:var(--btn-h);border:1px solid var(--line)}
.cf-shop .cfs-qty button{width:46px;height:100%;padding:0;border:0;border-radius:0;background:transparent;font:600 20px 'Figtree','Inter',Arial,sans-serif;cursor:pointer;color:var(--mid)}
.cfs-qty span{min-width:30px;text-align:center;font-weight:600}
.cfs-added{margin:0;padding:12px 16px;background:var(--refresh);color:var(--mid);font-size:15px}
.cfs-added a{font-weight:600}
.cfs-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--ink-muted)}
.cfs-notes li::before{content:'· '}
.cfs-notes a{color:var(--mid)}
.cfs-desc{max-width:72ch}
.cfs-desc h2,.cfs-desc h3,.cfs-desc h4{font-size:20px;line-height:1.2;margin:32px 0 12px;font-weight:700;text-transform:uppercase}
.cfs-desc>:first-child{margin-top:0}
.cfs-desc p{margin:0 0 14px}
.cfs-desc ul,.cfs-desc ol{margin:0 0 14px;padding-left:20px}
.cfs-desc img{max-width:100%;height:auto}
.cfs-learn{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:1px solid var(--hair)}
.cf-shop .cfs-learn a{display:grid;gap:4px;align-content:start;padding:20px 24px 20px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.cfs-learn__name{font-weight:600;font-size:16px;line-height:1.35}
.cf-shop .cfs-learn a:hover .cfs-learn__name{text-decoration:underline;text-underline-offset:3px}

/* Cart: lines on hairlines; summary set off by a Midnight rule, no filled box. */
.cfs-cart{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:flex-start}
.cfs-lines{flex:999 1 560px;min-width:0;border-top:1px solid var(--hair)}
.cfs-line{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--hair)}
.cfs-line__media{display:grid;place-items:center;width:112px;height:112px;background:var(--grey);border:1px solid var(--hair)}
.cfs-line__media img{width:84%;height:84%}
.cfs-line__info{display:grid;gap:4px;min-width:0}
.cf-shop .cfs-line__name{font-weight:600;font-size:17px;line-height:1.3;text-decoration:none}
.cf-shop .cfs-line__name:hover{text-decoration:underline}
.cfs-line__ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.cfs-line .cfs-qty{height:40px}
.cf-shop .cfs-line .cfs-qty button{width:38px;font-size:18px}
.cf-shop .cfs-link{border:0;background:none;padding:0;font:300 15px 'Figtree','Inter',Arial,sans-serif;color:var(--mid);text-decoration:underline;cursor:pointer}
.cfs-line__total{font-weight:700;font-size:17px;text-align:right}
.cfs-lines .cfs-empty{border-top:0}
.cfs-summary{flex:1 1 340px;max-width:420px;display:grid;gap:20px;padding-top:20px;border-top:2px solid var(--mid)}
.cf-shop .cfs-summary h2.cfs-label{font-size:12px;line-height:1.4;letter-spacing:.14em;color:var(--mid)}
.cfs-summary a{color:var(--mid);font-weight:600}
.cfs-field{display:grid;gap:8px}
.cf-shop .cfs-field select{height:48px;padding:0 12px;border:1px solid var(--line);border-radius:0;background:var(--grey);color:var(--mid);font:300 16px 'Figtree','Inter',Arial,sans-serif;max-width:none;width:100%}
.cfs-summary dl{margin:0;display:grid;gap:10px;font-size:16px}
.cfs-summary dl>div{display:flex;justify-content:space-between;gap:12px}
.cfs-summary dt{font-weight:300}
.cfs-summary dd{margin:0;font-weight:600;text-align:right}
.cfs-summary .cfs-sub{font-size:14px;color:var(--ink-muted)}
.cfs-summary .cfs-total{padding-top:14px;border-top:1px solid var(--hair);font-weight:700;font-size:19px}
.cfs-summary .cfs-total dt,.cfs-summary .cfs-total dd{font-weight:700}
.cfs-exempt{display:grid;gap:4px;padding-top:20px;border-top:1px solid var(--hair);font-size:14px}
.cfs-exempt strong{font-weight:600;font-size:15px}
.cfs-exempt span{color:var(--ink-muted)}

@media (max-width:900px){
  .cf-shop{--sh:76px}
}
@media (max-width:640px){
  .cf-shop{--gutter:16px}
  .cfs-top__in{padding-top:calc(var(--sh) + 24px);padding-bottom:28px;gap:20px}
  .cfs-top__copy{flex-basis:100%}
  .cfs-search{flex-basis:100%}
  .cfs-search button span{display:none}
  .cfs-search button{padding-left:16px}
  .cfs-lead{font-size:16px}
  .cfs-tabs__in{gap:24px;padding-right:0}
  .cf-shop .cfs-tabs .cfs-cartlink{padding-right:var(--gutter);--cart-pr:var(--gutter)}
  .cf-shop .cfs-tabs a{min-height:48px}
  .cfs-sec{padding-top:40px;padding-bottom:40px}
  .cfs-sec+.cfs-sec>.cfs-wrap::before{margin-bottom:40px}
  .cfs-sec--first{padding-top:28px}
  .cfs-head{margin-bottom:24px}
  .cfs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .cfs-card__name{font-size:15px}
  .cfs-card__status{font-size:13px}
  .cfs-facets{max-width:none}
  .cfs-buy{gap:28px}
  .cfs-line{grid-template-columns:80px minmax(0,1fr);gap:16px}
  .cfs-line__media{width:80px;height:80px}
  .cfs-line__total{grid-column:2;text-align:left}
  .cfs-summary{max-width:none}
  .cfs-band .cfs-wrap{padding-top:56px;padding-bottom:56px}
}