@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Onest:wght@500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');
:root{
	--red:#8e1c25;
	--red-dark:#6a151c;
	--red-wash:rgba(142,28,37,.08);
	--red-line:rgba(142,28,37,.22);
	--green:#15683f;
	--green-wash:rgba(21,104,63,.1);
	--blue:#2a5fae;
	--ink:#181a1f;
	--soft:#3c414b;
	--muted:#71757f;
	--faint:#9aa0aa;
	--line:#e6e6ec;
	--line-soft:#f0f1f4;
	--plate:#f3f4f6;
	--bg:#f6f7f9;
	--card:#ffffff;
	--foot:#272b33;
	--foot-2:#21242b;
	--r-lg:20px;
	--r-md:14px;
	--r-sm:10px;
	--r-pill:999px;
	--sh-sm:0 1px 2px rgba(24,26,31,.05),0 2px 6px rgba(24,26,31,.04);
	--sh-md:0 8px 26px -8px rgba(24,26,31,.14),0 2px 8px rgba(24,26,31,.05);
	--sh-lg:0 26px 64px -22px rgba(24,26,31,.3);
	--maxw:1420px;
	--ease:cubic-bezier(.16,1,.3,1)
}
/* ===== 2. BASE RESET ===== */
*{
	box-sizing:border-box
}

html,body{
	margin:0;
	padding:0
}

body{
	font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
	background:var(--bg);
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility
}

h1,h2,h3,h4,.h{
	font-family:'Onest','Manrope',sans-serif
}

::selection{
	background:var(--red);
	color:#fff
}

img{
	display:block;
	max-width:100%
}

button{
	font-family:inherit;
	cursor:pointer;
	border:none;
	background:none;
	color:inherit
}

a{
	color:inherit;
	text-decoration:none
}
a:hover,
a:focus,
a:active{
	color:inherit!important;
	text-decoration:none!important
}
.itb-btn-primary,
.itb-btn-primary:hover,
.prod-buy:hover,
.route:hover,
.mailbtn:not(.alt):hover,
.btn-red:hover,
.btn-red:hover{
	color:#fff!important;
}
input{
	font-family:inherit
}

.mono{
	font-family:'JetBrains Mono',ui-monospace,monospace
}

ul{
	margin:0;
	padding:0;
	list-style:none
}

*::-webkit-scrollbar{
	height:8px;
	width:8px
}

*::-webkit-scrollbar-thumb{
	background:#cfd2d8;
	border-radius:8px
}

*::-webkit-scrollbar-track{
	background:transparent
}

input[type=number]{
	-moz-appearance:textfield
}

input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0
}
.dropdown-menu li.disabled .search-suggestion .title{
   border-bottom: 2px solid transparent!important;
}
.wrap{
	max-width:var(--maxw);
	margin:0 auto;
	padding:0 24px
}
.hm-chip-live:hover{
	color:#fff!important;
}
@media(max-width:640px){
	.hm-chip-live {
        top: -22px!important;
	}
	    .hm-chip-war {
        top: 76px!important;
		right: -18px!important;
    }
       .hm-chip-num {
        left: -17px!important;
    }
	.wrap{
		padding:0 16px
	}

}

main p a{
	color:var(--red);
	font-weight:700
}

main p a:hover{
	color:var(--red-dark)
}
#coGrid label{
	margin-bottom:0;
}
#buy1Btn[data-sp-fast-order-initialized]{
	display:none;
}

.itb-rev{
  --brand:#8e1c25; --brand-hover:#6a151c;
  --brand-soft:#fdf2f3; --brand-soft-bd:#fbe1e3;
  --neutral-400:#a7a7b4; --neutral-900:#14141c;
  --surface-page:#ffffff; --surface-card:#ffffff; --surface-subtle:#f7f7f9;
  --border:#e4e4ea; --border-strong:#d2d2db;
  --text-strong:#14141c; --text-body:#3a3a4d; --text-muted:#76768a;
  --success:#1f9d57;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:40px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(20,20,28,.07); --shadow-lg:0 18px 44px rgba(20,20,28,.12); --shadow-brand:0 12px 28px rgba(142,28,37,.28);
  --container:1200px;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-base:200ms;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--font-body); color:var(--text-body); line-height:1.5; -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.itb-rev *, .itb-rev *::before, .itb-rev *::after { box-sizing:border-box; }
.itb-rev .r-page{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.itb-rev .r-wide{ max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.itb-rev .r-section{ position: relative; }
.itb-rev .r-hero__title, .itb-rev .r-stat__num, .itb-rev .r-head__title, .itb-rev .r-process__title, .itb-rev .r-live__h, .itb-rev .r-cta__title, .itb-rev .r-av, .itb-rev .r-qs li::before, .itb-rev .r-audio__t{ font-family: var(--font-body); }
.itb-rev [data-reveal]{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
.itb-rev [data-reveal].is-in{ opacity: 1; transform: none; }
.itb-rev .r-hero{ padding: clamp(24px, 3.5vw, 48px) 0 clamp(20px, 3vw, 36px); position: relative; }
.itb-rev .r-hero__inner{ position: relative; z-index: 1; }
.itb-rev .r-eyebrow{ display: inline-flex; align-items: center; gap: 8px; color: var(--success);
    font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.itb-rev .r-eyebrow::before{ content: ""; width: 22px; height: 2px; background: var(--success); border-radius: 2px; }
.itb-rev .r-hero__title{
    font-weight: 800;
    font-size: clamp(2.5rem, 1rem + 5.8vw, 4.6rem); line-height: 1.02;
    letter-spacing: -0.03em; color: var(--text-strong);
    margin: 18px 0 0;
  }
.itb-rev .r-hero__title em{
    font-style: normal;
    background: linear-gradient(100deg, #6a151c 0%, var(--brand) 22%, #e8616a 45%, var(--brand) 68%, #6a151c 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: rFlow 5s linear infinite;
  }
@keyframes rFlow{ to { background-position: -220% 0; } }
.itb-rev .r-hero__lead{
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem); line-height: 1.6;
    color: var(--text-body); max-width: 680px; margin: 22px 0 0;
  }
.itb-rev .r-hero__key{
    margin-top: 26px; display: inline-flex; align-items: center; gap: 14px;
    background: var(--brand-soft); color: var(--text-strong); border: 1px solid var(--brand-soft-bd);
    border-radius: var(--radius-pill);
    padding: 12px 22px 12px 16px; font-weight: 700; font-size: clamp(.95rem, .85rem + .4vw, 1.1rem);
    box-shadow: var(--shadow-sm); max-width: 100%;
  }
.itb-rev .r-hero__key .r-pulse{
    flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(31,157,87,.6); animation: rPulse 2.4s var(--ease-out) infinite;
  }
@keyframes rPulse{ 0% { box-shadow: 0 0 0 0 rgba(31,157,87,.5);} 70%{ box-shadow: 0 0 0 12px rgba(31,157,87,0);} 100%{ box-shadow:0 0 0 0 rgba(31,157,87,0);} }
.itb-rev .r-stats{
    margin-top: clamp(22px, 3vw, 36px);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  }
.itb-rev .r-stat{
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px 22px 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
    text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-height: 152px;
  }
.itb-rev a.r-stat:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-soft-bd); text-decoration: none; }
.itb-rev .r-stat::after{ 
    content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(142,28,37,.06), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out); pointer-events: none;
  }
.itb-rev a.r-stat:hover::after{ left: 130%; }
.itb-rev .r-stat__top{ display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.itb-rev .r-stat__num{
    font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1;
    background: linear-gradient(100deg, #6a151c 0%, var(--brand) 22%, #e8616a 45%, var(--brand) 68%, #6a151c 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: rFlow 5s linear infinite;
  }
.itb-rev .r-stat__label{ font-weight: 600; font-size: 14px; color: var(--text-muted); margin-top: auto; }
.itb-rev .r-stars{ display: inline-flex; gap: 2px; color: var(--brand); }
.itb-rev .r-stars svg{ width: 17px; height: 17px; }
.itb-rev .r-stat__chip{
    font-weight: 700; font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 5px;
  }
.itb-rev .r-stat__ext{ color: var(--neutral-400); transition: color var(--dur-base); }
.itb-rev a.r-stat:hover .r-stat__ext{ color: var(--brand); }
.itb-rev .r-trust{ margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.itb-rev .r-trust__item{
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 18px; border-radius: var(--radius-md);
    background: var(--surface-subtle); border: 1px solid var(--border);
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
  }
.itb-rev .r-trust__item:hover{ transform: translateY(-3px); border-color: var(--brand-soft-bd); }
.itb-rev .r-trust__ic{
    flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-soft-bd);
  }
.itb-rev .r-trust__ic svg{ width: 20px; height: 20px; }
.itb-rev .r-trust__t{ font-weight: 700; color: var(--text-strong); font-size: 15px; line-height: 1.3; }
.itb-rev .r-trust__d{ font-size: 13.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.itb-rev .r-head{ margin: clamp(40px, 5vw, 60px) 0 clamp(16px, 2.5vw, 26px); max-width: 760px; }
.itb-rev .r-head__title{ font-weight: 800; letter-spacing: -0.025em;
    font-size: clamp(2rem, 1.1rem + 2.8vw, 3.1rem); line-height: 1.06; color: var(--text-strong); margin: 14px 0 0; }
.itb-rev .r-head__sub{ font-size: clamp(1rem, .92rem + .4vw, 1.15rem); color: var(--text-body); margin: 14px 0 0; line-height: 1.55; }
.itb-rev .r-reviews{ padding-bottom: 8px; }
.itb-rev .r-marquee{ position: relative; padding: 6px 0; overflow: hidden; }
.itb-rev .r-marquee + .r-marquee{ margin-top: 18px; }
.itb-rev .r-track{ display: flex; gap: 18px; width: max-content; padding: 8px 24px; will-change: transform; }
.itb-rev .r-track--l{ animation: rScrollL var(--dur, 64s) linear infinite; }
.itb-rev .r-track--r{ animation: rScrollR var(--dur, 72s) linear infinite; }
.itb-rev .r-marquee:hover .r-track{ animation-play-state: paused; }
@keyframes rScrollL{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rScrollR{ from { transform: translateX(-50%); } to { transform: translateX(0); } }
.itb-rev .r-card{
    flex: none; width: 360px; background: var(--surface-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px 22px 20px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
.itb-rev .r-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-soft-bd); }
.itb-rev .r-card__head{ display: flex; align-items: center; gap: 12px; }
.itb-rev .r-av{ flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.02em; }
.itb-rev .r-card__who{ min-width: 0; }
.itb-rev .r-card__name{ font-weight: 700; color: var(--text-strong); font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.itb-rev .r-vfd{ display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-size: 11px; font-weight: 700; }
.itb-rev .r-vfd svg{ width: 13px; height: 13px; }
.itb-rev .r-card__meta{ font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.itb-rev .r-card__body{ font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: 0; }
.itb-rev .r-card__foot{ display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.itb-rev .r-src{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.itb-rev .r-src svg{ width: 15px; height: 15px; }
.itb-rev .r-reviews__cta{ display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.itb-rev .r-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 26px; border-radius: var(--radius-md); font-family: var(--font-body);
    font-weight: 700; font-size: 15.5px; cursor: pointer; border: 1.5px solid var(--border-strong);
    background: var(--surface-card); color: var(--text-strong); text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  }
.itb-rev .r-btn:hover{ border-color: var(--neutral-400); box-shadow: var(--shadow-sm); text-decoration: none; }
.itb-rev .r-btn:active{ transform: scale(.97); }
.itb-rev .r-btn--brand{ background: var(--brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.itb-rev .r-btn--brand:hover{ filter: brightness(.93); border-color: transparent; }
.itb-rev .r-btn svg{ width: 19px; height: 19px; }
.itb-rev .r-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out), margin .4s; }
.itb-rev .r-grid.is-open{ max-height: 2600px; opacity: 1; }
.itb-rev .r-grid .r-card{ width: auto; }
.itb-rev .r-process{ margin-top: clamp(20px, 3vw, 40px); }
.itb-rev .r-process__panel{
    background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-xl);
    padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden;
  }
.itb-rev .r-process__grid{ display: grid; grid-template-columns: 1.05fr 1.35fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.itb-rev .r-badge-pill{
    display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff;
    font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 8px 16px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-brand);
  }
.itb-rev .r-process__title{ font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.55rem, 1rem + 1.7vw, 2.2rem); line-height: 1.12; color: var(--text-strong); margin: 16px 0 0; }
.itb-rev .r-process__text{ color: var(--text-body); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; max-width: 420px; }
.itb-rev .r-note{ margin-top: 22px; background: var(--surface-card); border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: var(--radius-md); padding: 16px 18px; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.itb-rev .r-note strong{ color: var(--text-strong); }
.itb-rev .r-qs{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; counter-reset: q; list-style: none; padding: 0; margin: 0; }
.itb-rev .r-qs li{ counter-increment: q; display: flex; gap: 14px; align-items: center; padding: 11px 0;
    border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-strong); font-weight: 500; }
.itb-rev .r-qs li::before{ content: counter(q, decimal-leading-zero); flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); }
.itb-rev .r-live-sec{ margin-top: clamp(40px, 5vw, 64px); }
.itb-rev .r-live-sec__wrap{
    background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-2xl);
    padding: clamp(28px, 4vw, 56px); position: relative; overflow: hidden;
  }
.itb-rev .r-live__h{ font-weight: 800; letter-spacing: -.025em;
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.9rem); line-height: 1.07; color: var(--text-strong); margin: 14px 0 0; max-width: 720px; }
.itb-rev .r-live__sub{ color: var(--text-body); font-size: clamp(1rem,.92rem+.4vw,1.15rem); line-height: 1.55; margin: 14px 0 0; max-width: 640px; }
.itb-rev .r-live{ margin-top: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 820px){
.itb-rev .r-live{ grid-template-columns: 1fr; }
}
.itb-rev .r-video{ position: relative; border-radius: var(--radius-xl); overflow: hidden;
    aspect-ratio: 16/9; min-height: 250px;
    background: linear-gradient(135deg, #8e1c25 0%, #6a151c 55%, #5f1218 100%);
    box-shadow: var(--shadow-lg); }
.itb-rev .r-video::before{ content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 28px); }
.itb-rev .r-video__live{ position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: var(--brand); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 13px; border-radius: var(--radius-pill); z-index: 2; box-shadow: var(--shadow-sm); }
.itb-rev .r-video__live .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: rBlink 1.4s steps(1) infinite; }
@keyframes rBlink{ 50% { opacity: .25; } }
.itb-rev .r-video__center{ position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.itb-rev .r-play{ width: 80px; height: 80px; border-radius: 50%; border: none; cursor: pointer;
    background: #fff; color: var(--brand); display: grid; place-items: center;
    box-shadow: 0 14px 44px rgba(0,0,0,.28); transition: transform var(--dur-base) var(--ease-out); }
.itb-rev .r-play:hover{ transform: scale(1.08); }
.itb-rev .r-play::after{ content: ""; position: absolute; inset: -1px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,255,255,.65); animation: rRing 2.6s var(--ease-out) infinite; }
@keyframes rRing{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{ box-shadow:0 0 0 24px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.itb-rev .r-play svg{ width: 30px; height: 30px; margin-left: 4px; }
.itb-rev .r-video__cap{ position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; z-index: 2;
    background: linear-gradient(to top, rgba(60,8,12,.6), transparent); font-size: 14px; color: #fff; font-weight: 600; }
.itb-rev .r-live__aside{ display: flex; flex-direction: column; gap: 12px; }
.itb-rev .r-live__point{ display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.itb-rev .r-live__point:hover{ transform: translateX(4px); border-color: var(--brand-soft-bd); }
.itb-rev .r-live__ic{ flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); color: var(--brand); }
.itb-rev .r-live__ic svg{ width: 21px; height: 21px; }
.itb-rev .r-live__pt-t{ font-weight: 700; color: var(--text-strong); font-size: 15.5px; }
.itb-rev .r-live__pt-d{ color: var(--text-muted); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
.itb-rev a.r-video{ display: block; text-decoration: none; width: 100%; }
.itb-rev a.r-trust__item{ text-decoration: none; color: inherit; }
.itb-rev .r-trust__yt{ color: var(--brand); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.itb-rev .r-live__links{ display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.itb-rev .r-ytlink{ display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: var(--radius-md); background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.itb-rev .r-ytlink:hover{ transform: translateX(4px); box-shadow: var(--shadow-sm); }
.itb-rev .r-ytlink__ic{ flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.itb-rev .r-ytlink__ic svg{ width: 18px; height: 18px; }
.itb-rev .r-ytlink b{ display: block; color: var(--text-strong); font-size: 14px; font-weight: 700; }
.itb-rev .r-ytlink i{ display: block; color: var(--text-muted); font-size: 12px; font-style: normal; margin-top: 1px; }
.itb-rev .r-cta{ padding: clamp(40px,5vw,64px) 0 clamp(28px,3.5vw,48px); }
.itb-rev .r-cta__panel{
    background: linear-gradient(155deg, var(--brand-soft) 0%, var(--surface-card) 60%);
    border: 1px solid var(--brand-soft-bd); border-radius: var(--radius-2xl);
    padding: clamp(32px,5vw,60px); position: relative; overflow: hidden;
  }
.itb-rev .r-cta__row{ display: grid; grid-template-columns: 1.05fr 1.25fr; gap: clamp(32px,4vw,64px); align-items: center; }
@media (max-width: 880px){
.itb-rev .r-cta__row{ grid-template-columns: 1fr; }
}
.itb-rev .r-cta__title{ font-weight: 800; letter-spacing: -.025em;
    font-size: clamp(1.8rem,1.1rem+2.2vw,2.7rem); line-height: 1.08; color: var(--text-strong); }
.itb-rev .r-cta__sub{ color: var(--text-body); font-size: 1.05rem; line-height: 1.55; margin-top: 14px; max-width: 460px; }
.itb-rev .r-cta__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.itb-rev .r-google-g{ width: 20px; height: 20px; }
.itb-rev .r-warranty{ margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    color: var(--text-body); font-size: 14.5px; }
.itb-rev .r-warranty strong{ color: var(--text-strong); font-weight: 700; }
.itb-rev .r-warranty__ic{ flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(31,157,87,.12); color: var(--success); border: 1px solid rgba(31,157,87,.28); }
.itb-rev .r-warranty__ic svg{ width: 20px; height: 20px; }
.itb-rev .r-socials{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.itb-rev .r-soc{ position: relative; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: var(--radius-md);
    background: var(--surface-card); border: 1px solid var(--border); text-decoration: none; overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.itb-rev .r-soc::before{ content: ""; position: absolute; inset: 0; opacity: 0;
    background: var(--soc, var(--brand)); transition: opacity var(--dur-base); }
.itb-rev .r-soc > *{ position: relative; z-index: 1; }
.itb-rev .r-soc:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; text-decoration: none; }
.itb-rev .r-soc:hover::before{ opacity: .08; }
.itb-rev .r-soc__ic{ flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
    transition: transform var(--dur-base) var(--ease-out); }
.itb-rev .r-soc:hover .r-soc__ic{ transform: scale(1.12) rotate(-6deg); }
.itb-rev .r-soc__ic svg{ width: 24px; height: 24px; }
.itb-rev .r-soc__t{ font-weight: 700; color: var(--text-strong); font-size: 14.5px; }
.itb-rev .r-soc__d{ font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.itb-rev .r-soc__wide{ grid-column: 1 / -1; }
.itb-rev .r-soc__go{ margin-left: auto; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.itb-rev .r-soc:hover .r-soc__go{ transform: translateX(4px); color: var(--brand); }
.itb-rev .ic-google{ background:#fff; border:1px solid var(--border); }
.itb-rev .ic-ig{ background: linear-gradient(135deg,#f9ce34,#ee2a7b 45%,#6228d7); }
.itb-rev .ic-fb{ background:#1877f2; }
.itb-rev .ic-tg{ background: linear-gradient(135deg,#37bdf4,#1d93d2); }
.itb-rev .ic-wa{ background:#25d366; }
.itb-rev .ic-vb{ background:#7360f2; }
.itb-rev .ic-map{ background: var(--brand); }
@media (max-width: 980px){
.itb-rev .r-stats{ grid-template-columns: repeat(2, 1fr); }
.itb-rev .r-trust{ grid-template-columns: 1fr; }
.itb-rev .r-process__grid{ grid-template-columns: 1fr; }
.itb-rev .r-qs{ grid-template-columns: 1fr; }
.itb-rev .r-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
.itb-rev .r-stats{ grid-template-columns: 1fr 1fr; }
.itb-rev .r-grid{ grid-template-columns: 1fr; }
.itb-rev .r-card{ width: 300px; }
.itb-rev .r-cta__row{ grid-template-columns: 1fr; }
.itb-rev .r-socials{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
.itb-rev [data-reveal]{ opacity: 1; transform: none; transition: none; }
.itb-rev .r-track--l, .itb-rev .r-track--r{ animation: none; }
.itb-rev .r-pulse, .itb-rev .r-play::after, .itb-rev .r-video__live .dot, .itb-rev .r-hero__title em, .itb-rev .r-stat__num{ animation: none; }
.itb-rev .r-hero__title em, .itb-rev .r-stat__num{ -webkit-text-fill-color: var(--brand); color: var(--brand); }
}
/* ===== 3. КНОПКИ / ЧІПИ / ІКОНКИ (спільне) ===== */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	font-weight:700;
	border-radius:var(--r-md);
	transition:transform .12s var(--ease),background .2s,box-shadow .2s,color .2s,border-color .2s;
	white-space:nowrap;
	user-select:none;
	font-family:'Manrope',sans-serif
}
.tgbtn:hover,
.itb-garantiya .btn:hover{
	color:#fff!important;
}
.btn:active{
	transform:translateY(1px)
}

.btn-red{
	background:var(--red);
	color:#fff;
	padding:15px 26px;
	font-size:15px;
	box-shadow:0 8px 18px -8px rgba(142,28,37,.6)
}

.btn-red:hover{
	background:var(--red-dark);
	transform:translateY(-2px);
	box-shadow:0 12px 26px -10px rgba(142,28,37,.7);
	color:#fff!important;
}

.btn-ghost{
	background:#fff;
	color:var(--ink);
	border:1.5px solid var(--line);
	padding:13.5px 22px;
	font-size:14.5px
}

.btn-ghost:hover{
	border-color:var(--ink)
}

.btn-green{
	background:var(--green);
	color:#fff!important;
	padding:15px 26px;
	font-size:15px;
	box-shadow:0 8px 18px -8px rgba(21,104,63,.55)
}

.btn-green:hover{
	background:#0f4f30;
	box-shadow:0 14px 28px -10px rgba(21,104,63,.7);
	transform:translateY(-2px)
}

.btn-green:active{
	transform:translateY(0)
}

.btn-soft{
	background:var(--plate);
	color:var(--ink);
	padding:13.5px 22px;
	font-size:14.5px
}

.btn-soft:hover{
	background:#e7e9ed
}

.btn-outline{
	background:#fff;
	color:var(--red);
	border:1.5px solid var(--red-line);
	padding:13.5px 22px;
	font-size:15px
}

.btn-outline:hover{
	background:var(--red-wash);
	border-color:var(--red)
}

.ic{
	display:inline-block;
	width:1em;
	height:1em;
	vertical-align:-.13em
}

.ic svg{
	display:block;
	width:100%;
	height:100%
}

.bic{
	display:inline-block;
	line-height:0
}

.bic svg{
	display:block
}

.chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.05em;
	padding:5px 10px;
	border-radius:8px
}

.chip-new{
	background:var(--red);
	color:#fff
}

.chip-green{
	background:var(--green-wash);
	color:var(--green)
}

.chip-blue{
	background:rgba(42,95,174,.1);
	color:var(--blue)
}

/* ===== 4. REVEAL-АНІМАЦІЯ (спільне) ===== */
.anim{
	opacity:0;
	transform:translateY(16px)
}

.anim.in{
	opacity:1;
	transform:none;
	transition:opacity .5s var(--ease),transform .5s var(--ease)
}

.d1.in{
	transition-delay:.08s
}

.d2.in{
	transition-delay:.16s
}

.d3.in{
	transition-delay:.24s
}

@media(prefers-reduced-motion:reduce){
	.anim{
		opacity:1!important;
		transform:none!important;
		transition:none!important
	}

	*{
		animation:none!important;
		transition:none!important
	}

}

/* ===== 5. HEADER (спільне) ===== */
header{
	position:sticky;
	top:0;
	z-index:60
}

.mainbar{
	background:#fff;
	border-bottom:1px solid var(--line);
	transition:box-shadow .3s
}

.mainbar.scrolled{
	box-shadow:var(--sh-sm)
}

.hbar{
	display:flex;
	align-items:center;
	gap:24px;
	height:80px
}

.logo{
	flex-shrink:0;
	display:flex;
	align-items:center;
	gap:11px
}

.logo img{
	height:42px;
	width:auto
}

.search{
	flex:1;
	max-width:560px;
	position:relative
}

.search input{
	width:100%;
	height:50px;
	border:1.5px solid var(--line);
	border-radius:14px;
	padding:0 56px 0 18px;
	font-size:14.5px;
	outline:none;
	background:#fafafb;
	transition:border-color .2s,background .2s
}

.search input:focus{
	border-color:var(--red);
	background:#fff
}

.search button{
	position:absolute;
	right:5px;
	top:5px;
	width:40px;
	height:40px;
	border-radius:10px;
	background:var(--red);
	color:#fff;
	display:grid;
	place-items:center;
	transition:background .2s
}

.search button:hover{
	background:var(--red-dark)
}

.shint{
	position:absolute;
	right:58px;
	top:50%;
	transform:translateY(-50%);
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	font-weight:700;
	color:var(--faint);
	pointer-events:none;
	transition:opacity .2s
}

.shint .ic{
	font-size:15px;
	color:var(--red)
}

.search input:focus ~ .shint{
	opacity:0
}

/* ===== Выпадающая подсказка поиска (search_suggestion.js, готовый HTML, тільки CSS) ===== */
.search .dropdown-menu{
	position:absolute;
	top:calc(100% + 8px)!important;
	left:0!important;
	right:0;
	width:auto;
	max-height:min(70vh,560px);
	overflow-y:auto;
	overflow-x:hidden;
	margin:0;
	padding:6px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	box-shadow:0 22px 50px -20px rgba(24,26,31,.35);
	z-index:120;
	list-style:none
}

.search .dropdown-menu>li{
	list-style:none
}

.search .dropdown-menu li.disabled .search-suggestion{
	padding:10px 12px 6px
}

.search .dropdown-menu li.disabled .title{
	display:inline-block;
	font-size:11px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	border-bottom:2px solid var(--red);
	padding-bottom:4px
}

.search .dropdown-menu li>a{
	display:block;
	border-radius:12px;
	transition:background .15s
}

.search .dropdown-menu li>a:hover,
.search .dropdown-menu li>a:focus{
	background:var(--plate);
	text-decoration:none
}

.search .dropdown-menu .search-suggestion{
	display:flex;
	align-items:center;
	gap:12px;
	padding:9px 10px
}

.search .dropdown-menu .search-suggestion .left{
	flex:none
}

.search .dropdown-menu .search-suggestion .image{
	width:48px;
	height:48px;
	border-radius:10px;
	border:1px solid var(--line);
	background:#fafafb;
	overflow:hidden;
	display:grid;
	place-items:center
}

.search .dropdown-menu .search-suggestion .image img{
	width:100%;
	height:100%;
	object-fit:contain
}

.search .dropdown-menu .search-suggestion .center{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:3px
}

.search .dropdown-menu .search-suggestion .name{
	font-size:13.5px;
	font-weight:700;
	color:var(--ink);
	line-height:1.35;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}

.search .dropdown-menu .search-suggestion .model{
	display:none
}

.search .dropdown-menu .search-suggestion .stock{
	display:flex;
	align-items:center
}

.search .dropdown-menu .search-suggestion .stock .value{
	display:inline-block;
	width:fit-content;
	padding:2px 7px;
	border-radius:4px;
	font-size:11px;
	font-weight:700;
	color:#fff
}

.search .dropdown-menu .search-suggestion .stock.in-stock .value{
	background:var(--green)
}

.search .dropdown-menu .search-suggestion .stock.out-stock .value{
	background:var(--red)
}

.search .dropdown-menu .search-suggestion .right{
	flex:none;
	text-align:right
}

.search .dropdown-menu .search-suggestion .price{
	white-space:nowrap
}

.search .dropdown-menu .search-suggestion .price-base,
.search .dropdown-menu .search-suggestion .price-new{
	font-size:14px;
	font-weight:800;
	color:var(--red);
	font-family:'Onest',sans-serif
}

.search .dropdown-menu .search-suggestion .price-old{
	display:block;
	font-size:11.5px;
	font-weight:600;
	color:var(--faint);
	text-decoration:line-through
}

.search .dropdown-menu li.more{
	margin-top:4px
}

.search .dropdown-menu li.more a{
	border-radius:10px!important
}

.search .dropdown-menu .search-suggestion.product .more{
	background:var(--red)!important;
	color:#fff;
	opacity:1;
	border-radius:10px!important;
	padding:11px 12px;
	font-size:13px;
	font-weight:700;
	line-height:1.2;
	transition:filter .15s
}

.search .dropdown-menu li.more a:hover .more,
.search .dropdown-menu li.more a:focus .more{
	filter:brightness(.9);
	opacity:1
}

@media(max-width:480px){
	.search .dropdown-menu .search-suggestion .name{
		white-space:normal;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden
	}

}

.hsched{
	flex-shrink:0;
	text-align:right;
	line-height:1.2;
	display:flex;
	flex-direction:column;
	gap:2px;
	padding-right:4px
}

.hsched .hs1{
	font-size:14.5px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	color:var(--ink)
}

.hsched .hs2{
	font-size:11px;
	color:var(--muted);
	font-weight:600
}

.hphone{
	position:relative;
	flex-shrink:0
}

.hphone .phone-trigger{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:8px 14px 8px 9px;
	background:#fff;
	transition:border-color .2s,box-shadow .2s
}

.hphone .phone-trigger:hover,.hphone.open .phone-trigger{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm)
}

.hphone .pic{
	width:32px;
	height:32px;
	border-radius:9px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	flex-shrink:0
}

.hphone .pic svg{
	width:16px;
	height:16px
}

.hphone .num{
	font-size:17px;
	font-weight:800;
	letter-spacing:-.01em;
	font-family:'Onest',sans-serif;
	display:inline-flex;
	align-items:center;
	gap:7px
}

.hphone .num .chev{
	font-size:13px;
	color:var(--red);
	transition:transform .2s
}

.hphone.open .num .chev{
	transform:rotate(180deg)
}

.hphone .phone-trigger:hover .num{
	color:var(--red)
}

.phone-pop{
	position:absolute;
	top:calc(100% + 14px);
	right:0;
	width:280px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:var(--sh-lg);
	padding:8px;
	z-index:80;
	text-align:left;
	opacity:0;
	visibility:hidden;
	transform:translateY(-6px);
	transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s
}

.hphone.open .phone-pop{
	opacity:1;
	visibility:visible;
	transform:none
}

.phone-pop a.pp-row{
	display:flex;
	align-items:center;
	gap:11px;
	padding:10px 12px;
	border-radius:11px;
	transition:background .15s
}

.phone-pop a.pp-row:hover{
	background:var(--line-soft)
}

.phone-pop a.pp-main{
	background:var(--red-wash);
	margin-bottom:3px
}

.phone-pop a.pp-main .pp-num{
	color:var(--red);
	font-family:'Onest',sans-serif
}

.phone-pop .pp-dot{
	width:10px;
	height:10px;
	border-radius:50%;
	flex-shrink:0
}

.phone-pop .pp-num{
	font-size:15px;
	font-weight:800;
	letter-spacing:-.01em
}

.phone-pop .pp-op{
	font-size:11px;
	color:var(--muted);
	margin-left:auto;
	font-weight:700
}

.phone-pop .pp-free{
	font-size:10.5px;
	color:#fff;
	background:var(--green);
	padding:3px 8px;
	border-radius:7px;
	font-weight:800;
	margin-left:auto
}

.phone-pop .pp-div{
	height:1px;
	background:var(--line-soft);
	margin:7px 6px
}

.phone-pop .pp-msg{
	padding:2px 12px 6px;
	font-size:11px;
	color:var(--faint);
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.04em
}

.pp-icons{
	display:flex;
	gap:8px;
	padding:2px 8px 8px
}

.pp-ic{
	flex:1;
	height:46px;
	border-radius:12px;
	display:grid;
	place-items:center;
	color:#fff;
	transition:transform .22s var(--ease),box-shadow .22s
}

.pp-ic svg{
	width:21px;
	height:21px
}

.pp-ic:hover{
	transform:translateY(-3px) scale(1.06);
	box-shadow:0 10px 18px -8px rgba(24,26,31,.35)
}

.pp-ic.tg{
	background:#229ed9
}

.pp-ic.vb{
	background:#7360f2
}

.pp-ic.wa{
	background:#25d366
}

.pp-ic.ig{
	background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)
}

.pp-ic.fb{
	background:#1877f2
}

.phone-pop .pp-contacts{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin:8px 4px 4px;
	padding:12px;
	border-radius:11px;
	background:var(--red);
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	transition:background .18s
}

.phone-pop .pp-contacts:hover{
	background:var(--red-dark);
	color:#fff!important;
}

.phone-pop .pp-contacts .ic{
	font-size:16px
}

.lang{
	display:flex;
	align-items:center;
	gap:3px;
	flex-shrink:0
}

.lang a,.lang button{
	font-size:13px;
	font-weight:700;
	padding:4px 7px;
	border-radius:7px;
	color:var(--muted);
	text-decoration:none;
	transition:.15s
}

.lang a:hover,.lang button:hover{
	color:var(--red);
	background:var(--line-soft)
}

.lang button.on{
	color:var(--red);
	background:var(--red-wash)
}

.lang span{
	color:var(--line)
}

.hicons{
	display:flex;
	align-items:center;
	gap:2px
}

.istat{
	position:relative;
	width:44px;
	height:44px;
	border-radius:12px;
	display:grid;
	place-items:center;
	color:var(--soft);
	transition:.18s;
	font-size:22px
}

.istat:hover{
	background:var(--line-soft);
	color:var(--red)
}

.istat.on{
	color:var(--red)
}

.istat .badge{
	position:absolute;
	top:4px;
	right:3px;
	min-width:18px;
	height:18px;
	padding:0 4px;
	border-radius:9px;
	background:var(--red);
	color:#fff;
	font-size:10px;
	font-weight:800;
	display:grid;
	place-items:center;
	line-height:1;
	font-family:'Manrope',sans-serif
}

.istat.dark .badge{
	background:var(--ink)
}

#searchToggle{
	display:none
}

.burger{
	display:none;
	width:44px;
	height:44px;
	border-radius:12px;
	background:var(--red);
	color:#fff;
	place-items:center;
	font-size:24px;
	flex-shrink:0
}

/* ===== 6. ХЛІБНІ КРИХТИ + УЗАГАЛЬНЕНА ШАПКА СТОРІНКИ (спільне) ===== */
.crumb{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12.5px;
	color:var(--muted);
	flex-wrap:wrap;
	padding:18px 0 4px
}

.crumb a{
	transition:color .15s
}

.crumb a:hover{
	color:var(--red)
}

.crumb .sep{
	color:var(--faint);
	font-size:11px
}

.crumb .cur{
	color:var(--ink);
	font-weight:600
}

.pagehead{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:22px;
	flex-wrap:wrap;
	margin:6px 0 4px
}

.pagehead .ph-l{
	min-width:0
}

.pagehead h1{
	font-size:clamp(25px,2.8vw,32px);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.14;
	margin:0 0 6px;
	display:flex;
	align-items:center;
	gap:12px
}

.pagehead h1 .cnt{
	font-size:15px;
	font-weight:800;
	font-family:'Manrope',sans-serif;
	color:var(--muted);
	background:var(--plate);
	padding:5px 12px;
	border-radius:999px;
	letter-spacing:0
}

.pagehead .lead{
	font-size:13.8px;
	line-height:1.6;
	color:var(--soft);
	max-width:720px;
	margin:0;
	text-wrap:pretty
}

.headacts{
	display:flex;
	align-items:center;
	gap:9px;
	flex-wrap:wrap
}

.txtbtn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:700;
	color:var(--muted);
	padding:9px 13px;
	border-radius:11px;
	border:1.5px solid var(--line);
	background:#fff;
	transition:.18s
}

.txtbtn:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.txtbtn svg{
	width:15px;
	height:15px
}

.txtbtn.danger:hover{
	color:var(--red);
	border-color:var(--red-line);
	background:var(--red-wash)
}

/* ===== 7. СЕКЦІЯ З ЗАГОЛОВКОМ І "УСІ" (спільний патерн; product+category+home) ===== */
.sec{
	padding:52px 0 0
}

.sec-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin:0 0 22px
}

.sec-title{
	font-size:26px;
	font-weight:800;
	letter-spacing:-.02em;
	margin:0;
	line-height:1
}

.sec-title .hl{
	color:var(--red)
}

.sec-link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:700;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.05em;
	transition:color .2s
}

.sec-link:hover{
	color:var(--red)
}

.sec-link .ic{
	transition:transform .2s
}

.sec-link:hover .ic{
	transform:translateX(4px)
}

/* ===== 8. КАРТКА ТОВАРУ В СІТЦІ (спільне; категорія + подібні товари) ===== */
.gcards{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:14px;
	margin-top:20px
}

.gcard{
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	position:relative;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,opacity .3s
}

.gcard.in{
	animation:itbsh-rise .45s var(--ease) backwards;
	animation-delay:calc(var(--d,0)*50ms)
}

@keyframes itbsh-rise{
	from{
		opacity:0;
		transform:translateY(14px)
	}

}

.gcard:hover{
	transform:translateY(-5px);
	box-shadow:var(--sh-md);
	border-color:var(--red-line)
}

.gcard.removing{
	opacity:0;
	transform:scale(.94);
	pointer-events:none
}

.gmedia{
	position:relative;
	padding:8px 8px 2px;
	background:linear-gradient(180deg,#fbfbfc,#fff)
}

.gimgs{
	display:block;
	position:relative;
	height:160px
}

.gimgs img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
	transition:opacity .35s var(--ease),transform .35s var(--ease)
}

.gimgs .i2{
	opacity:0;
	transform:scaleX(-1) scale(1.04)
}

.gcard:hover .gimgs .i1{
	opacity:0
}

.gcard:hover .gimgs .i2{
	opacity:1;
	transform:scaleX(-1) scale(1.1)
}

.gcard.noimg .gimgs .i2{
	display:none
}

.gcard.noimg:hover .gimgs .i1{
	opacity:1
}

.gcode{
	position:absolute;
	left:8px;
	bottom:4px;
	z-index:2;
	font-family:'JetBrains Mono',ui-monospace,monospace;
	font-size:9.5px;
	font-weight:600;
	color:var(--muted);
	background:rgba(255,255,255,.92);
	border:1px solid var(--line);
	padding:2px 6px;
	border-radius:6px;
	backdrop-filter:blur(3px)
}

.gstick{
	position:absolute;
	left:8px;
	top:8px;
	z-index:2;
	display:flex;
	flex-direction:column;
	gap:4px;
	align-items:flex-start;
	pointer-events:none
}

.gstick .ps{
	display:inline-flex;
	align-items:center;
	gap:4px;
	font-size:9.5px;
	font-weight:800;
	color:var(--ink);
	background:rgba(255,255,255,.96);
	border:1px solid var(--line);
	box-shadow:0 3px 8px rgba(24,26,31,.1);
	border-radius:999px;
	padding:3px 8px 3px 6px;
	white-space:nowrap;
	line-height:1.1
}

.gstick .ps svg{
	width:12px;
	height:12px;
	flex:none;
	fill:none;
	stroke:currentColor;
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round
}

.gstick .ps.d svg{
	color:var(--red)
}

.gstick .ps.p svg{
	color:var(--green)
}

.gacts{
	position:absolute;
	top:7px;
	right:7px;
	z-index:2;
	display:flex;
	flex-direction:column;
	gap:5px
}

.gact{
	width:29px;
	height:29px;
	border-radius:8px;
	background:rgba(255,255,255,.92);
	border:1px solid var(--line);
	color:var(--faint);
	display:grid;
	place-items:center;
	transition:.18s;
	backdrop-filter:blur(4px)
}

.gact svg{
	width:14px;
	height:14px
}

.gact:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.gact.on{
	color:#fff;
	background:var(--red);
	border-color:var(--red)
}

.gact.rm:hover{
	color:#fff;
	background:var(--red);
	border-color:var(--red)
}

.gbody{
	padding:5px 11px 12px;
	display:flex;
	flex-direction:column;
	gap:7px;
	flex:1
}

.gtitle{
	font-size:12.6px;
	font-weight:700;
	line-height:1.35;
	margin:0;
	min-height:34px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}

.gcard:hover .gtitle{
	color:var(--red)
}

.grate{
	display:flex;
	align-items:center;
	gap:6px
}

.grate .stars{
	display:inline-flex;
	gap:1px
}

.grate .stars svg{
	width:12px;
	height:12px
}

.grate .rc{
	font-size:10.5px;
	font-weight:700;
	color:var(--soft)
}

.grate .rc.muted{
	color:var(--faint);
	font-weight:600
}

.gspecs{
	display:grid;
	gap:4px;
	padding:8px 9px;
	background:var(--plate);
	border-radius:9px
}

.gspec{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:11px;
	color:var(--soft);
	min-width:0
}

.gspec svg{
	width:12px;
	height:12px;
	color:var(--red);
	flex-shrink:0
}

.gspec b{
	font-weight:700;
	color:var(--ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}

.gspec .sd{
	color:var(--muted);
	white-space:nowrap
}

.gspec.deliv{
	border-top:1px dashed var(--line);
	padding-top:6px;
	margin-top:1px
}

.gspec.deliv svg{
	color:var(--green)
}

.gspec.deliv b{
	color:var(--green)
}

.gstock{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:10.8px;
	font-weight:700;
	color:var(--soft)
}

.gstock svg{
	width:12px;
	height:12px;
	color:var(--soft);
	flex-shrink:0
}

.gfoot{
	margin-top:auto;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:9px
}

.gprice{
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px
}

.gprice .pright{
	display:inline-flex;
	align-items:center;
	gap:6px;
	flex-shrink:0
}

.pold{
	font-size:12px;
	font-weight:700;
	color:var(--muted);
	text-decoration:line-through;
	text-decoration-color:var(--red);
	text-decoration-thickness:2px
}

.pdisc{
	display:inline-flex;
	background:var(--red);
	color:#fff;
	font-size:10px;
	font-weight:800;
	padding:2px 6px;
	border-radius:6px
}

.pv{
	display:inline-block;
	font-size:19px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

.pv .cur{
	font-size:13px
}

.gcredit{
	font-size:10.8px;
	font-weight:600;
	color:var(--muted);
	line-height:1.3
}

.gcredit a{
	color:var(--soft);
	font-weight:700;
	text-decoration:underline;
	text-underline-offset:2px;
	transition:color .15s
}

.gcredit a:hover{
	color:var(--red)
}

.gmore{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	border:1.5px solid var(--red-line);
	color:var(--red);
	font-size:12.5px;
	font-weight:700;
	padding:9px 10px;
	border-radius:10px;
	transition:.18s;
	white-space:nowrap
}

.gmore svg{
	width:13px;
	height:13px;
	transition:transform .18s
}

.gmore:hover{
	background:var(--red);
	color:#fff!important;
}

.gmore:hover svg{
	transform:translateX(3px)
}

.gempty{
	display:none;
	flex-direction:column;
	align-items:center;
	gap:13px;
	padding:60px 20px;
	margin-top:20px;
	background:#fff;
	border:1.5px dashed var(--line);
	border-radius:18px;
	text-align:center
}

.gempty.show{
	display:flex
}

.gempty .big{
	width:66px;
	height:66px;
	border-radius:50%;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:29px
}

.gempty h3{
	margin:0;
	font-size:19px;
	font-weight:800
}

.gempty p{
	margin:0;
	font-size:13.8px;
	color:var(--muted);
	max-width:400px;
	text-wrap:pretty;
	line-height:1.55
}

.gempty .btn{
	margin-top:4px
}

/* ===== 9. FOOTER (спільне) ===== */
footer{
	background:var(--foot);
	color:#fff;
	margin-top:64px
}
.fcol a .ic img{
	transition:filter .15s
}
.fcol a:hover .ic img{
	filter:brightness(0) saturate(100%) invert(41%) sepia(120%) saturate(157%) hue-rotate(306deg) brightness(108%) contrast(169%);
}
.fcta{
	background:linear-gradient(140deg,#a5232e,var(--red-dark));
	position:relative;
	overflow:hidden
}

.fcta::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 88% 0%,rgba(255,255,255,.14),transparent 55%)
}

.fcta-in{
	position:relative;
	max-width:var(--maxw);
	margin:0 auto;
	padding:34px 24px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:28px;
	flex-wrap:wrap
}

.fcta-tx h3{
	margin:0 0 8px;
	font-size:24px;
	font-weight:800;
	letter-spacing:-.01em;
	font-family:'Onest',sans-serif
}

.fcta-tx p{
	margin:0;
	font-size:14px;
	color:rgba(255,255,255,.85);
	line-height:1.55;
	max-width:560px;
	text-wrap:pretty
}

.fcta-act{
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:stretch;
	min-width:290px
}

.fcta-act .btn-green{
	width:100%
}

.fcta-alt{
	display:flex;
	gap:8px;
	align-items:center
}

.fcta-call{
	flex:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:42px;
	border-radius:12px;
	border:1.5px solid rgba(255,255,255,.35);
	color:#fff;
	font-size:14.5px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	transition:background .2s,border-color .2s
}

.fcta-call:hover{
	background:rgba(255,255,255,.12);
	border-color:#fff
}

.fcta-call .ic{
	font-size:15px
}

.fcta-ch{
	width:42px;
	height:42px;
	border-radius:12px;
	display:grid;
	place-items:center;
	color:#fff;
	flex-shrink:0;
	transition:transform .2s var(--ease),box-shadow .2s
}

.fcta-ch svg{
	width:19px;
	height:19px
}

.fcta-ch:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 18px -8px rgba(0,0,0,.45)
}

.fcta-ch.tg{
	background:#229ed9
}

.fcta-ch.vb{
	background:#7360f2
}

.fcta-ch.wa{
	background:#25d366
}

.fmain{
	padding:46px 24px 40px;
	max-width:var(--maxw);
	margin:0 auto;
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1.35fr;
	gap:40px;
	align-items:start
}

.fbrand .logo-w{
	display:inline-flex;
	align-items:center;
	margin-bottom:15px;
	background:#fff;
	padding:9px 14px;
	border-radius:12px
}

.fbrand .logo-w img{
	height:32px
}

.fbrand p{
	font-size:13.5px;
	color:#a7adb8;
	line-height:1.6;
	margin:0 0 18px;
	max-width:290px;
	text-wrap:pretty
}

.fslogan{
	font-size:16px!important;
	font-weight:800;
	color:#fff!important;
	font-family:'Onest',sans-serif;
	margin:0 0 10px!important;
	letter-spacing:-.01em
}

.frate{
	display:flex;
	width:100%;
	align-items:center;
	gap:12px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.1);
	border-radius:12px;
	padding:12px 16px;
	margin-bottom:18px;
	transition:background .2s,border-color .2s
}

.frate:hover{
	background:rgba(255,255,255,.1);
	border-color:rgba(255,255,255,.25)
}

.frate .go{
	margin-left:auto;
	color:#8e94a0;
	font-size:16px;
	transition:transform .18s
}

.frate:hover .go{
	transform:translateX(3px);
	color:#fff
}

.frate .rv{
	font-size:20px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

.frate .rstars{
	display:inline-flex;
	gap:1px;
	color:#f5a623
}

.frate .rstars svg{
	width:13px;
	height:13px
}

.frate .rc{
	font-size:12px;
	color:#9aa0aa
}

.fcol h4{
	margin:0 0 16px;
	font-size:12px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#fff;
	font-family:'Onest',sans-serif
}

.fcol li{
	margin-bottom:10px
}

.fcol a{
	font-size:13.5px;
	color:#a7adb8;
	transition:color .15s;
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:9px
}

.fcol a .ic{
	font-size:15px;
	color:#8e94a0;
	transition:color .15s;
	flex-shrink:0
}

.fcol a:hover .ic{
	color:#ff7782
}

.fcol a::after{
	content:"";
	position:absolute;
	left:24px;
	bottom:-2px;
	height:1.5px;
	width:0;
	background:var(--red);
	transition:width .25s var(--ease)
}

.fcol a:hover{
	color:#fff
}

.fcol a:hover::after{
	width:calc(100% - 24px)
}

.fcontact h4{
	margin:0 0 14px;
	font-size:12px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-family:'Onest',sans-serif
}

.fcontact .phone{
	font-size:22px;
	font-weight:800;
	display:block;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

.fcontact .phone:hover{
	color:#ff7782
}

.fcontact .free{
	font-size:11px;
	color:#fff;
	background:var(--green);
	padding:3px 9px;
	border-radius:7px;
	font-weight:800;
	margin:6px 0 16px;
	display:inline-block
}

.fnums{
	margin:0 0 16px;
	padding-bottom:16px;
	border-bottom:1px solid rgba(255,255,255,.08);
	display:flex;
	flex-direction:column;
	gap:7px
}

.fnums li{
	margin:0
}

.fnums li a{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:13.5px;
	font-weight:700;
	color:#fff;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.09);
	border-radius:10px;
	padding:8px 12px;
	transition:background .15s,border-color .15s
}

.fnums li a:hover{
	background:rgba(255,255,255,.1);
	border-color:rgba(255,255,255,.2)
}

.fnums .fdot{
	width:8px;
	height:8px;
	border-radius:50%;
	flex-shrink:0
}

.fnums .fop{
	font-size:11px;
	color:#8e94a0;
	font-weight:700;
	margin-left:auto
}

.fcontact .finfo li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:13px;
	color:#a7adb8;
	margin-bottom:9px
}

.fcontact .finfo li .ic{
	color:#ff7782;
	flex-shrink:0;
	margin-top:1px;
	font-size:15px
}

.fcontact .finfo a:hover{
	color:#fff
}

.fbtn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:6px;
	background:var(--red);
	color:#fff;
	padding:11px 18px;
	border-radius:11px;
	font-size:13.5px;
	font-weight:700;
	transition:background .18s,transform .12s
}

.fbtn:hover{
	background:var(--red-dark);
	transform:translateY(-2px)
}

.fbtn .ic{
	font-size:15px
}

.fsocial{
	grid-column:1/-1;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.09);
	border-radius:16px;
	padding:18px 20px;
	margin-top:6px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px 30px
}

.fsoc-head{
	display:flex;
	flex-direction:column;
	gap:3px;
	margin-right:4px
}

.fst{
	font-size:13px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#fff;
	font-family:'Onest',sans-serif
}

.fsoc-sub{
	font-size:11.5px;
	color:#9aa0aa;
	font-weight:600
}

.fsoc-clusters{
	display:flex;
	flex-wrap:wrap;
	gap:16px 26px;
	align-items:flex-start
}

.fsoc-cl{
	display:flex;
	flex-direction:column;
	gap:8px
}

.fsoc-l{
	font-size:10px;
	font-weight:800;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#7a808b
}

.fsoc-row{
	display:flex;
	gap:8px;
	flex-wrap:wrap
}

.fsq{
	width:40px;
	height:40px;
	border-radius:11px;
	display:grid;
	place-items:center;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.1);
	color:#c4cad4;
	transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s
}

.fsq svg{
	width:19px;
	height:19px
}

.fsq svg path{
	fill:currentColor
}

.fsq:hover{
	transform:translateY(-3px)
}

.fsq.ig:hover{
	background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);
	border-color:transparent;
	color:#fff
}

.fsq.fb:hover{
	background:#1877f2;
	border-color:transparent;
	color:#fff
}

.fsq.tt:hover{
	background:#0b0b0f;
	border-color:rgba(255,255,255,.45);
	color:#fff
}

.fsq.th:hover{
	background:#fff;
	border-color:#fff;
	color:#0b0b0f
}

.fsq.x:hover{
	background:#fff;
	border-color:#fff;
	color:#0b0b0f
}

.fsq.yt:hover{
	background:#ff0000;
	border-color:transparent;
	color:#fff
}

.fsq.tw:hover{
	background:#9146ff;
	border-color:transparent;
	color:#fff
}

.fsq.kick:hover{
	background:#53fc18;
	border-color:transparent;
	color:#0b0b0f
}

.fsq.steam:hover{
	background:#1b2838;
	border-color:#3a4a5e;
	color:#fff
}

.fsq.faceit:hover{
	background:#ff5500;
	border-color:transparent;
	color:#fff
}

.fsq.tg:hover{
	background:#229ed9;
	border-color:transparent;
	color:#fff
}

.fsq.vb:hover{
	background:#7360f2;
	border-color:transparent;
	color:#fff
}

.fsq.wa:hover{
	background:#25d366;
	border-color:transparent;
	color:#fff
}

.fsq.ms:hover{
	background:linear-gradient(45deg,#00b2ff,#006aff,#a033ff,#ff5280);
	border-color:transparent;
	color:#fff
}

.fbar{
	background:var(--foot-2);
	padding:16px 0
}

.fbar .wrap{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	font-size:12.5px;
	color:#8e94a0;
	flex-wrap:wrap
}

.fbar a{
	color:#a7adb8
}

.fbar a:hover{
	color:#fff
}

.fbar-soc{
	display:flex;
	gap:6px;
	flex-wrap:wrap
}

.fbar-soc a{
	width:34px;
	height:34px;
	border-radius:9px;
	display:grid;
	place-items:center;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.1);
	color:#c4cad4;
	transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,color .2s,border-color .2s
}

.fbar-soc a:hover{
	transform:translateY(-3px);
	background:var(--hb,#fff);
	border-color:transparent;
	color:var(--hg,#fff)
}

.fbar-soc a svg{
	width:16px;
	height:16px
}

.fbar-soc a svg path{
	fill:currentColor
}

@media(max-width:560px){
	.fbar .wrap{
		justify-content:center;
		text-align:center
	}

}

/* ===== 10. TOAST (спільне) ===== */
.toast{
	position:fixed;
	left:50%;
	bottom:-90px;
	transform:translateX(-50%);
	transition:bottom .4s var(--ease);
	background:var(--ink);
	color:#fff;
	border-radius:14px;
	padding:14px 22px;
	display:flex;
	align-items:center;
	gap:12px;
	box-shadow:var(--sh-lg);
	z-index:120;
	font-size:14.5px;
	font-weight:700;
	white-space:nowrap;
	max-width:calc(100vw - 32px)
}

.toast.show{
	bottom:28px
}

.toast .ok{
	width:26px;
	height:26px;
	border-radius:50%;
	background:var(--green);
	display:grid;
	place-items:center;
	font-size:16px;
	flex-shrink:0
}

/* ===== 11. ПОЛЕ ФОРМИ (.fi) — спільний патерн (кабінет / чекаут) ===== */
.fi{
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0
}

.fi label{
	font-size:13px;
	font-weight:700;
	color:var(--soft)
}

.fi label .req{
	color:var(--red)
}

.fi label .opt,.fi label .opt-l{
	color:var(--muted);
	font-weight:600
}

.fi input,.fi select,.fi textarea{
	width:100%;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:0 14px;
	height:48px;
	font-size:14.5px;
	font-family:'Manrope',sans-serif;
	color:var(--ink);
	outline:none;
	background:#fff;
	transition:border-color .2s,box-shadow .2s
}

.fi input.big{
	height:54px;
	font-size:17px;
	font-weight:700;
	font-family:'Onest',sans-serif
}

.fi textarea{
	height:auto;
	padding:12px 14px;
	resize:vertical;
	min-height:88px;
	line-height:1.5
}

.fi input:focus,.fi select:focus,.fi textarea:focus{
	border-color:var(--red);
	box-shadow:0 0 0 4px var(--red-wash)
}

.fi .fhint{
	font-size:12.3px;
	color:var(--muted);
	line-height:1.45;
	text-wrap:pretty
}

.fi.err input{
	border-color:var(--red);
	box-shadow:0 0 0 4px var(--red-wash)
}

.fi.err .ferr{
	display:flex
}

.ferr{
	display:none;
	align-items:center;
	gap:6px;
	font-size:12.5px;
	font-weight:700;
	color:var(--red)
}

.fi-phone input{
	height:56px;
	font-size:19px;
	font-weight:600;
	font-family:'Onest',sans-serif;
	letter-spacing:.01em
}

.fi-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-top:12px
}

.form-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px
}

.form-act{
	margin-top:18px
}

.prov-note{
	display:flex;
	align-items:center;
	gap:10px;
	background:var(--plate);
	border-radius:12px;
	padding:12px 15px;
	margin-bottom:18px;
	font-size:13px;
	color:var(--soft);
	line-height:1.45;
	text-wrap:pretty
}

.prov-note .bic{
	line-height:0;
	flex-shrink:0
}

.prov-note .bic svg{
	width:20px;
	height:20px;
	color:#229ed9
}

.prov-note b{
	color:var(--ink)
}

/* account/simpleedit — поля йдуть з закодованого ядра модуля (готовий HTML у $rows,
   класи form-group/control-label/form-control/col-sm-* — bootstrap-розмітка ядра,
   яку не можна міняти). Тут тільки перестилізовуємо існуючі класи під вигляд .fi. */

/* Ядро віддає всі поля одним <fieldset>, тому в .form-grid лише ОДИН прямий нащадок —
   grid-колонки на самі поля інакше не діють. display:contents прибирає fieldset
   з коробкової моделі, і form-group всередині стають прямими grid-елементами. */
.acc-card .form-grid > fieldset{
	display:contents
}

.acc-card .form-grid .form-group{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin:0;
	min-width:0
}

.acc-card .form-grid label.control-label{
	width:auto;
	float:none;
	text-align:left;
	padding:0;
	font-size:13px;
	font-weight:700;
	color:var(--soft)
}

.acc-card .form-grid [class*="col-sm-"]{
	width:100%;
	padding:0;
	float:none
}

.acc-card .form-grid .form-control{
	width:100%;
	height:48px;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:0 14px;
	font-size:14.5px;
	font-family:'Manrope',sans-serif;
	color:var(--ink);
	background:#fff;
	box-shadow:none;
	transition:border-color .2s,box-shadow .2s
}

.acc-card .form-grid .form-control:focus{
	border-color:var(--red);
	box-shadow:0 0 0 4px var(--red-wash);
	outline:none
}

.acc-card .simplecheckout-rule-group{
	margin-top:2px
}

.acc-card .simplecheckout-error-text{
	font-size:12px;
	color:var(--red)
}

/* ===== 12. RESPONSIVE (спільне) ===== */
@media(max-width:1280px){
	.gcards{
		grid-template-columns:repeat(4,1fr)
	}

}

@media(max-width:1120px){
	.hphone,.hsched{
		display:none
	}

	.nav a{
		padding:8px 8px;
		font-size:12px
	}

}

@media(max-width:1040px){
	.navrow{
		display:none
	}

	.burger{
		display:grid
	}

}

@media(max-width:1024px){
	.gcards{
		grid-template-columns:repeat(3,1fr)
	}

	.fmain{
		grid-template-columns:1fr 1fr;
		gap:34px
	}

}

@media(max-width:900px){
	.hbar{
		height:64px;
		gap:14px;
		flex-wrap:wrap;
		padding:10px 0
	}

	.lang,.hicons .istat:not(:last-child){
		display:none
	}

	#searchToggle{
		display:grid;
		margin-left:auto;
		background:var(--plate)
	}

	.hicons .istat:last-child{
		background:var(--plate)
	}

	.search{
		order:3;
		flex-basis:100%;
		max-width:none;
		max-height:0;
		opacity:0;
		margin-top:0;
		overflow:hidden;
		transition:max-height .3s var(--ease),opacity .2s,margin-top .3s var(--ease)
	}

	#mainbar.search-open .search{
		max-height:70px;
		opacity:1;
		margin-top:10px
	}

}

@media(max-width:768px){
	.gcards{
		grid-template-columns:repeat(2,1fr);
		gap:10px
	}

}

@media(max-width:560px){
	.fmain{
		grid-template-columns:1fr;
		gap:30px
	}

	.fcta-tx h3{
		font-size:20px
	}

	.fcta-act{
		min-width:100%
	}

	.pagehead{
		align-items:flex-start
	}

}

@media(max-width:480px){
	.gimgs{
		height:132px
	}

	.gmedia{
		padding:6px 6px 2px
	}

	.gbody{
		padding:4px 9px 10px;
		gap:6px
	}

	.gtitle{
		font-size:11.8px;
		min-height:32px
	}

	.pv{
		font-size:17px
	}

	.gspec{
		font-size:10.4px
	}

}

@media(max-width:360px){
	.gcards{
		gap:8px
	}

	.gimgs{
		height:112px
	}

	.pold{
		font-size:10.5px
	}

	.pdisc{
		padding:2px 4px;
		font-size:9px
	}

	.gprice{
		flex-wrap:wrap;
		gap:2px 8px
	}

}

/* ============================================================================
   ГОЛОВНА (index.twig)
   ============================================================================ */
.lang a{
	font-size:13px;
	font-weight:700;
	padding:4px 7px;
	border-radius:7px;
	color:var(--muted);
	text-decoration:none;
	transition:.15s
}

.lang a:hover{
	color:var(--red);
	background:var(--line-soft)
}

.hm-sec{
	margin:46px 0
}

.hm-h2{
	font-size:27px;
	letter-spacing:-.01em;
	line-height:1.15
}

.hm-sub{
	color:var(--muted);
	font-size:14.5px;
	margin-top:6px;
	text-wrap:pretty
}

.hm-shead{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	margin-bottom:17px;
	flex-wrap:wrap
}

.hm-all{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	font-weight:700;
	color:var(--red);
	white-space:nowrap;
	padding-bottom:2px
}

.hm-all .ic{
	transition:transform .25s var(--ease)
}

.hm-all:hover .ic{
	transform:translateX(4px)
}

.hm-all:hover{
	color:var(--red-dark)
}

.hm-hero{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:44px;
	align-items:center;
	padding:24px 0 0
}

.hm-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	white-space:nowrap;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--red);
	background:var(--red-wash);
	border-radius:999px;
	padding:7px 14px
}

.hm-hero h1{
	font-size:40px;
	line-height:1.08;
	letter-spacing:-.015em;
	margin:16px 0 12px
}

.hm-hero h1 em{
	font-style:normal;
	color:var(--red);
	position:relative;
	white-space:nowrap
}

.hm-hero h1 em svg{
	position:absolute;
	left:0;
	right:0;
	bottom:-9px;
	width:100%;
	height:10px;
	color:var(--red);
	opacity:.55
}

.hm-lead{
	color:var(--soft);
	font-size:16px;
	line-height:1.58;
	max-width:560px;
	text-wrap:pretty
}

.hm-cta{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin-top:22px
}

.hm-trustrow{
	display:flex;
	gap:16px 18px;
	flex-wrap:wrap;
	margin-top:18px
}

.hm-trustrow span{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:600;
	color:var(--soft)
}

.hm-trustrow .ic{
	color:var(--green);
	font-size:15px
}

.hm-vis{
	position:relative;
	padding:8px
}

.hm-vis-bg{
	position:absolute;
	inset:0;
	color:var(--red);
	opacity:.5;
	pointer-events:none
}

.hm-vis-bg svg{
	width:100%;
	height:100%
}

.hm-photo{
	position:relative;
	border-radius:24px;
	box-shadow:0 30px 70px -34px rgba(24,26,31,.55);
	background:#fff;
	border:1px solid var(--line)
}

.hm-photo image-slot{
	width:100%;
	height:auto;
	aspect-ratio:5/5.15;
	border-radius:24px;
	display:block
}

.hm-chip{
	position:absolute;
	display:inline-flex;
	align-items:center;
	gap:9px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:10px 14px;
	box-shadow:0 14px 34px -18px rgba(24,26,31,.5);
	font-size:13px;
	font-weight:700;
	z-index:3
}

.hm-chip .cic{
	width:30px;
	height:30px;
	border-radius:9px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	flex-shrink:0;
	font-size:15px
}

.hm-chip small{
	display:block;
	font-size:11px;
	font-weight:600;
	color:var(--muted);
	margin-top:1px
}

.hm-chip-live{
	top:-4px;
	left:-10px;
	background:var(--red);
	color:#fff;
	border-color:var(--red);
	animation:hmpulse 3s infinite var(--ease);
	white-space:nowrap
}

.hm-chip-live .dot{
	width:9px;
	height:9px;
	border-radius:50%;
	background:#fff;
	position:relative;
	flex-shrink:0
}

.hm-chip-live .dot::after{
	content:"";
	position:absolute;
	inset:-4px;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.7);
	animation:hmping 2s infinite
}

.hm-chip-live small{
	color:rgba(255,255,255,.75)
}

.hm-chip-num{
	bottom:26px;
	left:-16px
}

.hm-chip-num b{
	font-family:'Onest',sans-serif;
	font-size:16px;
	letter-spacing:-.01em
}

.hm-chip-war{
	top:88px;
	right:-12px
}

@keyframes hmpulse{
	0%,100%{
		transform:scale(1)
	}

	50%{
		transform:scale(1.02)
	}

}

@keyframes hmping{
	0%{
		transform:scale(.6);
		opacity:1
	}

	80%,100%{
		transform:scale(1.3);
		opacity:0
	}

}

.hm-tiles{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px
}

.hm-tile{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:4px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	padding:22px 22px 20px;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.hm-tile:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.hm-tile .tic{
	width:46px;
	height:46px;
	border-radius:13px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	margin-bottom:12px
}

.hm-tile .tic svg{
	width:24px;
	height:24px
}

.hm-tile b{
	font-family:'Onest',sans-serif;
	font-size:16.5px;
	letter-spacing:-.01em
}

.hm-tile span{
	color:var(--muted);
	font-size:13.2px;
	line-height:1.45;
	text-wrap:pretty
}

.hm-tile .go{
	position:absolute;
	top:22px;
	right:20px;
	color:var(--faint);
	font-size:17px;
	transition:transform .25s var(--ease),color .25s
}

.hm-tile:hover .go{
	transform:translateX(4px);
	color:var(--red)
}

.hm-tile-acc{
	background:var(--red);
	border-color:var(--red)
}

.hm-tile-acc b,.hm-tile-acc .go{
	color:#fff
}

.hm-tile-acc span{
	color:rgba(255,255,255,.78)
}

.hm-tile-acc .tic{
	background:rgba(255,255,255,.14);
	color:#fff
}

.hm-tile-acc:hover{
	border-color:var(--red-dark);
	box-shadow:0 18px 42px -20px rgba(142,28,37,.75)
}

.hm-nums{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	background:var(--plate);
	border-radius:22px;
	padding:26px 22px
}

.hm-num{
	display:flex;
	flex-direction:column;
	gap:3px;
	align-items:center;
	text-align:center;
	padding:8px 10px;
	border-radius:14px;
	transition:background .2s
}

a.hm-num:hover{
	background:#fff
}

.hm-num b{
	font-family:'Onest',sans-serif;
	font-size:33px;
	letter-spacing:-.02em;
	color:var(--red);
	line-height:1
}

.hm-num span{
	font-size:13px;
	font-weight:600;
	color:var(--soft);
	text-wrap:pretty
}

.hm-num small{
	font-size:11.5px;
	color:var(--muted)
}

.hm-bens{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:14px
}

.hm-ben{
	display:flex;
	flex-direction:column;
	gap:6px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	padding:20px;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.hm-ben:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.hm-ben .bic2{
	width:42px;
	height:42px;
	border-radius:12px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:21px;
	margin-bottom:8px
}

.hm-ben b{
	font-size:15px;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em;
	line-height:1.25
}

.hm-ben span{
	color:var(--muted);
	font-size:12.8px;
	line-height:1.45;
	text-wrap:pretty
}

.hm-banks{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin-top:16px
}

.hm-banks .lbl{
	font-size:12.5px;
	font-weight:700;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.05em;
	margin-right:4px
}

.hm-bank{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:800;
	color:var(--soft);
	background:#fff;
	border:1px solid var(--line);
	border-radius:999px;
	padding:6px 16px 6px 9px;
	transition:.2s;
	font-family:'Onest',sans-serif
}

.hm-bank .hb-lg{
	width:24px;
	height:24px;
	display:grid;
	place-items:center;
	overflow:hidden;
	border-radius:6px
}

.hm-bank .hb-lg svg{
	max-width:24px;
	max-height:24px;
	width:auto;
	height:auto;
	display:block
}

.hm-bank .hb-sense{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:12px;
	letter-spacing:-.02em;
	color:#17171f
}

.hm-bank:hover{
	color:var(--red);
	border-color:var(--red)
}

.hm-live{
	position:relative;
	overflow:hidden;
	background:linear-gradient(120deg,#fff 55%,var(--red-wash));
	border:1.5px solid var(--red-line);
	border-radius:26px;
	padding:40px 44px;
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:40px;
	align-items:center
}

.hm-live-tag{
	display:inline-flex;
	align-items:center;
	gap:9px;
	background:var(--red);
	color:#fff;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	border-radius:999px;
	padding:8px 15px;
	animation:hmpulse 3s infinite var(--ease)
}

.hm-live-tag .dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#fff;
	position:relative
}

.hm-live-tag .dot::after{
	content:"";
	position:absolute;
	inset:-4px;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.7);
	animation:hmping 2s infinite
}

.hm-live h2{
	font-size:30px;
	letter-spacing:-.015em;
	line-height:1.12;
	margin:16px 0 10px;
	text-wrap:balance
}

.hm-live .lt{
	color:var(--soft);
	font-size:15.5px;
	line-height:1.6;
	max-width:520px;
	text-wrap:pretty
}

.hm-steps{
	display:flex;
	flex-direction:column;
	gap:0;
	margin:22px 0 26px;
	max-width:460px
}

.hm-step{
	display:flex;
	gap:14px;
	align-items:flex-start;
	position:relative;
	padding-bottom:18px
}

.hm-step:last-child{
	padding-bottom:0
}

.hm-step::before{
	content:"";
	position:absolute;
	left:15px;
	top:34px;
	bottom:2px;
	width:2px;
	background:var(--red-line)
}

.hm-step:last-child::before{
	display:none
}

.hm-step .n{
	width:32px;
	height:32px;
	border-radius:50%;
	background:#fff;
	border:2px solid var(--red);
	color:var(--red);
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:14px;
	display:grid;
	place-items:center;
	flex-shrink:0;
	transition:.25s
}

.hm-step:hover .n{
	background:var(--red);
	color:#fff
}

.hm-step p{
	font-size:14.5px;
	color:var(--soft);
	padding-top:5px
}

.hm-step p b{
	color:var(--ink)
}

.hm-live-cta{
	display:flex;
	gap:12px;
	flex-wrap:wrap
}

.hm-live-vis{
	display:flex;
	justify-content:center
}

.hm-live-vis svg{
	width:100%;
	max-width:390px;
	height:auto
}

.hm-revs{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px
}

.hm-rate{
	background:var(--red);
	border-radius:20px;
	padding:24px;
	color:#fff;
	display:flex;
	flex-direction:column;
	gap:6px
}

.hm-rate .big{
	font-family:'Onest',sans-serif;
	font-size:44px;
	letter-spacing:-.02em;
	line-height:1
}

.hm-rate .st{
	color:#ffc42e;
	display:inline-flex;
	gap:2px;
	font-size:15px
}

.hm-rate p{
	font-size:13px;
	color:rgba(255,255,255,.82);
	line-height:1.5
}

.hm-rate p b{
	color:#fff
}

.hm-rate a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	margin-top:auto;
	padding-top:12px
}

.hm-rate a .ic{
	transition:transform .25s var(--ease)
}

.hm-rate a:hover .ic{
	transform:translateX(4px)
}

.hm-rev{
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	padding:22px;
	display:flex;
	flex-direction:column;
	gap:10px;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.hm-rev:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.hm-rev .st{
	color:#f5a623;
	display:inline-flex;
	gap:2px;
	font-size:14px
}

.hm-rev p{
	font-size:13.8px;
	line-height:1.55;
	color:var(--soft);
	text-wrap:pretty
}

.hm-rev .who{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:auto;
	padding-top:6px
}

.hm-rev .who b{
	font-size:13.5px
}

.hm-rev .who small{
	display:block;
	font-size:11.5px;
	color:var(--muted);
	font-weight:600
}

.hm-rev .src{
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	background:var(--plate);
	border-radius:7px;
	padding:4px 8px;
	flex-shrink:0
}

.hm-arts{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px
}

.hm-art{
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.hm-art:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.hm-art .im{
	aspect-ratio:16/10;
	background:var(--plate);
	overflow:hidden
}

.hm-art .im img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s var(--ease)
}

.hm-art:hover .im img{
	transform:scale(1.04)
}

.hm-art .bd{
	padding:16px 18px 18px;
	display:flex;
	flex-direction:column;
	gap:6px;
	flex:1
}

.hm-art time{
	font-size:11.5px;
	font-weight:700;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.05em
}

.hm-art b{
	font-size:14.5px;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em;
	line-height:1.3;
	text-wrap:pretty
}

.hm-art .go{
	margin-top:auto;
	padding-top:8px;
	color:var(--red);
	font-size:16px;
	transition:transform .25s var(--ease)
}

.hm-art:hover .go{
	transform:translateX(4px)
}

/* slick.js вішає клас slick-slide ПРЯМО на .hm-art (обгортки немає) і додає
   inline style="width:...px". .hm-arts лишається display:grid, але тепер
   в ній лише один grid-child (.slick-list), тому grid стискає трек — плюс
   бандл-CSS слика (.slick-slide{display:block}) при однаковій специфічності
   перебиває наш .hm-art{display:flex}, через що .im (span, inline за
   замовчуванням) перестає тримати aspect-ratio і картинка розтягується на
   всю картку. Фіксимо все нижче з !important, бо порядок підключення
   стилів слика ми не контролюємо. */
.hm-arts.slick-initialized{
	display:block
}

.hm-arts.slick-initialized .slick-track{
	display:block
}

.slick-latest-blog .slick-track{
	padding:7px 0 34px
}
.slick-latest-blog .slick-list{
	margin: 0 -7px;
}
.hm-arts.slick-initialized .hm-art.slick-slide{
	display:flex!important;
	flex-direction:column!important;
	height:auto!important;
	margin:0 7px
}

.hm-arts.slick-initialized .hm-art .im{
	display:block
}

.hm-seo{
	background:var(--plate);
	border-radius:22px;
	padding:30px 34px
}

.hm-seo h2{
	font-size:19px;
	letter-spacing:-.01em;
	margin-bottom:10px
}

.hm-seo p{
	font-size:13.8px;
	line-height:1.65;
	color:var(--soft);
	max-width:1020px;
	text-wrap:pretty
}

.hm-seo p+p{
	margin-top:10px
}

.hm-seo a{
	color:var(--red);
	font-weight:700
}

.hm-seo a:hover{
	color:var(--red-dark)
}

.hm-tile .tic{
	transition:transform .25s var(--ease)
}

.hm-tile:hover .tic{
	transform:scale(1.1) rotate(-5deg)
}

.hm-ben,.hm-rev,.hm-art{
	position:relative
}

.hm-tile,.hm-ben,.hm-rev,.hm-art,.hm-rate{
	overflow:hidden
}

.hm-tile::before,.hm-ben::before,.hm-rev::before,.hm-art::before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:-75%;
	width:50%;
	background:linear-gradient(105deg,transparent,rgba(142,28,37,.07),transparent);
	transform:skewX(-18deg);
	transition:left .7s var(--ease);
	pointer-events:none;
	z-index:1
}

.hm-tile:hover::before,.hm-ben:hover::before,.hm-rev:hover::before,.hm-art:hover::before{
	left:135%
}

.hm-tile-acc::before{
	background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent)
}

.hm-tile-acc,.hm-rate{
	background:linear-gradient(120deg,#8e1c25 0%,#6a151c 45%,#a5232e 70%,#8e1c25 100%);
	background-size:280% 280%;
	animation:hmgrad 9s ease infinite
}

@keyframes hmgrad{
	0%,100%{
		background-position:0% 50%
	}

	50%{
		background-position:100% 50%
	}

}

.hm-chip-war{
	animation:hmfloat 7s ease-in-out infinite
}

.hm-chip-num{
	animation:hmfloat 8s ease-in-out 1.2s infinite
}

@keyframes hmfloat{
	0%,100%{
		transform:translateY(0)
	}

	50%{
		transform:translateY(-6px)
	}

}

@media(max-width:1120px){
	.hm-tiles{
		grid-template-columns:repeat(3,1fr)
	}

	.hm-bens{
		grid-template-columns:repeat(3,1fr)
	}

	.hm-revs,.hm-arts{
		grid-template-columns:repeat(2,1fr)
	}

}

@media(max-width:980px){
	.hm-hero{
		grid-template-columns:1fr;
		gap:32px;
		padding-top:16px
	}

	.hm-hero h1{
		font-size:33px
	}

	.hm-vis{
		max-width:480px;
		margin:0 auto;
		width:100%
	}

	.hm-chip-war{
		top:150px
	}

	.hm-chip-num{
		bottom:16px
	}

	.hm-nums{
		grid-template-columns:repeat(2,1fr)
	}

	.hm-live{
		grid-template-columns:1fr;
		padding:30px 26px
	}

	.hm-live-vis{
		order:-1
	}

	.hm-live-vis svg{
		max-width:320px
	}

	.hm-sec{
		margin:40px 0
	}

}

@media(max-width:720px){
	.hm-tiles{
		grid-template-columns:repeat(2,1fr)
	}

	.hm-bens{
		grid-template-columns:repeat(2,1fr)
	}

}

@media(max-width:520px){
	.hm-eyebrow{
		white-space:normal
	}

	.hm-hero h1{
		font-size:28px
	}

	.hm-lead{
		font-size:15px
	}

	.hm-cta .btn{
		width:100%
	}

	.hm-tiles,.hm-bens,.hm-revs,.hm-arts{
		grid-template-columns:1fr
	}

	.hm-nums{
		grid-template-columns:1fr 1fr;
		padding:20px 14px
	}

	.hm-num b{
		font-size:26px
	}

	.hm-chip-num{
		left:-6px
	}

	.hm-chip-war{
		right:-4px
	}

	.hm-live h2{
		font-size:25px
	}

	.hm-seo{
		padding:22px 20px
	}

}

@media(prefers-reduced-motion:reduce){
	.hm-chip-live,.hm-live-tag,.hm-chip-live .dot::after,.hm-live-tag .dot::after{
		animation:none!important
	}

}

/* ============================================================================
   КАРТКА ТОВАРУ (product.twig)
   ============================================================================ */
.crumb .cur{
	color:var(--ink);
	font-weight:600
}

.phead{
	margin-top:12px
}

.phead h1{
	font-size:clamp(23px,2.6vw,31px);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.18;
	margin:10px 0 10px;
	max-width:920px;
	text-wrap:balance
}

.pmeta{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	font-size:13px;
	color:var(--muted)
}

.pmeta .dot{
	color:var(--line)
}

.stars{
	display:inline-flex;
	gap:2px
}

.stars svg{
	width:15px;
	height:15px
}

.codechip{
	font-family:'JetBrains Mono',ui-monospace,monospace;
	font-size:11.5px;
	background:var(--plate);
	padding:4px 9px;
	border-radius:7px;
	color:var(--soft);
	font-weight:600
}

.pmeta .views{
	display:inline-flex;
	align-items:center;
	gap:6px
}

/* ===== HERO / галерея ===== */
.hero{
	display:grid;
	grid-template-columns:minmax(0,1fr) 348px;
	gap:28px;
	align-items:start;
	margin-top:18px
}

.hero-col{
	min-width:0
}

.pmain{
	display:grid;
	grid-template-columns:minmax(0,410px) minmax(0,1fr);
	gap:24px;
	align-items:start
}

.pgal{
	min-width:0
}

.stage{
	position:relative;
	background:linear-gradient(180deg,#fbfbfc,#fff);
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	overflow:hidden
}

.stage image-slot{
	width:100%;
	height:100%;
	min-height:540px;
	display:block
}

.stage .flags{
	position:absolute;
	top:14px;
	left:14px;
	display:flex;
	flex-direction:column;
	gap:8px;
	z-index:3;
	pointer-events:none
}

.flag{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:12px;
	font-weight:800;
	padding:7px 12px 7px 10px;
	border-radius:999px;
	color:var(--ink);
	background:rgba(255,255,255,.96);
	border:1px solid var(--line);
	box-shadow:0 4px 14px rgba(24,26,31,.14);
	backdrop-filter:blur(4px)
}

.flag .ic{
	font-size:16px
}

.flag.g .ic{
	color:var(--red)
}

.flag.b .ic{
	color:var(--green)
}

.thumbs{
	display:flex;
	gap:10px;
	margin-top:12px;
	max-width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	-webkit-user-select:none;
	user-select:none;
	padding-bottom:6px
}

.thumb{
	width:68px;
	height:68px;
	flex:0 0 68px;
	border-radius:12px;
	border:1.5px solid var(--line);
	background:#fff;
	padding:4px;
	overflow:hidden;
	transition:border-color .2s,transform .2s var(--ease);
	display:flex;
	align-items:center;
	justify-content:center;
	scroll-snap-align:start
}

.thumb:hover{
	transform:translateY(-2px)
}

.thumb image-slot,.thumb img{
	display:block;
	max-width:85%;
	max-height:85%;
	width:auto;
	height:auto;
	object-fit:contain;
	object-position:center
}

.thumb.on{
	border-color:var(--red)
}

/* ключові специфікації — плитки */
.kgrid{
	display:grid;
	gap:10px
}

.ktile{
	display:flex;
	align-items:center;
	gap:12px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:15px 16px
}

.ktile .kic{
	width:40px;
	height:40px;
	border-radius:11px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:20px;
	flex-shrink:0
}

.ktile .kl{
	font-size:11.5px;
	color:var(--muted);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.05em
}

.ktile .kv{
	font-size:14px;
	font-weight:700;
	margin-top:2px;
	line-height:1.3
}

.kmore{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:700;
	color:var(--red);
	padding:6px 2px;
	position:relative
}

.kmore .ic{
	transition:transform .2s
}

.kmore:hover .ic{
	transform:translateY(2px)
}

.kmore::after{
	content:"";
	position:absolute;
	left:2px;
	bottom:2px;
	height:2px;
	width:0;
	background:var(--red);
	transition:width .25s var(--ease)
}

.kmore:hover::after{
	width:calc(100% - 24px)
}

/* ===== конфігуратор: групи відкриті, опції-пігулки ===== */
.cfg{
	margin-top:28px
}

.cfg-head{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	text-align:left;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:13px 16px;
	cursor:pointer;
	font-family:inherit;
	transition:border-color .2s,box-shadow .2s
}

.cfg-head:hover{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm)
}

.cfg-head .cfg-ic{
	width:38px;
	height:38px;
	border-radius:10px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:20px;
	flex-shrink:0
}

.cfg-tt{
	display:flex;
	flex-direction:column;
	gap:1px;
	min-width:0
}

.cfg-tt .cfg-h{
	font-size:16px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--ink)
}

.cfg-tt .note{
	font-size:12.5px;
	color:var(--muted)
}

.cfg-toggle-label{
	margin-left:auto;
	font-size:12.5px;
	font-weight:700;
	color:var(--red);
	flex-shrink:0
}

.cfg-toggle-label::after{
	content:"Розгорнути"
}

.cfg.open .cfg-toggle-label::after{
	content:"Згорнути"
}

.cfg-chev-ic{
	color:var(--red);
	font-size:20px;
	transition:transform .3s var(--ease);
	flex-shrink:0
}

.cfg.open .cfg-chev-ic{
	transform:rotate(180deg)
}

.cfg-wrap{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	grid-template-rows:0fr;
	transition:grid-template-rows .38s var(--ease)
}

.cfg.open .cfg-wrap{
	grid-template-rows:1fr
}

.cfg-inner{
	overflow:hidden;
	min-height:0;
	min-width:0
}

@media(max-width:640px){
	.cfg-toggle-label{
		display:none
	}

}

.cfg-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-top:12px
}

.cgroup{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:14px 16px 15px;
	transition:border-color .25s,box-shadow .25s;
	min-width:0
}

.cgroup:hover{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm)
}

.cg-head{
	display:flex;
	align-items:center;
	gap:11px;
	margin-bottom:11px
}

.cg-head .ico{
	width:36px;
	height:36px;
	border-radius:10px;
	background:var(--line-soft);
	color:var(--ink);
	display:grid;
	place-items:center;
	font-size:19px;
	flex-shrink:0;
	transition:background .2s,color .2s
}

.cgroup.up .cg-head .ico{
	background:var(--red-wash);
	color:var(--red)
}

.cg-head .t{
	font-size:14px;
	font-weight:700
}

.cg-pr{
	margin-left:auto;
	font-size:13px;
	font-weight:800;
	color:var(--red)
}

.cg-opts{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
	gap:9px;
	min-width:0
}

.copt{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:3px;
	text-align:left;
	border:1.5px solid transparent;
	border-radius:12px;
	padding:10px 12px;
	background:var(--plate);
	transition:.18s;
	cursor:pointer;
	min-width:0
}

.copt input,.casecard input{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none
}

.copt:hover{
	background:#e9ebef
}

.copt .cn{
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	line-height:1.25
}

.copt .cp{
	font-weight:800;
	color:var(--red);
	font-size:12px
}

.copt .cp.free{
	color:var(--muted);
	font-weight:700
}

.copt.on{
	border-color:var(--red);
	background:#fff;
	box-shadow:0 4px 12px -6px rgba(142,28,37,.35)
}

.copt.on .cn{
	color:var(--ink)
}

.copt .ck,.casecard .ck{
	position:absolute;
	top:-4px;
	right:-7px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--red);
	color:#fff;
	display:grid;
	place-items:center;
	opacity:0;
	transform:scale(.5);
	transition:opacity .18s,transform .18s var(--ease);
	z-index:2
}

.copt .ck svg,.casecard .ck svg{
	width:11px;
	height:11px
}

.copt.on .ck,.casecard.on .ck{
	opacity:1;
	transform:scale(1)
}

.cgroup.case{
	grid-column:1/-1
}

.case-strip{
	position:relative
}

.case-opts{
	display:flex;
	gap:10px;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	padding:4px 2px 10px;
	touch-action:pan-x;
	-webkit-overflow-scrolling:touch
}

.case-nav{
	position:absolute;
	top:calc(50% - 10px);
	transform:translateY(-50%);
	width:38px;
	height:38px;
	border-radius:50%;
	background:#fff;
	border:1px solid var(--line);
	box-shadow:var(--sh-md);
	display:grid;
	place-items:center;
	color:var(--soft);
	z-index:4;
	transition:color .18s,border-color .18s
}

.case-nav:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.case-nav svg{
	width:17px;
	height:17px
}

.case-nav.prev{
	left:-13px
}

.case-nav.next{
	right:-13px
}

.casecard{
	position:relative;
	flex:0 0 150px;
	scroll-snap-align:start;
	display:flex;
	flex-direction:column;
	gap:8px;
	border:1.5px solid transparent;
	border-radius:14px;
	background:var(--plate);
	padding:12px;
	text-align:left;
	transition:.18s;
	cursor:pointer
}

.casecard:hover{
	background:#e9ebef
}

.casecard.on{
	border-color:var(--red);
	background:#fff;
	box-shadow:0 6px 16px -8px rgba(142,28,37,.4)
}

.casecard image-slot,.casecard img{
	width:100%;
	height:110px;
	display:block;
	object-fit:contain;
	object-position:center
}

.casecard .cn{
	font-size:12.5px;
	font-weight:700;
	line-height:1.25;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:32px
}

.casecard .cp{
	font-size:12px;
	font-weight:800;
	color:var(--red);
	margin-top:auto
}

.casecard .cp.free{
	color:var(--muted);
	font-weight:700
}

/* ===== BUY BOX ===== */
.buybox{
	position:sticky;
	top:96px;
	display:grid;
	gap:14px
}

.bcard{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:20px;
	box-shadow:var(--sh-md)
}

.pzone{
	background:var(--plate);
	border-radius:14px;
	padding:16px 16px 15px
}

.pline{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap
}

.price{
	font-size:38px;
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.02;
	color:var(--ink);
	font-family:'Onest',sans-serif
}

.price .cur{
	font-size:22px
}

.disc-badge{
	display:inline-flex;
	align-items:center;
	background:var(--red);
	color:#fff;
	font-size:12.5px;
	font-weight:800;
	padding:4px 10px;
	border-radius:8px
}

.pold-line{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:5px
}

.price-old{
	font-size:15.5px;
	font-weight:700;
	color:var(--faint);
	text-decoration:line-through;
	text-decoration-color:var(--red);
	text-decoration-thickness:2px;
	font-family:'Onest',sans-serif
}

.pold-note{
	font-size:11.5px;
	color:var(--faint)
}

.price-save{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:10px;
	font-size:13px;
	font-weight:700;
	color:var(--green);
	background:var(--green-wash);
	padding:7px 12px;
	border-radius:9px
}

.price-save .ic{
	font-size:15px
}

.price-save b{
	font-weight:800
}

.price-sub{
	font-size:12.5px;
	color:var(--muted);
	margin-top:7px
}

.build{
	margin-top:12px;
	padding:12px 14px;
	border-radius:12px;
	background:var(--red-wash);
	border:1px solid var(--red-line)
}

.build .bh{
	display:flex;
	align-items:center;
	gap:7px;
	font-size:11.5px;
	font-weight:800;
	color:var(--red);
	letter-spacing:.04em;
	margin-bottom:8px
}

.build .brow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	width:100%;
	font-size:12.5px;
	padding:3px 0
}

.build .brow .l{
	display:flex;
	align-items:center;
	gap:7px;
	color:var(--soft);
	min-width:0
}

.build .brow .l svg{
	width:13px;
	height:13px;
	color:var(--green);
	flex-shrink:0
}

.build .brow .l span{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}

.build .brow .p{
	font-weight:700;
	flex-shrink:0
}

.stockrow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:14px 2px
}

.stock{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13.5px;
	font-weight:700;
	color:var(--green)
}

.stock .led{
	width:9px;
	height:9px;
	border-radius:50%;
	background:var(--green);
	box-shadow:0 0 0 4px var(--green-wash);
	animation:pulse 3s ease-in-out infinite
}

@keyframes pulse{
	0%,100%{
		box-shadow:0 0 0 4px var(--green-wash)
	}

	50%{
		box-shadow:0 0 0 7px rgba(21,104,63,.06)
	}

}

.buyrow{
	display:flex;
	gap:10px;
	margin-bottom:10px
}

.buyrow .btn-green{
	flex:1
}

.bactions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px
}

.altrow{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid var(--line-soft)
}

.actbtn{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	height:40px;
	border-radius:10px;
	font-size:12.5px;
	font-weight:700;
	border:1.5px solid var(--line);
	background:#fff;
	color:var(--soft);
	transition:.18s;
	white-space:nowrap
}

.actbtn:hover{
	border-color:var(--red-line);
	color:var(--red) !important
}

.actbtn.on{
	border-color:var(--red);
	background:var(--red-wash);
	color:var(--red)
}

.cheaper{
	width:100%;
	font-size:13px;
	font-weight:700;
	color:var(--red);
	padding:13px 4px 2px;
	text-align:center
}

.cheaper:hover{
	color:var(--red-dark) !important
}

.perks{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:18px;
	display:grid;
	gap:16px
}

.perk{
	display:flex;
	gap:12px;
	align-items:flex-start
}

.perk .ic{
	color:var(--red);
	font-size:21px;
	flex-shrink:0;
	margin-top:1px
}

.perk .t{
	font-size:13.5px;
	font-weight:700
}

.perk .s{
	font-size:12px;
	color:var(--muted);
	margin-top:1px;
	text-wrap:pretty
}

.livecard{
	display:flex;
	align-items:center;
	gap:13px;
	background:linear-gradient(135deg,#1f2228,#2b2f37);
	border-radius:var(--r-lg);
	padding:16px 18px;
	color:#fff;
	transition:transform .2s var(--ease),box-shadow .2s
}

.livecard:hover{
	transform:translateY(-3px);
	box-shadow:var(--sh-md)
}
.livecard:hover .live-t{
	color:#fff!important;
}
.live-ic{
	position:relative;
	width:44px;
	height:44px;
	border-radius:12px;
	background:rgba(255,0,0,.18);
	color:#ff5a5a;
	display:grid;
	place-items:center;
	flex-shrink:0
}

.live-ic svg{
	width:22px;
	height:22px
}

.live-dot{
	position:absolute;
	top:9px;
	right:9px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#ff2d2d;
	box-shadow:0 0 0 0 rgba(255,45,45,.6);
	animation:livepulse 2.4s infinite
}

@keyframes livepulse{
	0%{
		box-shadow:0 0 0 0 rgba(255,45,45,.55)
	}

	70%{
		box-shadow:0 0 0 8px rgba(255,45,45,0)
	}

	100%{
		box-shadow:0 0 0 0 rgba(255,45,45,0)
	}

}

.live-tx{
	flex:1;
	min-width:0
}

.live-t{
	display:block;
	font-size:14px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

.live-s{
	display:block;
	font-size:12px;
	color:#a7adb8;
	margin-top:2px;
	text-wrap:pretty
}

.live-go{
	color:#8e94a0;
	font-size:18px;
	transition:transform .18s
}

.livecard:hover .live-go{
	transform:translateX(3px);
	color:#fff
}

/* ===== TABS ===== */
.tabs{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	margin-top:32px;
	overflow:hidden
}

.tabbar{
	display:flex;
	align-items:center;
	gap:6px;
	padding:12px 14px;
	border-bottom:1px solid var(--line);
	overflow-x:auto
}

.tabbar .group{
	display:flex;
	gap:6px
}

.tab{
	padding:10px 18px;
	border-radius:10px;
	font-size:14px;
	font-weight:700;
	color:var(--muted);
	background:var(--plate);
	transition:background .2s,color .2s,box-shadow .2s;
	white-space:nowrap
}

.tab:hover{
	color:var(--ink)
}

.tab.on{
	background:var(--red);
	color:#fff;
	box-shadow:0 6px 14px -6px rgba(142,28,37,.55)
}

.printbtn{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	color:var(--muted);
	padding:0 10px;
	white-space:nowrap;
	margin-left:auto
}

.printbtn:hover{
	color:var(--red)
}

.tabpane{
	padding:28px;
	display:none
}

.tabpane.on{
	display:block;
	animation:fadein .35s var(--ease)
}

@keyframes fadein{
	from{
		opacity:0;
		transform:translateY(6px)
	}

	to{
		opacity:1;
		transform:none
	}

}

.spectable{
	width:100%;
	border-collapse:collapse;
	max-width:820px
}

.spectable td{
	padding:13px 16px;
	font-size:13.5px
}

.spectable tr:nth-child(odd){
	background:var(--line-soft)
}

.spectable td.k{
	color:var(--muted);
	width:46%
}

.spectable td.v{
	font-weight:600
}

.desc{
	font-size:15px;
	line-height:1.75;
	color:var(--soft);
	max-width:780px
}

.desc p{
	margin:0 0 14px;
	text-wrap:pretty
}

.desc strong{
	color:var(--ink);
	font-weight:700
}

.desc .keys{
	font-size:13px;
	color:var(--muted);
	margin-top:18px
}

.vidblock{
	max-width:780px
}

.vidhead{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:16px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	margin-bottom:14px
}

.vidhead .ic{
	color:var(--red);
	font-size:18px
}

.vidframe{
	display:block;
	position:relative;
	border-radius:16px;
	overflow:hidden;
	aspect-ratio:16/9;
	background:#10131a
}

.vidframe image-slot{
	width:100%;
	height:100%;
	display:block
}

.vidplay{
	position:absolute;
	inset:0;
	margin:auto;
	width:68px;
	height:68px;
	border-radius:50%;
	background:rgba(142,28,37,.92);
	color:#fff;
	display:grid;
	place-items:center;
	box-shadow:0 8px 24px -6px rgba(0,0,0,.5);
	transition:transform .2s var(--ease),background .2s
}

.vidplay svg{
	width:30px;
	height:30px;
	margin-left:3px
}

.vidframe:hover .vidplay{
	transform:scale(1.08);
	background:var(--red)
}

.vidyt{
	position:absolute;
	top:12px;
	right:12px;
	background:#ff0000;
	color:#fff;
	font-size:11px;
	font-weight:800;
	padding:5px 9px;
	border-radius:7px;
	letter-spacing:.02em
}

.viddis{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:14px 0 0;
	font-size:12.5px;
	color:var(--muted);
	line-height:1.5;
	text-wrap:pretty
}

.viddis .ic{
	color:var(--red);
	flex-shrink:0;
	margin-top:1px;
	font-size:15px
}

.revempty{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding:30px 20px;
	gap:14px
}

.revempty .big{
	width:64px;
	height:64px;
	border-radius:50%;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:30px
}

.revempty h3{
	margin:0;
	font-size:19px;
	font-weight:800
}

.revempty p{
	margin:0;
	font-size:14px;
	color:var(--muted);
	max-width:380px;
	text-wrap:pretty
}

.revform{
	max-width:560px
}

.revform h3{
	margin:0 0 16px;
	font-size:18px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

.rf-rate{
	display:flex;
	gap:4px;
	margin-bottom:16px
}

.rf-rate span{
	width:34px;
	height:34px;
	cursor:pointer;
	color:#dfe2e7;
	transition:transform .12s,color .12s
}

.rf-rate span svg{
	width:34px;
	height:34px
}

.rf-rate span:hover{
	transform:scale(1.12)
}

.rf-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-bottom:12px
}

.revform input,.revform textarea{
	width:100%;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:13px 15px;
	font-size:14px;
	outline:none;
	background:#fafafb;
	transition:border-color .2s,background .2s;
	resize:vertical;
	font-family:inherit
}

.revform input:focus,.revform textarea:focus{
	border-color:var(--red);
	background:#fff
}

.revform textarea{
	margin-bottom:14px
}

.rf-foot{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap
}

.rf-note{
	font-size:12px;
	color:var(--muted)
}

/* ===== список реальних відгуків (product/review.tpl, вантажиться по AJAX) ===== */
.revlist{
	display:flex;
	flex-direction:column;
	gap:14px;
	max-width:780px;
	margin-bottom:18px
}

.revitem{
	background:var(--plate);
	border:1px solid var(--line);
	border-radius:14px;
	padding:16px 18px
}

.revitem-head{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:8px
}

.revitem-author{
	font-size:14px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

.revitem-stars{
	display:inline-flex;
	gap:1px
}

.revitem-stars svg{
	width:13px;
	height:13px
}

.revitem-date{
	margin-left:auto;
	font-size:12px;
	color:var(--muted)
}

.revitem-text{
	margin:0;
	font-size:13.5px;
	line-height:1.6;
	color:var(--soft);
	text-wrap:pretty
}

.revitem-text audio{
	display:block;
	width:100%;
	margin-top:8px
}

.revpagin{
	max-width:780px
}

/* пагінація рендерить системний клас Pagination (OpenCart), розмітку
   не чіпаємо (<ul class="pagination"><li><a>/<span></li></ul>) — тільки
   скін під нову тему */
.revpagin .pagination{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
	list-style:none;
	margin:0;
	padding:0
}

.revpagin .pagination li{
	display:inline-flex
}

.revpagin .pagination li a,
.revpagin .pagination li span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:36px;
	height:36px;
	padding:0 10px;
	border-radius:10px;
	border:1.5px solid var(--line);
	background:#fff;
	color:var(--soft);
	font-size:13px;
	font-weight:700;
	transition:.18s
}

.revpagin .pagination li a:hover{
	border-color:var(--red-line);
	color:var(--red) !important
}

.revpagin .pagination li.active span{
	background:var(--red);
	border-color:var(--red);
	color:#fff
}

.revpagin .pagination li.disabled span{
	opacity:.4;
	cursor:default
}

.revnone{
	font-size:14px;
	color:var(--muted)
}

/* ============================================================================
   ПОПАП "В КРЕДИТ" (модуль ukrcredits, #ukrcredit-popup) — сторонній модуль,
   розмітку не чіпаємо (генерується вендорським catalog/view/theme/.../module),
   тільки скін під кольори і шрифти нової теми. Слайдери/прогрес-бари і
   кнопки "Оформити" в кожному рядку приховуємо — в макеті працює тільки
   загальний select + кнопка "Оформить кредит" внизу (реальний inline-скрипт
   попапу сам тригерить потрібну .prop_total кнопку по кліку).
   ============================================================================ */
#ukrcredit-popup{
	position:relative;
	background:#fff;
	border-radius:var(--r-lg);
	padding:28px;
	width:100%;
	max-width:860px;
	font-family:'Manrope',system-ui,sans-serif;
	color:var(--ink)
}

#ukrcredit-popup .credithead{
	font-size:20px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em;
	margin:0 0 18px;
	padding-right:36px
}

#ukrcredit-popup .credit-head-titles{
	display:flex;
	align-items:center;
	gap:16px;
	padding:0 18px 10px;
	border-bottom:1px solid var(--line);
	margin-bottom:6px
}

#ukrcredit-popup .ch-title{
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--muted)
}

#ukrcredit-popup .ch-title-bank{width:176px}
#ukrcredit-popup .ch-title-month{width:140px}
#ukrcredit-popup .ch-title-conditions{width:130px}
#ukrcredit-popup .ch-title-payment{margin-left:auto}

#ukrcredit-popup .proposition{
	border:1.5px solid var(--line);
	border-radius:14px;
	margin-bottom:10px;
	transition:border-color .18s
}

#ukrcredit-popup .proposition:hover{
	border-color:var(--red-line)
}

#ukrcredit-popup .proposition label{
	display:flex;
	align-items:center;
	gap:16px;
	padding:12px 18px;
	cursor:pointer;
	flex-wrap:wrap;
	margin:0
}

#ukrcredit-popup .credit-inp{
	position:relative;
	width:20px;
	height:20px;
	flex-shrink:0
}

#ukrcredit-popup .credit-inp input{
	position:absolute;
	inset:0;
	margin:0;
	opacity:0;
	cursor:pointer
}

#ukrcredit-popup .check-icon{
	position:absolute;
	inset:0;
	border-radius:50%;
	border:2px solid var(--line);
	transition:border-color .18s
}

#ukrcredit-popup .check-icon::after{
	content:"";
	position:absolute;
	inset:4px;
	border-radius:50%;
	background:var(--red);
	opacity:0;
	transition:opacity .18s
}

#ukrcredit-popup .credit-inp input:checked ~ .check-icon{
	border-color:var(--red)
}

#ukrcredit-popup .credit-inp input:checked ~ .check-icon::after{
	opacity:1
}

#ukrcredit-popup .prop_name{
	display:flex;
	align-items:center;
	gap:10px;
	width:176px;
	flex-shrink:0
}

#ukrcredit-popup .prop_name img{
	width:26px !important;
	height:26px !important;
	max-width:26px !important;
	border-radius:8px;
	object-fit:contain;
	flex-shrink:0
}

#ukrcredit-popup .prop_name span{
	font-size:13.5px;
	font-weight:700;
	line-height:1.25
}

#ukrcredit-popup .prop_info{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	flex:1;
	min-width:0
}

#ukrcredit-popup .prop_calc{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	flex:1;
	min-width:0
}

#ukrcredit-popup .prop_select{
	width:140px;
	flex-shrink:0
}

#ukrcredit-popup .prop_select select{
	width:100%;
	height:40px;
	border:1.5px solid var(--line);
	border-radius:10px;
	padding:0 32px 0 12px;
	font-size:13px;
	font-weight:700;
	font-family:inherit;
	color:var(--ink);
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371757f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
	appearance:none;
	cursor:pointer;
	transition:border-color .18s
}

#ukrcredit-popup .prop_select select:hover,
#ukrcredit-popup .prop_select select:focus{
	border-color:var(--red-line);
	outline:none
}

#ukrcredit-popup .credit-info-link{
	width:120px;
	flex-shrink:0
}

#ukrcredit-popup .credit-info-link a{
	font-size:12.5px;
	color:var(--muted);
	text-decoration:underline
}

#ukrcredit-popup .credit-info-link a:hover{
	color:var(--red) !important
}

#ukrcredit-popup .calc-c-pers{
	margin-left:auto;
	text-align:right
}

#ukrcredit-popup .prop_paymentsCount{
	font-size:11.5px;
	color:var(--muted)
}

#ukrcredit-popup .prop_permounth{
	font-size:14px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

#ukrcredit-popup .prop_price{
	display:none
}

#ukrcredit-popup [id^="termSlider"],
#ukrcredit-popup .prop_total{
	display:none
}

#ukrcredit-popup #credit-error{
	color:var(--red);
	font-size:13px;
	font-weight:700;
	margin:8px 2px 0
}

#ukrcredit-popup .footer-credits{
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
	margin-top:20px;
	padding-top:18px;
	border-top:1px solid var(--line)
}

#ukrcredit-popup .credit-prod-price{
	font-size:20px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

#ukrcredit-popup .button-credit-back{
	margin-left:auto;
	cursor:pointer;
	font-size:13.5px;
	font-weight:700;
	color:var(--muted);
	transition:color .18s
}

#ukrcredit-popup .button-credit-back span{
	display:inline-flex;
	align-items:center;
	gap:8px
}

#ukrcredit-popup .button-credit-back svg{
	width:9px;
	height:auto
}

#ukrcredit-popup .button-credit-back svg path{
	fill:currentColor
}

#ukrcredit-popup .button-credit-back:hover{
	color:var(--red) !important
}

#ukrcredit-popup .confirm-credit-btn{
	background:var(--red);
	color:#fff;
	font-weight:800;
	font-size:14px;
	padding:13px 26px;
	border-radius:12px;
	cursor:pointer;
	transition:background .18s,transform .12s
}

#ukrcredit-popup .confirm-credit-btn:hover{
	background:var(--red-dark)
}

#ukrcredit-popup .mfp-close{
	position:absolute;
	top:22px;
	right:22px;
	width:34px;
	height:34px;
	border-radius:10px;
	color:var(--muted);
	font-size:22px;
	line-height:34px;
	text-align:center;
	transition:.15s
}

#ukrcredit-popup .mfp-close:hover{
	background:var(--line-soft);
	color:var(--ink) !important
}

@media(max-width:640px){
	#ukrcredit-popup{
		padding:20px
	}

	#ukrcredit-popup .credit-head-titles{
		display:none
	}

	#ukrcredit-popup .prop_name{
		width:100%
	}

	#ukrcredit-popup .calc-c-pers{
		margin-left:0;
		text-align:left
	}

	#ukrcredit-popup .footer-credits{
		flex-direction:column;
		align-items:stretch
	}

	#ukrcredit-popup .button-credit-back{
		margin-left:0;
		order:2
	}

	#ukrcredit-popup .confirm-credit-btn{
		order:1;
		text-align:center
	}
}

@media(max-width:560px){
	.rf-row{
		grid-template-columns:1fr
	}

}

/* периферія — горизонтальні плитки (аксесуари) */
.periph{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px
}

.pcard{
	display:flex;
	align-items:center;
	gap:13px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px 16px;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
	cursor:pointer
}

.pcard:hover{
	transform:translateY(-4px);
	box-shadow:var(--sh-md);
	border-color:var(--red-line)
}

.pcard image-slot{
	width:58px;
	height:58px;
	flex-shrink:0;
	display:block
}

.pcard .nm{
	font-size:13.5px;
	font-weight:700;
	flex:1
}

.pcard .arrow{
	color:var(--faint);
	font-size:15px;
	transition:transform .2s
}

.pcard:hover .arrow{
	transform:translateX(4px);
	color:var(--red)
}

/* ===== ГОРИЗОНТАЛЬНА КАРТКА ТОВАРУ (карусель "ТОП ПК" на сторінці товару) ===== */
.prods{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px
}

.prods.scroll{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	margin:0 -4px;
	padding:0 4px 6px;
	-webkit-user-select:none;
	user-select:none
}

.prods.scroll .prod{
	flex:0 0 268px;
	scroll-snap-align:start
}

.prod{
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
	cursor:pointer;
	position:relative
}

.prod:hover{
	transform:translateY(-5px);
	box-shadow:var(--sh-md);
	border-color:var(--red-line)
}

.prod-media{
	position:relative;
	background:linear-gradient(180deg,#fbfbfc,#fff);
	padding:14px 14px 8px
}

.prod-media image-slot,.prod-media img{
	width:100%;
	height:186px;
	display:block;
	object-fit:contain;
	object-position:center
}

.prod-flag{
	position:absolute;
	top:12px;
	left:12px;
	z-index:2;
	pointer-events:none
}

.prod-stick{
	position:absolute;
	left:12px;
	bottom:10px;
	display:flex;
	flex-direction:column;
	gap:5px;
	z-index:2;
	pointer-events:none;
	align-items:flex-start
}

.prod-stick .ps{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:10.5px;
	font-weight:800;
	color:var(--ink);
	background:rgba(255,255,255,.96);
	border:1px solid var(--line);
	box-shadow:0 3px 9px rgba(24,26,31,.1);
	border-radius:999px;
	padding:4px 9px 4px 7px;
	white-space:nowrap
}

.prod-stick .ps svg{
	width:13px;
	height:13px;
	flex:none;
	fill:none;
	stroke:currentColor;
	stroke-width:2.1;
	stroke-linecap:round;
	stroke-linejoin:round
}

.prod-stick .ps.d svg{
	color:var(--red)
}

.prod-stick .ps.p svg{
	color:var(--green)
}

.prod-fav{
	position:absolute;
	top:11px;
	right:11px;
	width:34px;
	height:34px;
	border-radius:10px;
	background:rgba(255,255,255,.92);
	border:1px solid var(--line);
	color:var(--faint);
	display:grid;
	place-items:center;
	z-index:2;
	transition:.18s;
	backdrop-filter:blur(4px)
}

.prod-fav:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.prod-fav svg{
	width:17px;
	height:17px
}

.prod-fav.on{
	color:var(--red);
	background:var(--red-wash);
	border-color:var(--red-line)
}

.prod-body{
	padding:8px 16px 16px;
	display:flex;
	flex-direction:column;
	gap:11px;
	flex:1
}

.prod-title{
	font-size:13.5px;
	font-weight:700;
	line-height:1.35;
	color:var(--ink);
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:37px
}

.prod:hover .prod-title{
	color:var(--red)
}

.prod-specs{
	display:grid;
	gap:6px;
	padding:10px 12px;
	background:var(--plate);
	border-radius:10px
}

.prod-spec{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:var(--soft);
	min-width:0
}

.prod-spec svg{
	width:15px;
	height:15px;
	color:var(--red);
	flex-shrink:0
}

.prod-spec b{
	font-weight:700;
	color:var(--ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0
}

.prod-spec .sd{
	color:var(--muted);
	white-space:nowrap
}

.prod-foot{
	margin-top:auto;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:10px
}

.prod-price{
	line-height:1;
	min-width:0
}

.prod-price .pline2{
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:4px
}

.prod-price .pold{
	font-size:12px;
	font-weight:700;
	color:var(--faint);
	text-decoration:line-through;
	text-decoration-color:var(--red)
}

.prod-price .pdisc{
	display:inline-flex;
	background:var(--red);
	color:#fff;
	font-size:10.5px;
	font-weight:800;
	padding:2.5px 6px;
	border-radius:6px
}

.prod-price .pv{
	display:block;
	font-size:19px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

.prod-instk{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:11px;
	font-weight:700;
	color:var(--green);
	margin-top:5px
}

.prod-instk .led{
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--green)
}

.prod-buy{
	display:inline-flex;
	align-items:center;
	gap:5px;
	border:1.5px solid var(--red-line);
	color:var(--red);
	font-size:12.5px;
	font-weight:700;
	padding:9px 13px;
	border-radius:999px;
	transition:.18s;
	flex-shrink:0;
	white-space:nowrap
}

.prod-buy:hover{
	background:var(--red);
	color:#fff;
	border-color:var(--red)
}

.prod-buy svg{
	width:14px;
	height:14px
}

/* ===== мобільна липка панель "купити" ===== */
.mbuy{
	display:none;
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:90;
	background:#fff;
	border-top:1px solid var(--line);
	padding:10px 16px;
	align-items:center;
	gap:12px;
	box-shadow:0 -6px 20px rgba(24,26,31,.08)
}

.mbuy .p{
	flex:1
}

.mbuy .pn{
	font-size:22px;
	font-weight:800;
	color:var(--ink);
	line-height:1;
	font-family:'Onest',sans-serif
}

.mbuy .st{
	font-size:11px;
	color:var(--green);
	font-weight:700;
	margin-top:2px
}

/* ===== модальне вікно (напр. "повідомити про наявність") ===== */
.modal{
	position:fixed;
	inset:0;
	z-index:130;
	display:flex!important;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(20,22,26,.55);
	backdrop-filter:blur(3px);
	opacity:0;
	visibility:hidden;
	transition:opacity .25s var(--ease),visibility .25s
}

.modal.show{
	opacity:1;
	visibility:visible
}

.modal-card{
	background:#fff;
	border-radius:var(--r-lg);
	padding:28px;
	width:100%;
	max-width:440px;
	position:relative;
	box-shadow:var(--sh-lg);
	transform:translateY(12px) scale(.98);
	transition:transform .25s var(--ease)
}

.modal.show .modal-card{
	transform:none
}

.modal-x{
	position:absolute;
	top:14px;
	right:14px;
	width:36px;
	height:36px;
	border-radius:10px;
	color:var(--muted);
	display:grid;
	place-items:center;
	transition:.15s
}

.modal-x:hover{
	background:var(--line-soft);
	color:var(--ink)
}

.modal-x svg{
	width:18px;
	height:18px
}

.modal-card h3{
	margin:0 0 6px;
	font-size:21px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

.modal-card .lm-sub{
	margin:0 0 18px;
	font-size:14px;
	color:var(--muted);
	text-wrap:pretty
}

.lm-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px
}

.modal-card input{
	width:100%;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:13px 15px;
	font-size:14px;
	outline:none;
	background:#fafafb;
	transition:border-color .2s,background .2s;
	font-family:inherit
}

.modal-card input:focus{
	border-color:var(--red);
	background:#fff
}

.modal-card textarea{
	width:100%;
	min-height:88px;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:13px 15px;
	font-size:14px;
	outline:none;
	background:#fafafb;
	resize:vertical;
	transition:border-color .2s,background .2s;
	font-family:inherit
}

.modal-card textarea:focus{
	border-color:var(--red);
	background:#fff
}

.modal-card input.has-error{
	border-color:var(--red) !important;
	background:var(--red-wash) !important
}

.lang-modal-card{
	max-width:420px;
	text-align:center
}

.lang-modal-card h3{
	margin:0 0 18px;
	text-align:center
}

.lang-choice-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px
}

.lang-choice{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:16px 10px;
	border:1.5px solid var(--line);
	border-radius:14px;
	background:#fff;
	transition:border-color .2s,box-shadow .2s,transform .15s
}

.lang-choice:hover{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm);
	transform:translateY(-2px)
}

.lc-flag{
	width:100%;
	height:auto;
	max-width:100px
}

.lc-label{
	font-size:14px;
	font-weight:700;
	color:var(--ink)
}

@media(max-width:480px){
	.lang-choice-row{
		grid-template-columns:1fr;
		gap:10px
	}

	.lang-choice{
		flex-direction:row;
		justify-content:flex-start;
		padding:10px 14px
	}

	.lc-flag{
		max-width:56px;
		flex-shrink:0
	}
}

.found-success{
	padding:20px 4px 4px;
	text-align:center;
	font-size:15px;
	line-height:1.5;
	color:var(--soft)
}

.lm-channels{
	display:flex;
	align-items:center;
	gap:8px;
	margin:16px 0
}

.lm-channels span{
	font-size:13px;
	color:var(--muted);
	margin-right:2px
}

.lm-ch{
	width:42px;
	height:42px;
	border-radius:12px;
	color:#fff;
	display:grid;
	place-items:center;
	transition:transform .18s var(--ease),box-shadow .18s
}

.lm-ch svg{
	width:19px;
	height:19px
}

.lm-ch:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 18px -8px rgba(24,26,31,.35)
}

.lm-ch.tg{
	background:#229ed9
}

.lm-ch.vb{
	background:#7360f2
}

.lm-ch.wa{
	background:#25d366
}

.lm-ch.mail{
	background:var(--red)
}

@media(max-width:480px){
	.lm-row{
		grid-template-columns:1fr
	}

}

/* ===== RESPONSIVE (картка товару, унікальне) ===== */
@media(max-width:1120px){
	.pmain{
		grid-template-columns:minmax(0,1fr)
	}

	.kgrid{
		grid-template-columns:1fr 1fr
	}

	.stage image-slot{
		min-height:500px
	}

}

@media(max-width:980px){
	.hero{
		grid-template-columns:minmax(0,1fr)
	}

	.buybox{
		position:static
	}

	.cfg{
		margin-bottom:16px
	}

	.periph{
		grid-template-columns:1fr 1fr
	}

	.prods{
		grid-template-columns:repeat(3,1fr)
	}

}

@media(max-width:900px){
	.mbuy{
		display:flex
	}

	.cfg-grid{
		grid-template-columns:1fr
	}

}

@media(max-width:640px){
	.kgrid{
		grid-template-columns:1fr
	}

	.periph{
		grid-template-columns:1fr
	}

	.prods{
		grid-template-columns:repeat(2,1fr)
	}

	.stage image-slot{
		min-height:420px
	}

	.thumb{
		width:66px;
		height:56px;
		flex:0 0 66px
	}

	.bactions{
		grid-template-columns:1fr
	}

	.cg-opts{
		grid-template-columns:1fr 1fr
	}

	.casecard{
		flex:0 0 128px
	}

}

/* ============================================================================
   КАТЕГОРІЯ (category.twig)
   ============================================================================ */
.cathead{
	margin:2px 0 14px
}

.cathead h1{
	font-size:clamp(25px,2.8vw,31px);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.15;
	margin:0 0 8px
}

.catintro{
	font-size:13.5px;
	line-height:1.6;
	color:var(--soft);
	max-width:960px;
	margin:0;
	text-wrap:pretty
}

/* --- реальний опис категорії (адмінський WYSIWYG, .cat-description/.category-long-text) —
   вёрстку не чіпаємо (готовий HTML з адмінки), тільки візуал під .seocard з макета --- */
.cat-description{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:26px 28px;
	margin-top:16px;
	margin-bottom:8px
}

.cat-description .category-long-text h2{
	font-size:20px;
	margin:0 0 10px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--ink)
}

.cat-description .category-long-text h3{
	font-size:16px;
	margin:20px 0 10px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--ink)
}

.cat-description .category-long-text p{
	font-size:13.8px;
	line-height:1.7;
	color:var(--soft);
	margin:0 0 12px;
	max-width:880px;
	text-wrap:pretty
}

.cat-description .category-long-text ul{
	display:grid;
	gap:9px;
	margin:16px 0 20px;
	padding-left:20px
}

.cat-description .category-long-text li{
	font-size:13.5px;
	color:var(--soft);
	line-height:1.55
}

.cat-description .category-long-text b,
.cat-description .category-long-text strong{
	color:var(--ink)
}

.cat-description .category-long-text hr{
	border:none;
	border-top:1px solid var(--line);
	margin:20px 0
}

.cat-description .category-long-text .geo{
	color:var(--muted);
	font-size:12.5px
}

/* --- Блог: список статей (blog/home), стаття (blog/blog), модулі сайдбару --- */
.blg-list{
	display:grid;
	gap:14px;
	margin-top:18px
}

.blg-item{
	display:flex;
	gap:18px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:14px;
	transition:.2s
}

.blg-item:hover{
	border-color:var(--red);
	box-shadow:0 10px 24px -16px rgba(24,26,31,.35)
}

.blg-im{
	flex-shrink:0;
	width:240px;
	height:150px;
	border-radius:12px;
	overflow:hidden;
	background:var(--plate)
}

.blg-im img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s var(--ease)
}

.blg-item:hover .blg-im img{
	transform:scale(1.05)
}

.blg-bd{
	min-width:0;
	display:flex;
	flex-direction:column
}

.blg-date{
	font-size:12px;
	color:var(--muted);
	font-weight:700
}

.blg-t{
	font-size:18px;
	font-weight:800;
	letter-spacing:-.01em;
	line-height:1.3;
	margin:6px 0 8px
}

.blg-t a{
	color:var(--ink)
}

.blg-t a:hover{
	color:var(--red)
}

.blg-x{
	font-size:13.5px;
	line-height:1.6;
	color:var(--soft);
	margin:0 0 10px;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical
}

.blg-more{
	margin-top:auto;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	color:var(--red)
}

.blg-more svg{
	width:18px;
	height:9px
}

.blg-empty{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:30px;
	text-align:center;
	color:var(--soft);
	margin-top:18px
}

@media(max-width:600px){
	.blg-item{
		flex-direction:column
	}

	.blg-im{
		width:100%;
		height:180px
	}
}

/* Стаття блогу */
#blog-post-page > .row{
	margin-top:18px
}

.blg-post-thumb{
	border-radius:var(--r-lg);
	overflow:hidden;
	margin-bottom:28px
}

.blg-post-thumb img{
	width:100%;
	display:block
}

.blog.blog_post{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:26px 28px
}

.blog.blog_post .cat-description{
	background:none;
	border:none;
	border-radius:0;
	padding:0;
	margin:18px 0 0
}

.blg-post-h1{
	font-size:clamp(24px,3vw,32px);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.2;
	margin:0 0 12px
}

.blg-meta{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	font-size:12.5px;
	color:var(--muted);
	margin-bottom:18px;
	padding-bottom:16px;
	border-bottom:1px solid var(--line)
}

.blg-meta span{
	display:flex;
	align-items:center;
	gap:6px
}

.blg-meta b.hl{
	color:var(--ink);
	font-weight:700
}

.blg-body img{
	max-width:100%;
	height:auto;
	border-radius:12px;
	margin:6px 0
}

.blg-body a{
	color:var(--red);
	text-decoration:underline
}

/* Сайдбар блогу: пошук + категорії (extension/module/blog_category) */
.blog-search{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:16px;
	margin-bottom:14px
}

.blog-search .h4{
	font-size:15px;
	font-weight:800;
	margin:0 0 10px
}

#blog_search{
	display:flex;
	border:1px solid var(--line);
	border-radius:10px;
	overflow:hidden
}

#blog_search input{
	flex:1;
	min-width:0;
	border:none;
	outline:none;
	padding:0 12px;
	height:42px;
	font-size:13px;
	background:transparent
}

#blog_search .input-group-btn{
	display:flex
}

#blog_search .search-btn-bg{
	width:42px;
	height:42px;
	border:none;
	background:var(--red);
	display:grid;
	place-items:center;
	cursor:pointer;
	flex-shrink:0
}

#blog_search .search-btn-bg svg{
	width:16px;
	height:16px
}

.blog-module.blog-category{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:16px;
	margin-bottom:18px !important
}

.blog-module.blog-category .h4{
	font-size:15px;
	font-weight:800;
	margin:0 0 4px
}

.blog-module.blog-category .list-unstyled{
	list-style:none;
	margin:0;
	padding:0
}

.blog-module.blog-category .list-unstyled > li > a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:9px 2px;
	font-size:13.5px;
	color:var(--soft);
	border-bottom:1px solid var(--line-soft)
}

.blog-module.blog-category .list-unstyled > li:last-child:not(.open) > a,
.blog-module.blog-category .list-unstyled > li:last-child > ul + a{
	border-bottom:none
}

.blog-module.blog-category .list-unstyled > li > a:hover{
	color:var(--red)
}

.blog-module.blog-category ul ul{
	list-style:none;
	margin:0 0 6px 12px;
	padding:0;
	display:none
}

.blog-module.blog-category li.open > ul{
	display:block
}

.blog-module.blog-category ul ul a{
	padding:7px 2px;
	font-size:12.5px;
	color:var(--muted);
	display:flex;
	align-items:center;
	gap:6px
}

.blog-module.blog-category .sign{
	display:none
}

/* blog_latest у вузькому правому сайдбарі — та сама секція, що на головній,
   тут стискаємо у вертикальний список замість сітки/каруселі */
#column-right .hm-sec{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:16px;
	margin:0 0 14px
}

#column-right .hm-shead{
	margin-bottom:10px
}

#column-right .hm-h2{
	font-size:15px
}

#column-right .hm-sub{
	display:none
}

#column-right .hm-arts{
	display:flex;
	flex-direction:column;
	gap:14px
}

#column-right .hm-art{
	flex-direction:row;
	align-items:center;
	width:100%;
	border:none;
	border-radius:0;
	border-bottom:1px solid var(--line-soft);
	padding-bottom:14px
}

#column-right .hm-art:last-child{
	border-bottom:none;
	padding-bottom:0
}

#column-right .hm-art:hover{
	transform:none;
	box-shadow:none
}

#column-right .hm-art .im{
	width:84px;
	aspect-ratio:1/1;
	flex-shrink:0;
	border-radius:10px
}

#column-right .hm-art .bd{
	padding:0 0 0 12px;
	gap:5px
}

#column-right .hm-art b{
	font-size:13px;
	line-height:1.35;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical
}

#column-right .hm-art time{
	font-size:11px
}

#column-right .hm-art .go{
	display:none
}

/* --- Страница 404 (error/not_found) --- */
.e404{
	max-width:900px;
	margin:34px auto 62px;
	text-align:center
}

.e404-art{
	color:var(--red)
}

.e404-art svg{
	width:104px;
	height:auto
}

.e404-num{
	font-family:'JetBrains Mono',ui-monospace,monospace;
	font-weight:700;
	font-size:56px;
	letter-spacing:.04em;
	color:var(--red);
	line-height:1;
	margin-top:6px
}

.e404 h1{
	font-size:30px;
	line-height:1.1;
	letter-spacing:-.01em;
	margin:6px 0 8px
}

.e404 .lead{
	color:var(--soft);
	font-size:15px;
	max-width:560px;
	margin:0 auto;
	text-wrap:pretty
}

.e404-search{
	display:flex;
	gap:8px;
	max-width:560px;
	margin:26px auto 0;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:7px 7px 7px 15px;
	align-items:center;
	box-shadow:0 12px 32px -22px rgba(24,26,31,.5)
}

.e404-search .ic{
	color:var(--muted);
	font-size:18px;
	flex-shrink:0
}

.e404-search input{
	flex:1;
	min-width:0;
	border:0;
	outline:0;
	font:inherit;
	font-size:14.5px;
	color:var(--ink);
	background:transparent
}

.e404-search .btn{
	flex-shrink:0
}

.e404-nav{
	margin-top:36px
}

.e404-nav-l{
	display:block;
	font-size:11px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:14px
}

.e404-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px
}

.e404-card{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:3px;
	text-align:left;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	padding:16px 18px;
	text-decoration:none;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.e404-card:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.e404-card .ic{
	color:var(--red);
	font-size:22px;
	margin-bottom:6px
}

.e404-card b{
	color:var(--ink);
	font-size:15px;
	font-weight:700
}

.e404-card span{
	color:var(--muted);
	font-size:12.8px;
	line-height:1.4
}

.e404-cta{
	display:flex;
	gap:12px;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:32px
}

@media(max-width:720px){
	.e404-grid{
		grid-template-columns:repeat(2,1fr)
	}
}

@media(max-width:460px){
	.e404-grid{
		grid-template-columns:1fr
	}

	.e404-cta{
		flex-direction:column
	}

	.e404-cta .btn{
		width:100%
	}
}

/* --- Сторінки information/information: форма "Задать вопрос" (і Trade-IN,
   вона теж отримує клас .ask-block) — розмітку/id/name не чіпаємо, тільки CSS --- */
.ask-form-wrap{
	margin-top:24px
}

.ask-block{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:24px 26px;
	margin:0px 22px;
}

.title-ask{
	font-size:19px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--ink);
	margin:0 0 6px
}

.title-ask-info{
	font-size:13.5px;
	color:var(--soft);
	margin:0 0 16px;
	max-width:640px;
	text-wrap:pretty
}

#ask-form label,
#tridein-form label{
	display:block;
	margin-bottom:10px
}

#ask-form input[type="text"],
#ask-form textarea,
#tridein-form input[type="text"],
#tridein-form textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:10px;
	padding:11px 14px;
	font:inherit;
	font-size:13.5px;
	color:var(--ink);
	background:#fff;
	transition:border-color .15s
}

#ask-form input[type="text"]:focus,
#ask-form textarea:focus,
#tridein-form input[type="text"]:focus,
#tridein-form textarea:focus{
	outline:none;
	border-color:var(--red)
}

#ask-form textarea,
#tridein-form textarea{
	min-height:110px;
	resize:vertical
}

#tridein-form label span{
	display:block;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	margin-bottom:5px
}

.ask-block .btn-primary{
	background:var(--red);
	border-color:var(--red);
	color:#fff;
	border-radius:10px;
	padding:11px 22px;
	font-weight:700;
	font-size:13.5px;
	margin-top:4px
}

.ask-block .btn-primary:hover{
	filter:brightness(.92)
}

.result-form{
	display:inline-block;
	margin-left:10px;
	font-size:13px;
	color:var(--green)
}

.tridein__text-b{
	margin-bottom:14px;
	color:var(--soft);
	font-size:13.5px
}

/* --- Сайдбар "Помощь" (extension/module/html, контент у БД, не файл проекту) --- */
.hp-box{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:14px;
	position:sticky;
	top:98px
}

.hp-head{
	display:flex;
	align-items:center;
	gap:10px;
	padding:4px 6px 14px;
	border-bottom:1px solid var(--line-soft);
	margin-bottom:8px
}

.hp-head .hi{
	width:38px;
	height:38px;
	border-radius:10px;
	background:var(--plate);
	color:var(--red);
	display:grid;
	place-items:center;
	flex-shrink:0
}

.hp-head .hi svg{
	width:20px;
	height:20px
}

.hp-head-tx{
	display:flex;
	flex-direction:column;
	gap:1px
}

.hp-head-tx b{
	font-size:14px;
	font-weight:800;
	color:var(--ink)
}

.hp-head-tx span{
	font-size:11.5px;
	color:var(--muted)
}

.hp-glabel{
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	padding:12px 6px 6px
}

.hp-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 6px;
	border-radius:10px;
	font-size:13.5px;
	font-weight:600;
	color:var(--soft);
	transition:.15s
}

.hp-item:hover{
	background:var(--plate);
	color:var(--red)
}

.hp-item .i{
	width:20px;
	height:20px;
	flex-shrink:0;
	color:var(--muted)
}

.hp-item:hover .i{
	color:var(--red)
}

.hp-item .chev{
	margin-left:auto;
	width:15px;
	height:15px;
	color:var(--line);
	flex-shrink:0
}

/* --- Сторінка FAQ (information/faq) — розмітку акордеону (Bootstrap collapse,
   data-toggle) і форми #form-faq не чіпаємо, тільки CSS --- */
.faq-group-title{
	font-size:18px;
	font-weight:800;
	letter-spacing:-.01em;
	margin:28px 0 14px
}

.faq-group-title:first-child{
	margin-top:0
}

.faq-list{
	display:grid;
	gap:10px;
	margin-bottom:8px
}

.faq-item{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	overflow:hidden
}

.faq-item .panel-heading{
	padding:0;
	background:none;
	border:none
}

.faq-item .panel-title{
	margin:0;
	font-size:14.5px;
	font-weight:700
}

.faq-item .accordion-toggle{
	display:flex;
	align-items:center;
	gap:10px;
	padding:14px 18px;
	color:var(--ink);
	text-decoration:none
}

.faq-item .accordion-toggle:hover{
	color:var(--red)
}

.faq-item .panel-body{
	padding:0 18px 16px
}

.faq-item .panel-body p,
.faq-flat-item p{
	margin:0
}

.faq-item .panel-body p + p,
.faq-flat-item p + p{
	margin-top:8px
}

/* view/javascript/faq/faq.css (вендорний, вантажиться пізніше нашого style.css)
   перебиває display:block і додає свою glyphicon-стрілку через ::after —
   глушимо це тут, з вищою специфічністю (наш #faq-page-скоуп) */
#faq-page .faq-item .accordion-toggle{
	display:flex
}

.panel-faq .panel-heading .accordion-toggle:after,
.panel-faq .panel-heading .accordion-toggle.collapsed:after{
	content:none;
	display:none
}

.faq-item .badge,
.faq-flat-item .badge{
	flex-shrink:0;
	width:22px;
	height:22px;
	border-radius:50%;
	background:var(--plate);
	color:var(--soft);
	font-size:11px;
	font-weight:800;
	display:grid;
	place-items:center
}

.faq-chev{
	margin-left:auto;
	flex-shrink:0;
	width:16px;
	height:16px;
	color:var(--muted);
	transition:transform .2s
}

.faq-chev svg{
	width:100%;
	height:100%
}

.accordion-toggle:not(.collapsed) .faq-chev{
	transform:rotate(180deg)
}

.faq-item .panel-body{
	padding:0 18px 18px;
	font-size:13.5px;
	line-height:1.65;
	color:var(--soft)
}

.faq-item .panel-body p,
.faq-flat-item p{
	margin:10px 0 0px
}

.faq-item .panel-body ul,
.faq-flat-item ul{
	padding-left:20px;
	margin:0 0 10px
}

.faq-item .panel-body img,
.faq-flat-item img{
	max-width:100%;
	height:auto;
	border-radius:10px
}

.faq-flat{
	display:grid;
	gap:14px;
	margin-bottom:8px
}

.faq-flat-item{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:18px
}

.faq-flat-item h4{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:14.5px;
	font-weight:700;
	color:var(--ink);
	margin:0 0 10px
}

.faq-ask-card{
	margin-top:20px
}

.faq-ask-card h3{
	font-size:17px;
	font-weight:800;
	margin:0 0 14px
}

.faq-answer-card{
	margin-top:4px
}

.faq-answer-q{
	font-size:clamp(20px,2.4vw,25px);
	font-weight:800;
	letter-spacing:-.01em;
	line-height:1.3;
	margin:0 0 16px
}

/* ===== Обратная связь (information/contact) ===== */
.ct-card{
	margin-bottom:14px
}

.ct-card-title{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:17px;
	font-weight:800;
	letter-spacing:-.01em;
	margin:0 0 16px;
	color:var(--ink)
}

.ct-card-title .ic{
	line-height:0;
	flex-shrink:0
}

.ct-card-title .ic svg{
	width:20px;
	height:20px;
	color:var(--red)
}

.ct-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:20px
}

.ct-img{
	grid-column:1/-1
}

.ct-img img{
	max-width:220px;
	border-radius:var(--r-md);
	border:1px solid var(--line)
}

.ct-col{
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0
}

.ct-label{
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.02em;
	color:var(--soft)
}

.ct-label.ct-mt{
	margin-top:8px
}

.ct-val{
	font-size:14.5px;
	color:var(--ink);
	line-height:1.5
}

.ct-val a{
	color:var(--ink)
}

.ct-val a:hover{
	color:var(--red)
}

.ct-addr{
	font-style:normal;
	font-size:14.5px;
	color:var(--ink);
	line-height:1.5;
	margin:0
}

.ct-map-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:4px;
	font-size:13px;
	font-weight:700;
	color:var(--red);
	width:fit-content
}

.ct-map-btn svg{
	width:16px;
	height:16px
}

.ct-map-btn:hover{
	text-decoration:underline
}

.ct-locs{
	margin-bottom:14px
}

.ct-locs-title{
	font-size:17px;
	font-weight:800;
	letter-spacing:-.01em;
	margin:0 0 12px;
	color:var(--ink)
}

.ct-loc{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	overflow:hidden;
	margin-bottom:10px
}

.ct-loc-head{
	padding:0;
	background:none;
	border:none
}

.ct-loc-head .panel-title{
	margin:0
}

.ct-loc-head .accordion-toggle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:14px 18px;
	font-size:14.5px;
	font-weight:700;
	color:var(--ink)
}

.ct-loc-head .accordion-toggle:hover{
	color:var(--red)
}

.ct-chev svg{
	width:18px;
	height:18px;
	color:var(--soft);
	transition:transform .2s
}

.ct-loc-head .accordion-toggle[aria-expanded="true"] .ct-chev svg,
.ct-loc-head .accordion-toggle.active .ct-chev svg{
	transform:rotate(180deg)
}

.ct-loc-body{
	padding:0 18px 18px
}

.ct-form-card legend{
	grid-column:1/-1;
	font-size:17px;
	font-weight:800;
	letter-spacing:-.01em;
	margin:0 0 4px;
	color:var(--ink);
	border:none;
	padding:0
}

.ct-form-card .ct-full{
	grid-column:1/-1
}

.ct-form-card textarea.form-control{
	height:auto;
	min-height:140px;
	padding:12px 14px;
	resize:vertical
}

@media(max-width:640px){
	.ct-grid{
		grid-template-columns:1fr
	}
}

/* ===== Отзывы о товарах (product/reviews) ===== */
.rev-list{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	margin-top:16px
}

.rev-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:18px 20px
}

.rev-card-prod{
	display:flex;
	align-items:center;
	gap:12px
}

.rev-prod-media{
	flex-shrink:0;
	width:56px;
	height:56px;
	border-radius:12px;
	overflow:hidden;
	border:1px solid var(--line);
	background:#fafafb
}

.rev-prod-media img{
	width:100%;
	height:100%;
	object-fit:contain
}

.rev-prod-info{
	min-width:0
}

.rev-prod-name{
	display:block;
	font-size:14px;
	font-weight:700;
	color:var(--ink);
	line-height:1.35;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical
}

.rev-prod-name:hover{
	color:var(--red)
}

.rev-prod-foot{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:5px;
	flex-wrap:wrap
}

.rev-prod-price{
	font-size:13.5px;
	font-weight:800;
	color:var(--ink);
	font-family:'Onest',sans-serif
}

.rev-sold{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:11.5px;
	font-weight:700;
	color:var(--muted)
}

.rev-specs{
	margin-top:14px
}

.rev-body{
	margin-top:14px;
	padding-top:14px;
	border-top:1px solid var(--line-soft)
}

.rev-meta{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:8px
}

.rev-author{
	font-size:13.5px;
	font-weight:700;
	color:var(--ink)
}

.rev-date{
	font-size:12px;
	color:var(--muted)
}

.rev-text{
	font-size:13.5px;
	line-height:1.6;
	color:var(--soft);
	text-wrap:pretty
}

.rev-text audio{
	width:100%;
	margin-top:8px;
	height:40px
}

.rev-pagination{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	flex-wrap:wrap
}

.rev-pagination #pagination-wrap{
	flex:1
}

.rev-results{
	font-size:12.5px;
	color:var(--muted);
	white-space:nowrap
}

@media(max-width:768px){
	.rev-list{
		grid-template-columns:1fr
	}

}

/* --- SEO-посилання OCF (нижній навблок ocf-page-list-bottom) під .seochips --- */
.ocf-page-list-bottom{
	display:block;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:22px 24px;
	margin-bottom:8px
}

.ocf-page-group + .ocf-page-group{
	margin-top:18px
}

.ocf-page-group-name{
	font-size:12px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--muted);
	margin-bottom:10px
}

.ocf-category-page-list{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin:0;
	padding:0;
	list-style:none
}

.ocf-category-page-list li{
	margin:0
}

.ocf-category-page-list a{
	display:inline-block;
	font-size:12px;
	font-weight:700;
	color:var(--muted);
	background:var(--plate);
	padding:7px 12px;
	border-radius:999px;
	transition:.15s
}

.ocf-category-page-list a:hover{
	color:#fff !important;
	background:var(--red) !important
}

@media (min-width:768px){
	#column-left.col-sm-3{
		width:21%;
		padding-right:0px
	}

	#content.col-sm-9{
		width:79%
	}

	#column-right.col-sm-3{
		width:21%
	}
}

/* ===== лінійки ПК (сайдбар) ===== */
.sidecats{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:10px;
	margin-bottom:10px
}

.sc-title{
	font-size:11px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	padding:2px 8px 8px
}

.scl{
	position:relative;
	display:flex;
	align-items:center;
	gap:9px;
	padding:8px 8px 8px 13px;
	border-radius:10px;
	font-size:12.8px;
	font-weight:700;
	color:var(--soft);
	transition:background .15s,color .15s
}

.scl::before{
	content:"";
	position:absolute;
	left:2px;
	top:50%;
	translate:0 -50%;
	width:3px;
	height:0;
	border-radius:3px;
	background:var(--red);
	transition:height .2s var(--ease)
}

.scl>.ic{
	font-size:15px;
	color:var(--faint);
	flex-shrink:0;
	transition:color .15s
}

.sct{
	display:flex;
	flex-direction:column;
	gap:1px;
	min-width:0
}

.sct small{
	font-size:10.5px;
	font-weight:600;
	color:var(--muted)
}

.sca{
	margin-left:auto;
	font-size:12px;
	color:var(--faint);
	transition:transform .2s,color .2s
}

a.scl:hover{
	background:var(--red-wash);
	color:var(--red)
}

a.scl:hover::before{
	height:58%
}

a.scl:hover>.ic,a.scl:hover .sca{
	color:var(--red)
}

a.scl:hover .sca{
	transform:translateX(2px)
}

.scl.on,
.scl.active-m{
	background:var(--red-wash);
	color:var(--red)
}

.scl.on::before,
.scl.active-m::before{
	height:58%
}

.scl.on>.ic,
.scl.active-m>.ic{
	color:var(--red)
}

/* ===== розкладка: фільтр + сітка ===== */
.catgrid{
	display:grid;
	grid-template-columns:250px minmax(0,1fr);
	gap:18px;
	align-items:start;
	margin-top:16px
}

/* --- фільтр --- */
.fside{
	display:grid;
	gap:10px;
	align-content:start
}

.fovl{
	position:fixed;
	inset:0;
	background:rgba(20,22,26,.45);
	z-index:115;
	opacity:0;
	visibility:hidden;
	transition:opacity .25s,visibility .25s
}

.fovl.show{
	opacity:1;
	visibility:visible
}

.ftop{
	display:flex;
	align-items:center;
	gap:9px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px 14px
}

.ftop .ic{
	color:var(--red);
	font-size:18px
}

.ftop .t{
	font-size:15px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	flex:1
}

.freset{
	font-size:12px;
	font-weight:700;
	color:var(--muted);
	transition:color .15s
}

.freset:hover{
	color:var(--red)
}

.fclose{
	display:none;
	width:34px;
	height:34px;
	border-radius:9px;
	color:var(--muted);
	place-items:center;
	font-size:17px
}

.fclose:hover{
	background:var(--line-soft);
	color:var(--ink)
}

.fgroup{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	overflow:hidden
}

.fhead{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:13px 14px;
	font-size:12px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--ink);
	text-align:left
}

.fhead .fchev{
	color:var(--muted);
	font-size:15px;
	transition:transform .25s var(--ease)
}

.fgroup.closed .fchev{
	transform:rotate(-90deg)
}

.fbody{
	padding:2px 14px 14px
}

.fgroup.closed .fbody{
	display:none
}

.flist{
	display:grid;
	gap:2px
}

.fitem{
	position:relative;
	display:flex;
	align-items:center;
	gap:9px;
	padding:6px 5px;
	border-radius:8px;
	cursor:pointer;
	transition:background .15s
}

.fitem:hover{
	background:var(--line-soft)
}

.fitem input{
	position:absolute;
	opacity:0;
	pointer-events:none
}

.fbox{
	width:18px;
	height:18px;
	border-radius:5px;
	border:1.5px solid #cfd2d8;
	background:#fff;
	flex-shrink:0;
	display:grid;
	place-items:center;
	transition:background .15s,border-color .15s
}

.fbox::after{
	content:"";
	width:9px;
	height:5px;
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(-45deg) scale(0);
	transition:transform .18s var(--ease);
	margin-top:-2px
}

.fitem input:checked ~ .fbox{
	background:var(--red);
	border-color:var(--red)
}

.fitem input:checked ~ .fbox::after{
	transform:rotate(-45deg) scale(1)
}

.fl{
	font-size:12px;
	font-weight:600;
	color:var(--soft);
	flex:1;
	min-width:0;
	line-height:1.3;
	white-space:nowrap
}

.fitem input:checked ~ .fl{
	color:var(--ink);
	font-weight:700
}

.fc{
	font-size:10px;
	font-weight:800;
	color:var(--faint);
	background:var(--line-soft);
	padding:2px 6px;
	border-radius:7px;
	flex-shrink:0
}

.fitem.extra{
	display:none
}

.fgroup.all .fitem.extra{
	display:flex
}

.fshowall{
	display:inline-flex;
	align-items:center;
	gap:5px;
	margin-top:7px;
	padding:3px 4px;
	border-radius:7px;
	font-size:12.5px;
	font-weight:700;
	color:var(--red);
	transition:color .15s
}

.fshowall:hover{
	color:var(--red-dark)
}

.fshowall svg{
	width:13px;
	height:13px;
	transition:transform .25s var(--ease)
}

.fshowall.open svg{
	transform:rotate(180deg)
}

.fapply-m{
	display:none;
	position:sticky;
	bottom:0;
	padding-top:6px;
	background:linear-gradient(180deg,rgba(246,247,249,0),var(--bg) 40%)
}

.fapply-m .btn{
	width:100%
}

.pricerow{
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:4px
}

.pricerow input{
	width:0;
	flex:1;
	border:1.5px solid var(--line);
	border-radius:9px;
	padding:8px 9px;
	font-size:12.5px;
	font-weight:700;
	outline:none;
	background:#fafafb;
	transition:border-color .2s,background .2s
}

.pricerow input:focus{
	border-color:var(--red);
	background:#fff
}

.pricerow .dash{
	color:var(--faint)
}

.pricerow .uah{
	font-size:11.5px;
	color:var(--muted);
	font-weight:700
}

.rng{
	position:relative;
	height:30px;
	margin:12px 4px 0
}

.rtrack{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
	right:0;
	height:5px;
	border-radius:99px;
	background:var(--line)
}

.rfill{
	position:absolute;
	top:0;
	bottom:0;
	background:var(--red);
	border-radius:99px
}

.rng input{
	position:absolute;
	left:0;
	right:0;
	top:50%;
	transform:translateY(-50%);
	width:100%;
	height:0;
	margin:0;
	-webkit-appearance:none;
	appearance:none;
	background:none;
	pointer-events:none;
	outline:none
}

.rng input::-webkit-slider-thumb{
	-webkit-appearance:none;
	pointer-events:auto;
	width:19px;
	height:19px;
	border-radius:50%;
	background:#fff;
	border:5.5px solid var(--red);
	box-shadow:var(--sh-sm);
	cursor:grab
}

.rng input::-moz-range-thumb{
	pointer-events:auto;
	width:9px;
	height:9px;
	border-radius:50%;
	background:#fff;
	border:5.5px solid var(--red);
	box-shadow:var(--sh-sm);
	cursor:grab
}

/* --- тулбар --- */
/* ===== сторінка пошуку (product/search) ===== */
.searchbar{
	display:flex;
	align-items:center;
	align-content:center;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:18px
}

.searchbar .search{
	flex:1;
	min-width:240px;
	align-self:center
}

.speriph{
	display:inline-flex;
	align-items:center;
	align-self:center;
	gap:9px;
	padding:0 18px;
	height:50px;
	box-sizing:border-box;
	line-height:normal;
	border:1.5px solid var(--line);
	border-radius:14px;
	font-size:13.5px;
	font-weight:600;
	color:var(--ink);
	cursor:pointer;
	user-select:none;
	position:relative;
	flex-shrink:0;
	transition:border-color .2s;
	margin-bottom:0;
}

.speriph:hover{
	border-color:var(--red-line)
}

.speriph input{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none
}

.speriph .ck{
	width:18px;
	height:18px;
	border-radius:6px;
	border:1.5px solid var(--line);
	display:grid;
	place-items:center;
	color:#fff;
	flex-shrink:0;
	transition:background .2s,border-color .2s
}

.speriph .ck svg{
	width:12px;
	height:12px;
	opacity:0;
	transition:opacity .15s
}

.speriph input:checked ~ .ck{
	background:var(--red);
	border-color:var(--red)
}

.speriph input:checked ~ .ck svg{
	opacity:1
}

/* ===== сторінка виробників A-Z (product/manufacturer) ===== */
.mfg-jump{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px;
	margin-bottom:22px
}

.mfg-jumplink{
	width:30px;
	height:30px;
	display:grid;
	place-items:center;
	border-radius:8px;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	transition:.18s
}

.mfg-jumplink:hover{
	background:var(--red-wash);
	color:var(--red)
}

.mfg-group{
	margin-bottom:28px;
	scroll-margin-top:20px
}

.mfg-letter{
	font-size:18px;
	font-weight:800;
	margin:0 0 12px;
	color:var(--red)
}

.mfg-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px
}

@media(max-width:768px){
	.mfg-grid{
		grid-template-columns:repeat(2,1fr)
	}
}

.mfg-item{
	background:#fff;
	border:1px solid var(--line);
	border-radius:12px;
	padding:13px 16px;
	font-size:13.5px;
	font-weight:600;
	color:var(--ink);
	transition:border-color .2s,color .2s,box-shadow .2s
}

.mfg-item:hover{
	border-color:var(--red-line);
	color:var(--red);
	box-shadow:var(--sh-sm)
}

.cattools{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:10px 14px
}

.sortlab{
	font-size:12.5px;
	font-weight:700;
	color:var(--muted);
	margin-right:2px
}

.schip{
	padding:8px 15px;
	border-radius:999px;
	border:1.5px solid var(--line);
	background:#fff;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	transition:.18s
}

.schip:hover{
	border-color:var(--red-line) !important;
	color:var(--red) !important
}

.sortsel{
	display:none
}

/* --- уникаємо "стрибка" розміру до того, як JS підмінить select на .csel:
   стилізуємо сам <select class="customsel"> так само, як .csel-trigger
   нижче (той самий padding/border/radius), а appearance:none знімає
   нативний вигляд браузера (зазвичай значно менший/інакший за розміром) —
   тоді підміна непомітна, навіть якщо JS ще не встиг відпрацювати */
select.customsel{
	box-sizing:border-box;
	width:100%;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:8px 14px;
	border-radius:999px;
	border:1.5px solid var(--line);
	background:#fff;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	cursor:pointer
}

/* --- кастомний select (.csel), збирає JS (sripts.js/initCustomSelect) з
   будь-якого <select class="customsel"> — універсально для всього сайту --- */
.csel{
	position:relative
}

.csel select{
	display:none !important
}

.csel-trigger{
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	width:100%;
	padding:8px 14px;
	border-radius:999px;
	border:1.5px solid var(--line);
	background:#fff;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	cursor:pointer;
	transition:.15s
}

.csel-trigger:hover{
	border-color:var(--red-line) !important;
	color:var(--red) !important
}

.csel.open .csel-trigger{
	border-color:var(--red);
	color:var(--red)
}

.csel-arrow{
	display:inline-flex;
	flex-shrink:0;
	line-height:0;
	transition:transform .2s
}

.csel-arrow svg{
	width:14px;
	height:14px
}

.csel.open .csel-arrow{
	transform:rotate(180deg)
}

.csel-list{
	display:none;
	position:absolute;
	top:calc(100% + 6px);
	left:0;
	right:0;
	min-width:180px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	box-shadow:var(--sh-lg);
	padding:6px;
	z-index:60;
	max-height:280px;
	overflow-y:auto
}

.csel.open .csel-list{
	display:block
}

.csel-opt{
	display:block;
	width:100%;
	text-align:left;
	padding:8px 10px;
	border-radius:9px;
	font-size:12.5px;
	font-weight:600;
	color:var(--soft);
	transition:.12s
}

.csel-opt:hover{
	background:var(--line-soft) !important;
	color:var(--red) !important
}

.csel-opt.on{
	color:var(--red);
	font-weight:800;
	background:var(--red-wash)
}

.schip.on{
	background:var(--red);
	border-color:var(--red);
	color:#fff;
	box-shadow:0 6px 14px -6px rgba(142,28,37,.5)
}

.rescnt{
	margin-left:auto;
	font-size:12.5px;
	color:var(--muted);
	white-space:nowrap
}

.rescnt b{
	color:var(--ink);
	font-size:14px;
	font-family:'Onest',sans-serif
}

.btn-filter{
	display:none;
	align-items:center;
	gap:7px;
	padding:9px 15px;
	border-radius:11px;
	background:var(--red);
	color:#fff;
	font-size:13px;
	font-weight:700
}

.btn-filter .ic{
	font-size:15px
}

.fchips{
	display:none;
	flex-wrap:wrap;
	gap:7px;
	margin-top:10px;
	flex-basis:100%;
	width:100%
}

.fchip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 11px;
	border-radius:999px;
	background:var(--red-wash);
	border:1px solid var(--red-line);
	color:var(--red);
	font-size:12px;
	font-weight:700;
	transition:.15s
}

.fchip i{
	display:inline-flex;
	line-height:0
}

.fchip i svg{
	width:12px;
	height:12px
}

.fchip:hover{
	background:var(--red);
	color:#fff
}

.fchip.reset{
	background:#fff;
	border-color:var(--line);
	color:var(--muted)
}

.fchip.reset:hover{
	border-color:var(--ink);
	color:var(--ink);
	background:#fff
}

/* --- trust-рядок --- */
.trustline{
	display:flex;
	align-items:center;
	gap:7px 22px;
	flex-wrap:wrap;
	margin-top:12px;
	padding:0 3px;
	font-size:11.5px;
	font-weight:600;
	color:var(--muted)
}

.trustline span{
	display:inline-flex;
	align-items:center;
	gap:6px;
	white-space:nowrap
}

.trustline .ic{
	font-size:13px;
	color:var(--faint)
}

/* промо-вставка −10% (у сітці товарів) */
.gpromo{
	grid-column:1/-1;
	display:flex;
	align-items:center;
	gap:20px;
	background:linear-gradient(140deg,#a5232e,var(--red-dark));
	border-radius:16px;
	padding:18px 22px;
	color:#fff;
	position:relative;
	overflow:hidden;
	transition:transform .25s var(--ease),box-shadow .25s
}

.gpromo.in{
	animation:itbcat-rise .45s var(--ease) backwards;
	animation-delay:calc(var(--d,0)*50ms)
}

@keyframes itbcat-rise{
	from{
		opacity:0;
		transform:translateY(14px)
	}

}

.gpromo:hover{
	transform:translateY(-3px);
	box-shadow:var(--sh-md)
}

.gpromo::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.15),transparent 55%)
}

.gp-badge{
	position:relative;
	font-family:'Onest',sans-serif;
	font-size:30px;
	font-weight:800;
	background:rgba(255,255,255,.16);
	border-radius:14px;
	padding:12px 18px;
	flex-shrink:0;
	animation:itbcat-pulse 3s ease-in-out infinite
}

@keyframes itbcat-pulse{
	0%,100%{
		transform:scale(1)
	}

	50%{
		transform:scale(1.02)
	}

}

.gp-tx{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:4px;
	flex:1;
	min-width:0
}

.gp-t{
	font-size:17px;
	font-weight:800;
	font-family:'Onest',sans-serif
}

.gp-s{
	font-size:12.5px;
	color:rgba(255,255,255,.85);
	line-height:1.5;
	text-wrap:pretty
}

.gp-go{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#fff;
	color:var(--red);
	font-size:13px;
	font-weight:800;
	padding:10px 16px;
	border-radius:11px;
	flex-shrink:0;
	transition:transform .15s,box-shadow .15s
}

.gp-go svg{
	width:14px;
	height:14px
}

.gpromo:hover .gp-go{
	transform:translateX(3px);
	box-shadow:0 8px 18px -8px rgba(0,0,0,.4)
}

/* банер: стрім наживо (у сітці товарів) */
.glive{
	grid-column:1/-1;
	display:flex;
	align-items:center;
	gap:18px;
	padding:16px 20px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	position:relative;
	overflow:hidden;
	transition:transform .25s var(--ease),box-shadow .25s,border-color .25s
}

.glive:hover{
	transform:translateY(-3px);
	box-shadow:var(--sh-md);
	border-color:var(--red-line)
}

.glive.in{
	animation:itbcat-rise .45s var(--ease) backwards;
	animation-delay:calc(var(--d,0)*50ms)
}

.lv-left{
	display:flex;
	flex-direction:column;
	gap:4px;
	flex:1;
	min-width:0
}

.lv-tag{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.07em;
	text-transform:uppercase;
	color:#15a05c
}

.lv-dot{
	width:9px;
	height:9px;
	border-radius:50%;
	background:#15a05c;
	position:relative;
	flex-shrink:0
}

.lv-dot::after{
	content:"";
	position:absolute;
	inset:-4.5px;
	border-radius:50%;
	border:2px solid rgba(21,160,92,.45);
	animation:itbcat-live 2s ease-out infinite
}

@keyframes itbcat-live{
	0%{
		transform:scale(.45);
		opacity:1
	}

	100%{
		transform:scale(1.35);
		opacity:0
	}

}

.lv-t{
	font-size:15.5px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	line-height:1.3;
	letter-spacing:-.01em
}

.lv-s{
	font-size:12px;
	color:var(--soft);
	line-height:1.5;
	text-wrap:pretty
}

.lv-btn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:var(--red);
	color:#fff;
	font-size:12.5px;
	font-weight:700;
	padding:9px 14px;
	border-radius:10px;
	transition:background .18s
}

.lv-btn:hover{
	background:var(--red-dark)
}

.lv-btn svg{
	width:14px;
	height:14px
}

.lv-plats{
	display:inline-flex;
	gap:8px;
	flex-shrink:0
}

.lv-plats i{
	width:36px;
	height:36px;
	border-radius:10px;
	display:grid;
	place-items:center;
	background:var(--plate);
	color:var(--soft);
	transition:background .18s,color .18s,transform .18s
}

.lv-plats i svg{
	width:17px;
	height:17px;
	fill:currentColor
}

.glive:hover .lv-plats i{
	color:var(--pb,var(--red))
}

.lv-plats i:hover{
	color:#fff !important;
	background:var(--pb,var(--red));
	transform:translateY(-2px)
}

@media(max-width:768px){
	.glive{
		flex-direction:column;
		align-items:flex-start;
		gap:12px
	}

}

/* показати ще + пагінація */
.morewrap{
	display:flex;
	justify-content:center;
	margin-top:22px
}

#moreBtn b{
	font-weight:800
}

.pagerow{
	display:none;
	justify-content:center;
	align-items:center;
	gap:7px;
	margin-top:16px
}

.pnum{
	width:38px;
	height:38px;
	border-radius:10px;
	border:1.5px solid var(--line);
	background:#fff;
	display:grid;
	place-items:center;
	font-size:13.5px;
	font-weight:700;
	color:var(--soft);
	cursor:pointer;
	transition:.15s
}

.pnum:hover{
	border-color:var(--red-line);
	color:var(--red)
}

.pnum.on{
	background:var(--red);
	border-color:var(--red);
	color:#fff;
	cursor:default
}

/* --- штатний OpenCart Pagination (ul.pagination), стилізований під .pnum без правок PHP --- */
#product-grid-page #pagination-wrap .pagination,
.acc-pagination .pagination{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:7px;
	margin:16px 0 0;
	padding:0;
	list-style:none;
	flex-wrap:wrap
}

#product-grid-page #pagination-wrap .pagination li,
.acc-pagination .pagination li{
	margin:0
}

#product-grid-page #pagination-wrap .pagination li.p-first,
#product-grid-page #pagination-wrap .pagination li.p-last,
.acc-pagination .pagination li.p-first,
.acc-pagination .pagination li.p-last{
	display:none
}

#product-grid-page #pagination-wrap .pagination li a,
#product-grid-page #pagination-wrap .pagination li span,
.acc-pagination .pagination li a,
.acc-pagination .pagination li span{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	min-width:38px;
	border-radius:10px;
	border:1.5px solid var(--line);
	background:#fff;
	font-size:13.5px;
	font-weight:700;
	color:var(--soft);
	cursor:pointer;
	transition:.15s
}

#product-grid-page #pagination-wrap .pagination li a:hover,
.acc-pagination .pagination li a:hover{
	border-color:var(--red-line);
	color:var(--red)
}

#product-grid-page #pagination-wrap .pagination li.active span,
.acc-pagination .pagination li.active span{
	background:var(--red);
	border-color:var(--red);
	color:#fff;
	cursor:default
}

#product-grid-page #pagination-wrap .pagination li.p-prev a,
#product-grid-page #pagination-wrap .pagination li.p-next a,
.acc-pagination .pagination li.p-prev a,
.acc-pagination .pagination li.p-next a{
	font-size:0
}

#product-grid-page #pagination-wrap .pagination li.p-prev a:before,
.acc-pagination .pagination li.p-prev a:before{
	content:"\2039";
	font-size:16px
}

#product-grid-page #pagination-wrap .pagination li.p-next a:before,
.acc-pagination .pagination li.p-next a:before{
	content:"\203a";
	font-size:16px
}

.pnote{
	font-size:12px;
	color:var(--faint);
	margin-left:8px
}

/* ===== секції низу (FAQ + SEO) — окремі класи, щоб не конфліктувати з .sec/.sec-title ===== */
.catsec{
	padding:46px 0 0
}

@media(min-width:1025px){
	.catsec.shift{
		margin-left:268px
	}

}

.catsec-title{
	font-size:23px;
	font-weight:800;
	letter-spacing:-.02em;
	margin:0 0 18px;
	line-height:1.15
}

.catsec-title .hl{
	color:var(--red)
}

.qawrap{
	display:grid;
	gap:10px;
	max-width:920px
}

.qa{
	position:relative;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	transition:border-color .25s,box-shadow .25s
}

.qa:hover{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm)
}

.qa input{
	position:absolute;
	opacity:0;
	pointer-events:none
}

.qa label{
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px 18px;
	font-size:14.5px;
	font-weight:700;
	cursor:pointer;
	line-height:1.4
}

.qa label .ic{
	margin-left:auto;
	color:var(--muted);
	font-size:16px;
	transition:transform .3s var(--ease);
	flex-shrink:0
}

.qa input:checked ~ label .ic{
	transform:rotate(180deg)
}

.qbody{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .4s var(--ease)
}

.qa input:checked ~ .qbody{
	grid-template-rows:1fr
}

.qin{
	overflow:hidden
}

.qin p{
	margin:0;
	padding:0 18px 16px;
	font-size:13.8px;
	line-height:1.65;
	color:var(--soft);
	text-wrap:pretty
}

.qin a{
	color:var(--red);
	font-weight:700;
	position:relative
}

.qin a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-1px;
	height:1.5px;
	width:0;
	background:var(--red);
	transition:width .25s var(--ease)
}

.qin a:hover::after{
	width:100%
}

.seocard{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:26px 28px
}

.seocard h2{
	font-size:20px;
	margin:0 0 10px;
	font-weight:800;
	letter-spacing:-.01em
}

.seocard p{
	font-size:13.8px;
	line-height:1.7;
	color:var(--soft);
	margin:0 0 12px;
	max-width:880px;
	text-wrap:pretty
}

.seolist{
	display:grid;
	gap:9px;
	margin:16px 0 20px
}

.seolist li{
	display:flex;
	gap:10px;
	font-size:13.5px;
	color:var(--soft);
	align-items:flex-start;
	line-height:1.55
}

.seolist li .ic{
	color:var(--green);
	flex-shrink:0;
	margin-top:2px;
	font-size:16px
}

.seolist b{
	color:var(--ink)
}

.seochips{
	display:flex;
	flex-wrap:wrap;
	gap:7px
}

.seochip{
	font-size:12px;
	font-weight:700;
	color:var(--muted);
	background:var(--plate);
	padding:7px 12px;
	border-radius:999px
}

/* ===== RESPONSIVE (категорія, унікальне) ===== */
@media(max-width:1024px){
	.catgrid{
		grid-template-columns:1fr;
		gap:0
	}

	.fside{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:min(360px,92vw);
		max-height:none;
		z-index:120;
		background:var(--bg);
		padding:14px;
		transform:translateX(-105%);
		transition:transform .3s var(--ease);
		border-radius:0 18px 18px 0;
		box-shadow:var(--sh-lg);
		overflow-y:auto;
		overscroll-behavior:contain
	}

	.fside.open{
		transform:none
	}

	.fclose{
		display:grid
	}

	.fapply-m{
		display:block
	}

	.btn-filter{
		display:inline-flex
	}

	.rescnt{
		display:none
	}

}

@media(max-width:768px){
	.gpromo,.glive,.gquiz{
		grid-column:1/-1
	}

	.fside{
		width:100vw;
		border-radius:0
	}

	.cattools{
		flex-wrap:wrap
	}

	.cattools .schip,.cattools .sortlab{
		display:none
	}

	.cattools .sortsel{
		display:block;
		width:auto;
		flex:1 1 auto;
		min-width:0
	}

	.cattools .csel{
		flex:1 1 auto;
		min-width:0
	}

}

@media(max-width:560px){
	.gpromo{
		flex-wrap:wrap;
		padding:16px 18px;
		gap:12px
	}

	.gp-tx{
		flex-basis:100%
	}

}

@media(max-width:480px){
	.trustline{
		font-size:11px;
		gap:6px 14px
	}

	.subcats{
		gap:8px
	}

}

@media(max-width:360px){
	.lv-t{
		font-size:14px
	}

}

/* ============================================================================
   ОСОБИСТИЙ КАБІНЕТ (account/account.twig)
   ============================================================================ */
.acc-hero{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:22px 24px;
	margin-top:14px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap
}

.ah-user{
	display:flex;
	align-items:center;
	gap:16px;
	min-width:0
}

.ah-av{
	width:64px;
	height:64px;
	border-radius:50%;
	flex-shrink:0;
	display:grid;
	place-items:center;
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:27px;
	color:#fff;
	background:radial-gradient(circle at 32% 28%,#a52833,var(--red) 62%);
	box-shadow:0 8px 18px -8px rgba(142,28,37,.6);
	position:relative
}

.ah-av .ah-badge{
	position:absolute;
	right:-2px;
	bottom:-2px;
	width:24px;
	height:24px;
	border-radius:50%;
	background:#229ed9;
	border:2.5px solid #fff;
	display:grid;
	place-items:center;
	color:#fff
}

.ah-av .ah-badge svg{
	width:13px;
	height:13px
}

.ah-tx{
	min-width:0
}

.ah-tx h1{
	font-size:clamp(22px,2.5vw,28px);
	font-weight:800;
	letter-spacing:-.02em;
	margin:0 0 5px;
	line-height:1.1
}

.ah-meta{
	display:flex;
	align-items:center;
	gap:9px;
	flex-wrap:wrap;
	font-size:13px;
	color:var(--muted);
	font-weight:600
}

.ah-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--plate);
	border-radius:999px;
	padding:4px 11px 4px 8px;
	font-weight:700;
	color:var(--soft)
}

.ah-chip .bic{
	line-height:0
}

.ah-chip .bic svg{
	width:14px;
	height:14px;
	color:#229ed9
}

.ah-dot{
	color:var(--faint)
}

.ah-act{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap
}

.ah-act .btn-ghost{
	padding:11px 18px
}

.ah-act .btn-ghost svg{
	width:16px;
	height:16px
}

.acc-grid{
	display:grid;
	grid-template-columns:264px minmax(0,1fr);
	gap:20px;
	align-items:start;
	margin-top:16px
}

.acc-side{
	position:sticky;
	top:98px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:10px
}

/* account/simpleedit: меню тепер приходить через content_top прямо в #content,
   без обгортки .acc-grid — вирівнюємо #content під ту саму сітку тут */
#content:has(> .acc-side){
	display:grid;
	grid-template-columns:264px minmax(0,1fr);
	gap:20px;
	align-items:start;
	margin-top:16px
}

.acc-nav{
	display:flex;
	flex-direction:column;
	gap:2px
}

.acc-nav a{
	position:relative;
	display:flex;
	align-items:center;
	gap:11px;
	padding:11px 13px;
	border-radius:12px;
	font-size:14px;
	font-weight:700;
	color:var(--soft);
	transition:background .16s,color .16s
}

.acc-nav a .ni{
	width:32px;
	height:32px;
	border-radius:9px;
	background:var(--plate);
	color:var(--soft);
	display:grid;
	place-items:center;
	flex-shrink:0;
	transition:background .16s,color .16s
}

.acc-nav a .ni svg{
	width:17px;
	height:17px
}

.acc-nav a .nc{
	margin-left:auto;
	font-size:11.5px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	color:var(--muted);
	background:var(--plate);
	padding:2px 9px;
	border-radius:999px;
	transition:.16s
}

.acc-nav a .ext{
	margin-left:auto;
	color:var(--faint);
	opacity:0;
	transform:translateX(-4px);
	transition:.18s
}

.acc-nav a .ext svg{
	width:15px;
	height:15px
}

.acc-nav a:hover{
	background:var(--line-soft);
	color:var(--ink)
}

.acc-nav a:hover .ni{
	background:#e5e7ec;
	color:var(--red)
}

.acc-nav a:hover .ext{
	opacity:1;
	transform:none
}

.acc-nav a.on{
	background:var(--red-wash);
	color:var(--red);
	box-shadow:inset 3px 0 0 var(--red)
}

.acc-nav a.on .ni{
	background:var(--red);
	color:#fff
}

.acc-nav a.on .nc{
	background:#fff;
	color:var(--red)
}

.acc-nav a.danger:hover{
	background:var(--red-wash);
	color:var(--red)
}

.acc-nav a.danger:hover .ni{
	background:var(--red);
	color:#fff
}

.acc-nav-div{
	height:1px;
	background:var(--line-soft);
	margin:7px 8px
}

.acc-nav-lbl{
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--faint);
	padding:6px 13px 3px
}

.acc-panel{
	display:none
}

.acc-panel.on{
	display:block;
	animation:itbacc-in .4s var(--ease)
}

@keyframes itbacc-in{
	from{
		opacity:0;
		transform:translateY(10px)
	}

}

.acc-head{
	margin:2px 2px 16px
}

.acc-head h2{
	font-size:22px;
	font-weight:800;
	letter-spacing:-.015em;
	margin:0 0 5px
}

.acc-head p{
	font-size:13.5px;
	color:var(--muted);
	line-height:1.5;
	margin:0;
	text-wrap:pretty
}

.acc-sub{
	font-size:15px;
	font-weight:800;
	letter-spacing:-.01em;
	margin:24px 2px 12px
}

.acc-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:20px 22px
}

.acc-body .ord-list + .acc-card,
.acc-body .acc-card + .acc-card{
	margin-top:14px
}

/* dashboard */
.acc-stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin-bottom:14px
}

.stat{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-md);
	padding:16px 16px 14px;
	display:flex;
	flex-direction:column;
	gap:3px;
	transition:transform .2s var(--ease),box-shadow .2s,border-color .2s
}

.stat:hover{
	transform:translateY(-4px);
	box-shadow:var(--sh-md);
	border-color:var(--red-line)
}

.stat .si{
	width:40px;
	height:40px;
	border-radius:11px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	margin-bottom:8px
}

.stat .si svg{
	width:20px;
	height:20px
}

.stat b{
	font-family:'Onest',sans-serif;
	font-size:27px;
	font-weight:800;
	letter-spacing:-.01em;
	line-height:1
}

.stat span:last-child{
	font-size:12.5px;
	font-weight:700;
	color:var(--muted)
}

.acc-two{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	margin-top:14px
}

.card-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	margin-bottom:14px
}

.card-head span{
	font-size:12px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--muted)
}

.card-head a{
	font-size:12.5px;
	font-weight:700;
	color:var(--red)
}

.card-head a:hover{
	color:var(--red-dark)
}

.mini-ord{
	display:flex;
	align-items:center;
	gap:12px
}

.mo-im{
	width:52px;
	height:52px;
	border-radius:10px;
	border:1px solid var(--line-soft);
	background:#fbfbfc;
	display:grid;
	place-items:center;
	flex-shrink:0;
	overflow:hidden
}

.mo-im img{
	width:46px;
	height:46px;
	object-fit:contain
}

.mo-tx{
	min-width:0;
	flex:1;
	display:flex;
	flex-direction:column;
	gap:3px
}

.mo-tx b{
	font-size:13px;
	font-weight:700;
	line-height:1.3;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}

.mo-meta{
	font-size:11.5px;
	color:var(--muted);
	font-family:'JetBrains Mono',monospace
}

.mo-price{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:15px;
	flex-shrink:0;
	align-self:flex-start
}

.ob{
	display:inline-flex;
	align-items:center;
	gap:5px;
	align-self:flex-start;
	font-size:11px;
	font-weight:800;
	padding:3px 9px;
	border-radius:7px;
	letter-spacing:.02em
}

.ob-done{
	color:var(--green);
	background:var(--green-wash)
}

.ob-wip{
	color:#b06a12;
	background:rgba(176,106,18,.12)
}

.ob-ship{
	color:var(--blue);
	background:rgba(42,95,174,.1)
}

.ob-cancel{
	color:var(--muted);
	background:var(--plate)
}

.ref-teaser{
	display:flex;
	align-items:center;
	gap:16px;
	margin-top:14px;
	padding:18px 20px;
	border-radius:var(--r-lg);
	background:linear-gradient(120deg,#fff, #fdf3f4);
	border:1.5px solid var(--red-line);
	transition:transform .2s var(--ease),box-shadow .2s
}

.ref-teaser:hover{
	transform:translateY(-3px);
	box-shadow:var(--sh-md)
}

.rt-ic{
	width:46px;
	height:46px;
	border-radius:13px;
	background:var(--red);
	color:#fff;
	display:grid;
	place-items:center;
	flex-shrink:0
}

.rt-ic svg{
	width:23px;
	height:23px
}

.ref-teaser div{
	flex:1;
	min-width:0
}

.ref-teaser b{
	font-size:15.5px;
	font-weight:800;
	display:block;
	letter-spacing:-.01em
}

.ref-teaser p{
	font-size:13px;
	color:var(--soft);
	line-height:1.5;
	margin:3px 0 0;
	text-wrap:pretty
}

.rt-go{
	color:var(--red);
	flex-shrink:0;
	transition:transform .2s
}

.rt-go svg{
	width:20px;
	height:20px
}

.ref-teaser:hover .rt-go{
	transform:translateX(4px)
}

/* orders */
.ord-list{
	display:flex;
	flex-direction:column;
	gap:12px
}

.acc-pagination{
	margin-top:18px
}

.acc-pagination .pagination{
	margin:0;
	justify-content:center;
	display:flex;
	flex-wrap:wrap
}

.ord{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:16px 18px;
	display:flex;
	align-items:center;
	gap:16px;
	transition:border-color .2s,box-shadow .2s
}

.ord:hover{
	border-color:var(--red-line);
	box-shadow:var(--sh-sm)
}

.ord-im{
	width:66px;
	height:66px;
	border-radius:12px;
	border:1px solid var(--line-soft);
	background:#fbfbfc;
	display:grid;
	place-items:center;
	flex-shrink:0;
	overflow:hidden
}

.ord-im img{
	width:58px;
	height:58px;
	object-fit:contain
}

.ord-mid{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:4px
}

.ord-n{
	font-size:12px;
	font-weight:700;
	color:var(--muted)
}

.ord-n i{
	font-style:normal;
	font-family:'JetBrains Mono',monospace
}

.ord-t a{
	color:var(--ink);
	transition:color .15s
}

.ord-t a:hover{
	color:var(--red)
}

.ord-t{
	font-size:14.5px;
	font-weight:700;
	line-height:1.3
}

.ord-hint{
	font-size:12px;
	color:var(--muted);
	line-height:1.4
}

.ord-r{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:9px;
	flex-shrink:0
}

.ord-sum{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:19px;
	letter-spacing:-.01em
}

.ord-act{
	display:flex;
	gap:7px
}

.ord-act .txtbtn{
	padding:8px 12px;
	font-size:12.5px
}

.ord-act .txtbtn svg{
	width:14px;
	height:14px
}

.acc-empty{
	display:none;
	flex-direction:column;
	align-items:center;
	gap:12px;
	padding:52px 20px;
	background:#fff;
	border:1.5px dashed var(--line);
	border-radius:18px;
	text-align:center
}

.acc-empty.show{
	display:flex
}

.acc-empty .big{
	width:62px;
	height:62px;
	border-radius:50%;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center
}

.acc-empty .big svg{
	width:28px;
	height:28px
}

.acc-empty h3{
	margin:0;
	font-size:18px;
	font-weight:800
}

.acc-empty p{
	margin:0;
	font-size:13.5px;
	color:var(--muted);
	max-width:380px;
	line-height:1.55;
	text-wrap:pretty
}

/* subs */
.sub-list{
	padding:8px
}

.sub-row{
	display:flex;
	align-items:center;
	gap:16px;
	padding:14px 14px;
	border-radius:12px;
	transition:background .15s
}

.sub-row:hover{
	background:var(--line-soft)
}

.sub-row+.sub-row{
	border-top:1px solid var(--line-soft)
}

.sr-tx{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px
}

.sr-tx b{
	font-size:14px;
	font-weight:700
}

.sr-tx b .sr-rec{
	font-style:normal;
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--green);
	background:var(--green-wash);
	padding:2px 7px;
	border-radius:6px;
	margin-left:6px;
	vertical-align:middle
}

.sr-tx span{
	font-size:12.5px;
	color:var(--muted);
	line-height:1.4
}

.sw-tog{
	position:relative;
	width:46px;
	height:26px;
	flex-shrink:0
}

.sw-tog input{
	position:absolute;
	inset:0;
	opacity:0;
	margin:0;
	cursor:pointer;
	z-index:2
}

.sw-tog i{
	position:absolute;
	inset:0;
	background:#cfd2d8;
	border-radius:999px;
	transition:background .2s
}

.sw-tog i::after{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:20px;
	height:20px;
	background:#fff;
	border-radius:50%;
	transition:transform .22s var(--ease);
	box-shadow:0 1px 3px rgba(0,0,0,.28)
}

.sw-tog input:checked+i{
	background:var(--green)
}

.sw-tog input:checked+i::after{
	transform:translateX(20px)
}

/* logout */
.logout-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:12px;
	padding:44px 24px
}

.lo-ic{
	width:64px;
	height:64px;
	border-radius:50%;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center
}

.lo-ic svg{
	width:30px;
	height:30px
}

.logout-card h2{
	margin:0;
	font-size:21px;
	font-weight:800
}

.logout-card p{
	margin:0;
	font-size:14px;
	color:var(--muted);
	max-width:400px;
	line-height:1.55;
	text-wrap:pretty
}

.lo-act{
	display:flex;
	gap:10px;
	margin-top:8px;
	flex-wrap:wrap;
	justify-content:center
}

@media(max-width:900px){
	.acc-grid{
		grid-template-columns:1fr
	}

	#content:has(> .acc-side){
		grid-template-columns:1fr
	}

	.acc-side{
		position:static;
		top:auto
	}

	.acc-nav{
		flex-direction:row;
		flex-wrap:wrap;
		gap:6px
	}

	.acc-nav a{
		flex:0 0 auto
	}

	.acc-nav a .nc,.acc-nav a .ext{
		margin-left:6px
	}

	.acc-nav a.on{
		box-shadow:none
	}

	.acc-nav-div,.acc-nav-lbl{
		display:none
	}

	.acc-two{
		grid-template-columns:1fr
	}

}

@media(max-width:600px){
	.acc-stats{
		grid-template-columns:repeat(2,1fr)
	}

	.form-grid{
		grid-template-columns:1fr
	}

	.ord{
		flex-wrap:wrap
	}

	.ord-r{
		align-items:flex-start;
		width:100%;
		flex-direction:row;
		justify-content:space-between
	}

	.ah-act{
		width:100%;
		justify-content:space-between
	}

}

/* ============================================================================
   ВХІД / РЕЄСТРАЦІЯ (account/login, account/register)
   ============================================================================ */
.auth-wrap{
	display:grid;
	grid-template-columns:1fr 468px;
	gap:24px;
	align-items:stretch;
	margin:16px 0 10px
}

.auth-aside{
	background:linear-gradient(160deg,#fff 55%,#fdf3f4);
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:30px 30px;
	display:flex;
	flex-direction:column
}

.aa-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	align-self:flex-start;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--red);
	background:var(--red-wash);
	border:1px solid var(--red-line);
	padding:6px 13px;
	border-radius:999px
}

.aa-eyebrow svg{
	width:14px;
	height:14px
}

.auth-aside h2{
	font-size:25px;
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.14;
	margin:16px 0 4px;
	text-wrap:pretty
}

.auth-aside .aa-lead{
	font-size:14px;
	color:var(--soft);
	line-height:1.55;
	margin:0 0 20px;
	text-wrap:pretty
}

.aa-benefits{
	display:flex;
	flex-direction:column;
	gap:14px;
	margin:6px 0 auto
}

.aa-benefits li{
	display:flex;
	gap:13px;
	align-items:flex-start
}

.aa-benefits .bi{
	width:40px;
	height:40px;
	border-radius:11px;
	background:#fff;
	border:1px solid var(--line);
	color:var(--red);
	display:grid;
	place-items:center;
	flex-shrink:0;
	box-shadow:var(--sh-sm)
}

.aa-benefits .bi svg{
	width:20px;
	height:20px
}

.aa-benefits b{
	font-size:14.5px;
	font-weight:800;
	display:block;
	letter-spacing:-.01em
}

.aa-benefits p{
	font-size:12.8px;
	color:var(--muted);
	line-height:1.45;
	margin:2px 0 0;
	text-wrap:pretty
}

.aa-trust{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:10px;
	margin-top:24px;
	padding-top:20px;
	border-top:1px solid var(--line)
}

.aa-trust div{
	text-align:center;
	line-height:1.15
}

.aa-trust b{
	display:block;
	font-family:'Onest',sans-serif;
	font-size:19px;
	font-weight:800;
	color:var(--ink)
}

.aa-trust span{
	font-size:11.5px;
	color:var(--muted);
	font-weight:600
}

.auth-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:30px 32px;
	box-shadow:var(--sh-md)
}

.auth-head{
	margin-bottom:22px
}

.auth-head h1{
	font-size:26px;
	font-weight:800;
	letter-spacing:-.02em;
	margin:0 0 6px;
	line-height:1.1
}

.auth-head p{
	font-size:13.8px;
	color:var(--muted);
	line-height:1.5;
	margin:0;
	text-wrap:pretty
}

.auth-view{
	display:none
}

.auth-view.on{
	display:block;
	animation:itbau-in .35s var(--ease)
}

@keyframes itbau-in{
	from{
		opacity:0;
		transform:translateY(8px)
	}

}

.a-field{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-bottom:14px
}

.a-field label{
	font-size:13px;
	font-weight:700;
	color:var(--soft)
}

.a-field label .req{
	color:var(--red)
}

.a-field label .opt{
	color:var(--muted);
	font-weight:600
}

.a-field input{
	width:100%;
	height:50px;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:0 15px;
	font-size:14.5px;
	font-family:'Manrope',sans-serif;
	color:var(--ink);
	outline:none;
	background:#fff;
	transition:border-color .2s,box-shadow .2s
}

.a-field input.big{
	height:56px;
	font-size:18px;
	font-weight:700;
	font-family:'Onest',sans-serif;
	letter-spacing:.01em
}

.a-field input:focus{
	border-color:var(--red);
	box-shadow:0 0 0 4px var(--red-wash)
}

.a-lab-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px
}

.a-lab-row a{
	font-size:12.5px;
	font-weight:700;
	color:var(--red)
}

.a-lab-row a:hover{
	color:var(--red-dark)
}

.pw-wrap{
	position:relative
}

.pw-wrap input{
	padding-right:48px
}

.pw-eye{
	position:absolute;
	right:7px;
	top:7px;
	width:36px;
	height:36px;
	border-radius:9px;
	color:var(--faint);
	display:grid;
	place-items:center;
	transition:.15s
}

.pw-eye:hover{
	color:var(--soft);
	background:var(--line-soft)
}

.pw-eye.on{
	color:var(--red)
}

.pw-eye svg{
	width:18px;
	height:18px
}

.a-submit{
	width:100%;
	margin-top:6px
}

.a-submit svg{
	width:17px;
	height:17px
}

.a-check{
	display:flex;
	gap:11px;
	align-items:flex-start;
	font-size:13px;
	color:var(--soft);
	line-height:1.45;
	cursor:pointer;
	margin:2px 0 16px;
	text-wrap:pretty
}

.a-check input{
	position:absolute;
	opacity:0;
	pointer-events:none
}

.ac-box{
	width:22px;
	height:22px;
	border-radius:7px;
	border:1.8px solid #cfd2d8;
	flex-shrink:0;
	display:grid;
	place-items:center;
	color:#fff;
	transition:.16s;
	margin-top:1px
}

.ac-box svg{
	width:14px;
	height:14px;
	opacity:0;
	transform:scale(.5);
	transition:.18s var(--ease)
}

.a-check input:checked+.ac-box{
	background:var(--red);
	border-color:var(--red)
}

.a-check input:checked+.ac-box svg{
	opacity:1;
	transform:none
}

.a-divider{
	display:flex;
	align-items:center;
	gap:14px;
	margin:20px 0;
	color:var(--muted);
	font-size:12px;
	font-weight:700
}

.a-divider::before,.a-divider::after{
	content:"";
	flex:1;
	height:1px;
	background:var(--line)
}

.soc-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
	gap:10px
}

.soc-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	height:50px;
	border:1.5px solid var(--line);
	border-radius:12px;
	background:#fff;
	font-weight:700;
	font-size:13.5px;
	color:var(--ink);
	transition:transform .14s var(--ease),border-color .18s,box-shadow .18s
}

.soc-btn:active{
	transform:translateY(1px)
}

.soc-btn:hover{
	box-shadow:var(--sh-sm);
	transform:translateY(-2px)
}

.soc-ic{
	line-height:0;
	display:inline-flex
}

.soc-btn[data-soc=google]:hover{
	border-color:#4285F4
}

.soc-btn[data-soc=telegram]:hover{
	border-color:#229ed9
}

.soc-btn[data-soc=facebook]:hover{
	border-color:#1877f2
}

.soc-btn[data-soc=x]:hover{
	border-color:#0b0b0f
}

.soc-btn[data-soc=discord]:hover{
	border-color:#5865F2
}

.a-switch{
	text-align:center;
	margin:20px 0 0;
	font-size:13.5px;
	color:var(--muted);
	font-weight:600
}

.a-switch a{
	color:var(--red);
	font-weight:800
}

.a-switch a:hover{
	color:var(--red-dark)
}

.a-back{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:18px;
	font-size:13px;
	font-weight:700;
	color:var(--muted)
}

.a-back:hover{
	color:var(--red)
}

.a-back svg{
	width:15px;
	height:15px
}

.a-note{
	display:flex;
	align-items:flex-start;
	gap:9px;
	background:var(--plate);
	border-radius:12px;
	padding:13px 15px;
	margin-bottom:18px;
	font-size:13px;
	color:var(--soft);
	line-height:1.5;
	text-wrap:pretty
}

.a-note svg{
	width:17px;
	height:17px;
	color:var(--red);
	flex-shrink:0;
	margin-top:1px
}

/* крок «майже готово» (після соцвходу) */
.sd-hero{
	display:flex;
	align-items:center;
	gap:14px;
	background:var(--plate);
	border-radius:14px;
	padding:15px 16px;
	margin-bottom:16px
}

.sd-av{
	width:54px;
	height:54px;
	border-radius:50%;
	flex-shrink:0;
	display:grid;
	place-items:center;
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:22px;
	color:#fff;
	background:radial-gradient(circle at 30% 25%,#3ab0e8,#229ed9);
	position:relative
}

.sd-av .sd-badge{
	position:absolute;
	right:-3px;
	bottom:-3px;
	width:24px;
	height:24px;
	border-radius:50%;
	background:#fff;
	border:2px solid var(--plate);
	display:grid;
	place-items:center;
	line-height:0;
	box-shadow:var(--sh-sm)
}

.sd-av .sd-badge svg{
	width:15px;
	height:15px
}

.sd-tx{
	min-width:0
}

.sd-tx b{
	font-size:16px;
	font-weight:800;
	display:block;
	letter-spacing:-.01em
}

.sd-tx span{
	font-size:12.5px;
	color:var(--muted);
	font-weight:600;
	display:inline-flex;
	align-items:center;
	gap:5px
}

@media(max-width:860px){
	.auth-wrap{
		grid-template-columns:1fr
	}

	.auth-aside{
		order:2
	}

	.auth-card{
		order:1
	}

}

@media(max-width:520px){
	.auth-card{
		padding:24px 20px
	}

	.auth-aside{
		padding:24px 20px
	}

	.soc-grid{
		grid-template-columns:1fr 1fr
	}

}

/* ============================================================================
   ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (checkout/checkout.twig)
   ============================================================================ */
.co-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 396px;
	gap:20px;
	align-items:start;
	margin-top:16px
}

.co-form{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0
}

.co-sec{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:20px 22px 22px
}

.co-h{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 0 16px;
	flex-wrap:wrap
}

.co-n{
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--red);
	color:#fff;
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:15px;
	display:grid;
	place-items:center;
	flex-shrink:0
}

.co-h h2{
	margin:0;
	font-size:19px;
	font-weight:800;
	letter-spacing:-.01em
}

.co-h .hint{
	font-size:12.5px;
	color:var(--muted);
	font-weight:600
}

.co-h .right{
	margin-left:auto;
	font-size:13px;
	font-weight:700;
	color:var(--muted)
}

.co-h .right a{
	color:var(--red);
	text-decoration:underline;
	text-underline-offset:3px
}

.co-h .right a:hover{
	color:var(--red-dark)
}

.co-more{
	align-self:flex-start;
	margin-top:12px;
	font-size:13px;
	font-weight:700;
	color:var(--muted);
	border:1.5px dashed var(--line);
	border-radius:10px;
	padding:9px 14px;
	transition:.18s
}

.co-more:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.fold{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .4s var(--ease)
}

.fold.open{
	grid-template-rows:1fr
}

.fold>div{
	overflow:hidden;
	min-height:0
}

/* ===== checkout: reshape simplecheckout's opaque bootstrap field rows to fit .fi ===== */
.co-form .fi .form-group{
	margin:0
}

.co-form .fi .form-group.required .control-label::after{
	content:" *";
	color:var(--red)
}

.co-form .fi .control-label{
	float:none;
	width:auto;
	padding:0;
	text-align:left;
	display:block
}

.co-form .fi .form-group>div{
	float:none;
	width:100%;
	padding:0
}

.opt{
	border:1.5px solid var(--line);
	border-radius:14px;
	background:#fff;
	transition:border-color .2s,box-shadow .2s
}

.opt+.opt{
	margin-top:10px
}

.opt:hover{
	border-color:#cfd2d8
}

.opt.on{
	border-color:var(--red);
	box-shadow:0 0 0 3.5px var(--red-wash)
}
#simplecheckout_payment .opt.on{
	border-color:#cfd2d8;
}
.opt-head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 16px;
	cursor:pointer;
	user-select:none
}

.opt-head input{
	position:absolute;
	opacity:0;
	pointer-events:none
}

.rdot{
	width:21px;
	height:21px;
	border-radius:50%;
	border:2px solid #cfd2d8;
	flex-shrink:0;
	display:grid;
	place-items:center;
	transition:border-color .2s
}

.rdot::after{
	content:"";
	width:11px;
	height:11px;
	border-radius:50%;
	background:var(--red);
	transform:scale(0);
	transition:transform .22s var(--ease)
}

.opt.on .rdot{
	border-color:var(--red)
}

.opt.on .rdot::after{
	transform:scale(1)
}

.opt-ic{
	width:38px;
	height:38px;
	border-radius:11px;
	background:var(--plate);
	color:var(--soft);
	display:grid;
	place-items:center;
	font-size:19px;
	flex-shrink:0;
	transition:.2s
}

.opt.on .opt-ic{
	background:var(--red-wash);
	color:var(--red)
}

.opt-tx{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
	line-height:1.3
}

.opt-tx b{
	font-size:14.5px;
	font-weight:800
}

.opt-tx i{
	font-style:normal;
	font-size:12.4px;
	color:var(--muted);
	text-wrap:pretty;
	font-weight:100;
}

.opt-tx i a{
	color:var(--soft);
	font-weight:700;
	text-decoration:underline;
	text-underline-offset:2px
}

.opt-tx i a:hover{
	color:var(--red)
}

.opt-badge{
	margin-left:auto;
	flex-shrink:0;
	font-size:11px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--green);
	background:var(--green-wash);
	padding:5px 10px;
	border-radius:8px;
	white-space:nowrap
}

.opt-badge.new{
	color:var(--red);
	background:var(--red-wash)
}

.opt-body{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .4s var(--ease)
}

.opt-body>div{
	overflow:hidden;
	min-height:0
}

.opt.on>.opt-body{
	grid-template-rows:1fr
}

.opt:not(.on)>.opt-body{
	grid-template-rows:0fr
}

.blogo{
	width:40px;
	height:40px;
	border-radius:11px;
	flex-shrink:0;
	display:grid;
	place-items:center;
	background:#fff;
	border:1.5px solid var(--line-soft);
	overflow:hidden
}

.blogo svg{
	width:auto;
	display:block
}

.blogo.sq svg{
	height:34px
}

.blogo.sense{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:12px;
	letter-spacing:-.02em;
	color:#17171f
}

.opt.on .blogo{
	border-color:var(--red-line)
}

.months{
	background:var(--plate);
	border-radius:12px;
	padding:12px 14px
}

.months .mlab{
	font-size:12px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:9px
}

.mp-row{
	display:flex;
	gap:7px;
	flex-wrap:wrap
}

.mp{
	min-width:44px;
	height:40px;
	padding:0 13px;
	border-radius:10px;
	border:1.5px solid var(--line);
	background:#fff;
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:15px;
	color:var(--soft);
	transition:.18s
}

.mp:hover{
	border-color:var(--red-line);
	color:var(--red)
}

.mp.on{
	background:var(--red);
	border-color:var(--red);
	color:#fff
}

.mp-pay{
	margin-top:11px;
	font-size:13.5px;
	color:var(--soft);
	display:flex;
	align-items:baseline;
	gap:7px;
	flex-wrap:wrap
}

.mp-pay b{
	font-family:'Onest',sans-serif;
	font-size:21px;
	font-weight:800;
	color:var(--ink)
}

.mp-note{
	margin-top:7px;
	font-size:12px;
	color:var(--muted);
	text-wrap:pretty
}

.pg{
	border:1.5px solid var(--line);
	border-radius:14px;
	background:#fff;
	overflow:hidden
}

.pg+.pg,.opt+.pg,.pg+.opt{
	margin-top:10px
}

.pg-head{
	width:100%;
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 16px;
	text-align:left;
	transition:background .15s
}

.pg-head:hover{
	background:#fbfbfc
}

.pg-ic{
	width:38px;
	height:38px;
	border-radius:11px;
	background:var(--plate);
	color:var(--soft);
	display:grid;
	place-items:center;
	font-size:19px;
	flex-shrink:0
}

.pg-tx{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
	line-height:1.3
}

.pg-tx b{
	font-size:14.5px;
	font-weight:800
}

.pg-tx i{
	font-style:normal;
	font-size:12.4px;
	color:var(--muted)
}

.pg-dots{
	margin-left:auto;
	display:flex;
	flex-shrink:0
}

.pg-dots span{
	width:22px;
	height:22px;
	border-radius:50%;
	border:2px solid #fff;
	color:#fff;
	font-size:10px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	display:grid;
	place-items:center
}

.pg-dots span+span{
	margin-left:-6px
}

.pg-chev{
	flex-shrink:0;
	color:var(--muted);
	font-size:17px;
	transition:transform .25s
}

.pg.open .pg-chev{
	transform:rotate(180deg)
}

.pg-list{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .4s var(--ease)
}

.pg.open .pg-list{
	grid-template-rows:1fr
}

.pg-list>div{
	overflow:hidden;
	min-height:0
}

.pg-list .opt{
	border-left:none;
	border-right:none;
	border-bottom:none;
	border-radius:0
}

.pg-list .opt+.opt{
	margin-top:0
}

.pg-list .opt.on{
	box-shadow:inset 3px 0 0 var(--red)
}

.np-city{
	position:relative
}

.np-list{
	position:absolute;
	top:calc(100% + 6px);
	left:0;
	right:0;
	background:#fff;
	border:1px solid var(--line);
	border-radius:12px;
	box-shadow:var(--sh-lg);
	padding:6px;
	z-index:30;
	display:none;
	flex-direction:column
}

.np-list.show{
	display:flex
}

.np-list button{
	text-align:left;
	font-size:14px;
	font-weight:600;
	padding:9px 12px;
	border-radius:8px;
	transition:background .15s
}

.np-list button:hover{
	background:var(--red-wash);
	color:var(--red)
}

.np-branch{
	display:none;
	margin-top:12px
}

.np-branch.show{
	display:flex
}

.np-api{
	display:flex;
	align-items:center;
	gap:7px;
	margin-top:10px;
	font-size:12px;
	color:var(--muted)
}

.np-api .ic{
	color:var(--green);
	font-size:14px;
	flex-shrink:0
}

.pk-card{
	display:flex;
	flex-direction:column;
	gap:10px;
	background:var(--plate);
	border-radius:12px;
	padding:14px 16px
}

.pk-row{
	display:flex;
	align-items:flex-start;
	gap:9px;
	font-size:13.5px;
	color:var(--soft)
}

.pk-row .ic{
	color:var(--red);
	font-size:16px;
	flex-shrink:0;
	margin-top:1px
}

.pk-row b{
	color:var(--ink)
}

.pk-route{
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:700;
	color:var(--red);
	border:1.5px solid var(--red-line);
	border-radius:10px;
	padding:8px 14px;
	transition:.18s
}
.pk-route:hover{
	color:#fff!important;
}
.pk-route:hover{
	background:var(--red);
	color:#fff;
	border-color:var(--red)
}

.cm-toggle{
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13.5px;
	font-weight:700;
	color:var(--muted);
	border:1.5px dashed var(--line);
	border-radius:12px;
	padding:11px 16px;
	transition:.18s
}

.cm-toggle:hover{
	color:var(--red);
	border-color:var(--red-line)
}

.co-side{
	position:sticky;
	top:150px;
	display:flex;
	flex-direction:column;
	gap:14px
}

.sum{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:20px 22px
}

.sum h3{
	margin:0 0 14px;
	font-size:17px;
	font-weight:800;
	display:flex;
	align-items:baseline;
	gap:8px
}

.sum h3 .n{
	font-size:13px;
	color:var(--muted);
	font-weight:700;
	font-family:'Manrope',sans-serif
}

.s-item{
	display:grid;
	grid-template-columns:64px 1fr;
	gap:12px;
	padding-bottom:14px;
	border-bottom:1px solid var(--line-soft)
}

.s-item .im{
	width:64px;
	height:64px;
	border-radius:10px;
	border:1px solid var(--line-soft);
	background:#fbfbfc;
	display:grid;
	place-items:center;
	overflow:hidden
}

.s-item .im img{
	width:56px;
	height:56px;
	object-fit:contain
}

.s-item .tt{
	font-size:13.2px;
	font-weight:700;
	line-height:1.35;
	margin:0 0 2px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}

.s-item .cd{
	font-family:'JetBrains Mono',monospace;
	font-size:10.5px;
	color:var(--muted)
}

.s-ctl{
	grid-column:1/-1;
	display:flex;
	align-items:center;
	gap:10px
}

.qty{
	display:inline-flex;
	align-items:center;
	border:1.5px solid var(--line);
	border-radius:10px;
	overflow:hidden
}

.qty button{
	width:32px;
	height:34px;
	display:grid;
	place-items:center;
	font-size:15px;
	color:var(--soft);
	transition:.15s
}

.qty button:hover{
	background:var(--plate);
	color:var(--red)
}

.qty b,.qty input{
	min-width:30px;
	width:30px;
	text-align:center;
	font-size:14.5px;
	font-family:'Onest',sans-serif;
	border:none;
	background:transparent;
	outline:none;
	padding:0
}

.qty button svg,.s-rm svg{
	color:inherit
}

.s-price{
	margin-left:auto;
	text-align:right;
	line-height:1.25
}

.s-price .now{
	font-family:'Onest',sans-serif;
	font-size:16.5px;
	font-weight:800;
	display:block
}

.s-price .was{
	font-size:11.5px;
	font-weight:700;
	color:var(--muted);
	text-decoration:line-through;
	text-decoration-color:var(--red);
	text-decoration-thickness:1.5px;
	margin-right:5px
}

.s-price .pdisc{
	font-size:9px
}

.s-rm{
	width:30px;
	height:30px;
	border-radius:9px;
	border:1px solid var(--line);
	color:var(--faint);
	display:grid;
	place-items:center;
	transition:.18s
}

.s-rm:hover{
	color:#fff;
	background:var(--red);
	border-color:var(--red)
}

.s-lines{
	display:flex;
	flex-direction:column;
	gap:9px;
	padding:14px 0;
	border-bottom:1px solid var(--line-soft)
}

.s-line{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	font-size:13.8px;
	color:var(--soft)
}

.s-line b{
	font-weight:800;
	color:var(--ink)
}

.s-line .free{
	color:var(--green);
	font-weight:800
}

.s-line.disc{
	color:var(--green)
}

.s-line.disc b{
	color:var(--green)
}

.promo-t{
	align-self:flex-start;
	font-size:13px;
	font-weight:700;
	color:var(--red);
	text-decoration:underline;
	text-underline-offset:3px;
	padding:2px 0
}

.promo-t:hover{
	color:var(--red-dark)
}

.promo-form{
	display:flex;
	gap:8px;
	padding-top:2px
}

.promo-form input{
	flex:1;
	min-width:0;
	height:44px;
	border:1.5px solid var(--line);
	border-radius:11px;
	padding:0 13px;
	font-size:14px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	outline:none;
	transition:border-color .2s
}

.promo-form input:focus{
	border-color:var(--red)
}

.promo-form input.shake{
	animation:itbco-shake .4s
}

@keyframes itbco-shake{
	20%,60%{
		transform:translateX(-4px)
	}

	40%,80%{
		transform:translateX(4px)
	}

}

.promo-form button,.promo-form a{
	flex-shrink:0;
	height:44px;
	padding:0 16px;
	border-radius:11px;
	background:var(--ink);
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	transition:background .2s;
	display:flex;
	align-items:center;
	justify-content:center
}

.promo-form a.not-active{
	opacity:.5;
	pointer-events:none;
	background: #979797;
    border: #979797;
}

.promo-form button:hover,.promo-form a:hover{
	background:var(--red)
}

.promo-msg{
	font-size:12.3px;
	font-weight:700;
	color:var(--red);
	min-height:0;
	padding-top:4px
}

.promo-done{
	display:none;
	align-items:center;
	gap:9px;
	background:var(--green-wash);
	border-radius:11px;
	padding:10px 13px;
	font-size:13.3px;
	font-weight:700;
	color:var(--green)
}

.promo-done.show{
	display:flex
}

.promo-done button{
	margin-left:auto;
	color:var(--green);
	font-size:15px;
	display:grid;
	place-items:center;
	width:24px;
	height:24px;
	border-radius:7px;
	transition:.15s
}

.promo-done button:hover{
	background:rgba(21,104,63,.15)
}

.s-total{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	padding:15px 0 4px
}

.s-total span{
	font-size:15px;
	font-weight:800
}

.s-total b{
	font-family:'Onest',sans-serif;
	font-size:27px;
	font-weight:800;
	letter-spacing:-.01em
}

.s-total b.pulse{
	animation:itbco-pulse .45s var(--ease)
}

@keyframes itbco-pulse{
	40%{
		transform:scale(1.06);
		color:var(--red)
	}

}

.s-cta{
	width:100%;
	margin-top:12px
}

/* ===== checkout: кнопка "Оформить заказ" рендерится ядром модуля то <a>, то <input type="button">
   (в залежності від обраного способу оплати), верстку міняти не можна - стилізуємо по спільних
   класах .btn.btn-primary, які є в обох варіантах ===== */
.custom-botton-wrap .btn.btn-primary{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	width:100%;
	margin-top:12px;
	background:var(--green);
	color:#fff!important;
	padding:15px 26px;
	font-size:15px;
	font-weight:700;
	font-family:'Manrope',sans-serif;
	border:none;
	border-radius:var(--r-md);
	box-shadow:0 8px 18px -8px rgba(21,104,63,.55);
	transition:transform .12s var(--ease),background .2s,box-shadow .2s;
	cursor:pointer;
	text-decoration:none
}

.custom-botton-wrap .btn.btn-primary:hover{
	background:#0f4f30;
	box-shadow:0 14px 28px -10px rgba(21,104,63,.7);
	transform:translateY(-2px);
	color:#fff!important
}

.custom-botton-wrap .btn.btn-primary:active{
	transform:translateY(1px)
}

.s-note{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin-top:12px;
	font-size:12.6px;
	color:var(--soft);
	line-height:1.5;
	text-wrap:pretty
}

.s-note .ic{
	color:var(--green);
	font-size:16px;
	flex-shrink:0;
	margin-top:1px
}

.s-legal{
	margin-top:10px;
	font-size:11.3px;
	color:var(--faint);
	line-height:1.5;
	text-wrap:pretty
}

.s-legal a{
	color:var(--muted);
	text-decoration:underline;
	text-underline-offset:2px
}

.s-legal a:hover{
	color:var(--red)
}

.trust{
	background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.trust div{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:12.6px;
	font-weight:700;
	color:var(--soft);
	line-height:1.3
}

.trust .ic{
	width:32px;
	height:32px;
	border-radius:10px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center;
	font-size:16px;
	flex-shrink:0
}

.s-help{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:16px 18px;
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap
}

.s-help .tx{
	display:flex;
	flex-direction:column;
	gap:1px;
	line-height:1.3;
	min-width:0
}

.s-help .tx i{
	font-style:normal;
	font-size:12px;
	color:var(--muted);
	font-weight:600
}

.s-help .tx a{
	font-family:'Onest',sans-serif;
	font-size:16.5px;
	font-weight:800
}

.s-help .tx a:hover{
	color:var(--red)
}

.s-help .ics{
	margin-left:auto;
	display:flex;
	gap:7px
}

.s-help .pp-ic{
	width:38px;
	height:38px;
	flex:none
}

.s-help .pp-ic svg{
	width:18px;
	height:18px
}

.cobar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:70;
	background:#fff;
	border-top:1px solid var(--line);
	box-shadow:0 -10px 30px -12px rgba(24,26,31,.25);
	padding:10px 16px calc(10px + env(safe-area-inset-bottom));
	display:none;
	align-items:center;
	gap:14px
}

.cobar .tx{
	line-height:1.2
}

.cobar .tx b{
	display:block;
	font-family:'Onest',sans-serif;
	font-size:18px;
	font-weight:800
}

.cobar .tx i{
	font-style:normal;
	font-size:11.5px;
	color:var(--muted);
	font-weight:600
}

.cobar .btn{
	margin-left:auto;
	padding:13px 22px
}

@media(max-width:1120px){
	.co-grid{
		grid-template-columns:minmax(0,1fr) 360px
	}

}

@media(max-width:1024px){
	.co-grid{
		grid-template-columns:1fr
	}

	.co-side{
		position:static
	}

	.cobar{
		display:flex
	}

	footer{
		margin-bottom:0
	}

}

@media(max-width:640px){
	.co-sec{
		padding:16px;
		border-radius:16px
	}

	.fi-row{
		grid-template-columns:1fr
	}

	.opt-badge{
		display:none
	}

	.co-h .right{
		margin-left:0;
		width:100%
	}

}

/* ============================================================================
   ДЯКУЄМО ЗА ЗАМОВЛЕННЯ (checkout/success)
   ============================================================================ */
.ty-wrap{
	max-width:1060px;
	margin:0 auto
}

.ty-hero{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:34px 30px;
	margin-top:14px;
	display:flex;
	align-items:center;
	gap:24px;
	flex-wrap:wrap
}

.ty-check{
	width:84px;
	height:84px;
	border-radius:50%;
	background:var(--green-wash);
	display:grid;
	place-items:center;
	flex-shrink:0
}

.ty-check svg{
	width:44px;
	height:44px;
	stroke:var(--green);
	fill:none;
	stroke-width:3;
	stroke-linecap:round;
	stroke-linejoin:round
}

@media(prefers-reduced-motion:no-preference){
	.ty-check{
		animation:itbty-pulse 3s var(--ease) infinite
	}

	.ty-check svg path{
		stroke-dasharray:34;
		animation:itbty-draw .55s var(--ease)
	}

	@keyframes itbty-draw{
		from{
			stroke-dashoffset:34
		}

		to{
			stroke-dashoffset:0
		}

	}

	@keyframes itbty-pulse{
		50%{
			transform:scale(1.02)
		}

	}

}

.ty-hero .tx{
	min-width:0;
	flex:1
}

.ty-num{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:'JetBrains Mono',monospace;
	font-size:12.5px;
	font-weight:700;
	color:var(--soft);
	background:var(--plate);
	padding:6px 12px;
	border-radius:9px;
	margin-bottom:10px
}

.ty-num i{
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--green);
	display:block
}

.ty-hero h1{
	margin:0 0 8px;
	font-size:clamp(24px,3vw,31px);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.15
}

.ty-hero .lead{
	margin:0;
	font-size:14.5px;
	line-height:1.6;
	color:var(--soft);
	max-width:640px;
	text-wrap:pretty
}

.ty-hero .lead b{
	color:var(--ink)
}

.ty-grid{
	display:grid;
	grid-template-columns:1.25fr 1fr;
	gap:14px;
	margin-top:14px;
	align-items:start
}

.ty-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:22px 24px
}

.ty-card h2{
	margin:0 0 16px;
	font-size:17.5px;
	font-weight:800;
	letter-spacing:-.01em
}

.ty-steps{
	display:flex;
	flex-direction:column;
	gap:0;
	position:relative
}

.ty-step{
	display:grid;
	grid-template-columns:34px 1fr;
	gap:14px;
	position:relative;
	padding-bottom:20px
}

.ty-step:last-child{
	padding-bottom:0
}

.ty-step::before{
	content:"";
	position:absolute;
	left:16px;
	top:36px;
	bottom:2px;
	width:2px;
	background:var(--line)
}

.ty-step:last-child::before{
	display:none
}

.ty-step .n{
	width:34px;
	height:34px;
	border-radius:50%;
	border:2px solid var(--red);
	color:var(--red);
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:15px;
	display:grid;
	place-items:center;
	background:#fff;
	transition:.25s
}

.ty-step:hover .n{
	background:var(--red);
	color:#fff
}

.ty-step b{
	display:block;
	font-size:14.5px;
	font-weight:800;
	margin:6px 0 3px
}

.ty-step p{
	margin:0;
	font-size:13.3px;
	color:var(--soft);
	line-height:1.55;
	text-wrap:pretty
}

.ty-step p a{
	color:var(--red);
	font-weight:700
}

.ty-item{
	display:flex;
	gap:13px;
	align-items:center;
	padding-bottom:14px;
	border-bottom:1px solid var(--line-soft)
}

.ty-item .im{
	width:62px;
	height:62px;
	border-radius:10px;
	border:1px solid var(--line-soft);
	background:#fbfbfc;
	display:grid;
	place-items:center;
	flex-shrink:0
}

.ty-item .im img{
	width:54px;
	height:54px;
	object-fit:contain
}

.ty-item .tt{
	font-size:13.3px;
	font-weight:700;
	line-height:1.35;
	margin:0 0 3px
}

.ty-item .meta{
	font-size:12px;
	color:var(--muted)
}

.ty-lines{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:13px 0
}

.ty-line{
	display:flex;
	justify-content:space-between;
	gap:12px;
	font-size:13.5px;
	color:var(--soft)
}

.ty-line b{
	color:var(--ink);
	font-weight:700;
	text-align:right
}

.ty-line.grn b{
	color:var(--green)
}

.ty-total{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	border-top:1px solid var(--line-soft);
	padding-top:13px
}

.ty-total span{
	font-size:14.5px;
	font-weight:800
}

.ty-total b{
	font-family:'Onest',sans-serif;
	font-size:24px;
	font-weight:800
}

.ty-row2{
	display:grid;
	grid-template-columns:1fr 1.25fr;
	gap:14px;
	margin-top:14px;
	align-items:stretch
}

.ty-contact .phone{
	display:block;
	font-family:'Onest',sans-serif;
	font-size:24px;
	font-weight:800;
	letter-spacing:-.01em;
	margin-bottom:4px
}

.ty-contact .phone:hover{
	color:var(--red)
}

.ty-contact .free{
	display:inline-block;
	font-size:11px;
	color:#fff;
	background:var(--green);
	padding:3px 9px;
	border-radius:7px;
	font-weight:800;
	margin-bottom:14px
}

.ty-contact p{
	margin:0 0 14px;
	font-size:13.3px;
	color:var(--soft);
	line-height:1.55;
	text-wrap:pretty
}

.ty-ics{
	display:flex;
	gap:8px
}

.ty-ics .pp-ic{
	width:44px;
	height:44px;
	flex:none
}

.ty-stream{
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column
}

.ty-stream .live{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:11px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#15a05c;
	background:var(--green-wash);
	padding:5px 11px;
	border-radius:999px;
	align-self:flex-start;
	margin-bottom:11px
}

.ty-stream .live i{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#15a05c;
	display:block
}

@media(prefers-reduced-motion:no-preference){
	.ty-stream .live i{
		animation:itbty-pulse 3s ease infinite
	}

}

.ty-stream h2{
	margin:0 0 6px
}

.ty-stream p{
	margin:0 0 16px;
	font-size:13.3px;
	color:var(--soft);
	line-height:1.55;
	text-wrap:pretty;
	max-width:480px
}

.ty-stream .acts{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin-top:auto
}

.ty-stream .ytbtn{
	display:inline-flex;
	align-items:center;
	gap:9px;
	background:var(--red);
	color:#fff;
	padding:12px 18px;
	border-radius:12px;
	font-size:13.5px;
	font-weight:800;
	transition:background .2s,transform .12s
}

.ty-stream .ytbtn:hover{
	background:var(--red-dark);
	transform:translateY(-2px);
	color:#fff!important;
}

.ty-stream .ytbtn .bic svg{
	width:18px;
	height:18px;
	color:#ff0033;
}

.lsq{
	width:42px;
	height:42px;
	border-radius:11px;
	display:grid;
	place-items:center;
	border:1.5px solid var(--line);
	color:var(--soft);
	transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s
}
.lsq svg{
	width:19px;
	height:19px
}

.lsq svg path{
	fill:currentColor
}

.lsq:hover{
	transform:translateY(-3px);
	color:#fff!important;
}

.lsq.ig:hover{
	background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);
	border-color:transparent
}

.lsq.tt:hover{
	background:#0b0b0f;
	border-color:#0b0b0f
}

.lsq.fb:hover{
	background:#1877f2;
	border-color:transparent
}

.lsq.tg:hover{
	background:#229ed9;
	border-color:transparent
}

.lsq.tw:hover{
	background:#9146ff;
	border-color:transparent
}

.ty-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
	margin:26px 0 8px
}

.ty-links{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px 22px;
	flex-wrap:wrap;
	margin:14px 0 4px;
	font-size:13px
}

.ty-links a{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-weight:700;
	color:var(--muted);
	transition:color .15s
}

.ty-links a:hover{
	color:var(--red)
}

.ty-links .ic{
	font-size:15px
}

@media(max-width:900px){
	.ty-grid,.ty-row2{
		grid-template-columns:1fr
	}

}

@media(max-width:640px){
	.ty-hero{
		padding:24px 20px;
		gap:16px
	}

	.ty-check{
		width:66px;
		height:66px
	}

	.ty-check svg{
		width:34px;
		height:34px
	}

	.ty-card{
		padding:18px;
		border-radius:16px
	}

}

/* ============================================================================
   404 (error_not_found.twig)
   ============================================================================ */
.e404{
	max-width:900px;
	margin:34px auto 62px;
	text-align:center
}

.e404-art{
	color:var(--red)
}

.e404-art svg{
	width:104px;
	height:auto
}

.e404-num{
	font-family:'JetBrains Mono',ui-monospace,monospace;
	font-weight:700;
	font-size:56px;
	letter-spacing:.04em;
	color:var(--red);
	line-height:1;
	margin-top:6px
}

.e404 h1{
	font-size:30px;
	line-height:1.1;
	letter-spacing:-.01em;
	margin:6px 0 8px
}

.e404 .lead{
	color:var(--soft);
	font-size:15px;
	max-width:560px;
	margin:0 auto;
	text-wrap:pretty
}

.e404-search{
	display:flex;
	gap:8px;
	max-width:560px;
	margin:26px auto 0;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:7px 7px 7px 15px;
	align-items:center;
	box-shadow:0 12px 32px -22px rgba(24,26,31,.5)
}

.e404-search .ic{
	color:var(--muted);
	font-size:18px;
	flex-shrink:0
}

.e404-search input{
	flex:1;
	min-width:0;
	border:0;
	outline:0;
	font:inherit;
	font-size:14.5px;
	color:var(--ink);
	background:transparent
}

.e404-search .btn{
	flex-shrink:0
}

.e404-nav{
	margin-top:36px
}

.e404-nav-l{
	display:block;
	font-size:11px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:14px
}

.e404-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px
}

.e404-card{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:3px;
	text-align:left;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	padding:16px 18px;
	text-decoration:none;
	transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s
}

.e404-card:hover{
	transform:translateY(-5px);
	border-color:var(--red);
	box-shadow:0 18px 42px -24px rgba(24,26,31,.5)
}

.e404-card .ic{
	color:var(--red);
	font-size:22px;
	margin-bottom:6px
}

.e404-card b{
	color:var(--ink);
	font-size:15px;
	font-weight:700
}

.e404-card span{
	color:var(--muted);
	font-size:12.8px;
	line-height:1.4
}

.e404-cta{
	display:flex;
	gap:12px;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:32px
}

.e404{
	animation:e404rise .5s cubic-bezier(.16,1,.3,1)
}

@keyframes e404rise{
	from{
		opacity:0;
		transform:translateY(16px)
	}

}

@media(max-width:720px){
	.e404-grid{
		grid-template-columns:repeat(2,1fr)
	}

}

@media(max-width:460px){
	.e404-grid{
		grid-template-columns:1fr
	}

	.e404-cta{
		flex-direction:column
	}

	.e404-cta .btn{
		width:100%
	}

}

@media(prefers-reduced-motion:reduce){
	.e404,.e404-card{
		animation:none!important;
		transition:none!important
	}

}

/* ============================================================================
   ПОРІВНЯННЯ ТОВАРІВ (product/compare.twig)
   ============================================================================ */
.cmp-tools{
	display:flex;
	align-items:center;
	gap:12px 18px;
	flex-wrap:wrap;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:12px 18px;
	margin:16px 0 14px
}

.cmp-count{
	font-size:13px;
	color:var(--muted)
}

.cmp-count b{
	color:var(--ink);
	font-family:'Onest',sans-serif;
	font-size:14px
}

.difftoggle{
	display:inline-flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	user-select:none;
	margin-left:auto
}

.difftoggle input{
	position:absolute;
	opacity:0;
	pointer-events:none
}

.difftoggle .sw{
	width:44px;
	height:25px;
	border-radius:999px;
	background:var(--line);
	position:relative;
	transition:background .2s;
	flex-shrink:0
}

.difftoggle .sw::after{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:19px;
	height:19px;
	border-radius:50%;
	background:#fff;
	box-shadow:var(--sh-sm);
	transition:transform .2s var(--ease)
}

.difftoggle input:checked ~ .sw{
	background:var(--red)
}

.difftoggle input:checked ~ .sw::after{
	transform:translateX(19px)
}

.difftoggle .dl{
	font-size:13.5px;
	font-weight:700;
	color:var(--ink)
}

.cmp-scroll{
	overflow-x:auto;
	border:1px solid var(--line);
	border-radius:18px;
	background:#fff;
	-webkit-overflow-scrolling:touch
}

.cmp-grid{
	display:grid;
	align-items:stretch
}

.cmp-corner,.cmp-phead,.cmp-glabel,.cmp-rlabel,.cmp-cell{
	padding:13px 16px;
	min-width:0
}

.cmp-corner{
	position:sticky;
	left:0;
	z-index:5;
	background:#fff;
	grid-column:1;
	border-right:1px solid var(--line);
	border-bottom:1px solid var(--line);
	display:flex;
	align-items:flex-end;
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--faint);
	font-family:'Onest',sans-serif
}

.cmp-phead{
	position:relative;
	background:#fff;
	border-bottom:1px solid var(--line);
	border-left:1px solid var(--line-soft);
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:8px
}

.cmp-ph-rm{
	position:absolute;
	top:10px;
	right:10px;
	width:28px;
	height:28px;
	border-radius:8px;
	display:grid;
	place-items:center;
	color:var(--faint);
	border:1px solid var(--line);
	background:#fff;
	transition:.15s;
	z-index:2
}

.cmp-ph-rm svg{
	width:14px;
	height:14px
}

.cmp-ph-rm:hover{
	color:#fff;
	background:var(--red);
	border-color:var(--red)
}

.cmp-phimg{
	height:124px;
	position:relative;
	width:100%
}

.cmp-phimg img{
	width:100%;
	height:100%;
	object-fit:contain
}

.cmp-code{
	font-family:'JetBrains Mono',monospace;
	font-size:9.5px;
	font-weight:600;
	color:var(--muted)
}

.cmp-ph-t{
	font-size:13px;
	font-weight:700;
	line-height:1.34;
	min-height:35px;
	width:100%;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	transition:color .15s
}

.cmp-ph-t:hover{
	color:var(--red)
}

.cmp-price{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:8px;
	flex-wrap:wrap;
	width:100%
}

.cmp-price .pv{
	font-size:20px;
	font-weight:800;
	font-family:'Onest',sans-serif;
	letter-spacing:-.01em
}

.cmp-price .pv .cur{
	font-size:13px
}

.cmp-price .pold{
	font-size:12px;
	font-weight:700;
	color:var(--muted);
	text-decoration:line-through;
	text-decoration-color:var(--red)
}

.cmp-best{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:10.5px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.03em;
	color:var(--green);
	background:var(--green-wash);
	padding:4px 9px;
	border-radius:999px;
	align-self:center
}

.cmp-best svg{
	width:12px;
	height:12px
}

.cmp-buy{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	margin-top:auto;
	width:100%;
	background:var(--green);
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	padding:11px 14px;
	border-radius:11px;
	transition:background .18s,transform .12s
}

.cmp-buy:hover{
	background:#0f4f30;
	transform:translateY(-1px)
}

.cmp-buy svg{
	width:15px;
	height:15px
}

.cmp-glabel{
	grid-column:1/-1;
	position:sticky;
	left:0;
	background:var(--plate);
	font-size:11.5px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--soft);
	font-family:'Onest',sans-serif;
	display:flex;
	align-items:center;
	gap:9px;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line)
}

.cmp-glabel svg{
	width:15px;
	height:15px;
	color:var(--red);
	flex-shrink:0
}

.cmp-row{
	display:contents
}

.cmp-rlabel{
	position:sticky;
	left:0;
	z-index:2;
	background:#fff;
	font-size:12.5px;
	font-weight:700;
	color:var(--muted);
	border-right:1px solid var(--line);
	display:flex;
	align-items:center
}

.cmp-cell{
	font-size:13px;
	font-weight:600;
	color:var(--ink);
	border-left:1px solid var(--line-soft);
	display:flex;
	align-items:center;
	text-wrap:pretty
}

.cmp-row.alt .cmp-rlabel,.cmp-row.alt .cmp-cell{
	background:#fafbfc
}

.cmp-cell.diff{
	background:var(--red-wash);
	font-weight:800;
	color:var(--red-dark)
}

.cmp-cell .muted{
	color:var(--faint)
}

@media(max-width:560px){
	.cmp-corner,.cmp-phead,.cmp-glabel,.cmp-rlabel,.cmp-cell{
		padding:11px 12px
	}

}

.cmp-seo{
	margin-top:34px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	padding:26px 28px
}

.cmp-seo h2{
	font-size:20px;
	margin:0 0 10px;
	font-weight:800;
	letter-spacing:-.01em
}

.cmp-seo p{
	font-size:13.8px;
	line-height:1.7;
	color:var(--soft);
	margin:0 0 12px;
	max-width:900px;
	text-wrap:pretty
}

.cmp-seo p:last-child{
	margin:0
}

/* ============================================================================
   ЗАКЛАДКИ / ВЖЕ ДИВИЛИСЯ (account/wishlist, недавно переглянуті)
   ============================================================================ */
.vw-hint{
	display:flex;
	align-items:center;
	gap:9px;
	background:var(--red-wash);
	border:1px solid var(--red-line);
	border-radius:14px;
	padding:12px 16px;
	margin-top:16px;
	font-size:12.8px;
	font-weight:600;
	color:var(--soft);
	line-height:1.45;
	text-wrap:pretty
}

.vw-hint .ic{
	color:var(--red);
	font-size:17px;
	flex-shrink:0
}

.vw-hint b{
	color:var(--ink)
}

.wl-cont{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	margin-top:24px
}

@media(max-width:560px){
	.wl-cont{
		flex-direction:column-reverse;
		align-items:stretch
	}

	.wl-cont .btn{
		width:100%
	}

}

/* ============================================================================
   ЦЕНТР ДОПОМОГИ (information/information, information/contact)
   ============================================================================ */
.hp{
	display:grid;
	grid-template-columns:274px minmax(0,1fr);
	gap:26px;
	align-items:start;
	margin:14px 0 46px
}

.hp-h1{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:32px;
	line-height:1.1;
	letter-spacing:-.02em;
	margin:10px 0 6px;
	color:var(--ink)
}

.hp-side{
	position:sticky;
	top:92px
}

.hp-box{
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	padding:8px 8px 10px;
	box-shadow:0 14px 34px -26px rgba(24,26,31,.55)
}

.hp-head{
	display:flex;
	align-items:center;
	gap:11px;
	padding:11px 10px 12px;
	margin-bottom:2px;
	border-bottom:1px solid var(--line-soft)
}

.hp-head .hi{
	width:36px;
	height:36px;
	flex:0 0 36px;
	border-radius:11px;
	background:var(--red-wash);
	color:var(--red);
	display:grid;
	place-items:center
}

.hp-head .hi svg{
	width:20px;
	height:20px
}

.hp-head-tx b{
	font-family:'Onest',sans-serif;
	font-weight:800;
	font-size:16px;
	letter-spacing:-.01em;
	color:var(--ink);
	display:block;
	line-height:1.1
}

.hp-head-tx>span{
	font-size:12px;
	color:var(--muted);
	display:block;
	margin-top:2px
}

.hp-glabel{
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	padding:14px 12px 5px
}

.hp-item{
	position:relative;
	display:flex;
	align-items:center;
	gap:11px;
	padding:9px 12px 9px 13px;
	border-radius:11px;
	color:var(--soft);
	font-weight:600;
	font-size:14px;
	text-decoration:none;
	transition:background .18s,color .18s,transform .18s
}

.hp-item .i{
	width:18px;
	height:18px;
	flex:0 0 18px;
	color:var(--faint);
	display:grid;
	place-items:center;
	transition:color .18s
}

.hp-item .i svg{
	width:18px;
	height:18px
}

.hp-item .chev{
	margin-left:auto;
	width:15px;
	height:15px;
	color:var(--faint);
	opacity:0;
	transform:translateX(-4px);
	transition:opacity .18s,transform .18s
}

.hp-item .chev svg{
	width:15px;
	height:15px
}

.hp-item:hover{
	background:var(--plate);
	color:var(--ink);
	transform:translateX(2px)
}

.hp-item:hover .i{
	color:var(--red)
}

.hp-item:hover .chev{
	opacity:1;
	transform:none;
	color:var(--red)
}

.hp-item.on{
	background:var(--red-wash);
	color:var(--red);
	font-weight:700
}

.hp-item.on .i{
	color:var(--red)
}

.hp-item.on .chev{
	display:none
}

.hp-item.on::before{
	content:"";
	position:absolute;
	left:0;
	top:20%;
	bottom:20%;
	width:3px;
	border-radius:0 3px 3px 0;
	background:var(--red);
	transform-origin:center
}

.hp-docs{
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid var(--line-soft);
	display:flex;
	flex-direction:column
}

.hp-docs a{
	display:flex;
	align-items:center;
	gap:9px;
	font-weight:600;
	font-size:12.5px;
	color:var(--muted);
	text-decoration:none;
	border-radius:9px;
	padding:8px 12px;
	transition:color .16s,background .16s
}

.hp-docs a .i{
	width:15px;
	height:15px;
	flex:0 0 15px;
	color:var(--faint)
}

.hp-docs a .i svg{
	width:15px;
	height:15px
}

.hp-docs a:hover{
	color:var(--red);
	background:var(--plate)
}

.hp-content{
	min-width:0;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	overflow:hidden;
	padding:clamp(6px,1vw,14px)
}

.hp-side-toggle{
	display:none
}

.hp-search{
	position:relative;
	margin:4px 4px 2px
}

.hp-search .i{
	position:absolute;
	left:12px;
	top:50%;
	transform:translateY(-50%);
	width:16px;
	height:16px;
	color:var(--muted);
	pointer-events:none
}

.hp-search .i svg{
	width:16px;
	height:16px
}

.hp-search input{
	width:100%;
	font:inherit;
	font-size:13.5px;
	color:var(--ink);
	background:var(--plate);
	border:1.5px solid transparent;
	border-radius:10px;
	padding:9px 12px 9px 36px;
	outline:none;
	transition:background .2s,border-color .2s,box-shadow .2s
}

.hp-search input:focus{
	background:#fff;
	border-color:var(--red);
	box-shadow:0 0 0 4px var(--red-wash)
}

.hp-hide{
	display:none!important
}

.hp-empty{
	padding:12px;
	text-align:center;
	font-size:12.5px;
	color:var(--muted)
}

.hp-rel{
	margin:20px clamp(6px,1vw,14px) 6px;
	padding-top:20px;
	border-top:1px solid var(--line)
}

.hp-rel h3{
	font-family:'Onest',sans-serif;
	font-size:13px;
	font-weight:800;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--muted);
	margin:0 0 12px
}

.hp-rel-grid{
	display:flex;
	flex-wrap:wrap;
	gap:10px
}

.hp-rel-grid a{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-weight:700;
	font-size:14px;
	color:var(--soft);
	text-decoration:none;
	background:#fff;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:11px 15px;
	transition:border-color .18s,color .18s,transform .18s,box-shadow .18s
}

.hp-rel-grid a .i{
	width:17px;
	height:17px;
	color:var(--red)
}

.hp-rel-grid a .i svg{
	width:17px;
	height:17px
}

.hp-rel-grid a:hover{
	border-color:var(--red-line);
	color:var(--red);
	transform:translateY(-2px);
	box-shadow:0 12px 26px -18px rgba(142,28,37,.6)
}

.hp-need{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	flex-wrap:wrap;
	margin-top:22px;
	background:linear-gradient(180deg,#fff,#fbfbfc);
	border:1px solid var(--line);
	border-radius:18px;
	padding:18px 22px
}

.hp-need-tx b{
	font-family:'Onest',sans-serif;
	font-size:16px;
	font-weight:700;
	color:var(--ink);
	display:block
}

.hp-need-tx span{
	font-size:13px;
	color:var(--muted)
}

.hp-need-act{
	display:flex;
	align-items:center;
	gap:12px
}

.hp-call{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight:800;
	font-size:15px;
	color:var(--ink);
	text-decoration:none;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:10px 15px;
	transition:border-color .18s,color .18s
}

.hp-call .i{
	width:18px;
	height:18px;
	color:var(--red)
}

.hp-call .i svg{
	width:18px;
	height:18px
}

.hp-call:hover{
	border-color:var(--red-line);
	color:var(--red)
}

.hp-msgs{
	display:flex;
	gap:8px
}

.hp-msgs .m{
	width:42px;
	height:42px;
	border-radius:11px;
	display:grid;
	place-items:center;
	color:#fff;
	transition:transform .18s
}

.hp-msgs .m svg{
	width:22px;
	height:22px
}

.hp-msgs .m.tg{
	background:#29a9eb
}

.hp-msgs .m.vb{
	background:#7360f2
}

.hp-msgs .m.wa{
	background:#25d366
}

.hp-msgs .m:hover{
	transform:translateY(-3px)
}

@media(max-width:640px){
	.hp-need{
		flex-direction:column;
		align-items:flex-start
	}

	.hp-need-act{
		width:100%
	}

	.hp-rel-grid a{
		flex:1
	}

}

.hp-anim{}

@keyframes hpRise{
	from{
		opacity:0;
		transform:translateY(10px)
	}

	to{
		opacity:1;
		transform:none
	}

}

@keyframes hpBar{
	from{
		transform:scaleY(0)
	}

	to{
		transform:scaleY(1)
	}

}

@media(prefers-reduced-motion:no-preference){
	.hp-anim{
		animation:hpRise .45s cubic-bezier(.16,1,.3,1) both
	}

	.hp-item.on::before{
		animation:hpBar .5s cubic-bezier(.16,1,.3,1) .1s both
	}

}

@media(max-width:980px){
	.hp{
		grid-template-columns:1fr;
		gap:0
	}

	.hp-side{
		position:static;
		display:none
	}

	.hp-side.open{
		display:block;
		margin-bottom:16px
	}

	.hp-side-toggle{
		display:inline-flex;
		align-items:center;
		gap:8px;
		font:inherit;
		font-weight:700;
		font-size:14px;
		color:var(--ink);
		background:#fff;
		border:1.5px solid var(--line);
		border-radius:12px;
		padding:11px 15px;
		margin:6px 0 12px;
		cursor:pointer
	}

	.hp-side-toggle span{
		width:18px;
		height:18px
	}

	.hp-side-toggle span svg{
		width:18px;
		height:18px
	}

}

@media(max-width:640px){
	.hp-h1{
		font-size:26px
	}

}

/* ============================================================================
   ПОПАП "КУПИТИ В 1 КЛІК" (sp_fast_order, #sp-fast-order-overlay) — сторонній
   модуль, розмітку/логіку не чіпаємо (генерується його JS + tpl), тут тільки
   тема сайту поверх. Кольори модуль сам зав'язав на CSS-змінні --fo-* —
   переозначаємо їх через !important (це реально перебиває інлайновий
   style="--fo-header:...", бо !important в стилях сильніший за звичайний
   inline). Решта — шрифти/радіуси/типографіка під загальну тему.
   ============================================================================ */
#sp-fo-container{
	--fo-header:var(--plate) !important;
	--fo-bg:#ffffff !important;
	--fo-btn-buy:var(--red) !important;
	--fo-btn-buy-text:#ffffff !important;
	--fo-btn-cancel:var(--plate) !important;
	--fo-btn-cancel-text:var(--ink) !important;
	font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important
}

.sp-modal-content{
	border-radius:var(--r-lg) !important;
	box-shadow:var(--sh-lg) !important
}

.sp-modal-overlay{
	background:rgba(24,26,31,.6) !important
}

.sp-modal-close{
	border-color:var(--line) !important;
	background:#fff !important;
	color:var(--muted) !important
}

.sp-modal-close:hover{
	background:var(--line-soft) !important;
	border-color:var(--line) !important;
	color:var(--ink) !important
}

.sp-fo-header{
	background:var(--plate) !important;
	border-bottom-color:var(--line) !important
}

.sp-fo-header h3{
	color:var(--ink) !important;
	font-family:'Onest',sans-serif !important;
	font-weight:800 !important;
	letter-spacing:-.01em !important
}

.sp-fo-title{
	font-family:'Onest',sans-serif !important;
	color:var(--ink) !important
}

.sp-fo-price{
	font-family:'Onest',sans-serif !important;
	color:var(--ink) !important;
	font-weight:800 !important
}

.sp-fo-price-old{
	color:var(--faint) !important;
	text-decoration-color:var(--red) !important
}

.sp-fo-product{
	background:var(--plate) !important;
	border-color:var(--line) !important;
	border-radius:var(--r-md) !important
}

.sp-fo-image{
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important
}

.sp-fo-qty-label{
	color:var(--muted) !important
}

.sp-fo-qty-control{
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important
}

.sp-fo-qty-control button{
	background:var(--plate) !important;
	color:var(--ink) !important
}

.sp-fo-qty-control button:hover{
	background:var(--line-soft) !important
}

.sp-fo-label{
	color:var(--soft) !important;
	font-family:'Manrope',sans-serif !important
}

.sp-fo-req{
	color:var(--red) !important
}

.sp-fo-input,
.sp-fo-textarea{
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important;
	background:#fafafb !important;
	color:var(--ink) !important;
	box-shadow:none !important
}

.sp-fo-input:focus,
.sp-fo-textarea:focus{
	border-color:var(--red) !important;
	background:#fff !important;
	box-shadow:0 0 0 3px var(--red-wash) !important
}

.sp-fo-input.sp-error,
.sp-fo-textarea.sp-error,
.sp-fo-select.sp-error{
	border-color:var(--red) !important;
	box-shadow:0 0 0 3px var(--red-wash) !important
}

.sp-fo-error-text{
	border-color:var(--red-line) !important;
	background:var(--red-wash) !important;
	color:var(--red) !important
}

.sp-fo-error-text:before{
	background:var(--red) !important
}

.sp-fo-alert-error{
	color:var(--red) !important;
	background:var(--red-wash) !important;
	border-color:var(--red-line) !important
}

.sp-fo-group.sp-has-field-error > .sp-fo-label,
.sp-fo-option.sp-has-field-error > .sp-fo-label,
.sp-fo-footer-checks.sp-has-field-error .sp-fo-checkbox-text{
	color:var(--red) !important
}

.sp-fo-group.sp-has-field-error .sp-fo-input,
.sp-fo-group.sp-has-field-error .sp-fo-textarea,
.sp-fo-group.sp-has-field-error .sp-fo-select{
	border-color:var(--red) !important;
	background:var(--red-wash) !important;
	box-shadow:0 0 0 3px var(--red-wash) !important
}

.sp-fo-footer-checks.sp-has-field-error{
	border-color:var(--red-line) !important;
	background:var(--red-wash) !important
}

.sp-fo-option.sp-has-field-error .sp-fo-option-card{
	border-color:var(--red-line) !important;
	background:var(--red-wash) !important
}

.sp-fo-option.sp-has-field-error .sp-fo-option-card:hover{
	border-color:var(--red) !important
}

.sp-fast-order-page-error{
	color:var(--red) !important;
	background:var(--red-wash) !important;
	border-color:var(--red-line) !important
}

.sp-fo-section-title{
	font-family:'Onest',sans-serif !important;
	color:var(--ink) !important
}

.sp-fo-option-card,
.sp-fo-method-card{
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important;
	background:#fff !important
}

.sp-fo-option-card:hover,
.sp-fo-method-card:hover{
	border-color:var(--red-line) !important
}

.sp-fo-option-card.sp-is-checked,
.sp-fo-option-card:has(input:checked),
.sp-fo-method-card.sp-is-checked,
.sp-fo-method-card:has(input:checked){
	border-color:var(--red) !important;
	background:var(--red-wash) !important;
	box-shadow:none !important
}

.sp-fo-radio-circle{
	border-color:var(--line)
}

.sp-fo-radio-circle:after{
	background:var(--red) !important
}

.sp-fo-method-card input:checked + .sp-fo-radio-circle{
	border-color:var(--red) !important
}

.sp-fo-checkbox-box{
	border-color:var(--line) !important;
	border-radius:6px !important
}

.sp-fo-checkbox-wrap input:checked + .sp-fo-checkbox-box{
	background:var(--red) !important;
	border-color:var(--red) !important
}

.sp-fo-option-card input:checked + .sp-fo-checkbox-box{
	background:var(--red) !important;
	border-color:var(--red) !important
}

.sp-fo-option-name,
.sp-fo-method-name{
	color:var(--ink) !important
}

.sp-fo-option-price{
	color:var(--red) !important
}

.sp-fo-checkbox-text{
	color:var(--soft) !important;
	font-family:'Manrope',sans-serif !important
}

.sp-fo-checkbox-text a{
	color:var(--red) !important
}

.sp-fo-method-comment,
.sp-fo-address-box{
	background:var(--plate) !important;
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important
}

.sp-fo-autocomplete{
	border-color:var(--line) !important;
	border-radius:var(--r-sm) !important;
	box-shadow:var(--sh-lg) !important
}

.sp-fo-autocomplete button:hover{
	background:var(--red-wash) !important;
	color:var(--red) !important
}

.sp-fo-order-summary{
	background:var(--plate) !important;
	border-color:var(--line) !important;
	color:var(--soft) !important
}

.sp-fo-order-summary-title{
	color:var(--ink) !important;
	font-family:'Onest',sans-serif !important
}

.sp-fo-buttons{
	background:var(--plate) !important;
	border-top-color:var(--line) !important
}

.sp-fo-btn{
	border-radius:var(--r-md) !important;
	font-family:'Manrope',sans-serif !important;
	font-weight:700 !important
}

.sp-fo-success-icon{
	background:var(--red) !important
}

.sp-fo-success-message{
	color:var(--soft) !important
}

.sp-fast-order-page-btn{
	--fo-btn-buy:var(--red) !important;
	--fo-btn-buy-text:var(--ink) !important;
	background:#fff !important;
	color:var(--ink) !important;
	border:1.5px solid var(--line) !important;
	box-shadow:none !important;
	border-radius:var(--r-md) !important;
	font-family:'Manrope',sans-serif !important;
	font-size:14.5px !important;
	font-weight:700 !important
}

.sp-fast-order-page-btn:hover{
	border-color:var(--ink) !important
}

.bactions #button-ukrcredits{
	order:2
}

.bactions .sp-fast-order-page-btn{
	order:1
}
.simple-comment{
	margin-top:18px;
}