/* =========================================
   PRODUCT PAGE (Tokoládé-style)
   -----------------------------------------
   - Global shop háttér: shop.css (sárga gradiens)
   - Termékoldal: body.page-product felülírható (fehér)
   - Galéria (thumbs + modal) is itt van
   ========================================= */

:root{
  --pdp-radius: 18px;
  --pdp-line: rgba(15,23,42,.10);
  --pdp-card: rgba(255,255,255,.94);
  --pdp-shadow: 0 14px 34px rgba(15,23,42,.06);
}

/*
  Alapértelmezés: a termékoldal is a globális (shop.css) háttérrel megy.
  Ha FEHÉR termékoldalt szeretnél, tedd rá a body-ra a `page-white` class-t.
*/
body.page-product.page-white .maincontainer{ background: transparent; }
body.page-product.page-white{
  background:
    radial-gradient(1100px 520px at -8% -12%, rgba(245,158,11,.14) 0%, rgba(245,158,11,0) 58%),
    radial-gradient(900px 420px at 104% 0%, rgba(30,41,59,.09) 0%, rgba(30,41,59,0) 64%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.product-page{
  max-width: 1180px;
  margin: 18px auto 42px;
  padding: 0 16px;
}

/* Breadcrumbs */
.product-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin: 2px 0 14px;
  font-size:12px;
  color: rgba(71,85,105,1);
}
.product-breadcrumbs a{ color: rgba(15,23,42,1); text-decoration:none; }
.product-breadcrumbs a:hover{ text-decoration:underline; }
.bc-sep{ opacity:.6; }
.bc-current{ font-weight:600; color: rgba(15,23,42,1); }

/* Common cards */
.product-media-card,
.product-purchase-card,
.product-description-card,
.product-params-card,
.pdp-related-card{
  border: 1px solid var(--pdp-line);
  background: var(--pdp-card);
  border-radius: var(--pdp-radius);
  padding: 12px;
  box-shadow: var(--pdp-shadow);
}

.product-h2{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* =====================
   TOP GRID (thumbs | image | buy)
   ===================== */
.pdp-top{
  display:grid;
  grid-template-columns: 74px minmax(0,1fr) minmax(320px,380px);
  gap: 16px;
  align-items:start;
}

.pdp-buy{
  position: static;
  top: auto;
  align-self: start;
}

/* nincs thumbs oszlop (csak 1 kép van) */
.pdp-top--no-thumbs{
  grid-template-columns: minmax(0,1fr) minmax(320px,380px);
}

/* Ha nincs több kép (nincs thumbs oszlop), ne maradjon „üres” bal oszlop */
.pdp-top.pdp-top--no-thumbs{
  grid-template-columns: minmax(0,1fr) minmax(320px,380px);
}

/* Thumbs */
.pdp-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 6px;
  max-height: 560px;
  overflow:auto;
}

.pg-thumb,
.pg-more{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.95);
  padding: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.pg-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}
.pg-thumb.is-active{
  border-color: rgba(234,88,12,.45);
  box-shadow: 0 0 0 4px rgba(255,106,0,.14);
}

/* Hero image */
.pdp-hero .product-media-card{ padding: 14px; }
.product-media-wrapper{ display:block; }
.pg-mainBtn{
  width:100%;
  border:0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}
.product-main-image{
  width: 100%;
  height: 420px;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
}

/* Buy card */
.product-titleblock{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.product-title-main{
  margin:0;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color:#0f172a;
  overflow-wrap:anywhere;
}

.product-facts{
  display:grid;
  gap:7px;
  margin-bottom: 12px;
}
.product-fact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 11px;
  background: rgba(248,250,252,.92);
}
.product-fact-label{
  font-size: 12px;
  font-weight: 600;
  color: rgba(71,85,105,1);
}
.product-fact-value{
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-align:right;
}
.product-fact-status{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.product-fact-status.is-in{
  color: #0f5132;
  background: #d1fae5;
  border-color: #6ee7b7;
}
.product-fact-status.is-out{
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}
.product-fact-status.is-backorder{
  color: #7c2d12;
  background: rgba(255,237,213,.95);
  border-color: rgba(251,146,60,.75);
}

.product-share-mini{
  width:36px;
  height:36px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.98));
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.16);
  box-shadow: 0 8px 16px rgba(15,23,42,.20);
}
.product-share-mini:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.product-price-block{ margin: 6px 0 14px; }
.product-price-lg{
  font-size: 22px;
  font-weight: 800;
  color:#0f172a;
}
.product-price-unit{ font-size: 12px; font-weight: 600; color: rgba(71,85,105,1); margin-left: 6px; }
.product-old-price{ color: rgba(100,116,139,1); text-decoration: line-through; font-size: 12px; margin-top: 4px; }

.product-row{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.product-row--qty{ margin-top: 6px; }
.product-page .category-product-qty{
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.product-page .category-product-qty .qty-btn{
  width: 40px;
  height: 40px;
  border: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: #0f172a;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.product-page .category-product-qty .qty-btn:hover{
  background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%);
}
.product-page .category-product-qty input{
  border: 0;
  height: 40px;
  min-width: 72px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
}
.product-add-btn{
  flex: 1 1 180px;
  min-width: 160px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d97706;
  background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  font-weight: 700;
}
.product-add-btn:hover{
  filter: brightness(.96);
}
.product-page .product-add-btn:disabled,
.product-page .product-add-btn[disabled]{
  background: #e5e7eb;
  border-color: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.product-page .product-add-btn:disabled:hover,
.product-page .product-add-btn[disabled]:hover{
  transform: none;
  box-shadow: none;
  filter: none;
}

.product-row--qty.is-disabled .category-product-qty{
  opacity: .72;
}

.product-stock-note{
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
}
.product-stock-note.is-out{
  color: #b91c1c;
}
.product-stock-note.is-backorder{
  color: #9a3412;
}

/* qty – a product_card.css-ből jön, csak igazítás */
.product-qty{ flex: 0 0 auto; }

.product-row--secondary{ margin-top: 10px; }
.product-page .product-row--secondary .pc-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  box-shadow: 0 8px 16px rgba(15,23,42,.06);
}
.product-page .product-row--secondary .pc-icon:hover{
  border-color: rgba(234,88,12,.45);
  color: #ea580c;
  transform: translateY(-1px);
}
.product-page .product-row--secondary .pc-icon svg{
  width: 18px;
  height: 18px;
}

.product-trust{
  margin-top: 12px;
  display:grid;
  gap:6px;
  font-size: 12px;
  color: rgba(51,65,85,1);
}
.product-trust span{
  display:flex;
  align-items:center;
  gap:8px;
}
.product-trust span::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #16a34a;
  flex: 0 0 7px;
}

.pdp-mini{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(71,85,105,1);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
}

/* =====================
   BOTTOM GRID (desc+params | related)
   ===================== */
.pdp-bottom{
  display:block;
  gap: 16px;
  margin-top: 16px;
  align-items:start;
}
.pdp-desc,
.pdp-desc > .product-description-card,
.pdp-desc > .product-params-card{
  width: 100%;
  max-width: none;
}
.pdp-bottom--with-thumbs{
  grid-template-columns: 1fr;
}
.pdp-bottom--with-thumbs .pdp-desc{
  grid-column: auto;
}
.pdp-bottom--no-thumbs{
  grid-template-columns: 1fr;
}
.pdp-bottom--no-thumbs .pdp-desc{
  grid-column: auto;
}

.product-description-text{
  font-size: 13px;
  line-height: 1.65;
  color:#0f172a;
}

.product-params-tableWrap{ overflow:auto; }
.product-params-table{ width:100%; border-collapse:collapse; }
.product-params-table th,
.product-params-table td{ padding: 10px 8px; border-top: 1px solid rgba(15,23,42,.08); vertical-align: top; }
.product-params-table th{ width: 38%; color: rgba(51,65,85,1); font-weight: 700; }

.pdp-related-head h3{ margin: 0 0 10px; font-size: 16px; }

/* =====================
   MORE PRODUCTS GRID
   ===================== */
.pdp-more{
  margin-top: 22px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 0 22px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #dce2ea 0%, #d3dae4 100%);
}
.pdp-more-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 10px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.pdp-more-link{ font-size: 12px; color: rgba(234,88,12,1); text-decoration:none; font-weight: 700; }
.pdp-more-link:hover{ text-decoration:underline; }

.pdp-more-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Mobil / tablet */
@media (max-width: 980px){
  .pdp-top{ grid-template-columns: 74px minmax(0,1fr); }
  .pdp-top.pdp-top--no-thumbs{ grid-template-columns: 1fr; }
  .pdp-buy{ grid-column: 1 / -1; }
  .product-main-image{ height: 360px; }
  .pdp-bottom,
  .pdp-bottom--with-thumbs,
  .pdp-bottom--no-thumbs{ grid-template-columns: 1fr; }
  .pdp-desc{ grid-column: auto; }
  .pdp-more-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .pdp-top{ grid-template-columns: 1fr; }
  .pdp-thumbs{
    flex-direction:row;
    max-height: unset;
    overflow-x:auto;
    overflow-y:hidden;
    padding-top: 0;
  }
  .pg-thumb, .pg-more{ width: 70px; height: 70px; }
  .product-main-image{ height: 320px; }
  .pdp-more-head,
  .pdp-more-grid{
    padding-left: 12px;
    padding-right: 12px;
  }
  .pdp-more-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

/* =========================================
   MODAL GALÉRIA
   ========================================= */
.pg-modal[hidden]{ display:none; }
.pg-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.pg-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.55);
}
.pg-modal__dialog{
  position: relative;
  max-width: 980px;
  margin: 40px auto;
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 14px;
}
.pg-modal__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}

.pg-modal__stage{
  display:grid;
  grid-template-columns: 54px minmax(0,1fr) 54px;
  gap: 10px;
  align-items:center;
  margin-top: 8px;
}
.pg-nav{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 32px;
}
.pg-modal__figure{ margin:0; }
.pg-modal__img{
  width: 100%;
  height: 520px;
  object-fit: contain;
  display:block;
}
.pg-modal__meta{ display:flex; justify-content:center; margin: 10px 0 0; color: rgba(71,85,105,1); font-size: 12px; }

.pg-modal__thumbs{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 6px;
}
.pg-modal__thumbs button{
  width: 76px;
  height: 76px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  padding: 8px;
  cursor:pointer;
}
.pg-modal__thumbs img{ width:100%; height:100%; object-fit: contain; display:block; }

@media (max-width: 720px){
  .pg-modal__dialog{ margin: 16px; }
  .pg-modal__img{ height: 360px; }
}