/* ===========================================================================
   VKLADOVKE — design tokens
   Style source: promo.octemplates.net (theme oct_promo), measured 2026-08-07.
   Variable names are the TARGET'S OWN, so a later diff against the reference
   stays mechanical. Do not rename them.
   Spec: design/clone/docs/research/DESIGN_SPEC.md
   =========================================================================== */
:root{
  --pr-primary-dark-color:  #0c296a;   /* navy — primary buttons, catalog btn, counts */
  --pr-primary-light-color: #4f5f99;   /* indigo — secondary / submit buttons */
  --pr-dark-text-color:     #121715;   /* body text AND the footer background */
  --pr-dark-grey-color:     #5c6168;
  --pr-grey-color:          #9da4ae;   /* muted meta: model, dates */
  --pr-light-grey-color:    #e5e9ef;
  --pr-green-color:         #4ab246;   /* "В наявності" only — NOT a brand colour */
  --pr-red-color:           #d51f1f;   /* sale price + discount pill */
  --pr-yellow-color:        #ffc445;
  --pr-blue-color:          #357af0;
  --pr-links-color:         #357af0;
  --pr-light-text-color:    #9da4ae;
  --pr-interactive-color:   #52bb38;
  --pr-dashed-border:       1px dashed #f3f3f3;
  --pr-main-font:           "Noto Sans", sans-serif;
  --pr-main-transition:     .3s ease-out;
  --pr-bg:                  #f3f3f3;   /* the PAGE background — cards float on it */
  --pr-white:               #fff;
  --pr-border:              #f3f3f3;
  --pr-header-shadow:       0 2px 24px 0 rgba(37,38,39,.08);
  --pr-radius-card:         12px;
  --pr-radius-ctl:          8px;
  --pr-radius-pill:         4px;
  --pr-container:           1320px;
}

/* --- base ---------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--pr-main-font);
  font-size:14px; line-height:21px; font-weight:500;
  color:var(--pr-dark-text-color);
  background:var(--pr-bg);
}
/* The UA visited colour leaks into anything that inherits colour from a parent —
   card titles and the dark footer especially.
   `a:visited{color:inherit}` was the previous attempt and it NEVER WORKED:
   browsers deliberately restrict :visited to a short list of properties and only
   honour explicit colour values there, so `inherit` is dropped and the UA colour
   wins anyway. It went unnoticed because the effect only appears once a link has
   actually been visited — invisible on a fresh profile, and invisible to headless
   Chrome, which does not apply :visited at all. Hlib saw the footer turn red
   after a day of clicking around the store.
   Literal hex on purpose: var() is not reliably resolved inside :visited. */
a{color:inherit;text-decoration:none;transition:color var(--pr-main-transition)}
a:visited{color:#121715}   /* --pr-dark-text-color, the body-text default */
a:hover{color:var(--pr-primary-dark-color)}
h1,h2,h3,h4,h5,h6{color:var(--pr-dark-text-color);font-weight:700}
h1{font-size:24px;line-height:36px}
h2{font-size:22px;line-height:33px;font-weight:600}
h3{font-size:20px;line-height:30px;font-weight:600}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--pr-primary-light-color);outline-offset:2px}

/* --- layout primitives --------------------------------------------------- */
.container,.container-xl,.container-fluid{
  max-width:var(--pr-container);margin-inline:auto;padding-inline:12px;width:100%;
}
/* The whole design is white cards on grey. This is the single most-used class. */
.vk-card,.content-block{
  background:var(--pr-white);
  border-radius:var(--pr-radius-card);
  padding:16px;
  border:0;
}
.vk-section{margin-top:24px}
.vk-section-title{font-size:22px;line-height:33px;font-weight:600;margin:0 0 16px}
.vk-muted{color:var(--pr-grey-color)}
.vk-hairline{border:0;border-top:1px solid var(--pr-border);margin:16px 0}

/* --- buttons ------------------------------------------------------------- */
.vk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  padding:0 20px;height:44px;border:0;border-radius:var(--pr-radius-ctl);
  cursor:pointer;text-align:center;
  transition:background-color var(--pr-main-transition),color var(--pr-main-transition),
             box-shadow var(--pr-main-transition);
}
.vk-btn-primary{background:var(--pr-primary-dark-color);color:#fff}
.vk-btn-primary:hover{background:#0a2158;color:#fff}

/* Buttons that are ANCHORS must restate their colour against the global link
   rules above. `a:visited{color:inherit}` scores 0,1,1 and beats a bare class
   at 0,1,0, so a checkout button the visitor has already used can inherit the
   dark body colour and go navy-on-navy — near-invisible, and invisible to
   automated checks too, because headless Chrome does not apply :visited and
   getComputedStyle deliberately lies about it. `a:hover` sets navy as well.
   40-home.css already pins .vk-btn-secondary, .vk-ql and .vk-b4 this way; the
   primary and light buttons were simply never covered. */
a.vk-btn-primary,
a.vk-btn-primary:visited,
a.vk-btn-primary:hover,
a.vk-btn-primary:focus{color:#fff}
a.vk-btn-light,
a.vk-btn-light:visited,
a.vk-btn-light:hover,
a.vk-btn-light:focus{color:var(--pr-dark-text-color)}
.vk-btn-secondary{background:var(--pr-primary-light-color);color:#fff}
.vk-btn-secondary:hover{background:#44528a;color:#fff}
.vk-btn-light{background:var(--pr-bg);color:var(--pr-dark-text-color)}
.vk-btn-light:hover{background:var(--pr-light-grey-color);color:var(--pr-dark-text-color)}
.vk-btn-block{width:100%}

/* --- form controls ------------------------------------------------------- */
.vk-input,input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],select,textarea{
  font-family:inherit;font-size:12px;line-height:normal;color:var(--pr-dark-text-color);
  background:var(--pr-white);
  border:2px solid var(--pr-border);border-radius:var(--pr-radius-ctl);
  padding:8px 16px;min-height:40px;width:100%;
  transition:border-color var(--pr-main-transition);
}
.vk-input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--pr-primary-light-color);outline:0;
}
::placeholder{color:var(--pr-grey-color)}

/* --- small pills --------------------------------------------------------- */
.vk-pill{display:inline-block;border-radius:var(--pr-radius-pill);
  padding:2px 8px;font-size:10px;line-height:15px;font-weight:400}
.vk-pill-stock{background:var(--pr-bg);color:var(--pr-green-color)}
.vk-pill-order{background:var(--pr-bg);color:var(--pr-yellow-color)}
.vk-pill-out  {background:var(--pr-bg);color:var(--pr-grey-color)}
.vk-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--pr-primary-dark-color);color:#fff;font-size:10px;font-weight:600}

/* --- stock-theme corrections --------------------------------------------- */
/* OpenCart's default stylesheet.css pads the content and both columns by
   730px, dropping to 400px above 576px:

     #content, #column-left, #column-right { padding-bottom: 730px; }

   It is a default-theme hack, and on this store it simply leaves a dead band
   above the footer on EVERY page — 424px on the home page, 440px under the
   related-products row on a product page, and more than twice that on a phone.
   Hlib spotted it as "free space above the footer and it seems like it's
   everywhere". It was: the rule is global.

   32px keeps the footer from butting against the last card without inventing a
   void. Also shrinks the filter rail, which was carrying the same padding. */
#content,
#column-left,
#column-right{padding-bottom:32px}

/* --- utility ------------------------------------------------------------- */
.vk-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-fs-10{font-size:10px;line-height:15px}
.vk-fs-12{font-size:12px;line-height:18px}
.vk-fs-14{font-size:14px;line-height:21px}