/* Tajawal + Inter (SIL Open Font License), self-hosted: no Google Fonts request before first paint */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/role8_store/static/fonts/tajawal-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/role8_store/static/fonts/tajawal-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/role8_store/static/fonts/tajawal-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/role8_store/static/fonts/tajawal-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/role8_store/static/fonts/tajawal-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/role8_store/static/fonts/tajawal-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/role8_store/static/fonts/tajawal-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/role8_store/static/fonts/tajawal-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/role8_store/static/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --navy:#0A2340;--navy2:#134882;--ink:#0E2440;--muted:#5D6B80;--line:#E6EAF0;--bg:#F6F7F9;
  --orange:#F27A36;--orange2:#FF9A5C;--soft:#FEF2EA;--green:#134882;--blue:#134882;--blueSoft:#EAF1F9;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Tajawal,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
.top{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--navy)}
.logo img{height:40px;width:auto;display:block}
.nav{display:flex;gap:22px;font-size:15px;color:var(--muted);font-weight:500}
.nav a.on{color:var(--ink)}
.search{flex:1;max-width:340px;margin-inline-start:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--muted);font-size:14px}
.lang{height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:#fff;font-weight:700;font-size:14px;font-family:Inter,system-ui,sans-serif}
.cart{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:#fff}
.cart i{position:absolute;top:-6px;left:-6px;background:var(--orange);color:#fff;font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:700;font-size:15px;padding:12px 20px;border:0;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px -8px rgba(242,122,54,.7)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* hero */
.hero{background:radial-gradient(900px 380px at 85% -10%,rgba(242,122,54,.22),transparent 60%),radial-gradient(700px 360px at 0% 120%,rgba(19,72,130,.55),transparent 60%),linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:6px 12px;border-radius:999px;font-size:13px;color:#DDE6F5}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block}
.hero h1{font-size:46px;line-height:1.2;font-weight:800;margin:16px 0 12px;letter-spacing:0}
.hero h1 span{color:var(--orange2)}
.hero p{font-size:17px;color:#C9D4E6;line-height:1.8;max-width:560px}
.hero .cta{display:flex;gap:12px;margin-top:26px}
.hero .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.stats{display:flex;gap:28px;margin-top:30px;color:#C9D4E6;font-size:13px}
.stats b{display:block;color:#fff;font-size:22px;font-weight:800}
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:18px;backdrop-filter:blur(6px)}
.mini{display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:14px;padding:12px;margin-bottom:10px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.mini:last-child{margin-bottom:0}
.mini img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:var(--blueSoft);padding:4px}
.mini .t{flex:1;font-weight:700;font-size:14px}
.mini .t small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.mini .p{font-weight:800;color:var(--orange);font-size:15px;white-space:nowrap}

/* trust */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.trust div{display:flex;align-items:center;gap:10px}
.trust svg{width:22px;height:22px;color:var(--orange)}
.trust b{color:var(--ink);display:block;font-size:14px}

/* sections */
section.block{padding:48px 0 8px}
.head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.head h2{font-size:26px;font-weight:800}
.head p{color:var(--muted);font-size:14px;margin-top:4px}
.head a{color:var(--orange);font-weight:700;font-size:14px}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 14px;text-align:center;transition:.2s}
.cat:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(11,27,51,.45);border-color:transparent}
.cat .ic{width:54px;height:54px;border-radius:16px;margin:0 auto 10px;display:grid;place-items:center}
.cat .ic svg{width:26px;height:26px}
.cat b{display:block;font-size:15px}
.cat small{color:var(--muted);font-size:12px}
.chips{display:none}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;transition:.2s;position:relative}
.card:hover{box-shadow:0 22px 50px -28px rgba(11,27,51,.5);border-color:transparent;transform:translateY(-3px)}
.badge{position:absolute;top:14px;left:14px;background:var(--soft);color:var(--orange);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.card .img{height:96px;display:grid;place-items:center;margin-bottom:12px;background:var(--blueSoft);border-radius:16px}
.card .img img{max-height:72px;max-width:150px;object-fit:contain}
.card h3{font-size:16px;font-weight:800;line-height:1.4}
.card .sub{color:var(--muted);font-size:13px;margin-top:4px;min-height:38px}
.opts{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.opts span{font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:8px;padding:4px 8px}
.price{margin-top:auto;display:flex;align-items:end;justify-content:space-between;border-top:1px dashed var(--line);padding-top:12px}
.price small{display:block;color:var(--muted);font-size:11.5px}
.price b{font-size:22px;font-weight:800}
.price .vat{color:var(--green);font-weight:700;margin-top:2px}
.price b em{font-style:normal;font-size:13px;color:var(--muted);font-weight:500}
.add{width:42px;height:42px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;box-shadow:0 8px 18px -8px rgba(242,122,54,.75);transition:.2s}
.card:hover .add{background:var(--orange2)}

/* product */
.prod{display:grid;grid-template-columns:1fr 420px;gap:28px;margin-top:8px}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.ph{display:flex;gap:18px;align-items:center}
.ph .img{width:96px;height:96px;border-radius:20px;background:var(--blueSoft);display:grid;place-items:center}
.ph img{max-width:76px;max-height:60px}
.ph h2{font-size:26px;font-weight:800}
.ph p{color:var(--muted);margin-top:4px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.feat div{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:14px;padding:12px;font-size:14px}
.feat svg{flex:none;width:20px;height:20px;color:var(--green);margin-top:2px}
.lbl{font-size:13px;color:var(--muted);font-weight:700;margin:18px 0 8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{font-family:inherit;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px;text-align:start;cursor:pointer;color:var(--ink)}
.seg button b{display:block;font-size:15px}
.seg button small{color:var(--muted);font-size:12px}
.seg button small.r8s-optp{display:block;margin-top:3px;color:var(--orange);font-weight:700;font-size:13px}
.seg button.on small.r8s-optp{color:var(--blue,#134882)}
.seg button.on{border-color:var(--orange);background:var(--soft);box-shadow:0 0 0 3px rgba(242,122,54,.12)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer;font-family:inherit}
.qty b{font-size:20px;min-width:40px;text-align:center}
.sum{margin-top:20px;background:var(--navy);color:#fff;border-radius:18px;padding:18px}
.sum .r{display:flex;justify-content:space-between;color:#C9D4E6;font-size:14px;margin-bottom:6px}
.sum .t{display:flex;justify-content:space-between;align-items:end;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15)}
.sum .t b{font-size:30px;font-weight:800;white-space:nowrap}.sum .t span{white-space:nowrap}
.sum .btn{width:100%;margin-top:14px;padding:15px}
.pay{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}
.pay img{height:26px;width:auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.safe{align-items:center;flex-wrap:wrap;display:flex;justify-content:center;gap:14px;margin-top:12px;color:var(--muted);font-size:12px}

footer{margin-top:56px;background:var(--navy);color:#C9D4E6;padding:28px 0;font-size:13px}
.label{display:inline-block;margin:28px 0 10px;background:#fff;border:1px dashed var(--orange);color:var(--orange);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}

/* phone */
@media (max-width:760px){
  .nav,.search{display:none}
  .top .wrap{height:58px;justify-content:space-between}
  .hero .wrap{grid-template-columns:1fr;padding-top:28px;padding-bottom:30px;gap:22px}
  .hero h1{font-size:30px}
  .hero p{font-size:15px}
  .stats{gap:18px}
  .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cats{display:none}
  .chips{display:flex;gap:8px;overflow:auto;padding-bottom:4px;scrollbar-width:none}
  .chips a{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-weight:700;font-size:14px}
  .chips a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .grid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row;flex-wrap:wrap;gap:12px;padding:14px}
  .card .img{width:72px;height:72px;margin:0;background:var(--bg);border-radius:16px}
  .card .img img{max-width:56px;max-height:44px}
  .card .meta{flex:1;min-width:0}
  .card .sub{min-height:0}
  .card .opts{display:none}
  .card .price{width:100%}
  .head h2{font-size:21px}
  .prod{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .ph h2{font-size:21px}
}

.lbl-note{display:none}
.lang{font-family:Tajawal,system-ui,sans-serif}
.crumbs{font-size:13px;color:var(--muted);margin:22px 0 6px}
.crumbs a:hover{color:var(--orange)}
.subs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.subs a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px}
.subs a.on,.subs a:hover{border-color:var(--orange);color:var(--orange)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:40px;text-align:center;color:var(--muted)}
.ic svg,.card .img svg,.mini .ico svg,.ph .img svg{display:block}
.card .img{color:var(--navy2)}
.card .img img{max-height:72px;max-width:150px;object-fit:contain}
.mini .ico{width:44px;height:44px;border-radius:10px;background:var(--blueSoft);display:grid;place-items:center;color:var(--navy2)}
.mini .ico img{width:40px;height:40px;object-fit:contain}
.ph .img{color:var(--navy2)}
.ph .img img{max-width:76px;max-height:76px}
.err{color:#B3261E;font-size:13px;margin-top:8px;display:none}
.desc{color:var(--muted);line-height:1.9;margin-top:16px;font-size:15px;white-space:pre-line}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{color:#fff}
.foot .links{display:flex;gap:18px;flex-wrap:wrap}
html[dir=ltr] .hero p,html[dir=ltr] body{font-family:Inter,system-ui,sans-serif}
html[dir=ltr] body{font-family:Tajawal,Inter,system-ui,sans-serif}

/* Hosted in Saudi Arabia tag (product field r8s_in_ksa) */
.ksa{display:inline-flex;margin:4px 0 2px;align-items:center;gap:6px;background:#E8F4EC;color:#006C35;font-size:11.5px;font-weight:700;padding:4px 10px 4px 6px;border-radius:999px}
.ksa .flag{width:16px;height:11px;display:block;flex:none}
.ksa--inline{position:static;margin-bottom:8px}

/* Compact cards (owner 2026-10-20: less white space) */
.card{padding:14px}
.card .img{height:72px;margin-bottom:10px}
.card .img img{max-height:52px}
.card .sub{min-height:0}
.opts{margin:8px 0 0}
.opts:empty{display:none}
.price{margin-top:12px;padding-top:10px}
.card .meta{flex:1}

/* Server spec boxes (product page) and chips (cards) - read from the product name in Odoo */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:14px 0 4px}
.spec{background:var(--blueSoft);border-radius:10px;padding:7px 10px;display:flex;align-items:center;gap:8px}
.spec svg{width:20px;height:20px;color:var(--blue);flex:none}
.spec b{display:block;font-size:14px;line-height:1.1}
.spec small{color:var(--muted);font-size:11px;display:block}
.spechips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.spechip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;background:var(--bg);border-radius:8px;padding:4px 7px}
.spechip svg{width:14px;height:14px;color:var(--blue)}

/* Clear way back to the store home (owner 2026-10-20) */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;margin:18px 0 8px}
.crumb-home{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--blue);color:var(--blue);font-weight:800;padding:7px 14px 7px 10px;border-radius:999px}
.crumb-home:hover{background:var(--blue);color:#fff}
[dir=rtl] .crumb-home{padding:7px 10px 7px 14px}
[dir=rtl] .crumb-home .back{transform:scaleX(-1)}
.crumbs .sep{color:var(--muted)}
.crumbs .crumb{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Company marks: keep inside their box */
svg.brand{max-width:88%;height:auto;display:block}
.mini .ico svg.brand,.mini .ico .brand{max-width:40px}

/* Saudi Riyal sign (SAMA symbol) everywhere in the store */
.sar{display:inline-block;width:.82em;height:.92em;vertical-align:-.08em;background:currentColor;
  -webkit-mask:url(/role8_store/static/img/sar.svg) center/contain no-repeat;mask:url(/role8_store/static/img/sar.svg) center/contain no-repeat;font-style:normal}

/* Optional add-ons on the product page */
.extras{display:grid;gap:8px;margin-bottom:6px}
.extra{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff}
.extra input{width:18px;height:18px;accent-color:var(--orange);flex:none}
.extra .nm{flex:1;font-weight:700;font-size:14px}
.extra .pr{color:var(--orange);font-weight:700;font-size:13px;white-space:nowrap}
.extra:has(input:checked){border-color:var(--orange);background:var(--soft)}

/* Product pictures = colour logos on a white tile, all the same size (owner 2026-10-20) */
.card .img,.ph .img,.mini .ico{background:#fff;border:1px solid var(--line)}
.card .img img.logo{max-width:62%;max-height:44px;object-fit:contain}
.ph .img img.logo{max-width:76px;max-height:56px;object-fit:contain}
.mini .ico img.logo{width:auto;height:auto;max-width:36px;max-height:30px;object-fit:contain;background:none;padding:0;border-radius:0}

/* Phone: nothing may widen the page (product panels pushed it sideways) */
.prod>*,.panel,.ph>div,.seg button,.spec,.extra{min-width:0}
.seg button b,.ph h1,.extra .nm{overflow-wrap:anywhere}

/* Phone app bar, like the old shop (owner 2026-10-20) */
.appbar{display:none}
@media (max-width:767px){
  .appbar{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:64px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .appbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;font-weight:700}
  .appbar a.on{color:var(--orange)}
  .appbar svg{width:22px;height:22px}
  .appbar .kin img{width:26px;height:26px;border-radius:50%;object-fit:cover}
  .appbar .fab b{position:relative;width:56px;height:56px;margin-top:-22px;border-radius:50%;background:var(--orange);color:#fff;
    display:grid;place-items:center;box-shadow:0 8px 18px -6px rgba(242,122,54,.7);flex:none}
  .appbar .fab b i{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--blue);color:#fff;
    font-size:11px;font-style:normal;display:grid;place-items:center;padding:0 4px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .r8ai-root:not(.r8ai-root--open) .r8ai-launcher{display:none}
}

/* Phone header + payment logos (owner 2026-10-20: tidy on phones) */
@media (max-width:767px){
  header.top .wrap{gap:8px}
  header.top .logo img{height:30px;width:auto}
  header.top a.cart,header.top a.lang[title]{display:none}
  header.top a.lang{padding:6px 12px;font-size:13px}
  .pay{flex-wrap:wrap;justify-content:center;gap:6px}
  .pay img{height:26px;width:auto}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .wrap>div:first-child{grid-column:1/-1}
  .trust .pay img{height:22px}
}

/* Phone cards: spec chips on their own full-width line under the name (they squeezed the name) */
@media (max-width:767px){
  .card .spechips{width:100%;margin:0}
  .card .spechip{padding:3px 6px;font-size:11.5px}
}

/* Store home: all services on one page with a section filter (owner 2026-10-20) */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px;position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0}
.filter a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;color:var(--ink)}
.filter a .fi{display:inline-grid;color:var(--blue)}
.filter a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.filter a.on .fi{color:#fff}
@media (max-width:767px){
  .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .filter a{font-size:13px;padding:7px 12px}
}

/* Sort select next to the section filter */
.sortbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:-6px 0 12px;font-size:14px;color:var(--muted)}
.sortbar select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px}

/* Support page */
.sup-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;margin-bottom:32px}
.sup-form{display:grid;gap:14px}
.sup-form label{display:grid;gap:6px;font-weight:700;font-size:14px}
.sup-form input:not([type=radio]):not([type=checkbox]),.sup-form select,.sup-form textarea{font:inherit;font-weight:400;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;width:100%;box-sizing:border-box}
.sup-form textarea{resize:vertical}
.sup-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sup-form .types{display:flex;flex-wrap:wrap;gap:8px}
.sup-form .pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}
.sup-form .pill:has(input:checked){border-color:var(--orange);background:var(--soft)}
.sup-form .pill input{accent-color:var(--orange)}
.sup-form .urgent{display:flex;align-items:center;gap:10px;border:1.5px dashed #e5484d;border-radius:12px;padding:10px 12px}
.sup-form .urgent input{width:18px;height:18px;accent-color:#e5484d}
.sup-form .urgent small{display:block;color:var(--muted);font-weight:400}
.sup-done{text-align:center;padding:24px 8px;display:grid;gap:10px;justify-items:center}
.sup-done .ok{width:56px;height:56px;border-radius:50%;background:#E8F4EC;color:#006C35;display:grid;place-items:center;font-size:28px;font-weight:800}
.sup-done .muted,.sup-side p{color:var(--muted)}
.sup-side h4{margin:0 0 6px;font-size:15px}.sup-side p{margin:0 0 10px}
.sup-side .steps{margin:0;padding-inline-start:18px;color:var(--muted);display:grid;gap:4px}
@media (max-width:767px){.sup-grid{grid-template-columns:1fr}.sup-form .two{grid-template-columns:1fr}}
.sup-acts{display:flex;gap:8px}.sup-acts .btn{flex:1;text-align:center;padding:9px 10px}

/* Language button = flag of the other language */
.lang.flag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px}
.lang.flag svg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08);display:block}
.lang.flag span{font-weight:800;font-size:13px}
.sup-login{width:100%;max-width:380px;text-align:start}.sup-links{display:flex;justify-content:space-between;font-size:13px}.sup-links a{color:var(--blue);font-weight:700}

/* Support side box in colour (owner 2026-10-20) */
.sup-side{display:grid;gap:12px}
.sb{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.sb p{margin:6px 0 0;color:var(--muted)}
.sb-h{display:flex;align-items:center;gap:10px;font-size:15px}
.sb-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.sb-i svg{width:19px;height:19px}
.sb-blue{background:#EAF1F9;border-color:#d5e3f3}.sb-blue .sb-i{background:#134882;color:#fff}
.sb-teal{background:#E6F6F3;border-color:#cbeae4}.sb-teal .sb-i{background:#0F8B77;color:#fff}
.sb-orange{background:#FEF2EA;border-color:#fbdcc6}.sb-orange .sb-i{background:#F27A36;color:#fff}
.sb-navy{background:#F1F3F8;border-color:#e1e6ee}.sb-navy .sb-i{background:#0E2440;color:#fff}
.sb-big b{font-size:26px;color:#134882}
.sb-bar{height:8px;border-radius:8px;background:#fff;margin-top:8px;overflow:hidden}.sb-bar i{display:block;height:100%;background:linear-gradient(90deg,#134882,#3b7bd0);border-radius:8px}
.sb-num{font-weight:800;color:var(--ink)!important;font-size:16px}.sb-num a{color:var(--ink)}
.sb .sup-acts .btn{background:#fff;border:1.5px solid #F27A36;color:#F27A36;font-weight:800;border-radius:12px}
.sb .sup-acts .btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.steps2{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.steps2 li{display:flex;gap:10px;align-items:center;color:var(--muted)}
.steps2 i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.steps2 li:nth-child(1) i{background:#134882}.steps2 li:nth-child(2) i{background:#0F8B77}.steps2 li:nth-child(3) i{background:#F27A36}
/* Request-type pills: clear text (was too faint) */
.sup-form .pill{background:#fff;color:var(--ink);opacity:1}
.sup-form .pill span{color:var(--ink);font-weight:700;font-size:14px;opacity:1}
.sup-form .pill:has(input:checked) span{color:#c2541a}
.sup-form .urgent-pill:has(input:checked){border-color:#e5484d;background:#fdecec}.sup-form .urgent-pill:has(input:checked) span{color:#c0262b}.sup-form .urgent-pill input{accent-color:#e5484d}

/* Footer always at the bottom, also on short pages (owner 2026-10-20) */
body>main{min-height:calc(100vh - 260px)}

/* Sign-in page */
.lg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:36px auto 40px;align-items:start}
.lg-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px}
.lg-card h1{font-size:26px;margin:0 0 4px}.lg-card .muted{color:var(--muted)}
.lg-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:14px;padding:4px;margin:16px 0}
.lg-tabs>*{text-align:center;padding:10px;border-radius:11px;font-weight:800;color:var(--muted)}
.lg-tabs .on{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);color:var(--blue)}
.lg-row{display:flex;justify-content:flex-end;font-size:13px}.lg-row a{color:var(--blue);font-weight:700}
.lg-note{text-align:center;font-size:13px;margin:4px 0 0}
.pw{display:flex;align-items:center;gap:6px}.pw input{flex:1}
.pw .eye{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.lg-side{background:linear-gradient(160deg,#134882,#0E2440);color:#fff;border-radius:22px;padding:28px}
.lg-side h2{margin:0 0 6px;font-size:22px}.lg-side>p{color:#c9d6ea;margin:0 0 16px}
.lg-side .it{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border-radius:14px;padding:12px;margin-bottom:10px}
.lg-side .it i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;flex:none}
.lg-side .it b{display:block}.lg-side .it small{color:#c9d6ea}
.lg-side .trust{color:#c9d6ea;font-size:13px;margin-top:14px}
@media (max-width:860px){.lg-wrap{grid-template-columns:1fr}.lg-side{display:none}}
/* the section filter sticks under the sticky header, not behind it */
.filter{top:68px}
@media (max-width:767px){.filter{top:58px}}

/* sign-up (1.0.35) */
.ok-msg{background:#e7f6ef;color:#0b6b4f;border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:10px}
.lg-card .err{margin:0 0 10px;background:#fdecec;border-radius:12px;padding:10px 12px}
.code-in{font-size:22px!important;letter-spacing:6px;text-align:center}
.su-links{justify-content:space-between;margin-top:12px}
.su-links .lnk{background:none;border:0;color:var(--blue);font:inherit;font-weight:700;font-size:13px;cursor:pointer;padding:0}
.lg-note a{color:var(--blue);font-weight:700}
.lg-card .two{grid-template-columns:1fr}
.lg-side .trust{background:none;border:0;padding:0}
@media (max-width:767px){header.top a.lang.flag{display:inline-flex}}

/* sign-in code page (role8_go_live 1.0.7) */
.ch-pill{display:flex;justify-content:space-between;border-radius:14px;padding:12px 14px}
.ch-pill span{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lg-check{display:flex!important;align-items:center;gap:8px;font-weight:400!important;font-size:14px}
.lg-check input{width:18px;height:18px;accent-color:var(--orange)}
.wa-switch{margin-top:12px}
.btn.wa{background:#e7f6ef;color:#0b6b4f;border:1.5px solid #25d366;width:100%;font-weight:700}
.su-links button.lnk{background:none;border:0;color:var(--blue);font:inherit;font-weight:700;font-size:13px;cursor:pointer;padding:0}

/* cart (1.0.38) */
.ck-wrap{padding-bottom:40px}
.ck-steps{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0 18px;flex-wrap:wrap}
.ck-steps li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;color:var(--muted);font-size:14px}
.ck-steps li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:13px}
.ck-steps li.on{color:var(--ink);border-color:var(--orange)}.ck-steps li.on b{background:var(--orange);color:#fff}
.ck-steps li.done b{background:#0F8B77;color:#fff}
.ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ck-h{font-size:24px;margin:0 0 12px}
.ck-lines{display:grid;gap:10px}
.ck-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.ck-line .img{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:#fff}
.ck-line .img img,.ck-line .img svg{max-width:40px;max-height:40px}
.ck-line .img.gift{font-size:24px}
.ck-line .nm{display:grid;gap:4px;min-width:0}.ck-line .nm a,.ck-line .nm b{font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.ck-line .qty{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:4px}
.ck-line .qty span{min-width:26px;text-align:center;font-weight:800}
.q-btn{border:0;background:var(--bg);border-radius:9px;width:32px;height:32px;font-size:18px;cursor:pointer;font-family:inherit;color:var(--ink)}
.q-btn:disabled{opacity:.5}
.ck-line .tot{display:grid;justify-items:end;gap:4px;font-weight:800;white-space:nowrap}
.q-btn.rm{width:auto;height:auto;background:none;color:#B3261E;font-size:12px;font-weight:700;padding:0}
.ck-line.reward{background:#f1faf6;border-color:#bfe6d5}
.ck-sum{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;position:sticky;top:90px;display:grid;gap:12px}
.ck-sum h2{margin:0;font-size:18px}
.ck-sum .row{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.ck-sum .row.big{color:var(--ink);font-weight:800;font-size:20px;border-top:1px solid var(--line);padding-top:12px}
.promo summary{cursor:pointer;color:var(--blue);font-weight:700;font-size:14px}
.promo-f{display:flex;gap:8px;margin-top:8px}.promo-f input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}
.promo-f .btn{background:var(--bg);color:var(--ink);padding:10px 14px}
.ck-terms a{color:var(--blue);font-weight:700}
.ck-go{width:100%;box-sizing:border-box}.ck-go[aria-disabled=true]{opacity:.55}
.ck-safe{font-size:13px;text-align:center;margin:0}
.ck-empty{background:#fff;border:1px solid var(--line);border-radius:22px;padding:40px 20px;text-align:center;display:grid;gap:10px;justify-items:center;max-width:520px;margin:20px auto}
.ck-empty .ic{font-size:40px}.ck-empty h1{margin:0;font-size:24px}
@media (max-width:860px){.ck-grid{grid-template-columns:1fr}.ck-sum{position:static}}
@media (max-width:560px){.ck-line{grid-template-columns:48px minmax(0,1fr);}.ck-line .img{width:48px;height:48px}.ck-line .qty{grid-column:2;justify-self:start}.ck-line .tot{grid-column:2;justify-items:start;display:flex;gap:12px;align-items:center}}

/* speed + accessibility (1.0.40): small orange text in a darker orange (contrast 4.5:1 on white) */
.mini .p,.badge,.card .p,.price .p{color:#B5501A}
img.logo{width:auto;height:auto}

/* checkout details (1.0.41) */
.ck-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:12px}
.ck-card .ck-h{margin:0}
.ck-have a{color:var(--blue);font-weight:800}
.sup-form input.bad{border-color:#e5484d!important;background:#fff5f5}
.sup-form input[readonly]{background:var(--bg);color:var(--muted)}
.ck-sum .row.sm{font-size:14px;color:var(--ink)}.ck-sum .row.sm span:first-child{min-width:0;overflow-wrap:anywhere}
/* theme palette only (1.0.41, owner: consistent with the theme colours) */
.ok-msg{background:var(--blueSoft);color:var(--blue)}
.ck-steps li.done b{background:var(--navy2);color:#fff}
.ck-line.reward{background:var(--soft);border-color:#f6c9ad}
.btn.wa{background:var(--blueSoft);color:var(--blue);border:1.5px solid var(--line)}

/* payment page (1.0.42): Odoo's payment form without Bootstrap, in the store look */
.r8-pay .list-group,.r8-pay ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.r8-pay .list-group-item,.r8-pay li.o_outer_container{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px}
.r8-pay .list-group-item:has(input:checked),.r8-pay li.o_outer_container:has(input:checked){border-color:var(--orange);background:var(--soft)}
.r8-pay label{cursor:pointer}
.r8-pay .o_payment_option_label,.r8-pay .o_payment_option label{font-weight:800}
.r8-pay input[type=radio]{accent-color:var(--orange);width:18px;height:18px;margin-inline-end:8px;vertical-align:middle}
.r8-pay img{max-height:26px;width:auto;vertical-align:middle}
.r8-pay .d-none{display:none!important}
.r8-pay .d-flex{display:flex}.r8-pay .align-items-center{align-items:center}.r8-pay .gap-2{gap:8px}.r8-pay .flex-wrap{flex-wrap:wrap}
.r8-pay .justify-content-between{justify-content:space-between}.r8-pay .ms-auto{margin-inline-start:auto}
.r8-pay .text-muted,.r8-pay small{color:var(--muted);font-size:13px}
.r8-pay .alert{border-radius:12px;padding:10px 12px;background:var(--blueSoft);color:var(--blue);margin-top:8px}
.r8-pay .alert-warning,.r8-pay .alert-danger{background:#fdecec;color:#B3261E}
.r8-pay .collapse:not(.show){display:none}
.r8-pay h4,.r8-pay .h4,.r8-pay .h5{font-size:16px;margin:0 0 8px}
.r8-pay input:not([type=radio]):not([type=checkbox]),.r8-pay select{font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
.pay-btn button[name=o_payment_submit_button]{display:flex;width:100%;justify-content:center;border:0;border-radius:12px;padding:14px 20px;font:inherit;font-weight:800;font-size:16px;background:var(--orange);color:#fff;cursor:pointer;box-shadow:0 8px 20px -8px rgba(242,122,54,.7)}
.pay-btn button[disabled]{opacity:.55;cursor:not-allowed}
.pay-note{font-size:13px;margin:0}
.pay-bill{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;font-size:14px}
.pay-bill a{color:var(--blue);font-weight:800;margin-inline-start:auto}
#o_payment_methods > p.h4{display:none}

/* confirmation, legal, error pages (1.0.43) */
.cf-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 24px;max-width:640px;margin:24px auto;display:grid;gap:12px;justify-items:center;text-align:center}
.cf-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--soft);color:var(--orange)}
.cf-ic.ok{background:var(--navy2);color:#fff}
.cf-card h1{margin:0;font-size:24px}
.cf-pending{background:var(--blueSoft);border-radius:14px;padding:14px;text-align:start;width:100%}
.cf-next{text-align:start;display:grid;gap:6px;margin:4px 0;padding-inline-start:20px;color:var(--muted)}
.cf-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cf-acts .btn:not(.primary){background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.lgl-wrap{padding-bottom:40px}
.lgl-head{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;margin:12px 0 16px;display:grid;gap:10px}
.lgl-head h1{margin:0;font-size:28px}
.lgl-tags{display:flex;gap:8px;flex-wrap:wrap}.lgl-tags span{background:var(--soft);color:#B5501A;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px}
.lgl-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.lgl-toc{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:6px;font-size:14px}
.lgl-toc a{color:var(--ink);padding:4px 0}.lgl-toc a span{color:var(--orange);font-weight:800}
.lgl-print{background:var(--bg);color:var(--ink);margin-top:8px}
.lgl-body{display:grid;gap:12px}
.lgl-sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;scroll-margin-top:90px;line-height:1.8}
.lgl-sec h2{font-size:18px;margin:0 0 8px}.lgl-sec .n{color:var(--orange)}
.lgl-help{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--blueSoft);border-radius:18px;padding:16px}
.lgl-help .btn{background:#fff;color:var(--blue);border:1px solid var(--line)}
@media (max-width:860px){.lgl-grid{grid-template-columns:1fr}.lgl-toc{position:static}}
@media print{header.top,footer,.appbar,.lgl-toc,.lgl-help,.crumbs{display:none!important}}
/* staff-only shortcut to the Odoo back office (owner 2026-10-24) */
.lang.staff-sys{display:inline-flex;align-items:center;padding:6px 12px;color:var(--accent,#e8743b);border-color:currentColor;white-space:nowrap}
@media (max-width:767px){header.top a.lang.staff-sys{display:inline-flex}}
/* suggested products under the product page (owner 2026-10-26) */
.sugg{margin-top:24px}
.sugg h2{font-size:20px;font-weight:800;margin:0 0 12px}
.sugg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sugg-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.sugg-top{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.sugg-top .img img{width:40px;height:40px}
.sugg-top b{font-size:15px;line-height:1.4}
.sugg-price{color:var(--accent,#e8743b);font-weight:800}
.sugg-add{margin-top:auto;border:1px solid var(--accent,#e8743b);color:var(--accent,#e8743b);background:#fff;border-radius:12px;padding:8px 12px;font-weight:700;cursor:pointer}
.sugg-add:disabled{opacity:.7;cursor:default}