/*
Theme Name: H Town Performance Shop
Theme URI: https://www.htownutv.com/shop/
Author: Local Internet / H Town Performance
Description: Custom WooCommerce storefront theme designed to visually coordinate with the existing H Town Performance static website.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: htown-shop
*/

:root {
  --ht-black: #101010;
  --ht-charcoal: #1a1a1a;
  --ht-dark: #242424;
  --ht-gray: #5f5f5f;
  --ht-light: #f4f4f4;
  --ht-white: #ffffff;
  --ht-blue: #0066ff;
  --ht-blue-dark: #003fd1;
  --ht-blue-deep: #001c66;
  --ht-border: #dedede;
  --ht-max: 1180px;
  --ht-radius: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #232323;
  background: var(--ht-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--ht-blue); text-decoration: none; }
a:hover, a:focus { color: var(--ht-blue-dark); }
img { max-width: 100%; height: auto; }
.container { width: min(calc(100% - 36px), var(--ht-max)); margin-inline: auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ht-topbar { background: #0c0c0c; color: #e8e8e8; font-size: 13px; border-bottom: 1px solid #292929; }
.ht-topbar .container { min-height: 42px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.ht-topbar a { color:#fff; font-weight:700; }
.ht-topbar__left, .ht-topbar__right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ht-review-link { color:#fff !important; }

.site-header { background: var(--ht-white); border-bottom: 1px solid #d9e5ff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.site-header .container { min-height: 88px; display:flex; align-items:center; gap:34px; }
.site-branding { display:flex; align-items:center; margin-right:auto; }
.custom-logo-link { display:flex; align-items:center; }
.custom-logo { width:auto; max-height:68px; }
.ht-text-logo { display:inline-flex; flex-direction:column; line-height:1; color:#111; font-weight:900; letter-spacing:-1px; font-size:25px; }
.ht-text-logo span { color:var(--ht-blue); font-size:13px; letter-spacing:3px; margin-top:6px; }

.main-navigation ul { list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:5px; }
.main-navigation li { position:relative; }
.main-navigation a { display:block; padding:32px 13px; color:#151515; text-transform:uppercase; font-size:13px; font-weight:800; letter-spacing:.35px; border-bottom:3px solid transparent; }
.main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { color:var(--ht-blue); border-bottom-color:var(--ht-blue); }
.ht-header-account { display:flex; flex-direction:column; align-items:stretch; min-width:112px; }
.ht-cart-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ht-blue); color:#fff !important; padding:11px 14px; font-weight:800; text-transform:uppercase; font-size:12px; white-space:nowrap; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.ht-cart-link:hover { background:var(--ht-blue-dark); }
.ht-my-account-link { display:block; padding-top:4px; text-align:center; color:#3a3a3a; font-size:11px; font-weight:700; line-height:1.2; }
.ht-my-account-link:hover { color:var(--ht-blue); }
.menu-toggle { display:none; border:0; background:#111; color:#fff; font-weight:800; padding:10px 13px; cursor:pointer; }

.ht-shop-hero { position:relative; background:linear-gradient(105deg, #050505 0%, #101010 52%, #001c66 100%); color:#fff; border-bottom:5px solid var(--ht-blue); overflow:hidden; }
.ht-shop-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 78% 30%, rgba(255,255,255,.11), transparent 30%), repeating-linear-gradient(135deg, transparent 0 28px, rgba(255,255,255,.02) 28px 30px); pointer-events:none; }
.ht-shop-hero .container { position:relative; z-index:2; min-height:290px; display:flex; align-items:center; padding-block:48px; }
.ht-shop-hero__content { max-width:750px; }
.ht-eyebrow { color:#e4e4e4; font-weight:800; text-transform:uppercase; letter-spacing:2px; font-size:12px; }
.ht-shop-hero h1 { margin:7px 0 12px; font-size:clamp(34px, 5vw, 58px); line-height:1.04; text-transform:uppercase; letter-spacing:-1.5px; color:#fff; }
.ht-shop-hero p { margin:0; max-width:680px; font-size:18px; color:#eee; }
.ht-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }
.ht-button, .button, button.button, input.button, .wc-block-components-button { display:inline-flex; align-items:center; justify-content:center; border:0 !important; border-radius:0 !important; padding:13px 19px !important; background:var(--ht-blue) !important; color:#fff !important; font-weight:800 !important; text-transform:uppercase; font-size:13px !important; letter-spacing:.3px; cursor:pointer; }
.ht-button:hover, .button:hover, button.button:hover, input.button:hover { background:var(--ht-blue-dark) !important; color:#fff !important; }
.ht-button--outline { background:transparent !important; border:2px solid #fff !important; }
.ht-button--outline:hover { background:#fff !important; color:#111 !important; }

.ht-benefit-bar { background:#191919; color:#fff; }
.ht-benefit-bar .container { display:grid; grid-template-columns:repeat(3, 1fr); }
.ht-benefit { padding:18px 22px; border-right:1px solid #343434; }
.ht-benefit:last-child { border-right:0; }
.ht-benefit strong { display:block; color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:.4px; }
.ht-benefit span { color:#bbb; font-size:13px; }

.site-main { min-height:420px; }
.ht-section { padding:58px 0; }
.ht-section--gray { background:#f3f6fb; }
.ht-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:25px; }
.ht-section-heading h2 { margin:0; color:#151515; text-transform:uppercase; font-size:clamp(25px,3vw,36px); line-height:1.1; }
.ht-section-heading p { margin:7px 0 0; color:#666; }
.ht-blue-rule, .ht-red-rule { width:62px; height:4px; background:var(--ht-blue); margin-top:12px; }

.ht-shop-category-links { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 31px; }
.ht-shop-category-links a { display:inline-flex; align-items:center; min-height:38px; padding:8px 14px; border:1px solid #c7d8ff; background:#f7f9ff; color:#111; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.35px; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.ht-shop-category-links a:hover { background:var(--ht-blue); border-color:var(--ht-blue); color:#fff; }

.ht-shop-archive-categories { clear:both; margin:0 0 28px; padding:20px 22px 12px; background:#f3f6fb; border:1px solid #dbe5fa; border-top:4px solid var(--ht-blue); }
.ht-shop-archive-categories__heading { margin:0 0 12px; color:#151515; font-size:18px; font-weight:900; line-height:1.2; text-transform:uppercase; letter-spacing:.25px; }
.ht-shop-category-links--archive { margin:0; }
.ht-shop-category-links--archive .ht-shop-category-link--child { background:#fff; border-style:dashed; }
.ht-category-child-mark { margin-right:5px; color:var(--ht-blue); font-weight:900; }
.ht-featured-heading { margin:0 0 22px; color:#151515; text-transform:uppercase; font-size:22px; line-height:1.15; }

.ht-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.ht-category-card { min-height:170px; position:relative; display:flex; align-items:end; overflow:hidden; background:#222; border-bottom:4px solid var(--ht-blue); }
.ht-category-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:transform .25s ease, opacity .25s ease; }
.ht-category-card::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 25%, rgba(0,0,0,.86)); }
.ht-category-card__label { position:relative; z-index:2; color:#fff; padding:18px; font-size:17px; font-weight:900; text-transform:uppercase; }
.ht-category-card:hover img { transform:scale(1.04); opacity:.75; }

.woocommerce .products ul, .woocommerce ul.products { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; margin:0 !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display:none; }
.woocommerce ul.products li.product { width:auto !important; float:none !important; margin:0 !important; background:#fff; border:1px solid #e0e0e0; padding:0 0 18px !important; display:flex; flex-direction:column; position:relative; transition:transform .2s ease, box-shadow .2s ease; }
.woocommerce ul.products li.product:hover { transform:translateY(-3px); box-shadow:0 9px 25px rgba(0,0,0,.09); }
.woocommerce ul.products li.product a img { margin:0 0 15px !important; width:100%; aspect-ratio:1 / 1; object-fit:cover; background:#f3f3f3; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding:0 17px !important; color:#181818; font-size:16px !important; line-height:1.35; font-weight:800; }
.woocommerce ul.products li.product .price { padding:0 17px; color:var(--ht-blue) !important; font-weight:900 !important; font-size:17px !important; margin-top:auto; }
.woocommerce ul.products li.product .button { margin:10px 17px 0 !important; align-self:flex-start; }
.woocommerce span.onsale { min-height:auto !important; min-width:auto !important; line-height:1 !important; border-radius:0 !important; background:var(--ht-blue) !important; padding:8px 10px !important; top:10px !important; left:10px !important; right:auto !important; font-size:11px !important; text-transform:uppercase; }

.ht-content-wrap { padding:45px 0 65px; }
.ht-content-wrap .woocommerce-breadcrumb { color:#777; font-size:13px; margin-bottom:22px; }
.ht-content-wrap .woocommerce-breadcrumb a { color:#333; }
.woocommerce .woocommerce-result-count { color:#666; }
.woocommerce .woocommerce-ordering select { padding:10px; border:1px solid #ccc; background:#fff; }
.woocommerce div.product { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); gap:42px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width:auto !important; float:none !important; }
.woocommerce div.product .product_title { font-size:clamp(29px,4vw,46px); line-height:1.08; margin:0 0 16px; color:#151515; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color:var(--ht-blue) !important; font-size:26px !important; font-weight:900; }
.woocommerce div.product .woocommerce-product-details__short-description { color:#555; }
.woocommerce div.product form.cart { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.woocommerce .quantity .qty { min-height:43px; padding:8px; border:1px solid #bbb; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left:0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius:0 !important; background:#eee !important; }
.woocommerce-message, .woocommerce-info { border-top-color:var(--ht-blue) !important; }
.woocommerce-message::before, .woocommerce-info::before { color:var(--ht-blue) !important; }
.woocommerce table.shop_table { border-radius:0 !important; }
.woocommerce-cart table.cart img { width:78px; }
.woocommerce-checkout #payment { background:#f1f1f1 !important; border-radius:0 !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container--default .select2-selection--single { min-height:45px; border:1px solid #c7c7c7; border-radius:0; padding:9px 10px; }

.ht-cta { background:var(--ht-blue); color:#fff; }
.ht-cta .container { min-height:145px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.ht-cta h2 { margin:0 0 3px; color:#fff; text-transform:uppercase; font-size:28px; }
.ht-cta p { margin:0; color:#e8f0ff; }
.ht-cta .ht-button { background:#111 !important; }

.site-footer { background:#111; color:#aaa; }
.site-footer__main { padding:45px 0; display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:35px; }
.site-footer h3 { color:#fff; text-transform:uppercase; font-size:14px; letter-spacing:.5px; margin:0 0 14px; }
.site-footer p { margin:0 0 8px; font-size:14px; }
.site-footer a { color:#ddd; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:6px 0; }
.site-footer__bottom { border-top:1px solid #2b2b2b; padding:18px 0; font-size:12px; }
.site-footer__bottom .container { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

.ht-notice { padding:15px 18px; background:#fff7e8; border-left:4px solid #d99000; margin:20px 0; }
.ht-empty-products { padding:30px; background:#f4f4f4; border:1px solid #ddd; }

@media (max-width: 980px) {
  .menu-toggle { display:block; }
  .site-header .container { min-height:76px; flex-wrap:wrap; padding-block:10px; }
  .main-navigation { order:4; width:100%; display:none; }
  .main-navigation.is-open { display:block; }
  .main-navigation ul { display:block; border-top:1px solid #ddd; }
  .main-navigation a { padding:12px 4px; border-bottom:1px solid #eee; }
  .ht-category-grid, .woocommerce .products ul, .woocommerce ul.products { grid-template-columns:repeat(2,1fr); }
  .site-footer__main { grid-template-columns:repeat(2,1fr); }
  .woocommerce div.product { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .ht-topbar .container { padding-block:9px; display:block; }
  .ht-topbar__left { display:block; }
  .ht-topbar__left > * { display:block; margin:2px 0; }
  .ht-topbar__right { display:none; }
  .custom-logo { max-height:52px; }
  .ht-header-account { margin-left:auto; min-width:104px; }
  .ht-shop-hero .container { min-height:250px; }
  .ht-shop-hero h1 { font-size:36px; }
  .ht-benefit-bar .container { grid-template-columns:1fr; }
  .ht-benefit { border-right:0; border-bottom:1px solid #343434; padding-inline:0; }
  .ht-benefit:last-child { border-bottom:0; }
  .ht-category-grid, .woocommerce .products ul, .woocommerce ul.products { grid-template-columns:1fr; }
  .ht-section-heading { display:block; }
  .site-footer__main { grid-template-columns:1fr; }
  .ht-cta .container { padding-block:28px; display:block; }
  .ht-cta .ht-button { margin-top:16px; }
}