/* ==========================================================================
   Product card — "Toy Tag"
   Used by the homepage carousels, the shop grid and anywhere else a product
   tile is rendered. Markup comes from includes/product_card.php.

   The card is shaped like a hang tag: clipped top corners, a punched hole, a
   price ribbon, a torn dashed line above the button. Each card carries its own
   accent colour on --pc (set inline, picked from the product id) so a row of
   cards reads as a set of different tags rather than one repeated block.

   Palette is the site's own: yellow #fcc603, pink #e83e8c, ink #001430.
   ========================================================================== */

/* index.css has `a:link, a:visited { color:#adacb1; font-size:16px }`, which is
   specificity 0,0,1,1 and beats a bare class. Every rule below that targets a
   link is therefore scoped with .pcard to outrank it — without that the Add To
   Cart label renders grey at 16px. */

.pcard-wrap {
  /* drop-shadow, not box-shadow: the card is clip-path'd, and a box-shadow gets
     clipped away with it. A filter on the parent follows the clipped outline. */
  filter: drop-shadow(0 5px 12px rgba(0, 20, 48, 0.10));
  transition: filter 0.28s ease;
  padding-top: 10px;
}

.pcard-wrap:hover {
  filter: drop-shadow(0 14px 26px rgba(0, 20, 48, 0.17));
}

.pcard {
  --pc: #fcc603;
  --pc-tint: #fff2c9;
  --pc-shade: #b08a00;

  position: relative;
  background: #fff;
  border-radius: 20px;
  /* overflow:hidden so the colour bar's top corners follow the card radius. */
  overflow: hidden;
  padding: 42px 15px 16px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pcard-wrap:hover .pcard {
  transform: translateY(-6px) rotate(-1deg);
}

/* --- tag top -------------------------------------------------------------- */

/* A straight colour bar across the top of the card. This started out as a
   pointed tag head; the point read as a triangle stuck above the card rather
   than part of it, so the top is flat. */
.pcard__point {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(180deg, var(--pc), var(--pc-shade));
}

/* --- price ribbon --------------------------------------------------------- */

.pcard__price {
  position: absolute;
  z-index: 3;
  top: 50px;
  right: 0;
  background: var(--pc);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 6px 12px;
  border-radius: 6px 0 0 6px;
  white-space: nowrap;
}

.pcard__price sup {
  font-size: 10.5px;
  font-weight: 700;
  top: -0.6em;
  margin-right: 1px;
}

/* Struck-through MRP, only rendered while the discount UI is switched on. */
.pcard__was {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.75;
  text-decoration: line-through;
  margin-top: -2px;
}

/* --- favourite ------------------------------------------------------------ */

.pcard .pcard__fav {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 9px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: #c3cad4;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 3px 9px rgba(0, 20, 48, 0.14);
  transition: color 0.2s, transform 0.2s;
}

.pcard .pcard__fav:hover { color: #e83e8c; transform: scale(1.1); }
.pcard .pcard__fav.active { color: #e83e8c; }

/* --- product ------------------------------------------------------------- */

.pcard .pcard__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.94;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 62%, var(--pc-tint) 0%, #fff 72%);
  overflow: hidden;
}

/* No cut-out for this photo (see CUTOUT_SKIP) — it still has its own white
   backdrop, which would read as a white block sitting on the tint. */
.pcard .pcard__stage.is-plain { background: #fff; }

.pcard .pcard__stage img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Cut-outs get a real shadow under them; an original still on its white
   background would just get a grey box, so it doesn't. */
.pcard__stage img.is-cutout {
  filter: drop-shadow(0 9px 12px rgba(0, 20, 48, 0.17));
}

.pcard-wrap:hover .pcard .pcard__stage img { transform: scale(1.07); }

/* --- text ---------------------------------------------------------------- */

.pcard__rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #001430;
}

.pcard__rate i { color: #fcc603; font-size: 11px; }
.pcard__rate span { color: #69778a; font-weight: 500; }

.pcard__name {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard .pcard__name a { color: inherit; text-decoration: none; }
.pcard .pcard__name a:hover { color: var(--pc-shade); }

.pcard__tear {
  margin: 11px -15px 0;
  border: 0;
  border-top: 2px dashed #dfe3ea;
}

/* --- button -------------------------------------------------------------- */

/* The button normally fills the footer on its own. On the favourites page a bin
   sits beside it, so the two align on their bottom edge and the button keeps
   whatever margin the breakpoint gave it. */
.pcard__actions { display: flex; align-items: flex-end; gap: 8px; }

.pcard .pcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--pc);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s, letter-spacing 0.22s;
}

.pcard .pcard__btn:hover {
  background: #001430;
  color: #fff;
  letter-spacing: 0.04em;
}

.pcard .pcard__btn i { font-size: 13px; }

.pcard .pcard__remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid #e6e9ef;
  background: #fff;
  color: #69778a;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
}

.pcard .pcard__remove:hover {
  border-color: #e83e8c;
  background: #e83e8c;
  color: #fff;
}

/* Chrome's default focus ring is dark and reads as a stray black border on a
   coloured control. Hide it for pointer clicks; keyboard users get one in the
   card's own colour rather than losing the cue. */
.pcard a:focus { outline: none; }

.pcard a:focus-visible {
  outline: 3px solid var(--pc);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ==========================================================================
   Tablet — 992px and under
   ========================================================================== */

@media (max-width: 991px) {
  .pcard { padding: 36px 13px 14px; }
  .pcard__price { top: 46px; font-size: 15px; padding: 5px 10px; }
  .pcard .pcard__fav { top: 46px; width: 30px; height: 30px; font-size: 12px; }
  .pcard__name { font-size: 14px; }
  .pcard__tear { margin-left: -13px; margin-right: -13px; }
  .pcard .pcard__btn { height: 42px; font-size: 13.5px; }
  .pcard .pcard__remove { width: 42px; height: 42px; }
}

/* ==========================================================================
   Phone — 767px and under
   Two cards per row is tight, so everything steps down together: the tag point
   and hole shrink, the ribbon loses its padding, and the button label drops to
   the icon plus a shorter word.
   ========================================================================== */

@media (max-width: 767px) {
  .pcard-wrap { padding-top: 8px; }

  .pcard {
    padding: 32px 11px 12px;
    border-radius: 16px;
  }

  .pcard-wrap:hover .pcard { transform: translateY(-4px) rotate(-0.5deg); }

  .pcard__point { height: 24px; }

  .pcard__price {
    top: 36px;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 5px 0 0 5px;
  }

  .pcard__price sup { font-size: 9px; }
  .pcard__was { font-size: 9px; }

  .pcard .pcard__fav {
    top: 36px;
    left: 6px;
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  .pcard .pcard__stage { border-radius: 11px; }

  .pcard__rate { margin-top: 9px; font-size: 11px; }
  .pcard__rate i { font-size: 10px; }

  .pcard__name {
    font-size: 13px;
    line-height: 1.3;
    min-height: 2.6em;
  }

  .pcard__tear { margin: 9px -11px 0; }

  .pcard .pcard__btn {
    height: 38px;
    margin-top: 9px;
    font-size: 12.5px;
    gap: 6px;
  }

  .pcard .pcard__btn i { font-size: 12px; }

  .pcard__actions { gap: 6px; }
  .pcard .pcard__remove { width: 38px; height: 38px; font-size: 13px; }
}

/* Smallest phones: the review count is the first thing that can go. */
@media (max-width: 400px) {
  .pcard__rate span { display: none; }
  .pcard .pcard__btn { font-size: 12px; }
}