/* ==========================================================================
   PRODUCT CARD - NEA SXEDIASI GRID PLAKIDIOU (vasi maketas)
   --------------------------------------------------------------------------
   GIATI YPARXEI AFTO TO ARXEIO:
   Oi kanones tou grid plakidiou einai antigrammenoi se ~20 css arxeia
   (products.css, productsv3.css, prosfores.css, prosforesv3.css,
   home_temp*.css, akoma kai etaireia.css / tropoi-pliromis.css ...).
   Anti na peiraksoume kai na kratame synxronismena 20 antigrafa, afto to
   arxeio fortonetai TELEUTAIO se kathe selida kai ta nika ola. Mia pigi
   alitheias gia tin opsi tis kartas.

   TI ALLAZEI: stoixisi aristera, lefki karta me strogyles gonies, badge
   prosforas se dyo orthogonia chips, grammi diathesimotitas, kai ouderera
   (oxi xromatista) koumpia posotitas.
   I LEITOURGIA DEN ALLAZEI KATHOLOU - kanena koumpi "Prosthiki", ta +/-
   synexizoun na grafoun sto kalathi opos panta.

   PARALLAGES POU KALYPTONTAI:
     - monada 1 (mono temaxia) / 2 (mono kivotia) / 3 (kai ta dyo)
     - lianiki (provoli_lianikis) - kryvei idi ta kivotia inline
     - per_kg (Timi kilou) - to label erxetai etoimo apo to PHP
     - germanika - ola ta keimena erxontai apo to PHP, tipota "psimeno"
     - anamenomena - grammi diathesimotitas me to idio kritirio me to PHP
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

/* --- 1) I karta ---------------------------------------------------------- */
.product_grid,
.product_grid.product_grid_lianiki{
    background:#fff;
    border:1px solid #e8ecf1;
    border-radius:14px;
    box-shadow:0 1px 3px rgba(16,24,40,.05);
    box-sizing:border-box;
    padding:12px 13px 13px;
    margin-top:22px;
    overflow:hidden;
    transition:box-shadow .15s ease, border-color .15s ease;
}
.product_grid:hover{
    border-color:#d6dde6;
    box-shadow:0 4px 14px rgba(16,24,40,.09);
}

/* --- 2) Perioxi eikonas ------------------------------------------------- */
.product_grid .main_grid_img_container{
    position:relative;
    height:158px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 10px;
    overflow:visible;
}
.product_grid .product_img_grid_class{
    width:auto;
    max-width:100%;
    max-height:100%;
    height:auto;
    border-radius:0;
    object-fit:contain;
}

/* To eikonidio 360/VR: pano aristera, mikro (itan 70px kai "epine" ti foto).
   Ta top/left isoutai me to padding tis kartas, giati to PHP to vazei EKSO
   apo to .main_grid_img_container - alliws to 360 kathotan sti gonia tis
   kartas kai to badge 12px pio kato, dyladi den stoixizontan. */
.product_grid .play_icon_class{
    top:12px;
    left:13px;
    width:46px;
    z-index:2;
}

/* --- 3) Badge prosforas: dyo chips pano dexia --------------------------- */
.pc_badge{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    pointer-events:none;
}
.pc_badge_main{
    background:#e02b27;
    color:#fff;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.2px;
    line-height:1.2;
    padding:4px 8px;
    border-radius:3px;
    text-align:center;
    white-space:normal;
}
.pc_badge_sub{
    background:#ffc80a;
    color:#1b2a4a;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:8px;
    font-weight:800;
    letter-spacing:.3px;
    line-height:1;
    padding:3px 6px;
    border-radius:3px;
    text-align:center;
    white-space:nowrap;
}

/* I imerominia lixis ("Ews: 12/09") - itan 16px se plates 90px kai eskaze */
.product_grid .prosf_div{
    position:absolute;
    bottom:0;
    right:0;
    left:auto;
    top:auto;
    width:auto;
    padding:3px 7px;
    background:#0076d1;
    color:#fff;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1;
    border-radius:4px;
    white-space:nowrap;
    z-index:2;
}

/* --- 4) Titlos ---------------------------------------------------------- */
.product_grid .product_title_grid{
    text-align:left;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    color:#1b2a4a;
    line-height:1.35;
    margin:0 0 10px;
    padding:0;
    width:auto;
}

/* --- 5) Timi ------------------------------------------------------------ */
.product_grid .product_pricing_container_div{
    width:100%;
    float:none;
}
.product_grid .timi_label_grid{
    float:none;
    width:auto;
    margin:0;
    text-align:left;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:11.5px;
    font-weight:500;
    color:#667085;
    line-height:1.3;
}
/* Apo span se diki tis grammi, opos sti maketa */
.product_grid .timi_value_grid{
    display:block;
    padding:2px 0 0;
    margin:0;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:21px;
    font-weight:800;
    color:#0582c7;
    line-height:1.15;
}

/* --- 6) Diathesimotita -------------------------------------------------- */
.pc_avail{
    display:flex;
    align-items:center;
    gap:5px;
    margin:7px 0 5px;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:11.5px;
    font-weight:600;
    line-height:1.2;
}
.pc_avail::before{
    flex:0 0 auto;
    width:13px;
    height:13px;
    border-radius:50%;
    border:1.5px solid currentColor;
    font-size:8px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pc_in_stock{ color:#12a150; }
.pc_in_stock::before{ content:'\2713'; }
.pc_awaiting{ color:#d98200; }
.pc_awaiting::before{ content:'!'; }

/* --- 7) Temaxia/Kivotio ------------------------------------------------- */
.product_grid .temkiv_container_grid{
    clear:none;
    float:none;
    margin:0 0 10px;
    text-align:left;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:11.5px;
    font-weight:500;
    color:#667085;
}

/* --- 8) Koumpia posotitas ----------------------------------------------- */
.product_grid .kiv_quan_container_grid,
.product_grid .tmx_quan_container_grid{
    width:100%;
    height:auto;
    float:none;
    clear:none;
    margin:0 0 7px;
    display:flex;
    align-items:center;
    gap:6px;
}
.product_grid .tmx_quan_container_grid{ margin-bottom:0; }

/* I etiketa ("Temaxia"/"Kivotia") einai TELEUTAIA sto DOM - ti fernoume
   proti me flex order, xoris na aggiksoume to markup (kai tous JS hooks). */
.product_grid .kiv_lbl_grid,
.product_grid .tmx_lbl_grid{
    order:-1;
    flex:1 1 auto;
    min-width:0;
    margin:0;
    text-align:left;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:11.5px;
    font-weight:600;
    color:#344054;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product_grid .kiv_quan_left_grid,
.product_grid .kiv_quan_right_grid,
.product_grid .tmx_quan_left_grid,
.product_grid .tmx_quan_right_grid{
    flex:0 0 auto;
    width:25px;
    height:25px;
    float:none;
    margin:0;
    background:#f2f4f7;
    border:1px solid #e4e7ec;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background-color .12s ease;
}
.product_grid .kiv_quan_left_grid:hover,
.product_grid .kiv_quan_right_grid:hover,
.product_grid .tmx_quan_left_grid:hover,
.product_grid .tmx_quan_right_grid:hover{
    background:#e6eaf0;
}

.product_grid .kiv_quan_center_grid,
.product_grid .tmx_quan_center_grid{
    flex:0 0 auto;
    width:40px;
    height:25px;
    float:none;
    margin:0;
    background:#fff;
    border:1px solid #e4e7ec;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Ta "-" kai "+" itan 34px/29px kai xromatista (mple/prasino). Sti maketa
   einai ouderera kai mikra. */
.product_grid .minus_container_grid,
.product_grid .cross_container_grid{
    margin:0;
    padding:0;
    color:#344054;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1;
    text-align:center;
}

.product_grid .kiv_quan_input,
.product_grid .tmx_quan_input{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:none;
    outline:none;
    background:transparent;
    text-align:center;
    font-family:'Manrope','Segoe UI',Arial,sans-serif;
    font-size:12.5px;
    font-weight:700;
    color:#1b2a4a;
    -moz-appearance:textfield;
}
.product_grid .tmx_quan_input::-webkit-outer-spin-button,
.product_grid .tmx_quan_input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

/* --- 9) Seira monadas pou den isxyei ------------------------------------ */
/* Prin: ta koumpia ginontan opacity:0 kai to input readonly, ara emene mia
   KENI grammi mesa sti karta. Twra kryvetai olokliri i seira. To input
   MENEI sto DOM (display:none, oxi afairesi) giati o stepper ton kivotion
   grafei mesa sto tmx_quan_input. */
.product_grid .pc_row_off{
    display:none;
}

/* --- 10) Mikroteres othones -------------------------------------------- */
@media (max-width:1520px){
    .product_grid .main_grid_img_container{ height:146px; }
    .product_grid .timi_value_grid{ font-size:20px; }
}
@media (max-width:1270px){
    .product_grid{ padding:11px; }
    .product_grid .play_icon_class{ top:11px; left:11px; }
    .product_grid .main_grid_img_container{ height:134px; }
    .product_grid .product_title_grid{ font-size:12.5px; }
    .product_grid .timi_value_grid{ font-size:19px; }
    .product_grid .kiv_quan_center_grid,
    .product_grid .tmx_quan_center_grid{ width:36px; }
    .product_grid .play_icon_class{ width:40px; }
}

/* --- 11) Modal 360 ------------------------------------------------------
   Prin: to iframe itan position:fixed me left:7% kai max-width:1000px, ara
   se megales othones DEN itan kentrarismeno, kai to X itan se right:8% -
   dyladi se allo simeio apo ti dexia akri tou iframe. Ekei to plakonan alla
   elements kai den patiotan se oli tin epifaneia tou.
   Twra: skoteino backdrop (#pc_vr_shell), kentrarismeno kouti (#pc_vr_box)
   kai to X stin gonia TOU parathyrou. Ola scoped kato apo to #pc_vr_shell,
   opote oi selides pou den exoun akoma ti nea JS den epireazontai katholou.
   -------------------------------------------------------------------------- */
#pc_vr_shell{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(16,24,40,.72);
    z-index:10050;
    display:none;
    align-items:center;
    justify-content:center;
}
#pc_vr_shell.pc_vr_open{
    display:flex;
}

/* 131.5vh = 88vh * (1000/669): kratame to parathyro mesa stin othoni kai
   kata ypsos, xoris na spasei to aspect ratio. */
#pc_vr_box{
    position:relative;
    width:min(86vw, 1000px, 131.5vh);
    aspect-ratio:1000 / 669;
}

#pc_vr_shell .vr_tool_view{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:none;
    border:none;
    border-radius:10px;
    background:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    z-index:1;
}

#pc_vr_shell .close_vr{
    position:absolute;
    top:-15px;
    right:-15px;
    left:auto;
    width:34px;
    height:34px;
    z-index:3;
    cursor:pointer;
}

@media (max-width:700px){
    #pc_vr_box{ width:min(94vw, 1000px, 131.5vh); }
    #pc_vr_shell .close_vr{ top:-13px; right:-9px; width:29px; height:29px; }
}

/* --- 12) Eftharmogi ton kato tmimaton metaksy ton karton ------------------
   To #products_container einai idi flex me align-items:stretch, ara oles oi
   kartes mias seiras exoun to IDIO ypsos. Omos to blok tis timis den kollouse
   kato: to prosforesv3.css evaze flex:1 sto .product_title_grid, ALLA afto to
   div einai mesa se ena <a> - ara to pragmatiko flex item einai to anchor, pou
   den eixe flex:1. Xoris komvo na "rofisei" ton eleuthero xoro, kathe karta
   stoixize ta kato tis stoixeia amesos meta ton titlo tis.
   Twra megalonei to anchor tou titlou, opote to blok timis/diathesimotitas/
   Tem.Kiv/koumpion pefti panta sto idio ypsos se oli ti seira - anexartita apo
   to poses grammes pianei o titlos, kai gia opoiadipote parallagi monadas
   (kivotia, temaxia, kila).
   -------------------------------------------------------------------------- */
.product_grid > a{
    flex:0 0 auto;
    min-width:0;
}
.product_grid > .pc_title_link{
    flex:1 1 auto;
    display:block;
    min-width:0;
}

/* --- 13) Seires monadas pou den isxyoun (products / home) -----------------
   Sto prosfores.php i seira kryvetai me tin klasi .pc_row_off apo to PHP.
   Stis alles selides i logiki einai pio mperdemeni (to per_kg ksanaenergopoiei
   ta temaxia ana PROION), opote anti gia PHP tin entopizoume apo tin idia tin
   inline style pou vazei idi o kodikas sta apenergopoiimena koumpia:
       style="pointer-events:none;opacity:0;"
   Etsi akolouthoume automata oli tin ypartousa logiki (monada 1/2/3 + per_kg)
   xoris na aggiksoume kathe klado ksexorista.
   Sto per_kg i seira ton kivotion deixnei ta "Grammaria" kai ta koumpia tis
   einai display:none (oxi opacity:0) - ara den tin kryvoume, opos prepei.
   -------------------------------------------------------------------------- */
.product_grid .kiv_quan_container_grid:has(.kiv_quan_left_grid[style*="opacity:0"]),
.product_grid .tmx_quan_container_grid:has(.tmx_quan_left_grid[style*="opacity:0"]){
    display:none;
}

/* --- 14) Ypsos kartas: ison se oli ti seira, xoris keno ------------------
   Oi selides den symfonousan metaksy tous:
     prosforesv3.css / productsv3.css -> #products_container flex + ypsos auto
     home_temp3.css                   -> TIPOTA. Oi kartes itan aples floats me
                                         KARFOTO height (520px, kai 8 akoma times
                                         se media queries).
   Gi' afto stin arxiki emene tera keno kato apo ta koumpia: to periexomeno
   stoivazotan pano kai to ypoloipo tou karfotou ypsous emene adeio.
   Edw to kanonikopoioume gia OLES tis selides apo ena simeio: to ypsos vgainei
   apo to periexomeno, oles oi kartes mias seiras tentonontai idies, kai to
   anchor tou titlou (.pc_title_link) rofa ton eleuthero xoro wste ta kato
   tmimata na pefotoun panta sto idio ypsos.
   -------------------------------------------------------------------------- */
#products_container{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
}

.product_grid{
    height:auto;
    display:flex;
    flex-direction:column;
}