/*
Theme Name: HDZ3DWORKS
Theme URI: https://www.hdz3dworks.com
Author: HDZ3DWORKS
Description: Custom storefront theme for HDZ3DWORKS — a small-batch 3D print shop selling figurines, bag frames, and Philips X-ray service tools. Built for trust and simple navigation, WooCommerce-ready.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hdz3dworks
Tags: e-commerce, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root{
  --paper:#F2F4F3;
  --paper-raised:#FFFFFF;
  --ink:#131C2E;
  --ink-soft:#55606E;
  --accent:#DD5B27;
  --accent-ink:#FFFFFF;
  --accent-2:#2E8B6F;
  --line:#DBDFDC;
  --line-strong:#C3C9C5;
  --shadow: 0 1px 2px rgba(19,28,46,.06), 0 8px 24px -12px rgba(19,28,46,.15);
  --container: 1180px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#10151D;
    --paper-raised:#171E28;
    --ink:#E8ECEF;
    --ink-soft:#94A1AE;
    --accent:#F17B44;
    --accent-ink:#151008;
    --accent-2:#49B78E;
    --line:#263041;
    --line-strong:#324156;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.6);
  }
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden;
}
.screen-reader-text:focus{
  position:fixed; top:8px; left:8px;
  width:auto; height:auto; padding:10px 16px;
  background:var(--paper-raised); color:var(--ink);
  z-index:9999; border-radius:8px; box-shadow:var(--shadow);
}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4{
  font-family:'Oswald', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(32px,4.6vw,50px); line-height:1.05; letter-spacing:-0.01em; }
h2{ font-size:clamp(22px,2.6vw,28px); line-height:1.15; }
h3{ font-size:17px; line-height:1.3; }
p{ margin:0 0 1em; }
.muted{ color:var(--ink-soft); }
.mono{ font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; }

.eyebrow{
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:8px;
}

.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ filter:brightness(1.06); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ background:var(--paper); }
.btn-sm{ padding:9px 15px; font-size:13px; }

/* =========================================================
   Utility bar + Header
   ========================================================= */
.utility-bar{ background:var(--ink); color:var(--paper); }
@media (prefers-color-scheme: dark){ .utility-bar{ background:#0A0E14; } }
.utility-bar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 28px; font-size:12.5px; gap:16px; flex-wrap:wrap;
}
.utility-bar a{ text-decoration:none; opacity:.88; }
.utility-bar a:hover{ opacity:1; text-decoration:underline; }
.utility-links{ display:flex; gap:20px; }

.site-header{
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.site-header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:24px; flex-wrap:wrap;
}
.site-branding{ display:flex; align-items:baseline; gap:2px; }
.site-branding a{
  display:flex; align-items:baseline; gap:2px;
  text-decoration:none; font-family:'Oswald', sans-serif;
  font-weight:700; font-size:20px; letter-spacing:-0.01em; white-space:nowrap;
}
.site-branding .dim{ color:var(--accent); }
.site-branding img{ max-height:40px; width:auto; }
.site-tagline{
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-left:10px; border-left:1px solid var(--line-strong); padding-left:10px;
  display:none;
}
@media(min-width:720px){ .site-tagline{ display:inline; } }

nav.primary-menu{ display:none; }
nav.primary-menu ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
@media(min-width:900px){ nav.primary-menu{ display:block; } }
nav.primary-menu a{
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--ink);
  padding:6px 0; border-bottom:2px solid transparent;
}
nav.primary-menu a:hover, nav.primary-menu li.current-menu-item > a{ border-bottom-color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer; text-decoration:none;
}
.icon-btn:hover{ border-color:var(--line-strong); background:var(--paper); }
.cart-count{
  font-family: ui-monospace, monospace; font-size:10px; font-weight:700;
  background:var(--accent); color:var(--accent-ink);
  border-radius:999px; padding:1px 5px; margin-left:-14px; margin-top:-14px;
}

.menu-toggle{ display:inline-flex; }
@media(min-width:900px){ .menu-toggle{ display:none; } }
.mobile-menu{
  display:none; border-top:1px solid var(--line); background:var(--paper-raised);
}
.mobile-menu.is-open{ display:block; }
.mobile-menu ul{ list-style:none; margin:0; padding:10px 28px 18px; display:flex; flex-direction:column; gap:4px; }
.mobile-menu a{ display:block; padding:10px 0; text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
@media(min-width:900px){ .mobile-menu{ display:none !important; } }

/* =========================================================
   Hero
   ========================================================= */
.hero{ border-bottom:1px solid var(--line); background:var(--paper-raised); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:40px; padding:56px 0 48px; align-items:center; }
@media(min-width:900px){ .hero-grid{ grid-template-columns:1.05fr .95fr; padding:76px 0 64px; } }
.hero-copy{ display:flex; flex-direction:column; gap:18px; max-width:520px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.hero-trust{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); margin-top:10px; }
.hero-trust svg{ flex:none; color:var(--accent-2); }

.hero-art{
  position:relative; aspect-ratio:5/4; border:1px solid var(--line); border-radius:14px;
  background-color:var(--paper); overflow:hidden;
}
.hero-art img{ width:100%; height:100%; object-fit:cover; }
.hero-art .plate{
  position:absolute; top:14px; left:14px; font-family: ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.06em; color:var(--ink-soft);
  background:var(--paper-raised); border:1px solid var(--line); padding:4px 8px; border-radius:6px;
}
.hero-placeholder{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-soft);
  background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:26px 26px;
}

/* =========================================================
   Sections / category cards / products
   ========================================================= */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.section-head .titles{ display:flex; flex-direction:column; }

.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(min-width:760px){ .cat-grid{ grid-template-columns:repeat(4,1fr); } }
.cat-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:22px 18px;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:14px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.cat-icon{
  width:44px; height:44px; border-radius:10px; background:var(--paper); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--accent);
}
.cat-card .from{ font-family: ui-monospace, monospace; font-size:12.5px; color:var(--ink-soft); margin-top:auto; }
.cat-card .from b{ color:var(--ink); font-weight:700; }

/* WooCommerce product grid re-skin */
ul.products{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:16px; list-style:none; margin:0; padding:0; }
@media(min-width:640px){ ul.products{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:960px){ ul.products{ grid-template-columns:repeat(6,1fr); } }
ul.products li.product{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  padding:0 !important; margin:0 !important; text-align:left;
}
ul.products li.product img{ aspect-ratio:1/1; object-fit:cover; border-bottom:1px solid var(--line); }
ul.products li.product .woocommerce-loop-product__title{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:14px; padding:12px 14px 0; margin:0;
}
ul.products li.product .price{
  font-family:ui-monospace, monospace; font-size:13.5px; color:var(--accent); font-weight:700;
  padding:4px 14px 16px; display:block;
}
ul.products li.product .price del{ color:var(--ink-soft); opacity:1; }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  margin:0 14px 16px; display:inline-flex; font-family:'Oswald', sans-serif; font-size:12.5px;
  font-weight:600; padding:8px 14px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  text-decoration:none; border:none;
}
ul.products li.product .onsale{
  background:var(--accent-2); color:#fff; font-family:ui-monospace,monospace; font-size:11px;
  border-radius:6px; padding:2px 8px; position:absolute; margin:10px; min-height:auto; min-width:auto; line-height:1.6;
}

/* =========================================================
   Trust strip
   ========================================================= */
.trust-strip{ background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:36px 0; }
@media(min-width:760px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }
.trust-item{ display:flex; gap:12px; align-items:flex-start; }
.trust-item svg{ flex:none; color:var(--accent-2); margin-top:2px; }
.trust-item .t{ font-weight:700; font-size:14px; }
.trust-item .d{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

/* =========================================================
   Review / testimonial
   ========================================================= */
.review-wrap{ display:grid; grid-template-columns:1fr; gap:28px; }
@media(min-width:860px){ .review-wrap{ grid-template-columns:1.3fr .7fr; align-items:center; } }
blockquote{
  margin:0; padding:0; font-size:clamp(20px,2.4vw,26px); font-weight:600; line-height:1.35; letter-spacing:-0.01em;
  font-family:'Oswald', sans-serif;
}
blockquote::before{ content:"\201C"; color:var(--accent); }
blockquote::after{ content:"\201D"; color:var(--accent); }
cite{ display:block; font-style:normal; margin-top:16px; font-size:13.5px; color:var(--ink-soft); }
.review-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.review-card .t{ font-weight:700; font-size:14.5px; }
.review-card .d{ font-size:13.5px; color:var(--ink-soft); }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter{
  background:var(--ink); color:var(--paper); border-radius:16px; padding:40px 32px;
  display:flex; flex-direction:column; gap:18px; align-items:flex-start;
}
@media (prefers-color-scheme: dark){ .newsletter{ background:#0A0E14; } }
@media(min-width:760px){ .newsletter{ flex-direction:row; align-items:center; justify-content:space-between; } }
.newsletter h2{ color:var(--paper); margin:0; }
.newsletter .newsletter-copy{ margin-top:6px; color:rgba(232,236,239,.75); }
.newsletter-form{ display:flex; gap:10px; width:100%; max-width:420px; flex-wrap:wrap; }
.newsletter-form input[type=email]{
  flex:1; min-width:200px; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:var(--paper); font-size:14px;
}
.newsletter-form input::placeholder{ color:rgba(232,236,239,.55); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ border-top:1px solid var(--line); padding:48px 0 26px; font-size:13.5px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.4fr repeat(3,1fr); } }
.foot-grid h4{ font-family:'Oswald', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 14px; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-links a{ text-decoration:none; }
.foot-links a:hover{ text-decoration:underline; }
.foot-bottom{
  border-top:1px solid var(--line); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--ink-soft);
}

/* =========================================================
   Generic page / single content (non-WooCommerce pages)
   ========================================================= */
.page-content{ padding:56px 0; max-width:760px; margin:0 auto; }
.page-content h1{ margin-bottom:24px; }

/* =========================================================
   WooCommerce wrapper (declared via hooks in functions.php)
   ========================================================= */
#primary.content-area{ padding:40px 0 64px; }
.woocommerce-breadcrumb{ font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
.woocommerce-breadcrumb a{ text-decoration:none; }
.woocommerce-breadcrumb a:hover{ text-decoration:underline; }