/* =========================================================
   POD Minimal Design System (scoped, safe with Woo/Flatsome)
   ========================================================= */

/* 1) Theme tokens */
:root{
  --pod-bg: #ffffff;
  --pod-surface: #fafafa;
  --pod-ink: #1a1a1a;
  --pod-muted: #666666;
  --pod-line: #e5e5e5;

  --pod-radius: 0px;
  --pod-container: 1200px;

  --pod-space-1: 8px;
  --pod-space-2: 12px;
  --pod-space-3: 18px;
  --pod-space-4: 24px;
  --pod-space-5: 36px;
  --pod-space-6: 60px;
  --pod-space-7: 90px;
  --pod-space-8: 140px;

  --pod-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 2) Base helpers */
.pod-container{
  max-width: var(--pod-container);
  margin: 0 auto;
  padding: 0 20px;
}

.pod-section{
  padding: var(--pod-space-8) 0;
  background: var(--pod-bg);
}

.pod-section--surface{
  background: var(--pod-surface);
  border-top: 1px solid var(--pod-line);
  border-bottom: 1px solid var(--pod-line);
}

.pod-eyebrow{
  font-family: var(--pod-font);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pod-muted);
  margin: 0 0 var(--pod-space-3);
}

.pod-title{
  font-family: var(--pod-font);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--pod-space-3);
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  color: var(--pod-ink);
}

.pod-lead{
  font-family: var(--pod-font);
  font-size: 1.125rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--pod-muted);
  margin: 0 0 var(--pod-space-5);
  max-width: 720px;
}

.pod-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pod-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  border: 1px solid var(--pod-ink);
  border-radius: var(--pod-radius);
  text-decoration: none;
  font-family: var(--pod-font);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}

.pod-btn--primary{ background: var(--pod-ink); color: #fff; }
.pod-btn--primary:hover{ background: transparent; color: var(--pod-ink); transform: translateY(-1px); }
.pod-btn--ghost{ background: transparent; color: var(--pod-ink); }
.pod-btn--ghost:hover{ background: var(--pod-ink); color: #fff; transform: translateY(-1px); }

/* 3) Reveal animation (optional, driven by JS) */
.pod-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.pod-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* UX Builder preview: always show reveal elements */
.pod-builder .pod-reveal{
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   Homepage hero section example styling
   ========================================================= */
.pod-hero{
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, var(--pod-surface) 0%, var(--pod-bg) 100%);
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
}
.pod-hero:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:1px;
  height:100%;
  background: linear-gradient(to bottom, transparent 0%, var(--pod-line) 50%, transparent 100%);
}
.pod-hero__inner{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.pod-hero .pod-lead{ margin-left:auto; margin-right:auto; }

/* =========================================================
   WooCommerce "skin" (scoped by .pod-woo)
   ========================================================= */

/* IMPORTANT: Do NOT reset * globally. Only style within .pod-woo. */
.pod-woo,
.pod-woo *{
  font-family: var(--pod-font);
}

/* Product grid */
.pod-woo .woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--pod-line);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Respect data-columns if your markup sets it */
.pod-woo[data-columns="3"] .woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.pod-woo[data-columns="2"] .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 849px){
  .pod-woo .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 549px){
  .pod-woo .woocommerce ul.products{ grid-template-columns: 1fr; }
}

.pod-woo .woocommerce ul.products li.product{
  margin: 0;
  padding: 22px;
  background: var(--pod-bg);
  position: relative;
}

.pod-woo .woocommerce ul.products li.product a{
  text-decoration: none;
}

.pod-woo .woocommerce ul.products li.product a img{
  margin: 0 0 14px;
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s ease;
}

.pod-woo .woocommerce ul.products li.product:hover a img{
  transform: scale(1.03);
}

/* Title & price */
.pod-woo .woocommerce-loop-product__title{
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pod-ink);
}

.pod-woo .price{
  color: var(--pod-muted);
  font-weight: 400;
}

/* Buttons */
.pod-woo a.button,
.pod-woo .woocommerce a.button,
.pod-woo .woocommerce button.button{
  border-radius: var(--pod-radius);
  border: 1px solid var(--pod-ink);
  background: transparent;
  color: var(--pod-ink);
  transition: transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
  padding: 10px 14px;
}

.pod-woo a.button:hover,
.pod-woo .woocommerce a.button:hover,
.pod-woo .woocommerce button.button:hover{
  background: var(--pod-ink);
  color: #fff;
  transform: translateY(-1px);
}

/* Sale badge minimal */
.pod-woo .woocommerce span.onsale{
  border-radius: var(--pod-radius);
  background: var(--pod-ink);
  color: #fff;
  font-weight: 600;
  padding: 6px 10px;
  min-height: unset;
  line-height: 1;
  top: 18px;
  left: 18px;
}

/* Woo notices (clean) */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-radius: var(--pod-radius);
  border: 1px solid var(--pod-line);
  background: var(--pod-surface);
}

/* =========================================================
   Categories grid (from [pod_categories])
   ========================================================= */
.pod-cat-grid{
  display: grid;
  gap: 2px;
  background: var(--pod-line);
}

.pod-cat-grid.columns-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.pod-cat-grid.columns-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.pod-cat-grid.columns-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 849px){
  .pod-cat-grid.columns-4,
  .pod-cat-grid.columns-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 549px){
  .pod-cat-grid{ grid-template-columns: 1fr !important; }
}

.pod-cat-card{
  display: block;
  background: var(--pod-bg);
  text-decoration: none;
  color: var(--pod-ink);
  overflow: hidden;
}

.pod-cat-media img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s ease;
}

.pod-cat-card:hover .pod-cat-media img{
  transform: scale(1.03);
}

.pod-cat-meta{
  padding: 18px;
  border-top: 1px solid var(--pod-line);
}

.pod-cat-title{
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.pod-cat-desc{
  font-weight: 300;
  color: var(--pod-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =========================================================
   Archive hero (Shop/Category pages)
   ========================================================= */
.pod-archive-hero{
  padding: 80px 0 40px;
  background: linear-gradient(to bottom, var(--pod-surface) 0%, var(--pod-bg) 100%);
  border-bottom: 1px solid var(--pod-line);
}

.pod-archive-hero__inner{
  max-width: 980px;
}

@media (max-width: 768px){
  .pod-hero{ min-height: 75vh; padding: 80px 0 60px; }
  .pod-section{ padding: var(--pod-space-7) 0; }
  .pod-actions{ flex-direction: column; }
  .pod-btn{ width: 100%; }
}