/* =========================================================
   Pantaphone — Category / Archive Styles (v1.2, clean)
   ========================================================= */

/* -------- Root + Globals -------- */

:root{
  --pp-gap: 24px;
  --pp-card-radius: 16px;
  --pp-border: #ebedf2;
  --pp-shadow: 0 4px 16px rgba(0,0,0,.16);
  --pp-bg:#fff;
  --pp-text:#333;
  --pp-brand:#0b1220;
  --pp-container-max:1280px;
  --pp-container-pad:16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ width:100%; max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }

/* -------- Container / Layout shell -------- */

.pp-container{
  width:100%;
  max-width:var(--pp-container-max);
  margin-inline:auto;
  padding-inline:var(--pp-container-pad);
}
@media (max-width:420px){
  .pp-container{ padding-inline:14px; }
}

/* Divi / Woo cleanup */
.woocommerce-breadcrumb{ display:none; }
.body:not(.et-tb) #main-content .container,
body:not(.et-tb-has-header) #main-content .container{ padding-top:0; }
.woocommerce.archive #main-content .container,
.woocommerce.tax-product_cat #main-content .container{
  max-width:100% !important;
  width:100% !important;
}
.woocommerce.archive #left-area{
  width:100% !important;
  float:none !important;
}
.woocommerce.archive #sidebar{ display:none !important; }
.woocommerce.archive #main-content .container:before{ display:none !important; }
@media (min-width:981px){
  .et_right_sidebar #left-area{ padding-right:0 !important; }
}

/* -------- Hero -------- */

.pp-hero-simple{
  background:#f8fbff;
  margin:0;
  position:relative;
  overflow:hidden;
}
.pp-hero-simple__inner{ padding:28px 0 14px; }
.pp-hero-simple__title{
  color:#222C9B;
  font-size:clamp(26px,4vw,36px);
  font-weight:700;
  line-height:1.25;
  margin:0 0 10px;
}
.pp-hero-simple__sub{
  font:16px/1.45 Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#333;
  margin:0;
}

/* -------- Explore tiles -------- */

.pp-explore{ margin:6px 0 18px; }
.pp-explore__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  padding:8px 0;
}
.pp-iconcard{
  position:relative;
  width:100%;
  height:110px;
  border-radius:16px;
  background:#EEFFD8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  text-decoration:none;
  color:var(--pp-text);
  box-shadow:var(--pp-shadow);
  border:1px solid var(--pp-border);
}
.pp-iconcard:nth-child(2n){ background:#E8F3FF; }
.pp-iconcard:nth-child(3n){ background:#FFF3E0; }
.pp-iconcard__icon{
  width:26px;
  height:26px;
  border-radius:6px;
  background:#215E7C;
}
.pp-iconcard__text{ font-weight:600; }
.pp-iconcard__badge{
  position:absolute;
  top:6px;
  right:6px;
  background:#0F4243;
  color:#fff;
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
}

/* -------- Sort bar -------- */

.pp-sort{ margin:8px 0 10px; }
.pp-sort--sticky{
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffffcc;
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.pp-sort .woocommerce-ordering{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0;
}
.pp-sort .woocommerce-ordering select{ max-width:100%; }
@media (max-width:700px){
  .pp-sort .woocommerce-ordering{ justify-content:flex-start; }
}

/* -------- Archive layout (filters + list) -------- */

.pp-archive{ margin:8px 0 24px; }

@media (min-width:981px){
  .pp-archive__content{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:var(--pp-gap);
    align-items:flex-start;
  }
}
@media (max-width:980px){
  .pp-archive__content{ display:block; }
}

.pp-archive__left,
.pp-archive__main{
  min-width:0;
  max-width:100%;
}
.pp-archive__left{ background:var(--pp-bg); }

@media (min-width:981px){
  .pp-archive__left{
    position:sticky;
    top:76px;
    z-index:10;
  }
}

/* -------- Filters -------- */

.pp-filterform{
  background:var(--pp-bg);
  border:1px solid var(--pp-border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--pp-shadow);
  font-size:14px;
}
.pp-filter__group{ border-top:1px solid #f0f2f6; }
.pp-filter__group:first-child{ border-top:0; }

.pp-acc{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:12px 4px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pp-acc::after{
  content:"+";
  font-weight:700;
}
.pp-acc[aria-expanded="true"]::after{ content:"−"; }

.pp-acc__panel{
  display:none;
  padding:0 4px 10px;
}
.pp-acc[aria-expanded="true"] + .pp-acc__panel,
.pp-acc__panel.open{
  display:block;
}

.pp-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:14px;
  cursor:pointer;
}
.pp-check input{ accent-color:var(--pp-brand); }

.pp-filter__actions{
  display:flex;
  gap:8px;
  padding:10px 4px 4px;
}
.button.button--ghost{
  background:transparent;
  border:1px solid #cbd5e1;
  color:var(--pp-text);
}

/* -------- Promo / feature cards -------- */

.pp-feature-card{
  list-style:none;
  border:1px solid var(--pp-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--pp-shadow);
  overflow:hidden;
  max-width:100%;
}
ul.products .pp-feature-card{ grid-column:auto !important; }

.pp-feature-card__wrap{
  min-height:220px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:inherit;
  text-decoration:none;
}
.pp-feature-card__copy{
  display:grid;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
}
.pp-feature-card__copy h3{
  font-size:18px;
  line-height:1.25;
  margin:4px 0 0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-break:break-word;
}
.pp-feature-card__copy > *{ min-width:0; }

.pp-feature-card__art{
  flex:0 0 92px;
  width:92px;
  height:92px;
  border-radius:12px;
  background:linear-gradient(135deg,#89f7fe,#66a6ff);
}
.pp-feature-card img{
  flex:0 0 auto;
  max-width:160px;
  object-fit:contain;
  display:block;
}

.pp-chip{
  display:inline-block;
  padding:4px 8px;
  font-size:12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  white-space:nowrap;
}
.pp-chip--gold{
  background:rgba(255,216,77,.18);
  border-color:#ffd84d;
  color:#7a5d00;
}
.pp-feature-card--deal,
.pp-feature-card:has(.pp-chip.pp-chip--gold){
  background:#fffbe8;
  border-color:#ffeaa3;
}
.pp-feature-card--dark,
.pp-feature-card:has(.pp-chip):not(:has(.pp-chip--gold)){
  background:#0f172a;
  border-color:rgba(255,255,255,.08);
  color:#fff;
}
.pp-feature-card--dark .pp-chip,
.pp-feature-card:has(.pp-chip):not(:has(.pp-chip--gold)) .pp-chip{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.pp-feature-card--dark .pp-feature-card__copy h3,
.pp-feature-card:has(.pp-chip):not(:has(.pp-chip--gold)) .pp-feature-card__copy h3{
  color:#fff;
}
.pp-feature-card--dark .pp-feature-card__art,
.pp-feature-card:has(.pp-chip):not(:has(.pp-chip--gold)) .pp-feature-card__art{
  background:linear-gradient(135deg,#66a6ff,#89f7fe);
  filter:saturate(110%);
}

@media (max-width:560px){
  .pp-feature-card__wrap{
    min-height:0;
    padding:14px;
    gap:14px;
  }
  .pp-feature-card__art{
    width:84px;
    height:84px;
    flex:0 0 84px;
  }
  .pp-feature-card img{ max-width:140px; }
}

/* =========================================================
   Product grid (2x2 desktop, 2 cols tablet, 1 col phone)
   ========================================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  clear:none !important;
  display:block;
  max-width:100%;
}

.pp-archive__main ul.products{
  display:grid !important;
  grid-auto-rows:auto;
  gap:24px !important;
  width:100%;
  margin:0;
  padding:0;
}

@media (min-width:981px){
  .pp-archive__main ul.products{
    grid-template-columns:repeat(2, minmax(420px,1fr)) !important;
  }
}
@media (max-width:980px){
  .pp-archive__main ul.products{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:20px !important;
  }
}
@media (max-width:560px){
  .pp-archive__main ul.products{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* -------- Split product card -------- */

.pp-model{ list-style:none; }

.woocommerce ul.products li.product .pp-card-split__content{
  display:flex;
  width:100%;
  border:1px solid var(--pp-border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  color:#333;
  box-shadow:var(--pp-shadow) !important;
}

/* Image side */

.pp-card-split__img{
  width:100%;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 10px;
  overflow:hidden;
}
.pp-card-split__img::before{
  content:none !important;
}
.pp-card-split__img img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:72% !important;
  max-height:210px !important;
  object-fit:contain !important;
  margin:0 !important;
  user-select:none;
  -webkit-user-drag:none;
}

@media (min-width:981px){
  .pp-card-split__content{
    min-height:230px;
    flex-direction:row;
  }
  .pp-card-split__img{
    flex-basis:38%;
    min-width:190px;
  }
}
@media (max-width:980px){
  .pp-card-split__content{ flex-direction:column; }
  .pp-card-split__img{
    padding:12px 10px;
  }
  .pp-card-split__img img{
    max-width:70% !important;
    max-height:210px !important;
  }
}

/* Text side */

.pp-card-split__body{
  padding:1rem 1rem 1.1rem;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  min-width:0;
  overflow:visible;
}
@media (min-width:1400px){
  .pp-card-split__body{
    padding:1.25rem 1.15rem 1.25rem;
  }
}

.pp-card-split__title{
  font-weight:700;
  font-size:1.06rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-break:break-word;
}

/* Badges / colors */

.pp-card-split__storages{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pp-cap-badge{
  font-size:.625rem;
  line-height:1.25;
  padding:.25rem .5rem;
  border:2px solid #f0f0f0;
  border-radius:6rem;
  width:max-content;
  font-weight:600;
  font-family:Poppins,sans-serif;
  display:flex;
  gap:.125rem;
  align-items:center;
  background:#f0f0f0;
  color:#333;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pp-card-split__colors{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pp-color{
  --c:#333;
  width:1rem;
  height:1rem;
  min-width:1rem;
  border-radius:999px;
  background:var(--c);
  border:1px solid rgb(191,191,191);
  position:relative;
  overflow:hidden;
  display:inline-block;
}
@media (min-width:500px){
  .pp-color{
    width:1.25rem;
    height:1.25rem;
    min-width:1.25rem;
    border-width:2px;
  }
}

/* Price */

.pp-card-split__pricewrap{
  margin-top:auto;
  text-align:right;
}
.pp-card-split__from{
  font-size:0.875rem;
  color:#111827;
  line-height:1.2;
  font-weight:400;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  display:inline;
  max-width:none;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.pp-card-split__from .woocommerce-Price-amount{
  font-size:1.125rem;
  color:rgb(34,44,155);
  font-weight:600;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (max-width:980px){
  .pp-card-split__pricewrap{ text-align:left; }
}

/* -------- Woo polish -------- */

.woocommerce ul.products li.product a img{
  width:auto;
  height:auto;
  max-width:100%;
}
.woocommerce-result-count{ margin:0 0 8px; }
.woocommerce-notices-wrapper{ margin:8px 0; }
