/* ===========================================================
   BuyARO - product page
   Palette follows the main stylesheet: neutral greys,
   #f2fafa panels, red accent for actions.
   =========================================================== */

/*
 * Flush with the site container, exactly like the header and the
 * blocks on the home page: 1440 wide, centred, no side padding.
 * A gutter appears only on narrow screens, at the bottom of this file.
 */

/* The heading sits above both columns and runs the width of the page,
   so a long title has the whole line rather than half of it. */
.product__head{
  max-width:1440px;
  margin:0 auto;
  padding:22px 0 0;
}

.product__inner{
  max-width:1440px;
  margin:0 auto;
  padding:16px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
}

/* ---------- gallery ---------- */

.product__gallery{
  flex:0 1 560px;
  min-width:280px;
}

.product__image{
  border:1px solid #e3e3e3;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}

.product__image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  max-width:100%;
}

.product__image img{
  cursor:zoom-in;
}

/* ---------- full-screen viewer ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.9);
}

.lightbox.is-open{
  display:flex;
}

.lightbox-lock,
.lightbox-lock body{
  overflow:hidden;
}

.lightbox__img{
  display:block;
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
  border-radius:4px;
  background:#fff;
}

.lightbox__close,
.lightbox__arrow{
  position:absolute;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  line-height:1;
}

.lightbox__close:hover,
.lightbox__arrow:hover{
  background:rgba(255,255,255,.3);
}

.lightbox__close{
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  font-size:32px;
}

.lightbox__arrow{
  top:50%;
  width:56px;
  height:56px;
  margin-top:-28px;
  font-size:24px;
}

.lightbox__arrow--prev{ left:18px; }
.lightbox__arrow--next{ right:18px; }

.lightbox__count{
  position:absolute;
  bottom:18px;
  left:0;
  right:0;
  text-align:center;
  color:#ddd;
  font-size:14px;
}

@media (max-width:640px){
  .lightbox__arrow{ width:44px; height:44px; margin-top:-22px; font-size:18px; }
  .lightbox__arrow--prev{ left:6px; }
  .lightbox__arrow--next{ right:6px; }
}

/* Five thumbnails fill the width of the big picture exactly. */
.product__thumbs{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  margin-top:12px;
}

.product__thumb{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  padding:0;
  border:1px solid #e3e3e3;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  overflow:hidden;
}

.product__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.product__thumb.is-active,
.product__thumb:hover{
  border-color:#111;
}

/* ---------- main column ---------- */

.product__main{
  flex:1 1 380px;
  min-width:280px;
}

/* It now heads the whole page rather than one column, so it carries
   the weight of a page title and has the full width to wrap into. */
.product__title{
  margin:0;
  font-size:28px;
  line-height:1.25;
  font-weight:700;
  color:#111;
}

.product__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  font-size:14px;
  color:#555;
}

.product__meta .tr-card__rating{
  margin:0;
}

.product__sku{
  color:#777;
}

.product__pricebox{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:16px 18px;
  background:#f2fafa;
  border-radius:8px;
  border-left:4px solid #d71919;
}

.product__price{
  font-size:30px;
  font-weight:700;
  color:#111;
}

.product__oldprice{
  font-size:18px;
  color:#888;
  text-decoration:line-through;
}

.product__lead{
  margin:18px 0 0;
  font-size:15px;
  line-height:1.6;
  color:#333;
}

/* ---------- pack quantity, inside the price box ---------- */

.product__pricebox{
  position:relative;
  flex-wrap:wrap;
}

/*
 * The quantity "?" lines up with the "?" of the choice blocks below:
 * those sit 10px inside a 1px border, this box has no right border,
 * so 11px from its edge. Its height stays where the row puts it.
 */
.product__qty > .hint{
  position:absolute;
  right:11px;
  margin:0;
}

.product__qty{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  flex:1 1 100%;
  font-size:14px;
  color:#555;
}

.product__qty-label{
  font-weight:600;
  color:#111;
}

.product__qty-select{
  padding:8px 12px;
  border:1px solid #cfcfcf;
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:#111;
  cursor:pointer;
}

/* ---------- car makes the part fits, inside the specifications table ---------- */

/* Rounded cards: logo on top, the name small underneath. */
.spec-fits{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.spec-fits__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:76px;
  padding:7px 3px 6px;
  border:1px solid #e1e4e8;
  border-radius:8px;
  background:#fff;
  font-size:11px;
  font-weight:400;
  line-height:1.2;
  text-align:center;
  color:#444;
}

.spec-fits__item img{
  width:44px;
  height:44px;
  margin:0 0 4px;
  object-fit:contain;
}

/* "Other" - universal fitment, the part suits more makes than listed. */
.spec-fits__more{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0 0 4px;
  border-radius:50%;
  background:linear-gradient(180deg, #f3f4f6 0%, #dfe2e6 100%);
  color:#4a525c;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
}

/* ---------- buyer choices: each one its own framed block ---------- */

/*
 * Each block is split in two: a darker left column with the name and the
 * picked value, a light right one with the buttons. The left column is
 * the same width in every block - as wide as the longest name or value
 * of them all - through a shared grid (subgrid).
 */
.product__choices{
  display:grid;
  grid-template-columns:max-content 1fr;
  row-gap:8px;
  margin:18px 0 0;
}

.product__choice{
  position:relative;
  display:grid;
  grid-column:1 / -1;
  grid-template-columns:subgrid;
  border:1px solid #dcdfe3;
  border-radius:10px;
  background:#fafafa;
}

/* The "?" sits in the top right corner of the block, over the buttons column. */
.product__choice > .hint{
  position:absolute;
  top:9px;
  right:10px;
  margin:0;
}

/* Browsers without subgrid: a fixed left column that fits most names. */
@supports not (grid-template-columns:subgrid){
  .product__choice{ grid-template-columns:150px 1fr; }
}

.product__choice-side{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:9px 14px 10px;
  border-right:1px solid #dadde1;
  border-radius:9px 0 0 9px;
  background:linear-gradient(180deg, #f0f1f3 0%, #e7e9ec 100%);
}

/* Invisible: only lends its width to the column. */
.product__choice-sizer{
  display:block;
  height:0;
  padding:0 8px;
  overflow:hidden;
  visibility:hidden;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.product__choice-picked{
  white-space:nowrap;
}

.product__choice-list{
  align-content:center;
  padding:9px 40px 9px 12px;
}

.product__choice-name{
  font-size:15px;
  font-weight:700;
  color:#111;
}

.product__choice-picked{
  padding:1px 8px;
  border-radius:5px;
  background:#d71919;
  color:#fff;
  font-size:13px;
}

/* Nothing chosen yet: a quiet "select" instead of the red value. */
.product__choice:not(.is-picked) .product__choice-picked{
  background:#f4f5f7;
  color:#6b7280;
  font-weight:600;
}

/* Buy Now was pressed with this one still open. */
.product__choice.is-missing{
  border-color:#d71919;
  background:#fff7f7;
  box-shadow:0 0 0 3px rgba(215, 25, 25, .12);
}

.product__choice.is-missing .product__choice-side{
  border-right-color:#e8b4b4;
}

/* ---------- "?" hints for the buyer ---------- */

.hint{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-left:auto;
  border:1px solid #b9bec5;
  border-radius:50%;
  background:linear-gradient(180deg, #ffffff 0%, #e6e8eb 100%);
  box-shadow:0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(20, 24, 30, .12);
  color:#4a525c;
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:help;
  outline:none;
}

.hint:hover,
.hint:focus{
  border-color:#d71919;
  color:#d71919;
}

/* Opens to the right, over the buttons; .hint--left opens to the left. */
.hint__bubble{
  position:absolute;
  top:calc(100% + 10px);
  left:-8px;
  z-index:60;
  display:none;
  width:320px;
  max-width:calc(100vw - 32px);
  padding:12px 14px;
  border-radius:10px;
  background:linear-gradient(180deg, #2b3036 0%, #1d2126 100%);
  box-shadow:0 12px 30px rgba(10, 12, 16, .28);
  color:#e9ecef;
  font-size:13px;
  font-weight:400;
  line-height:1.55;
  text-align:left;
  cursor:default;
}

/* The little arrow pointing up at the "?". */
.hint__bubble::before{
  content:"";
  position:absolute;
  top:-6px;
  left:12px;
  width:12px;
  height:12px;
  background:#2b3036;
  transform:rotate(45deg);
}

.hint--left .hint__bubble{
  left:auto;
  right:-8px;
}

.hint--left .hint__bubble::before{
  left:auto;
  right:12px;
}

.hint__title{
  display:block;
  margin:0 0 4px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.hint:hover .hint__bubble,
.hint:focus .hint__bubble,
.hint:focus-within .hint__bubble{
  display:block;
}

.product__choice-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.product__opt{
  min-width:46px;
  padding:6px 10px;
  border:1px solid #d0d0d0;
  border-radius:6px;
  background:#fff;
  color:#111;
  font:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

.product__opt:hover{
  border-color:#111;
}

.product__opt.is-active{
  border:2px solid #d71919;
  padding:5px 9px;
  background:#fff5f5;
  color:#d71919;
}

/* ---------- actions ---------- */

.product__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px 18px;
  margin:22px 0 26px;
}

/* "Please choose: Diameter, PCD" - left of the button, pushing it right. */
.product__missing{
  flex:1 1 200px;
  margin:0;
  color:#d71919;
  font-size:14px;
  font-weight:600;
}

/* Buy Now: a raised red button - gradient face, light top edge, a solid
   lower edge that gives it depth; brighter with a soft glow on hover,
   pressed down on click. */
.product__buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  padding:15px 40px;
  border:1px solid #9e0e0e;
  border-radius:10px;
  background:linear-gradient(180deg, #f25252 0%, #e32626 46%, #cc1616 54%, #b31010 100%);
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0, 0, 0, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 4px 0 #870b0b,
    0 5px 8px rgba(0, 0, 0, .12);
  transition:filter .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* On hover it rises, as if lifting off the page, and lights up. */
.product__buy:hover{
  color:#fff;
  filter:brightness(1.12) saturate(1.05);
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 4px 0 #870b0b,
    0 16px 28px rgba(215, 25, 25, .40);
}

.product__buy:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 1px 0 #870b0b,
    0 2px 4px rgba(0, 0, 0, .12);
}

.product__buy:focus-visible{
  outline:3px solid rgba(215, 25, 25, .35);
  outline-offset:3px;
}

/*
 * ---------- tables: specifications and the ones in descriptions ----------
 * Brushed-metal look to match the silver gradient buttons of the header:
 * a steel header with an engraved label, glassy rows with a light inner
 * highlight, a whole row lighting up under the pointer.
 */

.spec-table,
.product-descr__body table{
  width:100%;
  margin:0 0 22px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #c9ced4;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  font-size:15px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 6px rgba(20, 24, 30, .06);
  transition:box-shadow .3s ease;
}

.spec-table:hover,
.product-descr__body table:hover{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 34px rgba(20, 24, 30, .14);
}

.spec-table th,
.product-descr__body th{
  padding:13px 18px;
  background:linear-gradient(180deg, #fbfbfc 0%, #e4e6e9 48%, #d3d6da 52%, #c6c9ce 100%);
  border-bottom:1px solid #b4b9bf;
  color:#1b1e22;
  font-size:15px;
  font-weight:700;
  letter-spacing:.4px;
  text-align:left;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255, 255, 255, .8);
}

.spec-table td,
.product-descr__body td{
  padding:11px 18px;
  border-top:1px solid #e7e9ec;
  text-align:left;
  vertical-align:top;
  color:#16191d;
  background:transparent;
  transition:background-color .15s ease;
}

.spec-table tbody tr:first-child td,
.product-descr__body tbody tr:first-child td{
  border-top:0;
}

/*
 * Only the table is rounded. The table cannot clip its cells
 * (overflow:hidden would also cut off the "?" bubbles), so the four cells
 * that sit exactly in the table's corners follow its curve - and no other
 * cell edge is rounded anywhere.
 */
.spec-table > thead > tr:first-child > :first-child,
.spec-table > tbody:first-child > tr:first-child > :first-child,
.product-descr__body table > thead > tr:first-child > :first-child,
.product-descr__body table > tbody:first-child > tr:first-child > :first-child{ border-top-left-radius:11px; }

.spec-table > thead > tr:first-child > :last-child,
.spec-table > tbody:first-child > tr:first-child > :last-child,
.product-descr__body table > thead > tr:first-child > :last-child,
.product-descr__body table > tbody:first-child > tr:first-child > :last-child{ border-top-right-radius:11px; }

.spec-table > tbody:last-child > tr:last-child > :first-child,
.product-descr__body table > tbody:last-child > tr:last-child > :first-child{ border-bottom-left-radius:11px; }

.spec-table > tbody:last-child > tr:last-child > :last-child,
.product-descr__body table > tbody:last-child > tr:last-child > :last-child{ border-bottom-right-radius:11px; }

/* Label column: a pale steel tint, a notch darker than the values. */
.spec-table td:first-child,
.product-descr__body td:first-child{
  width:34%;
  background:linear-gradient(90deg, rgba(222, 226, 231, .55) 0%, rgba(236, 239, 242, .35) 100%);
  border-right:1px solid #e7e9ec;
  font-weight:600;
  color:#4a525c;
}

.spec-table tbody tr:nth-child(even),
.product-descr__body tbody tr:nth-child(even){
  background:rgba(236, 239, 243, .45);
}

/* The whole row lights up - both cells, one flat light orange. */
.spec-table tbody tr:hover td,
.spec-table tbody tr:hover td:first-child,
.product-descr__body tbody tr:hover td,
.product-descr__body tbody tr:hover td:first-child{
  background:#ffeedd;
  color:#0f1215;
}

.spec-table tbody tr:hover td:first-child,
.product-descr__body tbody tr:hover td:first-child{
  box-shadow:3px 0 0 #d71919 inset;
}

/* ---------- description ---------- */

.product-descr__inner{
  max-width:1440px;
  margin:0 auto;
  padding:8px 0 24px;
}

/* A value with its "?" pushed to the right edge of the cell. */
.spec-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.spec-cell > .hint{
  margin-left:auto;
}

/* Our own addition to a supplier figure, set apart from the value itself. */
.spec-extra{
  margin-left:6px;
  color:#8a9099;
  font-size:14px;
  font-weight:400;
}

/* The same figures, counted for the chosen quantity, at the foot of a hint. */
.hint__extra{
  display:block;
  margin:8px 0 0;
  padding:8px 0 0;
  border-top:1px solid rgba(255, 255, 255, .15);
  color:#ffd9b3;
}

.hint__extra b{
  color:#fff;
}

.product-descr__sub{
  margin:26px 0 12px;
  font-size:18px;
  font-weight:700;
  color:#111;
}

.product-descr__body h2{
  margin:24px 0 12px;
  font-size:18px;
  color:#111;
}

.product-descr__title{
  margin:0 0 14px;
  font-size:20px;
  font-weight:700;
  color:#111;
}

.product-descr__body{
  font-size:15px;
  line-height:1.7;
  color:#333;
}

.product-descr__body p{
  margin:0 0 14px;
}

/* ---------- pagination (shared with category pages) ---------- */

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:24px 16px 8px;
  font-size:15px;
}

.pager__link{
  padding:9px 18px;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:600;
}

.pager__link:hover{
  border-color:#111;
}

.pager__state{
  color:#666;
}

/* ===========================================================
   FAVOURITES PAGE
   The cards are the ordinary .tr-card, untouched. Only the page
   wrapper and two small additions live here.
   =========================================================== */

.fav-page{
  width:100%;
  background:#fff;
}

.fav-page__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:24px 0 40px;
  box-sizing:border-box;
}

/* Same column width and rhythm as the grids on the homepage,
   but aligned from the left so one card does not sit alone. */
.fav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, 200px);
  justify-content:start;
  column-gap:44px;
  row-gap:30px;
  align-items:start;
}

/* Room for the heart in the corner of the picture. */
.tr-card--fav{
  position:relative;
}

.tr-card--fav .na-fav-btn{
  top:10px;
  right:10px;
  z-index:3;
}

.tr-card__cat{
  display:inline-block;
  margin-top:7px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#8d8d8d;
  text-decoration:none;
}

a.tr-card__cat:hover{
  color:#0b7285;
  text-decoration:underline;
}

/* A card on its way out after the heart is switched off. */
.tr-card--fav.is-leaving{
  opacity:0;
  transform:scale(.96);
  transition:opacity .18s ease, transform .18s ease;
}

.fav-empty{
  padding:30px 0 40px;
  font-size:15px;
  line-height:1.7;
  color:#333;
}

.fav-empty p{ margin:0 0 12px; }

@media (max-width: 1439px){
  .fav-grid{ column-gap:24px; }
}

@media (max-width: 560px){
  .fav-page__inner{ padding:16px 12px 30px; }
  .product-descr__inner{ padding:8px 12px 24px; }

  .fav-grid{
    grid-template-columns:repeat(auto-fill, minmax(145px, 1fr));
    column-gap:14px;
    row-gap:22px;
  }
}

/* ---------- narrow screens ---------- */

@media (max-width: 760px){
  .product__inner{
    gap:24px;
    padding:16px 16px 4px;
  }

  .product__title{
    font-size:21px;
  }

  .product__price{
    font-size:25px;
  }

  .product__btn{
    flex:1 1 100%;
    text-align:center;
  }
}

/* ===========================================================
   SIDE GUTTER BELOW THE SITE WIDTH
   These containers live in this file, which loads after the main
   stylesheet, so the shared rule there cannot reach them. Same
   idea: flush at 1440 and wider, a gutter once the window is
   narrower than the layout.
   =========================================================== */

@media (max-width: 1439px){
  .product__head,
  .product__inner,
  .product-descr__inner,
  .fav-page__inner{
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width: 560px){
  .product__head,
  .product__inner,
  .product-descr__inner,
  .fav-page__inner{
    padding-left:12px;
    padding-right:12px;
  }
}