/*
Theme Name: WernerPrints
Theme URI: https://wernerprints.com
Author: Justin Werner
Author URI: https://justinwerner.com
Description: A modern, family-owned 3D printing e-commerce theme for Werner Prints. Clean Amazon-inspired shopping experience meets warm local Oregon coast vibes. Fully WooCommerce integrated, optimized for custom prints, local delivery, and seamless checkout with Stripe. Designed and developed by Justin Werner for the Werner family business.
Version: 4.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wernerprints
Tags: e-commerce, woocommerce, responsive, custom, family-business, 3d-printing, local-oregon
*/

/* ============================================
   WERNERPRINTS - CUSTOM THEME BY JUSTIN WERNER
   Modern, fast, simple & beautiful 3D print shop
   ============================================ */

:root {
  --wp-primary: #0f172a;
  --wp-accent: #f97316;
  --wp-accent2: #06b67f;
  --wp-light: #f8fafc;
  --wp-gray: #64748b;
  --wp-border: #e2e8f0;
  --radius: 12px;
  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--wp-primary);
  line-height: 1.6;
  background: #fff;
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp-primary);
}

a {
  color: var(--wp-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #c2410f;
}

/* Header & Navigation */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--wp-border);
  position: relative;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo,
.custom-logo {
    height: 56px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

@media (max-width: 600px) {
    .site-logo,
    .custom-logo {
        height: 48px;
        max-width: 200px;
    }
}

.site-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wp-primary);
  margin: 0;
}

.site-title span {
  color: var(--wp-accent);
}

/* Navigation */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation .nav-menu,
.main-navigation ul {
  display: flex;
  align-items: center;
  gap: 1.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  font-weight: 600;
  color: #0f172a;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.main-navigation a:hover {
  color: #f97316;
}

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.6rem;
  width: 0;
  height: 2px;
  background: #f97316;
  transition: width 0.2s ease;
}

.main-navigation a:hover::after {
  width: calc(100% - 1.2rem);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  margin-left: 8px;
  cursor: pointer;
  z-index: 300;
}

@media (max-width: 900px) {
  .main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 1rem 1.5rem 1.5rem;
    z-index: 250;
  }
  .main-navigation.is-open {
    display: block;
  }
  .main-navigation .nav-menu,
  .main-navigation ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .main-navigation a {
    font-size: 1.08rem;
    padding: 0.85rem 0;
    display: block;
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }
  .main-navigation a:last-child {
    border-bottom: none;
  }
  .main-navigation a::after {
    display: none;
  }
  .mobile-menu-toggle {
    display: block;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search-form {
  position: relative;
  width: 280px;
}

.search-form input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.75rem;
  border: 1px solid var(--wp-border);
  border-radius: 9999px;
  font-size: 0.95rem;
  background: var(--wp-light);
}

.search-form input:focus {
  outline: none;
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.search-form::before {
  content: "🔍";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.cart-icon {
  position: relative;
  font-size: 1.45rem;
  color: var(--wp-primary);
  padding: 0.55rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .cart-icon {
    font-size: 1.55rem;
    padding: 0.5rem 0.35rem;
  }
  .mobile-menu-toggle {
    padding: 8px;
    margin-left: 4px;
  }
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--wp-accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0 5px;
}

/* Hero Section */
.hero {
  position: relative;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  background: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.65));
}

.hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-content {
  max-width: 720px;
  text-align: center;
  padding: 0 1.5rem;
  z-index: 1;
}

.hero h1 {
  font-size: 3.2rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  color: white;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--wp-accent);
  color: white;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: #c2410f;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.btn-secondary {
  background: rgba(255,255,255,0.95);
  color: var(--wp-primary);
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: #0f172a;
  transform: translateY(-2px);
  border-color: #e2e8f0;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.section-title {
  font-size: 2.1rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  text-align: center;
  color: var(--wp-gray);
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

/* Shop Experience */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
  gap: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    gap: 15px !important;
  }
}

.product-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  position: relative;
}

.product-card:hover {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15) !important;
  transform: translateY(-8px) !important;
  border-color: #d1d5db !important;
}

.product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8fafc;
}

.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.product-card:hover .product-image img {
  transform: scale(1.1) !important;
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #f97316;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 9999px;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
  letter-spacing: 0.4px;
}

.product-info {
  padding: 18px 18px 22px !important;
}

.product-title {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 0 9px 0 !important;
  color: #111827 !important;
  min-height: 2.8em;
}

.product-price {
  font-size: 1.32rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 12px 0 !important;
}

.product-price del {
  color: #9ca3af !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

.product-price ins {
  color: #f97316 !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .star-rating {
  margin: 0 0 10px 0 !important;
  font-size: 0.95rem !important;
}

.add-to-cart-btn,
.woocommerce ul.products li.product .button {
  background: #0f172a !important;
  color: #fff !important;
  padding: 13px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  width: 100% !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: block !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

.add-to-cart-btn:hover,
.woocommerce ul.products li.product .button:hover {
  background: #f97316 !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 15px -3px rgb(249, 115, 22 / 0.4) !important;
}

/* Local Delivery Banner */
.local-delivery-banner {
  background: linear-gradient(90deg, #0f172a, #1e2937);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.local-delivery-banner .icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.local-delivery-banner h3 {
  color: white;
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.local-delivery-banner p {
  margin: 0;
  opacity: 0.9;
  max-width: 620px;
}

/* About Section */
.about-section {
  background: var(--wp-light);
  border-radius: var(--radius);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  color: #475569;
  margin-bottom: 1.25rem;
}

.family-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow);
  margin-top: 1rem;
}

/* Footer */
.site-footer {
  background: var(--wp-primary);
  color: #cbd5e1;
  padding: 3rem 1.5rem 2rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}

.footer-col h4 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.footer-col a {
  color: #94a3b8;
  display: block;
  margin-bottom: 0.5rem;
}

.footer-col a:hover {
  color: var(--wp-accent);
}

.footer-bottom {
  max-width: 1280px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid #334155;
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
}

.footer-bottom strong {
  color: var(--wp-accent);
}

/* WooCommerce Enhancements */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.woocommerce .product-grid .product-card {
  margin-bottom: 0;
}

/* ============================================
   SINGLE PRODUCT - ONE COLUMN (PC + Mobile)
   Clean stacked layout for better mobile experience
   ============================================ */

.single-product-section .single-product-wrapper {
    display: block;
    max-width: 820px;
    margin: 0 auto;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
}

/* Images */
.main-image-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #f8fafc;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

.main-image {
    width: 100%;
    height: 100%;
}

.main-product-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.main-product-img:hover {
    transform: scale(1.03);
}

.thumbnail-gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.thumb-item {
    width: 75px;
    height: 75px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--wp-accent);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product_title {
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 0 0 12px 0;
}

.price-wrapper {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--wp-accent);
    margin-bottom: 20px;
}

.local-delivery-box {
    background: #fefce8;
    border: 2px solid #eab308;
    border-radius: 12px;
    padding: 18px;
    margin: 20px 0;
    font-size: 0.97rem;
    line-height: 1.5;
}

.family-badge {
    background: #f1f5f9;
    padding: 12px 20px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin: 20px 0 30px;
}

.cart-form {
    margin: 20px 0;
}

.product-description, .product-reviews {
    max-width: 800px;
    margin: 60px auto 0;
}

.product-description h3, .product-reviews h3 {
    font-size: 1.45rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* Related products grid */
.related-products .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

/* Original responsive */
@media (max-width: 900px) {
  .header-inner { flex-wrap: nowrap !important; gap: 14px; align-items: center; padding: 0.6rem 1rem; }
  .search-form { flex: 0 1 180px; min-width: 140px; max-width: 180px; }
  .search-form input[type="search"] { width: 100%; font-size: 0.9rem; padding: 8px 12px 8px 2.5rem; }
  .about-section { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.4rem; }
}

@media print {
  .site-header, .site-footer, .btn, .add-to-cart-btn { display: none; }
}

.theme-attribution {
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
  padding-top: 1rem;
}

/* ============================================
   PREMIUM FORM STYLING - STRONG OVERRIDE
   Makes dropdown + quantity look modern and consistent
   Forces dark navy button (kills purple)
   Designed & developed by Justin Werner
   ============================================ */

/* === DROPDOWN (Choose an option) === */
.woocommerce.single-product .product form.cart .variations select,
.woocommerce .variations_form .variations td.value select,
.woocommerce.single-product .product .variations_form table.variations select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 1.2rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.1rem center !important;
    background-size: 1.15em !important;
    cursor: pointer;
}

.woocommerce.single-product .product form.cart .variations select:focus,
.woocommerce .variations_form .variations td.value select:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2) !important;
    outline: none !important;
}

/* === QUANTITY INPUT (now matches dropdown) === */
.woocommerce.single-product .product form.cart .quantity input.qty,
.woocommerce .quantity input.qty,
.woocommerce .product .quantity input.input-text.qty {
    width: 82px !important;
    height: 48px !important;
    padding: 0.7rem 0.9rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
}

.woocommerce.single-product .product form.cart .quantity input.qty:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2) !important;
    outline: none !important;
}

/* Hide number spinners */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* === ADD TO CART BUTTON - STRONG OVERRIDE === */
.woocommerce.single-product .product form.cart .single_add_to_cart_button,
.woocommerce.single-product .product form.cart .single_add_to_cart_button.button,
.woocommerce.single-product .product form.cart .single_add_to_cart_button.button.alt,
.woocommerce .product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 1rem 2.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.25) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 240px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
}

.woocommerce.single-product .product form.cart .single_add_to_cart_button:hover,
.woocommerce.single-product .product form.cart .single_add_to_cart_button:focus,
.woocommerce .product form.cart .single_add_to_cart_button:hover {
    background: #f97316 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 15px -3px rgb(249, 115, 22 / 0.45) !important;
}

/* Variations table cleanup */
.woocommerce.single-product .product .variations_form .variations {
    margin-bottom: 1.5rem;
    border: none;
}

.woocommerce.single-product .product .variations_form .variations td.label {
    padding-top: 0.5rem;
    font-weight: 700;
    color: #334155;
}

.added-to-cart-notice {
    background: #dcfce7;
    border: 2px solid #22c55e;
    color: #166534;
    padding: 14px 18px;
    border-radius: 12px;
    margin: 20px 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.added-to-cart-notice .checkmark {
    font-size: 1.3rem;
    font-weight: bold;
}

.added-to-cart-notice .view-cart-link {
    margin-left: auto;
    color: #166534;
    font-weight: 700;
    text-decoration: underline;
}

.added-to-cart-notice .view-cart-link:hover {
    color: #0f172a;
}

/* ============================================
   BIG YELLOW CONTINUE SHOPPING BANNER (Cart Page)
   Designed by Justin Werner
   ============================================ */

.continue-shopping-banner {
    background: #fefce8;
    border: 3px solid #eab308;
    border-radius: 16px;
    padding: 24px 30px;
    margin-bottom: 35px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.continue-shopping-content {
    max-width: 620px;
    margin: 0 auto;
}

.continue-shopping-btn {
    display: inline-block;
    background: #0f172a;
    color: #ffffff !important;
    padding: 16px 36px;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none !important;
    margin-bottom: 12px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.3);
}

.continue-shopping-btn:hover {
    background: #f97316 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgb(249, 115, 22 / 0.4);
}

.continue-shopping-banner p {
    margin: 8px 0 0;
    font-size: 1.1rem;
    color: #713f12;
    font-weight: 500;
}