/*
Theme Name: Interoil Lukoil-like
Theme URI: https://example.com/
Author: Cursor Agent
Description: Minimal responsive theme with navigation/layout similar to provided screenshot (top red bar, main menu, catalog grid, right sidebar).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: interoil-lukoil
*/

:root{
  --container: 1140px;
  --red: #c51f2b;
  --red-dark:#a31621;
  --text:#222;
  --muted:#6b7280;
  --border:#d7d7d7;
  --bg-soft:#f2f3f5;
  --shadow: 0 1px 0 rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
}
img{max-width:100%;height:auto}
a{color:inherit}
.io-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
}
.io-sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Topbar */
.io-topbar{
  background:var(--red);
  color:#fff;
  font-size:13px;
}
.io-topbar__row{
  display:flex;
  gap:16px;
  align-items:center;
  min-height:34px;
}
.io-topbar__nav{flex:1;min-width:0}
.io-topbar__nav ul{
  list-style:none;
  display:flex;
  gap:16px;
  padding:0;margin:0;
  flex-wrap:wrap;
}
.io-topbar__nav a{
  text-decoration:none;
  opacity:.95;
}
.io-topbar__nav a:hover{opacity:1;text-decoration:underline}
.io-topbar__right{
  display:flex;
  align-items:center;
  gap:16px;
  white-space:nowrap;
}
.io-topbar__hotline strong{font-weight:700}
.io-topbar__search{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  border-radius:2px;
  padding:2px 6px;
}
.io-topbar__search input{
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  width:160px;
  font-size:13px;
}
.io-topbar__search input::placeholder{color:rgba(255,255,255,.8)}
.io-topbar__search button{
  border:0;background:transparent;color:#fff;
  cursor:pointer;
  padding:2px 4px;
}
.io-topbar__lang{
  border-left:1px solid rgba(255,255,255,.25);
  padding-left:12px;
  opacity:.95;
}

/* Main header */
.io-header{
  border-bottom:1px solid var(--border);
  background:#fff;
}
.io-header__row{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:74px;
}
.io-logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
}
.io-logo img{max-height:52px;width:auto}
.io-mainnav{margin-left:auto}
.io-mainnav ul{
  list-style:none;
  display:flex;
  gap:22px;
  padding:0;margin:0;
  align-items:center;
}
.io-mainnav a{
  text-decoration:none;
  font-weight:600;
  color:#2b2b2b;
}
.io-mainnav .current-menu-item > a,
.io-mainnav a:hover{
  color:var(--red);
}
.io-burger{
  display:none;
  margin-left:auto;
  border:1px solid var(--border);
  background:#fff;
  border-radius:6px;
  padding:8px 10px;
  cursor:pointer;
}
.io-burger span{
  display:block;
  width:22px;height:2px;
  background:#2b2b2b;
  margin:4px 0;
}

/* Title bar + breadcrumb */
.io-titlebar{
  background:var(--bg-soft);
  border-bottom:1px solid #e7e7e7;
}
.io-titlebar__inner{
  padding:18px 0;
}
.io-titlebar h1{
  margin:0;
  font-size:36px;
  font-weight:800;
  letter-spacing:.2px;
}
.io-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  padding:10px 0 0;
}
.io-breadcrumbs a{color:var(--muted);text-decoration:none}
.io-breadcrumbs a:hover{color:var(--red);text-decoration:underline}
.io-breadcrumbs .io-sep{opacity:.6}

/* Layout */
.io-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:28px;
  padding:22px 0 44px;
}

/* Product grid */
.io-products{
  padding-top:18px;
}
.io-products__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.io-product{
  border:1px solid #e3e3e3;
  background:#fff;
  box-shadow:var(--shadow);
}
.io-product__title{
  padding:12px 12px 6px;
  font-weight:800;
  font-size:15px;
  text-transform:uppercase;
  line-height:1.25;
  min-height:54px;
}
.io-product__img{
  padding:10px 12px 6px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:210px;
}
.io-product__img img{max-height:210px;object-fit:contain}
.io-product__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:8px 10px 10px;
}
.io-iconbtn{
  width:28px;height:28px;
  border:1px solid #d7d7d7;
  border-radius:2px;
  background:#fff;
  cursor:pointer;
}
.io-iconbtn:hover{border-color:#b9b9b9}

/* Sidebar */
.io-sidebar .io-card{
  border:1px solid #e3e3e3;
  box-shadow:var(--shadow);
  background:#fff;
  margin-bottom:16px;
}
.io-card__title{
  padding:12px 14px;
  font-weight:800;
  text-transform:uppercase;
  font-size:14px;
  border-bottom:1px solid #ededed;
}
.io-card__body{padding:14px}
.io-side-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-decoration:none;
  padding:10px 12px;
  border:1px solid #e1e1e1;
  margin:10px 0 0;
  background:#fff;
}
.io-side-links a:hover{border-color:var(--red);color:var(--red)}
.io-promo{
  background:var(--red);
  color:#fff;
}
.io-promo .io-card__title{border-bottom-color:rgba(255,255,255,.25)}
.io-promo .io-card__body{padding:16px}
.io-promo__big{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  font-size:88px;
  font-weight:900;
}
.io-promo__cta{
  display:block;
  margin-top:12px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
}
.io-promo__cta:hover{background:rgba(0,0,0,.08)}

/* Footer */
.io-footer{
  border-top:1px solid var(--border);
  background:#fff;
  padding:24px 0;
  color:#4b5563;
  font-size:14px;
}

/* Mobile */
@media (max-width: 1024px){
  .io-layout{grid-template-columns:1fr 300px}
  .io-products__grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 820px){
  .io-topbar__row{flex-wrap:wrap}
  .io-topbar__search input{width:120px}
  .io-layout{grid-template-columns:1fr}
  .io-sidebar{order:2}
  .io-products__grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .io-titlebar h1{font-size:28px}
  .io-products__grid{grid-template-columns:1fr}

  .io-mainnav{
    display:none;
    position:absolute;
    left:0;right:0;
    top:108px;
    background:#fff;
    border-bottom:1px solid var(--border);
    z-index:50;
    padding:10px 16px 18px;
  }
  .io-mainnav ul{flex-direction:column;align-items:flex-start;gap:12px}
  body.io-nav-open .io-mainnav{display:block}

  .io-header__row{position:relative}
  .io-burger{display:inline-block}
}