/* Small visual polish (2026-10-24). Loaded after style.css and media-queries.css.
   Rollback: remove the polish.css <link> line in templates/common/header.php. */

/* 1. homepage testimonial slider: keep the arrows inside the screen on phones (they caused sideways scrolling) */
@media screen and (max-width: 700px){
     .owl-carousel .prev-slide{ left:0; }
     .owl-carousel .next-slide{ right:0; }
}

/* 2-4. footer: see the FOOTER block at the end */

/* 5. main menu: flat hover/active state with a thin line instead of the grey gradient */
#menu1 li a:hover,
#menu1 > li:hover > a, /* stays highlighted while the mouse is in its dropdown */
#menu1 li a.active_menu{
     background-color:#f5f5f5;
     background-image:none;
     box-shadow:inset 0 -2px 0 #000;
}

/* 6. buttons fade on hover */
.bluebut{
     transition:background .2s ease;
}

/* 8. one corner radius for buttons, fields and boxes */
.bluebut,
.buy,
.contact_input,
.login_box{
     border-radius:6px;
}

/* 9. product info box: single light border instead of the double one */
.product_info{
     border:1px solid #e3e3e3;
     border-radius:6px;
     overflow:hidden;
}

/* 10. form fields: visible focus */
.contact_input:focus,
.white_holder input[type=text]:focus,
.white_holder input[type=email]:focus,
.white_holder input[type=password]:focus,
.white_holder textarea:focus,
.white_holder select:focus{
     outline:none;
     border-color:#555;
     box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* 11. homepage testimonial: round photo, less empty space */
.one_t_img img{
     width:110px !important;
     height:110px !important;
     object-fit:cover;
}
.white_holder > .mwidth[style*="padding:70px"]{
     padding:45px 0 !important;
}

/* 12. product page on phones: keep photos and info box off the screen edges */
@media screen and (max-width: 700px){
     #product{ padding:0 12px; box-sizing:border-box; }
     #product_images span{ margin-right:8px; }
}

/* 13. contacts page: calmer headings */
.left_of_two.inpage_text h2,
.right_of_two.inpage_text h2{
     font-size:1.45em;
}

/* 5b. dropdown items: soft light background on hover instead of the (invisible) black line */
#menu1 .dropdown ul li a{
     box-shadow:none;
     transition:background .15s ease;
}
#menu1 .dropdown ul li a:hover{
     background:rgba(255,255,255,.14) !important;
     box-shadow:none;
}
@media screen and (max-width: 1230px){
     /* mobile menu shows the dropdown on white: use a light grey there */
     #menu1 .dropdown ul li a:hover{ background:#f0f0f0 !important; }
}

/* 5c. phone menu: no black line there (it looked like a stray divider), just the light background */
@media screen and (max-width: 1230px){
     #menu1 li a:hover,
     #menu1 > li:hover > a,
     #menu1 li a.active_menu{ box-shadow:none; }
}

/* 14. short pages (empty cart, login...): footer sits at the bottom of the window instead of black space below it */
body{
     display:flex;
     flex-direction:column;
     min-height:100vh;
}
body > *{
     flex-shrink:0;
}
body > .the_big_holder,
body > .white_holder{
     flex-grow:1; /* only adds height when the page is shorter than the window */
}
body > .the_big_holder{
     display:flex;
     flex-direction:column;
}
body > .the_big_holder > .overlay{
     flex-grow:1; /* the dark tint covers the stretched area too */
}
.footer_holder{
     margin-top:auto;
}

/* 15. long text pages (terms etc.): readable line length, more space above subheadings */
.main .inpage_content > .inpage_text:first-child:last-child{
     max-width:820px;
     margin:0 auto;
}
.inpage_text p strong:only-child,
.inpage_text p b:only-child{
     display:inline-block;
     margin-top:10px;
}

/* 16. shop sidebar heading: calmer size */
.sidebar h2{
     font-size:1.4em;
     padding:10px 0 14px;
}

/* 17. registration form: room around radio buttons and the terms checkbox */
.login_box input[type=radio],
.login_box input[type=checkbox]{
     width:16px;
     height:16px;
     margin:0 8px 0 0;
     vertical-align:-3px;
     accent-color:#000;
}
.login_box label{
     display:inline-block;
     padding:4px 0;
     cursor:pointer;
}

/* 18. product names in shop lists: a little darker for readability */
.one_product_title{
     color:#555;
}


/* FOOTER (new layout in templates/common/footer.php) */
.site_footer{
     background:#000;
     color:#a3a3a3;
     font-size:15px;
     line-height:1.6;
     padding:64px 0 0;
}
.site_footer .mwidth{
     box-sizing:border-box;
}
.site_footer_cols{
     display:grid;
     grid-template-columns:1.3fr 1fr 1fr;
     gap:40px;
     padding-bottom:48px;
}
.site_footer_logo img{
     display:block;
     width:200px;
     height:auto;
     filter:invert(1); /* the logo is black; white on the dark footer */
}
.site_footer_social{
     display:flex;
     gap:12px;
     margin-top:26px;
}
.site_footer_social a{
     display:flex;
     align-items:center;
     justify-content:center;
     width:42px;
     height:42px;
     border:1px solid #444;
     border-radius:50%;
     color:#d6d6d6;
     font-size:18px;
     transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.site_footer_social a:hover{
     background:#fff;
     border-color:#fff;
     color:#000;
     text-decoration:none;
     opacity:1;
}
.site_footer h3{
     margin:4px 0 18px;
     padding:0;
     color:#fff;
     font-size:16px;
     font-weight:500;
     text-transform:uppercase;
     letter-spacing:1px;
     text-shadow:none;
}
.site_footer ul{
     list-style:none;
     margin:0;
     padding:0;
}
.site_footer li{
     margin:0 0 12px;
}
.site_footer li a{
     color:#d6d6d6;
     transition:color .2s ease;
}
.site_footer li a:hover{
     color:#fff;
     text-decoration:none;
     opacity:1;
}
.site_footer li .fa{
     width:20px;
     color:#777;
}
.site_footer_bottom{
     padding:22px 0 26px;
     border-top:1px solid #222;
     font-size:13px;
     color:#777;
}
@media screen and (max-width: 1230px){
     .site_footer .mwidth{ padding:0 24px; }
}
@media screen and (max-width: 700px){
     .site_footer{ padding-top:44px; }
     .site_footer_cols{ grid-template-columns:1fr; gap:34px; padding-bottom:34px; }
     .site_footer_logo img{ width:180px; }
     .site_footer_social{ margin-top:20px; }
     .site_footer li{ margin-bottom:14px; }
}

/* HEADER TOP BAR: languages, social icons, login / register / cart */
.top .flags a,
.top_profile_cart a{
     font-size:14px;
     color:#a3a3a3;
     transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.top .flags a:hover,
.top_profile_cart a:hover{
     color:#fff;
     text-decoration:none;
}
.top .flags a{
     margin-right:16px;
}
.top .flags a img{
     width:18px;
     margin-right:6px;
     border-radius:2px;
     opacity:.85;
}
.top .flags a.lang_active{
     color:#fff;
}
.top .flags a.lang_active img{
     opacity:1;
}
/* social icons: small round outlined buttons, same style as the footer */
.top .flags a.top_socials{
     display:flex;
     justify-content:center;
     width:28px;
     height:28px;
     margin:1px 8px 0 0;
     border:1px solid #444;
     border-radius:50%;
     font-size:13px !important;
     line-height:1;
     color:#d6d6d6;
}
.top .flags a.top_socials:first-of-type{
     margin-left:8px;
}
.top .flags a.top_socials:hover{
     background:#fff;
     border-color:#fff;
     color:#000;
}
/* login / register / cart: no pipe separators, register as an outlined pill, cart count as a badge */
.top_profile_cart{
     display:flex;
     align-items:center;
     gap:22px;
}
.top_profile_cart .sep,
.top_profile_cart .clear{ /* the empty .clear counted as a flex item and added a 22px gap after the cart */
     display:none;
}
.top_profile_cart a i{
     font-size:1em;
     margin-right:6px;
}
.top_profile_cart a.top_register{
     padding:0 14px;
     line-height:28px;
     border:1px solid #555;
     border-radius:16px;
     color:#e0e0e0;
}
.top_profile_cart a.top_register:hover{
     background:#fff;
     border-color:#fff;
     color:#000;
}
.top_profile_cart a.top_cart{
     color:#e0e0e0;
}
.top_profile_cart .cart_items{
     display:inline-block;
     min-width:18px;
     height:18px;
     margin-left:6px;
     padding:0 5px;
     box-sizing:border-box;
     border-radius:9px;
     background:#fff;
     color:#000;
     font-size:11px;
     font-weight:700;
     line-height:18px;
     text-align:center;
     vertical-align:1px;
}
/* language switch: both links inline on desktop, one button + dropdown on phones */
.lang_switch{
     position:relative;
     float:left;
}
.lang_toggle{
     display:none;
}
.lang_menu{
     display:contents; /* desktop: the links sit inline in the bar as before */
}
@media screen and (max-width: 700px){
     .top.lang_open{ z-index:10001; } /* only while the language menu is open: above the header, not above the phone menu */
     .lang_toggle{
          display:flex;
          align-items:center;
          gap:6px;
          height:30px;
          padding:0 12px;
          border:1px solid #444;
          border-radius:16px;
          background:none;
          color:#e0e0e0;
          font-family:inherit;
          font-size:14px;
          cursor:pointer;
     }
     .lang_toggle img{ width:18px; height:auto; border-radius:2px; }
     .lang_toggle .fa{ transition:transform .2s ease; }
     .lang_switch.open .lang_toggle .fa{ transform:rotate(180deg); }
     .lang_menu{
          display:none;
          position:absolute;
          top:38px;
          left:0;
          z-index:3000;
          min-width:160px;
          padding:6px 0;
          background:#111;
          border:1px solid #333;
          border-radius:8px;
          box-shadow:0 10px 30px rgba(0,0,0,.5);
     }
     .lang_switch.open .lang_menu{ display:block; }
     .top .lang_menu a{
          float:none;
          display:flex;
          margin:0;
          padding:6px 14px;
          line-height:24px;
     }
     .top .lang_menu a:hover{ background:#222; }
}

/* PRODUCT CARDS: one 3:4 frame for every photo so titles and prices line up (shop lists + "Подобни продукти") */
.one_product_image{
     display:block;
     aspect-ratio:3 / 4;
     overflow:hidden;
     background:#f4f4f4;
}
.one_product_image img{
     display:block;
     width:100%;
     height:100%;
     object-fit:cover;
     object-position:center top; /* keep faces and the product top in view */
}

/* 19. phone menu: white panel from the right, opens in .25s (was a 0.5s jQuery slide), dimmed page behind,
   one close button, bigger rows, arrow turns when a submenu is open. Opened by body.menu_open (custom.js). */
@media screen and (max-width: 1230px){
     #menu1{
          display:block;
          position:fixed;
          top:0;
          right:0;
          width:86vw;
          max-width:380px;
          min-width:0;
          height:100%;
          overflow-y:auto;
          -webkit-overflow-scrolling:touch;
          background:#fff;
          box-shadow:-8px 0 30px rgba(0,0,0,.25);
          transform:translateX(105%);
          visibility:hidden;
          transition:transform .25s ease, visibility 0s linear .25s;
     }
     body.menu_open #menu1{
          transform:none;
          visibility:visible;
          transition:transform .25s ease;
     }
     body.menu_open{ overflow:hidden; }
     .overlay_menu_mobile{
          display:block;
          opacity:0;
          visibility:hidden;
          transition:opacity .25s ease, visibility 0s linear .25s;
     }
     body.menu_open .overlay_menu_mobile{
          opacity:1;
          visibility:visible;
          transition:opacity .25s ease;
     }
     .close_mobile_menu2{ display:none; }

     /* close row: a plain ✕ on the right instead of the grey bar */
     #menu1 .close_mobile_menu{
          display:flex;
          justify-content:flex-end;
          align-items:center;
          height:60px;
          padding:0 8px;
          background:#fff;
          border:0;
          border-radius:0;
          font-size:13px;
          letter-spacing:1px;
          color:#777;
     }
     #menu1 .close_mobile_menu span{ padding:12px 14px; }
     #menu1 .close_mobile_menu i{ font-size:20px; vertical-align:-2px; margin-right:6px; color:#222; }

     /* rows */
     #menu1 li a{
          height:auto;
          line-height:1.3;
          padding:17px 24px;
          border-top:1px solid #eee;
          font-size:15px;
          letter-spacing:.5px;
          color:#222;
     }
     #menu1 > li:last-child > a{ border-bottom:1px solid #eee; }
     #menu1 li a.active_menu{ font-weight:700; box-shadow:inset 3px 0 0 #000; }

     /* submenu parents: arrow on the right, turns when open */
     #menu1 > li.dropdown_menu > a{ position:relative; padding-right:52px; }
     #menu1 > li.dropdown_menu > a i.fa-caret-down{
          position:absolute;
          right:24px;
          top:50%;
          margin-top:-8px;
          font-size:16px;
          color:#888;
          transition:transform .15s ease;
     }
     #menu1 > li.dropdown_menu.open > a{ background:#f7f7f7; }
     #menu1 > li.dropdown_menu.open > a i.fa-caret-down{ transform:rotate(180deg); }

     /* submenu items: indented, light grey */
     #menu1 .dropdown{ background:#f7f7f7; }
     #menu1 .dropdown ul li a{
          padding:14px 24px 14px 40px !important;
          line-height:1.3 !important;
          font-size:14px !important;
          background:#f7f7f7;
          border-top:1px solid #ececec;
     }

     /* login / register rows at the bottom */
     #menu1 li a i.fa-lock,
     #menu1 li a i.fa-user,
     #menu1 li a i.fa-sign-out{ width:18px; color:#888; }
}

/* 20. current item inside a dropdown: a quiet marker (slightly brighter / bold) */
#menu1 .dropdown ul li a.active_menu{
     background:rgba(255,255,255,.1) !important;
     color:#fff !important;
     font-weight:600;
     box-shadow:none;
}
@media screen and (max-width: 1230px){
     /* phone menu: the current section's submenu starts open (li.open from header.php) */
     #menu1 > li.dropdown_menu.open > .dropdown{ display:block; }
     #menu1 .dropdown ul li a.active_menu{
          background:#f7f7f7 !important;
          color:#000 !important;
          font-weight:600;
          box-shadow:inset 2px 0 0 #999;
     }
}