/*
Theme Name: Poly Craft Direct
Theme URI: https://polycraftdirect.com
Author: Poly Craft Direct
Description: Custom WordPress theme for Poly Craft Direct (3D Printing & Trading Card Games)
Version: 1.5.0
License: GNU General Public License v2 or later
Text Domain: polycraft-direct
*/

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --dark-bg: #0f172a;
  --header-dropdown-bg: #1e293b;
  --creme-bg: #f5f2eb;
  --accent-color: #ff9900;
  --text-dark: #1e293b;
  --text-light: #ffffff;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background-color: var(--creme-bg);
  line-height: 1.6;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Remove Unwanted Default Fallback Sidebars, Archives, and Categories */
#secondary,
.sidebar,
aside.widget-area,
.widget-area,
.woocommerce-sidebar,
.widget_search,
.widget_pages,
.widget_archive,
.widget_categories,
.widget_recent_entries {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header & Modern Navigation */
.site-header {
  background-color: var(--dark-bg);
  color: var(--text-light);
  padding: 0.85rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-title {
  display: flex;
  align-items: center;
}

/* Modernized PCD Badge with Subtle White Under-Glow Light */
.pcd-badge {
  position: relative;
  background: linear-gradient(145deg, #ffaa1a, #e68000);
  color: #ffffff;
  font-weight: 900;
  font-size: 1.25rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(255, 255, 255, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.pcd-badge::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 15%;
  width: 70%;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 75%);
  filter: blur(4px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transition: all 0.3s ease;
}

.pcd-badge:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #ffb733, #f58800);
  box-shadow: 
    0 6px 10px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(255, 255, 255, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Header Right Actions & Dropdown Arrangement */
.header-right-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}

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

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.cart-badge {
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 50px;
  font-weight: 800;
  line-height: 1;
}

/* Far Right Modern Dropdown Container */
.all-links-dropdown {
  position: relative;
}

.menu-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.menu-dropdown-trigger:hover,
.all-links-dropdown:hover .menu-dropdown-trigger {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.dropdown-chevron {
  transition: transform 0.25s ease;
}

.all-links-dropdown:hover .dropdown-chevron {
  transform: rotate(180deg);
}

/* Slide & Fade Menu Container */
.all-links-dropdown .main-navigation {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  background-color: var(--header-dropdown-bg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
}

.all-links-dropdown .main-navigation::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.all-links-dropdown:hover .main-navigation {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px);
  pointer-events: auto;
}

.all-links-dropdown .main-navigation ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.all-links-dropdown .main-navigation li {
  position: relative;
  width: 100%;
}

.all-links-dropdown .main-navigation a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem;
  transition: all 0.2s ease;
}

.all-links-dropdown .main-navigation a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--accent-color);
  padding-left: 1.5rem;
}

.all-links-dropdown .main-navigation ul ul {
  position: absolute;
  top: 0;
  right: 100%;
  left: auto;
  min-width: 220px;
  margin-right: 4px;
  background-color: var(--header-dropdown-bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  z-index: 1001;
}

.all-links-dropdown .main-navigation li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Hero Section */
.hero-banner {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: var(--text-light);
  padding: 4rem 2rem;
  text-align: center;
  width: 100%;
}

.hero-banner h1 {
  font-size: clamp(1.85rem, 5vw, 2.75rem);
  margin-bottom: 1rem;
  line-height: 1.25;
  word-wrap: break-word;
}

.hero-banner p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: 2rem;
  color: #94a3b8;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--text-light);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.2s ease, transform 0.2s ease;
  touch-action: manipulation;
}

.btn-primary:hover {
  background-color: #e68a00;
  transform: translateY(-1px);
}

/* Top 2 Category Grid */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 4rem 2rem 2rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.category-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  text-align: center;
  width: 100%;
}

.category-card h2 {
  margin-bottom: 1rem;
  color: var(--dark-bg);
  font-size: clamp(1.4rem, 3.5vw, 1.85rem);
}

/* Selection Section Title */
.selection-heading {
  text-align: center;
  max-width: 1200px;
  margin: 2.5rem auto 1.5rem auto;
  padding: 0 1.5rem;
  width: 100%;
}

.selection-heading h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--dark-bg);
  margin-bottom: 0.5rem;
}

.selection-heading p {
  color: #64748b;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

/* 2x2 Image Card Grid */
.opacity-card-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem 2rem;
  width: 100%;
  scroll-margin-top: 1rem;
}

.opacity-card-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  width: 100%;
}

.opacity-card {
  position: relative;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

.opacity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.opacity-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(1px);
  transition: all 0.3s ease;
  z-index: 1;
}

.opacity-card:hover .opacity-card-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
  backdrop-filter: blur(3px);
}

.opacity-card-content {
  position: relative;
  z-index: 2;
  padding: 1.75rem;
  width: 100%;
  color: #ffffff;
}

.opacity-card-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #ffffff;
}

.opacity-card-content p {
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.4;
}

/* Section Wrapper */
.section-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
  overflow-wrap: break-word;
}

/* ============================================================
   WOOCOMMERCE / SHOPPING TAB STYLES
   ============================================================ */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
.woocommerce ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 2rem !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* Transparent Glass/Bubble Container */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product,
.wc-block-grid__product {
  position: relative !important;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover,
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-5px) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
}

body.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  border-radius: 10px !important;
  margin: 0 0 1.25rem 0 !important;
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Red Square Sale Tag */
body.woocommerce ul.products li.product .onsale,
body.woocommerce-page ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  left: auto !important;
  margin: 0 !important;
  min-height: auto !important;
  min-width: auto !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
  z-index: 10 !important;
}

/* Bold Black Product Titles */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2,
body.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.wc-block-grid__product-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Bold Black Prices */
body.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price ins,
body.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price .amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-grid__product-price {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: 1.25rem !important;
}

body.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  color: #888888 !important;
  font-weight: 600 !important;
  opacity: 0.7 !important;
  margin-right: 0.4rem !important;
}

/* Square Styled Add to Cart Buttons */
body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  margin-top: auto !important;
}

/* 3-Box Styled Footer */
.footer-site {
  background-color: var(--dark-bg);
  color: #94a3b8;
  padding-top: 4rem;
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.footer-3col-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 3.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.footer-box {
  background-color: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--accent-color);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(255, 153, 0, 0.08);
  width: 100%;
}

.footer-box h4 {
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

.footer-box p {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.footer-box ul,
.footer-quick-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-box li {
  margin-bottom: 0.6rem;
}

.footer-box a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-box a:hover {
  color: var(--accent-color);
  transform: translateX(4px);
}

.footer-bottom {
  background-color: #090d16;
  padding: 1.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.copyright-text {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES (Tablets & Phones)
   ============================================================ */

/* Medium Devices (Tablets, max-width: 992px) */
@media (max-width: 992px) {
  .site-header {
    padding: 0.85rem 1.25rem;
  }

  .nav-btn {
    padding: 0.45rem 0.65rem;
  }

  .all-links-dropdown .main-navigation {
    right: 0;
    min-width: 220px;
  }

  .footer-3col-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Small Devices (Phones, max-width: 768px) */
@media (max-width: 768px) {
  .header-actions .action-text {
    display: none;
  }

  .nav-btn {
    padding: 0.45rem 0.6rem;
    font-size: 1.05rem;
  }

  .hero-banner {
    padding: 3rem 1rem;
  }

  .btn-primary {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .category-grid {
    grid-template-columns: 1fr;
    padding: 2.5rem 1rem 1.5rem 1rem;
    gap: 1.25rem;
  }

  .category-card {
    padding: 1.75rem 1.25rem;
  }

  .selection-heading {
    padding: 0 1rem;
  }

  .opacity-card-section {
    padding: 0 1rem 3rem 1rem;
    scroll-margin-top: 0.5rem;
  }

  .opacity-card-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .opacity-card {
    height: 250px;
  }

  .opacity-card-content {
    padding: 1.25rem;
  }

  body.woocommerce ul.products,
  body.woocommerce-page ul.products,
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .section-wrapper {
    padding: 1.5rem 1rem;
  }

  .footer-site {
    padding-top: 2.5rem;
    margin-top: 2.5rem;
  }

  .footer-3col-wrapper {
    padding: 0 1rem 2rem 1rem;
    gap: 1.25rem;
  }

  .footer-box {
    padding: 1.35rem;
  }
}