/* ==========================================================================
   OS24 — Office Systems 24  ·  VARIANT A "Warm Scandinavian"
   Self-contained skin, served as catalog/view/stylesheet/os24-skin.css
   Loaded AFTER the base stylesheet so every rule below overrides the theme.
   Font: Manrope (headings) — self-hostable, Cyrillic subset via Google Fonts.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap&subset=cyrillic,latin');

:root{
  --paper:#faf6f0;      /* warm-white page          */
  --card:#ffffff;
  --sand:#f1e8dc;       /* section / menu tint      */
  --sand-2:#e7dccb;
  --oak:#b8895a;        /* warm oak accent          */
  --oak-d:#9a6b3e;
  --terra:#c8654b;      /* terracotta accent        */
  --terra-d:#a94e38;
  --ink:#3a3129;        /* text                     */
  --muted:#8a7e70;
  --line:#e6dccd;
  --sale:#c8654b;       /* Акція badge / old price  */
}

body{ background:var(--paper); color:var(--ink);
  font-family:"Manrope",system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-family:"Manrope",system-ui,Arial,sans-serif; letter-spacing:-.01em; }
a{ color:var(--oak-d); }

/* ---- top strip + header ------------------------------------------------- */
#top{ background:var(--sand); border-bottom:1px solid var(--line); }
#top .list-inline-item > a, #top .list-inline-item .dropdown > a{ color:var(--muted); }
header{ background:var(--paper); }
#logo a, #logo h1{ color:var(--ink); font-weight:800; letter-spacing:.02em; }
#search .form-control{ border:1px solid var(--line); border-radius:10px 0 0 10px; }
#search .btn{ background:var(--oak); border-color:var(--oak); color:#fff; border-radius:0 10px 10px 0; }
#search .btn:hover{ background:var(--oak-d); border-color:var(--oak-d); }
#cart > .btn, #cart .btn-inverse{ background:var(--oak) !important; border-color:var(--oak) !important; color:#fff !important; border-radius:10px; }

/* ---- main menu (override base blue gradient) ---------------------------- */
#menu{ background:var(--sand) !important; background-image:none !important;
  border:1px solid var(--line); border-radius:12px; }
#menu .navbar-nav > li > a, #menu .nav-link{ color:var(--ink) !important; text-shadow:none;
  font-weight:700; font-size:14px; padding:12px 16px; }
#menu .navbar-nav > li > a:hover, #menu .nav-link:hover{ color:var(--terra-d) !important; background:var(--sand-2); border-radius:8px; }
#menu .navbar-toggler i, #category{ color:var(--ink); }
#menu .dropdown-menu{ border:1px solid var(--line); border-top:3px solid var(--oak);
  border-radius:0 0 10px 10px; box-shadow:0 18px 40px -24px rgba(58,49,41,.4); }
#menu .dropdown-item{ color:var(--ink); }
#menu .dropdown-item:hover{ background:var(--sand); color:var(--terra-d); }

/* ---- HERO --------------------------------------------------------------- */
.os24-hero{ position:relative; overflow:hidden; margin:0 0 8px;
  background:linear-gradient(135deg,#f6ede0 0%, #f1e3d1 55%, #ecd9c2 100%); }
.os24-hero::after{ content:""; position:absolute; right:-120px; top:-40px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,137,90,.20), rgba(184,137,90,0) 70%); pointer-events:none; }
.os24-hero-inner{ position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:64px 24px 56px; }
.os24-eyebrow{ display:inline-block; color:var(--oak-d); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; font-size:12px; margin-bottom:14px; }
.os24-hero h1{ font-size:clamp(30px,4.6vw,52px); line-height:1.05; margin:0 0 14px; max-width:16ch; color:var(--ink); }
.os24-hero p{ color:#5c5245; font-size:18px; max-width:52ch; margin:0 0 26px; }
.os24-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.os24-btn{ display:inline-block; font-weight:700; padding:13px 26px; border-radius:30px; text-decoration:none; transition:.18s; }
.os24-btn-primary{ background:var(--terra); color:#fff; }
.os24-btn-primary:hover{ background:var(--terra-d); color:#fff; }
.os24-btn-ghost{ background:transparent; color:var(--oak-d); border:1.5px solid var(--oak); }
.os24-btn-ghost:hover{ background:var(--oak); color:#fff; }
.os24-stats{ display:flex; gap:40px; margin-top:38px; flex-wrap:wrap; }
.os24-stat .n{ font-size:24px; font-weight:800; color:var(--ink); }
.os24-stat .l{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--oak-d); }

/* ---- category tiles ----------------------------------------------------- */
.os24-cats{ max-width:1140px; margin:0 auto; padding:44px 24px 6px; }
.os24-cats h2{ font-size:24px; margin:0 0 22px; }
.os24-cats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.os24-tile{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px;
  min-height:124px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  text-decoration:none; color:var(--ink); box-shadow:0 8px 24px -20px rgba(58,49,41,.4); transition:.18s; }
.os24-tile:hover{ transform:translateY(-4px); border-color:var(--oak); box-shadow:0 18px 34px -22px rgba(184,137,90,.6); }
.os24-tile .ic{ font-size:30px; line-height:1; }
.os24-tile .nm{ font-weight:700; font-size:15px; line-height:1.25; }
@media (max-width:900px){ .os24-cats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .os24-cats-grid{ grid-template-columns:1fr; } }

/* ---- product cards (featured module etc.) ------------------------------- */
.product-thumb{ display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%; transition:.18s; }
.product-thumb:hover{ transform:translateY(-4px); border-color:var(--oak);
  box-shadow:0 20px 38px -24px rgba(58,49,41,.45); }
.product-thumb .image{ position:relative; background:#fff; }
.product-thumb .image img{ width:100%; height:220px; object-fit:contain; padding:14px; }
.product-thumb .content{ display:flex; flex-direction:column; flex:1; }
.product-thumb .description{ padding:16px; }
.product-thumb .description h4{ font-size:15px; font-weight:700; line-height:1.3; }
.product-thumb .description h4 a{ color:var(--ink); text-decoration:none; }
.product-thumb .description > p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:var(--muted); font-size:13px; }

/* price / special */
.price{ color:var(--ink); }
.price-new{ font-weight:800; font-size:1.15rem; color:var(--terra-d); }
.price-old{ color:var(--muted); text-decoration:line-through; font-weight:600; margin-left:6px; }
.price-tax{ color:var(--muted); font-size:12px; }

/* "Акція" corner badge — only on discounted cards, no twig change (uses :has) */
.product-thumb:has(.price-old) .image::after{ content:"Акція"; position:absolute; top:12px; left:12px;
  background:var(--sale); color:#fff; font-weight:800; font-size:12px; letter-spacing:.04em;
  padding:5px 12px; border-radius:20px; box-shadow:0 6px 14px -6px rgba(200,101,75,.8); }

/* ---- GOTCHA FIX 1: buy buttons overlapping price ------------------------ */
/* base: .description{margin-bottom:45px} + .button{position:absolute;bottom:0} */
.product-thumb .description{ margin-bottom:0 !important; flex:1 1 auto; }
.product-thumb .button{ position:static !important; display:flex; gap:8px; width:auto;
  padding:0 16px 16px; margin-top:auto; }
.product-thumb .button button{ flex:1; width:auto; border:1px solid var(--line) !important;
  background:var(--sand) !important; color:var(--oak-d) !important; line-height:40px; border-radius:10px; transition:.15s; }
.product-thumb .button button:first-child{ flex:2; background:var(--oak) !important; border-color:var(--oak) !important; color:#fff !important; font-weight:700; }
.product-thumb .button button:hover{ background:var(--oak-d) !important; border-color:var(--oak-d) !important; color:#fff !important; }

/* ---- GOTCHA FIX 2 + 3: mega-dropdown off-screen & column overflow ------- */
@media (min-width:960px){
  #menu .nav-item .dropdown-menu{ left:0 !important; right:auto !important; max-width:720px; }
  #menu .nav-item:nth-last-child(-n+4) .dropdown-menu{ left:auto !important; right:0 !important; }
  #menu .dropdown-inner{ flex-wrap:wrap; gap:2px 26px; }
  #menu .dropdown-inner ul{ width:200px; min-width:200px; }
}
#menu .dropdown-item{ white-space:normal; line-height:1.35; }

/* ---- footer polish (base is #303030) ------------------------------------ */
footer{ background:#2c2620; color:#e5dccd; border-top:3px solid var(--oak); }
footer a{ color:#d8c3a6; }
footer a:hover{ color:#fff; }
footer h5{ color:#fff; }

/* OS24 text wordmark (no logo image; header falls back to h1) */
#logo h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
#logo h1 a{color:#3a3129;text-decoration:none}
#logo h1 a:hover{color:#c8654b}

/* Photo category tiles (real product photos from the OS24 catalog) */
.os24-tile-photo{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;padding:0;overflow:hidden;border-radius:14px;background-size:cover;background-position:center;border:1px solid #eadfce}
.os24-tile-photo .nm{position:relative;z-index:1;width:100%;margin:0;padding:12px 14px;color:#fff;font-weight:700;font-size:16px;background:linear-gradient(to top, rgba(35,28,20,.78), rgba(35,28,20,0));text-shadow:0 1px 2px rgba(0,0,0,.35)}
.os24-tile-photo::after{content:"";position:absolute;inset:0;background:rgba(58,49,41,0);transition:background .2s}
.os24-tile-photo:hover::after{background:rgba(58,49,41,.12)}
.os24-tile-photo:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(58,49,41,.14)}

/* Subcategory plates on category pages */
.os24-subcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:10px 0 24px}
.os24-subcat{display:flex;flex-direction:column;border:1px solid #eadfce;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;transition:transform .15s, box-shadow .15s}
.os24-subcat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(58,49,41,.12)}
.os24-subcat .img{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#f5efe4}
.os24-subcat .nm{padding:10px 12px;font-weight:600;font-size:14px;line-height:1.3;color:#3a3129}
.os24-subcat:hover .nm{color:#c8654b}