/* =========================================================
   PERKY PEN — Product Category (final override)
   Forces proper gutters + premium card layout (mobile & desktop)
   ========================================================= */

/* Page tokens */
body.woocommerce.archive.tax-product_cat{
  --pp-cream:#FFF6EF;
  --pp-brown:#694029;
  --pp-orange:#EB9C54;
  --pp-amber:#DD7A20;
  --pp-ink:#211D1A;

  --wrap-max:1200px;
  --wrap-pad:clamp(14px, 4.5vw, 28px);
  --card-radius:14px;
  --shadow-1:0 8px 24px rgba(0,0,0,.08);
}

/* 1) HARD WRAPPER with gutters – nothing hugs the edges */
body.woocommerce.archive.tax-product_cat .woocommerce{
  max-width: var(--wrap-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--wrap-pad) !important;
  box-sizing: border-box;
}

/* First-level blocks respect same gutters */
body.woocommerce.archive.tax-product_cat .woocommerce > .woocommerce-products-header,
body.woocommerce.archive.tax-product_cat .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce.archive.tax-product_cat .woocommerce > .woocommerce-breadcrumb,
body.woocommerce.archive.tax-product_cat .woocommerce > .woocommerce-result-count,
body.woocommerce.archive.tax-product_cat .woocommerce > .woocommerce-ordering,
body.woocommerce.archive.tax-product_cat .woocommerce > ul.products{
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* 2) PRODUCTS GRID */
body.woocommerce.archive.tax-product_cat ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 22px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  margin: 10px 0 34px !important;
}
body.woocommerce.archive.tax-product_cat ul.products::before,
body.woocommerce.archive.tax-product_cat ul.products::after{ content:none !important; }

/* 3) PRODUCT CARD = 3-row grid [link(img+title)] [price] [button] */
body.woocommerce.archive.tax-product_cat ul.products li.product{
  float:none !important; width:auto !important; margin:0 !important; list-style:none !important;

  display: grid !important;
  grid-template-rows: auto auto auto;
  row-gap: 6px;
  align-content: start;

  background:#fff;
  border:1px solid #e6e0d8;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.woocommerce.archive.tax-product_cat ul.products li.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  border-color:#e2d7ca;
}

/* Link (image + title) is row 1 */
body.woocommerce.archive.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link{
  grid-row: 1;
  display:block !important;
  margin:0 !important;
}

/* 4) MEDIA — elegant 4:5 ratio, single rule */
body.woocommerce.archive.tax-product_cat ul.products li.product a img{
  width:100%;
  display:block;
  aspect-ratio: 4 / 5;           /* change to 1/1 if you want square */
  object-fit: cover;
  background:#fff;
  border-radius: 12px;
  margin-bottom: 12px !important; /* space under image */
}

/* 5) TEXT — clamp to 2 lines */
body.woocommerce.archive.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  margin:12px 14px 6px !important;
  font-size:16px; line-height:1.35; font-weight:700; color:#2c241f;

  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  min-height:44px;
}

/* 6) PRICE — row 2, no abs/floats, wraps cleanly */
body.woocommerce.archive.tax-product_cat ul.products li.product .price{
  grid-row: 2;
  position: static !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  float:none !important;
  transform:none !important;
  z-index:1 !important;

  display:flex !important;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  margin:0 14px 10px !important;
  line-height:1.25;
  color:var(--pp-brown);
  font-weight:800; font-size:15px;
}
body.woocommerce.archive.tax-product_cat ul.products li.product .price ins{
  text-decoration:none; font-weight:800;
}
body.woocommerce.archive.tax-product_cat ul.products li.product .price del{
  opacity:.55; font-weight:600;
}

/* 7) BUTTON — row 3, pill below text */
body.woocommerce.archive.tax-product_cat ul.products li.product .button,
body.woocommerce.archive.tax-product_cat ul.products li.product a.button{
  grid-row: 3;
  position: static !important;
  inset:auto !important;
  transform:none !important;

  display:inline-flex !important;
  align-items:center; justify-content:center;
  background:var(--pp-amber); color:#fff; border:0;
  border-radius:999px; padding:10px 14px !important;
  margin:0 14px 14px !important;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  transition: background .15s, transform .08s, box-shadow .15s;
}
body.woocommerce.archive.tax-product_cat ul.products li.product .button:hover{
  background:var(--pp-orange);
  box-shadow:0 8px 22px rgba(221,122,32,.25);
}

/* Optional sale badge */
body.woocommerce.archive.tax-product_cat ul.products li.product .onsale{
  position:absolute; top:12px; left:12px;
  background:#fff; color:var(--pp-brown);
  border:1px solid #e6e0d8; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 8px;
}

/* 8) Page header + description (trust block) */
body.woocommerce.archive.tax-product_cat .woocommerce-products-header__title.page-title{
  font-family:"TAN Ashford", Georgia, serif;
  font-size:clamp(28px,4.2vw,48px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--pp-brown);
  margin:18px 0 6px;
}
body.woocommerce.archive.tax-product_cat .term-description{
  max-width:70ch; line-height:1.65; color:#6b5a4c;
  background:linear-gradient(135deg,#fff7f0 0%,#ffe7d0 100%);
  border-radius:var(--card-radius);
  padding:18px 16px; box-shadow:var(--shadow-1);
  margin:0 0 14px;
}

/* 9) Mobile polish */
@media (max-width: 900px){
  body.woocommerce.archive.tax-product_cat .woocommerce{
    padding-inline: clamp(14px, 5vw, 20px) !important;
  }
  body.woocommerce.archive.tax-product_cat ul.products{
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap:18px !important;
  }
}
@media (max-width: 768px){
  body.woocommerce.archive.tax-product_cat ul.products{
    padding-left:14px; padding-right:14px;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) !important;
  }
}
@media (max-width: 600px){
  body.woocommerce.archive.tax-product_cat ul.products{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px !important;
  }
  body.woocommerce.archive.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
    min-height:40px; font-size:15px;
    padding-inline:12px !important;
  }
  body.woocommerce.archive.tax-product_cat ul.products li.product .price{
    min-height:34px;                 /* room for 2-line sale price */
    padding-inline:12px !important;
  }
  body.woocommerce.archive.tax-product_cat ul.products li.product .button{
    width:100%; justify-content:center;
    margin-top:6px !important;
  }
}

/* 10) Defensive resets */
body.woocommerce.archive.tax-product_cat ul.products li.product,
body.woocommerce.archive.tax-product_cat ul.products li.product *{
  max-width:none !important;
  writing-mode:horizontal-tb !important;
  text-orientation:initial !important;
  white-space:normal !important;
  overflow:visible !important;
}

/* --- FORCE THUMBNAIL TO FIT CARD ---------------------------------- */

/* 1) The card clips anything that tries to spill */
body.woocommerce.archive.tax-product_cat ul.products li.product{
  overflow: hidden !important;
}

/* 2) Make the link (image wrapper) the ratio box */
body.woocommerce.archive.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link{
  display: block !important;
  aspect-ratio: 4 / 5;                /* change to 1 / 1 if you want square */
  overflow: hidden;
  border-radius: 12px;                 /* match your card corners */
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Image fills the wrapper, never exceeds it */
body.woocommerce.archive.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;         /* undo any global max-width:none */
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
  position: static !important;
}

/* 4) Don’t let the global reset break images */
body.woocommerce.archive.tax-product_cat ul.products li.product *:not(img){
  max-width: none !important;          /* keep your defensive reset for everything else */
}