/* ===================================================================== TIOB template v1.0.0 – Joomla 6 · HikaShop 6 · Rewardify 2 Mobile first, RTL first (logical properties), no framework. Colours come from template params (inline :root vars), dark mode via [data-theme=dark]. HikaShop overrides read the --hk-* tokens. ===================================================================== */ :root { --tb-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --tb-pri: #4f46e5; --tb-pri-d: #4338ca; --tb-pri-l: #eef2ff; --tb-pri-m: #e0e7ff; --tb-acc: #10b981; --tb-acc-d: #059669; --tb-ink: #0f172a; --tb-txt: #1f2937; --tb-txt2: #475569; --tb-mut: #64748b; --tb-line: #e5e7eb; --tb-line2: #f1f5f9; --tb-bg: #f6f7fb; --tb-card: #fff; --tb-head: rgba(255, 255, 255, .86); --tb-bad: #dc2626; --tb-warn: #d97706; --tb-ok: #059669; --tb-info: #2563eb; --tb-r: 16px; --tb-r-sm: 10px; --tb-pill: 999px; --tb-sh: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05); --tb-sh-lg: 0 10px 40px rgba(15, 23, 42, .14); --tb-ring: 0 0 0 3px color-mix(in srgb, var(--tb-pri) 28%, transparent); --tb-ease: cubic-bezier(.2, .7, .2, 1); --tb-container: 1240px; --tb-side: 280px; --tb-gap: 24px; --tb-head-h: 64px; --tb-bnav-h: 62px; --tb-tap: 44px; color-scheme: light; } html[data-theme="dark"] { --tb-ink: #f1f5f9; --tb-txt: #e2e8f0; --tb-txt2: #cbd5e1; --tb-mut: #94a3b8; --tb-line: #273244; --tb-line2: #1c2535; --tb-bg: #0b1120; --tb-card: #111a2b; --tb-head: rgba(11, 17, 32, .86); --tb-pri-l: color-mix(in srgb, var(--tb-pri) 16%, #111a2b); --tb-pri-m: color-mix(in srgb, var(--tb-pri) 30%, #111a2b); --tb-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); --tb-sh-lg: 0 10px 40px rgba(0, 0, 0, .5); /* HikaShop tokens */ --hk-ink: #f1f5f9; --hk-txt: #e2e8f0; --hk-txt2: #cbd5e1; --hk-mut: #94a3b8; --hk-line: #273244; --hk-bg: #0b1120; --hk-card: #111a2b; --hk-pri-l: color-mix(in srgb, var(--tb-pri) 16%, #111a2b); --hk-pri-m: color-mix(in srgb, var(--tb-pri) 30%, #111a2b); --hk-pri-b: color-mix(in srgb, var(--tb-pri) 45%, #111a2b); --hk-ok-l: rgba(16, 185, 129, .14); --hk-bad-l: rgba(220, 38, 38, .14); --hk-warn-l: rgba(217, 119, 6, .14); --hk-info-l: rgba(37, 99, 235, .15); --hk-vio-l: rgba(124, 58, 237, .15); --hk-pink-l: rgba(219, 39, 119, .15); --hk-cyan-l: rgba(8, 145, 178, .15); --hk-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tb-head-h) + 12px); } body { margin: 0; font-family: var(--tb-font); font-size: 15px; line-height: 1.75; color: var(--tb-txt); background: var(--tb-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* 1.2.34: clip (not a scroll container) so focus()/scrollIntoView can never push the page sideways */ @supports (overflow: clip) { html, body { overflow-x: clip; } } body.has-bottom-nav { padding-bottom: calc(var(--tb-bnav-h) + env(safe-area-inset-bottom)); } @media (min-width: 992px) { body.has-bottom-nav { padding-bottom: 0; } } img, svg, video { max-width: 100%; height: auto; } img { border-style: none; } a { color: var(--tb-pri); text-decoration: none; transition: color .15s; } a:hover { color: var(--tb-pri-d); } html[data-theme="dark"] a:not([class]) { color: color-mix(in srgb, var(--tb-pri) 60%, #fff); } h1, h2, h3, h4, h5, h6 { color: var(--tb-ink); line-height: 1.4; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.005em; } h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); } h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); } h3 { font-size: 1.18rem; } h4 { font-size: 1.05rem; } h5, h6 { font-size: .95rem; } p { margin: 0 0 1em; } hr { border: 0; border-top: 1px solid var(--tb-line); margin: 1.5rem 0; } code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; direction: ltr; } pre { background: var(--tb-line2); padding: 14px; border-radius: var(--tb-r-sm); overflow: auto; } blockquote { margin: 1.2em 0; padding: 12px 16px; border-inline-start: 4px solid var(--tb-pri); background: var(--tb-pri-l); border-radius: var(--tb-r-sm); } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--tb-pri); outline-offset: 2px; } ::selection { background: var(--tb-pri-m); color: var(--tb-ink); } .tb-vh, .visually-hidden, .element-invisible, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .tb-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; background: var(--tb-pri); color: #fff; padding: 10px 16px; border-radius: var(--tb-r-sm); } .tb-skip:focus { top: 12px; color: #fff; } .tb-wrap { width: 100%; max-width: var(--tb-container); margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .tb-wrap { padding-inline: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* icons */ .tb-ic { flex: none; display: block; } /* ---------- buttons (+ Bootstrap compat for core layouts) ---------- */ .tb-btn, .btn, button.button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tb-tap); padding: 0 18px; border-radius: var(--tb-r-sm); border: 1px solid transparent; background: var(--tb-pri); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .tb-btn:hover, .btn:hover, .button:hover { background: var(--tb-pri-d); color: #fff; } .tb-btn:active, .btn:active { transform: translateY(1px); } .tb-btn--ghost, .btn-secondary, .btn-outline-primary, .btn-light { background: var(--tb-card); color: var(--tb-txt); border-color: var(--tb-line); } .tb-btn--ghost:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-light:hover { background: var(--tb-pri-l); color: var(--tb-pri); border-color: var(--tb-pri-m); } .btn-primary { background: var(--tb-pri); color: #fff; } .btn-success { background: var(--tb-acc); } .btn-success:hover { background: var(--tb-acc-d); } .btn-danger { background: var(--tb-bad); } .btn-danger:hover { background: #b91c1c; } .btn-link { background: none; color: var(--tb-pri); border: 0; padding-inline: 4px; } .btn-link:hover { background: none; color: var(--tb-pri-d); text-decoration: underline; } .btn-sm { min-height: 34px; padding: 0 12px; font-size: .84rem; } .btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; } .btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; } .w-100 { width: 100% !important; } /* ---------- forms ---------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea, .form-control, .form-select, .inputbox { width: 100%; max-width: 100%; min-height: var(--tb-tap); padding: 9px 14px; font: inherit; font-size: 16px; color: var(--tb-ink); background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); transition: border-color .15s, box-shadow .15s; appearance: none; } @media (min-width: 768px) { input, select, textarea, .form-control { font-size: 15px !important; } } textarea { min-height: 110px; resize: vertical; } select, .form-select { padding-inline-end: 36px; background-repeat: no-repeat; background-size: 16px; background-position: left 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html[dir="ltr"] select, html[dir="ltr"] .form-select { background-position: right 12px center; } select[multiple] { background-image: none; padding-inline-end: 14px; } input:focus, select:focus, textarea:focus, .form-control:focus { outline: none; border-color: var(--tb-pri); box-shadow: var(--tb-ring); } input[type="checkbox"], input[type="radio"] { accent-color: var(--tb-pri); width: 18px; height: 18px; vertical-align: middle; } label, .control-label, .form-label { display: inline-block; font-weight: 600; font-size: .9rem; color: var(--tb-ink); margin-bottom: 6px; } .control-group, .mb-3, .form-group { margin-bottom: 16px; } .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .form-check-label { margin: 0; font-weight: 500; } .input-group { display: flex; } .input-group > * { border-radius: 0; } .input-group > :first-child { border-start-start-radius: var(--tb-r-sm); border-end-start-radius: var(--tb-r-sm); } .input-group > :last-child { border-start-end-radius: var(--tb-r-sm); border-end-end-radius: var(--tb-r-sm); } .invalid, .form-control-danger, input.invalid { border-color: var(--tb-bad) !important; } .form-text, .small, small { font-size: .84rem; color: var(--tb-mut); } /* 1.2.46: small text is a softer shade of its own parent colour – stays readable on coloured / dark boxes */ @supports (color: color-mix(in srgb, red 50%, transparent)) { small, .small { color: color-mix(in srgb, currentColor 74%, transparent); } } .star, .required-star { color: var(--tb-bad); } fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } legend { font-weight: 800; color: var(--tb-ink); font-size: 1.05rem; margin-bottom: 12px; padding: 0; } /* Bootstrap-ish utilities used by core layouts */ .row { display: flex; flex-wrap: wrap; margin-inline: -8px; } .row > * { padding-inline: 8px; flex: 1 0 0%; min-width: 0; } .col-12 { flex: 0 0 100% !important; } @media (min-width: 768px) { .col-md-6 { flex: 0 0 50% !important; } .col-md-4 { flex: 0 0 33.333% !important; } .col-md-8 { flex: 0 0 66.666% !important; } .col-md-3 { flex: 0 0 25% !important; } .col-md-9 { flex: 0 0 75% !important; } } @media (max-width: 767.98px) { .row > [class*="col-"] { flex: 0 0 100%; } } .d-none { display: none !important; } .d-flex { display: flex !important; } .d-block { display: block !important; } .text-center { text-align: center !important; } .text-muted { color: var(--tb-mut) !important; } .float-end { float: inline-end; } .float-start { float: inline-start; } .list-unstyled { list-style: none; padding: 0; margin: 0; } .badge, .label { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--tb-pill); font-size: .75rem; font-weight: 700; background: var(--tb-pri-l); color: var(--tb-pri); } .bg-success, .badge.bg-success { background: rgba(16, 185, 129, .14) !important; color: var(--tb-ok) !important; } .bg-danger, .badge.bg-danger { background: rgba(220, 38, 38, .12) !important; color: var(--tb-bad) !important; } .bg-warning, .badge.bg-warning { background: rgba(217, 119, 6, .14) !important; color: var(--tb-warn) !important; } .card { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-sh); } .card-body { padding: 18px; } .card-header { padding: 14px 18px; border-bottom: 1px solid var(--tb-line); font-weight: 800; color: var(--tb-ink); } .table { width: 100%; background: var(--tb-card); border-radius: var(--tb-r-sm); overflow: hidden; } .table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--tb-line); text-align: start; vertical-align: middle; } .table th { font-size: .84rem; color: var(--tb-mut); font-weight: 700; background: var(--tb-line2); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .alert { padding: 12px 16px; border-radius: var(--tb-r-sm); border: 1px solid var(--tb-line); background: var(--tb-card); margin-bottom: 16px; } .alert-info { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .25); color: var(--tb-txt); } .alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); } .alert-warning { background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .3); } .alert-danger, .alert-error { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); } .nav-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tb-line); margin: 0 0 16px; padding: 0; list-style: none; overflow-x: auto; } .nav-tabs .nav-link, .nav-tabs a { display: block; padding: 10px 14px; color: var(--tb-mut); font-weight: 700; border-bottom: 2px solid transparent; white-space: nowrap; } .nav-tabs .active, .nav-tabs .nav-link.active { color: var(--tb-pri); border-bottom-color: var(--tb-pri); } /* ---------- system messages ---------- */ #system-message-container:empty { display: none; } #system-message-container { margin-bottom: 16px; } joomla-alert, #system-message-container .alert { display: flex !important; align-items: flex-start; gap: 10px; position: relative; padding: 14px 16px !important; margin: 0 0 10px !important; border-radius: var(--tb-r) !important; border: 1px solid var(--tb-line) !important; background: var(--tb-card) !important; box-shadow: var(--tb-sh); color: var(--tb-txt) !important; border-inline-start: 4px solid var(--tb-info) !important; animation: tbIn .3s var(--tb-ease); } joomla-alert[type="success"] { border-inline-start-color: var(--tb-ok) !important; } joomla-alert[type="danger"], joomla-alert[type="error"] { border-inline-start-color: var(--tb-bad) !important; } joomla-alert[type="warning"] { border-inline-start-color: var(--tb-warn) !important; } joomla-alert .alert-heading { display: none; } joomla-alert .alert-wrapper, joomla-alert .alert-message { flex: 1; } joomla-alert .joomla-alert--close, joomla-alert button[aria-label] { order: 9; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--tb-mut); cursor: pointer; padding: 0 4px; } @keyframes tbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- topbar ---------- */ .tb-topbar { background: var(--tb-ink); color: #fff; font-size: .84rem; } html[data-theme="dark"] .tb-topbar { background: var(--tb-pri-d); } .tb-topbar__in { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 38px; text-align: center; } .tb-topbar__msg, .tb-topbar a { color: #fff; } .tb-topbar a:hover { color: #fff; opacity: .85; } .tb-topbar p { margin: 0; } /* ---------- header ---------- */ .tb-header { position: relative; z-index: 60; background: var(--tb-card); border-bottom: 1px solid var(--tb-line); } .has-sticky .tb-header { position: sticky; top: 0; background: var(--tb-head); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } .tb-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, .07); } .tb-header__in { display: flex; align-items: center; gap: 10px; min-height: var(--tb-head-h); } .tb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tb-ink); flex: none; min-width: 0; } .tb-brand:hover { color: var(--tb-ink); } .tb-brand img { display: block; width: auto; max-width: 180px; object-fit: contain; } .tb-brand__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 900; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 55%, var(--tb-acc))); box-shadow: 0 6px 16px color-mix(in srgb, var(--tb-pri) 35%, transparent); } .tb-brand__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .tb-brand__name { font-weight: 900; font-size: 1.12rem; white-space: nowrap; } .tb-brand__tag { font-size: .74rem; color: var(--tb-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-iconbtn { position: relative; display: inline-grid; place-items: center; width: var(--tb-tap); height: var(--tb-tap); flex: none; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tb-txt); cursor: pointer; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; } .tb-iconbtn:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-badge { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tb-bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--tb-card); } .tb-badge.is-pop { animation: tbPop .45s var(--tb-ease); } @keyframes tbPop { 40% { transform: scale(1.35); } } .tb-actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .tb-burger { margin-inline-start: -8px; } .tb-theme .tb-ic--sun { display: none; } html[data-theme="dark"] .tb-theme .tb-ic--sun { display: block; } html[data-theme="dark"] .tb-theme .tb-ic--moon { display: none; } .tb-hide-sm { display: none; } .tb-acc { position: relative; } .tb-acc__login { min-height: 40px; padding: 0 12px; font-size: .86rem; } .tb-acc__login span { display: none; } .tb-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: var(--tb-pri); background: var(--tb-pri-l); border: 2px solid var(--tb-pri-m); } .tb-acc__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 248px; padding: 8px; z-index: 80; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-sh-lg); animation: tbIn .2s var(--tb-ease); } .tb-acc__head { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--tb-line); line-height: 1.5; } .tb-acc__head strong { color: var(--tb-ink); } .tb-acc__head span { font-size: .78rem; color: var(--tb-mut); overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: end; } .tb-acc__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--tb-r-sm); color: var(--tb-txt); font-weight: 600; font-size: .9rem; } .tb-acc__menu a .tb-ic { color: var(--tb-mut); } .tb-acc__menu a:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-acc__menu a:hover .tb-ic { color: var(--tb-pri); } .tb-acc__menu .tb-acc__out { color: var(--tb-bad); margin-top: 4px; border-top: 1px solid var(--tb-line); border-radius: 0 0 var(--tb-r-sm) var(--tb-r-sm); } .tb-acc__menu .tb-acc__out .tb-ic { color: var(--tb-bad); } @media (min-width: 576px) { .tb-acc__login span { display: inline; } .tb-hide-sm { display: inline-grid; } } /* ---------- search ---------- */ .tb-search { position: relative; display: none; flex: 1; max-width: 560px; margin-inline: 12px; } .tb-search .tb-search__in { height: 46px; min-height: 46px; padding-inline: 44px 44px; border-radius: var(--tb-pill) !important; background: var(--tb-line2) !important; border: 1px solid transparent !important; } .tb-search .tb-search__in:focus { background: var(--tb-card) !important; border-color: var(--tb-pri) !important; } .tb-search__in::-webkit-search-cancel-button { display: none; } .tb-search__ic { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); color: var(--tb-mut); pointer-events: none; } .tb-search__kbd { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--tb-mut); border: 1px solid var(--tb-line); border-radius: 6px; padding: 0 7px; background: var(--tb-card); line-height: 20px; } .tb-search__x { display: none; position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--tb-mut); cursor: pointer; place-items: center; } .tb-search.has-q .tb-search__x { display: grid; } .tb-search.has-q .tb-search__kbd, .tb-search:focus-within .tb-search__kbd { display: none; } .tb-sr { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 90; max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-sh-lg); padding: 8px; animation: tbIn .18s var(--tb-ease); } .tb-sr__h { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: .76rem; font-weight: 800; color: var(--tb-mut); } .tb-sr__h button { background: none; border: 0; color: var(--tb-pri); font: inherit; cursor: pointer; } .tb-sr__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 10px; } .tb-sr__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--tb-pill); background: var(--tb-line2); color: var(--tb-txt); font-size: .84rem; border: 0; cursor: pointer; font-family: inherit; } .tb-sr__chip:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-sr__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--tb-r-sm); color: var(--tb-txt); } .tb-sr__item:hover, .tb-sr__item[aria-selected="true"] { background: var(--tb-pri-l); color: var(--tb-ink); } .tb-sr__img { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--tb-line2); border: 1px solid var(--tb-line); } .tb-sr__ph { display: grid; place-items: center; color: var(--tb-mut); } .tb-sr__body { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.5; } .tb-sr__name { font-weight: 700; font-size: .92rem; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-sr__name mark { background: none; color: var(--tb-pri); } .tb-sr__meta { font-size: .78rem; color: var(--tb-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-sr__price { font-weight: 800; font-size: .86rem; color: var(--tb-ink); white-space: nowrap; } .tb-sr__price.is-free { color: var(--tb-ok); } .tb-sr__cat { display: inline-flex; align-items: center; gap: 6px; } .tb-sr__all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 11px; border-radius: var(--tb-r-sm); background: var(--tb-pri-l); color: var(--tb-pri); font-weight: 800; font-size: .88rem; } .tb-sr__none { padding: 26px 10px; text-align: center; color: var(--tb-mut); } .tb-sr__load { display: grid; gap: 8px; padding: 6px; } .tb-sr__sk { height: 56px; border-radius: var(--tb-r-sm); background: linear-gradient(90deg, var(--tb-line2) 25%, var(--tb-line) 50%, var(--tb-line2) 75%); background-size: 200% 100%; animation: tbSk 1.1s linear infinite; } @keyframes tbSk { to { background-position: -200% 0; } } @media (min-width: 992px) { .tb-search { display: block; } .tb-search-open { display: none; } } /* mobile search overlay */ @media (max-width: 991.98px) { .tb-search.is-open { display: block; position: fixed; inset: 0; z-index: 200; max-width: none; margin: 0; padding: 12px 12px 12px 12px; background: var(--tb-card); animation: tbIn .18s var(--tb-ease); } .tb-search.is-open .tb-search__ic { top: 35px; inset-inline-start: 27px; } .tb-search.is-open .tb-search__in { padding-inline-end: 48px !important; } .tb-search.is-open .tb-search__x { display: grid; top: 35px; inset-inline-end: 18px; } .tb-search.is-open .tb-search__kbd { display: none; } .tb-search.is-open .tb-sr { position: static; max-height: calc(100dvh - 80px); border: 0; box-shadow: none; padding: 8px 0; margin-top: 4px; } } /* ---------- main menu (core mod_menu markup) ---------- */ .tb-nav { display: none; border-top: 1px solid var(--tb-line); } @media (min-width: 992px) { .tb-nav { display: block; } } .tb-nav ul { list-style: none; margin: 0; padding: 0; } .tb-nav .mod-menu, .tb-nav > .tb-wrap > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 48px; } .tb-nav .mod-menu > li { position: relative; } .tb-nav .mod-menu > li > a, .tb-nav .mod-menu > li > span, .tb-nav .mod-menu > li > button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--tb-r-sm); color: var(--tb-txt); font-weight: 700; font-size: .9rem; background: none; border: 0; font-family: inherit; cursor: pointer; white-space: nowrap; } .tb-nav .mod-menu > li > a:hover, .tb-nav .mod-menu > li:hover > a, .tb-nav .mod-menu > li:hover > span, .tb-nav .mod-menu > li:focus-within > a { color: var(--tb-pri); background: var(--tb-pri-l); } .tb-nav .mod-menu > li.current > a, .tb-nav .mod-menu > li.active > a { color: var(--tb-pri); } .tb-nav .mod-menu > li.active > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--tb-pri); } .tb-nav .deeper > a::after, .tb-nav .deeper > span::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; margin-inline-start: 2px; } .tb-nav .mod-menu > li.active.deeper > a::after { all: unset; content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; } .tb-nav .mod-menu__sub, .tb-nav .nav-child { position: absolute; top: 100%; inset-inline-start: 0; min-width: 230px; padding: 8px; z-index: 70; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-sh-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s var(--tb-ease), visibility .18s; } .tb-nav li:hover > .mod-menu__sub, .tb-nav li:focus-within > .mod-menu__sub, .tb-nav li.is-open > .mod-menu__sub, .tb-nav li:hover > .nav-child, .tb-nav li:focus-within > .nav-child { opacity: 1; visibility: visible; transform: none; } .tb-nav .mod-menu__sub a, .tb-nav .mod-menu__sub span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--tb-r-sm); color: var(--tb-txt); font-size: .88rem; font-weight: 600; } .tb-nav .mod-menu__sub a:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-nav .mod-menu__sub .mod-menu__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 12px 0 0; min-width: 0; background: none; } .tb-nav .mod-menu__sub .deeper > a::after { display: none; } /* mega: parent with >6 children, or link class "mega" */ .tb-nav li.is-mega { position: static; } .tb-nav li.is-mega > .mod-menu__sub { inset-inline: 24px; width: auto; max-width: calc(var(--tb-container) - 48px); margin-inline: auto; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; } .tb-nav li.is-mega > .mod-menu__sub > li.deeper > a, .tb-nav li.is-mega > .mod-menu__sub > li.deeper > span { font-weight: 800; color: var(--tb-ink); } .tb-nav .mod-menu__heading, .tb-nav .mod-menu__separator { cursor: default; } .tb-nav img { width: 20px; height: 20px; object-fit: contain; } /* ---------- drawer (mobile menu) ---------- */ .tb-drawer { position: fixed; inset: 0; z-index: 300; } .tb-drawer[hidden] { display: none; } .tb-drawer__bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); animation: tbFade .2s; } .tb-drawer__panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(86vw, 360px); display: flex; flex-direction: column; background: var(--tb-card); box-shadow: var(--tb-sh-lg); overflow-y: auto; overscroll-behavior: contain; animation: tbSlide .26s var(--tb-ease); padding-bottom: env(safe-area-inset-bottom); } @keyframes tbFade { from { opacity: 0; } } @keyframes tbSlide { from { transform: translateX(100%); } } html[dir="ltr"] .tb-drawer__panel { animation-name: tbSlideL; } @keyframes tbSlideL { from { transform: translateX(-100%); } } .tb-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--tb-line); position: sticky; top: 0; background: var(--tb-card); z-index: 1; } .tb-drawer__title { font-weight: 900; color: var(--tb-ink); } .tb-drawer__user { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px; border-radius: var(--tb-r); background: var(--tb-pri-l); line-height: 1.5; } .tb-drawer__user strong { display: block; color: var(--tb-ink); } .tb-drawer__user a { font-size: .84rem; font-weight: 700; } .tb-drawer__user--guest { background: none; padding: 0; } .tb-drawer__user--guest .tb-btn { flex: 1; } .tb-drawer__nav ul { list-style: none; margin: 0; padding: 0; } .tb-drawer__nav { padding: 4px 8px; } .tb-drawer__nav li { position: relative; } .tb-drawer__nav a, .tb-drawer__nav li > span { display: flex; align-items: center; min-height: 48px; padding: 6px 12px; padding-inline-end: 48px; border-radius: var(--tb-r-sm); color: var(--tb-txt); font-weight: 700; } .tb-drawer__nav a:hover, .tb-drawer__nav .active > a { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-drawer__nav .mod-menu__sub { display: none; padding-inline-start: 12px; border-inline-start: 2px solid var(--tb-line); margin-inline-start: 14px; } .tb-drawer__nav .mod-menu__sub a { font-weight: 600; font-size: .92rem; min-height: 42px; } .tb-drawer__nav li.is-open > .mod-menu__sub { display: block; } .tb-drawer__nav .tb-sub-tg { position: absolute; top: 2px; inset-inline-end: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--tb-mut); border-radius: var(--tb-r-sm); cursor: pointer; display: grid; place-items: center; } .tb-drawer__nav .tb-sub-tg .tb-ic { transition: transform .2s; } .tb-drawer__nav li.is-open > .tb-sub-tg .tb-ic { transform: rotate(180deg); } .tb-drawer__mods { padding: 8px 16px; } .tb-drawer__club { display: flex; align-items: center; gap: 10px; margin: auto 12px 12px; padding: 14px; border-radius: var(--tb-r); color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 50%, #db2777)); } .tb-drawer__club:hover { color: #fff; } body.tb-lock { overflow: hidden; } /* ---------- breadcrumbs ---------- */ .tb-crumbs { padding-top: 14px; } .tb-crumbs ol, .tb-crumbs .breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--tb-mut); overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .tb-crumbs ol::-webkit-scrollbar { display: none; } .tb-crumbs li { display: inline-flex; align-items: center; } .tb-crumbs li + li::before { content: ""; width: 6px; height: 6px; border: solid var(--tb-mut); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); margin-inline: 8px 6px; opacity: .6; } html[dir="ltr"] .tb-crumbs li + li::before { transform: rotate(-135deg); } .tb-crumbs a { color: var(--tb-mut); } .tb-crumbs a:hover { color: var(--tb-pri); } .tb-crumbs li:last-child, .tb-crumbs .active { color: var(--tb-ink); font-weight: 700; } .tb-crumbs .mod-breadcrumbs__here, .tb-crumbs .divider, .tb-crumbs .icon-location { display: none; } /* ---------- layout ---------- */ .tb-banner { margin-bottom: 8px; } .tb-row { padding-block: 12px; } .tb-row > .tb-mod + .tb-mod { margin-top: var(--tb-gap); } .tb-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tb-gap); padding-block: 20px 40px; } .tb-main { min-width: 0; outline: none; } .tb-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 992px) { .tb-body.has-left { grid-template-columns: var(--tb-side) minmax(0, 1fr); } .tb-body.has-right { grid-template-columns: minmax(0, 1fr) var(--tb-side); } .tb-body.has-left.has-right { grid-template-columns: var(--tb-side) minmax(0, 1fr) var(--tb-side); } .tb-side { position: sticky; top: calc(var(--tb-head-h) + 60px); align-self: start; max-height: calc(100vh - var(--tb-head-h) - 80px); overflow-y: auto; scrollbar-width: thin; } .tb-body.has-left .tb-side--left { order: -1; } } @media (max-width: 991.98px) { .tb-side--left { order: 2; } } .is-home .tb-body { padding-top: 8px; } .tb-main-top, .tb-main-bottom { display: grid; gap: 16px; } .tb-main-top { margin-bottom: 20px; } .tb-main-bottom { margin-top: 24px; } /* module chrome */ .tb-mod { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); padding: 16px; box-shadow: var(--tb-sh); } .tb-mod.tb-plain { background: none; border: 0; box-shadow: none; padding: 0; } .tb-mod.tb-soft { background: var(--tb-pri-l); border-color: transparent; box-shadow: none; } .tb-mod__title { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--tb-line); } .tb-mod__title::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--tb-pri); } .tb-mod ul.mod-menu, .tb-mod ul.menu, .tb-side ul.mod-list { list-style: none; margin: 0; padding: 0; } .tb-side .tb-mod ul.mod-menu a, .tb-side .tb-mod ul.mod-list a { display: flex; padding: 8px 10px; border-radius: var(--tb-r-sm); color: var(--tb-txt); font-weight: 600; font-size: .9rem; } .tb-side .tb-mod ul.mod-menu a:hover, .tb-side .tb-mod .active > a { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-side .mod-menu__sub { list-style: none; padding-inline-start: 12px; margin: 0; } /* ---------- content (com_content & co.) ---------- */ .tb-main .page-header h1, .tb-main .page-header h2, .tb-main > .item-page h1 { margin-bottom: .5em; } .item-page, .blog, .com-content-category, .com-users, .contact, .search, .com-finder, .com-tags { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); padding: clamp(16px, 3vw, 32px); box-shadow: var(--tb-sh); } .item-page img, .blog img { border-radius: var(--tb-r-sm); } .article-info, .article-info-term { font-size: .82rem; color: var(--tb-mut); display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; } .article-info dd { margin: 0; } .blog-items { display: grid; gap: 20px; } @media (min-width: 768px) { .blog-items.columns-2 { grid-template-columns: repeat(2, 1fr); } .blog-items.columns-3 { grid-template-columns: repeat(3, 1fr); } } .blog-item { border-bottom: 1px solid var(--tb-line); padding-bottom: 20px; } .readmore a, .readmore .btn { margin-top: 8px; } .tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; } .tags a { padding: 4px 12px; border-radius: var(--tb-pill); background: var(--tb-line2); color: var(--tb-txt); font-size: .82rem; } .com-users { max-width: 520px; margin-inline: auto; } .com-users .btn-primary, .com-users button[type="submit"] { width: 100%; } .com-users-login__options, .com-users-login .list-group { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; font-size: .88rem; } .com-users-login__options a, .com-users-login .list-group-item { color: var(--tb-mut); } .password-group .input-group .btn { min-height: var(--tb-tap); background: var(--tb-line2); color: var(--tb-txt); border: 1px solid var(--tb-line); } /* pagination (core + HikaShop) */ .pagination, ul.pagination, .pagination-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 24px 0 0; } .pagination .page-link, .pagination a, .pagination span.page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--tb-r-sm); background: var(--tb-card); border: 1px solid var(--tb-line); color: var(--tb-txt); font-weight: 700; font-size: .88rem; } .pagination .active .page-link, .pagination .active span { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; } .pagination .disabled .page-link { opacity: .45; } .counter, .pagination__counter { text-align: center; color: var(--tb-mut); font-size: .84rem; margin-top: 10px; } /* ---------- HikaShop / Rewardify glue ---------- */ #hikashop_main, .hikashop_main, #hikashop_category_information_menu, .rw-app { --hk-font: var(--tb-font); } .tb-main [id^="hikashop_"] input:not([type="checkbox"]):not([type="radio"]) { font-family: inherit; } html[data-theme="dark"] #hikashop_main img[src$=".png"] { background: transparent; } html[data-theme="dark"] .hikashop_product_page, html[data-theme="dark"] .hikashop_checkout_page { color: var(--tb-txt); } /* HikaShop default stylesheet uses light greys for some boxes – follow the theme */ html[data-theme="dark"] .hikashop_listing_comment, html[data-theme="dark"] .hikashop_subcontainer, html[data-theme="dark"] .hikashop_checkout_cart, html[data-theme="dark"] .hika_show_cart { background: var(--tb-card) !important; color: var(--tb-txt); border-color: var(--tb-line) !important; } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03); } html[data-theme="dark"] .hikashop_cpanel_main_interface, html[data-theme="dark"] .hikashop_order_listing { color: var(--tb-txt); } /* ---------- footer ---------- */ .tb-footer { margin-top: auto; background: var(--tb-card); border-top: 1px solid var(--tb-line); padding-top: 40px; font-size: .9rem; } .tb-footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 640px) { .tb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-footer__about { grid-column: 1 / -1; } } @media (min-width: 992px) { .tb-footer__grid.tb-cols-2 { grid-template-columns: 1.4fr 1fr; } .tb-footer__grid.tb-cols-3 { grid-template-columns: 1.4fr 1fr 1fr; } .tb-footer__grid.tb-cols-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .tb-footer__grid.tb-cols-5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } .tb-footer__about { grid-column: auto; } } .tb-brand--foot { margin-bottom: 12px; } .tb-footer__txt { color: var(--tb-txt2); max-width: 46ch; } .tb-contact { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; } .tb-contact li { display: flex; align-items: center; gap: 8px; color: var(--tb-txt2); } .tb-contact .tb-ic { color: var(--tb-pri); } .tb-contact a { color: var(--tb-txt2); } .tb-contact a:hover { color: var(--tb-pri); } .tb-social { display: flex; gap: 8px; flex-wrap: wrap; } .tb-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tb-line2); color: var(--tb-txt2); transition: background .15s, color .15s, transform .15s; } .tb-social a:hover { background: var(--tb-pri); color: #fff; transform: translateY(-2px); } .tb-footer .tb-mod { background: none; border: 0; box-shadow: none; padding: 0; } .tb-footer .tb-mod__title { border: 0; padding: 0; font-size: .98rem; } .tb-footer .tb-mod__title::before { display: none; } .tb-footer ul.mod-menu, .tb-footer ul.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .tb-footer ul.mod-menu a, .tb-footer ul.mod-list a { color: var(--tb-txt2); display: inline-block; padding: 3px 0; } .tb-footer ul.mod-menu a:hover { color: var(--tb-pri); } .tb-footer__trust { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 28px; } .tb-footer__trust img { max-height: 90px; width: auto; background: #fff; border-radius: var(--tb-r-sm); padding: 6px; } .tb-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--tb-line); font-size: .82rem; color: var(--tb-mut); } @media (max-width: 639.98px) { .tb-footer__bar { justify-content: center; text-align: center; } } /* ---------- bottom nav (mobile) ---------- */ .tb-bnav { position: fixed; inset-inline: 0; bottom: 0; z-index: 100; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--tb-bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--tb-head); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--tb-line); box-shadow: 0 -6px 24px rgba(15, 23, 42, .06); } .tb-bnav > a, .tb-bnav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; padding: 0; color: var(--tb-mut); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; } .tb-bnav > .is-on { color: var(--tb-pri); } .tb-bnav > .is-on::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tb-pri); } .tb-bnav__ic { position: relative; display: block; } .tb-bnav .tb-badge { top: -6px; inset-inline-end: -10px; } @media (min-width: 992px) { .tb-bnav { display: none; } } /* back to top */ .tb-top { position: fixed; inset-inline-end: 16px; bottom: calc(var(--tb-bnav-h) + 16px + env(safe-area-inset-bottom)); z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tb-line); background: var(--tb-card); color: var(--tb-pri); display: grid; place-items: center; cursor: pointer; box-shadow: var(--tb-sh-lg); transition: opacity .2s, transform .2s; } .tb-top[hidden] { display: none; } @media (min-width: 992px) { .tb-top { bottom: 24px; } } /* ---------- error / offline ---------- */ .tb-error { display: grid; place-items: center; text-align: center; padding: clamp(40px, 8vw, 96px) 16px; } .tb-error__code { font-size: clamp(5rem, 18vw, 9rem); font-weight: 900; line-height: 1; margin: 0; background: linear-gradient(135deg, var(--tb-pri), var(--tb-acc)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tb-error__msg { font-size: 1.15rem; color: var(--tb-ink); font-weight: 800; margin: 12px 0 6px; } .tb-error__hint { color: var(--tb-mut); max-width: 46ch; margin: 0 auto 22px; } .tb-error__search { display: flex; gap: 8px; width: min(100%, 460px); margin: 0 auto 18px; } .tb-error__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tb-error details { margin-top: 28px; text-align: start; max-width: 100%; font-size: .8rem; color: var(--tb-mut); } .tb-offline { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .tb-offline__card { width: min(100%, 440px); background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); box-shadow: var(--tb-sh-lg); padding: 32px 24px; text-align: center; } .tb-offline__card form { text-align: start; margin-top: 20px; } /* component.php (print / modal) */ .tb-component { background: var(--tb-card); padding: 16px; display: block; } /* print */ @media print { .tb-header, .tb-footer, .tb-bnav, .tb-top, .tb-side, .tb-topbar, .tb-crumbs { display: none !important; } body { background: #fff; padding: 0 !important; } .tb-body { display: block; padding: 0; } } /* ---------- small phones: keep the header to the essentials ---------- */ .tb-drawer__head .tb-theme { margin-inline-start: auto; } @media (max-width: 575.98px) { .tb-header__in > .tb-actions > .tb-theme { display: none; } .has-bottom-nav .tb-header .tb-search-open { display: none; } .tb-brand__tag { display: none; } .tb-brand__mark { width: 36px; height: 36px; font-size: 1.05rem; } .tb-brand img { max-width: 140px; } .tb-header__in { gap: 6px; } } @media (min-width: 576px) { .tb-drawer__head .tb-theme { display: none; } } @media (min-width: 992px) { .tb-burger { display: none; } } .tb-search .tb-search__in { text-align: start; direction: inherit; } /* the blurred sticky header would trap the fixed search overlay – drop it while searching */ body.tb-search-on .tb-header { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 400; } /* dark mode – HikaShop card details that sit on images */ html[data-theme="dark"] article.tiob-card .tiob-rating { background: rgba(17, 26, 43, .88); color: var(--tb-txt); } html[data-theme="dark"] article.tiob-card .tiob-badge-out { background: #334155; } /* ===================================================================== TIOB Digital 1.1 – built-in home page (.tbx-*), auto menu, auto footer ===================================================================== */ .tb-main--home { display: block; padding: 0 0 8px; } .tb-main--home > .tb-wrap:first-child:empty { display: none; } .tbx-home { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px); padding-bottom: 24px; } .tbx-btn-lg { min-height: 50px; padding-inline: 22px; font-size: 1rem; border-radius: 14px; gap: 8px; } .tbx-btn-light { background: #fff !important; color: var(--tb-pri-d) !important; border-color: #fff !important; } /* hero */ .tbx-hero { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 72px) 0 0; isolation: isolate; background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--tb-pri) 22%, transparent), transparent 70%), radial-gradient(700px 380px at 0% 110%, color-mix(in srgb, var(--tb-acc) 18%, transparent), transparent 70%), var(--tb-card); border-bottom: 1px solid var(--tb-line); } .tbx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(var(--tb-line) 1px, transparent 1px), linear-gradient(90deg, var(--tb-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); } .tbx-hero__in { display: grid; gap: 32px; align-items: center; } @media (min-width: 992px) { .tbx-hero__in { grid-template-columns: 1.15fr .85fr; } } .tbx-hero__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--tb-pill); background: var(--tb-pri-l); color: var(--tb-pri); font-weight: 700; font-size: .82rem; border: 1px solid var(--tb-pri-m); } .tbx-hero__title { font-size: clamp(1.6rem, 4.6vw, 2.9rem); line-height: 1.35; margin: 14px 0 12px; letter-spacing: -.01em; } .tbx-hero__lead { color: var(--tb-txt2); font-size: clamp(.95rem, 1.6vw, 1.1rem); margin: 0 0 22px; max-width: 60ch; } .tbx-hero__search { display: flex; align-items: center; gap: 8px; background: var(--tb-card); border: 1.5px solid var(--tb-line); border-radius: 18px; padding: 6px 6px 6px 6px; padding-inline-start: 14px; box-shadow: var(--tb-sh-lg); max-width: 620px; transition: border-color .2s, box-shadow .2s; } .tbx-hero__search:focus-within { border-color: var(--tb-pri); box-shadow: var(--tb-sh-lg), var(--tb-ring); } .tbx-hero__search > svg { color: var(--tb-mut); flex: none; } .tbx-hero__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 1rem; color: var(--tb-ink); height: 46px; } .tbx-hero__search .tb-btn { min-height: 46px; border-radius: 13px; padding-inline: 20px; } .tbx-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: .84rem; color: var(--tb-mut); } .tbx-hero__tags a { padding: 3px 11px; border-radius: var(--tb-pill); background: var(--tb-line2); color: var(--tb-txt2); font-weight: 600; } .tbx-hero__tags a:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tbx-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .tbx-hero__art { display: none; justify-content: center; } @media (min-width: 992px) { .tbx-hero__art { display: flex; } } .tbx-hero__art img { max-height: 380px; width: auto; filter: drop-shadow(0 30px 40px rgba(15, 23, 42, .18)); } .tbx-orb { position: relative; width: 340px; height: 340px; display: grid; place-items: center; } .tbx-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--tb-pri) 35%, transparent); animation: tbx-spin 40s linear infinite; } .tbx-orb__ring--2 { inset: 48px; border-style: solid; border-color: var(--tb-line); animation-duration: 60s; animation-direction: reverse; } .tbx-orb__core { width: 150px; height: 150px; border-radius: 40px; display: grid; place-items: center; color: #fff; transform: rotate(-8deg); background: linear-gradient(135deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 55%, var(--tb-acc))); box-shadow: 0 30px 60px color-mix(in srgb, var(--tb-pri) 35%, transparent); } .tbx-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 14px; background: var(--tb-card); box-shadow: var(--tb-sh-lg); font-weight: 700; font-size: .86rem; color: var(--tb-ink); border: 1px solid var(--tb-line); animation: tbx-float 6s ease-in-out infinite; } .tbx-chip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; font-size: .8rem; } .tbx-chip--j { top: 34px; inset-inline-start: -6px; } .tbx-chip--j b { background: #1a3867; } .tbx-chip--w { bottom: 46px; inset-inline-end: -14px; animation-delay: -2s; } .tbx-chip--w b { background: #21759b; } .tbx-chip--u { bottom: 6px; inset-inline-start: 40px; animation-delay: -4s; color: var(--tb-acc-d); } @keyframes tbx-spin { to { transform: rotate(360deg); } } @keyframes tbx-float { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .tbx-orb__ring, .tbx-chip { animation: none; } } .tbx-stats { list-style: none; margin: 32px 0 0; padding: 14px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; border-top: 1px solid var(--tb-line); } @media (min-width: 768px) { .tbx-stats { grid-template-columns: repeat(4, 1fr); padding: 18px 0; } } .tbx-stats li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 4px; } .tbx-stats svg { grid-row: span 2; color: var(--tb-pri); width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tb-pri-l); } .tbx-stats strong { font-size: 1.2rem; color: var(--tb-ink); line-height: 1.2; } .tbx-stats span { font-size: .8rem; color: var(--tb-mut); } /* sections */ .tbx-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .tbx-sec__head h2 { font-size: clamp(1.1rem, 2.4vw, 1.45rem); margin: 0; } .tbx-sec__head p { margin: 4px 0 0; color: var(--tb-mut); font-size: .9rem; } .tbx-sec__t { display: flex; align-items: center; gap: 10px; } .tbx-sec__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--tb-pri-l); color: var(--tb-pri); flex: none; } .tbx-sec__tools { display: flex; align-items: center; gap: 6px; } .tbx-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .88rem; white-space: nowrap; padding: 6px 10px; border-radius: var(--tb-pill); } .tbx-more:hover { background: var(--tb-pri-l); } .tbx-arrow { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tb-line); background: var(--tb-card); color: var(--tb-txt); cursor: pointer; place-items: center; } .tbx-arrow:hover { border-color: var(--tb-pri); color: var(--tb-pri); } @media (min-width: 768px) { .tbx-arrow { display: grid; } } /* categories */ .tbx-cats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .tbx-cats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .tbx-cats { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .tbx-cats { grid-template-columns: repeat(6, 1fr); } } .tbx-cat { --c: var(--tb-pri); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 10px; border-radius: var(--tb-r); background: var(--tb-card); border: 1px solid var(--tb-line); color: var(--tb-ink); transition: transform .2s var(--tb-ease), box-shadow .2s, border-color .2s; } .tbx-cat:nth-child(6n+2) { --c: #0891b2; } .tbx-cat:nth-child(6n+3) { --c: #db2777; } .tbx-cat:nth-child(6n+4) { --c: #d97706; } .tbx-cat:nth-child(6n+5) { --c: #059669; } .tbx-cat:nth-child(6n+6) { --c: #7c3aed; } .tbx-cat:hover { transform: translateY(-3px); box-shadow: var(--tb-sh-lg); border-color: color-mix(in srgb, var(--c) 40%, var(--tb-line)); color: var(--tb-ink); } .tbx-cat__ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); overflow: hidden; } .tbx-cat__ic img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .tbx-cat__txt { display: flex; flex-direction: column; line-height: 1.5; } .tbx-cat__txt strong { font-size: .93rem; } .tbx-cat__txt small { color: var(--tb-mut); font-size: .76rem; } .tbx-cats--chips { display: flex; flex-wrap: wrap; gap: 8px; } .tbx-cats--chips .tbx-cat { flex-direction: row; padding: 6px 14px 6px 8px; border-radius: var(--tb-pill); gap: 8px; text-align: start; } .tbx-cats--chips .tbx-cat__ic { width: 34px; height: 34px; border-radius: 50%; } .tbx-cats--chips .tbx-cat__ic svg { width: 18px; height: 18px; } /* product rail */ .tbx-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 14px; margin: -4px -2px 0; overscroll-behavior-x: contain; } .tbx-rail::-webkit-scrollbar { display: none; } @media (min-width: 640px) { .tbx-rail { grid-auto-columns: calc((100% - 28px) / 3); } } @media (min-width: 992px) { .tbx-rail { grid-auto-columns: calc((100% - 42px) / 4); } } @media (min-width: 1200px) { .tbx-rail { grid-auto-columns: calc((100% - 56px) / 5); } } .tbx-rail > * { scroll-snap-align: start; } .tbx-card { display: flex; flex-direction: column; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); overflow: hidden; transition: transform .2s var(--tb-ease), box-shadow .2s, border-color .2s; min-width: 0; } .tbx-card:hover { transform: translateY(-3px); box-shadow: var(--tb-sh-lg); border-color: var(--tb-pri-m); } .tbx-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--tb-line2), var(--tb-card)); overflow: hidden; } .tbx-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .35s var(--tb-ease); } .tbx-card:hover .tbx-card__media img { transform: scale(1.04); } .tbx-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tb-mut); opacity: .5; } .tbx-card__badges { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 4px; } .tbx-badge { padding: 2px 9px; border-radius: var(--tb-pill); font-size: .72rem; font-weight: 800; color: #fff; background: var(--tb-pri); line-height: 1.7; } .tbx-badge--free { background: var(--tb-ok); } .tbx-badge--new { background: #7c3aed; } .tbx-badge--upd { background: #0891b2; } .tbx-badge--off { background: var(--tb-bad); } .tbx-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; } .tbx-card__cat { font-size: .74rem; color: var(--tb-mut); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbx-card__name { margin: 0; font-size: .95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; } .tbx-card__name a { color: var(--tb-ink); } .tbx-card__name a:hover { color: var(--tb-pri); } .tbx-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .76rem; color: var(--tb-mut); } .tbx-ver { padding: 1px 8px; border-radius: 6px; background: var(--tb-pri-l); color: var(--tb-pri); font-weight: 700; font-family: ui-monospace, monospace; font-size: .74rem; } .tbx-rate, .tbx-sales { display: inline-flex; align-items: center; gap: 4px; } .tbx-stars { position: relative; display: inline-block; width: 70px; height: 14px; background: linear-gradient(90deg, #f59e0b var(--v), var(--tb-line) var(--v)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9.9-5 4.8 1.2 6.9L12 17.6 5.9 20.9 7.1 14l-5-4.8 6.9-.9z'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9.9-5 4.8 1.2 6.9L12 17.6 5.9 20.9 7.1 14l-5-4.8 6.9-.9z'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x; } [dir="rtl"] .tbx-stars { transform: scaleX(-1); } .tbx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--tb-line); } .tbx-price { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .tbx-price strong { color: var(--tb-ink); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbx-price del { color: var(--tb-mut); font-size: .76rem; } .tbx-price__free { color: var(--tb-ok) !important; } .tbx-cartbtn { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tb-pri-l); color: var(--tb-pri); transition: background .15s, color .15s, transform .15s; } .tbx-cartbtn:hover { background: var(--tb-pri); color: #fff; transform: scale(1.06); } /* features */ .tbx-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .tbx-feats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .tbx-feats { grid-template-columns: repeat(4, 1fr); } } .tbx-feat { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--tb-r); background: var(--tb-card); border: 1px solid var(--tb-line); } .tbx-feat__ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 50%, var(--tb-acc))); box-shadow: 0 10px 20px color-mix(in srgb, var(--tb-pri) 25%, transparent); } .tbx-feat strong { display: block; color: var(--tb-ink); font-size: .98rem; margin-bottom: 2px; } .tbx-feat p { margin: 0; color: var(--tb-mut); font-size: .86rem; line-height: 1.7; } /* bands */ .tbx-band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: clamp(20px, 4vw, 34px); border-radius: calc(var(--tb-r) + 6px); color: #fff; background: linear-gradient(120deg, var(--tb-pri-d), var(--tb-pri) 55%, color-mix(in srgb, var(--tb-pri) 50%, var(--tb-acc))); } .tbx-band::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; inset-inline-end: -80px; top: -140px; background: rgba(255, 255, 255, .09); pointer-events: none; } .tbx-band--cta { background: linear-gradient(120deg, #0f172a, #1e293b 60%, color-mix(in srgb, var(--tb-pri) 50%, #1e293b)); } .tbx-band__ic { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); } .tbx-band__txt { flex: 1 1 260px; position: relative; z-index: 1; } .tbx-band h2 { color: #fff; margin: 0 0 4px; font-size: clamp(1.1rem, 2.4vw, 1.4rem); } .tbx-band p { margin: 0; opacity: .88; } .tbx-band .tb-btn { position: relative; z-index: 1; } /* posts */ .tbx-posts { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 768px) { .tbx-posts { grid-template-columns: repeat(3, 1fr); } } .tbx-post { display: flex; flex-direction: column; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); overflow: hidden; } .tbx-post__img { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--tb-line2); color: var(--tb-mut); } .tbx-post__img img { width: 100%; height: 100%; object-fit: cover; } .tbx-post__body { padding: 14px 16px 16px; } .tbx-post time { display: inline-flex; align-items: center; gap: 4px; color: var(--tb-mut); font-size: .76rem; } .tbx-post h3 { font-size: 1rem; margin: 6px 0; } .tbx-post h3 a { color: var(--tb-ink); } .tbx-post p { margin: 0; color: var(--tb-txt2); font-size: .88rem; } /* auto menu extras */ .tb-nav .tb-mcount { margin-inline-start: auto; font-size: .72rem; color: var(--tb-mut); } .tb-nav .tb-automenu > li.mega > a, .tb-nav .tb-automenu > li.mega > span { background: var(--tb-pri); color: #fff !important; border-radius: 10px; } .tb-nav .tb-automenu > li.mega > a:hover, .tb-nav .tb-automenu > li.mega:hover > span { background: var(--tb-pri-d); } .tb-nav .tb-automenu > li.mega > a::after, .tb-nav .tb-automenu > li.mega > span::after { border-color: #fff !important; opacity: .9; } .tb-nav .tb-automenu > li.mega.active > a::after { all: unset; } .tb-footer__col .tb-mod__title { font-size: 1rem; margin-bottom: 10px; } .tb-nav .mod-menu__label, .tb-drawer__nav .mod-menu__label { padding: 0 !important; display: inline !important; background: none !important; } .tb-nav li.is-mega > .mod-menu__sub > li { break-inside: avoid; } .tb-nav li.is-mega > .mod-menu__sub .mod-menu__sub a { font-weight: 500; font-size: .84rem; padding-block: 5px; color: var(--tb-txt2); } .tbx-card .tbx-card__name a { color: var(--tb-ink); } .tbx-card .tbx-card__name a:hover { color: var(--tb-pri); } /* ===== 1.2: offcanvas / modal panels ===== */ .tb-oc { position: fixed; inset: 0; z-index: 1200; } .tb-oc__bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); opacity: 0; transition: opacity .22s; backdrop-filter: blur(2px); } .tb-oc__panel { position: absolute; display: flex; flex-direction: column; background: var(--tb-card); color: var(--tb-txt); box-shadow: 0 20px 60px rgba(15, 23, 42, .3); outline: 0; transition: transform .25s var(--tb-ease), opacity .22s; } .tb-oc--side .tb-oc__panel { top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 92vw); transform: translateX(100%); } [dir="rtl"] .tb-oc--side .tb-oc__panel { transform: translateX(-100%); } .tb-oc--modal .tb-oc__panel { top: 50%; left: 50%; width: min(460px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 40px)); border-radius: calc(var(--tb-r) + 4px); transform: translate(-50%, -46%); opacity: 0; } .tb-oc.is-open .tb-oc__bg { opacity: 1; } .tb-oc--side.is-open .tb-oc__panel { transform: none !important; } .tb-oc--modal.is-open .tb-oc__panel { transform: translate(-50%, -50%); opacity: 1; } .tb-oc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--tb-line); } .tb-oc__title { font-size: 1.05rem; color: var(--tb-ink); } .tb-oc__pane { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .tb-oc__pane[hidden] { display: none; } .tb-oc__pane.is-loading .tb-oc__list { opacity: .5; pointer-events: none; } .tb-oc__pane.is-loading .tb-oc__list:empty { min-height: 160px; background: linear-gradient(90deg, var(--tb-line2) 25%, var(--tb-line) 50%, var(--tb-line2) 75%) 0 0 / 200% 100%; animation: tbx-sk 1.2s linear infinite; margin: 16px; border-radius: var(--tb-r); opacity: 1; } @keyframes tbx-sk { to { background-position: -200% 0; } } .tb-oc__list { flex: 1; padding: 6px 16px; } .tb-oc__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--tb-line); transition: opacity .2s; } .tb-oc__item.is-busy { opacity: .4; pointer-events: none; } .tb-oc__img { flex: none; width: 58px; height: 58px; border-radius: 12px; background: var(--tb-line2); overflow: hidden; display: block; } .tb-oc__img img { width: 100%; height: 100%; object-fit: contain; } .tb-oc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tb-oc__info a { color: var(--tb-ink); font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-oc__info span { color: var(--tb-mut); font-size: .84rem; } .tb-oc__rm { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--tb-mut); cursor: pointer; display: grid; place-items: center; } .tb-oc__rm:hover { background: color-mix(in srgb, var(--tb-bad) 12%, transparent); color: var(--tb-bad); } .tb-oc__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 20px; color: var(--tb-mut); } .tb-oc__empty[hidden], .tb-oc__foot[hidden] { display: none; } .tb-oc__empty svg { opacity: .5; } .tb-oc__foot { position: sticky; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tb-line); background: var(--tb-card); display: grid; gap: 10px; } .tb-oc__total { display: flex; justify-content: space-between; align-items: center; } .tb-oc__total strong { color: var(--tb-ink); font-size: 1.05rem; } .tb-oc__go { width: 100%; justify-content: center; min-height: 48px; } .tb-oc__user { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--tb-line); } .tb-oc__user div { display: flex; flex-direction: column; min-width: 0; } .tb-oc__user strong { color: var(--tb-ink); } .tb-oc__user span { color: var(--tb-mut); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; } .tb-avatar--lg { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; } .tb-oc__menu { display: flex; flex-direction: column; padding: 8px; } .tb-oc__menu a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--tb-txt); font-weight: 600; } .tb-oc__menu a:hover { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-oc__menu svg { color: var(--tb-mut); } .tb-oc__menu .tb-oc__out { color: var(--tb-bad); margin-top: 6px; border-top: 1px solid var(--tb-line); border-radius: 0 0 12px 12px; } /* login form */ .tb-login { display: grid; gap: 14px; padding: 18px 16px 8px; } .tb-field { display: grid; gap: 6px; } .tb-field span { font-weight: 700; font-size: .86rem; color: var(--tb-ink); } .tb-field input, .tb-login input[type=text], .tb-login input[type=password] { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--tb-line); background: var(--tb-bg); color: var(--tb-ink); font: inherit; outline: 0; transition: border-color .15s, box-shadow .15s; } .tb-field input:focus { border-color: var(--tb-pri); box-shadow: var(--tb-ring); } .tb-login__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; } .tb-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .tb-check input { width: 18px; height: 18px; accent-color: var(--tb-pri); } .tb-btn--block { width: 100%; justify-content: center; min-height: 48px; } .tb-login__alt { display: grid; gap: 8px; padding: 10px 16px 18px; text-align: center; color: var(--tb-mut); font-size: .86rem; } .tb-login__extra { padding: 0 16px 16px; } /* toast */ .tb-toast { position: fixed; z-index: 1300; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: #0f172a; color: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--tb-sh-lg); animation: tbx-toast .25s var(--tb-ease); max-width: calc(100vw - 32px); } .tb-toast.is-bad { background: var(--tb-bad); } @media (min-width: 992px) { .tb-toast { bottom: 28px; } } @keyframes tbx-toast { from { opacity: 0; transform: translate(-50%, 10px); } } .is-busy { opacity: .55; pointer-events: none; } .tbx-cartbtn.is-busy svg { animation: tbx-pulse .8s ease-in-out infinite; } @keyframes tbx-pulse { 50% { transform: scale(.8); } } /* ===== search page ===== */ .tbx-search__head { padding: 8px 0 18px; } .tbx-search__head h1 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0 0 4px; } .tbx-search__head p { color: var(--tb-mut); margin: 0 0 14px; } .tbx-search__form { box-shadow: var(--tb-sh); } .tbx-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .tbx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .tbx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .has-left.has-right .tbx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 420px) { .tbx-grid .tbx-card__body { padding: 10px; } .tbx-grid .tbx-card__name { font-size: .86rem; } } .tbx-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 8px; } .tbx-pager a, .tbx-pager span { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--tb-line); background: var(--tb-card); color: var(--tb-txt); font-weight: 700; padding: 0 10px; } .tbx-pager span { border: 0; background: none; } .tbx-pager a.is-on { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; } .tbx-empty { text-align: center; padding: 48px 16px; color: var(--tb-mut); } .tbx-empty svg { opacity: .4; } /* ===== 1.2: Joomla users pages (login, register, reset, remind, profile) ===== */ .tb-users-title { max-width: 480px; margin: 8px auto 14px; font-size: clamp(1.25rem, 3vw, 1.6rem); text-align: center; } .no-own-item.com_users .page-header { display: none; } .com-users-login, .com-users-registration, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-logout, .com-users-methods, .com-users-captive { max-width: 480px; margin: 0 auto 24px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: calc(var(--tb-r) + 4px); padding: clamp(18px, 4vw, 30px); box-shadow: var(--tb-sh); } .com-users-registration, .com-users-profile { max-width: 640px; } [class^="com-users-"] .well, [class^="com-users-"] fieldset { border: 0; padding: 0; margin: 0 0 8px; background: none; min-width: 0; } [class^="com-users-"] legend { font-size: 1rem; font-weight: 800; color: var(--tb-ink); margin-bottom: 12px; padding: 0; } [class^="com-users-"] .control-group { display: grid; gap: 6px; margin-bottom: 16px; } [class^="com-users-"] .control-label label, [class^="com-users-"] .form-label { font-weight: 700; font-size: .88rem; color: var(--tb-ink); } [class^="com-users-"] .star { color: var(--tb-bad); } [class^="com-users-"] .form-control { width: 100%; height: 48px; border-radius: 12px; } [class^="com-users-"] .controls { min-width: 0; } .password-group .input-group { display: flex; align-items: stretch; width: 100%; } .password-group .input-group .form-control { flex: 1; min-width: 0; border-radius: 0 12px 12px 0; } [dir="ltr"] .password-group .input-group .form-control { border-radius: 12px 0 0 12px; } .password-group .input-group .input-password-toggle, .password-group .input-group .btn { flex: none; width: 50px; min-height: 48px; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--tb-line); border-inline-start: 0; background: var(--tb-line2); color: var(--tb-mut); border-radius: 12px 0 0 12px; cursor: pointer; } [dir="ltr"] .password-group .input-group .btn { border-radius: 0 12px 12px 0; } .password-group .input-group .btn:hover { color: var(--tb-pri); } .icon-eye, .icon-eye-slash, .icon-fw[class*="icon-eye"] { display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-eye-slash { opacity: .6; } [class^="com-users-"] .form-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; } [class^="com-users-"] .form-check-input { width: 18px; height: 18px; accent-color: var(--tb-pri); margin: 0; } [class^="com-users-"] .btn-primary, [class^="com-users-"] button[type="submit"] { width: 100%; min-height: 50px; border-radius: 12px; font-size: 1rem; justify-content: center; } [class^="com-users-"] .list-group { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--tb-line); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .86rem; } [class^="com-users-"] .list-group-item { color: var(--tb-mut); border: 0; padding: 0; background: none; } [class^="com-users-"] .list-group-item:hover { color: var(--tb-pri); } [class^="com-users-"] .form-text, [class^="com-users-"] small { color: var(--tb-mut); font-size: .8rem; } .com-users-login__submit .btn + .btn, .com-users-login .plg_system_webauthn_login_button { margin-top: 8px; width: 100%; } [class^="com-users-"] joomla-field-fancy-select, [class^="com-users-"] select { width: 100%; } /* ===== 1.2.1: Joomla front-end editing (module / menu edit buttons) ===== */ .jmoddiv, .jmenuedit { position: relative; } [role="tooltip"]:not(.show) { display: none; } .jmodedit, a.jmodedit { position: absolute; z-index: 30; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: var(--tb-pri); color: #fff !important; opacity: 0; transition: opacity .15s; box-shadow: var(--tb-sh); } .jmoddiv:hover > .jmodedit, .jmodedit:focus { opacity: 1; } .jmodedit .icon-edit, .jmodedit [class*="icon-"] { display: inline-block; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM14 6l4 4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM14 6l4 4'/%3E%3C/svg%3E") center/contain no-repeat; } .jmodedit + [role="tooltip"], .jmoddiv [role="tooltip"] { position: absolute; z-index: 31; top: 38px; inset-inline-end: 4px; padding: 8px 10px; border-radius: 10px; background: #0f172a; color: #fff; font-size: 12px; line-height: 1.6; white-space: nowrap; box-shadow: var(--tb-sh-lg); pointer-events: none; } .jmodedit:hover + [role="tooltip"], .jmodedit:focus + [role="tooltip"] { display: block; } .jmoddiv [role="tooltip"] p { margin: 0; } /* ===== 1.2.1: built-in breadcrumbs ===== */ .tb-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .86rem; } .tb-bc li { display: inline-flex; align-items: center; gap: 4px; color: var(--tb-mut); min-width: 0; } .tb-bc li + li::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); opacity: .6; margin-inline: 4px 2px; } [dir="ltr"] .tb-bc li + li::before { transform: rotate(-135deg); } .tb-bc a { color: var(--tb-txt2); text-decoration: none; } .tb-bc a:hover { color: var(--tb-pri); } .tb-bc [aria-current] { color: var(--tb-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } /* ===== 1.2.1: account area shell (HikaShop panel + Joomla profile + club) ===== */ .is-account .tb-body { display: block; } .is-account .hkp .hkp-side, .is-account .hkp.hkp-side-wrap .hkp-side { top: 90px; } .tb-account { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; } .tb-account__side, .tb-account__main { min-width: 0; } .tb-account__side .hkp-side-wrap { position: sticky; top: 90px; } @media (max-width: 900px) { .tb-account { grid-template-columns: minmax(0, 1fr); gap: 16px; } .tb-account__side .hkp-side-wrap { position: static; } } /* mobile: account menu as a horizontal scroll strip instead of a tall list */ @media (max-width: 900px) { .is-account .hkp .hkp-side { position: static; } .is-account .hkp-side-user { padding-block: 14px; } .is-account .hkp-nav { display: flex !important; flex-direction: row !important; gap: 8px; overflow-x: auto; padding: 12px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .is-account .hkp-nav::-webkit-scrollbar { display: none; } .is-account .hkp-nav-label { display: none !important; } .is-account .hkp-nav-item { flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 8px 12px 8px 10px !important; white-space: nowrap; } .is-account .hkp-nav-item.is-active::after, .is-account .hkp-nav-item.is-active::before { display: none !important; } } /* Joomla profile inside the shell: wide card, label/value rows */ .tb-account .com-users-profile, .tb-account .com-users-methods { max-width: none; margin: 0; } .com-users-profile fieldset { border: 0; padding: 0; margin: 0 0 20px; } .com-users-profile dl.dl-horizontal { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); margin: 0; border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); overflow: hidden; } .com-users-profile dl.dl-horizontal dt, .com-users-profile dl.dl-horizontal dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--tb-line2); font-size: .92rem; overflow-wrap: anywhere; } .com-users-profile dl.dl-horizontal dt { color: var(--tb-mut); font-weight: 600; background: var(--tb-line2); } .com-users-profile dl.dl-horizontal dd { color: var(--tb-ink); font-weight: 600; } .com-users-profile dl.dl-horizontal > :nth-last-child(-n+2) { border-bottom: 0; } .com-users-profile__edit, .com-users-profile .btn-toolbar { margin: 0 0 16px; display: flex; justify-content: flex-end; } .com-users-profile__edit a, .com-users-profile .btn-toolbar a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--tb-pri); color: #fff; font-weight: 700; text-decoration: none; } .com-users-profile__edit a .icon-user-edit, .com-users-profile__edit a [class*="icon-"] { display: none; } @media (max-width: 560px) { .com-users-profile dl.dl-horizontal { grid-template-columns: minmax(0, 1fr); } .com-users-profile dl.dl-horizontal dt { border-bottom: 0; padding-bottom: 2px; background: none; font-size: .8rem; } } /* club (Rewardify): neutral styling for whatever markup the club view prints, so it never looks bare */ .tb-account--club .tb-account__main > :not(.tbr):not(.tiob-rw):not(script):not(style):not(link) { max-width: 100%; } .acc-club .tb-account__main table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); overflow: hidden; font-size: .9rem; } .acc-club .tb-account__main th, .acc-club .tb-account__main td { padding: 11px 12px; border-bottom: 1px solid var(--tb-line2); text-align: start; } .acc-club .tb-account__main th { background: var(--tb-line2); color: var(--tb-txt2); font-weight: 700; font-size: .82rem; } .acc-club .tb-account__main tr:last-child td { border-bottom: 0; } .acc-club .tb-account__main .card, .acc-club .tb-account__main .well { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r); padding: 18px; box-shadow: var(--tb-sh); margin-bottom: 16px; } .acc-club .tb-account__main .btn:not(.jmodedit) { border-radius: 12px; font-weight: 700; } .acc-club .tb-account__main .btn-primary { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; } .com-users-profile__edit { float: none !important; list-style: none; padding: 0; } .com-users-profile__edit li { list-style: none; margin: 0; } .tb .hkp .hkp-side-user-txt small { color: rgba(255, 255, 255, .82) !important; opacity: 1; } .tb-account__main > .tb-users-title { text-align: start; margin: 0 0 14px; max-width: none; } /* 1.2.6 product listing columns – template style settings → body vars --tb-gd/gt/gm (grid) --tb-ld/lt/lm (list) */ body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product), body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { display: grid !important; grid-template-columns: repeat(var(--tb-gm, 2), minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 !important; width: 100% !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { grid-template-columns: repeat(var(--tb-lm, 1), minmax(0, 1fr)) !important; gap: 10px !important; } body.tb-pcols-tiob .hikashop_products_listing .hk-row-fluid > .hikashop_product { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; float: none !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; } body.tb-pcols-tiob .hikashop_products_listing .hk-row-fluid:has(> .hikashop_product) > :not(.hikashop_product):empty { display: none !important; } @media (min-width: 768px) { body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product) { grid-template-columns: repeat(var(--tb-gt, 2), minmax(0, 1fr)) !important; gap: 18px !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { grid-template-columns: repeat(var(--tb-lt, 1), minmax(0, 1fr)) !important; gap: 14px !important; } } @media (min-width: 1024px) { body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product) { grid-template-columns: repeat(var(--tb-gd, 3), minmax(0, 1fr)) !important; gap: 22px !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { grid-template-columns: repeat(var(--tb-ld, 1), minmax(0, 1fr)) !important; gap: 16px !important; } } /* 1.2.8 list mode in 2–3 columns: compact horizontal card, price on its own line above the buttons */ @media (min-width: 768px) and (max-width: 1023.98px) { html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card { grid-template-columns: 140px minmax(0, 1fr); } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-badges { display: none; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-desc, html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-meta, html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-rating { display: none !important; } } @media (min-width: 1024px) { html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card { grid-template-columns: 176px minmax(0, 1fr); } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-desc { -webkit-line-clamp: 2; font-size: 13px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card { grid-template-columns: 118px minmax(0, 1fr); } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-desc, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-meta, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-rating { display: none !important; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title { font-size: 14.5px; -webkit-line-clamp: 2; } } @media (min-width: 768px) { html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card, html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card { grid-template-rows: auto 1fr; } } @media (min-width: 768px) and (max-width: 1023.98px) { html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-image-wrap { min-height: 0; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title-wrap { padding: 12px 14px 0; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title { font-size: 15px; -webkit-line-clamp: 2; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info { grid-template-areas: "meta" "desc" "price" "actions"; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; padding: 6px 14px 14px; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-actions { grid-template-columns: minmax(0, 1fr) 40px 40px !important; width: 100%; } html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price, html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; } } @media (min-width: 1024px) { html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-image-wrap, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-image-wrap { min-height: 0; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title-wrap { padding: 14px 16px 0; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title-wrap { padding: 12px 12px 0; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info { grid-template-areas: "meta" "desc" "price" "actions"; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info { padding: 4px 16px 14px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info { padding: 4px 12px 12px; gap: 7px; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-meta { flex-wrap: nowrap; overflow: hidden; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-actions { grid-template-columns: minmax(0, 1fr) 40px 40px !important; width: 100%; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-actions { grid-template-columns: minmax(0, 1fr) 36px 36px !important; width: 100%; gap: 6px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-action { height: 36px; } html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-current-price { font-size: 15px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-old-price { font-size: 12px; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-badges { display: none; } html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-discount-badge { transform: scale(.85); transform-origin: top right; } } @media (min-width: 768px) { html body.tb-pcols-tiob.tb-lt2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-current-price, html body.tb-pcols-tiob.tb-ld2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-current-price, html body.tb-pcols-tiob.tb-ld3 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-current-price { white-space: nowrap; } } /* phones, list in 2 columns: image on top, price above the buttons */ @media (max-width: 767.98px) { html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-image { grid-column: 1; grid-row: 1; height: auto; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-image-wrap { min-height: 0; aspect-ratio: 4 / 3; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title-wrap { grid-column: 1; grid-row: 2; padding: 8px 8px 0; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-title { font-size: 12.5px; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-subtitle { display: none; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-card-info { grid-column: 1; grid-row: 3; grid-template-areas: "price" "actions"; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; padding: 4px 8px 8px; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; } html body.tb-pcols-tiob.tb-lm2 .hikashop_products_listing.tiob-list-mode article.tiob-card .tiob-rating { display: none; } } /* switcher: HikaShop's own buttons are replaced by the template's styled pair */ .tb-core-switch-hidden { display: none !important; } /* 1.2.6 product-category menu: tidy vertical list (template style: nav_cats_style=list) */ .tb-nav li.tb-catmenu { position: relative; } .tb-nav li.tb-catmenu > .mod-menu__sub { width: 300px; min-width: 300px; padding: 8px; display: block; } .tb-nav li.tb-catmenu.tb-cat--flat > .mod-menu__sub, .tb-nav li.tb-catmenu.tb-cat--hide > .mod-menu__sub { max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .tb-nav li.tb-catmenu .mod-menu__sub > li { position: relative; } .tb-nav li.tb-catmenu .tb-cat-item > a, .tb-nav li.tb-catmenu .tb-cat-item > span { gap: 10px; padding: 9px 12px; font-weight: 700; color: var(--tb-ink); } .tb-nav li.tb-catmenu .tb-cat-item > a img { width: 26px; height: 26px; border-radius: 7px; background: var(--tb-bg, #f1f5f9); padding: 2px; flex: 0 0 auto; } .tb-nav li.tb-catmenu .tb-mcount { background: var(--tb-bg, #f1f5f9); color: var(--tb-mut); border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: .7rem; } .tb-nav li.tb-catmenu .tb-cat-item > a:hover .tb-mcount { background: #fff; color: var(--tb-pri); } /* flat: sub-categories listed under their parent, same alignment (no indent) */ .tb-nav li.tb-cat--flat > .mod-menu__sub > .tb-cat-item.deeper:not(:first-child) { border-top: 1px solid var(--tb-line); margin-top: 4px; padding-top: 4px; } .tb-nav li.tb-cat--flat .mod-menu__sub .mod-menu__sub { padding: 0 !important; margin: 0 !important; } .tb-nav li.tb-cat--flat .mod-menu__sub .mod-menu__sub .tb-cat-item > a { font-weight: 500; font-size: .84rem; color: var(--tb-txt2); padding-block: 7px; } .tb-nav li.tb-cat--flat .mod-menu__sub .mod-menu__sub .tb-cat-item > a img { width: 22px; height: 22px; } /* flyout: sub-categories open beside the item */ .tb-nav li.tb-cat--flyout .mod-menu__sub .mod-menu__sub { position: absolute !important; top: -8px; inset-inline-start: calc(100% + 6px); min-width: 240px; padding: 8px !important; background: var(--tb-card) !important; border: 1px solid var(--tb-line) !important; border-radius: var(--tb-r); box-shadow: var(--tb-sh-lg) !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(-6px) !important; transition: opacity .16s, transform .16s, visibility .16s; } .tb-nav li.tb-cat--flyout .mod-menu__sub .mod-menu__sub::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -10px; width: 10px; } [dir="rtl"] .tb-nav li.tb-cat--flyout .mod-menu__sub .mod-menu__sub { transform: translateX(6px) !important; } .tb-nav li.tb-cat--flyout .mod-menu__sub li:hover > .mod-menu__sub, .tb-nav li.tb-cat--flyout .mod-menu__sub li:focus-within > .mod-menu__sub { opacity: 1 !important; visibility: visible !important; transform: none !important; } .tb-nav li.tb-cat--flyout .mod-menu__sub .deeper > a::after { display: inline-block !important; content: ""; margin-inline-start: auto; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(-45deg); opacity: .5; } [dir="rtl"] .tb-nav li.tb-cat--flyout .mod-menu__sub .deeper > a::after { transform: rotate(135deg); } .tb-nav li.tb-cat--flyout .mod-menu__sub .deeper:hover > a { background: var(--tb-pri-l); color: var(--tb-pri); } .tb-nav li.tb-cat--flyout .mod-menu__sub .deeper > a .tb-mcount { margin-inline-start: auto; } .tb-nav li.tb-cat--flyout .mod-menu__sub .deeper > a .tb-mcount + * { margin-inline-start: 6px; } /* "all products" link */ .tb-nav li.tb-catmenu .tb-cat-all { border-top: 1px solid var(--tb-line); margin-top: 6px; padding-top: 6px; } .tb-nav li.tb-catmenu .tb-cat-all > a { justify-content: center; color: var(--tb-pri) !important; font-weight: 800; background: var(--tb-pri-l); } .tb-nav li.tb-catmenu .tb-cat-all > a:hover { background: var(--tb-pri); color: #fff !important; } /* mobile drawer: no indent for category lists; flat = sub-categories always open */ .tb-drawer__nav li.tb-catmenu .mod-menu__sub { padding-inline-start: 0; margin-inline-start: 0; border-inline-start: 0; } .tb-drawer__nav li.tb-catmenu .tb-cat-item > a img { width: 24px; height: 24px; border-radius: 6px; margin-inline-end: 8px; } .tb-drawer__nav li.tb-catmenu .tb-mcount { margin-inline-start: auto; font-size: .72rem; color: var(--tb-mut); } .tb-drawer__nav li.tb-cat--flat .mod-menu__sub .mod-menu__sub { display: block; } .tb-drawer__nav li.tb-cat--flat .mod-menu__sub .tb-sub-tg { display: none; } .tb-drawer__nav li.tb-cat--flat .mod-menu__sub .mod-menu__sub a { font-weight: 500; color: var(--tb-txt2); min-height: 40px; } .tb-drawer__nav li.tb-cat--flat > .mod-menu__sub > .deeper:not(:first-child) { border-top: 1px solid var(--tb-line); } .tb-drawer__nav li.tb-catmenu .tb-cat-all > a { color: var(--tb-pri); justify-content: center; } /* 1.2.6 account drawer: points card */ .tb-oc__pts { display: flex; align-items: center; gap: 12px; margin: 12px 16px 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--tb-pri), var(--tb-pri-d)); color: #fff !important; box-shadow: 0 8px 22px rgba(79, 70, 229, .25); transition: transform .18s; } .tb-oc__pts:hover { transform: translateY(-1px); } .tb-oc__pts-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .18); } .tb-oc__pts-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .tb-oc__pts-tx small { opacity: .85; font-size: .78rem; } .tb-oc__pts-tx strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; } .tb-oc__pts-go { margin-inline-start: auto; opacity: .85; transform: rotate(-90deg); } [dir="rtl"] .tb-oc__pts-go { transform: rotate(90deg); } /* ===== 1.2.7 home: special offer (deal) with countdown ===== */ .tbx-deal .tbx-sec__head { align-items: center; flex-wrap: wrap; } .tbx-deal__ic { background: #fff1f2; color: #e11d48; } .tbx-timer { display: inline-flex; gap: 6px; direction: ltr; } .tbx-timer__u { display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 6px 6px 5px; border-radius: 12px; background: var(--tb-ink, #0f172a); color: #fff; line-height: 1.1; } .tbx-timer__u b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; } .tbx-timer__u small { font-size: .64rem; opacity: .75; margin-top: 2px; } .tbx-timer__u[data-u="d"].is-zero { display: none; } .tbx-timer.is-soon .tbx-timer__u { background: #e11d48; } .tbx-deal__grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--tbx-dn, 1), minmax(0, 1fr)); } .tbx-deal--n2 .tbx-deal__grid { --tbx-dn: 2; } .tbx-deal--n3 .tbx-deal__grid { --tbx-dn: 3; } .tbx-deal--n4 .tbx-deal__grid { --tbx-dn: 4; } .tbx-deal__item { position: relative; display: flex; flex-direction: column; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: calc(var(--tb-r) + 4px); overflow: hidden; box-shadow: var(--tb-sh, 0 6px 20px rgba(15,23,42,.06)); animation: tbxIn .35s var(--tb-ease, ease); } .tbx-deal__item[hidden] { display: none !important; } @keyframes tbxIn { from { opacity: 0; transform: translateY(8px); } } .tbx-deal__media { position: relative; display: block; aspect-ratio: 1; background: var(--tb-bg); } .tbx-deal__media img { width: 100%; height: 100%; object-fit: cover; } .tbx-deal__pct { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #e11d48; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1; box-shadow: 0 8px 18px rgba(225, 29, 72, .35); } .tbx-deal__pct small { font-size: .6rem; font-weight: 600; margin-top: 2px; } .tbx-deal__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; } .tbx-deal__name { margin: 0; font-size: 1.05rem; line-height: 1.5; } .tbx-deal__name a { color: var(--tb-ink); } .tbx-deal__name a:hover { color: var(--tb-pri); } .tbx-deal__desc { margin: 0; color: var(--tb-txt2); font-size: .88rem; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tbx-deal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } .tbx-price--lg strong { font-size: 1.2rem; color: var(--tb-pri); } .tbx-price--lg del { font-size: .85rem; } .tbx-deal__btns { display: flex; gap: 8px; flex-wrap: wrap; } .tbx-deal__btns .tb-btn { gap: 6px; } /* one big deal: horizontal */ @media (min-width: 768px) { .tbx-deal--n1 .tbx-deal__item { display: grid; grid-template-columns: minmax(240px, 40%) minmax(0, 1fr); } .tbx-deal--n1 .tbx-deal__media { aspect-ratio: auto; min-height: 320px; height: 100%; } .tbx-deal--n1 .tbx-deal__body { padding: 28px 30px; justify-content: center; gap: 12px; } .tbx-deal--n1 .tbx-deal__name { font-size: 1.45rem; } .tbx-deal--n1 .tbx-deal__desc { font-size: .95rem; } .tbx-deal--n1 .tbx-price--lg strong { font-size: 1.5rem; } } @media (max-width: 1023.98px) { .tbx-deal--n3 .tbx-deal__grid, .tbx-deal--n4 .tbx-deal__grid { --tbx-dn: 2; } } @media (max-width: 767.98px) { .tbx-deal .tbx-sec__head { flex-direction: column; align-items: stretch; } .tbx-deal .tbx-sec__tools { justify-content: space-between; } .tbx-timer__u { min-width: 44px; padding: 5px 4px; } .tbx-deal__grid { --tbx-dn: 1 !important; gap: 12px; } .tbx-deal--n2 .tbx-deal__grid, .tbx-deal--n3 .tbx-deal__grid, .tbx-deal--n4 .tbx-deal__grid { --tbx-dn: 2 !important; } .tbx-deal--n2 .tbx-deal__desc, .tbx-deal--n3 .tbx-deal__desc, .tbx-deal--n4 .tbx-deal__desc, .tbx-deal--n2 .tbx-card__meta, .tbx-deal--n3 .tbx-card__meta, .tbx-deal--n4 .tbx-card__meta { display: none; } .tbx-deal--n2 .tbx-deal__body, .tbx-deal--n3 .tbx-deal__body, .tbx-deal--n4 .tbx-deal__body { padding: 10px; } .tbx-deal--n2 .tbx-deal__name, .tbx-deal--n3 .tbx-deal__name, .tbx-deal--n4 .tbx-deal__name { font-size: .88rem; } .tbx-deal--n2 .tbx-deal__btns .tb-btn--ghost, .tbx-deal--n3 .tbx-deal__btns .tb-btn--ghost, .tbx-deal--n4 .tbx-deal__btns .tb-btn--ghost { display: none; } .tbx-deal__pct { width: 48px; height: 48px; font-size: .9rem; } .tbx-deal__btns { width: 100%; } .tbx-deal__btns .tb-btn { flex: 1; justify-content: center; } } /* ===== 1.2.7 home: editor's pick ===== */ .tbx-editor__ic { background: #fffbeb; color: #d97706; } .tbx-badge--editor { background: #f59e0b; color: #fff; } .tbx-editor__wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; } .tbx-editor__wrap.is-single { grid-template-columns: minmax(0, 1fr); } .tbx-editor__main { display: grid; grid-template-columns: minmax(200px, 44%) minmax(0, 1fr); background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: calc(var(--tb-r) + 4px); overflow: hidden; box-shadow: var(--tb-sh, 0 6px 20px rgba(15,23,42,.06)); } .tbx-editor__media { position: relative; display: block; background: var(--tb-bg); min-height: 280px; } .tbx-editor__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tbx-editor__badge { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: .78rem; font-weight: 800; box-shadow: 0 6px 14px rgba(245, 158, 11, .35); } .tbx-editor__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; justify-content: center; } .tbx-editor__name { margin: 0; font-size: 1.3rem; line-height: 1.5; } .tbx-editor__name a { color: var(--tb-ink); } .tbx-editor__name a:hover { color: var(--tb-pri); } .tbx-editor__note { margin: 0; padding: 10px 14px; border-inline-start: 3px solid #f59e0b; background: #fffbeb; border-radius: 10px; color: var(--tb-txt2); font-size: .9rem; line-height: 1.9; } .tbx-editor__list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: calc(var(--tb-r) + 4px); } .tbx-editor__row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--tb-txt); } .tbx-editor__row:hover { background: var(--tb-pri-l); } .tbx-editor__thumb { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--tb-bg); color: var(--tb-mut); } .tbx-editor__thumb img { width: 100%; height: 100%; object-fit: cover; } .tbx-editor__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .tbx-editor__txt strong { color: var(--tb-ink); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbx-editor__txt small { color: var(--tb-mut); font-size: .76rem; } .tbx-editor__pr { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.3; } .tbx-editor__pr b { color: var(--tb-ink); font-size: .88rem; white-space: nowrap; } .tbx-editor__pr del { color: var(--tb-mut); font-size: .72rem; } @media (max-width: 1023.98px) { .tbx-editor__wrap { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .tbx-editor__main { grid-template-columns: minmax(0, 1fr); } .tbx-editor__media { min-height: 0; aspect-ratio: 16 / 10; } .tbx-editor__body { padding: 14px 16px 16px; } .tbx-editor__name { font-size: 1.1rem; } .tbx-editor__main .tbx-deal__btns { width: 100%; } .tbx-editor__main .tbx-deal__btns .tb-btn { flex: 1; justify-content: center; } } /* ===== 1.2.9 readable chips: global "small { color: mut }" must not reach coloured badges ===== */ .tbx-timer__u { background: var(--tbx-tm, #0f172a) !important; color: #fff !important; } .tbx-timer.is-soon .tbx-timer__u { background: #e11d48 !important; } .tbx-timer__u b, .tbx-timer__u small { color: #fff !important; } .tbx-timer__u small { opacity: .85; font-weight: 600; } html[data-theme="dark"] .tbx-timer__u { background: var(--tbx-tm, #1e293b) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .tbx-deal__pct small, .tbx-editor__badge small, article.tiob-card .tiob-discount-badge small, .tbx-badge small { color: inherit !important; opacity: .92; } article.tiob-card .tiob-discount-badge { color: #fff; } /* list mode: discount badge (top-right) and status badges no longer collide – status badges sit under the discount */ .tiob-list-mode article.tiob-card .tiob-image-wrap .tiob-badges { top: 50px; left: auto; right: 12px; bottom: auto; align-items: flex-start; } .tiob-list-mode article.tiob-card .tiob-image-wrap:not(:has(.tiob-discount-badge)) .tiob-badges { top: 12px; } @media (max-width: 767.98px) { html body .tiob-list-mode article.tiob-card .tiob-image-wrap .tiob-badges { top: 38px; right: 6px; left: auto; bottom: auto; } html body .tiob-list-mode article.tiob-card .tiob-image-wrap:not(:has(.tiob-discount-badge)) .tiob-badges { top: 8px; } } /* ===== 1.2.9 hero stats: any number of items ===== */ .tbx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .tbx-stats--n1 { grid-template-columns: minmax(0, 1fr); } .tbx-stats--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbx-stats--n3, .tbx-stats--n5, .tbx-stats--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tbx-stats--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .tbx-stats--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tbx-stats--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .tbx-stats li { min-width: 0; } .tbx-stats span { overflow-wrap: anywhere; } .tbx-stats strong span { font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; } /* ===== 1.2.9 section background (deal, editor) ===== */ .tbx-bg { position: relative; isolation: isolate; --tbx-bgx: clamp(12px, var(--tbx-bgp, 28px), 32px); padding-block: var(--tbx-bgp, 28px); } .tbx-bg::before { content: ""; position: absolute; z-index: -1; inset: 0 16px; border-radius: var(--tbx-bgr, 20px); background: var(--tbx-bgv); } .tbx-bg--boxed { padding-inline: calc(16px + var(--tbx-bgx)); } .tbx-bg--full::before { inset: 0 calc(50% - 50vw); border-radius: 0; } .tbx-bg--dots::after { content: ""; position: absolute; z-index: -1; inset: 0 16px; border-radius: var(--tbx-bgr, 20px); background: radial-gradient(currentColor 1px, transparent 1.4px) 0 0 / 18px 18px; opacity: .08; pointer-events: none; } .tbx-bg--full.tbx-bg--dots::after { inset: 0 calc(50% - 50vw); border-radius: 0; } @media (max-width: 767.98px) { .tbx-bg::before, .tbx-bg--dots::after { inset-inline: 6px; } .tbx-bg--boxed { padding-inline: calc(6px + min(var(--tbx-bgx), 14px)); } .tbx-bg { padding-block: min(var(--tbx-bgp, 28px), 20px); } } html[data-theme="dark"] .tbx-bg:not(.tbx-bg--t-image):not(.tbx-bg--light)::before { filter: brightness(.32) saturate(1.3); } .tbx-bg--light > .tbx-sec__head { --tb-ink: #fff; --tb-mut: rgba(255,255,255,.82); color: #fff; } .tbx-bg--light > .tbx-sec__head h2, .tbx-bg--light > .tbx-sec__head .tbx-sec__sub { color: inherit; } .tbx-bg--light > .tbx-sec__head .tbx-sec__sub { opacity: .85; } .tbx-bg--light > .tbx-sec__head .tbx-more { color: #fff; background: rgba(255,255,255,.16); } .tbx-bg--light > .tbx-sec__head .tbx-sec__ic { background: rgba(255,255,255,.18); color: #fff; } .tbx-bg--light.tbx-bg--dots::after { color: #fff; opacity: .12; } /* ===== 1.2.9 home: parts to show per section (tbx-no-) ===== */ .tbx-no-badge .tbx-hero__badge, .tbx-no-lead .tbx-hero__lead, .tbx-no-search .tbx-hero__search, .tbx-no-tags .tbx-hero__tags, .tbx-no-buttons .tbx-hero__cta, .tbx-no-art .tbx-hero__art, .tbx-no-head > .tbx-sec__head, .tbx-no-icon .tbx-sec__ic, .tbx-no-sub .tbx-sec__sub, .tbx-no-more .tbx-more, .tbx-no-timer .tbx-timer, .tbx-no-arrows .tbx-arrow, .tbx-no-image .tbx-deal__media, .tbx-no-image .tbx-editor__media, .tbx-no-image .tbx-card__media, .tbx-no-image .tbx-cat__ic, .tbx-no-image .tbx-post__img, .tbx-no-pct .tbx-deal__pct, .tbx-no-cat .tbx-card__cat, .tbx-no-version .tbx-ver, .tbx-no-rating .tbx-rate, .tbx-no-rating .tbx-sales, .tbx-no-desc .tbx-deal__desc, .tbx-no-note .tbx-editor__note, .tbx-no-note .tbx-editor__main .tbx-deal__desc, .tbx-no-price .tbx-price, .tbx-no-oldprice .tbx-price del, .tbx-no-oldprice .tbx-editor__pr del, .tbx-no-cart .tbx-deal__btns .tb-btn:not(.tb-btn--ghost), .tbx-no-cart .tbx-cartbtn, .tbx-no-view .tbx-deal__btns .tb-btn--ghost, .tbx-no-badge .tbx-editor__badge, .tbx-no-badge .tbx-badge--editor, .tbx-no-badges .tbx-card__badges, .tbx-no-thumbs .tbx-editor__thumb, .tbx-no-listprice .tbx-editor__pr, .tbx-no-count .tbx-cat__txt small, .tbx-no-date .tbx-post time, .tbx-no-text .tbx-post__body p, .tbx-no-text .tbx-feat p, .tbx-no-text .tbx-band__txt p, .tbx-no-icon .tbx-feat__ic, .tbx-no-icon .tbx-band__ic, .tbx-no-button .tbx-band .tb-btn { display: none !important; } .tbx-no-title .tbx-hero__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tbx-no-art .tbx-hero__in { grid-template-columns: minmax(0, 1fr) !important; } .tbx-deal.tbx-no-image .tbx-deal__item, .tbx-editor.tbx-no-image .tbx-editor__main { display: flex !important; flex-direction: column; } .tbx-no-price.tbx-no-cart.tbx-no-view .tbx-deal__foot { display: none; } @media (max-width: 767.98px) { .tbx-deal--n2 .tbx-price--lg strong, .tbx-deal--n3 .tbx-price--lg strong, .tbx-deal--n4 .tbx-price--lg strong { font-size: .92rem; white-space: normal; overflow: visible; } .tbx-deal--n2 .tbx-price--lg del, .tbx-deal--n3 .tbx-price--lg del, .tbx-deal--n4 .tbx-price--lg del { font-size: .74rem; } } /* ===== 1.2.11 product card info items: right or left, one by one – never centered ===== body classes tb-mal-{ver|cmp|rate|sales|hits}-{r|l}. Right items keep order 0, a flexible spacer (::after, order 1) pushes left items (order 2) to the far left of the same row. */ html body article.tiob-card .tiob-meta, html body .tc3 .tc3-chips, html body .tc3 .tc3-stats, html body .tbx-card__meta { display: flex; justify-content: flex-start !important; text-align: start !important; margin-inline: 0 !important; width: 100%; } html body article.tiob-card .tiob-meta::after, html body .tc3 .tc3-chips::after, html body .tc3 .tc3-stats::after, html body .tbx-card__meta::after { content: ""; order: 1; flex: 1 1 0; min-width: 0; height: 0; } html body article.tiob-card .tiob-meta-row, html body .tc3 .tc3-chip, html body .tc3 .tc3-stats > span, html body .tbx-card__meta > * { order: 0; margin-inline: 0 !important; } body.tb-mal-ver-l article.tiob-card .tiob-meta-row--ver, body.tb-mal-ver-l .tc3 .tc3-chip--ver, body.tb-mal-ver-l .tbx-card__meta > .tbx-ver, body.tb-mal-cmp-l article.tiob-card .tiob-meta-row--cmp, body.tb-mal-cmp-l .tc3 .tc3-chip--cmp, body.tb-mal-sales-l article.tiob-card .tiob-meta-row--sales, body.tb-mal-sales-l .tc3 .tc3-stats > .tc3-st--sales, body.tb-mal-sales-l .tbx-card__meta > .tbx-sales, body.tb-mal-hits-l article.tiob-card .tiob-meta-row--hits, body.tb-mal-hits-l .tc3 .tc3-stats > .tc3-st--hits, body.tb-mal-rate-l .tbx-card__meta > .tbx-rate { order: 2; margin-inline-start: auto !important; } /* rating badge on the product image */ body.tb-mal-rate-r article.tiob-card .tiob-rating, body.tb-mal-rate-r .tc3 .tc3-media-rate { right: 10px !important; left: auto !important; } body.tb-mal-rate-l article.tiob-card .tiob-rating, body.tb-mal-rate-l .tc3 .tc3-media-rate { left: 10px !important; right: auto !important; } @media (max-width: 767.98px) { body.tb-mal-rate-r article.tiob-card .tiob-rating, body.tb-mal-rate-r .tc3 .tc3-media-rate { right: 6px !important; } body.tb-mal-rate-l article.tiob-card .tiob-rating, body.tb-mal-rate-l .tc3 .tc3-media-rate { left: 6px !important; } } /* list mode: right-aligned rating must not sit on the status badges (they are top-right, rating is bottom) – nothing else needed */ /* 1.2.12 custom-field chips on home product cards (deal, editor, rails) */ .tbx-card__cf { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin: 2px 0 0; text-align: start; } .tbx-cf { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: var(--tb-bg2, var(--tb-pri-l)); box-shadow: inset 0 0 0 1px var(--tb-line); font-size: .72rem; line-height: 1.6; color: var(--tb-txt); } .tbx-cf small { color: var(--tb-mut); font-size: inherit; } .tbx-cf small::after { content: ":"; } .tbx-cf b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 1.2.13: sales/views on home cards, per-section badge hiding, deal 6/8 items */ .tbx-sales, .tbx-hits { display: inline-flex; align-items: center; gap: 4px; } .tbx-sales svg, .tbx-hits svg { width: 14px; height: 14px; } .tbx-no-sales .tbx-sales, .tbx-no-hits .tbx-hits, .tbx-nob-editor .tbx-editor__badge, .tbx-nob-editor .tbx-badge--editor, .tbx-nob-deal .tbx-deal__pct, .tbx-nob-new .tbx-badge--new, .tbx-nob-upd .tbx-badge--upd, .tbx-nob-free .tbx-badge--free, .tbx-nob-off .tbx-badge--off { display: none !important; } .tbx-no-rating .tbx-sales { display: inline-flex !important; } .tbx-no-rating.tbx-no-sales .tbx-sales { display: none !important; } body.tb-mal-hits-l .tbx-card__meta > .tbx-hits { order: 2; } /* 1.2.14: one-row sections with cards per row per device (deal, editor, rails) */ html body .tbx-row1[style*="--tbx-cd"] { --tbx-c: var(--tbx-cm); --tbx-g: 12px; display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: calc((100% - (var(--tbx-c) - 1) * var(--tbx-g)) / var(--tbx-c)); gap: var(--tbx-g); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } html body .tbx-row1[style*="--tbx-cd"]::-webkit-scrollbar { display: none; } html body .tbx-row1[style*="--tbx-cd"] > * { scroll-snap-align: start; min-width: 0; } @media (min-width: 640px) { html body .tbx-row1[style*="--tbx-cd"] { --tbx-c: var(--tbx-ct); --tbx-g: 14px; } } @media (min-width: 1024px) { html body .tbx-row1[style*="--tbx-cd"] { --tbx-c: var(--tbx-cd); --tbx-g: 18px; } } .tbx-deal--multi .tbx-deal__item { display: flex !important; flex-direction: column; } .tbx-deal--multi .tbx-deal__item[hidden] { display: none !important; } .tbx-deal--multi .tbx-deal__media { aspect-ratio: 1 / 1; min-height: 0; } /* home card image ratio + section spacing */ .tbx-home .tbx-card__media, .tbx-home .tbx-deal--multi .tbx-deal__media { aspect-ratio: var(--tbx-ar, 1 / 1); } .tbx-home.tbx-gap-s { gap: clamp(16px, 2.6vw, 28px); } .tbx-home.tbx-gap-l { gap: clamp(40px, 7vw, 84px); } /* 1.2.15: icon-only buttons in deal / editor (_btn) */ .tbx-btn-icon .tbx-deal__btns .tb-btn .tbx-bt, .tbx-btn-cicon .tbx-deal__btns .tb-btn:not(.tb-btn--ghost) .tbx-bt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tbx-btn-icon .tbx-deal__btns .tb-btn, .tbx-btn-cicon .tbx-deal__btns .tb-btn:not(.tb-btn--ghost) { flex: 0 0 auto !important; width: 44px; min-width: 44px; height: 44px; padding: 0 !important; justify-content: center; gap: 0; border-radius: 12px; } .tbx-btn-icon .tbx-deal__btns .tb-btn--ghost:not(:has(svg))::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .tbx-btn-icon .tbx-deal__btns .tb-btn, .tbx-btn-cicon .tbx-deal__btns .tb-btn:not(.tb-btn--ghost) { position: relative; } /* 1.2.16: deal section with the same cards as the product rails */ .tbx-deal--cards .tbx-deal__item--card { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; } .tbx-deal--cards .tbx-deal__item--card[hidden] { display: none !important; } .tbx-deal--cards .tbx-deal__item--card > .tbx-card { height: 100%; } /* ===== 1.2.17: professional product card (home sections) ===== */ .tbx-home .tbx-card { border-radius: 14px; border-color: var(--tb-line); box-shadow: 0 1px 2px rgba(15,23,42,.04); } .tbx-home .tbx-card:hover { transform: translateY(-4px); box-shadow: var(--tb-sh-lg); border-color: var(--tb-pri-m); } /* image covers the whole frame, no padding */ .tbx-home .tbx-card__media { background: var(--tb-line2); border-bottom: 1px solid var(--tb-line); } .tbx-home .tbx-card__media img { object-fit: cover; padding: 0; } .tbx-home.tbx-fit-contain .tbx-card__media img { object-fit: contain; padding: 10px; } .tbx-home .tbx-card:hover .tbx-card__media img { transform: scale(1.05); } .tbx-home .tbx-card__badges { top: 8px; inset-inline-start: 8px; } .tbx-home .tbx-card__badges .tbx-badge { box-shadow: 0 2px 6px rgba(0,0,0,.12); backdrop-filter: blur(4px); } .tbx-home .tbx-card__body { gap: 7px; padding: 12px 13px 13px; } .tbx-home .tbx-card__name { font-size: .93rem; font-weight: 700; line-height: 1.65; } /* same font as the site for version and numbers */ .tbx-home .tbx-ver, .tbx-home .tbx-card__stats, .tbx-home .tbx-price { font-family: inherit; font-variant-numeric: tabular-nums; } .tbx-home .tbx-card__meta { display: flex; justify-content: flex-start; gap: 6px; } .tbx-home .tbx-ver { font-weight: 600; font-size: .72rem; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; } /* stats strip */ .tbx-card__stats { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: .76rem; color: var(--tb-mut); font-family: inherit; } .tbx-card__stats > span { display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .tbx-card__stats svg { width: 14px; height: 14px; flex: none; opacity: .8; } .tbx-card__stats b { font-weight: 600; color: var(--tb-ink); } .tbx-card__stats small { font-size: .9em; opacity: .8; } .tbx-card__stats .tbx-rate svg { color: #f5a524; opacity: 1; fill: currentColor; } .tbx-home .tbx-card__stats { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--tb-line); } .tbx-home .tbx-card__stats + .tbx-card__cf, .tbx-home .tbx-card__stats ~ .tbx-card__foot { margin-top: 0; } .tbx-home .tbx-card__foot { border-top: 0; padding-top: 4px; } .tbx-home .tbx-card__body > .tbx-card__foot:only-of-type { margin-top: auto; } /* stats under the image */ .tbx-home.tbx-stats-top .tbx-card__stats { order: -1; margin: -2px 0 2px; padding: 0 0 8px; border-top: 0; border-bottom: 1px dashed var(--tb-line); } .tbx-home.tbx-stats-top .tbx-card__foot { margin-top: auto; border-top: 1px solid var(--tb-line); padding-top: 10px; } /* right / left alignment settings (1.2.11) apply to the stats strip too */ .tbx-card__stats > .tbx-rate, .tbx-card__stats > .tbx-sales, .tbx-card__stats > .tbx-hits { order: 0; } body.tb-mal-rate-l .tbx-card__stats > .tbx-rate, body.tb-mal-sales-l .tbx-card__stats > .tbx-sales, body.tb-mal-hits-l .tbx-card__stats > .tbx-hits { order: 2; } body.tb-mal-rate-l .tbx-card__stats > .tbx-rate { margin-inline-start: auto; } body.tb-mal-sales-l:not(.tb-mal-rate-l) .tbx-card__stats > .tbx-sales { margin-inline-start: auto; } body.tb-mal-hits-l:not(.tb-mal-rate-l):not(.tb-mal-sales-l) .tbx-card__stats > .tbx-hits { margin-inline-start: auto; } body.tb-mal-ver-l .tbx-card__meta { justify-content: flex-end; } /* hide options */ .tbx-no-rating .tbx-card__stats .tbx-rate, .tbx-no-sales .tbx-card__stats .tbx-sales, .tbx-no-hits .tbx-card__stats .tbx-hits { display: none !important; } .tbx-no-rating:not(.tbx-no-sales) .tbx-card__stats .tbx-sales { display: inline-flex !important; } /* per-section card gap: override device defaults when set */ html body .tbx-row1[style*="--tbx-gt"] { gap: var(--tbx-gt) !important; } @media (min-width: 640px) { html body .tbx-row1[style*="--tbx-gt"] { --tbx-g: var(--tbx-gt); } } @media (min-width: 1024px) { html body .tbx-row1[style*="--tbx-gd"] { --tbx-g: var(--tbx-gd); } } @media (max-width: 420px) { .tbx-home .tbx-card__body { padding: 10px; } .tbx-card__stats { gap: 4px 9px; font-size: .72rem; } } /* ===== 1.2.18: card info items — place (image / version row / bottom) and side ===== */ html body .tbx-card__stats { display: flex; justify-content: flex-start; } html body .tbx-card__stats::after { content: ""; order: 1; flex: 1 1 0; min-width: 0; height: 0; } html body .tbx-card .tbx-card__meta > .tbx-sd-r, html body .tbx-card .tbx-card__stats > .tbx-sd-r { order: 0 !important; margin-inline-start: 0 !important; } html body .tbx-card .tbx-card__meta > .tbx-sd-l, html body .tbx-card .tbx-card__stats > .tbx-sd-l { order: 2 !important; margin-inline-start: 0 !important; } .tbx-home .tbx-card__meta { align-items: center; gap: 4px 10px; font-size: .76rem; color: var(--tb-mut); min-height: 22px; } .tbx-card__meta > .tbx-rate, .tbx-card__meta > .tbx-sales, .tbx-card__meta > .tbx-hits { display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .tbx-card__meta svg { width: 14px; height: 14px; flex: none; opacity: .8; } .tbx-card__meta b { font-weight: 600; color: var(--tb-ink); } .tbx-card__meta small { opacity: .8; } .tbx-card__meta .tbx-rate svg { color: #f5a524; fill: currentColor; opacity: 1; } /* overlay on the image: left = top-left corner, right = bottom-right corner (badges keep the top-right) */ .tbx-card__ov { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none; } .tbx-card__ov--l { top: 8px; left: 8px; align-items: flex-start; } .tbx-card__ov--r { bottom: 8px; right: 8px; align-items: flex-end; } .tbx-card__ov > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--tb-ink); font-size: .74rem; line-height: 1; box-shadow: 0 2px 8px rgba(15,23,42,.14); backdrop-filter: blur(6px); font-family: inherit; font-variant-numeric: tabular-nums; } .tbx-card__ov svg { width: 13px; height: 13px; flex: none; } .tbx-card__ov b { font-weight: 700; } .tbx-card__ov small { opacity: .7; } .tbx-card__ov .tbx-rate svg { color: #f5a524; fill: currentColor; } .tbx-card__ov .tbx-ver { background: var(--tb-pri); color: #fff; } @media (prefers-color-scheme: dark) { .tb-dark .tbx-card__ov > span { background: rgba(20,24,33,.85); color: #fff; } } /* ===== 1.2.19: badges stacked top-right, equal size, configurable; rating bottom-left ===== */ .tbx-home .tbx-card__badges { top: 8px !important; right: 8px !important; left: auto !important; inset-inline-start: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--tbx-bg-gap, 5px); max-width: 60%; z-index: 2; } .tbx-home.tbx-bw-auto .tbx-card__badges { align-items: flex-end; } .tbx-home .tbx-card__badges .tbx-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 2px 9px; border-radius: 7px; font-size: .7rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .tbx-home .tbx-card__badges .tbx-badge > span { overflow: hidden; text-overflow: ellipsis; } .tbx-home .tbx-card__badges .tbx-badge svg { width: 13px; height: 13px; flex: none; } .tbx-home .tbx-card__badges .tbx-badge--ic { padding: 2px 5px; min-width: 22px; } .tbx-home .tbx-card__badges .tbx-badge[style*="--tbx-bc"] { background: var(--tbx-bc) !important; } .tbx-badge--deal { background: #e11d48; } .tbx-badge--custom { background: #0f172a; } .tbx-badge--field { background: #2563eb; } /* rating & other image overlays at the bottom corners */ .tbx-card__ov--l { top: auto !important; bottom: 8px; left: 8px; } .tbx-card__ov--r { bottom: 8px; right: 8px; } .tbx-nob-deal .tbx-badge--deal, .tbx-no-badges .tbx-badge--custom { display: none !important; } /* ===== 1.2.20: product status badges on listings and the product page ===== */ .tbx-flag { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; } .tbx-flag svg { width: 13px; height: 13px; flex: none; } .tbx-flag[style*="--tbx-bc"], article.tiob-card .tiob-badge.tbx-flag[style*="--tbx-bc"], .tc3 .tc3-badge.tbx-flag[style*="--tbx-bc"] { background: var(--tbx-bc) !important; color: #fff !important; } article.tiob-card .tiob-badges .tbx-flag, .tc3-badges .tbx-flag { min-width: 0; } .hikashop_main_image_div { position: relative; } .tbx-flags { position: absolute; top: 12px; z-index: 5; display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; max-width: 55%; } .tbx-flags--r { right: 12px; } .tbx-flags--l { left: 12px; } .tbx-flags .tbx-badge { min-height: 26px; padding: 3px 11px; border-radius: 8px; font-size: .78rem; font-weight: 700; color: #fff; box-shadow: 0 4px 12px rgba(15,23,42,.18); } .tbx-flags .tbx-badge--ic { padding: 3px 6px; } @media (max-width: 640px) { .tbx-flags { top: 8px; gap: 4px; } .tbx-flags--r { right: 8px; } .tbx-flags--l { left: 8px; } .tbx-flags .tbx-badge { min-height: 22px; font-size: .7rem; padding: 2px 8px; } } /* ===== 1.2.21: add buttons "in cart / in wishlist" state, wishlist heart on home cards ===== */ .tbx-card__foot { gap: 6px; } .tbx-wishbtn { margin-inline-start: auto; } .tbx-wishbtn + .tbx-cartbtn { margin-inline-start: 0; } .tbx-cartbtn.is-in { background: var(--tb-ok, #16a34a); color: #fff; } .tbx-cartbtn.is-in:hover { filter: brightness(.95); background: var(--tb-ok, #16a34a); color: #fff; } .tbx-wishbtn.is-in, .tbx-wishbtn.is-in:hover { background: #fde8ef; color: #e11d48; } .tb-btn[data-tb-add].is-in:not(.tbx-wishbig) { background: var(--tb-ok, #16a34a); border-color: transparent; color: #fff; } .tbx-wishbig { padding-inline: 12px; } .tbx-wishbig.is-in { color: #e11d48; border-color: #f9c4d2; background: #fff1f5; } [data-tb-add].is-in svg { animation: tbInPop .35s ease; } [data-tb-add].is-busy { opacity: .6; pointer-events: none; } @keyframes tbInPop { 0% { transform: scale(.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { [data-tb-add].is-in svg { animation: none; } } html[data-theme="dark"] .tbx-wishbtn.is-in, html[data-theme="dark"] .tbx-wishbig.is-in { background: rgba(225,29,72,.18); border-color: transparent; } /* ===== 1.2.22: footer redesign (styles dark | light | brand, accordion columns on mobile) ===== */ html body .tb-footer { --tf-bg: var(--tb-card); --tf-bg2: var(--tb-bg); --tf-ink: var(--tb-ink); --tf-txt: var(--tb-txt2); --tf-mut: var(--tb-mut); --tf-line: var(--tb-line); --tf-chip: var(--tb-line2); --tf-acc: var(--tb-pri); position: relative; margin-top: auto; padding-top: 0; background: var(--tf-bg); color: var(--tf-txt); border-top: 1px solid var(--tf-line); font-size: .9rem; line-height: 1.9; } html body .tb-footer--dark { --tf-bg: color-mix(in srgb, var(--tb-pri) 10%, #0b1120); --tf-bg2: rgba(255,255,255,.04); --tf-ink: #f8fafc; --tf-txt: #b8c2d3; --tf-mut: #8391a7; --tf-line: rgba(255,255,255,.09); --tf-chip: rgba(255,255,255,.07); --tf-acc: color-mix(in srgb, var(--tb-pri) 55%, #fff); border-top: 0; } html body .tb-footer--brand { --tf-bg: var(--tb-pri); --tf-bg2: rgba(255,255,255,.08); --tf-ink: #fff; --tf-txt: rgba(255,255,255,.85); --tf-mut: rgba(255,255,255,.65); --tf-line: rgba(255,255,255,.16); --tf-chip: rgba(255,255,255,.12); --tf-acc: #fff; border-top: 0; } html body .tb-footer--dark::before, html body .tb-footer--brand::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 40%, #22d3ee), var(--tb-pri)); opacity: .9; } .tb-footer a { color: var(--tf-txt); } .tb-footer a:hover { color: var(--tf-acc); } /* feature strip */ .tb-footer__feats { border-bottom: 1px solid var(--tf-line); } .tb-footer__feats ul { list-style: none; margin: 0; padding: 22px 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 992px) { .tb-footer__feats ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .tb-footer__feats li { display: flex; align-items: center; gap: 12px; min-width: 0; } .tb-footer__fic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tf-chip); color: var(--tf-acc); } .tb-footer__feats b { display: block; color: var(--tf-ink); font-size: .92rem; line-height: 1.5; } .tb-footer__feats small { display: block; color: var(--tf-mut); font-size: .78rem; line-height: 1.6; } /* grid */ html body .tb-footer__grid { display: grid; gap: 34px; padding: 44px 0 34px; grid-template-columns: 1fr; } @media (min-width: 768px) { html body .tb-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body .tb-footer__about { grid-column: 1 / -1; } } @media (min-width: 992px) { html body .tb-footer__grid.tb-cols-1 { grid-template-columns: 1fr; } html body .tb-footer__grid.tb-cols-2 { grid-template-columns: 1.5fr 1fr; } html body .tb-footer__grid.tb-cols-3 { grid-template-columns: 1.5fr 1fr 1fr; } html body .tb-footer__grid.tb-cols-4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; } html body .tb-footer__grid.tb-cols-5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } html body .tb-footer__about { grid-column: auto; padding-inline-end: 24px; } } .tb-footer .tb-brand--foot { margin-bottom: 14px; display: inline-flex; } .tb-footer .tb-brand--foot .tb-brand__name { color: var(--tf-ink); } .tb-footer--dark .tb-brand--foot img, .tb-footer--brand .tb-brand--foot img { filter: none; } html body .tb-footer__txt { color: var(--tf-txt); margin: 0 0 16px; max-width: 52ch; text-align: justify; } html body .tb-contact { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; } html body .tb-contact li { display: flex; align-items: center; gap: 10px; color: var(--tf-txt); min-width: 0; } html body .tb-contact li > a, html body .tb-contact li > span:last-child { min-width: 0; overflow-wrap: anywhere; } .tb-contact__ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tf-chip); color: var(--tf-acc); } html body .tb-social { display: flex; gap: 8px; flex-wrap: wrap; } html body .tb-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tf-chip); color: var(--tf-txt); border: 1px solid var(--tf-line); } html body .tb-social a:hover { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; transform: translateY(-2px); } /* columns */ .tb-fcol { min-width: 0; } .tb-fcol__h { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; color: var(--tf-ink); font-weight: 800; font-size: 1rem; cursor: default; pointer-events: none; } .tb-fcol__h::-webkit-details-marker { display: none; } .tb-fcol__h > span { position: relative; padding-bottom: 8px; } .tb-fcol__h > span::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--tb-pri); } .tb-footer--brand .tb-fcol__h > span::after { background: #fff; } .tb-fcol__h svg { display: none; color: var(--tf-mut); transition: transform .2s var(--tb-ease); } @media (min-width: 768px) { .tb-fcol__h--hidden { display: none; } } .tb-flinks, .tb-fcol__b ul.mod-menu, .tb-fcol__b ul.mod-list, .tb-fcol__b ul.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .tb-flinks a, .tb-fcol__b ul.mod-menu a, .tb-fcol__b ul.mod-list a, .tb-fcol__b ul.menu a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--tf-txt); transition: color .15s, transform .15s; } .tb-flinks a::before, .tb-fcol__b ul.mod-menu a::before, .tb-fcol__b ul.mod-list a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; flex: none; } .tb-flinks a:hover, .tb-fcol__b ul.mod-menu a:hover, .tb-fcol__b ul.mod-list a:hover { color: var(--tf-acc); transform: translateX(-3px); } .tb-fcol__b { color: var(--tf-txt); min-width: 0; overflow-wrap: anywhere; } .tb-fcol__b img { max-width: 100%; height: auto; } /* trust */ html body .tb-footer__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 0 0 30px; padding: 18px; border: 1px solid var(--tf-line); border-radius: 18px; background: var(--tf-bg2); } .tb-footer__trust-t { color: var(--tf-ink); font-weight: 800; font-size: .9rem; } .tb-footer__trust-i { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } html body .tb-footer__trust img { max-height: 84px; width: auto; background: #fff; border-radius: 12px; padding: 6px; } /* bar */ html body .tb-footer__bar { margin: 0; padding: 0; border-top: 1px solid var(--tf-line); background: var(--tf-bg2); color: var(--tf-mut); font-size: .82rem; display: block; } html body .tb-footer__bar > .tb-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-top: 16px; padding-bottom: 16px; } .tb-footer__bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .tb-footer__bar a { color: var(--tf-mut); } /* mobile */ @media (max-width: 767.98px) { html body .tb-footer__grid { gap: 0; padding: 30px 0 20px; } html body .tb-footer__about { padding-bottom: 22px; margin-bottom: 6px; text-align: center; display: flex; flex-direction: column; align-items: center; } html body .tb-footer__txt { text-align: center; } html body .tb-contact { justify-items: center; } html body .tb-social { justify-content: center; } .tb-footer--acc .tb-fcol { border-top: 1px solid var(--tf-line); } .tb-footer--acc .tb-fcol:last-child { border-bottom: 1px solid var(--tf-line); } .tb-footer--acc .tb-fcol__h, .tb-footer--acc .tb-fcol__h--hidden { display: flex; margin: 0; padding: 14px 2px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tb-footer--acc .tb-fcol__h > span { padding: 0; } .tb-footer--acc .tb-fcol__h > span::after { display: none; } .tb-footer--acc .tb-fcol__h svg { display: block; } .tb-footer--acc .tb-fcol[open] > .tb-fcol__h svg { transform: rotate(180deg); } .tb-footer--acc .tb-fcol[open] > .tb-fcol__h { color: var(--tf-acc); } .tb-footer--acc .tb-fcol__b { padding: 0 6px 14px; } .tb-footer--acc .tb-flinks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } .tb-footer:not(.tb-footer--acc) .tb-fcol { padding-top: 18px; } .tb-footer__feats ul { padding: 16px 0; gap: 10px; } .tb-footer__feats li { flex-direction: column; text-align: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: var(--tf-bg2); } .tb-footer__fic { width: 40px; height: 40px; border-radius: 12px; } .tb-footer__feats b { font-size: .84rem; } .tb-footer__feats small { font-size: .72rem; } html body .tb-footer__trust { margin: 6px 0 22px; padding: 14px; } html body .tb-footer__trust img { max-height: 70px; } html body .tb-footer__bar > .tb-wrap { justify-content: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { .tb-fcol__h svg, .tb-flinks a { transition: none; } } /* ===== 1.2.22: compact product cards on the home page (mobile) — image, name, version, price and buttons only ===== */ @media (max-width: 639.98px) { html body .tbx-home.tbx-mc .tbx-row1[style*="--tbx-cd"] { --tbx-c: var(--tbx-mcm, 2.2); --tbx-g: 10px; } .tbx-mc .tbx-card__cat, .tbx-mc .tbx-card .tbx-rate, .tbx-mc .tbx-card .tbx-sales, .tbx-mc .tbx-card .tbx-hits, .tbx-mc .tbx-card .tbx-cf, .tbx-mc .tbx-card .tbx-card__cf, /* 1.2.57: discounted products always keep their discount on phones (old price + discount / special-offer badge) */ .tbx-mc:not(.tbx-mk-badges) .tbx-card__badges > :not(.tbx-badge--off):not(.tbx-badge--deal), .tbx-mc:not(.tbx-mk-price) .tbx-card .tbx-price:not(:has(del)) { display: none !important; } .tbx-mc .tbx-card__stats:not(:has(.tbx-ver)), .tbx-mc .tbx-card__ov:not(:has(.tbx-ver)) { display: none !important; } .tbx-mc .tbx-card__meta:not(:has(.tbx-ver)) { display: none !important; } .tbx-mc .tbx-card { border-radius: 12px; } .tbx-mc .tbx-card__body { gap: 4px !important; padding: 8px 9px 9px !important; } .tbx-mc .tbx-card__name { font-size: .8rem !important; line-height: 1.55 !important; min-height: 3.1em; } .tbx-mc .tbx-card .tbx-ver { font-size: .7rem; } .tbx-mc .tbx-card__meta, .tbx-mc .tbx-card__stats { padding: 0 !important; border: 0 !important; margin: 0 !important; min-height: 0; } .tbx-mc .tbx-card__foot { padding-top: 7px !important; gap: 5px !important; } .tbx-mc:not(.tbx-mk-price) .tbx-card__foot { justify-content: flex-end; } .tbx-mc .tbx-card .tbx-price strong { font-size: .8rem; } .tbx-mc .tbx-card .tbx-price del { display: inline; font-size: .68rem; margin-inline-end: 4px; opacity: .8; } .tbx-mc .tbx-cartbtn { width: 34px; height: 34px; border-radius: 10px; } .tbx-mc .tbx-cartbtn svg { width: 17px; height: 17px; } .tbx-mc .tbx-wishbtn { margin-inline-start: 0; } .tbx-mc:not(.tbx-mk-price) .tbx-card__foot .tbx-price + .tbx-wishbtn, .tbx-mc:not(.tbx-mk-price) .tbx-card__foot > .tbx-cartbtn:only-of-type { margin-inline-start: auto; } .tbx-mc .tbx-card__foot { flex-wrap: wrap; } .tbx-mc .tbx-card__foot > .tbx-price { flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbx-mc .tbx-card__foot > .tbx-wishbtn { flex: 0 0 34px; width: 34px; margin: 0; } .tbx-mc .tbx-card__foot > .tbx-cartbtn:not(.tbx-wishbtn) { flex: 1 1 auto; width: auto; margin: 0; } .tbx-mc .tbx-deal__desc, .tbx-mc .tbx-deal__cat { display: none; } } /* ===== 1.2.25: Font Awesome fallback icons. The template does not load Font Awesome; HikaShop / override markup still uses . Known icons are drawn with an SVG mask (colour = currentColor). Turn off with the template setting fa_shim. ===== */ html.tb-fa i.fa-star,html.tb-fa i.fa-comments,html.tb-fa i.fa-comment,html.tb-fa i.fa-comment-dots,html.tb-fa i.fa-sort-amount-down,html.tb-fa i.fa-check-circle,html.tb-fa i.fa-clock,html.tb-fa i.fa-reply,html.tb-fa i.fa-thumbs-up,html.tb-fa i.fa-thumbs-down,html.tb-fa i.fa-shopping-cart,html.tb-fa i.fa-user-lock,html.tb-fa i.fa-sign-in-alt,html.tb-fa i.fa-pen,html.tb-fa i.fa-chevron-down,html.tb-fa i.fa-chevron-left,html.tb-fa i.fa-chevron-right,html.tb-fa i.fa-user-circle,html.tb-fa i.fa-user,html.tb-fa i.fa-envelope,html.tb-fa i.fa-paper-plane,html.tb-fa i.fa-lock,html.tb-fa i.fa-download,html.tb-fa i.fa-file,html.tb-fa i.fa-box-open,html.tb-fa i.fa-folder-open,html.tb-fa i.fa-times,html.tb-fa i.fa-check,html.tb-fa i.fa-info-circle,html.tb-fa i.fa-search,html.tb-fa i.fa-trash,html.tb-fa i.fa-plus,html.tb-fa i.fa-credit-card,html.tb-fa i.fa-heart,html.tb-fa i.fa-calendar,html.tb-fa i.fa-link,html.tb-fa i.fa-shield-alt,html.tb-fa i.fa-arrow-left,html.tb-fa i.fa-arrow-right,html.tb-fa i.fa-hdd{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.14em;font-style:normal;background:currentColor;-webkit-mask:var(--tbfa) center/contain no-repeat;mask:var(--tbfa) center/contain no-repeat} html.tb-fa i.fa-star::before,html.tb-fa i.fa-comments::before,html.tb-fa i.fa-comment::before,html.tb-fa i.fa-comment-dots::before,html.tb-fa i.fa-sort-amount-down::before,html.tb-fa i.fa-check-circle::before,html.tb-fa i.fa-clock::before,html.tb-fa i.fa-reply::before,html.tb-fa i.fa-thumbs-up::before,html.tb-fa i.fa-thumbs-down::before,html.tb-fa i.fa-shopping-cart::before,html.tb-fa i.fa-user-lock::before,html.tb-fa i.fa-sign-in-alt::before,html.tb-fa i.fa-pen::before,html.tb-fa i.fa-chevron-down::before,html.tb-fa i.fa-chevron-left::before,html.tb-fa i.fa-chevron-right::before,html.tb-fa i.fa-user-circle::before,html.tb-fa i.fa-user::before,html.tb-fa i.fa-envelope::before,html.tb-fa i.fa-paper-plane::before,html.tb-fa i.fa-lock::before,html.tb-fa i.fa-download::before,html.tb-fa i.fa-file::before,html.tb-fa i.fa-box-open::before,html.tb-fa i.fa-folder-open::before,html.tb-fa i.fa-times::before,html.tb-fa i.fa-check::before,html.tb-fa i.fa-info-circle::before,html.tb-fa i.fa-search::before,html.tb-fa i.fa-trash::before,html.tb-fa i.fa-plus::before,html.tb-fa i.fa-credit-card::before,html.tb-fa i.fa-heart::before,html.tb-fa i.fa-calendar::before,html.tb-fa i.fa-link::before,html.tb-fa i.fa-shield-alt::before,html.tb-fa i.fa-arrow-left::before,html.tb-fa i.fa-arrow-right::before,html.tb-fa i.fa-hdd::before{content:none!important;display:none!important} html.tb-fa i.fa-star{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E")} html.tb-fa i.fa-comments{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 9h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v3l-4-3h-4a2 2 0 0 1-2-1.5'/%3E%3C/svg%3E")} html.tb-fa i.fa-comment{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")} html.tb-fa i.fa-comment-dots{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8 10.5h.01M12 10.5h.01M16 10.5h.01' stroke-width='3'/%3E%3C/svg%3E")} html.tb-fa i.fa-sort-amount-down{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M13 5h8M13 10h6M13 15h4'/%3E%3C/svg%3E")} html.tb-fa i.fa-check-circle{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E")} html.tb-fa i.fa-clock{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} html.tb-fa i.fa-reply{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8 4 13l6 5'/%3E%3Cpath d='M4 13h10a6 6 0 0 1 6 6'/%3E%3C/svg%3E")} html.tb-fa i.fa-thumbs-up{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v9H4v-9z'/%3E%3Cpath d='M7 11l4-7a2 2 0 0 1 3 2l-1 4h6a2 2 0 0 1 2 2.3l-1.2 6A2 2 0 0 1 17.8 20H7'/%3E%3C/svg%3E")} html.tb-fa i.fa-thumbs-down{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13V4H4v9z'/%3E%3Cpath d='M7 13l4 7a2 2 0 0 0 3-2l-1-4h6a2 2 0 0 0 2-2.3l-1.2-6A2 2 0 0 0 17.8 4H7'/%3E%3C/svg%3E")} html.tb-fa i.fa-shopping-cart{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E")} html.tb-fa i.fa-user-lock{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20a7 7 0 0 1 10-6.3'/%3E%3Crect x='15' y='15' width='6' height='5' rx='1'/%3E%3Cpath d='M16.5 15v-1.5a1.5 1.5 0 0 1 3 0V15'/%3E%3C/svg%3E")} html.tb-fa i.fa-sign-in-alt{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 8-4 4 4 4'/%3E%3Cpath d='M6 12h10'/%3E%3C/svg%3E")} html.tb-fa i.fa-pen{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")} html.tb-fa i.fa-chevron-down{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} html.tb-fa i.fa-chevron-left{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")} html.tb-fa i.fa-chevron-right{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")} html.tb-fa i.fa-user-circle{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.5 18.5a6.5 6.5 0 0 1 11 0'/%3E%3C/svg%3E")} html.tb-fa i.fa-user{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")} html.tb-fa i.fa-envelope{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")} html.tb-fa i.fa-paper-plane{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7z'/%3E%3Cpath d='M10 13.5 21 3'/%3E%3C/svg%3E")} html.tb-fa i.fa-lock{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")} html.tb-fa i.fa-download{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E")} html.tb-fa i.fa-file{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")} html.tb-fa i.fa-box-open{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5-9 5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")} html.tb-fa i.fa-folder-open{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V6a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 19l2.6-7.6A2 2 0 0 1 7.5 10H21l-2.7 8a2 2 0 0 1-1.9 1.4H3'/%3E%3C/svg%3E")} html.tb-fa i.fa-times{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")} html.tb-fa i.fa-check{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")} html.tb-fa i.fa-info-circle{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E")} html.tb-fa i.fa-search{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")} html.tb-fa i.fa-trash{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E")} html.tb-fa i.fa-plus{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")} html.tb-fa i.fa-credit-card{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E")} html.tb-fa i.fa-heart{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9z'/%3E%3C/svg%3E")} html.tb-fa i.fa-calendar{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")} html.tb-fa i.fa-link{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")} html.tb-fa i.fa-shield-alt{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3C/svg%3E")} html.tb-fa i.fa-arrow-left{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")} html.tb-fa i.fa-arrow-right{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} html.tb-fa i.fa-hdd{--tbfa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E")} /* ===== 1.2.25: site-wide toast (cart / wishlist / login) – one look on every page ===== */ .tb-toast { display: flex; align-items: center; gap: 10px; width: max-content; min-width: 260px; max-width: min(460px, calc(100vw - 24px)); padding: 8px 8px 8px 12px; padding-inline-start: 8px; border-radius: 16px; background: var(--tb-card, #fff); color: var(--tb-ink, #0f172a); border: 1px solid var(--tb-line, #e5e7eb); box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06); font-weight: 700; font-size: .9rem; line-height: 1.7; } .tb-toast[hidden] { display: none; } .tb-toast.is-bad { background: var(--tb-card, #fff); } .tb-toast__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: var(--tb-ok, #059669); } .tb-toast--wish .tb-toast__ic { background: #e11d48; } .tb-toast--remove .tb-toast__ic { background: #f59e0b; } .tb-toast--bad .tb-toast__ic { background: var(--tb-bad, #dc2626); } .tb-toast--info .tb-toast__ic { background: var(--tb-pri, #4f46e5); } .tb-toast--lock .tb-toast__ic { background: var(--tb-pri-l, #eef2ff); color: var(--tb-pri, #4f46e5); } .tb-toast__msg { flex: 1; min-width: 0; } .tb-toast__act { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 11px; background: var(--tb-pri, #4f46e5); color: #fff !important; font-size: .85rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; transition: filter .15s; } .tb-toast__act:hover { filter: brightness(1.08); } .tb-toast__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--tb-mut, #64748b); font-size: 20px; line-height: 1; cursor: pointer; } .tb-toast__x:hover { background: var(--tb-line2, #f1f5f9); color: var(--tb-ink, #0f172a); } html[data-theme="dark"] .tb-toast { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); } @media (max-width: 575.98px) { .tb-toast { width: calc(100vw - 24px); min-width: 0; } } /* hide the old private toasts of product scripts if one slips through */ #tiob-toast.tiob-toast:empty { display: none; } /* ===== 1.2.25: badge layout on product images (home cards, listings, product page) – icon-only badges: side by side in one row along the top of the image – any badge with text: stacked, square corners, flush to the image edge (ribbon) ===== */ .tbx-card__badges:not(:has(.tbx-badge:not(.tbx-badge--ic))), .tbx-flags:not(:has(.tbx-badge:not(.tbx-badge--ic))), article.tiob-card .tiob-badges:not(:has(.tiob-badge:not(.tbx-badge--ic))), .tc3 .tc3-badges:not(:has(.tc3-badge:not(.tbx-badge--ic))) { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; max-width: calc(100% - 16px) !important; } .tbx-card__badges .tbx-badge--ic, .tbx-flags .tbx-badge--ic, article.tiob-card .tiob-badge.tbx-badge--ic, .tc3 .tc3-badge.tbx-badge--ic { border-radius: 8px; } /* text badges → ribbon */ .tbx-home .tbx-card__badges:has(.tbx-badge:not(.tbx-badge--ic)) { top: 10px !important; right: 0 !important; left: auto !important; gap: 3px; } .tbx-flags--r:has(.tbx-badge:not(.tbx-badge--ic)) { right: 0; top: 14px; gap: 3px; } .tbx-flags--l:has(.tbx-badge:not(.tbx-badge--ic)) { left: 0; top: 14px; gap: 3px; } article.tiob-card .tiob-badges:has(.tiob-badge:not(.tbx-badge--ic)) { left: 0; top: 12px; gap: 3px; align-items: flex-start; } .tc3 .tc3-badges:has(.tc3-badge:not(.tbx-badge--ic)) { right: 0; top: 10px; gap: 3px; align-items: flex-end; } .tbx-card__badges:has(.tbx-badge:not(.tbx-badge--ic)) .tbx-badge, .tbx-flags:has(.tbx-badge:not(.tbx-badge--ic)) .tbx-badge, article.tiob-card .tiob-badges:has(.tiob-badge:not(.tbx-badge--ic)) .tiob-badge, .tc3 .tc3-badges:has(.tc3-badge:not(.tbx-badge--ic)) .tc3-badge { border-radius: 0 !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .14) !important; backdrop-filter: none !important; } article.tiob-card .tiob-badges:has(.tiob-badge:not(.tbx-badge--ic)) .tiob-badge::before { display: none; } @media (max-width: 575.98px) { .tb-toast { font-size: .84rem; gap: 8px; } .tb-toast__act { padding: 0 16px; } .tb-toast__ic { width: 32px; height: 32px; } } /* ===== 1.2.28: badges flush to the edge of their side (JS adds tb-edge-r / tb-edge-l) + icon tooltips ===== */ html body :is(.tb-edge-r, #tb-edge-x) { right: 0 !important; left: auto !important; direction: rtl !important; align-items: flex-start !important; justify-content: flex-start !important; } html body :is(.tb-edge-l, #tb-edge-x) { left: 0 !important; right: auto !important; direction: ltr !important; align-items: flex-start !important; justify-content: flex-start !important; } /* the container direction only decides which edge the badges start from; badge text stays Persian */ html body .tb-edge-r > *, html body .tb-edge-l > * { direction: rtl; } /* stacked text badges = ribbon: square on the edge side, rounded inside */ html body .tb-edge-r > :not(.tbx-badge--ic), html body article.tiob-card .tiob-discount-badge.tb-edge-r { border-radius: 8px 0 0 8px !important; } html body .tb-edge-l > :not(.tbx-badge--ic), html body article.tiob-card .tiob-discount-badge.tb-edge-l { border-radius: 0 8px 8px 0 !important; } /* icon-only row: starts at the edge; the edge icon is square on that side */ html body .tb-edge-r > .tbx-badge--ic, html body .tb-edge-l > .tbx-badge--ic { border-radius: 8px !important; } html body .tb-edge-r > .tbx-badge--ic:first-child { border-radius: 8px 0 0 8px !important; } html body .tb-edge-l > .tbx-badge--ic:first-child { border-radius: 0 8px 8px 0 !important; } html body .tb-edge-r:has(> :not(.tbx-badge--ic)) > .tbx-badge--ic, html body .tb-edge-l:has(> :not(.tbx-badge--ic)) > .tbx-badge--ic { border-radius: 8px !important; } article.tiob-card .tiob-discount-badge { z-index: 3; } .tbx-flags .tbx-badge--ic, .tbx-badge--ic { pointer-events: auto; cursor: help; } .tb-tip, .tb-tip[role="tooltip"] { display: block; position: fixed; z-index: 100001; max-width: 220px; padding: 6px 10px; border-radius: 8px; background: #0f172a; color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.5; text-align: center; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; box-shadow: 0 8px 22px rgba(15, 23, 42, .25); } .tb-tip.is-on { opacity: 1; transform: none; } .tb-tip::after { content: ""; position: absolute; top: 100%; left: var(--tb-tip-x, 50%); margin-left: -6px; border: 6px solid transparent; border-top-color: #0f172a; } .tb-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0f172a; } html[data-theme="dark"] .tb-tip { background: #f8fafc; color: #0f172a; } html[data-theme="dark"] .tb-tip::after { border-top-color: #f8fafc; } html[data-theme="dark"] .tb-tip.is-below::after { border-top-color: transparent; border-bottom-color: #f8fafc; } /* 1.2.30: drawers / cart panel always above the product page's fixed mobile buy bar (z 9990) and other fixed bars */ html body .tb-oc { z-index: 100000; } html body .tb-drawer { z-index: 100000; } html body .tb-toast { z-index: 100002; } body.tb-lock .tiob-product .tiob-actions, body.tb-lock .tbx-buybar, body.tb-lock .tiob-sticky-buy { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .tb-oc__foot { position: sticky; bottom: 0; z-index: 2; } /* 1.2.31: mobile search overlay – clear close (×) button, above everything */ .tb-search__close { display: none; } @media (max-width: 991.98px) { html body .tb-search.is-open { z-index: 100001; padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .tb-search.is-open .tb-search__in { width: calc(100% - 56px) !important; } .tb-search.is-open .tb-search__close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; width: 46px; height: 46px; border: 1px solid var(--tb-line); border-radius: 14px; background: var(--tb-line2); color: var(--tb-ink); cursor: pointer; z-index: 2; } .tb-search.is-open .tb-search__close:active { transform: scale(.96); } .tb-search.is-open .tb-search__x { inset-inline-end: 74px; } .tb-search.is-open:not(.has-q) .tb-search__x { display: none; } } /* 1.2.33: checkout login ↔ register switch link */ .tbck-sw { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--tb-line); text-align: center; font-size: .9rem; color: var(--tb-mut); } .tbck-sw a { font-weight: 800; color: var(--tb-pri); text-decoration: none; margin-inline-start: 4px; border-radius: 6px; padding: 2px 4px; } .tbck-sw a:hover, .tbck-sw a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } /* 1.2.35: no sideways page scroll anywhere – flex/grid children may shrink below their content's min-content width, wide content (tab bars, tables, code, embeds) scrolls inside its own box instead of widening the page */ body > *, .tb-main, .tb-main > *, .tb-wrap, .tb-wrap > *, main, main > *, .tb-content, .tb-content > *, .tb-layout > *, .tb-grid > * { min-width: 0; } .tiob-product, .tiob-product *:where(.tiob-main, .tiob-side, .tiob-aside, .tiob-tabs-wrapper, .tiob-panel, .tiob-card) { min-width: 0; max-width: 100%; } .tiob-product > *, .tiob-product .tiob-main > * { min-width: 0; } img, video, iframe, embed, object, svg { max-width: 100%; } img, video { height: auto; } pre { max-width: 100%; overflow-x: auto; } .tiob-panel table, .tb-article table, .item-page table, .com-content-article table { display: block; max-width: 100%; overflow-x: auto; } :where(p, li, td, th, h1, h2, h3, h4, a, span, blockquote, dd, dt) { overflow-wrap: anywhere; } .tiob-product { width: 100%; } .tiob-product .tiob-tabs, .tiob-product .tiob-thumbnails-wrapper, .tb-crumbs ol, .nav-tabs, .tiob-reviews .tiob-sortbar { min-width: 0; max-width: 100%; } /* 1.2.36: off-screen helpers (left:-9999px) make RTL pages scroll sideways on mobile – keep them hidden in place */ [style*="-9999px"], [style*="-9999em"] { position: absolute !important; left: auto !important; right: auto !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .tiob-ticket-form { position: relative; } .tiob-ticket-field > .hikashop_field_required { display: none; } .tiob-ticket-field .hikashop_field_error_msg { color: var(--hk-bad, #ef4444); font-size: .8rem; } /* 1.2.38: version box shape & look (template settings ver_shape / ver_style) */ body.tb-vsh-round .tbx-ver, body.tb-vsh-round .tc3 .tc3-chip--ver, body.tb-vsh-round article.tiob-card .tiob-meta-row--ver, body.tb-vsh-round .tiob-product-version { --tb-vr: 999px; border-radius: var(--tb-vr) !important; } body.tb-vsh-soft .tbx-ver, body.tb-vsh-soft .tc3 .tc3-chip--ver, body.tb-vsh-soft article.tiob-card .tiob-meta-row--ver, body.tb-vsh-soft .tiob-product-version { --tb-vr: 6px; } body.tb-vsh-flat .tbx-ver, body.tb-vsh-flat .tc3 .tc3-chip--ver, body.tb-vsh-flat article.tiob-card .tiob-meta-row--ver, body.tb-vsh-flat .tiob-product-version { --tb-vr: 0px; } body.tb-vst-solid .tbx-ver, body.tb-vst-solid .tc3 .tc3-chip--ver, body.tb-vst-solid article.tiob-card .tiob-meta-row--ver, body.tb-vst-solid .tiob-product-version { background: var(--tb-pri) !important; color: #fff !important; border: 0 !important; } body.tb-vst-solid article.tiob-card .tiob-meta-row--ver *, body.tb-vst-solid .tiob-product-version *, body.tb-vst-solid .tc3 .tc3-chip--ver * { color: #fff !important; } body.tb-vst-outline .tbx-ver, body.tb-vst-outline .tc3 .tc3-chip--ver, body.tb-vst-outline article.tiob-card .tiob-meta-row--ver, body.tb-vst-outline .tiob-product-version { background: transparent !important; border: 1.5px solid currentColor !important; color: var(--tb-pri) !important; } body.tb-vst-plain .tbx-ver, body.tb-vst-plain .tc3 .tc3-chip--ver, body.tb-vst-plain article.tiob-card .tiob-meta-row--ver, body.tb-vst-plain .tiob-product-version { background: transparent !important; border: 0 !important; padding-inline: 0 !important; box-shadow: none !important; } :is(body.tb-vsh-soft, body.tb-vsh-flat) :is(.tbx-ver, .tc3 .tc3-chip--ver, article.tiob-card .tiob-meta-row--ver, .tiob-product-version) { border-radius: var(--tb-vr) !important; } /* 1.2.39: AJAX pagination */ .tb-ajx-loading { position: relative; } #tb-main.tb-ajx-loading .hikashop_products_listing, #tb-main.tb-ajx-loading .hikashop_products, #tb-main.tb-ajx-loading .tc3-listing { opacity: .45; pointer-events: none; transition: opacity .15s; } #tb-main.tb-ajx-loading::after { content: ""; position: fixed; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid var(--tb-pri-l); border-top-color: var(--tb-pri); border-radius: 50%; animation: tbAjxSpin .7s linear infinite; z-index: 50; } .tb-ajx-hide { display: none !important; } .tb-ajx-more { display: flex; justify-content: center; margin: 22px 0 8px; } .tb-ajx-more__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; min-width: min(280px, 100%); padding: 0 26px; border: 1.5px solid var(--tb-pri); border-radius: 14px; background: var(--tb-card, #fff); color: var(--tb-pri); font: inherit; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; } .tb-ajx-more__btn:hover { background: var(--tb-pri); color: #fff; } .tb-ajx-spin { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tbAjxSpin .7s linear infinite; } .tb-ajx-more__btn.tb-ajx-loading .tb-ajx-spin { display: inline-block; } .tb-ajx-more__btn[disabled] { opacity: .8; cursor: progress; } @keyframes tbAjxSpin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .tb-ajx-more__btn { width: 100%; } } /* 1.2.41: product card shape (settings card_shape / card_inner / card_shadow) */ body.tb-csh-soft { --tb-cr: 8px; } body.tb-csh-flat { --tb-cr: 0px; } html body:is(.tb-csh-soft, .tb-csh-flat) :is(.tbx-card, .tbx-deal__item, div.tc3, article.tc3, article.tiob-card, .tc3-table-wrap, .hikashop_subcontainer, .hikashop_product > .hikashop_container) { border-radius: var(--tb-cr) !important; } html body.tb-cin:is(.tb-csh-soft, .tb-csh-flat) :is(.tbx-card, .tbx-deal__item, div.tc3, article.tc3, article.tiob-card, tr.tc3) *:not([class*="spin"]):not(.tb-tip):not(.tbx-card__ph) { border-radius: var(--tb-cr) !important; } html body.tb-csd-none :is(.tbx-card, .tbx-deal__item, div.tc3, article.tc3, article.tiob-card, .tc3-table-wrap, .hikashop_subcontainer), html body.tb-csd-none :is(.tbx-card, div.tc3, article.tc3, article.tiob-card):hover { box-shadow: none !important; } html body.tb-csd-border :is(.tbx-card, .tbx-deal__item, div.tc3, article.tc3, article.tiob-card, .tc3-table-wrap, .hikashop_subcontainer), html body.tb-csd-border :is(.tbx-card, div.tc3, article.tc3, article.tiob-card):hover { box-shadow: none !important; border-color: transparent !important; } /* ===== 1.2.43: home banners on mobile (body tb-bm-compact | tb-bm-mini | tb-bm-normal) ===== */ @media (max-width: 640px) { :is(.tb-bm-compact, .tb-bm-mini) .tbx-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 14px 16px; } :is(.tb-bm-compact, .tb-bm-mini) .tbx-band::after { width: 160px; height: 160px; top: -80px; inset-inline-end: -50px; } :is(.tb-bm-compact, .tb-bm-mini) .tbx-band__ic { width: 42px; height: 42px; border-radius: 12px; } :is(.tb-bm-compact, .tb-bm-mini) .tbx-band__ic svg { width: 22px; height: 22px; } :is(.tb-bm-compact, .tb-bm-mini) .tbx-band__txt { flex: none; min-width: 0; } :is(.tb-bm-compact, .tb-bm-mini) .tbx-band h2 { font-size: 1rem; line-height: 1.5; margin: 0; } .tb-bm-compact .tbx-band p { font-size: .8rem; line-height: 1.7; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tb-bm-compact .tbx-band > .tb-btn { grid-column: 1 / -1; width: 100%; min-height: 40px; padding: 8px 14px; font-size: .88rem; } .tb-bm-mini .tbx-band { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; } .tb-bm-mini .tbx-band p { display: none; } .tb-bm-mini .tbx-band h2 { font-size: .92rem; } .tb-bm-mini .tbx-band > .tb-btn { min-height: 36px; padding: 6px 12px; font-size: .8rem; white-space: nowrap; } .tb-bm-mini .tbx-band__ic { width: 36px; height: 36px; border-radius: 10px; } .tb-bm-mini .tbx-band__ic svg { width: 19px; height: 19px; } .tbx-no-icon:is(.tb-bm-compact *, .tb-bm-mini *) .tbx-band { grid-template-columns: minmax(0, 1fr) auto; } .tb-bm-compact .tbx-no-icon .tbx-band { grid-template-columns: minmax(0, 1fr); } } /* ===== 1.2.43: request-a-file banner (.tbfq) ===== */ .tbfq { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 18px 28px; align-items: center; } .tbfq--stack { grid-template-columns: minmax(0, 1fr); } .tbfq.tbfq--dark { background: linear-gradient(120deg, #0f172a, #1e293b 60%, color-mix(in srgb, var(--tb-pri) 50%, #1e293b)); } .tbfq.tbfq--soft { background: var(--tb-card); color: var(--tb-txt); border: 1px solid var(--tb-line); } .tbfq.tbfq--soft::after { background: color-mix(in srgb, var(--tb-pri) 7%, transparent); } .tbfq.tbfq--soft h2 { color: var(--tb-ink); } .tbfq.tbfq--soft p { color: var(--tb-mut); opacity: 1; } .tbfq.tbfq--soft .tbx-band__ic { background: color-mix(in srgb, var(--tb-pri) 12%, transparent); color: var(--tb-pri); } .tbfq__head { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; min-width: 0; } .tbfq__head .tbx-band__txt { flex: 1 1 auto; min-width: 0; } .tbfq__form { position: relative; z-index: 1; margin: 0; min-width: 0; } .tbfq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tbfq__f { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-size: .8rem; } .tbfq__f > span { color: #fff; opacity: .92; font-weight: 600; } .tbfq--soft .tbfq__f > span { color: var(--tb-txt); } .tbfq__f--file, .tbfq__f--desc { grid-column: 1 / -1; } .tbfq__grid:has(.tbfq__f--plat) .tbfq__f--file { grid-column: auto; } .tbfq__req { color: #fca5a5; font-weight: 700; margin-inline-start: 3px; } .tbfq--soft .tbfq__req { color: var(--tb-err, #dc2626); } .tbfq__f :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 42px; margin: 0; padding: 8px 12px; border-radius: var(--tb-r-sm, 10px); border: 1px solid rgba(255, 255, 255, .28) !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; font: inherit; font-size: .9rem; box-shadow: none; } .tbfq--soft .tbfq__f :is(input, select, textarea) { color: var(--tb-txt) !important; } .tbfq__f textarea { min-height: 64px; resize: vertical; } .tbfq__f select option { color: var(--tb-txt); background: var(--tb-card); } .tbfq__f :is(input, textarea)::placeholder { color: inherit; opacity: .6; } .tbfq__f :is(input, select, textarea):focus { outline: none; border-color: #fff !important; background: rgba(255, 255, 255, .2) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); } .tbfq--soft .tbfq__f :is(input, select, textarea) { border-color: var(--tb-line) !important; background: var(--tb-bg, #fff) !important; } .tbfq--soft .tbfq__f :is(input, select, textarea):focus { border-color: var(--tb-pri) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-pri) 18%, transparent); } .tbfq__f.is-bad :is(input, select, textarea) { border-color: #fca5a5 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, .3) !important; } .tbfq__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tbfq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; } .tbfq__btn { display: inline-flex; align-items: center; gap: 8px; } .tbfq--soft .tbfq__btn { background: var(--tb-pri) !important; color: #fff !important; border-color: var(--tb-pri) !important; } .tbfq__btn[aria-busy="true"] { opacity: .7; pointer-events: none; } .tbfq__msg { flex: 1 1 180px; margin: 0 !important; font-size: .84rem; opacity: 1 !important; min-height: 1em; } .tbfq__msg:empty { display: none; } .tbfq__msg.is-ok { font-weight: 700; } .tbfq__msg.is-err { color: #fecaca; } .tbfq--soft .tbfq__msg.is-err { color: var(--tb-err, #dc2626); } .tbfq--soft .tbfq__msg.is-ok { color: var(--tb-ok, #16a34a); } .tbfq.is-done .tbfq__grid, .tbfq.is-done .tbfq__btn { display: none; } @media (max-width: 900px) { .tbfq { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .tbfq { gap: 12px; } :is(.tb-bm-compact, .tb-bm-mini) .tbfq { grid-template-columns: minmax(0, 1fr) !important; } .tbfq__head { gap: 12px; } .tbfq__grid { gap: 8px; } .tbfq__grid:has(.tbfq__f--plat) .tbfq__f--file, .tbfq__f--plat { grid-column: 1 / -1; } .tbfq__f { font-size: .76rem; gap: 3px; } .tbfq__f :is(input, select, textarea) { min-height: 40px; font-size: 16px; } /* 16px: no iOS zoom */ .tbfq__btn { width: 100%; justify-content: center; min-height: 42px; } .tbfq__foot { margin-top: 10px; } } /* ===== 1.2.44: registration form (html/com_users/registration/default.php) ===== */ .tbreg.com-users-registration { max-width: 680px; } .tbreg__intro { margin: -4px 0 18px; color: var(--tb-mut); font-size: .9rem; text-align: center; } .tbreg .tbreg__set { margin: 0 0 6px !important; } .tbreg .tbreg__legend { display: none; } .tbreg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 14px; } .tbreg--c2 .tbreg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbreg__f--wide { grid-column: 1 / -1; } .tbreg__set + .tbreg__set { margin-top: 14px !important; padding-top: 16px !important; border-top: 1px dashed var(--tb-line) !important; } .tbreg .tbreg__f > .control-group { margin: 0; gap: 6px; } .tbreg .tbreg__f--nolabel > .control-group { gap: 0; } .tbreg .tbreg__f--nolabel .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tbreg .control-label label { font-size: .84rem; font-weight: 700; color: var(--tb-txt); } .tbreg__ctl { position: relative; } .tbreg__ic { position: absolute; z-index: 3; inset-inline-start: 14px; top: 24px; transform: translateY(-50%); display: grid; place-items: center; color: var(--tb-mut); pointer-events: none; transition: color .2s; } .tbreg__ctl:focus-within .tbreg__ic { color: var(--tb-pri); } .tbreg .tbreg__ctl .form-control { height: 48px; padding-inline-start: 44px !important; border: 1.5px solid var(--tb-line); background: var(--tb-bg, var(--tb-card)); border-radius: 12px; font-size: .95rem; transition: border-color .2s, box-shadow .2s, background .2s; } .tbreg .tbreg__ctl .form-control:hover { border-color: color-mix(in srgb, var(--tb-pri) 35%, var(--tb-line)); } .tbreg .tbreg__ctl .form-control:focus { outline: none; border-color: var(--tb-pri); background: var(--tb-card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tb-pri) 14%, transparent); } .tbreg .tbreg__ctl .form-control::placeholder { color: var(--tb-mut); opacity: .85; } .tbreg .tbreg__ctl .form-control.invalid, .tbreg .tbreg__ctl .form-control[aria-invalid="true"] { border-color: var(--tb-bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tb-bad) 12%, transparent); } .tbreg .tbreg__ctl .form-control:disabled { opacity: .6; cursor: not-allowed; } .tbreg__f--ltr .form-control { direction: ltr; text-align: right; letter-spacing: .04em; } .tbreg__f--ltr .form-control::placeholder { direction: rtl; letter-spacing: 0; } [dir="ltr"] .tbreg__f--ltr .form-control { text-align: left; } /* passwords: Joomla's rules line becomes a small hint under the box */ .tbreg .tbreg__ctl { display: flex; flex-direction: column; } .tbreg .tbreg__ctl > [id$="-rules"] { order: 2; margin-top: 6px; font-size: .74rem; line-height: 1.7; color: var(--tb-mut); } .tbreg .tbreg__ctl > [id$="-rules"] strong { font-weight: 700; } .tbreg .password-group .input-group .form-control { border-radius: 0 12px 12px 0; } .tbreg .password-group .input-group .btn { min-height: 48px; border: 1.5px solid var(--tb-line); border-inline-start: 0; } .tbreg meter, .tbreg .password-strength, .tbreg [id$="-strength"] { width: 100%; } /* calendar (birthday): box + small calendar button at the end */ .tbreg .field-calendar { display: flex; align-items: stretch; width: 100%; } .tbreg .field-calendar .form-control { flex: 1; min-width: 0; border-radius: 0 12px 12px 0; } .tbreg .field-calendar .btn { flex: none; width: 50px; min-height: 48px; height: 48px; padding: 0; margin: 0; display: grid; place-items: center; border: 1.5px solid var(--tb-line); border-inline-start: 0; border-radius: 12px 0 0 12px; background: var(--tb-line2); color: var(--tb-mut); box-shadow: none; } .tbreg .field-calendar .btn:hover { color: var(--tb-pri); background: var(--tb-line2); } .tbreg .field-calendar .btn.hidden, .tbreg .field-calendar .btn[hidden] { display: none; } .tbreg .field-calendar .btn.hidden ~ *, .tbreg .field-calendar:has(.btn.hidden) .form-control { border-radius: 12px; } .tbreg .field-calendar .icon-calendar { display: inline-block; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat; } .tbreg__f--cal .tbreg__ic { display: none; } .tbreg__f--cal .tbreg__ctl .form-control { padding-inline-start: 14px !important; } .tbreg .star { color: var(--tb-bad); } .tbreg__submit { margin: 18px 0 0 !important; } .tbreg__submit .btn { min-height: 52px; font-weight: 800; box-shadow: 0 8px 22px color-mix(in srgb, var(--tb-pri) 28%, transparent); } .tbreg__captcha { margin-top: 12px; } @media (max-width: 560px) { .tbreg--c2 .tbreg__grid { grid-template-columns: minmax(0, 1fr); } .tbreg__grid { gap: 12px; } .tbreg .tbreg__ctl .form-control { font-size: 16px; } /* no iOS zoom */ } .tbreg .control-label { margin: 0 !important; padding: 0 !important; line-height: 1.5; min-height: 0; } .tbreg .control-label label { margin: 0 !important; display: inline-block; } html[dir="rtl"] .tbreg__f--ltr .tbreg__ctl .form-control { padding-left: 14px !important; padding-right: 44px !important; } html[dir="ltr"] .tbreg__f--ltr .tbreg__ctl .form-control { padding-right: 14px !important; padding-left: 44px !important; } html[dir="rtl"] .tbreg__f--ltr .tbreg__ic { right: 14px; left: auto; } /* ===== 1.2.45: user panel – no big background panel behind lists; every order / item keeps its own card. Sidebar unchanged. ===== */ :is(.tb-account__main, .hika_cpanel_main_data, .hkp-main, .hikashop_cpanel_main_interface, #hikashop_order_listing, .hko-listing, .hikashop_order_listing, .hikashop_orders_content, .hkp-order-list) { background: none !important; box-shadow: none !important; } :is(.tb-account__main, .hkp) :is(.hkp-orders, #hikashop_download_listing, .tiob-orders-panel) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } :is(.tb-account__main, .hkp) :is(.hkp-orders, #hikashop_download_listing) > .hkp-card-head { padding: 0 2px 4px; margin-bottom: 12px; border: 0; } .hkp .hkp-order { background: var(--hk-card, var(--tb-card, #fff)) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05); } .hkp .hkp-order-list { display: flex; flex-direction: column; gap: 12px; } :is(.tb-account__main, .hkp) :is(.hkp-orders, #hikashop_download_listing, .hko-listing) :is(.hkp-empty, .hkp-filter) { background: var(--hk-card, var(--tb-card, #fff)); border: 1px solid var(--hkp-line, var(--tb-line)); border-radius: 14px; } :is(.tb-account__main, .hkp) :is(.hkp-orders, #hikashop_download_listing, .hko-listing) .hkp-filter { padding: 12px; margin-bottom: 14px; } :is(.tb-account__main, .hkp) :is(.hkp-orders, #hikashop_download_listing, .hko-listing) .hkp-empty { padding: 28px 16px; } #hikashop_download_listing .hkp-table-wrap { background: var(--hk-card, var(--tb-card, #fff)); box-shadow: 0 4px 14px rgba(15, 23, 42, .05); } @media (max-width: 760px) { /* downloads table becomes one card per row on phones */ #hikashop_download_listing .hkp-table-wrap { background: none; box-shadow: none; } #hikashop_download_listing .hkp-table tbody tr { display: block; margin: 0 0 12px; background: var(--hk-card, var(--tb-card, #fff)); border: 1px solid var(--hkp-line, var(--tb-line)); border-radius: 14px; padding: 6px 4px; } } /* other HikaShop account lists: carts, wishlists, addresses, affiliate – the page frame stays transparent, items stay cards */ :is(.tb-account__main) :is(.hkc, .hka, .hkf):not(.hkc-pop) { background: none !important; box-shadow: none !important; } /* ===== 1.2.46: readable text on coloured boxes – headings, labels, small and strong follow the box's own (white) text colour ===== */ :is(.tb-drawer__club, .tbx-band:not(.tbfq--soft), .tbx-deal__pct, .hkp .hkp-side-user, .hkp .hkp-hero, .hkp .hkp-auth-head, .hkp .hko-head, .rwp-guest, .rwp-hero, .rwp-tab.is-on, .rwp-er-t.is-on, .rwp-levelc em, .hikashop_checkout_page .tbck-head, .tiob-product .tiob-header, .hkc .hkc-hero, .hkf .hkf-hero, .tb-oc__pts) :is(h1, h2, h3, h4, h5, h6, label, legend, strong, b, .rwp-er-l b) { color: inherit; } :is(.tb-drawer__club, .tbx-band:not(.tbfq--soft), .hkp .hkp-side-user, .hkp .hkp-hero, .hkp .hkp-auth-head, .hkp .hko-head, .rwp-guest, .rwp-hero, .rwp-tab.is-on, .rwp-er-t.is-on, .hikashop_checkout_page .tbck-head, .tiob-product .tiob-header, .hkc .hkc-hero, .hkf .hkf-hero, .tb-oc__pts) :is(small, .small, .form-text, p:not(.tbfq__msg), time, .rwp-main-bal small) { color: rgba(255, 255, 255, .86) !important; opacity: 1; } .rwp-er-t:not(.is-on) .rwp-er-l small { color: inherit !important; opacity: .8; } .tb-oc__pts-tx small { opacity: 1; } /* links & muted text inside the white-text boxes */ :is(.rwp-hero, .hkp .hkp-hero, .tbx-band, .tiob-product .tiob-header) .hkp-muted, :is(.rwp-hero, .hkp .hkp-hero) .rwp-text-muted { color: rgba(255, 255, 255, .8) !important; } /* ===== 1.2.46: features (instant download, updates …) on mobile – compact grid (body tb-fm-grid2 | tb-fm-row4 | tb-fm-list) ===== */ @media (max-width: 639px) { .tb-fm-grid2 .tbx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tb-fm-grid2 .tbx-feat { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 10px; } .tb-fm-grid2 .tbx-feat__ic { width: 38px; height: 38px; border-radius: 11px; } .tb-fm-grid2 .tbx-feat__ic svg { width: 19px; height: 19px; } .tb-fm-grid2 .tbx-feat strong { font-size: .84rem; margin: 0; } .tb-fm-grid2 .tbx-feat p { font-size: .72rem; line-height: 1.6; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tb-fm-row4 .tbx-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .tb-fm-row4 .tbx-feat { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 4px; } .tb-fm-row4 .tbx-feat__ic { width: 34px; height: 34px; border-radius: 10px; } .tb-fm-row4 .tbx-feat__ic svg { width: 17px; height: 17px; } .tb-fm-row4 .tbx-feat strong { font-size: .7rem; line-height: 1.5; margin: 0; } .tb-fm-row4 .tbx-feat p { display: none; } } /* ===== 1.2.46: version a size bigger on phones ===== */ @media (max-width: 640px) { html body .tbx-ver, html body .tbx-home .tbx-ver, html body .tbx-mc .tbx-card .tbx-ver { font-size: .8rem; } html body .tc3 .tc3-chip--ver, html body article.tiob-card .tiob-meta-row--ver, html body article.tiob-card .tiob-meta-row--ver * { font-size: .82rem; } html body .tiob-product-version { font-size: .9rem; } } /* ===== 1.2.47: views / downloads / sales counters in grey; version a size bigger on desktop too ===== */ html body :is(.tbx-sales, .tbx-hits, .tc3 .tc3-st--sales, .tc3 .tc3-st--hits, article.tiob-card .tiob-meta-row--sales, article.tiob-card .tiob-meta-row--hits), html body :is(.tbx-sales, .tbx-hits, .tc3 .tc3-st--sales, .tc3 .tc3-st--hits, article.tiob-card .tiob-meta-row--sales, article.tiob-card .tiob-meta-row--hits) * { color: var(--tb-mut) !important; } html body :is(.tbx-sales, .tbx-hits, .tc3 .tc3-st--sales, .tc3 .tc3-st--hits) svg { opacity: .85; } @media (min-width: 641px) { html body .tbx-ver, html body .tbx-home .tbx-ver { font-size: .84rem; } html body .tc3 .tc3-chip--ver, html body article.tiob-card .tiob-meta-row--ver, html body article.tiob-card .tiob-meta-row--ver * { font-size: .86rem; } html body .tiob-product-version { font-size: .95rem; } } /* ===== 1.2.48: special offer tag in cart/checkout; wishlist icon on phones ===== */ .tb-deal-tag { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: middle; background: color-mix(in srgb, var(--tb-danger, #e11d48) 12%, transparent); color: var(--tb-danger, #e11d48); white-space: nowrap; } @media (max-width: 575.98px) { .tb-wishbtn { display: inline-grid; } } /* 1.2.54 product price everywhere (html/com_hikashop/product/listing_price.php) */ .tb-price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;line-height:1.3} .tb-price .tb-price-old{order:0;color:var(--hk-mut,#8a8f98);font-size:.82em;font-weight:500;text-decoration:line-through;text-decoration-thickness:1px} .tb-price .tb-price-old *{text-decoration:inherit;color:inherit} .tb-price .tb-price-now{order:1;font-weight:700} .tb-price .tb-price-now.hikashop_product_price_with_discount{color:inherit} /* ---------- 1.2.63: alerts (desktop + mobile), inline field errors, calendar button, live password match ---------- */ joomla-alert, #system-message-container .alert { align-items: center; padding: 14px 16px 14px 14px !important; font-size: 14px; line-height: 1.9; border-radius: 14px !important; } joomla-alert::before, #system-message-container .alert::before { content: ""; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--tb-info) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); } joomla-alert[type="success"] { background: color-mix(in srgb, var(--tb-ok) 7%, var(--tb-card)) !important; border-color: color-mix(in srgb, var(--tb-ok) 30%, var(--tb-line)) !important; } joomla-alert[type="success"]::before { background-color: var(--tb-ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); } joomla-alert[type="danger"], joomla-alert[type="error"], #system-message-container .alert-danger, #system-message-container .alert-error { background: color-mix(in srgb, var(--tb-bad) 6%, var(--tb-card)) !important; border-color: color-mix(in srgb, var(--tb-bad) 30%, var(--tb-line)) !important; } joomla-alert[type="danger"]::before, joomla-alert[type="error"]::before, #system-message-container .alert-danger::before, #system-message-container .alert-error::before { background-color: var(--tb-bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } joomla-alert[type="warning"], #system-message-container .alert-warning { background: color-mix(in srgb, var(--tb-warn) 8%, var(--tb-card)) !important; border-color: color-mix(in srgb, var(--tb-warn) 32%, var(--tb-line)) !important; } joomla-alert[type="warning"]::before, #system-message-container .alert-warning::before { background-color: var(--tb-warn); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); } joomla-alert .alert-message, #system-message-container .alert-message { margin: 0; word-break: break-word; } joomla-alert .alert-message + .alert-message { margin-top: 4px; } joomla-alert .joomla-alert--close, joomla-alert button[aria-label] { align-self: center; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } joomla-alert .joomla-alert--close:hover, joomla-alert button[aria-label]:hover { background: var(--tb-line2); color: var(--tb-txt); } @media (max-width: 640px) { #system-message-container { margin: 0 0 12px; } joomla-alert, #system-message-container .alert { gap: 10px; padding: 12px !important; font-size: 13px; line-height: 1.8; border-radius: 12px !important; } joomla-alert::before, #system-message-container .alert::before { flex-basis: 30px; width: 30px; height: 30px; background-size: 16px; } } .form-control-feedback, .invalid-feedback, .hikashop_field_error_msg, .tb-pwmatch { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--tb-bad); font-size: 12.5px; font-weight: 600; line-height: 1.7; } .hikashop_field_error_msg[style*="none"], .tb-pwmatch[hidden] { display: none !important; } .tb-pwmatch.is-ok { color: var(--tb-ok); } .tb-pwmatch::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: currentColor; } input.tb-pw-bad { border-color: var(--tb-bad) !important; } input.tb-pw-ok { border-color: var(--tb-ok) !important; } /* calendar (birthday) field: Joomla wraps input + button in .input-group – keep them on one line */ .field-calendar .input-group { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; } .field-calendar .input-group > .form-control, .field-calendar .input-group > input { flex: 1 1 auto; width: 1% !important; min-width: 0; border-radius: 0 12px 12px 0 !important; } .field-calendar .input-group > .btn, .field-calendar .input-group > button { flex: 0 0 50px; width: 50px !important; min-height: 48px; padding: 0 !important; margin: 0 !important; display: grid; place-items: center; border: 1.5px solid var(--tb-line) !important; border-inline-start: 0 !important; border-radius: 12px 0 0 12px !important; background: var(--tb-line2) !important; color: var(--tb-mut) !important; box-shadow: none !important; } .field-calendar .input-group > .btn:hover, .field-calendar .input-group > button:hover { color: var(--tb-pri) !important; } .field-calendar .input-group > .btn::after, .field-calendar .input-group > button:empty::after { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat; } .field-calendar .input-group > .btn .icon-calendar, .field-calendar .input-group > .btn [class*="fa-"] { display: none !important; } /* 1.2.64: guest points teaser in the account panel */ .tb-oc__gpts { margin: 12px 16px 6px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, var(--tb-pri), var(--tb-pri-d)); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tb-pri) 70%, transparent); } .tb-oc__gpts-top { display: flex; align-items: center; gap: 10px; } .tb-oc__gpts .tb-oc__pts-ic { flex: 0 0 40px; width: 40px; height: 40px; } .tb-oc__gpts-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.6; } .tb-oc__gpts-tx strong { font-size: .92rem; font-weight: 800; } .tb-oc__gpts-tx small { font-size: .76rem; opacity: .88; } .tb-oc__gpts-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; min-height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-size: .82rem; font-weight: 700; text-decoration: none; transition: background .15s; } .tb-oc__gpts-btn:hover { background: rgba(255, 255, 255, .26); } /* 1.2.66: phones – deal timer sits next to the section title; wraps to the next line only when both don't fit */ @media (max-width: 767.98px) { .tbx-deal .tbx-sec__head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 10px; column-gap: 10px; } .tbx-deal .tbx-sec__t { flex: 0 1 auto; min-width: 0; } .tbx-deal .tbx-sec__tools { flex: 0 0 auto; margin-inline-start: auto; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .tbx-deal .tbx-timer { gap: 4px; } .tbx-deal .tbx-timer__u { min-width: 38px; padding: 4px 3px; border-radius: 10px; } .tbx-deal .tbx-timer__u b { font-size: 1rem; } .tbx-deal .tbx-timer__u small { font-size: .58rem; } } /* ===== 1.2.67: home categories – columns, styles, box, colors (settings home_cats_* / cats_*) ===== */ .tbx-cats[style*="--cc-d"]:not(.tbx-cats--chips) { gap: var(--cc-g, 12px); grid-template-columns: repeat(var(--cc-m, 2), minmax(0, 1fr)); } @media (min-width: 640px) { .tbx-cats[style*="--cc-d"]:not(.tbx-cats--chips) { grid-template-columns: repeat(var(--cc-t, 4), minmax(0, 1fr)); } } @media (min-width: 1024px) { .tbx-cats[style*="--cc-d"]:not(.tbx-cats--chips) { grid-template-columns: repeat(var(--cc-d, 6), minmax(0, 1fr)); } } .tbx-cats--chips[style*="--cc-g"] { gap: var(--cc-g, 8px); } .tbx-cats[style*="--cc-r"] .tbx-cat { border-radius: var(--cc-r); } .tbx-cats:not(.tbx-cats--chips) .tbx-cat__ic { width: var(--cc-ic, 60px); height: var(--cc-ic, 60px); } .tbx-cat__txt strong { overflow-wrap: anywhere; } /* one row, horizontal scroll */ .tbx-cats--scroll:not(.tbx-cats--chips) { display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cc-m, 2) - 1) * var(--cc-g, 12px)) / var(--cc-m, 2)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .tbx-cats--scroll .tbx-cat { scroll-snap-align: start; } @media (min-width: 640px) { .tbx-cats--scroll:not(.tbx-cats--chips) { grid-auto-columns: calc((100% - (var(--cc-t, 4) - 1) * var(--cc-g, 12px)) / var(--cc-t, 4)); } } @media (min-width: 1024px) { .tbx-cats--scroll:not(.tbx-cats--chips) { grid-auto-columns: calc((100% - (var(--cc-d, 6) - 1) * var(--cc-g, 12px)) / var(--cc-d, 6)); } } /* fewer items on phones */ @media (max-width: 639.98px) { .tbx-cats--lm .tbx-cat--xm { display: none !important; } } /* text alignment */ .tbx-cats--al-start:not(.tbx-cats--chips):not(.tbx-cats--cards) .tbx-cat { align-items: flex-start; text-align: start; } /* icon colors */ .tbx-cats--col-primary .tbx-cat { --c: var(--tb-pri) !important; } .tbx-cats--col-mono .tbx-cat { --c: var(--tb-mut) !important; } .tbx-cats--col-custom .tbx-cat { --c: var(--cc-c, var(--tb-pri)) !important; } /* box background */ .tbx-cats--bx-tint .tbx-cat { background: color-mix(in srgb, var(--c) 8%, var(--tb-card)); border-color: color-mix(in srgb, var(--c) 18%, transparent); } .tbx-cats--bx-outline .tbx-cat { background: transparent; border: 1.5px solid color-mix(in srgb, var(--c) 30%, var(--tb-line)); } .tbx-cats--bx-none .tbx-cat { background: transparent; border-color: transparent; } /* shadow */ .tbx-cats--sh-none .tbx-cat, .tbx-cats--sh-none .tbx-cat:hover { box-shadow: none; } .tbx-cats--sh-soft .tbx-cat { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -10px rgba(15, 23, 42, .18); } .tbx-cats--sh-strong .tbx-cat { box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .35); } .tbx-cats--sh-none.tbx-cats--bx-none .tbx-cat:hover { background: color-mix(in srgb, var(--c) 6%, transparent); } /* hover */ .tbx-cats:not(.tbx-cats--hover) .tbx-cat:hover { transform: none; } /* style: horizontal card */ .tbx-cats--cards .tbx-cat { flex-direction: row; align-items: center; text-align: start; gap: 12px; padding: 12px 14px; } .tbx-cats--cards .tbx-cat__ic { flex: 0 0 auto; width: min(var(--cc-ic, 60px), 56px); height: min(var(--cc-ic, 60px), 56px); border-radius: 14px; } .tbx-cats--cards .tbx-cat__txt { flex: 1 1 auto; min-width: 0; } .tbx-cats--cards .tbx-cat__go { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .2s; } .tbx-cats--cards .tbx-cat:hover .tbx-cat__go { transform: translateX(-3px); } /* style: large image with title on it */ .tbx-cats--cover .tbx-cat { position: relative; overflow: hidden; padding: 0; min-height: 150px; justify-content: flex-end; align-items: stretch; background: color-mix(in srgb, var(--c) 14%, var(--tb-card)); } .tbx-cats--cover .tbx-cat__ic { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); } .tbx-cats--cover .tbx-cat__ic img { object-fit: cover; padding: 0; transition: transform .4s; } .tbx-cats--cover .tbx-cat__ic svg { width: 44px; height: 44px; opacity: .55; } .tbx-cats--cover .tbx-cat:hover .tbx-cat__ic img { transform: scale(1.06); } .tbx-cats--cover .tbx-cat__txt { position: relative; z-index: 1; padding: 30px 12px 12px; background: linear-gradient(to top, rgba(15, 23, 42, .82), rgba(15, 23, 42, 0)); color: #fff; text-align: start; } .tbx-cats--cover .tbx-cat__txt strong { color: #fff; } .tbx-cats--cover .tbx-cat__txt small { color: rgba(255, 255, 255, .82); } .tbx-cats--cover.tbx-cats--al-center .tbx-cat__txt { text-align: center; } .tbx-no-image .tbx-cats--cover .tbx-cat__ic { display: block !important; } .tbx-no-image .tbx-cats--cover .tbx-cat__ic img, .tbx-no-image .tbx-cats--cover .tbx-cat__ic svg { display: none; } /* style: minimal */ .tbx-cats--minimal .tbx-cat { background: transparent; border-color: transparent; box-shadow: none; padding: 10px 6px; } .tbx-cats--minimal .tbx-cat:hover { box-shadow: none; background: color-mix(in srgb, var(--c) 6%, transparent); } /* style: circles */ .tbx-cats--circle .tbx-cat { background: transparent; border-color: transparent; box-shadow: none !important; padding: 6px 4px; gap: 8px; } .tbx-cats--circle .tbx-cat__ic { border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--c), #f59e0b, #ec4899, var(--c)); } .tbx-cats--circle .tbx-cat__ic > * { display: grid; place-items: center; } .tbx-cats--circle .tbx-cat__ic img { border-radius: 50%; background: var(--tb-card); border: 3px solid var(--tb-card); width: 100%; height: 100%; object-fit: cover; padding: 0; } .tbx-cats--circle .tbx-cat__ic svg { box-sizing: content-box; padding: calc(var(--cc-ic, 60px) / 2 - 16px); border-radius: 50%; background: var(--tb-card); color: var(--c); width: 26px; height: 26px; } .tbx-cats--circle .tbx-cat:hover { background: transparent; } .tbx-cats--circle .tbx-cat__txt strong { font-size: .86rem; } html[data-theme="dark"] .tbx-cats--sh-soft .tbx-cat, html[data-theme="dark"] .tbx-cats--sh-strong .tbx-cat { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); } /* ===== 1.2.68 ===== */ /* special offer in card style: discount circle (part "pct"), short description (part "desc"), view button (part "view") */ .tbx-deal__pct--c { top: auto !important; bottom: 10px; inset-inline-start: auto; inset-inline-end: 10px; width: 52px; height: 52px; font-size: .95rem; z-index: 2; box-shadow: 0 6px 14px -6px rgba(225, 29, 72, .6); } .tbx-deal__pct--c small { font-size: .58rem; margin-top: 2px; } @media (max-width: 767.98px) { .tbx-deal__pct--c { width: 42px; height: 42px; font-size: .8rem; bottom: 6px; inset-inline-end: 6px; } } .tbx-deal__desc--c { margin: 4px 0 0; font-size: .78rem; line-height: 1.7; color: var(--tb-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tbx-viewbtn { background: var(--tb-bg2, var(--tb-line2)) !important; color: var(--tb-ink) !important; } .tbx-no-view .tbx-viewbtn, .tbx-no-desc .tbx-deal__desc--c, .tbx-no-pct .tbx-deal__pct--c { display: none !important; } .tbx-nob-deal .tbx-deal__pct--c { display: flex !important; } .tbx-nob-deal.tbx-no-pct .tbx-deal__pct--c { display: none !important; } /* editor's big item: full badge stack (discount, new, free …) like the cards */ .tbx-editor__media .tbx-editor__badges { position: absolute; top: 12px !important; inset-inline-start: 12px; z-index: 2; } .tbx-no-badges .tbx-editor__badges > :not(.tbx-badge--editor) { display: none !important; } /* version box colour (ver_color) */ body:not(.tb-vst-plain) :is(.tbx-ver, .tc3 .tc3-chip--ver, article.tiob-card .tiob-meta-row--ver, .tiob-product-version) { --tb-pri: var(--tb-verc, var(--tb-pri)); } body.tb-vst-tint .tbx-ver { color: var(--tb-verc, var(--tb-pri)); background: color-mix(in srgb, var(--tb-verc, var(--tb-pri)) 12%, transparent); } /* compatibility box (cmp_shape / cmp_style / cmp_color) – same choices as the version box */ :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { --tb-cc: var(--tb-cmpc, #0891b2); } body.tb-csh-round :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { border-radius: 999px !important; } body.tb-csh-soft :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { border-radius: 6px !important; } body.tb-csh-flat :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { border-radius: 0 !important; } body.tb-cst-tint :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { background: color-mix(in srgb, var(--tb-cc) 12%, transparent) !important; color: var(--tb-cc) !important; box-shadow: none !important; border: 0 !important; padding-inline: 8px; } body.tb-cst-solid :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { background: var(--tb-cc) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; padding-inline: 8px; } body.tb-cst-outline :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { background: transparent !important; color: var(--tb-cc) !important; box-shadow: none !important; border: 1.5px solid currentColor !important; padding-inline: 8px; } body.tb-cst-plain :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-inline: 0 !important; } body:is(.tb-cst-tint, .tb-cst-solid, .tb-cst-outline) :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp) :is(small, b, bdi, span, svg) { color: inherit !important; } /* ===== 1.2.69: badge design (hb_look: flat | gloss | ribbon | arrow | tag) and one colour for all (hb_mono) ===== R = badges sitting on the right edge (home cards, tc3 list, flags right); L = left edge (classic list card, flags left) */ body:not(#tb-nb).tb-hb-mono :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, article.tiob-card .tiob-discount-badge):not([style*="--tbx-bc"]) { background-color: var(--tb-hbm) !important; color: #fff !important; } /* glossy shading – used by gloss, ribbon, arrow and tag */ body:not(#tb-nb):is(.tb-hbl-gloss, .tb-hbl-ribbon, .tb-hbl-arrow, .tb-hbl-tag) :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background-image: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 48%, rgba(0,0,0,.06) 52%, rgba(0,0,0,.20) 100%) !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); font-weight: 800 !important; letter-spacing: 0; } body:not(#tb-nb).tb-hbl-gloss :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { border-radius: 6px !important; box-shadow: 0 4px 10px -3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15) !important; border: 0 !important; } /* ribbon: flush with the card edge, a dark fold tucked behind */ body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r) { right: 0 !important; left: auto !important; gap: max(7px, var(--tbx-bg-gap, 5px)) !important; } body:not(#tb-nb).tb-hbl-ribbon :is(article.tiob-card .tiob-badges, .tbx-flags--l, .tbb-wrap .tiob-badges) { left: 0 !important; gap: 7px !important; } body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { position: relative; overflow: visible !important; border: 0 !important; border-radius: 5px 0 0 5px !important; padding-inline: 10px 9px !important; box-shadow: 0 3px 7px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35) !important; } body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge)::after { content: ""; position: absolute; top: 100%; right: 0; width: 0; height: 0; border-style: solid; border-width: 6px 0 0 6px; border-color: rgba(0,0,0,.55) transparent transparent transparent; filter: brightness(.6); } body:not(#tb-nb).tb-hbl-ribbon :is(article.tiob-card .tiob-badge, .tbx-flags--l .tbx-badge, .tbb-wrap .tiob-badge) { border-radius: 0 5px 5px 0 !important; } body:not(#tb-nb).tb-hbl-ribbon :is(article.tiob-card .tiob-badge, .tbx-flags--l .tbx-badge, .tbb-wrap .tiob-badge)::after { right: auto; left: 0; border-width: 6px 6px 0 0; } body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-card__badges, .tbx-flags, .tc3-badges) .tbx-badge > span { overflow: hidden; text-overflow: ellipsis; } /* arrow: flag from the edge with a pointed inner end */ body:not(#tb-nb).tb-hbl-arrow :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r) { right: 0 !important; left: auto !important; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); } body:not(#tb-nb).tb-hbl-arrow :is(article.tiob-card .tiob-badges, .tbx-flags--l, .tbb-wrap .tiob-badges) { left: 0 !important; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); } body:not(#tb-nb).tb-hbl-arrow :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 9px 2px 17px !important; justify-content: center !important; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); } body:not(#tb-nb).tb-hbl-arrow :is(article.tiob-card .tiob-badge, .tbx-flags--l .tbx-badge, .tbb-wrap .tiob-badge) { padding: 2px 17px 2px 9px !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); } /* tag: price tag with a hole at the point */ body:not(#tb-nb).tb-hbl-tag :is(.tbx-card__badges, .tbx-flags, .tc3-badges, article.tiob-card .tiob-badges) { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } body:not(#tb-nb).tb-hbl-tag :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { position: relative; border: 0 !important; box-shadow: none !important; border-radius: 0 4px 4px 0 !important; padding: 2px 9px 2px 19px !important; justify-content: center !important; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); -webkit-mask: radial-gradient(circle 2.5px at 9px 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 2.5px at 9px 50%, transparent 98%, #000 100%); } body:not(#tb-nb).tb-hbl-tag :is(article.tiob-card .tiob-badge, .tbx-flags--l .tbx-badge, .tbb-wrap .tiob-badge) { border-radius: 4px 0 0 4px !important; padding: 2px 19px 2px 9px !important; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); -webkit-mask: radial-gradient(circle 2.5px at calc(100% - 9px) 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 2.5px at calc(100% - 9px) 50%, transparent 98%, #000 100%); } /* icon-only badges keep a simple rounded square in every design */ body:not(#tb-nb):is(.tb-hbl-arrow, .tb-hbl-tag) :is(.tbx-badge--ic) { clip-path: none !important; -webkit-mask: none !important; mask: none !important; padding: 2px 5px !important; border-radius: 6px !important; justify-content: center !important; } body:not(#tb-nb):is(.tb-hbl-gloss, .tb-hbl-ribbon, .tb-hbl-arrow, .tb-hbl-tag) article.tiob-card .tiob-badge-featured { background-color: var(--hk-star, #f59e0b); } /* ===== 1.2.70: mirror edge looks on left-side stacks found by JS (tb-edge-l) ===== */ body:not(#tb-nb).tb-hbl-ribbon .tb-edge-l > :not(.tbx-badge--ic) { border-radius: 0 5px 5px 0 !important; } body:not(#tb-nb).tb-hbl-ribbon .tb-edge-l > *::after { right: auto !important; left: 0; border-width: 6px 6px 0 0 !important; } body:not(#tb-nb).tb-hbl-arrow .tb-edge-l > :not(.tbx-badge--ic) { padding: 2px 17px 2px 9px !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%) !important; } body:not(#tb-nb).tb-hbl-tag .tb-edge-l > :not(.tbx-badge--ic) { border-radius: 4px 0 0 4px !important; padding: 2px 19px 2px 9px !important; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%) !important; -webkit-mask: radial-gradient(circle 2.5px at calc(100% - 9px) 50%, transparent 98%, #000 100%) !important; mask: radial-gradient(circle 2.5px at calc(100% - 9px) 50%, transparent 98%, #000 100%) !important; } /* ===== 1.2.70: badge colour as a variable (--bk) so light designs can use it for text ===== */ :where(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { --bk: var(--tbx-bc, var(--tb-pri, #2563eb)); } .tbx-badge--free, .tc3 .tc3-badge--free, article.tiob-card .tiob-badge-free { --bk: var(--tbx-bc, var(--tb-ok, #16a34a)); } .tbx-badge--new, article.tiob-card .tiob-badge-new, .tbb-wrap .tiob-badge-new { --bk: var(--tbx-bc, #7c3aed); } .tc3 .tc3-badge--new { --bk: var(--tbx-bc, var(--c-pri, #7c3aed)); } .tbx-badge--upd, article.tiob-card .tiob-badge-upd { --bk: var(--tbx-bc, #0891b2); } .tc3 .tc3-badge--upd { --bk: var(--tbx-bc, #334155); } .tbx-badge--off, .tc3 .tc3-badge--off { --bk: var(--tbx-bc, var(--tb-bad, #dc2626)); } .tbx-badge--deal { --bk: var(--tbx-bc, #e11d48); } .tbx-badge--editor, article.tiob-card .tiob-badge-featured { --bk: var(--tbx-bc, #d97706); } .tbx-badge--custom { --bk: var(--tbx-bc, #0f172a); } .tbx-badge--field { --bk: var(--tbx-bc, #2563eb); } article.tiob-card .tiob-badge-hot { --bk: var(--tbx-bc, #db2777); } .tc3 .tc3-badge--out, article.tiob-card .tiob-badge-out { --bk: var(--tbx-bc, #64748b); } body:not(#tb-nb).tb-hb-mono :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not([style*="--tbx-bc"]) { --bk: var(--tb-hbm); } /* soft: light tint, coloured text and a dot – calm and easy to read */ body:not(#tb-nb).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background: color-mix(in srgb, var(--bk) 13%, #fff) !important; background-image: none !important; color: color-mix(in srgb, var(--bk) 82%, #000) !important; border: 1px solid color-mix(in srgb, var(--bk) 28%, #fff) !important; border-radius: 999px !important; box-shadow: 0 2px 8px -2px rgba(15,23,42,.18) !important; text-shadow: none !important; font-weight: 800 !important; gap: 5px !important; } body:not(#tb-nb).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic)::before { content: "" !important; display: inline-block !important; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bk) !important; opacity: 1 !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk) 22%, transparent); } body:not(#tb-nb).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) :is(svg, small, span) { color: inherit !important; } body:not(#tb-nb).tb-hbl-soft .tc3 .tc3-badge--off::before { content: "" !important; } /* glass: frosted white with a coloured edge bar */ body:not(#tb-nb).tb-hbl-glass :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background: rgba(255,255,255,.9) !important; background-image: none !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) !important; color: color-mix(in srgb, var(--bk) 85%, #000) !important; border: 0 !important; border-inline-start: 3px solid var(--bk) !important; border-radius: 8px !important; box-shadow: 0 4px 14px -4px rgba(15,23,42,.35) !important; text-shadow: none !important; font-weight: 800 !important; } body:not(#tb-nb).tb-hbl-glass :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) :is(svg, small, span) { color: inherit !important; } body:not(#tb-nb).tb-hbl-glass :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) svg { color: var(--bk) !important; } body:not(#tb-nb).tb-hbl-glass article.tiob-card .tiob-badge::before { display: none !important; } /* ===== 1.2.70: discount percent design (pct_look: circle | seal | bookmark | sticker | ticket) – deal box + product list card ===== */ :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { --pc: var(--tb-pctc, #e11d48); } body:not(#tb-nb).tb-pct-c :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off), body:not(#tb-nb).tb-pct-c :is(.tc3 .tc3-off, .tiob-product .tiob-sale-badge) { background-color: var(--pc) !important; background: var(--tb-pctc) !important; } body:not(#tb-nb):is(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; } body:not(#tb-nb):is(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .56rem !important; font-weight: 700 !important; margin: 0 !important; opacity: .95; } /* seal: starburst stamp */ body:not(#tb-nb).tb-pcl-seal :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: 64px !important; height: 64px !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; background: radial-gradient(circle at 50% 50%, transparent 0 56%, rgba(255,255,255,.55) 57% 59%, transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--pc) 75%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 75%, #000)) !important; clip-path: polygon(50.0% 0.0%, 55.6% 7.4%, 62.9% 1.7%, 66.5% 10.3%, 75.0% 6.7%, 76.2% 15.9%, 85.4% 14.6%, 84.1% 23.8%, 93.3% 25.0%, 89.7% 33.5%, 98.3% 37.1%, 92.6% 44.4%, 100.0% 50.0%, 92.6% 55.6%, 98.3% 62.9%, 89.7% 66.5%, 93.3% 75.0%, 84.1% 76.2%, 85.4% 85.4%, 76.2% 84.1%, 75.0% 93.3%, 66.5% 89.7%, 62.9% 98.3%, 55.6% 92.6%, 50.0% 100.0%, 44.4% 92.6%, 37.1% 98.3%, 33.5% 89.7%, 25.0% 93.3%, 23.8% 84.1%, 14.6% 85.4%, 15.9% 76.2%, 6.7% 75.0%, 10.3% 66.5%, 1.7% 62.9%, 7.4% 55.6%, 0.0% 50.0%, 7.4% 44.4%, 1.7% 37.1%, 10.3% 33.5%, 6.7% 25.0%, 15.9% 23.8%, 14.6% 14.6%, 23.8% 15.9%, 25.0% 6.7%, 33.5% 10.3%, 37.1% 1.7%, 44.4% 7.4%); font-size: 1.05rem !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0,0,0,.3); display: flex !important; flex-direction: column; align-items: center; justify-content: center; } /* bookmark: hangs from the top edge with a notch */ body:not(#tb-nb).tb-pcl-bookmark :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 0 !important; bottom: auto !important; width: 48px !important; height: auto !important; min-height: 60px; padding: 9px 0 16px !important; border-radius: 0 !important; border: 0 !important; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 80%, #000) 0, var(--pc) 22%, color-mix(in srgb, var(--pc) 85%, #fff) 50%, var(--pc) 78%, color-mix(in srgb, var(--pc) 80%, #000) 100%) !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); box-shadow: none !important; font-size: 1rem !important; font-weight: 900 !important; text-shadow: 0 1px 1px rgba(0,0,0,.3); display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; } /* sticker: tilted label with a stitched edge */ body:not(#tb-nb).tb-pcl-sticker :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: auto !important; height: auto !important; min-width: 56px; padding: 8px 10px !important; border-radius: 14px !important; border: 0 !important; background: linear-gradient(145deg, color-mix(in srgb, var(--pc) 80%, #fff), var(--pc) 60%) !important; outline: 1.5px dashed rgba(255,255,255,.75); outline-offset: -5px; rotate: -8deg; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--pc) 70%, #000) !important; font-size: 1.05rem !important; font-weight: 900 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; } /* ticket: coupon with punched sides */ body:not(#tb-nb).tb-pcl-ticket :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: auto !important; height: auto !important; flex-direction: row !important; align-items: baseline !important; gap: 4px !important; padding: 7px 16px !important; border-radius: 6px !important; border: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 85%, #fff), var(--pc)) !important; font-size: .95rem !important; font-weight: 900 !important; box-shadow: none !important; -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat; mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat; display: flex !important; } body:not(#tb-nb).tb-pcl-ticket :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .68rem !important; } body:not(#tb-nb).tb-pcl-ticket .tbx-deal__pct { filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); } @media (max-width: 767.98px) { body:not(#tb-nb).tb-pcl-seal :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: 50px !important; height: 50px !important; font-size: .85rem !important; } body:not(#tb-nb).tb-pcl-bookmark :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: 40px !important; min-height: 50px; font-size: .85rem !important; } body:not(#tb-nb).tb-pcl-sticker :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { min-width: 46px; padding: 6px 8px !important; font-size: .85rem !important; } body:not(#tb-nb).tb-pcl-ticket :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { padding: 5px 12px !important; font-size: .8rem !important; } } /* inline percent pills next to prices (list card, product page) follow the same colour and get a light gloss */ body:not(#tb-nb):is(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(.tc3 .tc3-off, .tiob-product .tiob-sale-badge) { background-image: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.1)) !important; } /* floating designs keep a small gap from the card edge */ body:not(#tb-nb):is(.tb-hbl-soft, .tb-hbl-glass, .tb-hbl-gloss, .tb-hbl-tag) :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r, .tb-edge-r) { right: 8px !important; left: auto !important; gap: 5px !important; } body:not(#tb-nb):is(.tb-hbl-soft, .tb-hbl-glass, .tb-hbl-gloss, .tb-hbl-tag) :is(article.tiob-card .tiob-badges, .tbx-flags--l, .tb-edge-l) { left: 8px !important; right: auto !important; gap: 5px !important; } /* ===== 1.2.71: cleaner badge designs ===== */ /* soft: no dot, just text and icon on a light tint */ body:not(#tb-nb):not(#tb-nb2).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge)::before { content: none !important; display: none !important; } body:not(#tb-nb).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) svg { color: var(--bk) !important; } body:not(#tb-nb).tb-hbl-soft :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { padding: 3px 10px !important; gap: 4px !important; } /* flat colour for ribbon, arrow and tag – no glossy stripe */ body:not(#tb-nb):is(.tb-hbl-gloss, .tb-hbl-ribbon, .tb-hbl-arrow, .tb-hbl-tag) :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background-color: var(--bk) !important; color: #fff !important; text-shadow: none !important; font-weight: 700 !important; } body:not(#tb-nb):is(.tb-hbl-ribbon, .tb-hbl-arrow, .tb-hbl-tag) :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background-image: none !important; } /* gloss → "gradient": soft diagonal gradient, rounded, tinted shadow */ body:not(#tb-nb).tb-hbl-gloss :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { background-image: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(0,0,0,.10)) !important; border-radius: 999px !important; padding: 3px 11px !important; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--bk) 75%, #000) !important; } /* ribbon: clean edge band, fold in a darker shade of the same colour */ body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { box-shadow: 0 2px 6px -2px rgba(0,0,0,.35) !important; padding-inline: 11px 10px !important; } body:not(#tb-nb).tb-hbl-ribbon :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge)::after { border-color: color-mix(in srgb, var(--bk) 55%, #000) transparent transparent transparent !important; filter: none !important; } body:not(#tb-nb).tb-hbl-ribbon :is(article.tiob-card .tiob-badge, .tbx-flags--l .tbx-badge, .tbb-wrap .tiob-badge, .tb-edge-l > *)::after { border-color: color-mix(in srgb, var(--bk) 55%, #000) transparent transparent transparent !important; } /* arrow and tag: lighter shadow */ body:not(#tb-nb):is(.tb-hbl-arrow, .tb-hbl-tag) :is(.tbx-card__badges, .tbx-flags, .tc3-badges, article.tiob-card .tiob-badges, .tbb-wrap .tiob-badges) { filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)) !important; } /* glass: white pill, coloured text and icon, thin coloured ring (no side bar) */ body:not(#tb-nb).tb-hbl-glass :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge) { border: 1px solid color-mix(in srgb, var(--bk) 30%, #fff) !important; border-inline-start-width: 1px !important; border-radius: 999px !important; padding: 3px 10px !important; } /* ===== 1.2.71: discount percent in badge stacks (home cards, modules, product list) – coupon chip ===== */ :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off), .tbb-wrap .tbb-off { --pc: var(--tb-pctc, #e11d48); } body.tb-hbl-flat:not(#tb-nb):not(#tb-nb2) :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) { background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 78%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 82%, #000)) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; padding: 3px 12px !important; font-weight: 900 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25) !important; clip-path: none !important; box-shadow: none !important; outline: 1px dashed rgba(255,255,255,.65); outline-offset: -3px; -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 95%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 95%, #000 100%) right / 51% 100% no-repeat !important; mask: radial-gradient(circle 4px at 0 50%, transparent 95%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 95%, #000 100%) right / 51% 100% no-repeat !important; } body.tb-hbl-flat:not(#tb-nb):not(#tb-nb2) :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)::before, body.tb-hbl-flat:not(#tb-nb):not(#tb-nb2) :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)::after { content: none !important; display: none !important; } body.tb-hbl-flat:not(#tb-nb):not(#tb-nb2) :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) :is(svg, span, small) { color: #fff !important; } /* percent on images, default "circle" design made richer: gradient, white ring, tinted shadow */ body:not(#tb-nb):not(#tb-nb2):not(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { --pc: var(--tb-pctc, #e11d48); background: linear-gradient(140deg, color-mix(in srgb, var(--pc) 75%, #fff), var(--pc) 50%, color-mix(in srgb, var(--pc) 80%, #000)) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 14px -4px color-mix(in srgb, var(--pc) 70%, #000) !important; font-weight: 900 !important; } body:not(#tb-nb):not(#tb-nb2):not(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) .tbb-wrap .tbb-off { padding: 4px 10px !important; border-radius: 999px !important; font-size: 13px !important; top: 10px !important; right: 10px !important; } .tbb-wrap .tbb-off { align-items: center !important; } .tbb-wrap .tbb-off small { font-size: .62rem !important; } .tbb-wrap .tiob-badge-free, .tbb-wrap .tiob-badge-new { --bk: var(--tbx-bc, #059669); } .tbb-wrap .tiob-badge-upd { --bk: var(--tbx-bc, #2563eb); } .tbb-wrap .tiob-badge-hot { --bk: var(--tbx-bc, #db2777); } .tbb-wrap .tiob-badge-featured { --bk: var(--tbx-bc, #d97706); } .tbb-wrap .tiob-badge-out { --bk: var(--tbx-bc, #0f172a); } /* ===== 1.2.72: icon-only badges – one clean round design in every badge look ===== */ body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic { --bk: var(--tbx-bc, var(--tb-pri, #2563eb)); width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--bk) !important; background-image: none !important; color: #fff !important; border: 2px solid #fff !important; outline: 0 !important; box-shadow: 0 3px 8px -2px rgba(15,23,42,.35) !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; text-shadow: none !important; transition: transform .15s ease; } body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic::before, body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic::after { content: none !important; display: none !important; } body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic svg { width: 14px !important; height: 14px !important; color: #fff !important; margin: 0 !important; } body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic:hover { transform: scale(1.08); } /* light looks: white circle, icon in the badge colour */ body:not(#tb-nb):not(#tb-nb2):is(.tb-hbl-soft, .tb-hbl-glass) .tbx-badge--ic { background: #fff !important; color: var(--bk) !important; border: 1.5px solid color-mix(in srgb, var(--bk) 35%, #fff) !important; } body:not(#tb-nb):not(#tb-nb2):is(.tb-hbl-soft, .tb-hbl-glass) .tbx-badge--ic svg { color: var(--bk) !important; } /* a row of icons keeps a gap from the edge in every look */ body:not(#tb-nb):not(#tb-nb2) :is(.tbx-card__badges, .tbx-flags, .tc3-badges, .tiob-badges):not(:has(> :not(.tbx-badge--ic))) { gap: 5px !important; } body:not(#tb-nb):not(#tb-nb2) :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r, .tb-edge-r):not(:has(> :not(.tbx-badge--ic))) { right: 8px !important; filter: none !important; } body:not(#tb-nb):not(#tb-nb2) :is(article.tiob-card .tiob-badges, .tbx-flags--l, .tb-edge-l, .tbb-wrap .tiob-badges):not(:has(> :not(.tbx-badge--ic))) { left: 8px !important; filter: none !important; } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic { width: 24px !important; height: 24px !important; } body:not(#tb-nb):not(#tb-nb2) .tbx-badge--ic svg { width: 12px !important; height: 12px !important; } } /* ===== 1.2.72: product list card – percent shapes fit their text and stay inside the image ===== */ body:not(#tb-nb):not(#tb-nb2):is(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { white-space: nowrap; line-height: 1.05 !important; } body:not(#tb-nb):not(#tb-nb2):is(.tb-pcl-seal, .tb-pcl-bookmark, .tb-pcl-sticker, .tb-pcl-ticket) :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .58rem !important; white-space: nowrap; } body:not(#tb-nb):not(#tb-nb2).tb-pcl-bookmark :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 0 !important; right: 14px !important; left: auto !important; width: auto !important; min-width: 46px; padding: 9px 7px 15px !important; border-radius: 0 !important; font-size: 1.05rem !important; } body:not(#tb-nb):not(#tb-nb2).tb-pcl-seal :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 10px !important; right: 10px !important; left: auto !important; border-radius: 0 !important; } body:not(#tb-nb):not(#tb-nb2).tb-pcl-sticker :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 12px !important; right: 12px !important; left: auto !important; border-radius: 14px !important; } body:not(#tb-nb):not(#tb-nb2).tb-pcl-ticket :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 12px !important; right: 12px !important; left: auto !important; border-radius: 6px !important; flex-direction: row !important; align-items: baseline !important; } body:not(#tb-nb):not(#tb-nb2).tb-pcl-ticket :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .68rem !important; } /* left-edge stacks: in RTL the cross-axis start is the right side, so pin the badges to the left edge */ body:not(#tb-nb):not(#tb-nb2) :is(article.tiob-card .tiob-badges, .tbb-wrap .tiob-badges, .tbx-flags--l, .tb-edge-l):dir(rtl) { align-items: flex-end !important; } body:not(#tb-nb):not(#tb-nb2) :is(article.tiob-card .tiob-badges, .tbb-wrap .tiob-badges, .tbx-flags--l, .tb-edge-l):dir(ltr) { align-items: flex-start !important; } body:not(#tb-nb):not(#tb-nb2) :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r, .tb-edge-r):dir(rtl) { align-items: flex-start !important; } /* ===== 1.2.73: ribbon3d – glossy ribbons that wrap around the card edge, with a swallow-tail inner end (all text badges) ===== */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-home .tbx-card__badges, .tc3 .tc3-badges, .tbx-flags--r, .tb-edge-r) { right: 0 !important; left: auto !important; gap: 9px !important; filter: none !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(article.tiob-card .tiob-badges, .tbb-wrap .tiob-badges, .tbx-flags--l, .tb-edge-l) { left: 0 !important; right: auto !important; gap: 9px !important; filter: none !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic) { position: relative !important; isolation: isolate; overflow: visible !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,.28) !important; font-weight: 800 !important; min-height: 24px; line-height: 1.5 !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic) :is(svg, span, small) { color: #fff !important; position: relative; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic)::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; width: auto !important; height: auto !important; border-radius: 0 !important; opacity: 1 !important; box-shadow: none !important; background: linear-gradient(180deg, rgba(255,255,255,.38) 0, rgba(255,255,255,.10) 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%), var(--bk) !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic)::after { content: "" !important; display: block !important; position: absolute; top: 100%; width: 0; height: 0; border-style: solid; filter: none !important; border-color: color-mix(in srgb, var(--bk) 50%, #000) transparent transparent transparent !important; } /* right edge: tail notch on the inner (left) end, fold under the right end */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-home .tbx-card__badges > .tbx-badge, .tc3 .tc3-badges > .tc3-badge, .tbx-flags--r > .tbx-badge, .tb-edge-r > *):not(.tbx-badge--ic) { padding: 2px 10px 2px 18px !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-home .tbx-card__badges > .tbx-badge, .tc3 .tc3-badges > .tc3-badge, .tbx-flags--r > .tbx-badge, .tb-edge-r > *):not(.tbx-badge--ic)::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); border-top-left-radius: 0 !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-home .tbx-card__badges > .tbx-badge, .tc3 .tc3-badges > .tc3-badge, .tbx-flags--r > .tbx-badge, .tb-edge-r > *):not(.tbx-badge--ic)::after { right: 0; left: auto; border-width: 6px 0 0 6px !important; } /* left edge: mirrored */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(article.tiob-card .tiob-badges > .tiob-badge, .tbb-wrap .tiob-badges > .tiob-badge, .tbx-flags--l > .tbx-badge, .tb-edge-l > *):not(.tbx-badge--ic) { padding: 2px 18px 2px 10px !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(article.tiob-card .tiob-badges > .tiob-badge, .tbb-wrap .tiob-badges > .tiob-badge, .tbx-flags--l > .tbx-badge, .tb-edge-l > *):not(.tbx-badge--ic)::before { clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(article.tiob-card .tiob-badges > .tiob-badge, .tbb-wrap .tiob-badges > .tiob-badge, .tbx-flags--l > .tbx-badge, .tb-edge-l > *):not(.tbx-badge--ic)::after { left: 0; right: auto; border-width: 6px 6px 0 0 !important; border-color: color-mix(in srgb, var(--bk) 50%, #000) transparent transparent transparent !important; } /* the discount inside a stack becomes a red ribbon too */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-badge--off, .tc3-badge--off) { --bk: var(--tb-pctc, #e11d48); } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-card__badges .tbx-badge, .tbx-flags .tbx-badge, .tc3 .tc3-badge, article.tiob-card .tiob-badge, .tbb-wrap .tiob-badge):not(.tbx-badge--ic) { min-height: 21px; font-size: .66rem !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(.tbx-home .tbx-card__badges > .tbx-badge, .tc3 .tc3-badges > .tc3-badge, .tbx-flags--r > .tbx-badge, .tb-edge-r > *):not(.tbx-badge--ic) { padding: 1px 8px 1px 15px !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-hbl-ribbon3d :is(article.tiob-card .tiob-badges > .tiob-badge, .tbb-wrap .tiob-badges > .tiob-badge, .tbx-flags--l > .tbx-badge, .tb-edge-l > *):not(.tbx-badge--ic) { padding: 1px 15px 1px 8px !important; } } /* ===== 1.2.73: pct_look corner – diagonal ribbon across the image corner ===== */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(.tbx-deal__media, .tbx-card__media, article.tiob-card .tiob-image-wrap, .tbb-wrap) { overflow: hidden !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { --pc: var(--tb-pctc, #e11d48); position: absolute !important; top: 22px !important; bottom: auto !important; width: 150px !important; height: auto !important; min-width: 0 !important; padding: 5px 0 !important; margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; animation: none !important; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06) 45%, rgba(0,0,0,.18)), var(--pc) !important; color: #fff !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1.2 !important; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.3) !important; box-shadow: 0 3px 8px -2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2) !important; z-index: 4 !important; rotate: none !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .7rem !important; font-weight: 700 !important; margin: 0 !important; color: #fff !important; white-space: nowrap; } /* product list and modules: right corner (badges are on the left) */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { right: -40px !important; left: auto !important; transform: rotate(45deg) !important; } /* home: left corner (badges are on the right) */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner .tbx-deal__pct { left: -40px !important; right: auto !important; inset-inline-start: auto; transform: rotate(-45deg) !important; } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 19px !important; width: 140px !important; padding: 3px 0 !important; font-size: .78rem !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { right: -40px !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-corner .tbx-deal__pct { left: -40px !important; } } /* ===== 1.2.73: pct_look round – discount as a clean circle matching the round icon badges ===== */ body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off), body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) { --pc: var(--tb-pctc, #e11d48); display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; border-radius: 50% !important; padding: 0 !important; margin: 0 !important; background: var(--pc) !important; background-image: none !important; color: #fff !important; border: 2px solid #fff !important; outline: 0 !important; box-shadow: 0 3px 8px -2px rgba(15,23,42,.35) !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; text-shadow: none !important; text-align: center !important; white-space: normal !important; font-weight: 900 !important; line-height: 1.05 !important; rotate: none !important; transform: none !important; animation: none !important; filter: none !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off)::before, body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off)::after, body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)::before, body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)::after { content: none !important; display: none !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: 48px !important; height: 48px !important; min-width: 0 !important; min-height: 0 !important; font-size: .95rem !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: .55rem !important; font-weight: 700 !important; margin: 1px 0 0 !important; color: #fff !important; white-space: nowrap; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) { width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; font-size: .62rem !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) :is(span, svg) { color: #fff !important; display: block; max-width: 34px; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) svg { display: none !important; } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-deal__pct, article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { width: 40px !important; height: 40px !important; font-size: .8rem !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off) { width: 34px !important; height: 34px !important; font-size: .55rem !important; } } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small { font-size: 0 !important; margin: 0 !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) small::after { content: "٪" !important; display: inline !important; font-size: .7rem; font-weight: 800; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { flex-direction: row !important; align-items: baseline !important; padding-top: 0 !important; line-height: 46px !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)[data-pct] > span { font-size: 0 !important; } body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(.tbx-card__badges .tbx-badge--off, .tbx-flags .tbx-badge--off, .tc3 .tc3-badge--off, article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off)[data-pct]::after { content: attr(data-pct) !important; display: block !important; position: static !important; border: 0 !important; width: auto !important; height: auto !important; background: none !important; font-size: .72rem; font-weight: 900; color: #fff; } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { line-height: 38px !important; } } @media (max-width: 575.98px) { body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3).tb-pcl-round .tbx-deal__pct small { display: none !important; } } /* ===== 1.2.74: discount inside the product-list / module badge stack ===== */ article.tiob-card .tiob-badge-off, .tbb-wrap .tiob-badge-off { --bk: var(--tbx-bc, var(--tb-pctc, #e11d48)); background: var(--tb-pctc, #e11d48); color: #fff; } /* ===== 1.2.75: product lists, modules and search use the home badge stack (.tbx-flags--r.tbx-lbadges) ===== */ .tbx-flags.tbx-lbadges { top: 8px; right: 8px; left: auto; gap: var(--tbx-bg-gap, 5px); max-width: 60%; z-index: 3; align-items: stretch; } .tbx-flags.tbx-lbadges:has(.tbx-badge:not(.tbx-badge--ic)) { top: 10px; right: 0; } .tbx-flags.tbx-lbadges .tbx-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 2px 9px; border-radius: 7px; font-size: .7rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); } .tbx-flags.tbx-lbadges .tbx-badge > span { overflow: hidden; text-overflow: ellipsis; } .tbx-flags.tbx-lbadges .tbx-badge svg { width: 13px; height: 13px; flex: none; } .tbx-flags.tbx-lbadges .tbx-badge[style*="--tbx-bc"] { background: var(--tbx-bc) !important; } .tbx-badge--out { background: #64748b; } .tbx-badge--featured { background: #d97706; } .tbx-badge--hot { background: #db2777; } .tbx-badge--out { --bk: var(--tbx-bc, #64748b); } .tbx-badge--featured { --bk: var(--tbx-bc, #d97706); } .tbx-badge--hot { --bk: var(--tbx-bc, #db2777); } .tbx-flags .tbx-badge--free { --bk: var(--tbx-bc, var(--tb-ok, #16a34a)); } .tbx-flags .tbx-badge--new { --bk: var(--tbx-bc, #7c3aed); } .tbx-flags .tbx-badge--upd { --bk: var(--tbx-bc, #0891b2); } .tbx-flags .tbx-badge--off { --bk: var(--tbx-bc, var(--tb-bad, #dc2626)); } @media (max-width: 575.98px) { .tbx-flags.tbx-lbadges { top: 6px; right: 6px; gap: 4px; } .tbx-flags.tbx-lbadges .tbx-badge { min-height: 20px; padding: 1px 7px; font-size: .64rem; } } /* the classic list card used to move its stack to the bottom on phones – keep it at the top like home */ article.tiob-card .tbx-lbadges { bottom: auto !important; } /* ===== 1.2.75: version and compatibility chips – matching colours (sizes unchanged) ===== */ :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { --tb-cc: var(--tb-cmpc, var(--tb-verc, var(--tb-pri, #4f46e5))) !important; } :is(.tbx-ver, .tc3 .tc3-chip--ver, article.tiob-card .tiob-meta-row--ver, .tiob-product-version) { --tb-vc: var(--tb-verc, var(--tb-pri, #4f46e5)); } /* tint (default) for the version chip too, with the same thin ring on both */ html body.tb-vst-tint:not(#tb-nb) :is(.tbx-ver, .tc3 .tc3-chip--ver, article.tiob-card .tiob-meta-row--ver, .tiob-product-version) { background: color-mix(in srgb, var(--tb-vc) 10%, #fff) !important; color: color-mix(in srgb, var(--tb-vc) 85%, #000) !important; border: 1px solid color-mix(in srgb, var(--tb-vc) 22%, #fff) !important; box-shadow: none !important; } html body.tb-vst-tint:not(#tb-nb) :is(.tbx-ver, .tc3 .tc3-chip--ver, article.tiob-card .tiob-meta-row--ver, .tiob-product-version) * { color: inherit !important; } html body.tb-cst-tint:not(#tb-nb) :is(.tc3 .tc3-chip--cmp, article.tiob-card .tiob-meta-row--cmp, .tbx-cf[class*="compat"], .tbx-cf--cmp, .tiob-product-compat) { background: color-mix(in srgb, var(--tb-cc) 10%, #fff) !important; color: color-mix(in srgb, var(--tb-cc) 85%, #000) !important; border: 1px solid color-mix(in srgb, var(--tb-cc) 22%, #fff) !important; } /* ===== 1.2.76: separate discount shape (pct_place = shape) sits on the LEFT corner, the badge stack keeps the right edge ===== */ html body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3):not(#tb-nb4) :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { right: auto !important; left: 10px !important; } html body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3):not(#tb-nb4).tb-pcl-bookmark :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { left: 14px !important; top: 0 !important; } html body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3):not(#tb-nb4).tb-pcl-corner :is(article.tiob-card .tiob-discount-badge, .tbb-wrap .tbb-off) { right: auto !important; left: -40px !important; transform: rotate(-45deg) !important; } /* ===== 1.2.76: hb_anim – gentle motion on the discount and special offer badges (works with every badge design) ===== */ @media (prefers-reduced-motion: no-preference) { body.tb-hba-shine :is(.tbx-badge--off, .tbx-badge--deal, .tiob-discount-badge, .tbb-off) { animation: tbHbShine 3s ease-in-out infinite; } body.tb-hba-pulse :is(.tbx-badge--off, .tbx-badge--deal, .tiob-discount-badge, .tbb-off) { animation: tbHbPulse 2.4s ease-in-out infinite; } body.tb-hba-pulse.tb-pcl-corner :is(.tiob-discount-badge, .tbb-off) { animation: tbHbShine 3s ease-in-out infinite; } } @keyframes tbHbShine { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.28) saturate(1.1); } } @keyframes tbHbPulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } } /* ===== 1.2.77: the discount badge follows the chosen badge design (ribbon, arrow, tag, soft, glass…); the coupon chip is only for "flat" ===== */ html body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3) :is(.tbx-card__badges, .tbx-flags, .tc3-badges) .tbx-badge--off { --bk: var(--tbx-bc, var(--tb-pctc, var(--tb-bad, #dc2626))); } html body:not(#tb-nb):not(#tb-nb2):not(#tb-nb3):not(.tb-hbl-flat):not(.tb-hbl-soft):not(.tb-hbl-glass):not(.tb-pcl-round) :is(.tbx-card__badges, .tbx-flags, .tc3-badges) .tbx-badge--off { background-color: var(--bk) !important; } /* home special offer: the percent shape is already on the image, so the discount badge is not repeated in the stack */ :is(.tbx-card, .tbx-deal__media):has(.tbx-deal__pct) :is(.tbx-card__badges, .tbx-flags) .tbx-badge--off { display: none !important; } /* ===== 1.2.78: product list card spacing (pgap_d / pgap_t / pgap_m) ===== */ body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgm, 12px) !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgm, 10px) !important; } @media (min-width: 768px) { body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgt, 18px) !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgt, 14px) !important; } } @media (min-width: 1024px) { body.tb-pcols-tiob .hikashop_products_listing:not(.tiob-list-mode) .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgd, 22px) !important; } body.tb-pcols-tiob .hikashop_products_listing.tiob-list-mode .hk-row-fluid:has(> .hikashop_product) { gap: var(--tb-pgd, 16px) !important; } } /* ===== 1.2.79: registration – email + phone and password + confirm side by side (pairs built by template.js) ===== */ .tb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; grid-column: 1 / -1; align-items: start; min-width: 0; } .tb-pair > * { min-width: 0; margin-inline: 0 !important; } .tb-pair > .hkform-group { display: block !important; } .tb-pair > .hkform-group > [class*="hkc-sm-"], .tb-pair > .hkform-group > [class*="hkc-md-"], .tb-pair > .hkform-group > [class*="hkc-lg-"] { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; text-align: right !important; } .tb-pair > .hkform-group > .hkcontrol-label { display: block; margin: 0 0 6px !important; } .tb-pair--pw { margin-top: 4px; } @media (max-width: 575.98px) { .tb-pair { grid-template-columns: minmax(0, 1fr); } } /* ===== 1.2.80: breaking-news ticker (.tbnews) ===== */ .tbnews { --tbn-c: var(--tb-pri, #4f46e5); --tbn-bg: color-mix(in srgb, var(--tbn-c) 7%, var(--tb-card, #fff)); --tbn-bd: color-mix(in srgb, var(--tbn-c) 18%, transparent); --tbn-tx: var(--tb-ink, #0f172a); --tbn-mu: var(--tb-mut, #64748b); margin: 14px 0 4px; } .tbnews--at-home { margin: 0; } .tbnews--dark, .tbnews--red { --tbn-c: #e11d48; } .tbnews__in { display: flex; align-items: center; gap: 0; height: 48px; padding: 5px; border: 1px solid var(--tbn-bd); border-radius: 16px; background: var(--tbn-bg); color: var(--tbn-tx); box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--tbn-c) 60%, transparent); overflow: hidden; } .tbnews__label { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px 0 16px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--tbn-c) 82%, #fff), var(--tbn-c) 55%, color-mix(in srgb, var(--tbn-c) 80%, #000)); color: #fff; font-size: .82rem; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--tbn-c) 75%, #000); z-index: 2; } .tbnews__label b { font-weight: 800; } .tbnews__ic { display: inline-flex; } .tbnews__ic svg { width: 16px; height: 16px; } .tbnews__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; } .tbnews__live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); animation: tbn-live 1.6s ease-out infinite; } @keyframes tbn-live { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } .tbnews__view { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; margin-inline: 6px; -webkit-mask: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%); mask: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%); } .tbnews__list { list-style: none; margin: 0; padding: 0; height: 100%; } .tbnews__item { display: flex; align-items: center; height: 100%; font-size: .9rem; font-weight: 600; white-space: nowrap; } .tbnews__item > a, .tbnews__item > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit !important; text-decoration: none !important; } .tbnews__item > a:hover .tbnews__t, .tbnews__item > a:focus-visible .tbnews__t { color: var(--tbn-c); text-decoration: underline; text-underline-offset: 4px; } .tbnews__t { overflow: hidden; text-overflow: ellipsis; transition: color .2s; } .tbnews__tag { flex: none; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tbn-c) 13%, transparent); color: var(--tbn-c); font-style: normal; font-size: .7rem; font-weight: 800; } .tbnews__tag.is-hot { background: #e11d48; color: #fff; } .tbnews__d { flex: none; color: var(--tbn-mu); font-size: .74rem; font-weight: 500; } /* marquee */ .tbnews--marquee .tbnews__list { display: flex; width: max-content; } .tbnews--marquee .tbnews__item { padding-inline: 0 26px; } .tbnews--marquee .tbnews__item::before { content: ""; width: 6px; height: 6px; margin-inline-end: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tbn-c) 45%, transparent); flex: none; } .tbnews--marquee.is-run .tbnews__list { animation: tbn-marq var(--tbn-dur, 30s) linear infinite; } .tbnews--marquee.is-paused .tbnews__list, .tbnews--marquee.is-run .tbnews__view:hover .tbnews__list, .tbnews--marquee.is-run .tbnews__view:focus-within .tbnews__list { animation-play-state: paused; } @keyframes tbn-marq { from { transform: translateX(0); } to { transform: translateX(50%); } } html[dir="ltr"] .tbnews--marquee.is-run .tbnews__list { animation-name: tbn-marq-l; } @keyframes tbn-marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* slide / fade: one item at a time */ :is(.tbnews--slide, .tbnews--fade) .tbnews__list { position: relative; } :is(.tbnews--slide, .tbnews--fade) .tbnews__item { position: absolute; inset: 0; padding-inline: 6px; opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; } :is(.tbnews--slide, .tbnews--fade) .tbnews__item.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; } .tbnews--slide .tbnews__item { transform: translateY(70%); } .tbnews--slide .tbnews__item.is-out { transform: translateY(-70%); } /* controls */ .tbnews__ctl { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-inline: 2px 4px; } .tbnews__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--tbn-bd); border-radius: 10px; background: color-mix(in srgb, var(--tb-card, #fff) 70%, transparent); color: var(--tbn-tx); cursor: pointer; transition: background .2s, color .2s; } .tbnews__btn:hover, .tbnews__btn:focus-visible { background: var(--tbn-c); border-color: var(--tbn-c); color: #fff; } .tbnews__btn svg { width: 15px; height: 15px; } .tbnews__pl, .tbnews.is-paused .tbnews__pz { display: none; } .tbnews.is-paused .tbnews__pl { display: block; } .tbnews.is-closed { display: none !important; } /* styles */ .tbnews--dark { --tbn-bg: #0f172a; --tbn-bd: #1e293b; --tbn-tx: #e2e8f0; --tbn-mu: #94a3b8; } .tbnews--dark .tbnews__btn { background: #1e293b; } .tbnews--light { --tbn-bg: var(--tb-card, #fff); --tbn-bd: var(--tb-line, #e5e7eb); } .tbnews--light .tbnews__in { box-shadow: 0 10px 26px -18px rgba(15,23,42,.45); } .tbnews--soft { --tbn-bg: color-mix(in srgb, var(--tbn-c) 12%, var(--tb-card, #fff)); --tbn-bd: transparent; } .tbnews--soft .tbnews__in { box-shadow: none; } .tbnews--glass .tbnews__in { background: color-mix(in srgb, var(--tb-card, #fff) 65%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-color: color-mix(in srgb, #fff 60%, var(--tbn-c) 12%); } .tbnews--red { --tbn-bg: linear-gradient(90deg, #be123c, #e11d48); --tbn-bd: transparent; --tbn-tx: #fff; --tbn-mu: rgba(255,255,255,.75); } .tbnews--red .tbnews__label { background: #fff; color: #e11d48; box-shadow: none; } .tbnews--red .tbnews__live { background: #e11d48; } .tbnews--red .tbnews__live::after { border-color: rgba(225,29,72,.6); } .tbnews--red .tbnews__tag { background: rgba(255,255,255,.2); color: #fff; } .tbnews--red .tbnews__item > a:hover .tbnews__t { color: #fff; } .tbnews--red .tbnews__item::before { background: rgba(255,255,255,.6) !important; } .tbnews--red .tbnews__btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); color: #fff; } html[data-theme="dark"] .tbnews:not(.tbnews--red) { --tbn-tx: #e2e8f0; --tbn-mu: #94a3b8; } @media (max-width: 767.98px) { .tbnews { margin-top: 10px; } .tbnews__in { height: 42px; padding: 4px; border-radius: 13px; } .tbnews__label { padding: 0 10px; font-size: .76rem; border-radius: 10px; } .tbnews--m-icon .tbnews__label b { display: none; } .tbnews--m-icon .tbnews__label { padding: 0 10px; } .tbnews--m-hide { display: none; } .tbnews__item { font-size: .82rem; } .tbnews__btn { width: 28px; height: 28px; border-radius: 8px; } .tbnews__btn[data-tbn="prev"], .tbnews__btn[data-tbn="next"] { display: none; } } @media (prefers-reduced-motion: reduce) { .tbnews__live::after { animation: none; } .tbnews--marquee .tbnews__list { animation: none !important; } .tbnews--marquee .tbnews__view { overflow-x: auto; -webkit-mask: none; mask: none; } :is(.tbnews--slide, .tbnews--fade) .tbnews__item { transition: none; transform: none; } } /* ===== 1.2.80: FAQ accordion (.tbfaq) ===== */ .tbfaq { --fq-c: var(--tb-pri, #4f46e5); } .tbfaq__head { text-align: center; margin: 0 0 22px; } .tbfaq__badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--fq-c) 12%, var(--tb-card, #fff)); color: var(--fq-c); font-size: .8rem; font-weight: 700; margin-bottom: 8px; } .tbfaq__head h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 900; color: var(--tb-ink, #0f172a); } .tbfaq__head p { margin: 8px auto 0; max-width: 640px; color: var(--tb-mut, #64748b); } .tbfaq__list { display: grid; gap: 14px; align-items: start; } @media (min-width: 992px) { .tbfaq--c2 .tbfaq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tbfaq__item { background: var(--tb-card, #fff); border-radius: 16px; box-shadow: 0 8px 26px -14px rgba(15, 23, 42, .22); border: 1px solid color-mix(in srgb, var(--tb-line, #e5e7eb) 60%, transparent); transition: box-shadow .25s, border-color .25s; } .tbfaq__item[open] { box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--fq-c) 45%, rgba(15,23,42,.4)); border-color: color-mix(in srgb, var(--fq-c) 22%, transparent); } .tbfaq__q { display: flex; align-items: center; gap: 12px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 800; font-size: 1rem; color: var(--tb-ink, #0f172a); border-radius: 16px; } .tbfaq__q::-webkit-details-marker { display: none; } .tbfaq__q::marker { content: ""; } .tbfaq__q:focus-visible { outline: 2px solid var(--fq-c); outline-offset: -2px; } .tbfaq__qt { flex: 1 1 auto; min-width: 0; } .tbfaq__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--fq-c) 12%, transparent); color: var(--fq-c); font-size: .82rem; font-weight: 800; } .tbfaq__ic { flex: none; display: inline-flex; color: var(--tb-mut, #64748b); transition: transform .3s var(--tb-ease, ease), color .2s; } .tbfaq__item[open] .tbfaq__ic { color: var(--fq-c); } .tbfaq--i-chev .tbfaq__item[open] .tbfaq__ic { transform: rotate(180deg); } .tbfaq__v { transition: opacity .25s; } .tbfaq--i-plus .tbfaq__item[open] .tbfaq__v { opacity: 0; } .tbfaq__a { padding: 0 24px 20px; color: var(--tb-mut, #64748b); line-height: 2; font-size: .93rem; } .tbfaq__a a { color: var(--fq-c); font-weight: 700; } .tbfaq__item[open] .tbfaq__a { animation: tbfq-in .3s ease; } @keyframes tbfq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .tbfaq__q:hover .tbfaq__qt { color: var(--fq-c); } /* lines */ .tbfaq--lines .tbfaq__list { gap: 0; } .tbfaq--lines .tbfaq__item { background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--tb-line, #e5e7eb); border-radius: 0; } .tbfaq--lines .tbfaq__q { padding-inline: 4px; } .tbfaq--lines .tbfaq__a { padding-inline: 4px; } /* one box */ .tbfaq--boxed .tbfaq__list { gap: 0; background: var(--tb-card, #fff); border-radius: 18px; box-shadow: 0 10px 30px -16px rgba(15,23,42,.25); overflow: hidden; border: 1px solid var(--tb-line, #e5e7eb); } .tbfaq--boxed .tbfaq__item { box-shadow: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--tb-line, #e5e7eb); } .tbfaq--boxed .tbfaq__item:last-child { border-bottom: 0; } .tbfaq--boxed .tbfaq__item[open] { background: color-mix(in srgb, var(--fq-c) 4%, var(--tb-card, #fff)); } @media (min-width: 992px) { .tbfaq--boxed.tbfaq--c2 .tbfaq__list { display: block; columns: 2; column-gap: 0; column-rule: 1px solid var(--tb-line, #e5e7eb); } .tbfaq--boxed.tbfaq--c2 .tbfaq__item { break-inside: avoid; } } /* soft */ .tbfaq--soft .tbfaq__item { background: color-mix(in srgb, var(--fq-c) 7%, var(--tb-card, #fff)); box-shadow: none; border-color: color-mix(in srgb, var(--fq-c) 12%, transparent); } .tbfaq--soft .tbfaq__item[open] { background: var(--tb-card, #fff); border-color: color-mix(in srgb, var(--fq-c) 25%, transparent); } .tbfaq__more { text-align: center; margin-top: 20px; } @media (max-width: 575.98px) { .tbfaq__q { padding: 16px 16px; font-size: .93rem; } .tbfaq__a { padding: 0 16px 16px; font-size: .88rem; } .tbfaq__list { gap: 10px; } } @media (prefers-reduced-motion: reduce) { .tbfaq__item[open] .tbfaq__a, .tbfaq__ic { animation: none; transition: none; } } /* 1.2.81: full-width ticker and centred FAQ */ .tbnews--full { margin-inline: 0; } .tbnews--full .tbnews__in { height: 52px; border-radius: 0; border-inline: 0; padding-block: 6px; padding-inline: max(16px, calc((100% - var(--tb-container, 1280px)) / 2 + 24px)); box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--tbn-c) 70%, transparent); } .tbnews--full.tbnews--at-top { margin-top: 0; } .tbx-newssec:not(.tb-wrap) .tbnews--full { width: 100%; } @media (max-width: 767.98px) { .tbnews--full .tbnews__in { height: 46px; padding-inline: 10px; } } .tbfaq__box { margin-inline: auto; } /* ===== 1.2.82: sections ported from mod_tiob_hero (.tbm-*) ===== */ .tbm-sub { margin: 2px 0 0; color: var(--tb-mut); font-size: .84rem; font-weight: 500; } @media (max-width: 767.98px) { .tbm-only-d { display: none !important; } } @media (min-width: 768px) { .tbm-only-m { display: none !important; } } .tbm-th { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--tb-pri-l, #eef2ff); color: var(--tb-pri); } .tbm-th img { width: 100%; height: 100%; object-fit: cover; } .tbm-price { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; color: var(--tb-ink); font-size: .82rem; } .tbm-price del { color: var(--tb-mut); font-weight: 500; font-size: .74rem; } .tbm-price.is-free { color: var(--tb-ok, #16a34a); } /* timeline */ .tbm-tl { display: grid; gap: 18px; } @media (min-width: 992px) { .tbm-tl.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } .tbm-tl__g { background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: var(--tb-r, 16px); padding: 16px 18px; } .tbm-tl__d { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .tbm-tl__d b { font-size: 1rem; color: var(--tb-ink); } .tbm-tl__d small { color: var(--tb-mut); font-size: .76rem; } .tbm-tl__l { list-style: none; margin: 0; padding: 0 14px 0 0; border-inline-start: 2px dashed color-mix(in srgb, var(--tb-pri) 25%, transparent); } .tbm-tl__l li { position: relative; } .tbm-tl__l li::before { content: ""; position: absolute; inset-inline-start: -21px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--tb-card); border: 3px solid var(--tb-pri); } .tbm-tl__i { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 12px; color: inherit !important; text-decoration: none !important; transition: background .2s; } .tbm-tl__i:hover { background: color-mix(in srgb, var(--tb-pri) 6%, transparent); } .tbm-tl__i .tbm-th { width: 44px; height: 44px; } .tbm-tl__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .tbm-tl__b b { font-size: .9rem; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbm-tl__b small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tbm-tl__b em { font-style: normal; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tb-pri) 12%, transparent); color: var(--tb-pri); } .tbm-tl__b em.is-new { background: color-mix(in srgb, var(--tb-ok, #16a34a) 14%, transparent); color: var(--tb-ok, #16a34a); } .tbm-tl__t { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .tbm-tl__t time { color: var(--tb-mut); font-size: .74rem; white-space: nowrap; } /* ranking */ .tbm-rk__tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--tb-card); border: 1px solid var(--tb-line); } .tbm-rk__tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 9px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--tb-mut); cursor: pointer; } .tbm-rk__tabs button.is-on { background: var(--tb-pri); color: #fff; box-shadow: 0 6px 14px -8px var(--tb-pri); } .tbm-rk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } @media (min-width: 992px) { .tbm-rk.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tbm-rk__i { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--tb-card); border: 1px solid var(--tb-line); color: inherit !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s; } .tbm-rk__i:hover { transform: translateY(-2px); box-shadow: var(--tb-sh, 0 10px 24px -14px rgba(15,23,42,.3)); border-color: color-mix(in srgb, var(--tb-pri) 30%, transparent); } .tbm-rk__n { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--tb-bg, #f1f5f9); color: var(--tb-mut); font-weight: 900; font-size: .95rem; } .tbm-rk__i.is-m1 .tbm-rk__n { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; box-shadow: 0 6px 14px -6px #f59e0b; } .tbm-rk__i.is-m2 .tbm-rk__n { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; box-shadow: 0 6px 14px -6px #94a3b8; } .tbm-rk__i.is-m3 .tbm-rk__n { background: linear-gradient(135deg, #fed7aa, #c2410c); color: #fff; box-shadow: 0 6px 14px -6px #c2410c; } .tbm-rk__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .tbm-rk__b b { font-size: .9rem; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbm-rk__b small { display: flex; gap: 8px; align-items: center; } .tbm-rk__s { flex: none; text-align: center; line-height: 1.2; } .tbm-rk__s b { display: block; font-size: 1rem; color: var(--tb-pri); font-weight: 900; } .tbm-rk__s small { color: var(--tb-mut); font-size: .7rem; } /* brands */ .tbm-br.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .tbm-br.is-mq { overflow: hidden; -webkit-mask: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent); } .tbm-br__t { display: flex; width: max-content; gap: 12px; animation: tbm-mq var(--mq, 35s) linear infinite; } .tbm-br__dup { display: contents; } .tbm-br.is-mq:hover .tbm-br__t { animation-play-state: paused; } @keyframes tbm-mq { to { transform: translateX(50%); } } html[dir="ltr"] .tbm-br__t { animation-name: tbm-mq-l; } @keyframes tbm-mq-l { to { transform: translateX(-50%); } } .tbm-br__i { display: flex; align-items: center; gap: 10px; min-width: 150px; padding: 12px 14px; border-radius: 14px; background: var(--tb-card); border: 1px solid var(--tb-line); color: inherit !important; text-decoration: none !important; transition: border-color .2s, box-shadow .2s; } .tbm-br.no-name .tbm-br__i { justify-content: center; min-width: 130px; } .tbm-br__i:hover { border-color: color-mix(in srgb, var(--tb-pri) 30%, transparent); box-shadow: var(--tb-sh, 0 10px 24px -14px rgba(15,23,42,.3)); } .tbm-br__l { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 40px; } .tbm-br__l img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter .25s, opacity .25s; } .tbm-br__l b { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-pri-l, #eef2ff); color: var(--tb-pri); } .tbm-br.is-gray .tbm-br__l img { filter: grayscale(1); opacity: .7; } .tbm-br.is-gray .tbm-br__i:hover img { filter: none; opacity: 1; } .tbm-br__n { display: flex; flex-direction: column; font-weight: 700; font-size: .86rem; color: var(--tb-ink); white-space: nowrap; } .tbm-br__n small { color: var(--tb-mut); font-weight: 500; font-size: .72rem; } /* recently viewed */ .tbm-rv__c { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--tb-line); background: var(--tb-card); border-radius: 10px; padding: 6px 12px; font: inherit; font-size: .8rem; color: var(--tb-mut); cursor: pointer; } .tbm-rv__c:hover { color: var(--tb-bad, #dc2626); border-color: currentColor; } .tbm-rv__l { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 190px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .tbm-rv__i { position: relative; scroll-snap-align: start; background: var(--tb-card); border: 1px solid var(--tb-line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; } .tbm-rv__i:hover { box-shadow: var(--tb-sh, 0 10px 24px -14px rgba(15,23,42,.3)); } .tbm-rv__i > a { display: block; color: inherit !important; text-decoration: none !important; } .tbm-rv__img { display: block; aspect-ratio: 4/3; background: var(--tb-pri-l, #eef2ff); } .tbm-rv__img img { width: 100%; height: 100%; object-fit: cover; } .tbm-rv__b { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; } .tbm-rv__b b { font-size: .84rem; color: var(--tb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .tbm-rv__b small { display: flex; justify-content: space-between; gap: 6px; color: var(--tb-mut); font-size: .72rem; } .tbm-rv__x { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(15,23,42,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s; } .tbm-rv__i:hover .tbm-rv__x, .tbm-rv__x:focus-visible { opacity: 1; } @media (hover: none) { .tbm-rv__x { opacity: 1; } } /* social */ .tbm-so.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .tbm-so.is-pills { display: flex; flex-wrap: wrap; gap: 10px; } .tbm-so__i { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--tb-card); border: 1px solid var(--tb-line); color: inherit !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s; } .tbm-so__i:hover { transform: translateY(-2px); border-color: var(--b); box-shadow: 0 12px 24px -16px var(--b); } .tbm-so__ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--b) 12%, transparent); color: var(--b); transition: background .2s, color .2s; } .tbm-so__i:hover .tbm-so__ic { background: var(--b); color: #fff; } .tbm-so__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tbm-so__b b { font-size: .92rem; color: var(--tb-ink); } .tbm-so__b small { color: var(--tb-mut); font-size: .76rem; } .tbm-so__c { flex: none; font-weight: 900; color: var(--b); font-size: .9rem; } .tbm-so.is-pills .tbm-so__i { padding: 6px 14px 6px 8px; border-radius: 999px; } .tbm-so.is-pills .tbm-so__ic { width: 32px; height: 32px; border-radius: 50%; } .tbm-so.is-pills .tbm-so__ic svg { width: 17px; height: 17px; } .tbm-so.is-pills .tbm-so__b small { display: none; } /* plans */ .tbm-pl { display: grid; gap: 18px; align-items: stretch; } @media (min-width: 768px) { .tbm-pl.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; } .tbm-pl.n3, .tbm-pl.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .tbm-pl.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tbm-pl.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tbm-pl__i { position: relative; display: flex; flex-direction: column; padding: 24px 22px; border-radius: 20px; background: var(--tb-card); border: 1px solid var(--tb-line); } .tbm-pl__i.is-hot { border: 2px solid var(--tb-pri); box-shadow: 0 22px 44px -26px var(--tb-pri); background: linear-gradient(180deg, color-mix(in srgb, var(--tb-pri) 6%, var(--tb-card)), var(--tb-card) 45%); } .tbm-pl__tag { position: absolute; top: -12px; inset-inline-start: 22px; padding: 4px 12px; border-radius: 999px; background: var(--tb-pri); color: #fff; font-size: .74rem; font-weight: 800; } .tbm-pl__i h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 900; color: var(--tb-ink); } .tbm-pl__i > p { margin: 0 0 12px; color: var(--tb-mut); font-size: .85rem; } .tbm-pl__p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .tbm-pl__p b { font-size: 1.6rem; font-weight: 900; color: var(--tb-ink); } .tbm-pl__p del { color: var(--tb-mut); font-size: .9rem; } .tbm-pl__p small { color: var(--tb-mut); } .tbm-pl__i ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; flex: 1 1 auto; } .tbm-pl__i li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--tb-txt, var(--tb-ink)); } .tbm-pl__i li svg { flex: none; margin-top: 3px; color: var(--tb-ok, #16a34a); } .tbm-pl__i li.is-no { color: var(--tb-mut); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tb-mut) 50%, transparent); } .tbm-pl__i li.is-no svg { color: var(--tb-bad, #dc2626); } .tbm-pl__b { justify-content: center; width: 100%; } .tbm-pl__i:not(.is-hot) .tbm-pl__b { background: var(--tb-pri-l, #eef2ff); color: var(--tb-pri); box-shadow: none; } .tbm-pl__note { text-align: center; color: var(--tb-mut); font-size: .84rem; margin: 14px 0 0; } /* reviews */ .tbm-rw { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; } @media (min-width: 992px) { .tbm-rw { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } } .tbm-rw__i { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--tb-card); border: 1px solid var(--tb-line); } .tbm-rw__top { display: flex; justify-content: space-between; align-items: center; } .tbm-rw__s { display: inline-flex; gap: 2px; color: #e2e8f0; } .tbm-rw__s svg.on { color: #f59e0b; } .tbm-rw__q { color: color-mix(in srgb, var(--tb-pri) 25%, transparent); } .tbm-rw__i blockquote { margin: 0; flex: 1 1 auto; color: var(--tb-txt, var(--tb-ink)); font-size: .9rem; line-height: 1.95; } .tbm-rw__i figcaption { display: flex; align-items: center; gap: 10px; } .tbm-rw__av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tb-pri), color-mix(in srgb, var(--tb-pri) 55%, #ec4899)); color: #fff; font-weight: 800; } .tbm-rw__who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .tbm-rw__who b { font-size: .88rem; color: var(--tb-ink); } .tbm-rw__who em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; color: var(--tb-ok, #16a34a); } .tbm-rw__who small { width: 100%; color: var(--tb-mut); font-size: .72rem; } .tbm-rw__p { display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--tb-line); color: var(--tb-mut) !important; font-size: .78rem; text-decoration: none !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tbm-rw__p:hover { color: var(--tb-pri) !important; } /* trust */ .tbm-tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 22px 26px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--tb-ok, #16a34a) 9%, var(--tb-card)), var(--tb-card)); border: 1px solid color-mix(in srgb, var(--tb-ok, #16a34a) 22%, transparent); } .tbm-tr__txt h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 900; color: var(--tb-ink); } .tbm-tr__txt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .tbm-tr__txt li { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--tb-txt, var(--tb-ink)); } .tbm-tr__txt li svg { color: var(--tb-ok, #16a34a); } .tbm-tr__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .tbm-tr__logos img { max-height: 90px; width: auto; background: #fff; border-radius: 12px; padding: 6px; } /* card countdown chip */ .tbx-card__media { position: relative; } .tbx-card__cd { position: absolute; inset-inline: 8px auto; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: .72rem; font-weight: 700; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 2; } @media (prefers-reduced-motion: reduce) { .tbm-br__t { animation: none; } .tbm-br.is-mq { overflow-x: auto; } } .tbm-rk[hidden], .tbm[hidden] { display: none !important; } .tbm-rw__i blockquote { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; font-style: normal; }