/* ==========================================================================
   St John shop archive (/shop-first-aid-kits/ + category archives)
   Shares card / cause / heading styles with stj-product.css (also loaded here).
   ========================================================================== */
.stj-shop{--green:#389F4E;--green-d:#2c7d3e;--green-dd:#215e2f;--yellow:#ECE62B;--ink:#333;--ink2:#030303;--muted:#6d6d6d;--soft:#f3f8f4;--line:#e6e9e6;--radius:4px;
  font-family:'Montserrat',sans-serif;color:var(--ink);line-height:1.6;font-size:16px;background:#fff}
.stj-shop *,.stj-shop *::before,.stj-shop *::after{box-sizing:border-box}
.stj-shop img{max-width:100%;height:auto;display:block}
.stj-shop a{text-decoration:none}
.stj-shop strong{font-weight:700;color:var(--ink2)}
.stj-shop .stj-wrap{max-width:1180px;margin:0 auto;padding:0 40px}
/* The7 reserves a sidebar grid column on the shop page: collapse it so the archive uses the full content width */
.woocommerce-shop #main > .wf-wrap > .wf-container-main,.tax-product_cat #main > .wf-wrap > .wf-container-main,.tax-product_tag #main > .wf-wrap > .wf-container-main{display:block!important;grid-template-columns:none}
.woocommerce-shop #main .sidebar,.tax-product_cat #main .sidebar,.tax-product_tag #main .sidebar{display:none!important}
.stj-shop{width:100%;grid-column:1 / -1}
/* The7 title band off on shop archives */
.woocommerce-shop .page-title,.tax-product_cat .page-title,.tax-product_tag .page-title{display:none}
/* headings + buttons (same as product page) */
.stj-shop .stj-th{display:block;margin:0;font-family:'Montserrat',sans-serif;line-height:1.2}
.stj-shop .stj-th .a{display:block;font-size:22px;font-weight:600;color:var(--ink2);line-height:1.3;margin-bottom:9px}
.stj-shop .stj-th .b{display:inline;background:var(--yellow);color:#0a0a0a;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:3px 12px;font-size:33px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;line-height:1.62}
.stj-shop .stj-th-d .a{color:#fff}
.stj-shop .stj-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;padding:0 34px;height:54px;line-height:1;border-radius:var(--radius);border:2px solid transparent;transition:.2s;cursor:pointer;text-decoration:none}
.stj-shop .stj-btn-y{background:var(--yellow);color:#1c1c1c}.stj-shop .stj-btn-y:hover{background:#dcd612;color:#1c1c1c}
.stj-shop .stj-btn-g{background:var(--green);color:#fff}.stj-shop .stj-btn-g:hover{background:var(--green-d);color:#fff}
/* hero */
.stj-shero{position:relative;color:#fff;overflow:hidden;background:#12301b;min-height:58vh;display:flex;align-items:flex-end;width:100vw;margin-left:calc(50% - 50vw)}
.stj-shero .img{position:absolute;inset:0;background-size:cover;background-position:center 40%;z-index:0;transform:scale(1.15) translateX(7%);transform-origin:center}
.stj-shero .scrim{position:absolute;inset:0;background:linear-gradient(108deg,rgba(10,32,18,.9),rgba(16,48,28,.66) 52%,rgba(16,48,28,.3));z-index:1}
.stj-shero .fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,24,14,.6),rgba(8,24,14,0) 60%);z-index:2}
.stj-shero .stj-wrap{position:relative;z-index:3;padding-top:110px;padding-bottom:54px;width:100%}
.stj-shop .stj-shero h1{color:#fff;font-family:'Montserrat',sans-serif;font-size:52px;font-weight:500;line-height:1.09;margin:0 0 18px;max-width:15ch;letter-spacing:0}
.stj-shero .lead{color:rgba(255,255,255,.94);font-size:20px;max-width:52ch;line-height:1.6;margin:0}
.stj-shero .lead strong{color:#fff}
.stj-shero .cred{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:rgba(255,255,255,.74)}
.stj-shero .cred svg{width:15px;height:15px;flex:none}
/* grid */
.stj-shop .stj-sgrid{padding-top:88px;padding-bottom:96px}
.stj-sgrid .head{max-width:700px;margin-bottom:44px}
.stj-sgrid .head p{font-size:17px;color:#4b4b4b;margin:18px 0 0;line-height:1.65}
.stj-shop .stj-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 10px}
.stj-shop .stj-track::-webkit-scrollbar{display:none}
.stj-shop .stj-track .stj-card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start}
.stj-shop .stj-ctrl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:26px}
.stj-shop .stj-pg{display:flex;gap:10px}
.stj-shop .stj-pg span{width:34px;height:8px;border-radius:99px;background:#dfe3df;cursor:pointer;transition:.2s}
.stj-shop .stj-pg span.on{background:var(--green);width:52px}
.stj-shop .stj-arr{display:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--ink2);background:#fff;color:var(--ink2);cursor:pointer;place-items:center;padding:0;margin:0;box-shadow:none}
.stj-shop .stj-arr svg{width:18px;height:18px}
.stj-shop .stj-arr:hover{background:var(--ink2);color:#fff}
/* no stray white band between the last row and the footer */
.woocommerce-shop #main,.tax-product_cat #main,.tax-product_tag #main{padding-bottom:0!important}
.woocommerce-shop #main > .wf-wrap,.tax-product_cat #main > .wf-wrap,.tax-product_tag #main > .wf-wrap{padding-bottom:0!important}
.stj-shop .stj-card{flex:none}
.stj-shop .stj-card .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.stj-shop .woocommerce-pagination{margin-top:36px;text-align:center}
.stj-shop .woocommerce-pagination ul.page-numbers{display:inline-flex;gap:8px;list-style:none;margin:0;padding:0;border:0}
.stj-shop .woocommerce-pagination ul.page-numbers li{border:0}
.stj-shop .woocommerce-pagination .page-numbers{display:inline-block;min-width:40px;height:40px;line-height:38px;border:1px solid var(--line);border-radius:var(--radius);padding:0 12px;color:var(--ink2);font-weight:700}
.stj-shop .woocommerce-pagination .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
.stj-shop .woocommerce-info,.stj-shop .woocommerce-message,.stj-shop .woocommerce-error{margin-bottom:28px}
/* cause row on shop: full-bleed like the product page */
.stj-shop .stj-cause{width:100vw;margin-left:calc(50% - 50vw)}

/* outline button (dark) */
.stj-shop .stj-btn-o{background:transparent;border-color:var(--ink2);color:var(--ink2)}.stj-shop .stj-btn-o:hover{background:var(--ink2);color:#fff}
.stj-shop .stj-link{color:var(--green);font-weight:700}
/* which kit */
.stj-which{background:var(--soft);padding:88px 0;width:100vw;margin-left:calc(50% - 50vw)}
.stj-which .rows{margin-top:36px;border-top:1px solid #d9e2db}
.stj-which .row{display:grid;grid-template-columns:260px 1fr 40px;gap:30px;align-items:center;padding:26px 0;border-bottom:1px solid #d9e2db;color:var(--ink);transition:.15s}
.stj-which .row h3{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:600;color:var(--ink2);margin:0;line-height:1.3}
.stj-which .row p{font-size:15.5px;color:#4a544e;margin:0;line-height:1.55}
.stj-which .row .go{width:40px;height:40px;border-radius:50%;background:#0a0a0a;color:#fff;display:grid;place-items:center;transition:.2s}
.stj-which .row .go svg{width:16px;height:16px}
.stj-which .row:hover .go{background:var(--green)}
.stj-which .row:hover h3{color:var(--green-dd)}
/* why St John (dark, text left / photo right) */
.stj-swhy{background:#0a0a0a;color:#fff;padding:96px 0;width:100vw;margin-left:calc(50% - 50vw)}
.stj-swhy .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.stj-swhy .txt .lead{font-size:22px;font-weight:600;color:#fff;margin:26px 0 14px;line-height:1.4}
.stj-swhy .txt p{color:rgba(255,255,255,.86);font-size:16.5px;line-height:1.7;margin:0 0 14px}
.stj-swhy .txt p strong{color:#fff}
.stj-swhy .txt .stj-btn{margin-top:18px}
.stj-swhy .im{aspect-ratio:4/3;border-radius:6px;background-size:cover;background-position:center 35%;position:relative;overflow:hidden}
.stj-swhy .im::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(56,159,78,.5) 0%,rgba(56,159,78,.18) 34%,rgba(56,159,78,0) 60%)}
/* FAQs */
.stj-faq{padding:88px 0}
.stj-faq .list{margin-top:36px;border-top:1px solid var(--line)}
.stj-faq details{border-bottom:1px solid var(--line)}
.stj-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-family:'Montserrat',sans-serif;font-size:17px;font-weight:600;color:var(--ink2)}
.stj-faq summary::-webkit-details-marker{display:none}
.stj-faq summary .x{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink2);background:var(--ink2);color:#fff;display:grid;place-items:center;font-size:18px;line-height:1;font-weight:500;transition:.2s}
.stj-faq details[open] summary .x{transform:rotate(45deg);background:transparent;color:var(--ink2)}
.stj-faq .ans{padding:0 50px 22px 0}
.stj-faq .ans p{font-size:15.5px;color:#4a544e;line-height:1.65;margin:0 0 12px}
/* closing */
.stj-ready{background:var(--soft);padding:88px 0;text-align:center;width:100vw;margin-left:calc(50% - 50vw)}
.stj-ready p{font-size:17px;color:#4b4b4b;max-width:62ch;margin:22px auto 0;line-height:1.65}
.stj-ready .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

@media (max-width:900px){
  .stj-shop .stj-wrap{padding-left:0;padding-right:0}
  .stj-shero .stj-wrap{padding-left:50px;padding-right:50px}
  .stj-shop .stj-shero h1{font-size:36px}
  .stj-shop .stj-th .b{font-size:28px}.stj-shop .stj-th .a{font-size:19px}
  .stj-shop .stj-sgrid{padding-top:56px;padding-bottom:64px}
  .stj-which,.stj-faq,.stj-ready{padding:56px 0}.stj-swhy{padding:56px 0}
  .stj-which .stj-wrap,.stj-swhy .stj-wrap,.stj-ready .stj-wrap{padding-left:50px;padding-right:50px}
  .stj-which .row{grid-template-columns:1fr 40px;gap:8px 20px}.stj-which .row p{grid-column:1 / span 2}
  .stj-swhy .grid{grid-template-columns:1fr;gap:30px}.stj-swhy .im{order:-1}
  .stj-faq .ans{padding-right:0}
  .stj-shop .stj-track{gap:16px}.stj-shop .stj-track .stj-card{flex:0 0 100%}
  .stj-shop .stj-pg{display:none}.stj-shop .stj-arr{display:grid}.stj-shop .stj-ctrl{gap:18px}
}
@media (max-width:778px){
  .stj-shero .stj-wrap{padding-left:20px;padding-right:20px}
  .stj-shop .stj-sgrid{padding-left:20px;padding-right:20px}
  .stj-which .stj-wrap,.stj-swhy .stj-wrap,.stj-faq .stj-wrap,.stj-ready .stj-wrap{padding-left:20px;padding-right:20px}
}