
/* MILSHOP global overlay — Wave 2b, 2026-08-17
   Applies MILSHOP palette/typography over speedy theme site-wide.
   Loaded AFTER stylesheet.css so !important + specificity win.
   Does NOT touch HTML structure, cart/search/login functionality preserved.
*/

:root{
  --ms-graphite:#171914;--ms-ink:#242620;--ms-olive:#4d5541;--ms-olive-dark:#343a2d;
  --ms-coyote:#b5844e;--ms-signal:#f0782b;--ms-signal-dark:#c85216;
  --ms-canvas:#f6f3ea;--ms-paper:#fffdf8;--ms-mist:#e6e4dc;--ms-muted:#74766e;
}

/* Global tokens */
body{
  background:var(--ms-canvas) !important;
  color:var(--ms-graphite) !important;
  font-family:"Manrope","Arial",sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{
  font-family:"Space Grotesk","Arial",sans-serif !important;
  color:var(--ms-graphite);
  letter-spacing:-.02em;
}
a{color:inherit}

/* TOP announcement bar — inserted before <nav id="top"> via inline HTML in header.twig */
.ms-topbar{
  min-height:36px;padding:8px 24px;
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ms-olive);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.ms-topbar-side{opacity:.72}
@media(max-width:760px){
  .ms-topbar{justify-content:center;text-align:center;font-size:11px;padding:8px 16px}
  .ms-topbar-side{display:none}
}

/* Speedy nav#top — reshape */
#top{background:var(--ms-canvas) !important;border-bottom:1px solid #d7d4c9}
#top .menu>li>a,#top .top_right,#top .account{color:var(--ms-graphite) !important;font-weight:600}
#top .menu>li>a:hover{color:var(--ms-signal-dark) !important}

/* Speedy <header> — logo/search/cart bar */
header{background:var(--ms-canvas) !important;border-bottom:1px solid #d7d4c9}
header .logo img{max-height:52px;width:auto}

/* Search input */
header .search input,.search-input,#search input{
  border:1px solid #cbc9bf !important;background:var(--ms-paper) !important;
  border-radius:0 !important;font-size:15px;padding:12px 14px !important;
}
header .search input:focus,#search input:focus{
  border-color:var(--ms-graphite) !important;
  box-shadow:0 0 0 3px rgba(240,120,43,.25) !important;
}
header .search button,.search-btn{
  background:var(--ms-graphite) !important;color:#fff !important;
  border:0 !important;border-radius:0 !important;
}
header .search button:hover{background:var(--ms-signal-dark) !important}

/* Cart button (Graphite background, signal counter) */
#cart>.btn,.cart-btn,#cart{
  background:var(--ms-graphite) !important;color:#fff !important;
  border-radius:0 !important;border:0 !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.05em;
}
#cart>.btn:hover{background:var(--ms-ink) !important}
#cart .quantity,#cart .count-badge{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border-radius:0 !important;font-weight:800;
}

/* All primary buttons — signal accent */
.btn,.btn-primary,.button,button[type="submit"]:not(.btn-close):not(.cart-close),
.dc-button-primary,input[type="submit"]:not(.btn-close){
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border:1px solid var(--ms-signal) !important;border-radius:0 !important;
  font-family:"Manrope",sans-serif !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.03em;
  transition:background .2s;
}
.btn:hover,.button:hover,.btn-primary:hover,.dc-button-primary:hover{
  background:#ff8d42 !important;color:var(--ms-graphite) !important;
}

/* Secondary/outline */
.btn-default,.btn-secondary,.btn-outline{
  background:transparent !important;color:var(--ms-graphite) !important;
  border:1px solid var(--ms-graphite) !important;border-radius:0 !important;
}
.btn-default:hover,.btn-secondary:hover,.btn-outline:hover{
  background:var(--ms-graphite) !important;color:#fff !important;
}

/* Section titles / page titles */
h1.title,.page-title,h1.category-title,.breadcrumb+h1{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700;letter-spacing:-.03em;color:var(--ms-graphite);
}

/* Category cards (existing OpenCart category-list) */
.category-list .item,.category-item,.subcat_item{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;
  border-radius:0 !important;
  transition:transform .2s,box-shadow .2s;
}
.category-list .item:hover,.category-item:hover{
  transform:translateY(-4px);box-shadow:0 16px 45px rgba(23,25,20,.12);
}

/* Product cards */
.product-thumb,.product-item,.product-layout{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;border-radius:0 !important;
}
.product-thumb .caption h4,.product-name,.product-item-name{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
}
.product-thumb .price,.price-new,.price{
  color:var(--ms-graphite) !important;font-weight:700 !important;
}
.product-thumb .button-group button,.add-to-cart{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border-radius:0 !important;border:0 !important;
  text-transform:uppercase;font-weight:700;
}

/* Breadcrumb */
.breadcrumb{
  background:transparent !important;padding:14px 0 !important;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.breadcrumb a{color:var(--ms-muted) !important}
.breadcrumb a:hover{color:var(--ms-signal-dark) !important}

/* Footer — dark */
footer,.footer,#footer{
  background:var(--ms-graphite) !important;color:#e6e4dc !important;
}
footer a,.footer a{color:#a9aba2 !important}
footer a:hover,.footer a:hover{color:#fff !important}
footer h3,footer h4,footer .footer-title,.footer h3{
  color:#fff !important;font-family:"Space Grotesk",sans-serif !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:.13em;
  text-transform:uppercase !important;
  margin-bottom:16px !important;
}
footer .logo img{max-width:210px;filter:brightness(1) invert(1)}
footer .socials a,footer li.instagram a,footer li.telegram a,
footer li.facebook a,footer li.youtube a,footer li.linkedin a{
  color:#fff !important;
}
footer .copyright,.copyright{
  background:var(--ms-graphite) !important;
  color:#777a71 !important;border-top:1px solid #3d3f39;
  font-size:10px !important;letter-spacing:.07em;text-transform:uppercase;
}
footer .copyright a{color:#a9aba2 !important}

/* Sidebar / filters (OCFilter) */
.ocfilter,.filter-panel,#column-left,#column-right{
  font-family:"Manrope",sans-serif;
}
.ocfilter .filter-name,.ocfilter h3{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;
}

/* Fix speedy dark green/red accents → replace with MILSHOP palette */
[style*="background: #4CAF50"],[style*="background:#4CAF50"],
[style*="background: green"],[style*="background:green"]{
  background:var(--ms-olive) !important;
}
[style*="color: #4CAF50"],[style*="color:#4CAF50"]{
  color:var(--ms-olive) !important;
}

/* Load Space Grotesk + Manrope */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap");

/* Print-friendly hide of decorative */
@media print{.ms-topbar{display:none}}

/* ============================================================
   MILSHOP Wave 2c — polish (product cards, dropdowns, mobile, forms)
   Appended to milshop-overlay.css 2026-08-17
   ============================================================ */

/* === PRODUCT CARDS (speedy .item.product_XXX) === */
.item[class*="product_"]{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;
  border-radius:0 !important;
  overflow:hidden !important;
  transition:transform .2s ease,box-shadow .2s ease !important;
  position:relative;
}
.item[class*="product_"]:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 45px rgba(23,25,20,.14);
  border-color:var(--ms-graphite) !important;
}
.item[class*="product_"] .image{
  position:relative;
  background:var(--ms-canvas);
  aspect-ratio:1/1;
  overflow:hidden;
}
.item[class*="product_"] .image img{
  transition:transform 420ms cubic-bezier(.2,.7,.2,1),opacity .2s;
  width:100%;height:100%;object-fit:contain;
}
.item[class*="product_"]:hover .image img.image_main{opacity:0}
.item[class*="product_"] .image img.image_hover{position:absolute;inset:0;opacity:0}
.item[class*="product_"]:hover .image img.image_hover{opacity:1}

/* Product name — Space Grotesk */
.item[class*="product_"] .name a,.item[class*="product_"] .name,
.item[class*="product_"] h4,.item[class*="product_"] h3{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
  color:var(--ms-graphite) !important;
  font-size:14px !important;line-height:1.35 !important;
}
.item[class*="product_"] .name a:hover{color:var(--ms-signal-dark) !important}

/* Price — bold, no color decoration */
.item[class*="product_"] .price,.item[class*="product_"] .price-new,
.item[class*="product_"] .price_new{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
  color:var(--ms-graphite) !important;
  font-size:17px !important;
}
.item[class*="product_"] .price-old,.item[class*="product_"] .price_old{
  color:var(--ms-muted) !important;
  text-decoration:line-through;font-weight:500 !important;
}

/* Stickers/badges — MILSHOP palette */
.stickers_text li,.badges li,.sticker{
  border-radius:0 !important;
  font-family:"Manrope",sans-serif !important;
  font-size:10px !important;font-weight:800 !important;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px !important;
  background:var(--ms-signal) !important;
  color:var(--ms-graphite) !important;
}
.stickers_text li[style*="6aa84f"],.stickers_text li[style*="green"]{
  background:var(--ms-olive) !important;color:#fff !important;
}
.stickers_text li[style*="e06666"],.stickers_text li[style*="red"],
.stickers_text li[style*="c00"]{
  background:var(--ms-signal-dark) !important;color:#fff !important;
}

/* Add to cart button on card */
.item[class*="product_"] .cart_button,.item[class*="product_"] .add-to-cart,
.item[class*="product_"] .btn-cart{
  background:var(--ms-graphite) !important;color:#fff !important;
  border:0 !important;border-radius:0 !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;
  font-size:12px !important;
  transition:background .15s;
}
.item[class*="product_"] .cart_button:hover,.item[class*="product_"] .add-to-cart:hover{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
}

/* Wishlist/compare mini icons */
.item[class*="product_"] .wishlist,.item[class*="product_"] .compare,
.wishlist_button,.compare_button{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;border-radius:0 !important;
  color:var(--ms-muted) !important;
}
.item[class*="product_"] .wishlist:hover,.wishlist_button:hover{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border-color:var(--ms-signal) !important;
}

/* === DROPDOWN MENU (top nav + catalog) === */
#top .menu li a:hover,#top .menu li.active>a,
header nav a:hover,.category_link:hover{
  color:var(--ms-signal-dark) !important;
}
.dropdown-menu,.dropdown_content{
  background:var(--ms-paper) !important;
  border:1px solid #d7d4c9 !important;
  border-radius:0 !important;
  box-shadow:0 16px 45px rgba(23,25,20,.14) !important;
}
.dropdown-menu>li>a,.dropdown_content a{
  color:var(--ms-graphite) !important;
  font-weight:600 !important;
  padding:12px 18px !important;
  transition:background .15s,color .15s;
}
.dropdown-menu>li>a:hover,.dropdown_content a:hover{
  background:var(--ms-graphite) !important;color:#fff !important;
}
.dropdown-menu>li>a:hover .arrow,.dropdown_content a:hover svg{
  color:var(--ms-signal) !important;
}

/* Catalog toggle button */
.dropdown_catalog>a,.catalog_toggle,.catalog_button{
  background:var(--ms-graphite) !important;color:#fff !important;
  font-weight:800 !important;text-transform:uppercase;letter-spacing:.05em;
  border-radius:0 !important;border:0 !important;
  padding:14px 20px !important;
}
.dropdown_catalog>a:hover{background:var(--ms-signal-dark) !important}

/* === MOBILE MENU (speedy #m_menu) === */
#m_menu .dropdown-menu{background:var(--ms-canvas) !important}
#m_menu .m_menu_header{
  background:var(--ms-graphite) !important;color:#fff !important;
  border-bottom:2px solid var(--ms-signal) !important;
}
#m_menu .m_menu_header .logo img{max-height:40px;filter:brightness(1) invert(1)}
#m_menu_content_links li a{
  color:var(--ms-graphite) !important;font-weight:700 !important;
  border-bottom:1px solid #d7d4c9 !important;
}
#m_menu_content_links li a:hover{background:var(--ms-signal) !important;color:var(--ms-graphite) !important}

/* Bottom_bar (mobile fixed nav — Каталог/Кошик/Порівняти) */
.bottom_bar{
  background:var(--ms-graphite) !important;
  border-top:2px solid var(--ms-signal) !important;
}
.bottom_bar a,.bottom_bar>div{color:#fff !important;font-weight:600 !important}
.bottom_bar .count-badge,.bottom_bar .quantity{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border-radius:0 !important;
}

/* === PAGINATION === */
.pagination>li>a,.pagination>li>span,.pages a,.pages .active{
  background:var(--ms-paper) !important;
  color:var(--ms-graphite) !important;
  border:1px solid #cbc8be !important;
  border-radius:0 !important;
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
  min-width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pagination>li.active>a,.pagination>li.active>span,.pages .active{
  background:var(--ms-graphite) !important;color:#fff !important;
  border-color:var(--ms-graphite) !important;
}
.pagination>li>a:hover,.pages a:hover{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border-color:var(--ms-signal) !important;
}

/* === FORMS (contact, login, register, review) === */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="search"],textarea,select,.form-control{
  border:1px solid #cbc9bf !important;
  background:var(--ms-paper) !important;
  border-radius:0 !important;
  font-family:"Manrope",sans-serif !important;
  font-size:15px !important;
  padding:12px 14px !important;
  color:var(--ms-graphite) !important;
  min-height:48px !important;
}
input:focus,textarea:focus,select:focus,.form-control:focus{
  outline:0 !important;
  border-color:var(--ms-graphite) !important;
  box-shadow:0 0 0 3px rgba(240,120,43,.25) !important;
}
label,.control-label{
  color:var(--ms-graphite) !important;
  font-weight:600 !important;
  font-family:"Manrope",sans-serif !important;
}

/* === PRODUCT DETAIL PAGE — price block + tabs === */
.product_info .price,.product-detail .price,#product .price{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;
  color:var(--ms-graphite) !important;
  font-size:32px !important;
}
.product_info .price-old{color:var(--ms-muted) !important;text-decoration:line-through;font-size:20px !important}
.nav-tabs>li>a,.tab_link,.tabs a{
  border-radius:0 !important;font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;
  font-size:12px !important;padding:14px 18px !important;
  border:1px solid #cbc8be !important;background:var(--ms-paper) !important;
  color:var(--ms-graphite) !important;
}
.nav-tabs>li.active>a,.nav-tabs>li>a.active,.tab_link.active{
  background:var(--ms-graphite) !important;color:#fff !important;
  border-color:var(--ms-graphite) !important;
}

/* === OCFILTER SIDEBAR === */
.ocfilter-option{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;
  border-radius:0 !important;padding:16px !important;
}
.ocfilter-option-name{
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;
  font-size:12px !important;color:var(--ms-graphite) !important;
  border-bottom:1px solid #cbc8be;padding-bottom:8px;margin-bottom:10px;
}
.ocfilter-option-values label{font-weight:500 !important;color:var(--ms-graphite) !important;font-size:14px !important}
.ocfilter button[type="submit"],#ocfilter_button_reset{
  background:var(--ms-signal) !important;color:var(--ms-graphite) !important;
  border:0 !important;border-radius:0 !important;
  font-weight:800 !important;text-transform:uppercase;letter-spacing:.03em;
  min-height:48px !important;
}

/* === LANGUAGE/CURRENCY SWITCHER === */
#form-language,#form-currency,.language-switch,.currency-switch{
  background:transparent !important;
}
#form-language button,#form-currency button,.language-switch button{
  background:transparent !important;color:var(--ms-graphite) !important;
  border:0 !important;font-weight:700 !important;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;
}
#form-language button:hover,#form-currency button:hover{color:var(--ms-signal-dark) !important}

/* === TABLE (cart, checkout) === */
.table,.table-bordered,.cart_table{
  background:var(--ms-paper) !important;
  border:1px solid #cbc8be !important;
  border-radius:0 !important;
}
.table>thead>tr>th,.table th{
  background:var(--ms-graphite) !important;color:#fff !important;
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.03em;
  font-size:12px !important;border:0 !important;
}
.table>tbody>tr>td,.table td{
  border-color:#e6e4dc !important;color:var(--ms-graphite) !important;
}

/* === ALERTS / NOTIFICATIONS === */
.alert-success{background:#e8f5e0 !important;border:1px solid var(--ms-olive) !important;color:var(--ms-olive-dark) !important;border-radius:0 !important}
.alert-danger,.alert-warning{background:#fef2ee !important;border:1px solid var(--ms-signal-dark) !important;color:var(--ms-signal-dark) !important;border-radius:0 !important}
.alert-info{background:#f0f4e8 !important;border:1px solid var(--ms-olive) !important;color:var(--ms-olive-dark) !important;border-radius:0 !important}

