/*
Theme Name: BowlingTools Store
Theme URI: https://bowlingtools.com/
Author: OpenAI for BowlingTools
Description: A fast, WooCommerce-ready storefront theme for BowlingTools products including the Resurfacer and Board Vision.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: bowlingtools
*/

:root {
  --bt-bg: #08111a;
  --bt-bg-soft: #0d1824;
  --bt-card: #111f2d;
  --bt-card-2: #15283a;
  --bt-text: #f7f9fb;
  --bt-muted: #aab7c5;
  --bt-accent: #ff7a1a;
  --bt-accent-2: #ff9f4d;
  --bt-line: rgba(255,255,255,.10);
  --bt-green: #36d399;
  --bt-shadow: 0 24px 60px rgba(0,0,0,.28);
  --bt-radius: 22px;
  --bt-max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bt-bg);
  color: var(--bt-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { width: min(var(--bt-max), calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,17,26,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bt-line);
}
.header-inner { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.02em; font-size:1.2rem; }
.brand-mark {
  width:42px; height:42px; border-radius:50%;
  background:
    radial-gradient(circle at 37% 32%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 56% 25%, #fff 0 4%, transparent 5%),
    radial-gradient(circle at 51% 43%, #fff 0 4%, transparent 5%),
    linear-gradient(145deg, var(--bt-accent), #c44300);
  box-shadow: 0 8px 24px rgba(255,122,26,.24);
}
.site-nav { display:flex; align-items:center; gap:28px; color:#d9e2ea; font-weight:700; font-size:.95rem; }
.site-nav a:hover { color:#fff; }
.cart-link { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--bt-line); border-radius:999px; }
.cart-count { min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; border-radius:99px; background:var(--bt-accent); color:#111; font-size:.76rem; font-weight:900; }
.menu-toggle { display:none; border:1px solid var(--bt-line); background:transparent; color:#fff; border-radius:10px; padding:10px 12px; }

.hero { position:relative; overflow:hidden; padding:86px 0 72px; }
.hero::before {
  content:""; position:absolute; inset:-30% -10% auto auto; width:560px; height:560px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,122,26,.25), rgba(255,122,26,0) 68%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:900; color:var(--bt-accent-2); }
.eyebrow::before { content:""; width:24px; height:2px; background:var(--bt-accent); }
h1 { font-size:clamp(3rem, 7vw, 6.4rem); line-height:.93; letter-spacing:-.06em; margin:.22em 0 .25em; max-width:850px; }
.hero p { color:var(--bt-muted); font-size:1.16rem; max-width:660px; margin:0 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.btn, .button, button, input[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:12px; padding:14px 20px; font-weight:900; cursor:pointer;
  background:var(--bt-accent); color:#111 !important; box-shadow:none; transition:.2s ease;
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover { transform:translateY(-1px); background:var(--bt-accent-2); }
.btn.secondary { background:transparent; color:#fff !important; border:1px solid var(--bt-line); }

.hero-visual {
  min-height:480px; position:relative; border-radius:34px; border:1px solid var(--bt-line);
  background:
    linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    radial-gradient(circle at 70% 20%, rgba(255,122,26,.3), transparent 38%),
    #0b1723;
  box-shadow:var(--bt-shadow); overflow:hidden;
}
.lane { position:absolute; left:50%; bottom:-10%; width:54%; height:110%; transform:translateX(-50%) perspective(650px) rotateX(57deg); background:linear-gradient(90deg,#ad7a3d,#e0b56e 22%,#b78040 23%,#e8c481 50%,#b78040 77%,#e0b56e 78%,#ad7a3d); border-left:4px solid #20262d; border-right:4px solid #20262d; box-shadow:0 0 50px rgba(0,0,0,.7); }
.lane::after { content:""; position:absolute; left:50%; top:15%; width:10px; height:10px; border-radius:50%; background:#3b2a1b; box-shadow:-42px 74px 0 #3b2a1b,42px 74px 0 #3b2a1b,-85px 145px 0 #3b2a1b,0 145px 0 #3b2a1b,85px 145px 0 #3b2a1b; }
.ball { position:absolute; width:170px; height:170px; border-radius:50%; left:10%; bottom:10%; background:radial-gradient(circle at 35% 30%, #4a5a6b, #101822 42%, #03070b 72%); box-shadow:0 35px 70px rgba(0,0,0,.58); }
.ball::before, .ball::after { content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:#020407; top:44px; left:62px; box-shadow:35px 4px 0 #020407, 18px 33px 0 #020407; }
.tool-badge { position:absolute; right:24px; top:24px; padding:12px 14px; background:rgba(8,17,26,.78); border:1px solid var(--bt-line); border-radius:14px; font-weight:800; font-size:.88rem; }

.trust-strip { border-top:1px solid var(--bt-line); border-bottom:1px solid var(--bt-line); background:#0b1620; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-item { padding:24px; text-align:center; border-right:1px solid var(--bt-line); }
.trust-item:last-child { border-right:0; }
.trust-item strong { display:block; color:#fff; }
.trust-item span { color:var(--bt-muted); font-size:.9rem; }

.section { padding:82px 0; }
.section-kicker { color:var(--bt-accent-2); font-size:.78rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.section-title { font-size:clamp(2.1rem,4vw,3.8rem); letter-spacing:-.045em; line-height:1; margin:10px 0 16px; }
.section-copy { max-width:720px; color:var(--bt-muted); margin:0 0 34px; }

.product-feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.product-feature { position:relative; overflow:hidden; min-height:500px; border:1px solid var(--bt-line); border-radius:var(--bt-radius); background:linear-gradient(145deg,var(--bt-card),var(--bt-card-2)); box-shadow:var(--bt-shadow); }
.product-feature-media { height:280px; display:grid; place-items:center; background:radial-gradient(circle at center, rgba(255,122,26,.12), transparent 50%); overflow:hidden; }
.product-feature-media img { width:100%; height:100%; object-fit:cover; }
.placeholder-icon { font-size:5rem; filter:grayscale(.1); opacity:.92; }
.product-feature-body { padding:28px; }
.product-feature h3 { font-size:2rem; line-height:1; letter-spacing:-.035em; margin:0 0 10px; }
.product-feature p { color:var(--bt-muted); margin:0 0 20px; }
.price { font-size:1.4rem !important; font-weight:900; color:#fff !important; }
.product-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.how-card { padding:26px; border-radius:18px; border:1px solid var(--bt-line); background:#0c1823; }
.step { width:40px; height:40px; border-radius:12px; background:rgba(255,122,26,.14); color:var(--bt-accent-2); display:grid; place-items:center; font-weight:900; margin-bottom:18px; }
.how-card h3 { margin:0 0 8px; }
.how-card p { margin:0; color:var(--bt-muted); }

.cta { padding:34px; border-radius:var(--bt-radius); background:linear-gradient(120deg,#172b3e,#0c1722); border:1px solid var(--bt-line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cta h2 { margin:0 0 6px; font-size:2rem; }
.cta p { margin:0; color:var(--bt-muted); }

.site-main { min-height:60vh; }
.content-shell { padding:56px 0 82px; }
.entry-title { font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.04em; }

.site-footer { border-top:1px solid var(--bt-line); background:#050b11; padding:42px 0; color:var(--bt-muted); }
.footer-grid { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.footer-brand { color:#fff; font-weight:900; font-size:1.2rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }

/* WooCommerce */
.woocommerce .woocommerce-breadcrumb { color:var(--bt-muted); margin-bottom:28px; }
.woocommerce ul.products { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display:none !important; }
.woocommerce ul.products li.product { width:auto !important; margin:0 !important; float:none !important; border:1px solid var(--bt-line); border-radius:18px; padding:16px; background:var(--bt-card); }
.woocommerce ul.products li.product img { border-radius:12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color:#fff; font-size:1.25rem; }
.woocommerce ul.products li.product .price { color:#fff; }
.woocommerce div.product { display:grid; grid-template-columns:1fr 1fr; gap:42px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width:100%; float:none; }
.woocommerce div.product .product_title { font-size:clamp(2rem,4vw,4rem); line-height:1; letter-spacing:-.04em; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color:#fff; }
.woocommerce table.shop_table { border:1px solid var(--bt-line); border-collapse:collapse; border-radius:14px; overflow:hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color:var(--bt-line); padding:14px; }
.woocommerce-cart-form, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { background:var(--bt-card); border:1px solid var(--bt-line); border-radius:18px; padding:22px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { background:#08111a; color:#fff; border:1px solid var(--bt-line); border-radius:10px; padding:12px; min-height:46px; }
.woocommerce-info, .woocommerce-message { border-top-color:var(--bt-accent); background:#102131; color:#fff; }
.woocommerce-message::before, .woocommerce-info::before { color:var(--bt-accent); }

@media (max-width: 900px) {
  .hero-grid, .product-feature-grid, .woocommerce div.product { grid-template-columns:1fr; }
  .hero { padding-top:54px; }
  .hero-visual { min-height:380px; }
  .trust-grid, .how-grid, .woocommerce ul.products { grid-template-columns:1fr; }
  .trust-item { border-right:0; border-bottom:1px solid var(--bt-line); }
  .site-nav { display:none; position:absolute; left:20px; right:20px; top:72px; background:#0a1620; border:1px solid var(--bt-line); border-radius:16px; padding:16px; flex-direction:column; align-items:stretch; }
  .site-nav.open { display:flex; }
  .menu-toggle { display:block; }
  .cta, .footer-grid { flex-direction:column; align-items:flex-start; }
}


/* WooCommerce Blocks checkout — make the primary order action unmistakable */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  min-height: 58px !important;
  width: 100% !important;
  border: 2px solid var(--bt-accent) !important;
  border-radius: 12px !important;
  background: var(--bt-accent) !important;
  color: #111 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  opacity: 1 !important;
  box-shadow: 0 10px 28px rgba(255,122,26,.22) !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.wc-block-components-checkout-place-order-button:not(:disabled):hover,
.wc-block-components-checkout-place-order-button:not(:disabled):focus-visible {
  background: var(--bt-accent-2) !important;
  border-color: var(--bt-accent-2) !important;
  color: #111 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(255,122,26,.32) !important;
}

/* Only look disabled when WooCommerce has actually disabled the button. */
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-checkout-place-order-button[aria-disabled="true"] {
  background: #343a40 !important;
  border-color: #4c545c !important;
  color: #aeb6bd !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}


/* WooCommerce order success / thank-you state */
.wc-block-order-confirmation-status,
.wc-block-components-notice-banner.is-success,
.woocommerce-order {
  color: #fff;
}

.wc-block-order-confirmation-status {
  background: linear-gradient(180deg, rgba(18,72,36,.92), rgba(11,44,25,.96)) !important;
  border: 1px solid rgba(76, 201, 116, .45) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

.wc-block-order-confirmation-status__heading,
.wc-block-order-confirmation-status__content,
.wc-block-order-confirmation-status__title,
.wc-block-components-notice-banner.is-success,
.woocommerce-order p.woocommerce-notice,
.woocommerce-thankyou-order-received {
  color: #eafff0 !important;
}

.wc-block-order-confirmation-status__icon,
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-success::before {
  color: #4cc974 !important;
}

.wc-block-order-confirmation-status__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(76,201,116,.16) !important;
  border: 2px solid rgba(76,201,116,.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.wc-block-order-confirmation-status__icon svg,
.wc-block-order-confirmation-status__icon path,
.wc-block-order-confirmation-status__icon circle {
  fill: #4cc974 !important;
  stroke: #4cc974 !important;
}

.wc-block-components-notice-banner.is-success {
  background: rgba(18,72,36,.92) !important;
  border: 1px solid rgba(76, 201, 116, .45) !important;
  border-radius: 14px !important;
}

.woocommerce-thankyou-order-received,
.woocommerce-order-overview,
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--bt-card);
  border: 1px solid var(--bt-line);
  border-radius: 18px;
  padding: 20px;
}