/*
Theme Name: Hello Elementor Child - Fabricut
Template: hello-elementor
Description: Child theme for Fabricut Laser & Iron Works. Adds a custom-styled WooCommerce shop archive, product cards, and a cart drawer that match the site's dark/ember industrial design. All product data is pulled live via WooCommerce hooks - nothing here is hardcoded.
Author: Fabricut
Version: 1.0.0
*/

:root{
  --bg:#0a0a0c; --panel:#111114; --panel-2:#16161b;
  --steel:#c9ced6; --steel-dim:#8a8f99;
  --ember:#ff6a1a; --ember-glow:#ff8a3d;
  --text:#e8eaee; --muted:#9aa0aa; --line:rgba(255,255,255,0.08);
}

/* ============ Site-wide base (header.php / footer.php load on every page) ============ */
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; margin:0; line-height:1.6;
}
body *{box-sizing:border-box}
body a{text-decoration:none; color:inherit}
body img{max-width:100%; display:block}
body h1, body h2, body h3, body h4{
  font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--text);
}
.container{max-width:1280px; margin:0 auto; padding:0 24px}

/* ============ Scope WooCommerce content areas to the dark theme ============ */
.woocommerce, .woocommerce-page{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
}
.woocommerce h1, .woocommerce h2, .woocommerce h3{
  font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em;
}

/* ============ Header (site-wide) ============ */
header.site{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,10,12,.85);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1280px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; width:auto}
.brand span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; color:var(--text)}
.brand small{display:block; color:var(--ember); font-size:10px; letter-spacing:.2em; text-transform:uppercase}
nav ul{display:flex; gap:32px; list-style:none; align-items:center; margin:0; padding:0}
nav a{font-size:14px; color:var(--steel); position:relative; padding:6px 0; transition:color .2s}
nav a:hover, nav a.active{color:var(--ember)}
.nav-right{display:flex; align-items:center; gap:16px}
.cta{
  background:linear-gradient(135deg,var(--ember),var(--ember-glow));
  color:#0a0a0c; padding:10px 20px; border-radius:6px;
  font-weight:600; font-size:14px; border:0; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,106,26,.4)}
.menu-toggle{display:none; background:none; border:0; color:var(--steel); font-size:24px; cursor:pointer}

/* ============ Footer (site-wide) ============ */
footer{
  padding:40px 0; border-top:1px solid var(--line); text-align:center;
  color:var(--steel-dim); font-size:13px;
}
footer .brand{justify-content:center; margin-bottom:14px}

@media(max-width:640px){
  nav ul{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--panel);
    padding:20px; gap:18px; border-bottom:1px solid var(--line);
  }
  nav ul.open{display:flex}
  .menu-toggle{display:block}
  .brand small{display:none}
}


/* ============ Archive header ============ */
.archive-hero{
  padding:56px 0 36px;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at top left, rgba(255,106,26,.08), transparent 55%), var(--panel);
}
.archive-hero .container{max-width:1280px;margin:0 auto;padding:0 24px}
.woocommerce-breadcrumb{font-size:13px;color:var(--steel-dim);margin-bottom:14px}
.woocommerce-breadcrumb a{color:var(--steel-dim);text-decoration:none;transition:color .2s}
.woocommerce-breadcrumb a:hover{color:var(--ember)}
.page-title{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:10px;color:var(--text)}
.term-description{color:var(--muted);max-width:560px}

/* ============ Layout ============ */
.archive-body{padding:48px 0 90px}
.archive-body .container{max-width:1280px;margin:0 auto;padding:0 24px}
.archive-grid{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:start}

/* ============ Sidebar / widgets ============ */
.shop-sidebar{
  position:sticky;top:24px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px;display:flex;flex-direction:column;gap:28px;
}
.shop-sidebar .widget-title{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim);
  margin-bottom:14px;font-weight:600;font-family:'Space Grotesk',sans-serif;
}
.shop-sidebar ul{list-style:none;padding:0;margin:0}
.shop-sidebar li{padding:6px 0;font-size:14px}
.shop-sidebar a{color:var(--steel);text-decoration:none;transition:color .2s}
.shop-sidebar a:hover{color:var(--ember)}
.shop-sidebar .count{color:var(--steel-dim);font-size:12px}
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-range{background:var(--ember)}
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle{background:var(--ember-glow);border:none}
.shop-sidebar .price_label{color:var(--text);font-size:13px}
.shop-sidebar .button{
  background:transparent;border:1px solid var(--line);color:var(--steel-dim);
  padding:9px;border-radius:6px;font-size:12.5px;cursor:pointer;transition:all .2s;
  width:100%;margin-top:10px;
}
.shop-sidebar .button:hover{border-color:var(--ember);color:var(--text)}

/* ============ Toolbar: result count + ordering ============ */
.woocommerce-result-count{color:var(--steel-dim);font-size:13px;margin:0}
.woocommerce-ordering select{
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:9px 14px;border-radius:6px;font-size:13.5px;outline:none;cursor:pointer;
}
.archive-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:26px;flex-wrap:wrap;
}

/* ============ Product grid / cards (li.product from WooCommerce loop) ============ */
.woocommerce ul.products, .woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;list-style:none;padding:0;margin:0 !important;
}
/* WooCommerce's old float-based clearfix (content:" ";display:table) turns into
   a real, empty grid item once the parent is display:grid - kill it outright. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
.woocommerce .products ul::before, .woocommerce .products ul::after{
  content:none !important;
  display:none !important;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:transform .3s, border-color .3s;
  padding:0 !important;
  width:auto !important;
  float:none !important;
  clear:none !important;
  margin:0 !important;
  position:relative;
}
ul.products li.product:hover{transform:translateY(-6px);border-color:rgba(255,106,26,.4)}
ul.products li.product a{text-decoration:none}
ul.products li.product .fabricut-thumb{aspect-ratio:4/3;overflow:hidden;position:relative;display:block}
ul.products li.product img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
  aspect-ratio:4/3;
}
ul.products li.product:hover img{transform:scale(1.06)}
.fabricut-stock-tag{
  position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:100px;letter-spacing:.04em;z-index:2;
}
.fabricut-stock-tag.instock{background:rgba(120,200,140,.15);color:#8fd6a3;border:1px solid rgba(120,200,140,.3)}
.fabricut-stock-tag.outofstock{background:rgba(200,90,90,.15);color:#e18f8f;border:1px solid rgba(200,90,90,.3)}
.fabricut-stock-tag.onbackorder{background:rgba(255,106,26,.15);color:var(--ember-glow);border:1px solid rgba(255,106,26,.3)}
ul.products li.product .fabricut-body{padding:20px;display:flex;flex-direction:column;gap:6px}
.fabricut-cat{font-size:11px;color:var(--steel-dim);letter-spacing:.08em;text-transform:uppercase}
ul.products li.product h2.woocommerce-loop-product__title{
  font-size:1.08rem;color:var(--text);margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;
}
ul.products li.product .price{
  font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:700;color:var(--text) !important;
  margin-top:4px;
}
ul.products li.product .price del{color:var(--steel-dim);font-weight:400;font-size:.9em}
ul.products li.product .price ins{text-decoration:none;color:var(--ember-glow)}
ul.products li.product .button{
  display:block;width:100%;margin-top:14px;
  background:linear-gradient(135deg,var(--ember),var(--ember-glow));
  color:#0a0a0c !important;border:0;border-radius:6px;font-weight:600;font-size:13px;
  letter-spacing:.03em;cursor:pointer;text-align:center;padding:11px;
  transition:transform .2s,box-shadow .2s;
}
ul.products li.product .button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,106,26,.35)}
ul.products li.product .button.loading{opacity:.6}
ul.products li.product .added_to_cart{
  display:block;text-align:center;margin-top:8px;font-size:12px;color:var(--ember-glow);
}

.woocommerce-info, .woocommerce-message{
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:14px 18px;border-radius:8px;grid-column:1/-1;
}

/* ============ Pagination ============ */
.woocommerce-pagination{margin-top:48px;text-align:center}
.woocommerce-pagination ul.page-numbers{list-style:none;display:inline-flex;gap:8px;padding:0}
.woocommerce-pagination .page-numbers{
  min-width:38px;height:38px;padding:0 10px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--steel);
  font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .2s;
}
.woocommerce-pagination .page-numbers:hover{border-color:var(--ember);color:var(--text)}
.woocommerce-pagination .page-numbers.current{background:var(--ember);border-color:var(--ember);color:#0a0a0c;font-weight:600}

/* ============ Single product page ============ */
.woocommerce div.product{padding:60px 24px;max-width:1280px;margin:0 auto}
.woocommerce div.product .product_title{font-size:clamp(1.8rem,3.5vw,2.4rem)}
.woocommerce div.product p.price{color:var(--text);font-size:1.6rem;font-family:'Space Grotesk',sans-serif}
.woocommerce div.product .stock{color:var(--steel-dim);font-size:13px}
.woocommerce div.product .stock.in-stock{color:#8fd6a3}
.woocommerce div.product form.cart .button{
  background:linear-gradient(135deg,var(--ember),var(--ember-glow));
  color:#0a0a0c;border:0;padding:14px 28px;border-radius:6px;font-weight:600;
  letter-spacing:.03em;cursor:pointer;text-transform:uppercase;font-size:13px;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted)}
.woocommerce div.product div.images img{border-radius:12px;border:1px solid var(--line)}

/* ============ Cart drawer ============ */
.fabricut-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9990;opacity:0;pointer-events:none;transition:opacity .3s}
.fabricut-cart-overlay.open{opacity:1;pointer-events:auto}
.fabricut-cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:88vw;
  background:var(--panel);border-left:1px solid var(--line);z-index:9991;
  transform:translateX(100%);transition:transform .35s ease;
  display:flex;flex-direction:column;
}
.fabricut-cart-drawer.open{transform:translateX(0)}
.fabricut-cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.fabricut-cart-head h3{margin:0;font-size:1.1rem;color:var(--text);font-family:'Space Grotesk',sans-serif}
.fabricut-cart-close{background:none;border:0;color:var(--steel);font-size:22px;cursor:pointer}
.fabricut-cart-drawer .cart-drawer-inner{flex:1;overflow-y:auto;padding:16px 22px}
.fabricut-cart-drawer .widget_shopping_cart_content ul.cart_list{list-style:none;padding:0;margin:0}
.fabricut-cart-drawer .widget_shopping_cart_content ul.cart_list li{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative;
}
.fabricut-cart-drawer .widget_shopping_cart_content ul.cart_list li img{
  width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;order:-1;
}
.fabricut-cart-drawer .widget_shopping_cart_content a.remove{
  position:absolute;top:12px;right:0;color:var(--steel-dim) !important;text-decoration:none;
}
.fabricut-cart-drawer .widget_shopping_cart_content .quantity{color:var(--steel-dim);font-size:.85rem;display:block}
.fabricut-cart-drawer .widget_shopping_cart_content .total{
  padding:16px 0;border-top:1px solid var(--line);color:var(--text);font-weight:700;
  font-family:'Space Grotesk',sans-serif;
}
.fabricut-cart-drawer .widget_shopping_cart_content .buttons{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.fabricut-cart-drawer .widget_shopping_cart_content .buttons a{
  display:block;text-align:center;padding:13px;border-radius:6px;font-weight:600;font-size:13px;
  text-decoration:none;letter-spacing:.03em;
}
.fabricut-cart-drawer .widget_shopping_cart_content .buttons a.wc-forward:first-child{
  background:transparent;border:1px solid var(--line);color:var(--text);
}
.fabricut-cart-drawer .widget_shopping_cart_content .buttons a.checkout{
  background:linear-gradient(135deg,var(--ember),var(--ember-glow));color:#0a0a0c;border:0;
}
.fabricut-cart-drawer .woocommerce-mini-cart__empty-message{color:var(--steel-dim);text-align:center;padding:40px 10px;font-size:.9rem}

/* ============ Cart button (in header nav) ============ */
.fabricut-cart-btn{
  position:relative;
  background:transparent;border:1px solid var(--line);
  color:var(--text);width:40px;height:40px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,color .2s;
  padding:0;
}
.fabricut-cart-btn svg{display:block}
.fabricut-cart-btn:hover{border-color:var(--ember);color:var(--ember)}
.fabricut-cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--ember);color:#0a0a0c;
  font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg);
}

/* ============ Mobile ============ */
@media(max-width:960px){
  .archive-grid{grid-template-columns:1fr}
  .shop-sidebar{position:static}
  ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  ul.products{grid-template-columns:1fr}
  .fabricut-cart-drawer{width:100vw;max-width:100vw}
}