/* ECONUR "Shop by category" + trust panel 1.0 (markup: inc/category-trust.php, [econur_category_trust])
   Desktop: heading + tagline, five category cards in one row, a four-column trust panel.
   Below 960px: the cards become a swipeable row; the trust panel becomes one connected 2 x 2 panel.
   Every rule is scoped to .econur-category-trust. */

.econur-category-trust{
  --ect-ink:#183F43; --ect-teal:#0D5960; --ect-sage:#6F8E80; --ect-green:#4F8D79; --ect-sage-light:#EAF2E9;
  --ect-active:#F0F6F1; --ect-active-line:#A9CBBB; --ect-card:#FFFEFB; --ect-card-line:#E7DED0;
  --ect-panel:#FBF8F1; --ect-panel-line:#E8E1D4; --ect-divider:#E5DED2; --ect-muted:#6A756F; --ect-arrow:#557168;
  --ect-ui:"Manrope", var(--ecn-font-en, Arial), sans-serif;
  --ect-ease:cubic-bezier(.22, 1, .36, 1);
  --ect-gutter:20px; /* the homepage container's side padding (tablet and up) */
  position:relative; margin:0; padding:0; color:var(--ect-ink);
}
.econur-category-trust *{ box-sizing:border-box; }

/* ---------- heading row ---------- */
.econur-category-trust .econur-category-trust__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; }
.econur-category-trust .econur-category-trust__title{ margin:0 !important; padding:0; font-family:var(--ecn-font-display, "Fraunces", Georgia, serif) !important;
  font-size:30px !important; font-weight:600 !important; line-height:1.15 !important; letter-spacing:-.01em !important; color:var(--ect-ink) !important; }
.econur-category-trust .econur-category-trust__title span{ color:var(--ect-green); }
.econur-category-trust .econur-category-trust__tagline{ display:flex; align-items:center; gap:14px; margin:0 !important; font-family:var(--ect-ui);
  font-size:11px; font-weight:500; line-height:1; letter-spacing:.24em; text-transform:uppercase; color:var(--ect-sage); white-space:nowrap; }
.econur-category-trust .econur-category-trust__tagline::before{ content:""; width:64px; height:1px; background:currentColor; opacity:.55; }

/* ---------- category cards ---------- */
.econur-category-trust .econur-category-list{ display:flex; gap:12px; margin:0; padding:0; }
.econur-category-trust .econur-category-card{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:12px; height:58px; padding:7px 16px 7px 7px;
  border:1px solid var(--ect-card-line); border-radius:30px; background:var(--ect-card); box-shadow:0 3px 12px rgba(34, 62, 54, .035);
  color:var(--ect-ink) !important; text-decoration:none !important; -webkit-tap-highlight-color:transparent;
  transition:border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s var(--ect-ease); }
.econur-category-trust .econur-category-card__media{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--ect-sage-light); }
.econur-category-trust .econur-category-card__img{ display:block; width:100% !important; height:100% !important; max-width:none; margin:0; border-radius:50%; object-fit:cover; }
.econur-category-trust .econur-category-card__icon{ display:grid; place-items:center; width:100%; height:100%; background:#E6F0E8; color:var(--ect-teal); }
.econur-category-trust .econur-category-card__icon svg{ width:20px; height:20px; }
.econur-category-trust .econur-category-card__label{ flex:1 1 auto; min-width:0; font-family:var(--ect-ui); font-size:15px; font-weight:600; line-height:1.2; letter-spacing:-.005em; white-space:nowrap; }
.econur-category-trust .econur-category-card__arrow{ flex:none; display:grid; place-items:center; color:var(--ect-arrow); transition:transform .2s ease; }
.econur-category-trust .econur-category-card__arrow svg{ width:17px; height:17px; }
/* "All products": the default, in light sage */
.econur-category-trust .econur-category-card--active{ flex-grow:1.1; background:var(--ect-active); border-color:var(--ect-active-line); }
.econur-category-trust .econur-category-card:focus-visible{ outline:2px solid var(--ect-teal); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .econur-category-trust .econur-category-card:hover{ border-color:#AACBBB; background:#F8FBF8; transform:translateY(-1px); box-shadow:0 5px 16px rgba(30, 70, 55, .05); }
  .econur-category-trust .econur-category-card--active:hover{ background:#EBF3EC; }
  .econur-category-trust .econur-category-card:hover .econur-category-card__arrow{ transform:translateX(2px); }
}
@media (hover:none){
  .econur-category-trust .econur-category-card:active{ transform:scale(.985); transition-duration:.12s; }
}

/* ---------- trust panel ---------- */
.econur-category-trust .econur-trust-strip{ display:grid; grid-template-columns:repeat(4, 1fr); margin:20px 0 0 !important; padding:20px 8px !important; list-style:none;
  background:var(--ect-panel); border:1px solid var(--ect-panel-line); border-radius:20px; }
.econur-category-trust .econur-trust-item{ position:relative; display:flex; align-items:center; gap:14px; min-width:0; margin:0; padding:4px 18px; list-style:none; }
.econur-category-trust .econur-trust-item + .econur-trust-item::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:46px; margin-top:-23px; background:var(--ect-divider); }
.econur-category-trust .econur-trust-item__icon{ flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--ect-sage-light); color:var(--ect-teal); }
.econur-category-trust .econur-trust-item__icon svg{ width:22px; height:22px; }
.econur-category-trust .econur-trust-item__copy{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.econur-category-trust .econur-trust-item__label{ font-family:var(--ect-ui); font-size:15px; font-weight:600; line-height:1.25; color:var(--ect-ink); }
.econur-category-trust .econur-trust-item__text{ font-family:var(--ect-ui); font-size:13px; font-weight:500; line-height:1.4; color:var(--ect-muted); }
.econur-category-trust .econur-trust-item__text--short{ display:none; }

/* small laptops: a little tighter */
@media (min-width:960px) and (max-width:1199px){
  .econur-category-trust .econur-category-list{ gap:10px; }
  .econur-category-trust .econur-category-card{ gap:10px; padding-right:12px; }
  .econur-category-trust .econur-category-card__label{ font-size:14px; }
  .econur-category-trust .econur-trust-item{ gap:10px; padding:4px 12px; }
  .econur-category-trust .econur-trust-item__icon{ width:44px; height:44px; }
  .econur-category-trust .econur-trust-item__label{ font-size:14.5px; }
  .econur-category-trust .econur-trust-item__text{ font-size:12.5px; }
}

/* ---------- tablets and phones ---------- */
@media (max-width:959px){
  /* the cards swipe sideways, running to the screen edge so the next card peeks in */
  .econur-category-trust .econur-category-list{ gap:10px; margin:0 calc(-1 * var(--ect-gutter)); padding:2px var(--ect-gutter) 6px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scroll-padding-left:var(--ect-gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .econur-category-trust .econur-category-list::-webkit-scrollbar{ display:none; }
  .econur-category-trust .econur-category-card{ flex:none; min-width:142px; height:52px; gap:10px; padding:6px 14px 6px 7px; scroll-snap-align:start; }
  .econur-category-trust .econur-category-card__media{ width:38px; height:38px; }
  .econur-category-trust .econur-category-card__icon svg{ width:18px; height:18px; }
  .econur-category-trust .econur-category-card__label{ font-size:14px; }
  .econur-category-trust .econur-category-card__arrow svg{ width:16px; height:16px; }
  /* trust: one connected 2 x 2 panel */
  .econur-category-trust .econur-trust-strip{ grid-template-columns:repeat(2, 1fr); margin-top:16px !important; padding:0 !important; border-radius:18px; }
  .econur-category-trust .econur-trust-item{ gap:12px; padding:15px 16px; }
  .econur-category-trust .econur-trust-item + .econur-trust-item::before{ content:none; }
  .econur-category-trust .econur-trust-item:nth-child(2n){ border-left:1px solid #E7E1D7; }
  .econur-category-trust .econur-trust-item:nth-child(n+3){ border-top:1px solid #E7E1D7; }
  .econur-category-trust .econur-trust-item__icon{ width:42px; height:42px; }
  .econur-category-trust .econur-trust-item__icon svg{ width:20px; height:20px; }
  .econur-category-trust .econur-trust-item__label{ font-size:14px; }
}
@media (max-width:767px){
  /* phones: the homepage container has no side padding here, so the section brings its own 16px (like Bestsellers) */
  .econur-category-trust{ --ect-gutter:16px; padding:0 16px; }
  .econur-category-trust .econur-category-trust__header{ margin-bottom:14px; }
  .econur-category-trust .econur-category-trust__title{ font-size:25px !important; line-height:1.2 !important; }
}
/* small phones: no tagline; the shorter supporting lines keep each benefit to two lines */
@media (max-width:600px){ .econur-category-trust .econur-category-trust__tagline{ display:none; } }
@media (max-width:480px){
  .econur-category-trust .econur-trust-item{ gap:10px; padding:14px 12px; }
  .econur-category-trust .econur-trust-item__icon{ width:40px; height:40px; }
  .econur-category-trust .econur-trust-item__icon svg{ width:19px; height:19px; }
  .econur-category-trust .econur-trust-item__label{ font-size:13.5px; }
  .econur-category-trust .econur-trust-item__text{ display:none; font-size:12.5px; }
  .econur-category-trust .econur-trust-item__text--short{ display:block; }
}

/* narrow phones: a smaller icon keeps label and line on one line each */
@media (max-width:400px){
  .econur-category-trust .econur-trust-item{ gap:8px; padding:13px 10px; }
  .econur-category-trust .econur-trust-item__icon{ width:34px; height:34px; }
  .econur-category-trust .econur-trust-item__icon svg{ width:17px; height:17px; }
  .econur-category-trust .econur-trust-item__label{ font-size:13px; letter-spacing:-.01em; }
  .econur-category-trust .econur-trust-item__text{ font-size:12px; }
}

@media (max-width:370px){ .econur-category-trust .econur-trust-item{ padding:13px 8px; } .econur-category-trust .econur-trust-item__label{ font-size:12.5px; } }

@media (prefers-reduced-motion:reduce){
  .econur-category-trust .econur-category-card, .econur-category-trust .econur-category-card__arrow{ transition:none; }
  .econur-category-trust .econur-category-card:hover, .econur-category-trust .econur-category-card:active{ transform:none; }
}