/*
Theme Name: Trailbound
Theme URI: https://www.trailbound.com
Author: Jabu Designs
Author URI: https://www.jabudesigns.co.uk
Description: Black & green WooCommerce theme for the Trailbound single-product store. Designed to sit behind a static marketing front-end at the site root, with the shop served from /shop. Matches the Trailbound brand (black canvas, Trailbound green #44B649).
Version: 3.7
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.0
Text Domain: trailbound
*/

:root{
  --bg:#080a08; --bg2:#0d100d;
  --green:#44B649; --green-bright:#7CFF4A; --green-deep:#2e8a33;
  --text:#f3f6f3; --muted:#9aa39a; --line:rgba(68,182,73,.18);
  --maxw:1240px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Hanken Grotesk',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;line-height:1}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-bright)}
img{max-width:100%;height:auto}
::selection{background:var(--green);color:#000}

.tb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* ---------- shared header ---------- */
.tb-header{position:sticky;top:0;z-index:50;background:rgba(8,10,8,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:14px 0}
.tb-nav{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.tb-brand{display:flex;align-items:center;gap:12px}
.tb-brand img{height:38px;width:auto;filter:drop-shadow(0 0 14px rgba(68,182,73,.5))}
.tb-brand .name{font-family:'Saira Condensed';font-weight:800;font-size:1.4rem;letter-spacing:2px;color:#fff}
.tb-brand .name b{color:var(--green)}
.tb-navlinks{display:flex;gap:28px;align-items:center}
.tb-navlinks a{font-size:.8rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.tb-navlinks a:hover{color:#fff}
.tb-cart{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#000!important;
  font-family:'Saira Condensed';font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:10px 18px;border-radius:5px}
.tb-cart:hover{background:var(--green-bright);color:#000!important}
.tb-cart .count{background:#000;color:var(--green);border-radius:20px;padding:1px 8px;font-size:.78rem}

/* ---------- shared footer ---------- */
.tb-footer{border-top:1px solid var(--line);padding:42px 0 30px;margin-top:80px}
.tb-footer .row{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap}
.tb-footer .note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:24px;letter-spacing:.5px}

/* ---------- page shell ---------- */
.tb-main{min-height:60vh;padding:50px 0 20px}
.tb-page-head{max-width:var(--maxw);margin:0 auto 30px;padding:0 26px}
.tb-page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;color:#fff;letter-spacing:-.5px}
.woocommerce-breadcrumb{max-width:var(--maxw);margin:0 auto 26px;padding:0 26px;font-size:.78rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.woocommerce-breadcrumb a{color:var(--green)}

/* ---------- buttons (WooCommerce) ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button{
  background:var(--green)!important;color:#000!important;
  font-family:'Saira Condensed',sans-serif!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:1.5px!important;
  border:none!important;border-radius:5px!important;padding:14px 28px!important;
  font-size:1rem!important;cursor:pointer;transition:.25s!important;box-shadow:none!important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--green-bright)!important;color:#000!important;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(68,182,73,.4)!important;
}
.woocommerce .button.ghost,.woocommerce a.added_to_cart{
  background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.25)!important;
}

/* ---------- shop archive grid ---------- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0;margin:0}
.woocommerce ul.products li.product{
  background:linear-gradient(160deg,rgba(20,24,20,.9),rgba(11,14,11,.9));
  border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;transition:.3s;margin:0!important;width:auto!important;float:none!important}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);border-color:rgba(68,182,73,.5)}
.woocommerce ul.products li.product img{border-radius:10px;margin-bottom:14px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Saira Condensed';font-weight:700;color:#fff;font-size:1.25rem;text-transform:uppercase;padding:6px 0}
.woocommerce ul.products li.product .price{color:var(--green)!important;font-weight:700;font-size:1.15rem}

/* ---------- single product ---------- */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:50px;
  max-width:var(--maxw);margin:0 auto;padding:0 26px;align-items:start}
/* stop WooCommerce's default 48% float widths from breaking the grid */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary{width:100%!important;float:none!important;margin:0!important}
/* container itself is transparent so thumbnails can sit on the black page below */
.single-product div.product .woocommerce-product-gallery{border:none;background:none;border-radius:0;overflow:visible}
/* image viewport: no border, no panel background — the image is its own card */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.single-product div.product .images{
  border:none;border-radius:16px;overflow:hidden;background:none}
/* force the main image into a perfect square regardless of the file's shape */
.single-product .woocommerce-product-gallery__wrapper{margin:0}
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a{display:block;aspect-ratio:1/1;width:100%}
.single-product .woocommerce-product-gallery__image img{
  width:100%!important;height:100%!important;object-fit:cover;display:block}
/* thumbnails: proper squares on the black background, below the main image */
.single-product .woocommerce-product-gallery .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0!important;padding:0;list-style:none}
.single-product .flex-control-thumbs li{margin:0!important;width:74px!important;flex:0 0 74px}
.single-product .flex-control-thumbs img{
  width:74px!important;height:74px!important;aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);cursor:pointer;opacity:.6;transition:.2s}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--green)}
.single-product div.product .summary{padding-top:6px}
.single-product .product_title{font-family:'Saira Condensed';font-weight:800;color:#fff;
  font-size:clamp(1.6rem,2.6vw,2.2rem);text-transform:uppercase;letter-spacing:-.5px;line-height:1.05;margin:0 0 4px}
.single-product .product_meta{display:none}
.single-product .woocommerce-product-details__short-description{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.single-product .woocommerce-product-details__short-description ul{columns:2;column-gap:38px;margin:0;padding-left:1.1em}
.single-product .woocommerce-product-details__short-description li{break-inside:avoid;margin-bottom:4px;line-height:1.3}
@media(max-width:1100px){.single-product .woocommerce-product-details__short-description ul{columns:1}}
.single-product .price{color:var(--green)!important;font-family:'Saira Condensed';font-weight:900!important;font-size:2.4rem!important;margin:6px 0 10px!important}
.single-product .woocommerce-product-details__short-description{color:var(--muted);font-size:1.05rem;margin:0 0 14px}
.single-product .price del{color:var(--muted)!important;font-size:1.3rem!important;opacity:.7}
.single-product .price ins{text-decoration:none}
.single-product .stock{color:var(--green-bright)!important;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}

/* variations (size) */
.single-product .variations{margin:0 0 13px;border:none}
.single-product .variations th{color:#fff;font-family:'Saira Condensed';text-transform:uppercase;letter-spacing:1.5px;padding:10px 14px 10px 0}
.single-product .variations select{background:#11141f;background:#0d100d;color:#fff;border:1.5px solid rgba(255,255,255,.18);
  border-radius:8px;padding:12px 14px;font-family:'Hanken Grotesk';min-width:200px}
.single-product .quantity input.qty{background:#0d100d;color:#fff;border:1.5px solid rgba(255,255,255,.18);
  border-radius:8px;padding:12px;width:74px;text-align:center}
.single-product form.cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:11px 0 0}
.single-product .single_variation_wrap,.single-product .woocommerce-variation-add-to-cart{margin-top:0!important}
.single-product .single_add_to_cart_button{flex:1;min-width:200px;justify-content:center}

/* trust row under product */
.tb-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.tb-trust div{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.tb-trust .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* product tabs */
.woocommerce-tabs{grid-column:1/-1;margin-top:40px}
.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line);padding:0;display:flex;gap:8px}
.woocommerce-tabs ul.tabs li{background:transparent!important;border:none!important;border-radius:0!important}
.woocommerce-tabs ul.tabs li a{color:var(--muted)!important;font-family:'Saira Condensed';text-transform:uppercase;
  letter-spacing:1.5px;padding:12px 18px!important;display:block}
.woocommerce-tabs ul.tabs li.active a{color:var(--green)!important;border-bottom:2px solid var(--green)}
.woocommerce-tabs .panel{color:var(--muted);padding-top:22px}
.woocommerce-tabs .panel h2{color:#fff}

/* ---------- cart & checkout ---------- */
.woocommerce table.shop_table{background:rgba(13,16,13,.55);border:1px solid var(--line);border-radius:12px;border-collapse:separate}
.woocommerce table.shop_table th{color:#fff;font-family:'Saira Condensed';text-transform:uppercase;letter-spacing:1px}
.woocommerce table.shop_table td{color:var(--muted);border-top:1px solid var(--line)}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{
  background:rgba(13,16,13,.55);border:1px solid var(--line);border-radius:12px;padding:8px 18px}
.woocommerce form .form-row label{color:#cdd4cd;font-size:.85rem;letter-spacing:.5px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-selection,
.woocommerce-checkout input,.woocommerce-checkout select{
  background:#0d100d!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.16)!important;border-radius:8px!important;padding:12px!important}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{color:#fff;font-family:'Saira Condensed';text-transform:uppercase}

/* Block-based checkout: give floating labels room so text doesn't overlap them */
.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input{padding:1.6em 1em .45em!important;line-height:1.2!important}
.wc-block-components-text-input label{padding-top:.15em}
.wc-block-components-address-form input,
.wc-block-components-address-form .components-base-control input{padding:1.6em 1em .45em!important}

/* ---------- notices ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:rgba(68,182,73,.1)!important;border-top:3px solid var(--green)!important;color:#fff!important;border-radius:8px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--green)!important}

/* ---------- sale / launch-price flash ---------- */
.woocommerce span.onsale{
  background:var(--green)!important;color:#000!important;
  font-family:'Saira Condensed',sans-serif!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:1px;line-height:1;
  min-height:0;min-width:0;width:auto;height:auto;border-radius:7px;
  padding:12px 18px!important;font-size:1.05rem;top:16px;left:16px;margin:0;
  box-shadow:0 8px 22px rgba(68,182,73,.4)}

/* ---------- empty basket ---------- */
.tb-empty-cart{text-align:center;max-width:520px;margin:0 auto;padding:30px 20px 70px}
.tb-empty-cart .tb-empty-icon{width:92px;height:auto;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 18px rgba(68,182,73,.5))}
.tb-empty-cart h2{font-family:'Saira Condensed';font-weight:800;text-transform:uppercase;color:#fff;font-size:2rem;margin-bottom:10px}
.tb-empty-cart p{color:var(--muted);margin-bottom:24px}
.tb-empty-cart .button{display:inline-block}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .single-product div.product,.woocommerce ul.products{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr 1fr}
  /* keep the cart visible, only hide the text nav links */
  .tb-navlinks a:not(.tb-cart){display:none}
}
@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100%}
  *{max-width:100%}
  /* header */
  .tb-nav{padding:0 16px;gap:10px}
  .tb-brand img{width:160px!important}
  .tb-cart{padding:9px 14px;font-size:.85rem}
  /* page padding */
  .tb-wrap,.woocommerce-breadcrumb,.tb-page-head,
  .single-product div.product,.tb-empty-cart{padding-left:16px!important;padding-right:16px!important}
  .single-product div.product{gap:26px}
  /* product summary sizing */
  .single-product .product_title{font-size:1.5rem}
  .single-product .price{font-size:2rem!important}
  .single-product .woocommerce-product-details__short-description ul{columns:1}
  .single-product form.cart{gap:10px}
  .single-product .single_add_to_cart_button{width:100%;flex:1 1 100%}
  .single-product .variations select{min-width:0;width:100%}
  /* tabs wrap instead of overflowing */
  .woocommerce-tabs ul.tabs{flex-wrap:wrap}
  /* let WooCommerce handle its own responsive cart/checkout tables; just size text */
  .woocommerce table.shop_table{font-size:.92rem}
  .woocommerce-cart .cart-collaterals .cart_totals{width:100%!important;float:none}
}
@media(max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr}
  .single-product .flex-control-thumbs li,.single-product .flex-control-thumbs img{width:64px!important;height:64px!important;flex-basis:64px}
}