/*
Theme Name: ShopCraft
Theme URI: https://example.com/shopcraft
Author: Custom Theme Studio
Author URI: https://example.com
Description: A modern, responsive, conversion-focused WooCommerce theme styled for smartwatch and wearable-tech stores, with a customizable landing page, product catalogue, testimonials, and full checkout support. Built for non-technical administrators using the WordPress Customizer and Gutenberg.
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shopcraft
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, woocommerce
*/

/* -------------------------------------------------------------------------
   0. CSS VARIABLES (defaults - overridden inline by Customizer settings)
------------------------------------------------------------------------- */
:root{
  --sc-primary: #4f46e5;
  --sc-secondary: #0b0f19;
  --sc-accent: #22d3ee;
  --sc-button: #4f46e5;
  --sc-button-text: #ffffff;
  --sc-header-bg: #ffffff;
  --sc-footer-bg: #05070d;
  --sc-link: #4f46e5;
  --sc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-size-base: 16px;
  --sc-radius: 10px;
  --sc-container: 1240px;
  --sc-hero-gradient: radial-gradient(circle at 78% 15%, rgba(34,211,238,.55) 0%, rgba(34,211,238,0) 42%), linear-gradient(135deg, #05070d 0%, #0b0f19 35%, #1e1b4b 75%, #312e81 130%);
}

/* -------------------------------------------------------------------------
   1. RESET / BASE
------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--sc-font-body);
  font-size: var(--sc-font-size-base);
  line-height: 1.6;
  color: #1f2937;
  background: #ffffff;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--sc-link); text-decoration: none; transition: opacity .15s ease; }
a:hover{ opacity: .8; }
h1,h2,h3,h4,h5,h6{ font-family: var(--sc-font-heading); color: var(--sc-secondary); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; }
ul{ margin: 0; padding: 0; list-style: none; }
button, input, select, textarea{ font-family: inherit; font-size: 1rem; }
.container{ max-width: var(--sc-container); margin: 0 auto; padding: 0 24px; }
.sc-section{ padding: 72px 0; }
.sc-section--alt{ background: #f8fafc; }
.sc-section-head{ text-align: center; max-width: 640px; margin: 0 auto 48px; }
.sc-section-head p{ color: #64748b; }
.skip-link{ position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:10px 16px; z-index:10000; }
.skip-link:focus{ left:16px; top:16px; }

/* Buttons */
.sc-btn, .button, button[type="submit"], input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.wp-block-button__link{
  display: inline-block;
  background: var(--sc-button) !important;
  color: var(--sc-button-text) !important;
  border: none;
  padding: 14px 30px;
  border-radius: var(--sc-radius);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sc-btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  transform: translateY(-1px);
  opacity: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.sc-btn--outline{
  background: transparent !important;
  color: var(--sc-button) !important;
  border: 2px solid var(--sc-button);
  padding: 12px 28px;
}

/* -------------------------------------------------------------------------
   2. HEADER
------------------------------------------------------------------------- */
.sc-header{ background: var(--sc-header-bg); border-bottom: 1px solid #eef0f3; position: sticky; top: 0; z-index: 999; }
.sc-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 16px 24px; }
.sc-logo{ font-size: 1.5rem; font-weight: 800; color: var(--sc-secondary); }
.sc-logo img{ max-height: 44px; width: auto; }
.sc-nav ul{ display:flex; gap: 28px; }
.sc-nav a{ color: var(--sc-secondary); font-weight: 500; }
.sc-nav .sub-menu{ display:none; }
.sc-header-actions{ display:flex; align-items:center; gap: 18px; }
.sc-cart-link{ position: relative; font-weight: 600; color: var(--sc-secondary); display:flex; align-items:center; gap:6px; }
.sc-cart-count{ background: var(--sc-accent); color:#fff; font-size:.7rem; border-radius: 50%; padding: 2px 6px; min-width:18px; text-align:center; }
.sc-search-toggle, .sc-menu-toggle{ background:none; border:none; cursor:pointer; color: var(--sc-secondary); font-size:1.3rem; }
.sc-menu-toggle{ display:none; }

@media (max-width: 860px){
  .sc-nav{ display:none; }
  .sc-menu-toggle{ display:block; }
  .sc-nav.is-open{ display:block; position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid #eef0f3; padding: 16px 24px; }
  .sc-nav.is-open ul{ flex-direction:column; gap: 14px; }
}

/* -------------------------------------------------------------------------
   3. HERO
------------------------------------------------------------------------- */
.sc-hero{ position:relative; background: var(--sc-hero-gradient); overflow:hidden; }
.sc-hero::before{
  content:"";
  position:absolute;
  top: -25%;
  right: -8%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.55) 0%, rgba(79,70,229,.35) 45%, rgba(34,211,238,0) 72%);
  filter: blur(2px);
  pointer-events: none;
}
.sc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}
.sc-hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; padding: 96px 24px; max-width: var(--sc-container); margin:0 auto; }
.sc-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background: rgba(34,211,238,.12); color: #67e8f9; font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; border-radius:999px; margin-bottom:18px; backdrop-filter: blur(4px); border: 1px solid rgba(34,211,238,.25); }
.sc-hero h1{ margin-bottom: 18px; color:#ffffff; }
.sc-hero p.lead{ font-size: 1.15rem; color: rgba(255,255,255,.82); margin-bottom: 30px; max-width: 520px; }
.sc-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.sc-hero-ctas .sc-btn{ background: var(--sc-accent) !important; color: #06272e !important; box-shadow: 0 0 24px rgba(34,211,238,.45); }
.sc-hero-ctas .sc-btn--outline{ background: transparent !important; color:#fff !important; border-color: rgba(255,255,255,.35); }
.sc-hero-media{ border-radius: 24px; overflow:hidden; box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 30px 80px rgba(3,7,18,.6), 0 0 60px rgba(79,70,229,.25); border: 1px solid rgba(255,255,255,.1); }
.sc-hero-media video, .sc-hero-media img{ width:100%; display:block; }
@media (max-width: 860px){ .sc-hero-inner{ grid-template-columns: 1fr; padding: 56px 20px; } }

/* Trust / certification bar */
.sc-trust-bar{ background: var(--sc-secondary); padding: 22px 0; border-top: 1px solid rgba(255,255,255,.06); }
.sc-trust-list{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 36px; }
.sc-trust-item{ display:flex; align-items:center; gap:10px; color:#e2e8f0; font-weight:600; font-size:.92rem; white-space:nowrap; }
.sc-trust-item .sc-trust-icon{ font-size:1.2rem; }
@media (max-width: 780px){ .sc-trust-list{ gap: 20px; } }

/* -------------------------------------------------------------------------
   4. FEATURED / CATEGORIES / PRODUCT GRID
------------------------------------------------------------------------- */
.sc-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 1100px){ .sc-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 780px){ .sc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .sc-grid{ grid-template-columns: 1fr; } }

.sc-cat-card{ position:relative; border-radius: var(--sc-radius); overflow:hidden; aspect-ratio: 1/1; display:flex; align-items:flex-end; background:#e2e8f0; }
.sc-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.sc-cat-card:hover img{ transform: scale(1.06); }
.sc-cat-card .sc-cat-label{ position:relative; z-index:2; padding: 18px; color:#fff; font-weight:700; width:100%; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }

.woocommerce ul.products,
.woocommerce-page ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1100px){ .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 780px){ .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 480px){ .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns: 1fr !important; } }

/* WooCommerce core ships a legacy float clearfix (::before/::after with a
   content value) on ul.products. In a float layout that's invisible and
   harmless, but CSS Grid treats any pseudo-element that has `content` as
   a real grid item - so it was silently occupying row 1 / column 1 and
   pushing the first actual product into column 2. Strip it entirely. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
  content: none !important;
  display: none !important;
}

/* Neutralize WooCommerce core's legacy float/width layout so each card
   fills its own grid cell instead of a narrow fraction of it. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: 100% !important;
  min-width: 0;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #eef0f3;
  border-radius: var(--sc-radius);
  padding: 18px;
  background: #fff;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  transform: translateY(-3px);
  border-color: rgba(34,211,238,.5);
}

/* Defensive: if "Show categories & products" is ever enabled on the shop
   page, WooCommerce mixes category tiles into this same grid as
   <li class="product-category">. Give them matching card sizing so they
   don't throw off the row layout (e.g. a short first row). */
.woocommerce ul.products li.product-category{
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
  border: 1px solid #eef0f3;
  border-radius: var(--sc-radius);
  padding: 18px;
  background: #fff;
  text-align: center;
}
.woocommerce ul.products li.product-category img{
  aspect-ratio: 1 / 1;
  width: 100% !important;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
.woocommerce ul.products li.product-category h2{ font-size: 1.05rem; margin: 10px 0 0; }

/* Fixed-ratio image frame keeps every card the same shape regardless of
   the source photo's native dimensions. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.woocommerce ul.products li.product img{
  aspect-ratio: 1 / 1;
  width: 100% !important;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 14px !important;
}
.woocommerce ul.products li.product .price{ color: var(--sc-primary); font-weight:700; margin-top: auto; }
.woocommerce ul.products li.product .price del{ color:#94a3b8; font-weight:400; margin-right:6px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce span.onsale{ background: var(--sc-accent); color:#06272e; border-radius: 999px; font-weight:700; }
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3{ font-size:1.05rem; margin: 6px 0; }
.sc-view-details{ display:inline-block; margin-top:8px; font-weight:600; color: var(--sc-secondary); border:1px solid #e2e8f0; padding:8px 16px; border-radius: var(--sc-radius); margin-right:6px; }
.woocommerce ul.products li.product .sc-view-details,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart{
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   5. BENEFITS / TESTIMONIALS / NEWSLETTER
------------------------------------------------------------------------- */
.sc-benefits{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 900px){ .sc-benefits{ grid-template-columns: repeat(2,1fr); } }
.sc-benefit{ text-align:center; padding: 12px; }
.sc-benefit .sc-benefit-icon{ width:56px; height:56px; border-radius:50%; background: rgba(79,70,229,.12); color: var(--sc-primary); display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; font-size:1.6rem; }

.sc-testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 900px){ .sc-testimonials{ grid-template-columns: 1fr; } }
.sc-testimonial{ background:#fff; border:1px solid #eef0f3; border-radius: var(--sc-radius); padding: 28px; }
.sc-testimonial .stars{ color: var(--sc-accent); margin-bottom: 12px; letter-spacing:2px; }
.sc-testimonial .sc-author{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.sc-testimonial .sc-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.sc-testimonial .sc-author strong{ display:block; color: var(--sc-secondary); }
.sc-testimonial .sc-author span{ color:#94a3b8; font-size:.85rem; }

.sc-newsletter{ background: var(--sc-footer-bg); border-radius: 20px; padding: 56px; text-align:center; color:#fff; }
.sc-newsletter h2{ color:#fff; }
.sc-newsletter form{ display:flex; gap:12px; max-width:460px; margin: 24px auto 0; }
.sc-newsletter input[type="email"]{ flex:1; padding: 14px 16px; border-radius: var(--sc-radius); border:none; }
.sc-newsletter .sc-btn{ background: var(--sc-accent) !important; color:#06272e !important; }

/* -------------------------------------------------------------------------
   6. PRODUCT SINGLE PAGE
------------------------------------------------------------------------- */
.woocommerce div.product div.images .flex-control-thumbs{ display:flex; gap:10px; margin-top:10px; }
.woocommerce div.product div.images .flex-control-thumbs li{ width: 72px; }
.woocommerce div.product div.images img{ border-radius: var(--sc-radius); }
.woocommerce div.product .product_title{ margin-bottom: 6px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--sc-primary); font-size: 1.5rem; font-weight:700; }
.woocommerce div.product form.cart{ margin-top: 20px; }
.woocommerce div.product .stock{ font-weight:600; }
.woocommerce div.product .stock.in-stock{ color:#16a34a; }
.woocommerce div.product .stock.out-of-stock{ color:#dc2626; }
.woocommerce table.shop_attributes{ border-radius: var(--sc-radius); overflow:hidden; }
.woocommerce #reviews #comments ul.commentlist li img.avatar{ border-radius:50%; }
.woocommerce .related.products{ margin-top: 64px; }

/* -------------------------------------------------------------------------
   7. CART / CHECKOUT
------------------------------------------------------------------------- */
.woocommerce table.shop_table{ border-radius: var(--sc-radius); border-collapse: separate; border-spacing:0; overflow:hidden; border: 1px solid #eef0f3; }
.woocommerce table.shop_table th{ background:#f8fafc; }
.woocommerce-cart-form td, .woocommerce-cart-form th{ padding: 14px !important; }
.woocommerce-checkout #payment{ background:#f8fafc; border-radius: var(--sc-radius); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{
  border-radius: 8px; border:1px solid #e2e8f0; padding: 10px 12px;
}
.woocommerce-checkout-review-order-table{ background:#f8fafc; border-radius: var(--sc-radius); padding: 20px; }
.woocommerce .woocommerce-order{ border:1px solid #eef0f3; border-radius: var(--sc-radius); padding: 24px; }

/* -------------------------------------------------------------------------
   8. CONTACT / FORMS
------------------------------------------------------------------------- */
.sc-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
@media (max-width: 860px){ .sc-contact-grid{ grid-template-columns: 1fr; } }
.sc-contact-info li{ margin-bottom: 14px; display:flex; gap:10px; }
.wpcf7-form input, .wpcf7-form textarea, .wpforms-form input, .wpforms-form textarea, .gform_wrapper input, .gform_wrapper textarea{
  border-radius: 8px !important; border: 1px solid #e2e8f0 !important; padding: 12px !important; width: 100%;
}

/* -------------------------------------------------------------------------
   9. FOOTER
------------------------------------------------------------------------- */
.sc-footer{ background: var(--sc-footer-bg); color: #cbd5e1; padding: 64px 0 24px; margin-top: 64px; }
.sc-footer a{ color:#e2e8f0; }
.sc-footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 860px){ .sc-footer-grid{ grid-template-columns: 1fr 1fr; } }
.sc-footer h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.sc-footer-widget ul li{ margin-bottom:10px; }
.sc-footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 24px; flex-wrap:wrap; gap:12px; font-size:.85rem; }
.sc-footer-legal ul{ display:flex; gap: 18px; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   10. UTILITIES
------------------------------------------------------------------------- */
.sc-badge{ display:inline-block; background: var(--sc-accent); color:#fff; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; }
.sc-text-center{ text-align:center; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }