/* ==========================================================================
   BlueCollarz — content-page section styles
   Loaded after theme.css. Covers the coded page templates:
   Shop by Trade, Trade Landing hero, Collections, Custom Orders,
   Our Story, Contact. Shared components are defined once and reused.

   Sections:
     A. Shared — hero split, feature row, product card, crew band, FAQ
     B. Collections — product rows
     C. Custom Orders
     D. Our Story
     E. Contact
     F. Responsive
   ========================================================================== */

/* A. Shared components --------------------------------------------------- */

/* Split hero: text left, featured image right (Shop by Trade, Collections, Custom Orders) */
.hero-split{padding:60px 0}
.hero-split .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.hero-split h1{font-size:76px;margin:2px 0 16px}
.hero-split .lead{color:var(--mut);max-width:440px;margin-bottom:28px;font-size:16px}
.hero-split .btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-split .shot{aspect-ratio:16/11;border-radius:7px}
.hero-split .over{color:#d4d4d8}

/* Full-bleed hero: text over an image that bleeds to the right (Our Story, Contact, Wishlist) */
.hero-bleed{position:relative;min-height:450px;display:flex;align-items:center;overflow:hidden; background-size: cover;
    background-repeat: no-repeat; background-image: url(../images/hero-home-bg-1.jpg);
  }
/* .hero-bleed::after{content:attr(data-l);position:absolute;right:6%;top:16%;color:#4a4038;font-family:var(--cond);letter-spacing:2px;font-size:12px} */
.hero-bleed .wrap{position:relative;z-index:2;padding:50px 40px}
.hero-bleed h1{font-size:76px;line-height: 56px;}
.small-txt {
    font-size: 48px;
}
.mission .btn-o { margin-top: 15px; }
.hero-bleed p{color:#d4d4d8;font-size:16px;max-width:350px;margin-top:14px}
.hero-bleed .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* Four-icon feature row */
.features{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.features .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:34px 0}
.feat{display:flex;gap:16px;align-items:flex-start}
.feat .ic{color:var(--orange);font-size:32px;line-height:1}
.feat h3{font-family:var(--cond);text-transform:uppercase;font-size:18px;font-weight:400;letter-spacing:.4px;margin-bottom:4px}
.feat p{color:var(--mut);font-size:14px}
.features .feat .infos p { max-width: 200px; font-size: 16px; line-height: 20px; }

/* Product card (dark wood-texture image, heart, title, price, rating, swatches) */
.grid-p{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.pcard{border-radius:8px;overflow:hidden;display:block}
.coll-rows .pcard .imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pcard .imgwrap{position:relative;border-radius:8px;aspect-ratio:281/320;overflow:hidden;background-image: url(../images/product-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pcard .shirt{position:absolute;inset:14% 16%;background:linear-gradient(135deg,#1d1d20,#101012);clip-path:polygon(24% 6%,38% 0,62% 0,76% 6%,100% 20%,90% 40%,80% 34%,80% 100%,20% 100%,20% 34%,10% 40%,0 20%)}
.pcard .heart{position:absolute;top:12px;right:12px;width:30px;height:30px;background:rgba(255,255,255,.9);border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#333;font-size:15px;cursor:pointer;padding:0;transition:transform .12s,color .12s}
.pcard .heart:hover{transform:scale(1.1)}
.single-cstm-card .wl-toggle:hover { transform: scale(1.1); }
.pcard .heart.is-active{color:var(--orange)}
.pcard .badge{position:absolute;top:12px;left:12px;background:#000;color:#fff;font-family:var(--cond);font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px}
.pcard h3{font-family:var(--cond);text-transform:uppercase;font-size:15px;font-weight:400;letter-spacing:.4px;margin-top:14px}
.pcard .price{font-family:var(--cond);font-size:14px;color:var(--mut);margin-top:4px}
.pcard .rate{display:flex;align-items:center;gap:6px;margin-top:7px}
.pcard .rate .stars{color:var(--orange);font-size:12px;letter-spacing:1px}
.pcard .rate small{color:var(--mut);font-size:12px;font-weight:600}
.pcard .sw{display:flex;align-items:center;gap:6px;margin-top:12px}
.pcard .sw i{width:20px;height:15px;border-radius:8px;display:inline-block}
.pcard .sw small{color:var(--mut);font-size:12px;font-weight:600}

/* "Need gear for your crew" band */
.band{padding:0 0 70px}
.band .grid{display:grid;grid-template-columns:1fr 1.45fr;background:var(--bg2);border-radius:10px;overflow:hidden}
.band .txt{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.band h2{font-size:46px}
.band p{color:var(--mut);margin:14px 0 26px;max-width:380px;font-size:16px}
.band .shot{min-height:316px}
section.band.cta-coll .ph.shot { background-image: url("../images/group-photo.png"); background-repeat: no-repeat; background-size: cover; background-position: center; }

/* Centred section title + rule */
.ctitle{text-align:center;font-size:52px}
.bar{width:60px;height:3px;background:var(--orange);margin:12px auto 44px}

/* FAQ accordion */
.faqwrap{margin:0 auto}
.qa{background:#1C1C20;border:1px solid var(--line);border-radius:8px;padding:20px 24px;margin-bottom:12px}
.qa summary{font-family:var(--cond);text-transform:uppercase;font-size:16px;letter-spacing:.4px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--orange);font-size:22px}
.qa[open] summary::after{content:'\2212'}
.qa p{color:var(--mut);font-size:14px;margin-top:12px}

/* B. Collections — product rows ----------------------------------------- */
.collrow{padding:64px 0}
.collrow.lightrow{background:#EDEAE4;color:#0a0a0a}
.collrow .sec-head{align-items:center}
.collrow.lightrow .sec-head h2{color:var(--creamink)}
.collrow.lightrow .sec-head .link{color:#6b6b6b}
.collrow .row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.collrow.lightrow .pcard .imgwrap{background:#fff;border:1px solid #e2ddd2}
.collrow.lightrow .pcard .shirt{background:linear-gradient(135deg,#2a2a2e,#161618)}
.collrow.lightrow .pcard h3{color:var(--creamink)}
.collrow.lightrow .pcard .price{color:#555}
.collrow.lightrow .pcard .rate small,.collrow.lightrow .pcard .sw small{color:#8a8378}

/* C. Custom Orders ------------------------------------------------------- */
.why{text-align:center; background: #121212;}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:70px}
.ft .ic{color:var(--orange);font-size:34px;margin-bottom:14px}
.ft h3{font-family: var(--cond); text-transform: uppercase; font-size: 16px; font-weight: 400; margin-bottom: 8px; letter-spacing: 0.45px;}
.ft p{color:var(--mut);font-size:13.5px;max-width:230px;margin:0 auto}
.services{display:grid;grid-template-columns:repeat(3,1fr);    gap: 35px;}
.svc{position:relative;min-height:430px;overflow:hidden;padding:44px 46px;display:flex;flex-direction:column;justify-content:flex-start}
.svc .ph{position:absolute;inset:0;z-index:0}
.svc .grad{position:absolute;inset:0;}
.svc>*{position:relative;z-index:1;    margin-top: 100px;}
.svc h3{font-family:var(--disp);text-transform:uppercase;font-size:44px;font-weight: 400;}
.svc .d{color:#d4d4d8;max-width:320px;margin:20px 0 18px;font-size:14px}
.svc li{list-style:none;display:flex;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.svc li .c{color: #c15a2b; border: 1px solid #c15a2b; padding: 10px; border-radius: 50px; width: 24px; height: 24px; line-height: 0px; text-align: center; display: flex; align-items: center; justify-content: center;}
.quote-sec{background:var(--bg2)}
.qform-page{max-width: 1240px; background-color: #121212; padding: 25px; margin: 0 auto;}
.fl{display:block;font-family:var(--cond);text-transform:uppercase;font-size:13px;letter-spacing:.5px;color:#fff;margin:14px 0 6px}
.quote-form-header{ margin-bottom:25px; } .quote-title{ margin:0 0 8px; font-size:42px; line-height:1; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#fff; } .quote-title span{ color:#f58220; } .quote-desc{ margin:0; color:#b3b3b3; font-size:16px; line-height:1.6; }
.fld{width: 100%; background: #1C1C20; border: 1px solid #2a2a2a; border-radius: 10px; color: #fff; padding: 20px; font-family: var(--body); font-size: 15px;}
.fld::placeholder{color:#6a6a72}
form.home-qform { margin: inherit; }
form.home-qform .frow {
    margin: 10px 0px;
}
.frow{display:grid; grid-template-columns:1fr 1fr;gap:16px;margin: 20px 0px;}
textarea.fld{min-height:110px;resize:vertical}
.upload{border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--mut);font-size:14px;margin-top:6px;display:flex;align-items:center;gap:12px}
.upload .pick{background:#2a2a30;color:#fff;padding:8px 14px;border-radius:6px;font-family:var(--cond);text-transform:uppercase;font-size:12px}
.qform-page .btn{width:100%;margin-top:20px;justify-content:center}
.touch{text-align:center;background: #121212;}
.cbox.cinfo {margin-left: 70px;background-color: #121212; padding: 35px; border-radius: 10px;}
.touch .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tc{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:20px 20px}
.four-info .tc { background: #151518; text-align: left; }
.tc .ic{color:var(--orange);font-size:26px;margin-bottom:12px}
.tc h4{font-family:var(--cond);text-transform:uppercase;font-size:15px;letter-spacing:.5px;margin-bottom:6px}
.tc p{color:var(--mut);font-size:13px}

/* D. Our Story ----------------------------------------------------------- */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mission h2{font-size:52px;margin-bottom:22px}
.mission p{color:var(--mut);margin-bottom:16px;font-size:15px;    max-width: 640px;}
.mission .ph{min-height:550px;border-radius:12px; background-image: url("../images/welder.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.stand{background:var(--bg2);text-align:center}
.stand h2{font-size:52px;margin-bottom:44px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}
.c3{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.c3 .ph{aspect-ratio:16/10}
.c3 .tx{padding:26px 24px}
.c3 h3{font-family:var(--cond);text-transform:uppercase;font-size:19px;font-weight:600;margin-bottom:10px}
.c3 p{color:var(--mut);font-size:13.5px}
.how h2{font-size:52px;margin-bottom:44px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.s4{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:28px 24px}
.s4 .n{font-family:var(--disp);color:var(--orange);font-size:34px}
.s4 h3{font-family:var(--cond);text-transform:uppercase;font-size:17px;font-weight:600;margin:14px 0 8px}
.s4 p{color:var(--mut);font-size:13.5px}
.code{position:relative;text-align:center;overflow:hidden}
.code .bgimg{position:absolute;inset:0;background-image: url("../images/overlay-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center;z-index:0}
.code .wrap{position:relative;z-index:1}
.code h2{font-size:52px;margin-bottom:44px}
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.cd{background:rgba(18,18,18,.7);border:1px solid var(--line);border-radius:10px;padding:26px 28px;display:flex;gap:18px;align-items:flex-start}
.cd .ic{color:var(--orange);font-size:28px;flex:none}
.cd h3{font-family:var(--cond);text-transform:uppercase;font-size:17px;font-weight:600;margin-bottom:6px}
.cd p{color:var(--mut);font-size:13.5px}
.gallery4{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gallery4 .ph{aspect-ratio:1;border-radius:6px}

/* E. Contact ------------------------------------------------------------- */
.lead-blk{max-width:640px}
.lead-blk h2{font-size:52px;margin-bottom:16px}
.lead-blk p{color:var(--mut);font-size:15px}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;margin-top:44px}
/*.cbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:32px}*/
.cbox h3{font-family: 'Anton'; text-transform: uppercase; font-size: 24px; letter-spacing: 0.72px; margin-bottom: 18px; font-weight: 400;}
.cbox .fld{margin-bottom:20px}
.contact-grid input.fld { margin-bottom: 0px; }
.contact-grid select.fld { margin-bottom: 0px; }
textarea.cmsg{min-height:200px}
.cbox .btn{width:100%;justify-content:center}
.cinfo .row{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cinfo .row:last-child{border-bottom:none}
.cinfo .ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.cinfo h4{font-family:var(--cond);text-transform:uppercase;font-size:18px;letter-spacing:.45px;margin-bottom:3px;font-weight: 400;}
.cinfo p{color:var(--mut);font-size:16px}
.crewbox{border: 1px dashed #C15A2B; border-radius: 12px; padding: 36px 40px; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 30px; align-items: center; margin-top: 70px; background: #C15A2B0A;}
.crewbox .l{display:flex;gap:22px;align-items:center}
.crewbox .bic{width:64px;height:64px;border-radius:50%;border:1px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.crewbox h3{font-family: var(--disp); text-transform: uppercase; font-size: 36px; font-weight: 400; line-height: 45px;font-weight: 400;}
.crewbox .l p{color:var(--mut);font-size:15px;margin-top:15px;max-width:400px}
.crewbox .checks div{display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 18px; color: #fff; font-family: 'Inter'; font-weight: 400;}
.crewbox .checks .c{color:var(--orange)}
.trust-strip{padding: 0px 0 0px 0px; text-align: left;}
.trust-strip .stars{color:#D65B08;font-size:34px;letter-spacing:2px}
.trust-strip .tt{font-family: var(--disp); text-transform: uppercase; color: var(--orange); font-size: 24px; margin: 8px 0 0px; max-width: 335px; line-height: 30px;}

/* E2. Wishlist ----------------------------------------------------------- */
.wishlist-page{padding:0px 0 70px}
.wl-page { margin-bottom: 70px; }
.wishlist-page .chead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.wishlist-page .chead .sub{color:var(--mut);margin-top:8px}
.wishlist-page .cont{font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px;color:var(--orange);font-size:14px;white-space:nowrap}
.wl-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.wl-row{display:grid;grid-template-columns:2.4fr 1fr 1.2fr 1.2fr 44px;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}
.wl-row:last-child{border-bottom:0}
.wl-row.wl-head{background:var(--bg2);font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px;color:var(--mut);font-size:12px}
.wl-prod{display:flex;align-items:center;gap:16px}
.wl-prod .thumb{position:relative;width:64px;height:64px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(90deg,#2c2016 0 18px,#241a12 18px 36px)}
.wl-prod .thumb img{width:100%;height:100%;object-fit:cover}
.wl-prod .thumb .shirt{position:absolute;inset:14% 16%;background:linear-gradient(135deg,#1d1d20,#101012);clip-path:polygon(24% 6%,38% 0,62% 0,76% 6%,100% 20%,90% 40%,80% 34%,80% 100%,20% 100%,20% 34%,10% 40%,0 20%)}
.wl-prod .name{font-family:var(--cond);text-transform:uppercase;letter-spacing:.4px;color:#fff;font-size:15px}
.wl-price{font-family:var(--cond);color:var(--orange);font-size:16px}
.wl-stock{font-family:var(--cond);text-transform:uppercase;font-size:13px;color:var(--mut);display:flex;align-items:center;gap:8px}
.wl-stock .dot{width:9px;height:9px;border-radius:50%;background:#555}
.wl-stock .dot.in{background:#3fae5a}
.wl-stock .dot.out{background:#c0492b}
.wl-action .btn{padding:9px 16px;font-size:12px}
.wl-remove .wl-toggle{border:0;background:none;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;padding:4px;transition:color .12s}
.wl-remove .wl-toggle:hover{color:var(--orange)}
.wl-empty{text-align:center;background:#1C1C20;border:1px solid var(--line);border-radius:12px;padding:60px 24px}
.wl-empty .wl-heart{display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(193, 90, 43, .14); color: var(--orange); font-size: 38px; margin-bottom: 18px;}

.wl-empty h2{font-size:30px;margin-bottom:10px}
.wl-empty p{color:var(--mut);margin-bottom:22px}

/* F. Responsive ---------------------------------------------------------- */
@media(max-width:1000px){
  .hero-split .grid{grid-template-columns:1fr; gap: 22px;}.hero-split h1{font-size:54px}.hero-split .shot{order:-1}
  .hero-bleed h1{font-size:48px}
  .features .grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .grid-p,.collrow .row{grid-template-columns:repeat(3,1fr)}
  /* .collrow .row .pcard:nth-child(n+4){display:none} */
  .band .grid{grid-template-columns:1fr}.band .shot{min-height:220px;order:-1}
  .feats{grid-template-columns:repeat(2,1fr)}.services{grid-template-columns:1fr}.touch .grid{grid-template-columns:repeat(2,1fr)}
  .mission{grid-template-columns:1fr}.mission .ph{min-height:300px;order:-1}
  .cards3{grid-template-columns:1fr}.steps4{grid-template-columns:repeat(2,1fr)}.code-grid{grid-template-columns:1fr}.gallery4{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}.crewbox{grid-template-columns:1fr;gap:22px;border: 2px dashed #C15A2B;}
  .wl-row{grid-template-columns:2fr 1fr 1fr;gap:12px}
  .wl-row .wl-action,.wl-row.wl-head span:nth-child(4){display:none}
  .wl-remove{position:absolute;top:14px;right:16px}
  .wl-row{position:relative}
}
@media(max-width:640px){
  .wishlist-page .chead{flex-direction:column;align-items:flex-start;gap:12px}
  .wl-row{grid-template-columns:1fr;gap:10px}
  .wl-row.wl-head{display:none}
  .wl-price::before{content:attr(data-title) ': ';color:var(--mut);font-size:12px}
  .wl-stock{justify-content:flex-start}
  .wl-row .wl-action{display:block}
  .wl-action .btn{width:100%;text-align:center;display: flex; justify-content: center;}
  .hero-split h1{font-size:40px}.hero-bleed h1{font-size:38px}
  .grid-p,.collrow .row{grid-template-columns:repeat(2,1fr)}
  .ctitle,.sec-head h2,.mission h2,.stand h2,.how h2,.code h2,.lead-blk h2,.band h2,.svc h3{font-size:30px}
  .feats,.frow,.touch .grid,.steps4{grid-template-columns:1fr}
  .crewbox .l{flex-direction:column;text-align:center}
}

.features{ padding:40px 0; border: none; } .features .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; border-top: 1px solid #2a2a2a; padding-top: 50px; } .feat{ display:flex; align-items: center; gap:18px; } .feat-icon{ flex: 0 0 62px; } .feat-icon img{ width: 62px; height: 62px; display:block; object-fit:contain; } .feat-content h3{ margin:0 0 6px; color:#fff; font-size: 18px; font-weight: 400; text-transform:uppercase; letter-spacing: 0.45px; } .feat-content p{ margin:0; color: #a1a1aa; font-size: 16px; line-height: 20px; }
.trade-grid {
    padding-top: 0;
}
.home-trade1 { padding-top: 80px; }
.features .grid .feat-content p { max-width: 200px; }
.cbox.cinfo .row img { width: 54px; margin-right: 15px; }
.icn-img img {
    width: 42px;
}
.features .feat img { width: 70px; }
.cstm-odr p {
    max-width: 470px;
}
.why .feats .ft img { width: 70px; margin: 0 auto; margin-bottom: 20px; }
a.card.single-cstm-card h3 { font-family: var(--cond); text-transform: uppercase; font-size: 15px; font-weight: 400; letter-spacing: .4px; margin-top: 14px; color: #fff; }

.single-cstm-card {
	position: relative;
}
.ourstory { background-size: cover; background-repeat: no-repeat; background-image: url(../images/hero-home-bg-1.jpg); }
.single-cstm-card .wl-toggle { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background: none; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; cursor: pointer; padding: 0; transition: transform .12s, color .12s; }
.single-cstm-card .wl-toggle.is-active {
	color: #c15a2b;
}
.svc h3::after { content: ""; display: block; height: 5px; width: 100px; border-radius: 5px; margin-top: 0; background-color: #C15A2B; }

.emb-img { overflow: hidden; background-image: url(../images/emb.png); background-repeat: no-repeat; background-size: cover; background-position: center; }

.pri-img { overflow: hidden; background-image: url(../images/print.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.emb-img::after { display: none; }
.four-info .tc img { width: 52px; margin-bottom: 15px; }
.four-info .tc h4 { font-size: 20px; font-weight: 400; }
.touch h2.ctitle.disp { text-align: left; font-size: 52px; margin-bottom: 50px;}
.group-logo { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/group-photo.png); }
.woo-wrap .woocommerce-breadcrumb { display: none; }
.cart-empty.woocommerce-info {display: flex;padding-left: 15px;}
.cart-empty.woocommerce-info::before { color: #ffffff; }
.ourstory p { max-width: 700px; }
.ourstory h1.disp { margin-bottom: 20px; }
.wwe1 .ph { background-image: url("../images/wwe1.png"); background-position: center; background-size: cover;     height: 250px !important;
    width: 100%;}
.wwe2 .ph { background-image: url("../images/wwe2.png"); background-position: center; background-size: cover;     height: 250px !important;
    width: 100%;}
.wwe3 .ph { background-image: url("../images/wwe3.png"); background-position: center; background-size: cover;     height: 250px !important ;
    width: 100%;}
.cards3 .c3 .tx {
    background: #151518;
}
.steps4 .s4 h3 { font-size: 20px; font-weight: 400; letter-spacing: 0.5px; }
.steps4 .s4 { background: #151518; }
.steps4 .s4 { background: #151518; }
.steps4 .s4:hover { background: #c15a2b; } 
.steps4 .s4:hover .n { color: #ffffff; } 
.steps4 .s4:hover p { color: #ffffff; }
.code-grid .cd { background: #0A0A0ACC; }
.code-grid .cd .ic img { width: 54px; }

/*My Responsive Setting*/

@media screen and (max-width: 767px) {
    .ourstory { min-height: auto; background-position: center; }
    .cards3 .ph { height: 180px !important; }
    .code-grid .cd {  padding: 26px 22px; }
    .features .feat img { width: 64px; }
    .cbox.cinfo { margin-left: 0; padding: 22px; }
    .cbox.cinfo .row img { width: 44px; margin-right: 5px; }
    .crewbox { margin-top: 25px; padding: 36px 22px; }
    .crewbox .l img { width: 90px; }
    .crewbox .checks div { padding: 10px 0; }
    .faqwrap .qa { padding: 12px 24px; }
    .crewbox h3 { font-size: 24px; line-height: 32px; }
    .wl-page { margin-bottom: 50px; min-height: auto; background-position: center; }
    .wl-page .wrap h1.disp { margin-bottom: 0px !important; }
    .wl-empty { padding: 60px 22px; }
    
}



/*Tablet View*/

@media screen and (min-width: 768px) and (max-width: 1024px) { 
    .faqwrap .qa { padding: 12px 12px; }
    .git-box .btn-o { justify-content: center; }
    .wl-page { min-height: 300px; }
    .hero-split.sbt { padding-bottom: 0px; padding-top: 20px; }
    .group-block .txt { padding: 42px 32px; }
    .group-block .group-logo { min-height: 300px; }
    section.clt-page { padding-top: 22px; padding-bottom: 0px; }
    .cta-coll .txt { padding: 42px 32px; }
    .features.coll-feat { padding-bottom: 0px; }
    .ourstory { background-position: center; min-height: 350px; }
    .section.wwa { padding-top: 50px; }
    .section.code { padding-top: 50px; }
    .the-crew-btm { padding: 50px 0px; }
    .section.how { padding: 50px 0px; }
    .section.stand { padding: 50px 0px; }
    .git-box .crewbox .l img { width: 120px; }
    .crewbox .checks div { padding: 10px 0; }
    .features .feat img { width: 64px; }
    .features .grid { gap: 30px; }
}
.band.btm-cta {
    margin-top: 50px;
    padding-bottom: 0px;
}
.bcz-gear-design .bcz-chooser {
    margin-bottom: 70px;
}


/* J. Trade pages --------------------------------------------------------- */

/* A tile with its own photograph; one without keeps the placeholder art. */
.trade .trade-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
.trade.no-photo .ph{position:absolute;inset:0}

/* A trade page is the shop archive with this header on top. */
.trade-back{margin-bottom:18px;font-family:var(--cond);text-transform:uppercase;letter-spacing:2px;font-size:13px}
.trade-back a{color:var(--mut)}
.trade-back a:hover{color:var(--orange)}
.hero-split.trade-hero .trade-shot{position:relative;overflow:hidden;border-radius:7px;background:#161616}
.hero-split.trade-hero .trade-shot img.shot{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/11;border-radius:7px}

/* Nothing ready-made in this trade yet — still offer the way in. */
.trade-empty{color:var(--mut);margin:10px 0 18px}

@media(max-width:640px){
  .hero-split.trade-hero .trade-shot img.shot{aspect-ratio:4/3}
}

/* DTF heat transfers — third service card. Its photograph comes from the
   media library, so it is set on the element rather than from here. */
.dtf-img{overflow:hidden;background:linear-gradient(135deg,#232329,#141418);background-repeat:no-repeat;background-size:cover;background-position:center}
.dtf-img::after{display:none}
@media(max-width:1200px){ .services{grid-template-columns:1fr 1fr} }
@media(max-width:1000px){ .services{grid-template-columns:1fr} }

/* The heat-press photograph is brighter where this card's copy sits, so it
   carries a veil of its own rather than changing the other two cards. */
.dtf .grad{background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.28) 100%)}

/* The trade's artwork, offered as the second way to buy. Design art is drawn
   rather than photographed, so it is shown whole instead of cropped to fill. */
.trade-designs{padding-top:0}
.trade-design .imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%}
.trade-design .price{color:var(--orange)}
.trade-gear-head{margin-bottom:22px}