/* Ironman Coffee — shop archive redesign.
   Scoped to body.imx-shop (shop page + product category/tag archives only).
   Pure CSS: no visibility depends on JavaScript. */

body.imx-shop{
  --s-ink: #0b0806;
  --s-card: #140f0a;
  --s-line: rgba(255,255,255,.1);
  --s-cream: #f7f1e8;
  --s-mute: rgba(247,241,232,.64);
  --s-amber: #e8a33d;
  --s-amber-2: #ffd08a;
  background: var(--s-ink) !important;
  color: var(--s-cream);
}

/* let the dark page show through the theme's white containers */
body.imx-shop .site,
body.imx-shop .site-content,
body.imx-shop .container,
body.imx-shop .inside-article,
body.imx-shop .woocommerce-archive-wrapper,
body.imx-shop .content-area,
body.imx-shop .site-main{
  background: transparent !important;
}
body.imx-shop .site-content{ padding-top: clamp(20px, 3vw, 36px); }
body.imx-shop .inside-article{ padding: 0 !important; }

/* ---------- hero ---------- */
.imx-shop__hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--s-line);
  padding: clamp(34px, 6vw, 72px) clamp(24px, 5vw, 64px);
  margin: 0 0 clamp(28px, 4vw, 44px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(232,163,61,.26), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(185,118,42,.18), transparent 60%),
    linear-gradient(160deg, #1a130c, #0d0906);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.imx-shop__hero::after{
  /* faint grain of light across the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,208,138,.6), transparent);
}
.imx-shop__kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--s-amber-2);
}
.imx-shop__kicker i{
  width: 7px; height: 7px; border-radius: 50%; background: var(--s-amber);
  box-shadow: 0 0 0 4px rgba(232,163,61,.2);
}
.imx-shop__title{
  margin: 18px 0 0 !important;
  font-size: clamp(34px, 6vw, 68px) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
  color: var(--s-cream) !important;
  max-width: 14ch;
}
.imx-shop__title em{
  font-style: normal;
  background: linear-gradient(100deg, var(--s-amber-2), var(--s-amber) 60%, #b9762a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.imx-shop__lede{
  margin: 20px 0 0 !important;
  max-width: 58ch;
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.7;
  color: var(--s-mute);
}
.imx-shop__chips{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.imx-shop__chips li{
  margin: 0; list-style: none;
  border: 1px solid var(--s-line);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px; font-weight: 600; color: var(--s-cream);
}
.imx-shop__chips li b{ color: var(--s-amber-2); font-weight: 800; }

/* ---------- toolbar (result count + sort) ---------- */
body.imx-shop .woocommerce-result-count{
  color: var(--s-mute) !important;
  font-size: 13.5px;
  margin: 0 0 22px !important;
  line-height: 44px;
}
body.imx-shop .woocommerce-ordering{ margin: 0 0 22px !important; }
body.imx-shop .woocommerce-ordering select{
  -webkit-appearance: none; appearance: none;
  background: var(--s-card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8a33d' stroke-width='1.8'/%3E%3C/svg%3E")
    no-repeat right 16px center !important;
  color: var(--s-cream) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 999px !important;
  padding: 11px 44px 11px 18px !important;
  font-size: 14px; font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}
body.imx-shop .woocommerce-ordering select:focus{ outline: 2px solid var(--s-amber); outline-offset: 2px; }
/* GP draws its own "•••" icon over the select; the chevron above replaces it */
body.imx-shop .woocommerce-ordering::before,
body.imx-shop .woocommerce-ordering::after{ display: none !important; content: none !important; }

/* ---------- notices ---------- */
body.imx-shop .woocommerce-message,
body.imx-shop .woocommerce-info,
body.imx-shop .woocommerce-error{
  background: var(--s-card) !important;
  color: var(--s-cream) !important;
  border: 1px solid rgba(232,163,61,.4) !important;
  border-radius: 16px !important;
}
body.imx-shop .woocommerce-message a,
body.imx-shop .woocommerce-info a{ color: var(--s-amber-2) !important; }

/* ---------- product grid ---------- */
/* !important on the columns: GeneratePress forces a 3-column grid via
   .wc-columns-container.wc-columns-3, which left two cards hugging the left. */
body.imx-shop ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px)) !important;
  justify-content: center !important;
  gap: clamp(18px, 2.4vw, 28px);
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
}
body.imx-shop ul.products::before,
body.imx-shop ul.products::after{ display: none !important; }

body.imx-shop ul.products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 12px 18px !important;
  display: flex !important;
  flex-direction: column;
  text-align: left !important;
  background: linear-gradient(180deg, #17110b, var(--s-card));
  border: 1px solid var(--s-line);
  border-radius: 24px;
  transition: transform .45s cubic-bezier(.22,.8,.3,1), border-color .3s ease, box-shadow .45s ease;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.imx-shop ul.products li.product:hover{
  transform: translateY(-6px);
  border-color: rgba(232,163,61,.45);
  box-shadow: 0 34px 60px -34px rgba(232,163,61,.45);
}

body.imx-shop ul.products li.product .woocommerce-LoopProduct-link{
  display: flex; flex-direction: column; flex: 1 1 auto;
  color: inherit; text-decoration: none;
}

/* GP sizes its image wrappers to the 300px thumbnail; make them fill the card */
body.imx-shop ul.products li.product .wc-product-image,
body.imx-shop ul.products li.product .inside-wc-product-image{
  display: block !important;
  width: 100% !important;
}
body.imx-shop ul.products li.product .wc-product-image{
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 18px !important;
  background: radial-gradient(90% 90% at 50% 20%, #2a1d10, #0d0906);
}
body.imx-shop ul.products li.product .wc-product-image img{
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
  transition: transform .8s cubic-bezier(.22,.8,.3,1);
}
body.imx-shop ul.products li.product:hover .wc-product-image img{ transform: scale(1.06); }

/* visual order inside the card link: image, category, then everything else.
   The category is printed after the title in the HTML (see ironman-demo-shop.php). */
body.imx-shop ul.products li.product .woocommerce-LoopProduct-link > *{ order: 2; }
body.imx-shop ul.products li.product .woocommerce-LoopProduct-link > .wc-product-image{ order: 0; }
body.imx-shop ul.products li.product .woocommerce-LoopProduct-link > .imx-shop__cat{ order: 1; }

.imx-shop__cat{
  display: inline-block;
  align-self: flex-start;
  margin: 0 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--s-amber-2);
}

body.imx-shop ul.products li.product .woocommerce-loop-product__title{
  margin: 0 6px 12px !important;
  padding: 0 !important;
  font-size: 16.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--s-cream) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* no product has reviews; an empty 0/5 row is just noise */
body.imx-shop ul.products li.product .star-rating{ display: none !important; }

body.imx-shop ul.products li.product .price{
  display: block;
  margin: auto 6px 6px !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--s-amber-2) !important;
}
body.imx-shop ul.products li.product .price del{ color: var(--s-mute) !important; font-size: 15px; font-weight: 500; }
body.imx-shop ul.products li.product .price ins{ text-decoration: none; }

.imx-shop__earn{
  display: flex; align-items: center; gap: 8px;
  margin: 4px 6px 0;
  font-size: 13px; color: var(--s-mute);
}
.imx-shop__earn i{
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--s-amber); box-shadow: 0 0 0 3px rgba(232,163,61,.18);
}
.imx-shop__earn b{ color: var(--s-cream); font-weight: 700; }

body.imx-shop ul.products li.product .button{
  display: flex !important;
  align-items: center; justify-content: center;
  width: 100%;
  margin: 16px 0 0 !important;
  padding: 14px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--s-amber), var(--s-amber-2)) !important;
  color: #180f05 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  line-height: 1.2 !important;
  text-align: center;
  box-shadow: 0 10px 24px -12px rgba(232,163,61,.8);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
body.imx-shop ul.products li.product .button:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(232,163,61,.95);
  filter: brightness(1.05);
}
body.imx-shop ul.products li.product .button.loading{ opacity: .7; }
body.imx-shop ul.products li.product .added_to_cart{
  display: block; text-align: center; margin: 12px 0 0;
  color: var(--s-amber-2) !important; font-weight: 700; font-size: 14px; text-decoration: none;
}

body.imx-shop ul.products li.product .onsale{
  background: var(--s-amber) !important; color: #180f05 !important;
  border-radius: 999px !important; font-weight: 800 !important;
}

/* ---------- partner band after the grid ---------- */
.imx-shop__band{
  margin: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 36px);
  border-radius: 28px;
  border: 1px solid rgba(232,163,61,.3);
  padding: clamp(30px, 5vw, 56px);
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(232,163,61,.18), transparent 55%),
    var(--s-card);
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 28px 40px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 760px){ .imx-shop__band{ grid-template-columns: 1fr; } }
.imx-shop__band h2{
  margin: 0 !important;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--s-cream) !important;
}
.imx-shop__band h2 em{ font-style: normal; color: var(--s-amber-2); }
.imx-shop__band p{ margin: 14px 0 0 !important; color: var(--s-mute); font-size: 15.5px; line-height: 1.7; max-width: 52ch; }
.imx-shop__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.imx-shop__btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 800; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--s-line); color: var(--s-cream) !important;
  transition: transform .22s ease, border-color .22s ease;
}
.imx-shop__btn:hover{ transform: translateY(-2px); border-color: rgba(232,163,61,.6); }
.imx-shop__btn--solid{
  background: linear-gradient(135deg, var(--s-amber), var(--s-amber-2));
  border-color: transparent; color: #180f05 !important;
  box-shadow: 0 10px 24px -12px rgba(232,163,61,.8);
}

@media (max-width: 600px){
  body.imx-shop .woocommerce-result-count,
  body.imx-shop .woocommerce-ordering{ float: none !important; width: 100%; }
  body.imx-shop .woocommerce-ordering select{ width: 100%; }
  body.imx-shop .woocommerce-result-count{ margin-bottom: 10px !important; line-height: 1.4; }
  .imx-shop__actions{ flex-direction: column; }
  .imx-shop__btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  body.imx-shop ul.products li.product,
  body.imx-shop ul.products li.product .wc-product-image img,
  body.imx-shop ul.products li.product .button,
  .imx-shop__btn{ transition: none !important; }
  body.imx-shop ul.products li.product:hover,
  body.imx-shop ul.products li.product:hover .wc-product-image img{ transform: none; }
}