/* ------------------------------------------------------------------
   Product card -- 2026-08-20.
   Used by search results, category listings, also-purchased,
   check-these-out and new products.

   MOBILE FIRST. Base styles are the phone. Anything that only applies on a
   bigger screen goes in a min-width query -- never max-width overrides.

   The GRID is Bootstrap's, not mine: callers wrap each card in
   col-xs-6 col-sm-4 col-md-3 (2 up on a phone, 3 on a tablet, 4 on desktop).
   No custom grid, no custom breakpoints, nothing to keep in sync with the
   framework already on the page.

   Namespaced pc-* deliberately: .row and .grid collide with Bootstrap, and
   .row's clearfix :before/:after become grid items that shift every cell.
   ------------------------------------------------------------------ */

.pc-card{border:1px solid #e4e4e4;background:#fff;display:flex;flex-direction:column;
  height:100%;transition:border-color .12s,box-shadow .12s;}
.pc-col{margin-bottom:14px;display:flex;}
.pc-col > .pc-card{width:100%;}

/* Bootstrap 3's grid floats, so a card with a 3-line name makes the next one
   snag on it instead of starting a clean row -- you get holes in the grid.
   Making OUR row a flex container fixes it at every breakpoint without
   nth-child clearfix gymnastics, and equalises card heights for free.

   The :before/:after are Bootstrap's clearfix. In a flex container they stop
   being table cells and become flex ITEMS, which is exactly the bug that
   shifted every cell one column sideways earlier. Kill them here. */
.pc-row{display:flex;flex-wrap:wrap;}
.pc-row:before,.pc-row:after{display:none;}

/* touch first: no hover lift on a phone, and taps must not fire hover styles */
@media (hover:hover){
  .pc-card:hover{border-color:#b73333;box-shadow:0 2px 10px rgba(0,0,0,.09);}
  .pc-card:hover .pc-photo img{transform:scale(1.28) rotate(5deg);}
  .pc-card:hover .pc-btn,.pc-btn:hover{background:#8f2020;border-color:#8f2020;color:#fff!important;}
  .pc-card:hover .pc-btn.pc-opts,.pc-btn.pc-opts:hover{background:#286090;border-color:#286090;color:#fff!important;}
  .pc-card:hover .pc-btn.pc-wait,.pc-btn.pc-wait:hover{background:#c47f00;border-color:#c47f00;color:#fff!important;}
}
@media (prefers-reduced-motion:reduce){
  .pc-photo img{transition:none!important;}
  .pc-card:hover .pc-photo img{transform:none!important;}
}

.pc-photo{height:118px;display:flex;align-items:center;justify-content:center;padding:10px;
  border-bottom:1px solid #f0f0f0;position:relative;overflow:hidden;}
.pc-photo img{
  /* tep_image() writes its own width/height onto the tag and gets the ratio
     wrong -- a 260x176 thumbnail came out rendered 221x111, i.e. stretched
     from 1.477 to 1.992. Forcing auto lets the real proportions win; max-*
     keeps it inside the box; object-fit is belt and braces. */
  width:auto!important;height:auto!important;
  max-width:100%;max-height:100%;object-fit:contain;
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.34,1.28,.5,1);}
@media (min-width:768px){ .pc-photo{height:132px;} }

.pc-flag{position:absolute;top:8px;color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.05em;padding:2px 6px;}
.pc-flag-out{left:8px;background:#6c757d;}
.pc-flag-sale{right:8px;background:#b73333;}

.pc-body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:5px;flex:1;}

.pc-sku{font-family:Menlo,Consolas,monospace;font-size:11px;color:#1e1e1e;
  background:#f4f4f2;border:1px solid #e6e6e3;padding:2px 6px;align-self:flex-start;}
@media (min-width:768px){ .pc-sku{font-size:12px;} }

.pc-name{font-size:12px;font-weight:700;line-height:1.35;
  color:#1e1e1e!important;text-decoration:none!important;display:block;}
.pc-name:hover{color:#b73333!important;}
@media (min-width:768px){ .pc-name{font-size:12.5px;min-height:34px;} }

/* stacked on a phone so a long stock line never squeezes the price */
.pc-foot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  margin-top:auto;padding-top:8px;min-width:0;}
@media (min-width:480px){
  .pc-foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap;}
}

.pc-stock{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  color:#0c7a0c;letter-spacing:.02em;white-space:nowrap;}
.pc-stock i{width:6px;height:6px;background:#0c7a0c;border-radius:50%;display:inline-block;flex:none;}
.pc-stock.pc-out{color:#8a8a8a;}
.pc-stock.pc-out i{background:#b0b0b0;}

.pc-now{font-size:16px;font-weight:700;white-space:nowrap;}
.pc-prices{white-space:nowrap;line-height:1.15;min-width:0;}
/* a sale price is two numbers side by side -- on a narrow card that overflowed,
   so the stock line is allowed to shrink and the price never is */
.pc-stock{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.pc-was{display:block;font-size:11px;color:#8a8a8a;text-decoration:line-through;}
.pc-sale{color:#b73333;}
@media (min-width:480px){
  .pc-now,.pc-prices{text-align:right;}
  .pc-now{font-size:17px;}
}

/* 44px minimum touch target on a phone, tighter once there is a mouse.
   min-height rather than padding maths, so it holds if the font ever changes. */
.pc-btn{display:flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid #b73333;background:#b73333;color:#fff!important;
  padding:6px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-decoration:none!important;transition:background .12s,border-color .12s;}
.pc-btn.pc-opts{border-color:#337ab7;background:#337ab7;color:#fff!important;}
/* the waiting list is not a purchase, so it stays outlined -- the two solid
   buttons are the ones that take money */
.pc-btn.pc-wait{border-color:#c47f00;background:#fff;color:#8a6410!important;}
@media (min-width:768px){ .pc-btn{min-height:0;padding:7px 6px;} }

/* tile = the same card, smaller, for sidebar and related boxes */
.pc-tile .pc-photo{height:104px;}
.pc-tile .pc-body{padding:8px 9px 10px;gap:4px;}
.pc-tile .pc-name{font-size:11.5px;}
.pc-tile .pc-now{font-size:14px;}
@media (min-width:768px){ .pc-tile .pc-name{min-height:31px;} }