/* ============================================================ HELLO MR. CURIOUS DEVELOPER 👀 This stylesheet is focused on typography, spacing rhythm and visual consistency. It fine-tunes UI elements to ensure proper alignment and readability. Nothing functional here, just visual polish. Move along 🙂 ============================================================ */ .category-view .row.productwrap .product .spacer, .category-view .row.productwrap .products .spacer, .browse-view .row.productwrap .product .spacer, .browse-view .row.productwrap .products .spacer, .latest-view .row.productwrap .product .spacer, .latest-view .row.productwrap .products .spacer, .recent-view .row.productwrap .product .spacer, .recent-view .row.productwrap .products .spacer, .featured-view .row.productwrap .product .spacer, .featured-view .row.productwrap .products .spacer, .topten-view .row.productwrap .product .spacer, .topten-view .row.productwrap .products .spacer { height: 100%; } /*======================= PRICE FIXES – VIRTUEMART ======================= */ .productdetails-view .vm-product-details-inner .product-price .PricesalesPrice span.PricesalesPrice, .productdetails-view .vm-product-details-inner .product-price .PricesalesPrice span.PricesalesPriceTt, .productdetails-view .vm-product-details-inner .product-price .PricesalesPriceTt span.PricesalesPrice, .productdetails-view .vm-product-details-inner .product-price .PricesalesPriceTt span.PricesalesPriceTt, .productdetails-view .related-product-desc .product-price .PricesalesPrice span.PricesalesPrice, .productdetails-view .related-product-desc .product-price .PricesalesPrice span.PricesalesPriceTt, .productdetails-view .related-product-desc .product-price .PricesalesPriceTt span.PricesalesPrice, .productdetails-view .related-product-desc .product-price .PricesalesPriceTt span.PricesalesPriceTt, .related_products .vm-product-details-inner .product-price .PricesalesPrice span.PricesalesPrice, .related_products .vm-product-details-inner .product-price .PricesalesPrice span.PricesalesPriceTt, .related_products .vm-product-details-inner .product-price .PricesalesPriceTt span.PricesalesPrice, .related_products .vm-product-details-inner .product-price .PricesalesPriceTt span.PricesalesPriceTt, .related_products .related-product-desc .product-price .PricesalesPrice span.PricesalesPrice, .related_products .related-product-desc .product-price .PricesalesPrice span.PricesalesPriceTt, .related_products .related-product-desc .product-price .PricesalesPriceTt span.PricesalesPrice, .related_products .related-product-desc .product-price .PricesalesPriceTt span.PricesalesPriceTt { display: inline-block; float: none !important; } /* Price typography */ .PricepriceWithoutTax span.vm-price-desc, .mas-products span.vm-price-desc { font-size: 16px !important; } .productdetails-view .vm-product-details-inner .product-price > div > span + span.PricepriceWithoutTax, .productdetails-view .vm-product-details-inner .product-price > div > span + span.PricesalesPrice, .mas-products .PricepriceWithoutTax, .mas-products .PricesalesPrice, .mas-products .PricebasePriceWithTax { font-size: 16px !important; font-weight: 500 !important; } .product-price .vm-price-desc{ font-size:16px !important; } .productdetails-view .PricesalesPrice{ font-weight:500 !important; } /* css απο template custom css */ .seo-pagetitle,.ps-content{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:1;color:#000;pointer-events:none;z-index:-1;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0;margin:0;}.seo-pagetitle h1,.seo-pagetitle h2,.seo-pagetitle h3,.ps-content p,.ps-content h2,.ps-content h3{position:static;font-size:20px;line-height:1.3;color:#000;opacity:1;text-shadow:none;}.btn{color:#ffffff;background-color:#303030;border-color:#303030;}.btn:hover{color:#ffffff;background-color:#303030;border-color:#303030;opacity:0.90;}.btn.btn-primary{color:#f9f9f9;background:#1d6db3;text-shadow:none;border-style:none;}.btn.btn-primary:hover{color:#f9f9f9;background:#185a94;opacity:1.00;}.sppb-btn{color:#ffffff;background-color:#1d6db3;border-color:#303030;padding:3px 10px 5px 10px;}.sppb-btn:hover{color:#ffffff;background-color:#1d6db3;border-color:#303030;opacity:0.85;}a.ask-a-question.bold{color:#ffffff;background:#1d6db3;border-color:#303030;padding:5px 10px 5px 10px;}a.ask-a-question.bold:hover{color:#ffffff;background:#1d6db3;border-color:#303030;opacity:0.80;}.proopc-btn-info{background-color:#ffffff00;background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#1d6db3,#185a94);background-repeat:repeat-x;border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);}.proopc-btn-info:hover,.proopc-btn-info:focus,.proopc-btn-info:active,.proopc-btn-info.active,.proopc-btn-info.disabled,.proopc-btn-info[disabled]{background-color:#1d6db3;background-color:#185a94;color:#fff;} /* css gia credit cards svg*/ /* Separator default size */ #mod-custom216 .bottom-separator img { max-width: 350px !important; width: 100% !important; height: auto !important; display: block; margin: 0 auto; } /* Σε κινητά */ @media (max-width: 768px) { #mod-custom216 .bottom-separator img { max-width: 80% !important; } } /*end*/ /* ====================== Open Sans (Body Font) ====================== */ @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans/OpenSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans/OpenSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ====================== Raleway (Headings & Navigation) ====================== */ @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('../fonts/raleway/Raleway-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* Σώμα κειμένου body { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; }*/ /* Επικεφαλίδες */ h1 { font-family: 'Raleway', Arial, sans-serif; font-weight: 300; font-size: 38px; } h2 { font-family: 'Raleway', Arial, sans-serif; font-weight: 300; font-size: 33px; } h3 { font-family: 'Raleway', Arial, sans-serif; font-weight: 400; font-size: 27px; } h4 { font-family: 'Raleway', Arial, sans-serif; font-weight: 400; font-size: 23px; } h5 { font-family: 'Raleway', Arial, sans-serif; font-weight: 500; font-size: 20px; } h6 { font-family: 'Raleway', Arial, sans-serif; font-weight: 600; font-size: 17px; } /* Navigation (menu) */ .sp-megamenu-parent, .sp-megamenu-parent a, .navbar, .navbar a { font-family: 'Raleway', Arial, sans-serif; font-weight: 400; font-size: 15px !important; } /* ====================== Pe-icon 7 Stroke ====================== */ @font-face { font-family: 'Pe-icon-7-stroke'; src: url('../fonts/Pe-icon-7-stroke.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* Link κατηγοριών και προϊόντων Virtuemart*/ /* Links σε περιγραφές κατηγοριών */ /* Links σε περιγραφές κατηγοριών */ div.category_description a, div.product-description a { color: #0066cc !important; text-decoration: underline !important; } div.category_description a:hover, div.product-description a:hover, div.category_description a:focus, div.product-description a:focus { color: #004999 !important; text-decoration: underline !important; font-weight: 600 !important; } /* ΡΥΘΜΙΣΗ ΠΛΑΤΟΥΣ CUSTOM FIELD ΣΕ AUTO */ .vm-customfields-wrap .product-field-wrapper { display: inline-block !important; width: auto !important; } .vm-customfields-wrap .chosen-container { width: 250px !important; max-width: 100% !important; } /*percent off - discount label*/ .category-view .row .spacer .spacer-inner .product-price .percent-off, .browse-view .row .spacer .spacer-inner .product-price .percent-off, .latest-view .row .spacer .spacer-inner .product-price .percent-off, .recent-view .row .spacer .spacer-inner .product-price .percent-off, .featured-view .row .spacer .spacer-inner .product-price .percent-off, .topten-view .row .spacer .spacer-inner .product-price .percent-off {background: rgba(29,109,179,0.67);padding: 6px 8px;position: absolute; border-radius: 3px 3px 0 3px;top: 47px;right: -10px;color: #fff;font-size: 14px;font-weight: 600;text-transform: uppercase;box-shadow: 0 2px 0 rgba(0,0,0,0.1);text-shadow: 1px 1px 2px rgba(0,0,0,0.2);} /* ========================================================= HOME PAGE ALL CSS (CLEAN) ========================================================= */ .ps-banner-wrapper{position:relative;width:100vw!important;margin-left:50%;transform:translateX(-50%);aspect-ratio:1920/350;min-height:350px;overflow:hidden;background:#000;content-visibility:auto;contain-intrinsic-size:1920px 350px;contain:layout paint;} .ps-banner-wrapper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;transform:scale(1);transition:transform .6s ease;} .ps-banner-wrapper:hover img{transform:scale(1.03);} .ps-banner-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:#fff;text-align:center;font-family:Raleway,"Helvetica Neue",Arial,sans-serif;line-height:1.2;padding:0 15px;} .ps-banner-text h1{font-size:clamp(28px,4vw,42px);margin:10px 0;text-shadow:0 2px 6px rgba(0,0,0,.4);} .ps-banner-text h2{font-size:clamp(20px,2.8vw,28px);font-weight:300;margin:5px 0;text-shadow:0 2px 6px rgba(0,0,0,.3);} .ps-banner-text p{font-size:clamp(16px,2vw,18px);margin:5px 0;opacity:.95;} .features-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin:20px 0;} .features-row .col{flex:1 1 19.166%;min-width:200px;} .features-row .col.fbox-3{flex:1 1 23.333%;} .feature-box{border-radius:14px;background:#fff;padding:16px;text-align:center;box-shadow:inset 0 0 6px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.08);transition:transform .2s ease,box-shadow .2s ease;margin:0 8px;} .feature-box:hover{transform:translateY(-5px);box-shadow:inset 0 0 8px rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.12);} .feature-box .title{font-size:17px;font-weight:600;color:#222;margin:8px 0;} .feature-box .icon{width:56px;height:56px;border-radius:14px;background:#e5e7eb;color:#374151;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 8px;transition:background .3s ease,color .3s ease;} .feature-box:hover .icon{background:#374151;color:#f9fafb;} .fbox-3 .icon{transition:background .3s ease,color .3s ease;} .fbox-3:hover .icon{background:#1d6db3!important;color:#fff!important;} .feature-box .text{font-size:13px;line-height:1.5;color:#555;text-align:left;margin:0 -5px;} .feature-box .text p{text-align:center!important;margin-top:10px;} .fbox-1,.fbox-2,.fbox-3,.fbox-4,.fbox-5{position:relative;z-index:99999;} .fbox-1,.fbox-2,.fbox-4,.fbox-5{margin-top:-40px;} .fbox-3{margin-top:-50px;} .ps-logo-bg{display:flex;justify-content:center;margin:25px 0 30px;} .ps-logo-bg img{max-width:100%;height:auto;} #ps-cats .spacer{border:1px solid #ddd;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.08);padding:0;margin-bottom:20px;position:relative;overflow:hidden;background:#fff;} #ps-cats .spacer-img{position:relative;overflow:hidden;aspect-ratio:453/263;} #ps-cats .spacer-img img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;transform:scale(1);transition:transform .35s ease;} #ps-cats .overlay{background:rgba(0,0,0,.8);position:absolute;bottom:0;width:100%;color:#fff;text-align:center;padding:6px 0;} #ps-cats .overlay h3::after{content:"";display:block;width:150px;height:2px;margin:5px auto 5px auto;background:linear-gradient(90deg,#38bdf8,transparent)} #ps-cats .overlay h3{margin:0;font-size:20px;font-weight:400;transition:transform .3s ease;} #ps-cats .overlay h3 a{margin:0;font-size:20px;font-weight:400;color:#fff;transition:transform .3s ease;} #ps-cats .category-desc{padding:10px;font-size:14px;line-height:1.5;color:#333;} #ps-cats .row.productwrap{margin-left:-10px;margin-right:-10px;} #ps-cats .category{padding-left:10px;padding-right:10px;} .readmore .btn-readmore::after{content: "";display: block;width: 80px;height: 2px;margin: 3px auto 0 auto;background: linear-gradient(90deg, #38bdf8, transparent);} @media(min-width:992px){#ps-cats .spacer-img:hover img{transform:scale(1.05);}#ps-cats .spacer-img:hover .overlay h3{transform:scale(1.1);}} @media(max-width:991px){.features-row .col{flex:1 1 calc(33.33% - 12px);}} @media(max-width:767px){.features-row .col{flex:1 1 100%;}} @media(max-width:768px){ .ps-mobile-row{width:100%;} .ps-mobile-logo{padding:14px 0;text-align:center;} .ps-mobile-logo img{width:95%;height:auto;display:block;margin:0 auto;} .sp-background-mobile{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);aspect-ratio:518/411;overflow:hidden;background:#000;} .sp-background-mobile img{position:absolute;inset:0;width:100%;height:calc(100% + 75px);object-fit:cover;} .sp-background-mobile .banner-text{position:absolute;top:70%;left:50%;transform:translate(-40%,-60%)!important;margin:0!important;padding:20px 14px;width:90%;text-align:center;color:#fff;z-index:2;} .sp-background-mobile .banner-text h2{font-size:16px;font-weight:300;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.4);} .sp-background-mobile .banner-text h1{font-size:22px;margin:6px 0;text-shadow:0 2px 6px rgba(0,0,0,.5);} .sp-background-mobile .banner-text p{font-size:14px;margin:4px 0 0;opacity:.9;} #ps-cats .row.productwrap{margin:0;} #ps-cats .category{padding:8px;} #ps-cats .spacer{margin-bottom:16px;border-radius:10px;} #ps-cats .spacer-img img{border-radius:10px 10px 0 0;} #ps-cats .overlay{padding:8px 4px;} #ps-cats .overlay h3{font-size:16px;} #ps-cats .category-desc{font-size:13px;line-height:1.45;padding:8px;} } /* Joomla Articles – CLS FIX (500x300) */ .mod-articles-image{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;background:#f3f4f6;} /* =========================== HUB PREMIUM CARDS ============================ */ .ps-hub-cards{margin:70px 0;} .ps-hub-cards h2{font-size:30px;margin-bottom:15px;text-align:center;color:#1b1b1b;} .ps-hub-cards .hub-intro{text-align:center;max-width:750px;margin:0 auto 40px auto;color:#555;font-size:16px;} .hub-section-title{font-size:22px;margin:60px 0 25px 0;color:#0d3b73;} .hub-grid{display:grid;gap:15px;} .hub-grid-4{grid-template-columns:repeat(4,1fr);} @media(max-width:1200px){.hub-grid-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:768px){.hub-grid-4{grid-template-columns:1fr;}} @media(max-width:768px){.ps-hub-cards{margin:20px 0;}} .hub-grid-highlight{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;} @media(max-width:768px){.hub-grid-highlight{grid-template-columns:1fr;}} .hub-card{display:block;background:#ffffff;padding:22px;border-radius:14px;text-decoration:none;border:1px solid #e5e7eb;box-shadow:0 8px 25px rgba(0,0,0,0.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;} .hub-card h4{font-size:18px;margin-bottom:10px;color:#0d3b73;} .hub-card p{font-size:14px;color:#666;line-height:1.6;margin:0;} .hub-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.08);border-color:#0d3b73;} .hub-card:hover h4{color:#0a2f5a;} .hub-card-service{background:linear-gradient(135deg,#0d3b73 0%,#144d94 100%);color:#fff !important;border:none;margin-bottom:70px;} .hub-card-service h4,.hub-card-service p{color:#fff;} .hub-card-service:hover{box-shadow:0 14px 35px rgba(0,0,0,0.15);color:#fff !important;} .hub-card-service:hover h4,.hub-card-service:hover p{color:#fff;} /* ========================================================= BOTTOM & FOOTER MENU CSS (CLEAN) ========================================================= */ /* ==================== FOOTER MAIN ==================== */ #ps-bottom-menu{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),linear-gradient(135deg,#15181c,#1c2026,#222831);padding:70px 20px 30px;border-top:1px solid rgba(56,189,248,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -20px 60px rgba(0,0,0,.65);color:#d1d5db;position:relative} #ps-bottom-menu::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} #ps-bottom-menu::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} /* ==================== FOOTER GRID ==================== */ .ps-bottom-inner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:56px} .ps-bottom-col{font-size:15px} /* ==================== TITLES ==================== */ .ps-bottom-col h4{font-size:26px;margin-bottom:26px;color:#f9fafb;font-weight:400;letter-spacing:.6px;position:relative} .ps-bottom-col h4::after{content:"";display:block;width:120px;height:2px;margin-top:10px;background:linear-gradient(90deg,#38bdf8,transparent);border-radius:2px} /* ==================== LINKS ==================== */ .ps-bottom-col a{display:block;font-size:15px;color:#cbd5e1;text-decoration:none;line-height:1.9;padding-left:0;border-left:2px solid transparent;transition:color .25s ease,padding .25s ease,border-color .25s ease} .ps-bottom-col a:hover{color:#fff;padding-left:10px;border-left-color:#38bdf8} /* ==================== DIVIDERS ==================== */ .ps-bottom-divider{width:100%;height:1px;border:none;background:linear-gradient(90deg,transparent,#38bdf8,transparent);margin:0 auto 35px} /* ==================== COMPANY INFO ==================== */ .ps-company-info address{display:block;font-style:normal;font-size:14px;line-height:1.75;color:#cbd5e1} .ps-company-info address div{display:flex;align-items:flex-start;gap:10px;margin-bottom:7px} .ps-company-info i{color:#38bdf8;font-size:14px;margin-top:3px;min-width:18px} .ps-company-info strong{color:#f9fafb;font-weight:600} /* ==================== LEGAL NOTE ==================== */ .ps-legal-note{position:relative;margin-top:20px;padding-top:16px;font-size:13px;line-height:1.6;color:#9ca3af} .ps-legal-note::before{content:"";position:absolute;top:0;left:0;width:60px;height:2px;background:#38bdf8} /* ==================== MAKE A WISH ==================== */ .ps-makeawish{text-align:center} .ps-makeawish-text{font-size:15px;line-height:1.65;color:#e5e7eb;margin-bottom:16px} .ps-makeawish-img img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .35s ease,box-shadow .35s ease} .ps-makeawish-img:hover img{transform:translateY(-6px) scale(1.01);box-shadow:0 0 0 2px rgba(56,189,248,.35),0 30px 70px rgba(0,0,0,.85)} /* ==================== DONATE BUTTON ==================== */ .ps-makeawish-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;margin-bottom:18px;padding:8px 20px;font-size:14px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:#f9fafb;background:linear-gradient(180deg,#1f2937,#111827);border:1.5px solid #38bdf8;border-radius:9px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.65);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ps-makeawish-btn:hover{transform:translateY(-3px);border-color:#7dd3fc;box-shadow:0 0 0 1px rgba(56,189,248,.35),0 0 26px rgba(56,189,248,.55),0 14px 42px rgba(0,0,0,.85)} /* ==================== BOTTOM SVG SEPARATOR ==================== */ .bottom-separator{margin-top:28px;text-align:left} .bottom-separator img{max-width:100%;height:auto;opacity:.9;filter:drop-shadow(0 0 6px rgba(56,189,248,.35))} /* ==================== RESPONSIVE ==================== */ @media(max-width:992px){.ps-bottom-inner{grid-template-columns:repeat(2,1fr);gap:44px}} @media(max-width:600px){#ps-bottom-menu{padding:65px 15px 55px}.ps-bottom-inner{grid-template-columns:1fr;gap:38px}.ps-bottom-col h4{text-align:center}.ps-bottom-col h4::after{margin-left:auto;margin-right:auto}.ps-bottom-col a{text-align:center;border-left:none}} /* ==================== FOOTER BOTTOM WRAPPER ==================== */ #ps-footer-bottom{width:100%;background:linear-gradient(135deg,#111418,#151a20)} /* ==================== FOOTER BOTTOM INNER ==================== */ .ps-footer-bottom-inner{max-width:1650px;margin:0 auto;padding:13px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:30px;font-size:13px;line-height:1.6;color:#cbd5e1} /* ==================== ECO BLOCK ==================== */ .ps-footer-eco{display:flex;align-items:flex-start;gap:14px;max-width:60%} .ps-footer-eco img{flex-shrink:0} .ps-footer-eco-text{color:#cbd5e1;font-size:14px;font-weight:400;letter-spacing:.2px;} .ps-eco-icon{flex-shrink:0;margin-top:2px;filter:drop-shadow(0 0 4px rgba(34,197,94,.25))} /* ==================== COPYRIGHT BLOCK ==================== */ .ps-footer-copy{text-align:right;white-space:nowrap;font-size:14px;font-family:'Raleway', Arial, sans-serif;font-weight:500;letter-spacing:.3px} .ps-footer-copy a{color:#38bdf8;text-decoration:none;font-weight:600} .ps-footer-copy a:hover{text-decoration:underline} /* ==================== RESPONSIVE ==================== */ @media(max-width:900px){.ps-footer-bottom-inner{flex-direction:column;align-items:center;text-align:center}.ps-footer-eco{max-width:100%}.ps-footer-copy{white-space:normal;text-align:center}} /* END - BOTTOM & FOOTER MENU CSS */ /* ============================================================ TOP INFO BAR – CLEAN CUSTOM STYLING ============================================================ */ /* ==================== TOP INFO BAR WRAPPER ==================== */ #ps-top-info-bar{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),linear-gradient(135deg,#1e232a,#262c35,#2e3540)} /* ==================== TOP INFO BAR BLUE LINE (BOTTOM) ==================== */ #ps-top-info-bar::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} /* ==================== INNER GRID ==================== */ .ps-top-info-inner{max-width:1600px;margin:0 auto;padding:10px 10px 5px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;color:#cbd5e1} /* ==================== COLUMN ==================== */ .ps-top-info-col{text-align:center} /* ==================== TITLE ==================== */ .ps-top-info-title{font-family:'Raleway',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:.4px;color:#f9fafb;margin-bottom:10px;position:relative} /* ==================== TITLE UNDERLINE ==================== */ .ps-top-info-title::after{content:"";display:block;width:120px;height:2px;margin:10px auto 0;background:linear-gradient(90deg,#38bdf8,transparent)} /* ==================== TEXT ==================== */ .ps-top-info-text{font-size:14px;line-height:1.6;color:#cbd5e1} /* ==================== ICONS ==================== */ .ps-top-info-text i{color:#38bdf8;margin-right:8px} /* ==================== RESPONSIVE ==================== */ @media(max-width:900px){.ps-top-info-inner{grid-template-columns:1fr;gap:22px;text-align:center}} /* ============================================================ MAIN MEGA MENU – CLEAN CUSTOM OVERRIDES (Linear backgrounds & blue lines preserved) ============================================================ */ /* ==================== HEADER BACKGROUND ==================== */ #sp-header, #sp-header .sp-megamenu-wrapper{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),linear-gradient(135deg,#14171c,#1c2026,#222831) !important; } /* ==================== HEADER ELECTRIC LINES ==================== */ #sp-header::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} #sp-header::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} /* ==================== TOP LEVEL TYPOGRAPHY (NO COLORS) ==================== */ .sp-megamenu-parent > li > a{font-family:'Raleway',Arial,sans-serif;letter-spacing:.3px;position:relative} /* ==================== TOP LEVEL HOVER (ELECTRIC) ==================== */ .sp-megamenu-parent > li > a:hover{color:#38bdf8 !important} /* ==================== ACTIVE UNDERLINE LOGIC ==================== */ .sp-megamenu-parent > li.sp-has-child > a::after{display:none !important} .sp-megamenu-parent > li:not(.sp-has-child).active > a::after, .sp-megamenu-parent > li:not(.sp-has-child).current-item > a::after{display:block !important} /* ==================== DROPDOWN LINKS TYPOGRAPHY ==================== */ .sp-dropdown-items li a{font-family:'Raleway',Arial,sans-serif} /* ==================== DROPDOWN ACTIVE LINK – READABILITY FIX ==================== */ .sp-dropdown-items li.active > a, .sp-dropdown-items li.current-item > a, .sp-dropdown-items li.current > a{color:#e6f6ff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 6px rgba(56,189,248,.35)} /* ==================== DROPDOWN HOVER ==================== */ .sp-dropdown-items li a:hover{color:#38bdf8;background:transparent} /* ==================== MEGA GROUP TITLES ==================== */ .sp-group-title{color:#f9fafb;font-weight:600;letter-spacing:.4px;position:relative} .sp-group-title::after{content:"";display:block;width:120px;height:2px;margin-top:8px;background:linear-gradient(90deg,#38bdf8,transparent)} /* ==================== MEGA SEPARATORS ==================== */ /* ===== JF MENU DIVIDER – REPLACE HELIX DEFAULT ===== */ .sp-dropdown-items .sp-menu-item.separator{margin:5px 0;padding:0;height:1px;list-style:none;border:0;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} .sp-dropdown-items .sp-menu-item.separator>a{display:none!important} .hidden-item {display:none!important;} /* ==================== OFFCANVAS TOGGLER ICON ==================== */ #offcanvas-toggler i{color:#38bdf8} /* ==================== STICKY HEADER – DROPDOWN ALIGNMENT FIX ==================== */ #sp-header.sticky .sp-dropdown{margin-top:0} #sp-header.sticky .sp-dropdown-main{top:auto} /* ============================================================ MOBILE LOGO BAR – LINEAR ELECTRIC STYLE (Only for mobile – #sp-mobile-logo-menu) ============================================================ */ /* MAIN WRAPPER */ #sp-mobile-logo-menu{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),linear-gradient(135deg,#15181c,#1c2026,#222831); padding:16px 0; } /* ELECTRIC TOP LINE */ #sp-mobile-logo-menu::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,#38bdf8,transparent); } /* LOGO TEXT */ #sp-mobile-logo-menu .logo a{ font-family:'Raleway',Arial,sans-serif; font-size:30px; font-weight:300; letter-spacing:.6px; color:#f9fafb; text-decoration:none; } /* LOGO HOVER EFFECT */ #sp-mobile-logo-menu .logo a:hover{ color:#38bdf8; text-shadow:0 0 10px rgba(56,189,248,.45); } /* CENTER ALIGN FIX */ #sp-mobile-logo-menu .sp-column{ text-align:center; } /* ============================================================ TEXT LOGO – PREMIUM ELECTRIC (CLEAN) ============================================================ */ /* ==================== LOGO LINK ==================== */ #sp-header .logo a{font-family:'Raleway',Arial,sans-serif;font-size:38px;font-weight:400;letter-spacing:.6px;color:#f9fafb;text-decoration:none;transition:color .25s ease,text-shadow .25s ease} /* ==================== LOGO HOVER ==================== */ #sp-header .logo a:hover{color:#38bdf8;text-shadow:0 0 12px rgba(56,189,248,.55)} /* ==================== LOGO ALIGNMENT ==================== */ #sp-header .logo{line-height:1} /* ============================================================ TOP BAR (sp-top-bar) – CLEAN CUSTOM OVERRIDES ============================================================ */ /* ==================== TOP BAR BACKGROUND ==================== */ #sp-top-bar{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),linear-gradient(135deg,#1b1f25,#222831,#2a3038) !important;color:#cbd5e1} /* ==================== TOP BAR ELECTRIC LINE (TOP) ==================== */ #sp-top-bar::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent)} /* ==================== TOP BAR TYPOGRAPHY ==================== */ #sp-top-bar .sp-column{color:#cbd5e1;font-size:13px;letter-spacing:.3px} /* ==================== TOP BAR – CONTACT LINKS ONLY ==================== */ #sp-top-bar .sp-contact-info a{color:#cbd5e1 !important;text-decoration:none;} #sp-top-bar .sp-contact-info a:hover{color:#38bdf8 !important;} /* ==================== TOP BAR ICONS ==================== */ #sp-top-bar i{color:#38bdf8;margin-right:6px} /* ==================== CONTACT INFO LIST ==================== */ #sp-top-bar .sp-contact-info{display:flex;gap:18px;align-items:center} #sp-top-bar .sp-contact-info li{color:#cbd5e1;font-size:13px;white-space:nowrap} /* ==================== TOP BAR – LOGIN LINK ==================== */ #sp-top-bar .ap-login > a{color:#7dd3fc !important;font-weight:500;} #sp-top-bar .ap-login > a:hover{color:#38bdf8 !important;} #sp-top-bar .ap-login{padding-right:20px;} /* ==================== HELIX BORDER RESET ==================== */ #sp-top-bar{border:none !important} #sp-top-bar .row{border:none !important} /* ========================= TOP2 VERTICAL CENTER FIX ========================= */ #sp-top-bar .row{ align-items:center; } /* ============================================================ TOP BAR – CONTACT INFO STACK (MOBILE ≤ 640px) ============================================================ */ @media(max-width:640px){ /* TOP BAR ROW → ΚΑΘΕΤΟ STACK */ #sp-top-bar .row{display:flex;flex-direction:column;align-items:center} /* LOGIN → ΔΙΚΗ ΤΟΥ ΓΡΑΜΜΗ, ΚΕΝΤΡΟ */ #sp-top-bar .ap-login{display:block;width:100%;text-align:center;margin:8px 0} /* CONTACT LIST → ΚΑΘΕΤΗ ΣΤΟΙΧΙΣΗ */ #sp-top-bar .sp-contact-info{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;margin:0} /* CONTACT ITEM → ΜΙΑ ΕΓΓΡΑΦΗ ΑΝΑ ΓΡΑΜΜΗ */ #sp-top-bar .sp-contact-info li{display:block;text-align:center;font-size:12px;white-space:normal} /* ΣΕΙΡΑ ΕΜΦΑΝΙΣΗΣ */ #sp-top-bar .sp-contact-phone{order:1} #sp-top-bar .sp-contact-mobile{order:2} #sp-top-bar .sp-contact-time{order:3} /* ICON SPACING */ #sp-top-bar .sp-contact-info i{margin-right:6px} } #sp-top-bar {padding:5px 50px 5px 40px !important;} /* ========================================================= PACKAGING HERO – CLEAN (same behavior, no duplicates) ========================================================= */ /* HERO full width */ .pb-packaging-hero{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:75px 20px;background:linear-gradient(135deg,#041428 0%,#07224c 32%,#0d3b73 55%,#07224c 72%,#041428 100%);} /* SVG box */ .pb-packaging-hero .pb-hero-svg{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto;position:relative;z-index:1;} /* Background depth */ .pb-packaging-hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:linear-gradient(135deg,#041428 0%,#07224c 22%,#0d3b73 40%,#07224c 52%,#041428 100%);pointer-events:none;z-index:1;} /* Content layer */ .pb-packaging-hero>*{position:relative;z-index:2;} /* Mobile padding */ @media(max-width:640px){.pb-packaging-hero{padding:40px 16px;}} /* Mobile svg width */ @media(max-width:640px){.pb-packaging-hero .pb-hero-svg{max-width:100%;}} /* ========================================================= PACKAGING HERO – MOBILE SVG (isolated, mobile-first) ========================================================= */ /* HERO full width – mobile */ .pb-packaging-hero-m { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 22px 12px 26px; background: linear-gradient(135deg,#041428 0%,#07224c 30%,#0d3b73 55%,#07224c 75%,#041428 100%); overflow: hidden; } /* Background depth layer */ .pb-packaging-hero-m::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top,rgba(110,203,255,.18),transparent 60%), linear-gradient(135deg,#041428 0%,#07224c 32%,#0d3b73 55%,#07224c 72%,#041428 100%); pointer-events: none; z-index: 1; } /* SVG container */ .pb-packaging-hero-m .pb-hero-svg-m { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; position: relative; z-index: 2; } /* SVG TEXT – MOBILE */ .pb-hero-title-m { font-family: 'Raleway',sans-serif; font-weight: 800; font-size: 48px; fill: url(#pbHeroGradientM); stroke: url(#pbHeroGradientM); stroke-width: 1.6; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: pbHeroDrawM 3.4s ease-in-out forwards; } .pb-hero-subtitle-m { font-family: 'Raleway',sans-serif; font-weight: 500; font-size: 24px; fill: #cfe9ff; opacity: 0; animation: pbHeroFadeUpM 1.2s ease forwards; animation-delay: 2.1s; } .pb-hero-tagline-m { font-family: 'Raleway',sans-serif; font-weight: 400; font-size: 20px; fill: #9fdcff; opacity: 0; animation: pbHeroFadeUpM 1.2s ease forwards; animation-delay: 2.5s; } /* SMALL DEVICES SAFETY */ @media (max-width: 380px) { .pb-hero-title-m { font-size: 42px; } .pb-hero-subtitle-m { font-size: 16px; } .pb-hero-tagline-m { font-size: 14px; } } @media (max-width: 330px) { .pb-hero-title-m { font-size: 38px; } } /* ================= SEO CATEGORY BLOCK (TABLE + EXPANDABLE) ================= */ .ps-compare-table{width:100%;border-collapse:collapse;margin:30px 0;font-size:14px} .ps-compare-table th,.ps-compare-table td{border:1px solid #eef2f6;padding:12px;text-align:left} .ps-compare-table th{background:#f4f8fd;color:#0d3b73} .seo-expandable{position:relative;margin:30px 0} .seo-intro{background:#f8fafc;padding:22px;border-radius:14px;border:1px solid #e5e7eb} .seo-intro p{margin-bottom:12px;line-height:1.7} .seo-toggle{display:inline-flex;align-items:center;gap:8px;background:#0d3b73;color:#fff;border:none;padding:10px 20px;border-radius:30px;cursor:pointer;font-weight:600;transition:all .25s ease;position:sticky;top:20px;z-index:0} .seo-toggle:hover{background:#0a2f5a} .seo-arrow{display:flex;transition:transform .3s ease} .seo-expandable.active .seo-arrow{transform:rotate(180deg)} .seo-content{display:none;margin-top:25px;line-height:1.8} .seo-expandable.active .seo-content{display:block} .seo-close-floating{position:sticky;bottom:20px;margin-top:40px;background:#0d3b73;color:#fff;border:none;padding:10px 20px;border-radius:30px;cursor:pointer;font-weight:600;box-shadow:0 10px 25px rgba(0,0,0,.15);transition:all .25s ease;display:none;align-items:center;gap:8px} .seo-close-floating::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-135deg);transition:transform .3s ease} .seo-close-floating:hover{background:#0a2f5a} .seo-expandable.active .seo-close-floating{display:inline-flex} /* ================= PS QUALITY BLOCK ================= */ .ps-quality-block{margin:60px 0;} .ps-quality-block h2{font-size:28px;margin-bottom:15px;font-weight:700;} .ps-quality-block h3{margin-top:40px;font-size:22px;font-weight:600;} .ps-quality-block p{line-height:1.7;margin-bottom:15px;} .ps-quality-badges{background:#f7f7f7;padding:15px;border-left:4px solid #1b75d0;margin:20px 0;display:flex;flex-wrap:wrap;gap:15px;font-size:15px;} .ps-tick{color:#1b75d0;font-weight:700;margin-right:5px;} .ps-quality-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px;} .ps-quality-table th{background:#111;color:#fff;text-align:left;padding:12px;} .ps-quality-table td{padding:12px;border:1px solid #ddd;} .ps-quality-table tr:nth-child(even){background:#f9f9f9;} .ps-quality-table tr:hover{background:#f1f6ff;transition:.2s ease;} .ps-quality-table strong{color:#1b75d0;} .ps-quality-cta{margin-top:25px;} .ps-quality-cta a{background:#1b75d0;color:#fff!important;padding:12px 28px;border-radius:4px;font-weight:600;text-decoration:none;transition:.3s ease;display:inline-block;} .ps-quality-cta a:hover{background:#0f4f94;transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.15);} @media(max-width:768px){ .ps-quality-table th,.ps-quality-table td{font-size:13px;padding:8px;} .ps-quality-block h2{font-size:22px;} .ps-quality-block h3{font-size:18px;} .ps-quality-cta a{width:100%;text-align:center;} } .ps-product-image{position:relative;} .ps-badge{ position:absolute; top:12px; left:12px; background:#a46a2a; color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border-radius:3px; letter-spacing:1px; text-transform:uppercase; box-shadow:0 4px 10px rgba(0,0,0,.25); z-index:10; } .ps-quote-btn{ display:inline-block; background:#ff6a00; color:#fff; padding:10px 20px; border-radius:6px; font-weight:700; font-size:16px; text-decoration:none; letter-spacing:.3px; } .ps-quote-btn:hover{ background:#e55c00; color:#ffffff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.2); } .ps-quote-btn:active{ transform:translateY(0); box-shadow:0 2px 4px rgba(0,0,0,0.2); } .ps-product-specs{ padding-left:18px; margin-bottom:10px; } .ps-product-specs li{ margin-bottom:4px; font-size:14px; } .ps-print-cta{ display:inline-block; background:#1565c0; color:#fff !important; padding:14px 26px; border-radius:8px; font-size:16px; font-weight:500; text-decoration:none !important; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:all .2s ease; } .ps-print-cta:hover{ background:#0d47a1; color:#fff !important; text-decoration:none; } .ps-field textarea#product{ width:100%; line-height:1.3; padding:5px 10px 10px 10px !important; font-size:14px; border:1px solid #ddd; border-radius:4px; resize:none; overflow:hidden; box-sizing:border-box; } .ps-field textarea#product{ min-height:50px !important; max-height:80px !important; height:auto !important; } .ps-field #product{ font-weight:600; line-height:1.8; } .ps-field #product::first-line{ font-weight:400; } /* CART SUMMARY */ .ps-cart-summary{ display:inline-block; min-width:500px; max-width:600px; margin-top:15px; padding:12px 18px; background:#f8fafc; border:1px solid #1d6db3; border-radius:8px; font-size:15px; line-height:1.4; box-shadow:0 0 10px rgba(29,109,179,0.35), 0 0 2px rgba(29,109,179,0.6); } .ps-cart-headline{ font-size:14px; font-weight:500; color:#1d6db3; margin:0 0 8px 0; letter-spacing:0.3px; } .ps-cart-summary-inner{ display:flex; align-items:center; gap:10px; } .ps-cart-icon{ font-size:20px; } .ps-cart-line{ font-weight:500; color:#1f2937; margin-bottom:3px; } .ps-cart-total strong{ font-size:16px; color:#16a34a; font-weight:600; } .ps-vat{ font-size:12px; color:#6b7280; margin-left:4px; } /*Amesa diathesimo*/ /* AVAILABILITY BOX */ .availability{ border-radius:8px; border:1px solid #1d6db3; box-shadow:0 0 10px rgba(29,109,179,0.35), 0 0 2px rgba(29,109,179,0.6); background:#f8fafc; padding:8px 14px; text-align:center; margin:15px 0 8px 0; } /* CATEGORY LIST */ .category-view .availability{ width:auto; min-width:unset; } /* PRODUCT DETAILS */ .productdetails-view .availability{ min-width:400px; max-width:500px; } .quantity-box .quantity-input, .cart-summary .quantity-input { margin-left:3px; } span.quantity-controls i{ color:#1d6db3!important; } span.quantity-controls:hover i{ color:#155a94!important; } /* proionta syskevasias Module Page*/ .ps-shop-seo{ max-width:1100px; margin:80px auto 40px; padding:40px; background:#fff; border-radius:14px; box-shadow:0 10px 35px rgba(0,0,0,0.08); } .ps-seo-title{ font-size:32px; margin-bottom:20px; color:#1c2b3a; } .ps-seo-intro p{ font-size:16px; line-height:1.7; color:#444; margin-bottom:15px; } .ps-seo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:40px; } .ps-seo-block h2{ font-size:20px; margin-bottom:10px; color:#0d3b73; } .ps-seo-block p{ font-size:15px; line-height:1.6; color:#555; } .ps-seo-block ul{ margin-top:10px; padding-left:18px; } .ps-seo-block li{ margin-bottom:6px; font-size:14px; } .ps-seo-benefits{ margin-top:50px; padding:30px; background:#f7f9fc; border-radius:10px; } .ps-benefits-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; list-style:none; padding:0; } .ps-benefits-list li{ background:#fff; padding:12px 16px; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,0.05); font-size:14px; } .ps-seo-closing{ margin-top:40px; font-size:16px; line-height:1.7; color:#444; } /* CART SUMMARY (MOBILE) */ @media(max-width:768px){.ps-cart-summary{min-width:100%;max-width:100%;padding:10px 12px;font-size:14px;}} /* CART SUMMARY INNER */ @media(max-width:768px){.ps-cart-summary-inner{flex-direction:column;align-items:flex-start;gap:4px;}} /* CART ICON */ @media(max-width:768px){.ps-cart-icon{font-size:18px;}} /* CART TOTAL */ @media(max-width:768px){.ps-cart-total strong{font-size:15px;}} /* AVAILABILITY PRODUCT */ @media(max-width:768px){.productdetails-view .availability{min-width:100%;max-width:100%;font-size:14px;padding:8px 10px;}} /* AVAILABILITY CATEGORY */ @media(max-width:768px){.category-view .availability{font-size:13px;padding:6px 10px;}} /* QUANTITY INPUT */ @media(max-width:768px){.quantity-box .quantity-input,.cart-summary .quantity-input{width:60px;margin-left:2px;}} /* LOGO DESKTOP */ #sp-logo .logo a{font-size:32px;font-weight:400;color:#e2f1ff;letter-spacing:0.4px;} /* LOGO TABLET */ @media(max-width:992px){#sp-logo .logo a{font-size:20px;}} /* LOGO MOBILE LINK */ @media(max-width:640px){#sp-logo .logo a{font-size:18px;line-height:1.2;display:block;}} /* LOGO MOBILE WRAPPER */ @media(max-width:640px){#sp-logo .logo{margin:0;}} /* VIRTUEMART LEFT MENU / SIDE MENU */ .VMmenu{background:#ffffff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 10px 10px;overflow:hidden} /* VIRTUEMART LEFT MENU TITLE ONLY */ #sppb-addon-64f63b8b-0757-47d5-be6f-6b859a417523 .sppb-addon-title{ background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)), linear-gradient(135deg,#1b1f25,#222831,#2a3038) !important; color:#ffffff !important; padding:14px 16px; border-radius:8px 8px 0 0; margin-bottom:0; } .VMmenu li a{display:block;padding:12px 16px;color:#1f2937;background:#ffffff;border-bottom:1px solid #f1f5f9;position:relative;transition:all .25s ease} /* SUBMENU BASE */ .VMmenu ul{background:#f8fafc} .VMmenu ul li a{padding-left:22px} /* COUNTER */ .VMmenu .nmb_products{color:#6b7280} /* HOVER */ .VMmenu li a:hover{background:#edf5fc!important;color:#1f2937!important} .VMmenu li a:hover .nmb_products{color:#1d6db3} .VMmenu li a:hover::before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:#1d6db3} /* PARENT ACTIVE */ .VMmenu li.active>a{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),linear-gradient(135deg,#343b47,#3d4451,#464e5c);color:#e5e7eb!important} .VMmenu li.active>a::before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:#1d6db3} .VMmenu li.active>a .nmb_products{color:#cbd5e1} /* REAL ACTIVE */ .VMmenu li.active ul li.active>a{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),linear-gradient(135deg,#0f172a,#1e293b,#111827);color:#fff!important} /* ACTIVE HOVER */ .VMmenu li.active>a:hover{color:#444!important} .VMmenu li.active ul li.active > a:hover{color:#444!important} /* ACTIVE ICON */ .VMmenu li.active .vmmenu-toggler .open-icon{color:#f1f5f9!important} /* VM MENU BORDER BOX (premium glow) */ .VMmenu{background:#ffffff;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,0.08),0 0 10px rgba(29,109,179,0.08);} /* LEFT SIDEBAR SPACING */ .sp-lr{padding-right:20px;} @media(max-width:991px){.sp-lr{padding-right:0;}} /* WRAP σαν card */ .related-category-view{ background:#ffffff; border:1px solid #d1d1d1; border-radius:10px; padding:25px 15px 15px; margin-top:20px; position:relative; } /* WRAP σαν card */ .related-category-view{ background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:25px 15px 15px; margin-top:20px; position:relative; } /* HEADER (light clean) */ .related-category-view::before{ content:"Επιλέξτε Κατηγορία"; position:absolute; top:-20px; left:15px; background:#ffffff; color:#1d6db3; padding:4px 10px; font-size:15px; font-weight:600; border-radius:6px; border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,0.06); } /* HEADER (dark όπως left title) .related-category-view::before{ content:"Επιλέξτε Υποκατηγορία"; position:absolute; top:-14px; left:15px; background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)), linear-gradient(135deg,#1b1f25,#222831,#2a3038); color:#ffffff; border:1px solid rgba(255,255,255,0.08); color:#ffffff; padding:3px 7px; font-size:15px; font-weight:600; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.15); }*/ /* PAGE TITLE CLEAN SETUP */ /* FORCE LIGHT BACKGROUND */ .sp-page-title-no-img{ background:#ffffff !important; box-shadow:none !important; } /* FULL WIDTH FIX */ .ps-page-title .container{ max-width:100% !important; width:100% !important; padding-left:50px; padding-right:50px; } /* H1 GRADIENT */ .ps-page-title h1{ font-weight:600; background:linear-gradient(135deg,#1d6db3,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } /* SUBTITLE */ .ps-page-title .page_subtitle{ color:#64748b !important; } .ps-hidden-desc{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .ps-sku{ font-size:12px; color:#6b7280; margin:6px 0 8px; line-height:1.4; } .ps-sku span{ font-weight:500; color:#222; } .category-view .row .spacer .spacer-inner h2, .browse-view .row .spacer .spacer-inner h2{ font-size:130% !important; line-height:1.25; font-weight:500; } @media (max-width:768px){ .category-view .row .spacer .spacer-inner h2{ font-size:100% !important; } } /* B2B MODULE*/ .ps-b2b-list{ max-width:1300px; margin:0 auto; } .ps-b2b-filters{ max-width:1200px; margin:0 auto 40px auto; display:flex; flex-wrap:wrap; gap:10px; padding:10px; background:#f1f5f9; border-radius:10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } /* FILTER BUTTONS */ .ps-b2b-filters button{ background:transparent; border:none; padding:10px 18px; border-radius:6px; font-weight:600; font-size:16px; cursor:pointer; color:#333; transition:all .25s; position:relative; } .ps-filter-title{ font-size:15px; font-weight:600; color:#333; padding:8px 10px; margin-bottom:6px; border-bottom:1px solid #ddd; width:100%; } /* HOVER */ .ps-b2b-filters button:hover{ background:#e8f2fc; color:#1565c0; } /* ACTIVE TAB */ .ps-b2b-filters button.active{ background:#1e88e5; color:#fff; box-shadow: 0 4px 10px rgba(30,136,229,0.3); } /* SMALL MENU EFFECT */ .ps-b2b-filters button::after{ content:""; position:absolute; bottom:-6px; left:50%; width:0; height:2px; background:#1e88e5; transition:.25s; transform:translateX(-50%); } .ps-b2b-filters button:hover::after{ width:40%; } .ps-b2b-filters button.active::after{ display:none; } /* CATEGORY TITLE */ .ps-b2b-category{ margin:40px 0 15px; font-size:22px; border-bottom:2px solid #eee; padding-bottom:8px; } /* PRODUCT ROW */ .ps-b2b-row{ display:flex; gap:25px; padding:20px; border-bottom:1px solid #eee; align-items:center; transition:background .2s; } .ps-b2b-row:hover{ background:#fafafa; } /* IMAGE */ .ps-b2b-image img{ width:220px; height:auto; border-radius:6px; } /* INFO */ .ps-b2b-info{ flex:1; } .ps-b2b-info h3{ margin-bottom:6px; font-size:20px; } .ps-b2b-info a{ text-decoration:none; color:#222; } .ps-b2b-info a:hover{ color:#1e88e5; } .ps-b2b-desc{ font-size:14px; color:#555; } /* QUOTE BUTTON */ .ps-quote-btn{ display:inline-block; background:#1e88e5; color:#fff; padding:10px 16px; border-radius:6px; font-weight:400; text-decoration:none; transition:all .2s; } .ps-quote-btn:hover{ background:#1565c0; } .ps-b2b-title{ margin-top:-100px; margin-left:310px; margin-bottom:75px; } @media(max-width:1200px){ .ps-b2b-title{ margin-left:40px; } } @media(max-width:768px){ .ps-b2b-title{ margin-left:20px; } } .ps-b2b-search{ max-width:1200px; margin:0 auto 45px auto; display:flex; gap:5px; align-items:center; } .ps-b2b-search input{ width:380px; padding:20px 16px; border-radius:6px; border:1px solid #ccc; font-size:15px; transition:all .2s; } .ps-b2b-search input:focus{ outline:none; border-color:#1e88e5; box-shadow:0 0 0 2px rgba(30,136,229,0.15); } .ps-b2b-search button{ background:#1e88e5; color:#fff; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; } .ps-b2b-search button:hover{ background:#1565c0; } /* ====================================================== CUSTOM PRODUCT BOX ====================================================== */ .ps-custom-product{ max-width:1200px; margin:0 auto 35px auto; padding:22px; border:1px solid #e5e5e5; border-radius:8px; display:flex; justify-content:space-between; align-items:center; background:#fafafa; } .ps-custom-text h3{ margin:0 0 6px 0; font-size:18px; font-weight:600; } .ps-custom-text p{ margin:0; font-size:14px; color:#555; } /* BUTTON */ .ps-custom-btn{ background:#1e88e5; color:#fff; padding:13px 20px; border-radius:6px; text-decoration:none; font-weight:500; transition:all .2s; } .ps-custom-btn:hover{ background:#1565c0; color:#fff; text-decoration:none; } /* ====================================================== CUSTOM DIMENSION BOX ====================================================== */ .ps-custom-dimension{ max-width:1200px; margin:0 auto 40px auto; padding:25px; border-radius:8px; background:#f8fafc; border:1px solid #e5e7eb; display:flex; flex-direction:column; gap:18px; } /* ROW STRUCTURE */ .ps-dim-row{ display:grid; grid-template-columns: 1fr 200px auto; align-items:center; gap:15px; } /* TEXT */ .ps-dim-text h3{ margin:0; font-size:18px; font-weight:600; color:#1565c0; } .ps-dim-text p{ margin:0; font-size:14px; color:#555; } /* INPUT */ .ps-dim-row input{ width:100%; height:44px; padding:0 14px; border-radius:6px; border:1px solid #ccc; font-size:15px; box-sizing:border-box; } /* BUTTON */ .ps-dim-row button{ height:44px; padding:0 18px; background:#1e88e5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:500; transition:all .2s; } .ps-dim-row button:hover{ background:#1565c0; } .ps-print-info{ max-width:1200px; margin:0 auto 40px auto; padding:18px 22px; background:#f1f7fd; border-left:4px solid #1565c0; font-size:14px; line-height:1.6; color:#333; border-radius:4px; } .ps-print-info strong{ color:#1565c0; } .ps-b2b-filters{ transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } /* ========================= B2B STICKY — PREMIUM DARK ========================= */ .b2b-sticky{ position:fixed; top:150px; left:calc(43% - 800px); width:250px; display:flex; flex-direction:column; gap:6px; padding:16px; /* ίδιο ύφος με site */ background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)), linear-gradient(135deg, #1b1f25, #222831, #2a3038); color:#cbd5e1; border-radius:12px; border:1px solid rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); z-index:1000; } /* ========================= STICKY FILTER TITLE (WOW) ========================= */ .b2b-sticky .ps-filter-title{ position:relative; color:#e2e8f0; font-weight:600; font-size:16px; padding:12px 14px; margin-bottom:10px; border-radius:8px; /* layered background */ background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0)), linear-gradient(135deg,#1b1f25,#222831,#2a3038); /* subtle glow */ box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); letter-spacing:0.3px; border:1px solid rgba(255,255,255,0.09); } /* ACCENT BAR (πάνω) */ .b2b-sticky .ps-filter-title::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,#1e88e5,#42a5f5); border-radius:8px 8px 0 0; } /* UNDERLINE */ .b2b-sticky .ps-filter-title::after{ content:""; display:block; margin-top:8px; width:60px; height:2px; background:linear-gradient(90deg,#1e88e5,#42a5f5); border-radius:2px; opacity:0.9; } .b2b-sticky .ps-filter-title{ text-shadow:0 0 6px rgba(30,136,229,0.3); } /* ========================= STICKY BUTTON BASE ========================= */ .b2b-sticky button{ position:relative; } /* ========================= ACTIVE BUTTON (FULL BORDER) ========================= */ .b2b-sticky button.active{ background:transparent !important; color:#ffffff; box-shadow:none !important; border:2px solid rgba(30,136,229,0.6); border-radius:6px; } /* LEFT BORDER INDICATOR */ .b2b-sticky button.active::before{ opacity:1; transform:scaleY(1); } /* ========================= UNDERLINE ========================= */ .b2b-sticky button::after{ content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:0; height:2px; background:#1e88e5; transition:.25s; border-radius:2px; } /* HOVER + ACTIVE */ .b2b-sticky button:hover::after, .b2b-sticky button.active::after{ width:40%; } /* ========================= BUTTON BASE ========================= */ .b2b-sticky button{ width:100%; text-align:left; background:transparent; border:none; color:#cbd5e1; padding:10px 12px 10px 14px; font-size:14px; font-weight:500; cursor:pointer; border-radius:6px; /* για left border */ position:relative; transition:all .25s ease; } /* ========================= LEFT BORDER (BASE) ========================= */ .b2b-sticky button::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:#1e88e5; border-radius:2px; opacity:0; transform:scaleY(0.5); transition:all .25s ease; } /* ========================= HOVER ========================= */ .b2b-sticky button:hover{ background:rgba(255,255,255,0.06); color:#ffffff; transform:translateX(4px); } /* left border εμφανίζεται */ .b2b-sticky button:hover::before{ opacity:1; transform:scaleY(1); } /* ========================= ACTIVE ========================= */ .b2b-sticky button.active{ background:linear-gradient(135deg,#1e88e5,#1565c0); color:#fff; box-shadow:0 4px 14px rgba(30,136,229,0.35); } /* left border ΜΟΝΙΜΟ */ .b2b-sticky button.active::before{ opacity:1; transform:scaleY(1); } /* ========================= SUBTLE TOP LIGHT LINE ========================= */ .b2b-sticky::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, #38bdf8, transparent); opacity:0.3; } .ps-b2b-category{ scroll-margin-top:120px; } .ps-b2b-action{ display:flex; flex-direction:column; align-items:flex-start; } .ps-admin-price{ margin-top:10px; padding:10px 14px; background:#f1f5f9; border-left:3px solid #7ed321; border-right:3px solid #7ed321; font-size:14px; line-height:1.4; color:#111827; border-radius:4px; max-width:230px; } /* MOBILE RESPONSIVE */ @media (max-width: 900px){ /* FILTER MENU */ .ps-b2b-filters{ flex-direction:row; overflow-x:auto; white-space:nowrap; gap:6px; padding:8px; } /* disable sidebar mode */ .b2b-sticky{ position:sticky; top:75px; left:auto; width:100%; flex-direction:row; overflow-x:auto; } /* buttons */ .ps-b2b-filters button{ flex:0 0 auto; font-size:13px; padding:8px 14px; } /* PRODUCT ROW */ .ps-b2b-row{ flex-direction:column; align-items:flex-start; gap:12px; } /* IMAGE */ .ps-b2b-image img{ width:100%; max-width:260px; } /* ACTION BUTTON */ .ps-b2b-action{ width:100%; } .ps-quote-btn{ display:block; text-align:center; width:100%; } } .ps-divider{ border:0; height:2px; background:linear-gradient(to right, transparent, #4169e1, transparent); margin:12px 0; width:100%; } /* END B2B MODULE*/ /* Ask offer page */ .ps-b2b-wrapper .ps-tabs{max-width:1200px;margin:50px auto;padding:28px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),linear-gradient(135deg,#1b1f25,#222831,#2a3038);border:1px solid rgba(255,255,255,.05);box-shadow:0 10px 35px rgba(0,0,0,.35)}.ps-b2b-wrapper .ps-tabs-header{font-size:18px;font-weight:600;color:#e2e8f0;margin-bottom:18px;padding-bottom:10px;position:relative}.ps-b2b-wrapper .ps-tabs-header:after{content:"";position:absolute;bottom:0;left:0;width:70px;height:2px;background:linear-gradient(90deg,#1e88e5,#42a5f5);border-radius:2px}.ps-b2b-wrapper .ps-tabs-nav{display:flex;gap:10px;margin-bottom:22px}.ps-b2b-wrapper .ps-tabs-nav button{flex:1;padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.03);color:#cbd5e1;font-weight:500;cursor:pointer;transition:.25s}.ps-b2b-wrapper .ps-tabs-nav button:hover{background:rgba(30,136,229,.08);color:#fff}.ps-b2b-wrapper .ps-tabs-nav button.active{background:transparent;color:#fff;border:1px solid rgba(30,136,229,.6);box-shadow:0 0 0 1px rgba(30,136,229,.2),0 6px 15px rgba(30,136,229,.15)}.ps-b2b-wrapper .ps-tab-content{display:none;flex-direction:column;gap:14px}.ps-b2b-wrapper .ps-tab-content.active{display:flex}.ps-b2b-wrapper .ps-dim-text h3{color:#fff;font-size:17px;margin:0 0 5px}.ps-b2b-wrapper .ps-dim-text p{color:#9ca3af;font-size:14px;margin:0}.ps-b2b-wrapper .ps-tab-content input{height:44px;padding:0 14px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;transition:.2s}.ps-b2b-wrapper .ps-tab-content input:focus{outline:none;border-color:#1e88e5;box-shadow:0 0 0 2px rgba(30,136,229,.15)}.ps-b2b-wrapper .ps-tab-content button{height:44px;border:none;border-radius:6px;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;font-weight:500;cursor:pointer;transition:.25s}.ps-b2b-wrapper .ps-tab-content button:hover{background:linear-gradient(135deg,#42a5f5,#1e88e5);transform:translateY(-1px);box-shadow:0 6px 18px rgba(30,136,229,.35)}.ps-b2b-wrapper .ps-print-info{margin-top:18px;padding:16px 18px;border-radius:8px;background:rgba(30,136,229,.06);border:1px solid rgba(30,136,229,.15);color:#cbd5e1;font-size:14px;line-height:1.6;position:relative}.ps-b2b-wrapper .ps-print-info:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#1e88e5,#42a5f5);border-radius:3px}.ps-b2b-wrapper .ps-print-title{font-weight:600;color:#fff;margin-bottom:8px;font-size:15px}.ps-b2b-wrapper .ps-print-info p{margin:6px 0}.ps-b2b-wrapper .ps-print-info strong{color:#fff} /* Ask Form */ .ps-b2b-form{max-width:720px;margin:50px auto;padding:30px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),linear-gradient(135deg,#1b1f25,#222831,#2a3038);border:1px solid rgba(255,255,255,.05);box-shadow:0 10px 35px rgba(0,0,0,.35)}.ps-quote-intro{text-align:center;margin-bottom:30px}.ps-quote-intro h1{font-size:26px;font-weight:600;color:#fff;margin-bottom:10px}.ps-quote-intro p{font-size:14px;color:#9ca3af;line-height:1.6}.ps-field{margin-bottom:16px}.ps-field label{display:block;font-weight:500;color:#cbd5e1;margin-bottom:6px;font-size:14px}.ps-b2b-form input,.ps-b2b-form select,.ps-b2b-form textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;font-size:14px;transition:.2s}.ps-b2b-form input:focus,.ps-b2b-form select:focus,.ps-b2b-form textarea:focus{outline:none;border-color:#1e88e5;box-shadow:0 0 0 2px rgba(30,136,229,.15)}.ps-b2b-form textarea{min-height:110px;resize:vertical}.ps-print-note{font-size:13px;color:#9ca3af;margin-top:6px}.ps-custom-note{margin-top:12px;padding:14px 16px;border-radius:8px;background:rgba(30,136,229,.08);border:1px solid rgba(30,136,229,.2);color:#cbd5e1;font-size:14px;line-height:1.6;position:relative}.ps-custom-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#1e88e5,#42a5f5);border-radius:3px}.ps-submit{width:100%;height:46px;border:none;border-radius:6px;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:.25s}.ps-submit:hover{background:linear-gradient(135deg,#42a5f5,#1e88e5);transform:translateY(-1px);box-shadow:0 6px 18px rgba(30,136,229,.35)}.quote-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:9999}.quote-box{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),#1f2933;padding:35px;border-radius:10px;text-align:center;width:300px;border:1px solid rgba(255,255,255,.08)}.loader{border:4px solid rgba(255,255,255,.1);border-top:4px solid #1e88e5;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:auto;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#quoteStatus{color:#e2e8f0;font-size:14px}@media(max-width:768px){.ps-b2b-form{padding:20px}.ps-quote-intro h1{font-size:22px}.ps-quote-intro p{font-size:13px}}.ps-b2b-form select{background:rgba(255,255,255,.04);color:#fff;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;padding-right:35px}.ps-b2b-form select option{background:#1f2933;color:#fff} /* ========================= TOP CTA (ONLY BUTTON) ========================= */ .ps-top-cta{ display:flex; justify-content:flex-end; padding:6px 10px; } /* BUTTON */ .ps-top-btn{ background:linear-gradient(135deg,#7ed321,#6ac11c); color:#fff; padding:3px 10px; border-radius:6px; font-size:13px; font-weight:500; text-decoration:none; transition:all .25s ease; box-shadow: 0 4px 10px rgba(126,211,33,0.25); position:relative; overflow:hidden; } /* subtle glow effect */ .ps-top-btn::after{ content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent); transition:.5s; } .ps-top-btn:hover::after{ left:100%; } /* hover */ .ps-top-btn:hover{ transform:translateY(-1px); box-shadow: 0 6px 18px rgba(126,211,33,0.4); } .ps-top-cta{ transition:.3s ease; } /* όταν γίνει sticky */ .ps-top-cta.is-sticky{ position:fixed; top:63px; right:10px; z-index:999; } .ps-top-cta.is-sticky{ animation:ctaFade .3s ease; } @keyframes ctaFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } /* Hide social icons from article */ .helix-social-share-blog{ display:none !important; } /* calc-form-box */ .ps-calculator *{box-sizing:border-box;margin:0;padding:0} .ps-calculator{font-family:Arial,sans-serif;padding:20px} .ps-calculator .container{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:100%} .ps-calculator .column{flex:1;min-width:280px;padding:20px;background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1)} .ps-calculator .middle,.ps-calculator .right{text-align:left;margin:0 10px;background:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.1)} .ps-calculator .right div{font-size:14px;color:#333;margin:8px 0 0 10px;background:#f0f9ff;border-left:2px solid #1d6db3;padding:4px;border-radius:5px} .ps-calculator .title-box{color:#fff;background:#1d6db3;text-align:center;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);text-transform:uppercase} .ps-calculator .h2-title{font-size:22px;padding:8px;margin-bottom:30px} .ps-calculator .h3-title{font-size:18px;padding:5px;margin-bottom:15px;width:50%} .ps-calculator h4{width:50%;color:#1d6db3;background:#e4e4e4;text-align:center;font-size:18px;padding:5px;margin-bottom:15px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)} .ps-calculator label{font-size:14px;color:#333;margin-bottom:5px;display:block} .ps-calculator .quality-options,.ps-calculator .type-options{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px} .ps-calculator .quality-options label,.ps-calculator .type-options label{display:flex;align-items:center;gap:5px;font-size:14px;color:#555} @media(max-width:500px){ .ps-calculator .quality-options, .ps-calculator .type-options{grid-template-columns:1fr} } .ps-calculator input[type=number]{width:100%;padding:10px;margin:10px 0;border-radius:8px;border:1px solid #ccc;font-size:14px} .ps-calculator .result-box{margin-top:20px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.1)} .ps-calculator .result-box div{font-size:14px;color:#333;margin:8px 0 0 5px;background:#f0f9ff;border-left:2px solid #1d6db3;padding:4px;border-radius:5px} .ps-calculator .result-box span{font-weight:700;color:#1d6db3} .ps-calculator #express-delivery span{color:#d9534f;font-weight:700} .ps-calculator #reset-button{background:#ff5733;color:#fff;border:none;padding:5px 10px;font-size:16px;border-radius:5px;cursor:pointer;margin:20px auto;display:block} .ps-calculator #reset-button:hover{background:#e04e2a} .ps-calculator #export-excel, .ps-calculator #export-word{background:#303030;color:#fff;border:none;padding:5px 10px;font-size:16px;border-radius:5px;cursor:pointer;margin:20px auto;display:inline-block} .ps-calculator #export-excel:hover, .ps-calculator #export-word:hover{background:#1d6db3} .ps-calculator select{width:100%;padding:6px;border:1px solid #ccc;border-radius:10px;font-size:14px;color:#333;background:#fff;cursor:pointer} .ps-calculator select:focus{border-color:#007bff;outline:none} @media(max-width:900px){ .ps-calculator .container{flex-direction:column;align-items:center} .ps-calculator .column{text-align:center;width:100%} } @media(max-width:768px){ .ps-calculator .container{width:90%} .ps-calculator .h2-title{font-size:18px} .ps-calculator .result-box div{font-size:16px;padding:10px} } /* END calc-form-box */ /* ταπε δσγν */ .tape-designer-container { margin: 20px; padding: 0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: #f9f9f9; font-family: sans-serif; overflow: hidden; } .title-box { color: #ffffff; background-color: #1d6db3; /* Μπλε χρώμα φόντου */ text-align: center; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); font-family: 'Arial', sans-serif; } .h3-title-alt { font-size: 20px; padding: 4px; margin: 0 0 20px 0; text-transform: capitalize; } // h3 { color: #ffffff; background-color: #1d6db3; /* Μπλε χρώμα φόντου */ text-align: center; font-size: 20px; padding: 4px; margin: 0 0 20px 0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); font-family: 'Arial', sans-serif; text-transform: capitalize; } .top-preview-section { padding: 20px; background-color: #fff; border-bottom: 1px solid #eee; box-sizing: border-box; display: flex; justify-content: center; } .preview-area { padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #fff; box-shadow: none; } .preview-area h3 { margin-top: 0; margin-bottom: 20px; width: 100%; box-sizing: border-box; } #tape-preview-container { position: relative; width: 1150px; height: 144px; border: 1px solid #ccc; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; } #tape-preview-left, #tape-preview-right { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; pointer-events: none; } #tape-preview-left { left: 0; } #tape-preview-right { right: 0; } #logo-preview-left, #logo-preview-right { max-width: 100%; max-height: 100%; display: none; /* Hidden by JS */ } /* Στυλ για τον καμβά */ #tape-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; /* Ίδιες στρογγυλεμένες γωνίες με το container */ } .bottom-tools-section { display: flex; gap: 20px; padding: 20px; box-sizing: border-box; flex-wrap: wrap; } .tools-column { flex: 1; /* Allow columns to grow/shrink */ min-width: 280px; /* Minimum width for each column before wrapping */ padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-sizing: border-box; } .tools-column h3 { margin-top: 0; margin-bottom: 20px; } .tool { margin-bottom: 25px; } .tool label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; } .tool input[type="file"], .tool input[type="color"], .tool select { width: calc(100% - 16px); padding-top: 6px; padding-bottom: 6px; padding-left: 8px; padding-right: 8px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 1em; line-height: 1.2; height: auto; } .tool input[type="number"], .tool input[type="range"], .tool textarea { width: calc(100% - 16px); padding: 10px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 1em; } .tool input[type="color"] { height: 36px; padding-top: 0; padding-bottom: 0; } .logo-size-controls { display: flex; align-items: center; } .logo-size-controls button { padding: 8px 15px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; background-color: #fff; color: #555; font-size: 0.9em; transition: background-color 0.3s ease; } .logo-size-controls button:hover { background-color: #eee; } .logo-size-controls span { margin: 0 15px; font-size: 1em; color: #333; } #logo-preview-filename, #logo2-preview-filename { /* Added #logo2-preview-filename */ font-size: 0.9em; color: #777; margin-top: 8px; } #get-tape-image { padding: 10px 20px; border: none; border-radius: 6px; background-color: #1d6db3; color: white; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; margin-top: 15px; width: 100%; box-sizing: border-box; } #get-tape-image:hover { background-color: #0056b3; } .text-line-item { display: flex; flex-direction: column; margin-bottom: 15px; /* Increased margin for better separation */ padding: 15px; /* Increased padding */ border: 1px solid #eee; border-radius: 6px; background-color: #f9f9f9; } .text-line-item > div:first-child { display: flex; align-items: center; margin-bottom: 10px; /* More space below text input */ } .text-line-item input[type="text"] { flex-grow: 1; box-sizing: border-box; padding: 10px; border-radius: 6px; border: 1px solid #ddd; height: auto; margin-bottom: 0; width: auto; min-width: 0; } .text-line-item > div:nth-child(2) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; /* Space below font/style controls */ } .text-line-item > div:nth-child(3) { /* New container for color and position */ display: flex; align-items: center; justify-content: space-between; } .text-line-item > div:nth-child(2) > div:first-child { display: flex; align-items: center; } .text-line-item > div:nth-child(2) > div:first-child label { margin-right: 5px; font-size: 0.9em; color: #777; font-weight: normal; margin-bottom: 0; /* Corrected margin */ } .text-line-item > div:nth-child(2) > div:first-child input[type="number"] { width: 60px; padding: 8px; margin-bottom: 0; /* Corrected margin */ } /* Στυλ για τις επιλογές Light/Bold */ .text-line-style { display: flex; align-items: center; margin-left: 10px; flex-grow: 1; } .text-line-style label { margin-left: 15px; margin-right: 0; font-size: 0.9em; color: #777; font-weight: normal; margin-bottom: 0; /* Corrected margin */ } .text-line-style input[type="radio"] { margin-right: 25px; /* margin-left: 0; margin-bottom: 0; margin-top: 0; */ } .text-line-item > div:last-child > button { /* Target the last div for delete button */ padding: 5px 5px; line-height: 1; cursor: pointer; background-color: #ff5733; border: none; color: white; border-radius: 5px; margin-left: 10px; margin-bottom: 0; /* Corrected margin */ margin-top: 0; /* Corrected margin */ align-self: center; /* Align button vertically centered */ } .text-line-item .font-select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 0.9em; margin-left: 10px; height: auto; width: 120px; /* Increased width for better readability */ margin-bottom: 0; /* Corrected margin */ margin-top: 0; /* Corrected margin */ } #add-text-line-button { display: block; width: 100%; padding: 10px 15px; margin-top: 15px; background-color: #1d6db3; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.2s ease; box-sizing: border-box; } #add-text-line-button:hover { background-color: #0056b3; } #font-family-container { display: none; /* Initially hidden as it's not used globally anymore */ } /* Style for the logo position value spans */ .logo-position-value { min-width: 25px; text-align: right; font-size: 0.9em; color: #555; margin-left: 5px; /* Added space after the value */ } /* Style for slider labels to align value spans */ .logo-position-slider-container label, .tool label { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; } .logo-position-slider-container label span, .tool label span { font-weight: normal; /* Don't make the value bold */ } /* Styles for text line specific controls */ .text-line-controls { display: flex; align-items: center; gap: 10px; /* Space between controls */ } .text-line-color-picker { display: flex; align-items: center; } .text-line-color-picker label { margin-right: 5px; font-size: 0.9em; font-weight: normal; } .text-line-position { display: flex; align-items: center; } .text-line-position label { margin-right: 5px; font-size: 0.9em; font-weight: normal; } .text-line-position input[type="number"] { width: 50px; padding: 5px; font-size: 0.8em; border-radius: 4px; border: 1px solid #ddd; } @media screen and (max-width: 768px) { .tape-designer-container { margin: 10px; border-radius: 0; /* Αφαιρούμε τις στρογγυλεμένες γωνίες για να χρησιμοποιήσουμε όλο το πλάτος */ box-shadow: none; } .h3-title-alt { font-size: 1.2em; padding: 8px; margin-bottom: 15px; border-radius: 0; } .top-preview-section { padding: 10px; } #tape-preview-container { width: 100%; /* Χρησιμοποιούμε όλο το πλάτος */ height: auto; /* Το ύψος προσαρμόζεται ανάλογα */ min-height: 100px; /* Ένα ελάχιστο ύψος για να είναι ορατό */ margin-bottom: 15px; border-radius: 0; } #tape-canvas { border-radius: 0; } .bottom-tools-section { flex-direction: column; /* Οι στήλες γίνονται σειρές */ padding: 10px; gap: 15px; } .tools-column { min-width: auto; /* Επιτρέπουμε να συρρικνωθούν */ padding: 10px; border-radius: 0; box-shadow: none; } .tool { margin-bottom: 20px; } .tool label { font-size: 0.9em; margin-bottom: 5px; } .tool input[type="file"], .tool input[type="color"], .tool select, .tool input[type="number"], .tool input[type="range"], .tool textarea, #add-text-line-button, #get-tape-image { width: calc(100% - 12px); padding: 8px; margin-bottom: 10px; font-size: 1em; border-radius: 4px; } .logo-size-controls { flex-direction: column; align-items: flex-start; } .logo-size-controls button, .logo-size-controls span { margin: 5px 0; font-size: 0.9em; } .text-line-item { flex-direction: column; /* Τα στοιχεία κάθε γραμμής σε στήλη */ margin-bottom: 10px; padding: 10px; border-radius: 0; } .text-line-item > div:first-child { flex-direction: column; align-items: flex-start; margin-bottom: 10px; } .text-line-item input[type="text"], .text-line-item .font-select { width: calc(100% - 12px); margin-bottom: 8px; margin-left: 0; } .text-line-item > div:nth-child(2) { flex-direction: column; align-items: flex-start; margin-bottom: 10px; } .text-line-style { margin-left: 0; margin-top: 8px; } .text-line-controls { flex-direction: column; align-items: flex-start; gap: 10px; } .text-line-color-picker, .text-line-position { width: 100%; } .text-line-position label { margin-right: 0; margin-bottom: 5px; display: block; } .text-line-position input[type="range"], .text-line-position span { display: inline-block; width: calc(50% - 10px); margin-bottom: 8px; } .text-line-controls > div:last-child { /* Στόχευση του container του κουμπιού διαγραφής */ width: 100%; margin-top: 10px; } .text-line-controls > div:last-child button { /* Στόχευση του κουμπιού διαγραφής */ width: 100%; } } .text-line-accordion-item { margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; /* Για να κρύβονται σωστά τα περιεχόμενα */ } .text-line-accordion-item .accordion-header { background-color: #f8f9fa; color: #333; padding: 8px 15px; cursor: pointer; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .text-line-accordion-item .accordion-header.active { background-color: #e9ecef; } .text-line-accordion-item .accordion-content { padding: 15px; background-color: #fff; display: none; /* Αρχικά κρυφό */ } .text-line-accordion-item:last-child { margin-bottom: 10px; /* Περισσότερο χώρο μετά το τελευταίο στοιχείο */ } .accordion-controls-line1 { /* Container for text, font, size, weight */ display: flex; align-items: center; margin-bottom: 15px; /* Space below this line */ gap: 10px; /* Space between elements */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ } .accordion-controls-line1 input[type="text"] { flex-grow: 1; /* Text input takes available space */ min-width: 150px; /* Minimum width */ padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1em; /* Removed inline margins from JS */ } .accordion-controls-line1 .font-select { padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1em; width: 150px; /* Adjusted width */ /* Removed inline margins from JS */ } .accordion-controls-line1 .font-size-input { width: 60px; /* Adjusted width */ padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1em; /* Removed inline margins from JS */ } .accordion-controls-line1 .weight-select { padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1em; width: 100px; /* Adjusted width */ /* Removed inline margins from JS */ } .accordion-controls-line2 { /* Container for color and position */ display: flex; align-items: center; justify-content: space-between; /* Space between color and position group */ margin-bottom: 15px; /* Space below this line */ gap: 10px; /* Space between color picker and position group */ flex-wrap: wrap; /* Allow wrapping */ /* Removed inline margins from JS */ } .accordion-delete-button-container { /* Container for the delete button */ text-align: right; /* Align button to the right */ margin-top: 10px; /* Space above the button */ /* Removed inline margin */ } .accordion-delete-button-container button { padding: 8px 15px; /* Increased padding */ line-height: 1.2; cursor: pointer; background-color: #dc3545; /* Bootstrap danger color */ border: none; color: white; border-radius: 4px; transition: background-color 0.3s ease; /* Removed inline margin */ font-size: 0.9em; font-weight: normal; } .accordion-delete-button-container button:hover { background-color: #c82333; } .accordion-delete-button-container { /* Container for the delete button */ text-align: right; /* Align button to the right */ margin-top: 10px; /* Space above the button */ /* Removed inline margin */ } .accordion-delete-button-container button { padding: 8px 15px; /* Increased padding */ line-height: 1.2; cursor: pointer; background-color: #dc3545; /* Bootstrap danger color */ border: none; color: white; border-radius: 4px; transition: background-color 0.3s ease; /* Removed inline margin */ font-size: 0.9em; font-weight: normal; margin-left: 5px; } .accordion-delete-button-container button:hover { background-color: #c82333; } .accordion-delete-button-container { text-align: left; /* Align button to the left on mobile */ margin-top: 10px; } .accordion-delete-button-container button { width: auto; /* Allow button to size based on content */ } } .text-line-accordion-item { margin-bottom: 12px; /* Adjusted margin */ border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background-color: #fff; /* White background for the item */ } /* Accordion Header - Clickable part */ .text-line-accordion-item .accordion-header { background-color: #f8f9fa; /* Light grey background */ color: #333; /* Dark text */ padding: 10px 15px; /* Added padding */ cursor: pointer; border-bottom: 1px solid #eee; /* Border bottom when closed */ display: flex; justify-content: space-between; /* Space between title and arrow */ align-items: center; font-weight: bold; /* Make header text bold */ transition: background-color 0.3s ease; /* Smooth transition on hover/active */ font-size: 1em; /* Ensure consistent font size */ } .text-line-accordion-item .accordion-header:hover { background-color: #e9ecef; /* Slightly darker on hover */ } .text-line-accordion-item .accordion-header.active { background-color: #e9ecef; /* Grey background when open */ border-bottom: none; /* Remove border when content is visible below */ } /* Arrow indicator using ::after pseudo-element */ .text-line-accordion-item .accordion-header::after { content: '►'; /* Right arrow for closed state (Unicode) */ margin-left: 15px; /* Space from text */ font-size: 0.9em; color: #555; /* Grey color for arrow */ transition: transform 0.2s ease; /* Smooth rotation */ display: inline-block; /* Required for transform */ } .text-line-accordion-item .accordion-header.active::after { content: '▼'; /* Down arrow for open state (Unicode) */ /* If using transform instead of content change: */ /* transform: rotate(90deg); */ /* content: '►'; */ } /* Accordion Content - Hidden/Shown part */ .text-line-accordion-item .accordion-content { padding: 15px; background-color: #fff; /* White background for content */ /* display: none; Handled by JS */ border-top: 1px solid #eee; /* Border top to separate from header */ } /* wpcatagg */ .ps-categories,.ps-categories *{font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;}.ps-cat-header{width:420px;display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 2px;background:linear-gradient(135deg,#0f172a,#1e3a8a);border-left:3px solid #38bdf8;border-radius:3px;font-size:16px;font-weight:600;color:#fff;cursor:pointer}.ps-icon{display:flex;flex-direction:column}.ps-icon span{width:16px;height:2px;background:#38bdf8;margin:2px 0;border-radius:2px}.ps-cat-wrapper{display:flex;align-items:stretch;position:relative;width:820px;max-width:820px;max-height:1000px;opacity:1;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}.ps-cat-wrapper.closed{max-height:0;opacity:0}.ps-cat-menu{width:420px;background:#fff;border:1px solid #e5e7eb;border-radius:3px;padding:5px 0;margin:0;list-style:none;display:flex;flex-direction:column}.ps-cat-menu li{padding:7px 14px;cursor:pointer;transition:.2s}.ps-cat-menu li:hover{background:#1f2937}.ps-cat-menu li:hover a{color:#fff}.ps-cat-menu h3{margin:0;font-size:15px;font-weight:500;line-height:1.3}.ps-cat-menu h3 a{color:#1f2937;text-decoration:none;display:block;transition:.2s}.ps-cat-panel{flex:0 0 400px;max-width:400px;width:100%;display:none;background:#fff;border:1px solid #e5e7eb;border-left:none;border-radius:0 3px 3px 0;padding:14px 18px;min-width:360px;min-height:440px;position:relative;z-index:50;transition:opacity .2s ease}.ps-panel{display:none;height:100%;min-height:440px}.ps-panel-inner{display:flex;flex-direction:column;justify-content:space-between;height:100%}.ps-panel a{display:block;padding:6px 0;margin-left:10px;font-size:15px;font-weight:500;color:#374151;text-decoration:none;white-space:nowrap;transition:.2s}.ps-panel a:hover{color:#fff;background:#1f2937;padding-left:6px;border-radius:2px}.ps-cat-extra{min-width:180px;max-width:250px;margin-left:40px}.ps-cat-extra img{width:100%;border-radius:3px;display:block;margin-bottom:6px}.ps-cat-extra span{font-size:13px;color:#6b7280}.ps-cat-panel,.ps-panel,.ps-panel-inner{box-sizing:border-box}.ps-cat-menu li.has-sub{position:relative}.ps-cat-menu li.has-sub:after{content:"›";position:absolute;right:12px;top:45%;transform:translateY(-50%);font-size:18px;color:#9ca3af;transition:.2s}.ps-cat-menu li.has-sub:hover:after{color:#fff;transform:translateY(-50%) translateX(5px)}.ps-chevron{margin-left:auto;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:.3s}.ps-cat-header.active .ps-chevron{transform:rotate(-135deg)} /* δεν τα σπρωχνει κατω .ps-categories{position:relative} .ps-cat-wrapper{position:absolute;top:100%;left:0}*/ .ps-panel-head{font-size:13px;font-weight:600;color:#cfe9ff;padding:8px 10px;margin:0 0 12px 0;background:linear-gradient(135deg,#1e3a8a,#0f172a);border-left:3px solid #38bdf8;border-radius:3px;} .ps-panel-head::before{content:"▸";margin-right:6px;color:#38bdf8;} .ps-cat-menu,.ps-cat-panel{border:2px solid #e5e7eb;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.04);} @media(max-width:1024px){.ps-cat-header{width:100%}.ps-cat-wrapper{width:100%;max-width:100%}.ps-cat-menu{width:100%}.ps-cat-panel{display:none!important}}@media(max-width:768px){.ps-categories{width:100%}.ps-cat-wrapper{position:static}}