/*
Theme Name: BuildApp Store
Theme URI: https://store.buildappsites.com
Description: Premium minimal WooCommerce theme (child of Storefront) for BuildAppSites Store.
Author: BuildAppSites
Template: storefront
Version: 1.0
*/

/* ===== Fonts & base ===== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');
body,button,input,select,textarea,.site{font-family:'Jost',system-ui,sans-serif;color:#1b1b1b;}
h1,h2,h3,h4,h5,.storefront-product-section-title,.section-title{font-family:'Jost',sans-serif;font-weight:600;letter-spacing:-.01em;color:#111;}
body{background:#fff;}
a{color:#111;}
a:hover{color:#8a6d3b;}
.col-full,.woocommerce-breadcrumb{max-width:1220px;}

/* ===== Header ===== */
.site-header{background:#fff!important;border-bottom:1px solid #ededed;padding:1.15em 0;}
.site-branding .site-title a,.site-title a{color:#111!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.16em;font-size:1.05em;}
.site-header .site-branding{margin-bottom:0;}
p.site-description{display:none;}
.main-navigation ul li a,.secondary-navigation ul li a{color:#2a2a2a!important;text-transform:uppercase;letter-spacing:.14em;font-size:.74em;font-weight:500;}
.main-navigation ul li a:hover{color:#8a6d3b!important;}
.site-header-cart .cart-contents{color:#111!important;text-transform:uppercase;letter-spacing:.1em;font-size:.8em;}
.storefront-handheld-footer-bar{background:#111;}

/* ===== Buttons (premium mono, square) ===== */
button,.button,input[type=submit],
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:#111!important;color:#fff!important;border:1px solid #111!important;border-radius:0!important;
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:.78em;padding:1.05em 2.3em!important;transition:.25s;}
button:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{
  background:#fff!important;color:#111!important;}
.button.outline{background:#fff!important;color:#111!important;}
.button.outline:hover{background:#111!important;color:#fff!important;}

/* ===== Product grid ===== */
ul.products li.product .woocommerce-loop-product__title{font-size:1.02em!important;font-weight:500!important;padding-top:1em!important;color:#1b1b1b;}
ul.products li.product .price{color:#111!important;font-weight:500;}
ul.products li.product img{border-radius:0;transition:.5s;background:#f6f5f2;}
ul.products li.product:hover img{opacity:.85;}
ul.products li.product .button{margin-top:.4em;}
.storefront-sorting,.woocommerce-result-count{font-size:.85em;color:#777;}
.onsale{background:#111!important;color:#fff!important;border-radius:0!important;border:0!important;text-transform:uppercase;letter-spacing:.08em;font-size:.7em;}

/* ===== Section titles ===== */
.section-title{text-align:center;font-size:2em;letter-spacing:.02em;margin:0 0 .2em;}
.section-sub{text-align:center;color:#8a857c;margin-bottom:2.4em;font-weight:300;}

/* full-bleed helper for homepage bands */
.bs-hero,.bs-usp,.bs-news{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

/* ===== HERO ===== */
.bs-hero{min-height:78vh;display:flex;align-items:center;color:#fff;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),url('https://picsum.photos/seed/troubhero/1900/1100') center/cover;}
.bs-hero .in{max-width:1220px;margin:0 auto;padding:0 24px;width:100%;}
.bs-hero .eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.8em;opacity:.9;margin-bottom:16px;}
.bs-hero h1{color:#fff!important;font-size:clamp(38px,6vw,74px);font-weight:600;line-height:1.02;margin:0;max-width:16ch;}
.bs-hero p{font-size:1.15em;max-width:46ch;margin:18px 0 30px;font-weight:300;}
.bs-hero .button{background:#fff!important;color:#111!important;border-color:#fff!important;}
.bs-hero .button:hover{background:transparent!important;color:#fff!important;border-color:#fff!important;}

/* ===== USP strip ===== */
.bs-usp{border-top:1px solid #ececec;border-bottom:1px solid #ececec;background:#faf9f7;}
.bs-usp .wrap{max-width:1220px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:26px 24px;}
.bs-usp .u{flex:1;min-width:200px;text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:.78em;color:#444;}
.bs-usp .u b{display:block;font-size:1.5em;margin-bottom:6px;letter-spacing:0;}

/* ===== Collections tiles ===== */
.bs-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:782px){.bs-cols{grid-template-columns:1fr;}}
.bs-col{position:relative;overflow:hidden;aspect-ratio:3/4;display:block;}
.bs-col img{width:100%;height:100%;object-fit:cover;transition:.7s;}
.bs-col:hover img{transform:scale(1.05);}
.bs-col .lbl{position:absolute;inset:0;background:rgba(0,0,0,.22);display:flex;align-items:flex-end;padding:26px;}
.bs-col .lbl span{color:#fff;text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:1.05em;}

/* ===== Section spacing ===== */
.bs-section{max-width:1220px;margin:0 auto;padding:88px 24px;}
.bs-fw{padding-left:0;padding-right:0;}

/* ===== Newsletter ===== */
.bs-news{background:#111;color:#fff;text-align:center;padding:80px 24px;}
.bs-news h2{color:#fff!important;font-size:2em;margin:0 0 10px;}
.bs-news p{color:#c9c9c9;max-width:48ch;margin:0 auto 26px;font-weight:300;}
.bs-news form{max-width:460px;margin:0 auto;display:flex;gap:0;}
.bs-news input[type=email]{flex:1;border:1px solid #444;background:#1b1b1b;color:#fff;padding:1em 1.2em;border-radius:0;}
.bs-news button{border:0;}

/* ===== Footer ===== */
.site-footer{background:#0f0f0f!important;color:#9a9a9a!important;}
.site-footer a{color:#d0d0d0!important;}
.site-footer a:hover{color:#fff!important;}
.storefront-credit{background:#0a0a0a;color:#777;}

/* Hide default storefront homepage heading clutter on our custom page */
.page-template-template-fullwidth-php .entry-title{display:none;}
