/* ==========================================================================
   pro.css — storefront polish layer
   Loaded last, after supplement.css. It restyles the product card, shop
   listing, product page price block and a few rough edges so the store reads
   like a mainstream e-commerce site: calmer type, photo-first cards, plain
   savings (MRP + % off), touch-friendly controls. Delete the <link> in
   layouts/app.blade.php to fall back to the previous look.
   ========================================================================== */

:root {
  --pro-ink: #141414;
  --pro-ink-2: #4b4b4b;
  --pro-ink-3: #8a8a8a;
  --pro-line: #ececec;
  --pro-surface: #f5f5f5;
  --pro-ok: #0b8a45;
  --pro-radius: 12px;
}

/* ── Product grid & card ─────────────────────────────────────────────── */

.product-grid { gap: 22px; }

.product-card.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-radius);
  box-shadow: none;
  transform: none;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.product-card.pcard:hover {
  transform: none;
  border-color: #e0e0e0;
  box-shadow: 0 12px 32px rgba(17, 17, 17, .08);
}

.pcard .pcard-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--pro-surface);
  overflow: hidden;
}
.pcard .pcard-media > a { position: absolute; inset: 0; display: block; }

/* Photos fill a square tile, whatever size they were uploaded at. */
.product-card.pcard .pcard-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform .6s ease;
}
.product-card.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard .pcard-img-alt { opacity: 0; }
@media (hover: hover) {
  .product-card.pcard:hover .pcard-img-alt { opacity: 1; }
}

/* The old dark slide-up overlay is replaced by the heart + button below. */
.pcard .product-card-overlay { display: none; }

.pcard-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
  color: #fff;
  background: var(--pro-ink);
}
.pcard-flag-off { background: var(--red, #d62828); }

.pcard-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  color: var(--pro-ink);
  font-size: 15px;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.pcard-wish:hover,
.pcard-wish.is-saved { color: var(--red, #d62828); }
.pcard-wish:hover { transform: scale(1.08); }

.pcard .pcard-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 14px 16px;
}
.pcard .product-category {
  margin-bottom: 4px;
  color: var(--pro-ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.pcard .pcard-title {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0 0 8px;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pcard .pcard-title a { color: var(--pro-ink); text-decoration: none; }
/* The whole card is the link; the heart and the button sit above it. */
.pcard .pcard-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard .pcard-title a:focus-visible { outline: none; }
.pcard .pcard-title a:focus-visible::after { outline: 2px solid var(--red, #d62828); outline-offset: 2px; border-radius: var(--pro-radius); }

.pcard-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 12px;
}
.pcard-price strong { color: var(--pro-ink); font-size: 17px; font-weight: 700; }
.pcard-price s { color: var(--pro-ink-3); font-size: 13px; }
.pcard-save { color: var(--pro-ok); font-size: 12.5px; font-weight: 700; }

.pcard-add {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: auto;
  border: 1.5px solid var(--pro-ink);
  border-radius: 8px;
  background: #fff;
  color: var(--pro-ink);
  font: 600 13px/1 'Poppins', system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pcard-add:hover,
.pcard-add:focus-visible { background: var(--pro-ink); color: #fff; }
.pcard-add:disabled { opacity: .6; cursor: progress; }

@media (max-width: 768px) {
  .product-grid { gap: 12px; }
  .pcard .pcard-body { padding: 10px 10px 12px; }
  .pcard .pcard-title { font-size: 13px; }
  .pcard-price strong { font-size: 15px; }
  .pcard-price s, .pcard-save { font-size: 11.5px; }
  .pcard-add { height: 36px; font-size: 12px; gap: 6px; }
  .pcard-wish { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 13px; }
  .pcard-flag { top: 8px; left: 8px; font-size: 10px; }
}

/* ── Shop listing ────────────────────────────────────────────────────── */

.listing-header {
  margin-bottom: 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--pro-line);
}
.results-count { color: var(--pro-ink-2); font-size: 14px; }
.listing-controls { display: flex; align-items: center; gap: 10px; }
.sort-dropdown select {
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: #fff;
  color: var(--pro-ink);
  font: 500 13px 'Poppins', system-ui, sans-serif;
}

.filters-toggle,
.filters-close { display: none; }
.filters-backdrop { display: none; }

/* Long colour lists show ten, then "Show all". */
.color-filter-options.is-collapsed > .color-chip:nth-child(n + 11) { display: none; }
.filter-more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red, #d62828);
  font: 600 12.5px 'Poppins', system-ui, sans-serif;
  cursor: pointer;
}

@media (max-width: 992px) {
  /* The filter panel becomes a drawer instead of a screen-tall block
     above the products. */
  .content-wrapper .filters {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2001;
    width: min(88vw, 360px);
    margin: 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-102%);
    transition: transform .28s ease;
  }
  .content-wrapper .filters.is-open { transform: none; }
  .filters-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: block;
    background: rgba(0, 0, 0, .45);
  }
  body.no-scroll { overflow: hidden; }

  .filters-header { position: sticky; top: -18px; z-index: 1; margin: -18px -18px 18px; padding: 18px; background: #fff; }
  .filters-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--pro-surface);
    color: var(--pro-ink);
    font-size: 16px;
    cursor: pointer;
  }

  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: var(--pro-ink);
    font: 600 13px 'Poppins', system-ui, sans-serif;
    cursor: pointer;
  }
  .filters-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--red, #d62828);
    color: #fff;
    font-size: 11px;
  }
  .listing-header { flex-wrap: wrap; }
  .results-count { width: 100%; }
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 36px 0 8px;
}
.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: #fff;
  color: var(--pro-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.pager a:hover { border-color: var(--pro-ink); }
.pager .is-current { border-color: var(--pro-ink); background: var(--pro-ink); color: #fff; }
.pager .is-disabled { color: #bbb; }
.pager .pager-gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ── Product page ────────────────────────────────────────────────────── */

.product-info .pdp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 10px 0 4px;
}
.pdp-price-now { color: var(--pro-ink); font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.pdp-price .original-price { color: var(--pro-ink-3); font-size: 16px; text-decoration: none; }
.pdp-price .discount-badge {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(11, 138, 69, .1);
  color: var(--pro-ok);
  font-size: 13px;
  font-weight: 700;
}
.pdp-price-note { margin: 0 0 18px; color: var(--pro-ink-3); font-size: 13px; }
.pdp-price-note strong { color: var(--pro-ok); }

.pdp-sticky { display: none; }
@media (max-width: 768px) {
  .pdp-price-now { font-size: 26px; }
  .pdp-sticky {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pro-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .pdp-sticky.is-visible { transform: none; }
  .pdp-sticky-price strong { display: block; color: var(--pro-ink); font-size: 18px; font-weight: 800; line-height: 1.1; }
  .pdp-sticky-price s { color: var(--pro-ink-3); font-size: 12px; }
  .pdp-sticky-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--red, #d62828) 0%, var(--orange, #f77f00) 100%);
    color: #fff;
    font: 700 14px 'Poppins', system-ui, sans-serif;
    cursor: pointer;
  }
}

/* ── Home: Photon collection band ────────────────────────────────────── */

/* The heading inherited the dark page text colour on a dark band. */
.photon-content h2 { color: #fff; }
/* Markup uses <strong>/<span>; the old rules targeted h4/p, so the number
   and its label ran together ("32Styles"). */
.photon-stat strong { display: block; color: var(--orange, #f77f00); font-size: 32px; font-weight: 900; line-height: 1; }
.photon-stat span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .65); font-size: 13px; font-weight: 600; letter-spacing: .4px; }

/* Drawer header: title left, then Clear All, close button at the far right. */
@media (max-width: 992px) {
  .filters-header h3 { margin-right: auto; }
  .filters-header .filters-close { order: 3; }
}

/* ── Whole photos, never cropped ─────────────────────────────────────────
   Product photos were filled into their boxes with object-fit: cover,
   which trims the toe, heel or strap whenever a photo's shape differs from
   its box. Every product image is now fitted whole (contain) on a light
   neutral ground, and the hover zooms that pushed edges out of the frame are
   gone. Avatars stay cropped; they are meant to be circles. */
.product-card.pcard .pcard-media img,
.main-image img,
.thumbnail img,
.related-card img,
.item-image img,
.cart-layout .cart-item > img,
.summary-item img,
.order-image img,
.order-item img,
.order-thumbs img,
.category-card img {
  object-fit: contain;
  background: var(--pro-surface);
}

.product-card.pcard .pcard-media img { padding: 6px; }
.product-card.pcard:hover .pcard-media img,
.product-card.pcard:hover .pcard-img { transform: none; }

/* Product page: the large photo keeps its height but shows the whole shoe. */
.main-image { background: var(--pro-surface); }
.main-image img { height: 500px; }
.thumbnail img { background: #fff; }

/* Category tiles: whole photo above the label instead of under it. */
.category-card { background: var(--pro-surface); }
.category-card img { height: calc(100% - 64px); padding: 12px 12px 0; }
.category-card:hover img { transform: none; }
.category-card-overlay { background: linear-gradient(to top, rgba(13, 13, 13, .88) 0, rgba(13, 13, 13, .88) 64px, transparent 64px); }
.category-card:hover .category-card-overlay { background: linear-gradient(to top, rgba(214, 40, 40, .9) 0, rgba(214, 40, 40, .9) 64px, transparent 64px); }

@media (max-width: 768px) {
  .main-image img { height: auto; aspect-ratio: 1 / 1; }
  .product-card.pcard .pcard-media img { padding: 4px; }
}
.category-card-overlay { padding: 0 12px 11px; }
.category-card h3 { margin-bottom: 2px; font-size: 17px; }
.category-card span { font-size: 12px; }