/* ===================================================================== * TIOB product cards & listings – hika_product_tpl 3.0.0 * One card system for every HikaShop product layout: * .tc3--grid (img_title) .tc3--img .tc3--desc .tc3--pane (+fade/slideh/slidev) * .tc3--row (list) .tc3--trow (table) * Hooks for listing.js unchanged (.tiob-card, .tiob-*-action, .tiob-action-icon). * Everything is scoped to .tc3 – the product page is not touched. * ===================================================================== */ .tc3, .tc3-listing { --c-pri: var(--hk-pri, #4f46e5); --c-pri-d: var(--hk-pri-d, #4338ca); --c-pri-2: var(--hk-pri-2, #6366f1); --c-pri-l: var(--hk-pri-l, #eef2ff); --c-pri-b: var(--hk-pri-b, #c7d2fe); --c-ok: var(--hk-ok, #10b981); --c-ok-d: var(--hk-ok-d, #059669); --c-ok-l: var(--hk-ok-l, #ecfdf5); --c-bad: var(--hk-bad, #dc2626); --c-bad-l: var(--hk-bad-l, #fef2f2); --c-warn: var(--hk-warn, #d97706); --c-star: var(--hk-star, #f59e0b); --c-ink: var(--hk-ink, #0f172a); --c-txt2: var(--hk-txt2, #475569); --c-mut: var(--hk-mut, #64748b); --c-line: var(--hk-line, #e5e7eb); --c-bg: var(--hk-bg, #f8fafc); --c-card: var(--hk-card, #fff); --c-r: var(--hk-r, 16px); --c-r-sm: var(--hk-r-sm, 10px); --c-sh: var(--hk-sh, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06)); --c-sh-h: var(--hk-sh-h, 0 2px 4px rgba(15, 23, 42, .05), 0 16px 40px rgba(79, 70, 229, .12)); --c-ease: var(--hk-ease, cubic-bezier(.2, .7, .2, 1)); } .tc3 { --ti-i-cart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2%22/%3E%3Ccircle cx=%2210%22 cy=%2220%22 r=%221.4%22/%3E%3Ccircle cx=%2217%22 cy=%2220%22 r=%221.4%22/%3E%3C/svg%3E"); --ti-i-trash: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6%22/%3E%3C/svg%3E"); --ti-i-heart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 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%22/%3E%3C/svg%3E"); --ti-i-heartf: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath fill=%22%23000%22 d=%22M12 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%22/%3E%3C/svg%3E"); --ti-i-ext: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5%22/%3E%3C/svg%3E"); --ti-i-help: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7M12 17h.01%22/%3E%3C/svg%3E"); --ti-i-ban: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M6 6l12 12%22/%3E%3C/svg%3E"); --ti-i-check: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22/%3E%3C/svg%3E"); --ti-i-eye: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); --ti-i-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4v11M7 10l5 5 5-5M5 20h14%22/%3E%3C/svg%3E"); --ti-i-lock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%229%22 rx=%222%22/%3E%3Cpath d=%22M8 11V8a4 4 0 0 1 8 0v3%22/%3E%3C/svg%3E"); --ti-i-file: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3C/svg%3E"); --ti-i-send: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 3L3 10.5l7 3 3 7z%22/%3E%3Cpath d=%22M10 13.5L21 3%22/%3E%3C/svg%3E"); --ti-i-star: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath fill=%22%23000%22 d=%22M12 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%22/%3E%3C/svg%3E"); position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; margin: 0; direction: rtl; text-align: right; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-r); box-shadow: var(--c-sh); overflow: hidden; isolation: isolate; color: var(--c-ink); line-height: 1.6; transition: transform .28s var(--c-ease), box-shadow .28s var(--c-ease), border-color .28s var(--c-ease); } .tc3 *, .tc3 *::before, .tc3 *::after { box-sizing: border-box; } .tc3:hover { transform: translateY(-4px); border-color: var(--c-pri-b); box-shadow: var(--c-sh-h); } .tc3 a { text-decoration: none; } .tc3 .tc3-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* HikaShop wrappers around a card fill the grid cell */ .hikashop_product:has(.tc3) > .hikashop_container, .hikashop_product:has(.tc3) .hikashop_subcontainer { height: 100%; margin: 0; padding: 0; min-height: 0; } /* ---------- media ---------- */ .tc3 .tc3-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg); flex: none; } .tc3 .tc3-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--c-ease), filter .3s; } .tc3:hover .tc3-media img { transform: scale(1.06); } .tc3 .tc3-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--c-pri-b); } .tc3 .tc3-noimg .tc3-ic { width: 46px; height: 46px; stroke-width: 1.3; } .tc3.is-soldout .tc3-media img { filter: grayscale(.85); opacity: .75; } .tc3 .tc3-badges { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .tc3 .tc3-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; box-shadow: 0 4px 10px rgba(15, 23, 42, .14); } .tc3 .tc3-badge--off { background: var(--c-bad); } .tc3 .tc3-badge--off::before { content: "−"; margin-left: 1px; } .tc3 .tc3-badge--free { background: var(--c-ok); } .tc3 .tc3-badge--new { background: var(--c-pri); } .tc3 .tc3-badge--upd { background: var(--c-ink); } .tc3 .tc3-badge--out { background: var(--c-mut); } .tc3 .tc3-media-rate { position: absolute; bottom: 10px; left: 10px; z-index: 2; } .tc3 .tc3-media-rate:empty, .tc3 .tc3-media-rate .tc3-rate:not(:has(b)) { display: none; } .tc3 .tc3-media-rate .tc3-rate { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-card) 94%, transparent); box-shadow: 0 4px 12px rgba(15, 23, 42, .12); backdrop-filter: blur(4px); } .tc3 .tc3-media-rate .tc3-stars { width: 14px; --tc3-fill: 100% !important; letter-spacing: 0; } .tc3 .tc3-media-rate .tc3-stars::before, .tc3 .tc3-media-rate .tc3-stars::after { content: "★"; } /* ---------- body ---------- */ .tc3 .tc3-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 14px 14px; min-width: 0; } .tc3 .tc3-title { margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.65; } .tc3 .tc3-title a { color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.3em; transition: color .2s; } .tc3 .tc3-title a:hover { color: var(--c-pri); } .tc3 .tc3-sub { margin: -6px 0 0; color: var(--c-mut); font-size: 12px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc3 .tc3-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-mut); white-space: nowrap; } .tc3 .tc3-rate b { color: var(--c-ink); font-weight: 800; } .tc3 .tc3-rate small { font-size: 11px; } .tc3 .tc3-stars { --tc3-fill: 0%; position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: var(--c-line); direction: rtl; } .tc3 .tc3-stars::before { content: "★★★★★"; } .tc3 .tc3-stars::after { content: "★★★★★"; position: absolute; inset: 0 0 0 auto; width: var(--tc3-fill); overflow: hidden; white-space: nowrap; color: var(--c-star); } .tc3 .tc3-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tc3 .tc3-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border-radius: 8px; background: var(--c-pri-l); color: var(--c-pri); font-size: 11.5px; font-weight: 700; line-height: 1.5; } .tc3 .tc3-chip bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc3 .tc3-chip--cmp { background: var(--c-bg); color: var(--c-txt2); box-shadow: inset 0 0 0 1px var(--c-line); } .tc3 .tc3-chip .tc3-ic { width: 13px; height: 13px; } .tc3 .tc3-desc { margin: 0; color: var(--c-txt2); font-size: 13px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tc3 .tc3-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--c-mut); font-size: 12px; } .tc3 .tc3-stats span { display: inline-flex; align-items: center; gap: 4px; } /* ---------- price ---------- */ .tc3 .tc3-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--c-line); } .tc3 .tc3-price { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; line-height: 1.35; } .tc3 .tc3-was { display: flex; align-items: center; gap: 6px; } .tc3 .tc3-was del { color: var(--c-mut); font-size: 12px; text-decoration-color: color-mix(in srgb, var(--c-bad) 70%, transparent); } .tc3 .tc3-off { padding: 0 6px; border-radius: 6px; background: var(--c-bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.6; } .tc3 .tc3-now { color: var(--c-ink); font-size: 16px; font-weight: 900; white-space: nowrap; } .tc3 .tc3-now.is-free { color: var(--c-ok-d); } /* ---------- actions (icons are CSS masks; listing.js swaps the state) ---------- */ .tc3 .tc3-actions { display: flex; align-items: center; gap: 6px; flex: none; } .tc3 .tiob-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); color: var(--c-txt2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: none; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; } .tc3 .tiob-action::after { content: none !important; } .tc3 .tiob-action:hover { transform: translateY(-1px); color: var(--c-pri); border-color: var(--c-pri-b); background: var(--c-pri-l); } .tc3 .tiob-action:focus-visible { outline: 2px solid var(--c-pri); outline-offset: 2px; } .tc3 .tiob-cart-action { border-color: transparent; background: linear-gradient(135deg, var(--c-pri), var(--c-pri-2)); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-pri) 30%, transparent); } .tc3 .tiob-cart-action:hover { color: #fff; background: var(--c-pri-d); border-color: transparent; } .tc3 .tiob-cart-action.is-active { background: var(--c-ok-l); color: var(--c-ok-d); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); box-shadow: none; } .tc3 .tiob-cart-action.is-active:hover { background: var(--c-bad-l); color: var(--c-bad); border-color: color-mix(in srgb, var(--c-bad) 35%, transparent); } .tc3 .tiob-cart-action.has-label { width: auto; padding: 0 14px; } .tc3 .tc3-lbl::after { content: attr(data-off); } .tc3 .tiob-cart-action.is-active .tc3-lbl::after { content: attr(data-on); } .tc3 .tiob-wishlist-action.is-active { color: var(--c-bad); background: var(--c-bad-l); border-color: color-mix(in srgb, var(--c-bad) 30%, transparent); } .tc3 .tc3-soldout { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--c-bg); color: var(--c-mut); font-size: 12px; font-weight: 800; } .tc3 .tiob-action-icon { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; font-size: 0; } .tc3 .tiob-action-icon::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--ti-i-cart) center / contain no-repeat; mask: var(--ti-i-cart) center / contain no-repeat; } .tc3 .tiob-action-icon::after { content: none; } .tc3 .tiob-cart-action.is-active .tiob-action-icon::before { -webkit-mask-image: var(--ti-i-check); mask-image: var(--ti-i-check); } .tc3 .tiob-cart-action.is-active:hover .tiob-action-icon::before { -webkit-mask-image: var(--ti-i-trash); mask-image: var(--ti-i-trash); } .tc3 .tiob-heart-icon::before { -webkit-mask-image: var(--ti-i-heart); mask-image: var(--ti-i-heart); } .tc3 .tiob-wishlist-action.is-active .tiob-heart-icon::before { -webkit-mask-image: var(--ti-i-heartf); mask-image: var(--ti-i-heartf); } .tc3 .tiob-view-icon::before { -webkit-mask-image: var(--ti-i-eye); mask-image: var(--ti-i-eye); } .tc3 .tiob-action.is-loading { pointer-events: none; opacity: .8; } .tc3 .tiob-action.is-loading .tiob-action-icon::before { -webkit-mask: none; mask: none; background: transparent; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tiob-card-spin .7s linear infinite; } @keyframes tiob-card-spin { to { transform: rotate(360deg); } } .tc3 .tc3-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--c-pri); font-size: 13px; font-weight: 800; } .tc3 .tc3-more .tc3-ic { transition: transform .2s; } .tc3 .tc3-more:hover .tc3-ic { transform: translateX(-3px); } /* grid card: quick view floats on the image */ .tc3--grid .tc3-foot .tiob-quickview-action, .tc3--desc .tc3-foot .tiob-quickview-action { position: absolute; top: 10px; left: 10px; z-index: 3; opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--c-card) 94%, transparent); backdrop-filter: blur(4px); } .tc3--grid:hover .tc3-foot .tiob-quickview-action, .tc3--desc:hover .tc3-foot .tiob-quickview-action, .tc3 .tiob-quickview-action:focus-visible { opacity: 1; transform: none; } /* desc card: price on its own line, labelled cart button full width */ .tc3--desc .tc3-foot { flex-direction: column; align-items: stretch; gap: 10px; } .tc3--desc .tc3-foot .tc3-price { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; } .tc3--desc .tc3-foot .tc3-was { order: 2; } .tc3--desc .tc3-foot .tiob-cart-action { flex: 1; } /* ---------- img: tile with caption on the picture ---------- */ .tc3--img .tc3-media { aspect-ratio: 4 / 5; } .tc3--img .tc3-media::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 88%, transparent), transparent); pointer-events: none; } .tc3--img .tc3-cap { position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px; pointer-events: none; } .tc3--img .tc3-cap a, .tc3--img .tc3-cap .tc3-price { pointer-events: auto; } .tc3--img .tc3-title a { color: #fff; min-height: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); } .tc3--img .tc3-title a:hover { color: var(--c-pri-l); } .tc3--img .tc3-sub { color: rgba(255, 255, 255, .75); margin: 0; } .tc3--img .tc3-cap__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tc3--img .tc3-now, .tc3--img .tc3-rate b { color: #fff; } .tc3--img .tc3-now.is-free { color: #6ee7b7; } .tc3--img .tc3-was del, .tc3--img .tc3-rate { color: rgba(255, 255, 255, .7); } .tc3--img .tc3-stars { color: rgba(255, 255, 255, .3); } .tc3--img .tc3-rate:not(:has(b)) { display: none; } .tc3--img .tc3-float { position: absolute; top: 10px; left: 10px; z-index: 3; } .tc3--img .tc3-actions { flex-direction: column; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s var(--c-ease); } .tc3--img:hover .tc3-actions, .tc3--img .tc3-actions:focus-within { opacity: 1; transform: none; } .tc3--img .tiob-action { width: 38px; height: 38px; } .tc3--img .tiob-action:not(.tiob-cart-action) { background: color-mix(in srgb, var(--c-card) 94%, transparent); } /* ---------- pane: details slide over the picture ---------- */ .tc3--pane .tc3-media { aspect-ratio: 1 / 1; } .tc3--pane .tc3-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; } .tc3--pane .tc3-head .tc3-title a { min-height: 3.3em; } .tc3--pane .tc3-head .tc3-price { margin-top: auto; } .tc3--pane .tc3-pane { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; background: linear-gradient(0deg, var(--c-card) 62%, color-mix(in srgb, var(--c-card) 55%, transparent)); backdrop-filter: blur(3px); opacity: 0; transform: translateY(24px); transition: opacity .3s var(--c-ease), transform .35s var(--c-ease); pointer-events: none; } .tc3--pane .tc3-pane__in { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 16px; } .tc3--pane .tc3-pane .tc3-title a { min-height: 0; } .tc3--pane .tc3-pane .tc3-desc { -webkit-line-clamp: 3; } .tc3--pane .tc3-pane .tc3-more { justify-content: flex-start; } .tc3--pane:hover .tc3-pane, .tc3--pane:focus-within .tc3-pane { opacity: 1; transform: none; pointer-events: auto; } .tc3--pane.tc3--fade .tc3-pane { transform: none; } .tc3--pane.tc3--slideh .tc3-pane { transform: translateX(-100%); opacity: 1; } .tc3--pane.tc3--slideh:hover .tc3-pane { transform: none; } .tc3--pane.tc3--slidev .tc3-pane { transform: translateY(100%); opacity: 1; } .tc3--pane.tc3--slidev:hover .tc3-pane { transform: none; } .tc3--pane:hover { transform: none; } /* ---------- row (listing_list) ---------- */ .tc3-rows { display: flex; flex-direction: column; gap: 14px; } .tc3--row { flex-direction: row; align-items: stretch; height: auto; } .tc3--row:hover { transform: translateY(-2px); } .tc3--row .tc3-media { width: 240px; aspect-ratio: 4 / 3; align-self: center; margin: 12px; border-radius: 12px; } .tc3--row .tc3-body { padding: 16px 4px 16px 8px; gap: 8px; } .tc3--row .tc3-row-top { display: flex; flex-direction: column; gap: 2px; } .tc3--row .tc3-title { font-size: 16px; } .tc3--row .tc3-title a { min-height: 0; -webkit-line-clamp: 1; } .tc3--row .tc3-desc { -webkit-line-clamp: 2; } .tc3--row .tc3-side { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; width: 260px; flex: none; padding: 16px; border-inline-start: 1px dashed var(--c-line); background: var(--c-bg); } .tc3--row .tc3-side .tc3-price { align-items: flex-start; } .tc3--row .tc3-side .tc3-now { font-size: 19px; } .tc3--row .tc3-side .tc3-actions { justify-content: stretch; } .tc3--row .tc3-side .tiob-cart-action { flex: 1; white-space: nowrap; } /* ---------- table (listing_table) ---------- */ .tc3-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--c-r); background: var(--c-card); box-shadow: var(--c-sh); } .tc3-table { width: 100%; border-collapse: collapse; direction: rtl; font-size: 13.5px; } .tc3-table thead th { position: sticky; top: 0; padding: 12px 14px; background: var(--c-bg); color: var(--c-mut); font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--c-line); } .tc3-table td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); vertical-align: middle; color: var(--c-txt2); } .tc3-table tbody tr:last-child td { border-bottom: 0; } .tc3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } tr.tc3 { display: table-row; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; } tr.tc3:hover { transform: none; box-shadow: none; background: var(--c-bg); } tr.tc3 { height: auto; } tr.tc3 .tc3-td-name__in { display: flex; align-items: center; gap: 12px; min-width: 260px; } tr.tc3 .tc3-badge:not(.tc3-badge--off):not(.tc3-badge--free) { display: none; } tr.tc3 .tc3-media { width: 64px; aspect-ratio: 1 / 1; border-radius: 10px; } tr.tc3 .tc3-media .tc3-badges { top: 4px; right: 4px; gap: 2px; } tr.tc3 .tc3-media .tc3-badge { height: 18px; padding: 0 5px; font-size: 9.5px; box-shadow: none; } tr.tc3 .tc3-title { font-size: 14px; } tr.tc3 .tc3-title a { min-height: 0; -webkit-line-clamp: 2; } tr.tc3 .tc3-code { color: var(--c-mut); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } tr.tc3 .tc3-price { white-space: nowrap; } tr.tc3 .tc3-now { font-size: 14.5px; } tr.tc3 .tc3-actions { justify-content: flex-end; } tr.tc3 .tiob-action { width: 36px; height: 36px; } /* ---------- empty ---------- */ .tc3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; border: 1px dashed var(--c-line); border-radius: var(--c-r); color: var(--c-mut); text-align: center; direction: rtl; } .tc3-empty .tc3-ic { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.5; } .tc3-empty p { margin: 0; font-weight: 700; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .tc3--row .tc3-media { width: 180px; } .tc3--row .tc3-side { width: 220px; } } @media (max-width: 767px) { .tc3 { border-radius: 14px; } .tc3:hover { transform: none; } .tc3 .tc3-body { padding: 10px; gap: 8px; } .tc3 .tc3-title { font-size: 13px; } .tc3 .tc3-title a { min-height: 3.25em; } .tc3 .tc3-sub, .tc3 .tc3-chip--cmp, .tc3 .tc3-stats { display: none; } .tc3 .tc3-chip { padding: 2px 7px; font-size: 10.5px; } .tc3 .tc3-badge { height: 20px; padding: 0 7px; font-size: 10px; } .tc3 .tc3-badges { top: 7px; right: 7px; } .tc3 .tc3-media-rate { bottom: 6px; left: 6px; } .tc3 .tc3-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; } .tc3 .tc3-now { font-size: 14px; } .tc3 .tc3-was del { font-size: 11px; } .tc3 .tc3-actions { display: grid; grid-template-columns: 1fr 36px; gap: 6px; } .tc3 .tiob-action { width: 100%; height: 36px; border-radius: 10px; } .tc3 .tiob-cart-action.has-label { padding: 0 6px; gap: 5px; font-size: 11.5px; white-space: nowrap; } .tc3--grid .tiob-quickview-action, .tc3--desc .tiob-quickview-action, .tc3--pane .tiob-quickview-action { display: none !important; } .tc3--desc .tc3-desc { -webkit-line-clamp: 2; font-size: 12px; } /* img: actions always visible, smaller caption */ .tc3--img .tc3-actions { opacity: 1; transform: none; display: flex; flex-direction: row; gap: 5px; } .tc3--img .tiob-action { width: 32px; height: 32px; border-radius: 9px; } .tc3--img .tiob-quickview-action, .tc3--img .tc3-cap .tc3-rate, .tc3--img .tc3-was { display: none !important; } .tc3--img .tc3-media { aspect-ratio: 3 / 4; } .tc3--img .tc3-badges { top: auto; bottom: auto; right: 7px; top: 7px; } .tc3--img .tc3-float { top: 7px; left: 7px; } .tc3--img .tc3-cap { padding: 10px; } /* pane: no hover on touch – details shown under the picture */ .tc3--pane .tc3-head { display: none; } .tc3--pane .tc3-pane { position: static; opacity: 1; transform: none !important; background: none; backdrop-filter: none; pointer-events: auto; flex: 1; } .tc3--pane .tc3-pane__in { padding: 10px; gap: 7px; } .tc3--pane .tc3-pane .tc3-desc, .tc3--pane .tc3-pane .tc3-more, .tc3--pane .tc3-pane .tc3-rate { display: none; } .tc3--pane .tc3-pane .tc3-title a { min-height: 3.25em; } .tc3--pane .tc3-media { aspect-ratio: 4 / 3; } /* row → stacked card */ .tc3--row { flex-direction: column; } .tc3--row .tc3-media { width: auto; margin: 0; border-radius: 0; align-self: stretch; } .tc3--row .tc3-body { padding: 12px 12px 4px; } .tc3--row .tc3-title a { -webkit-line-clamp: 2; min-height: 0; } .tc3--row .tc3-side { width: auto; border: 0; border-top: 1px dashed var(--c-line); background: none; padding: 10px 12px 12px; flex-direction: row; flex-wrap: wrap; align-items: center; } .tc3--row .tc3-side .tc3-price { flex: 1; } .tc3--row .tc3-side .tc3-actions { flex: 1 1 100%; grid-template-columns: 1fr 36px 36px; } .tc3--row .tc3-side .tc3-more { display: none; } /* table → cards */ .tc3-table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; } .tc3-table thead { display: none; } .tc3-table, .tc3-table tbody { display: block; } .tc3-table tbody { display: grid; gap: 10px; } tr.tc3 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-card); box-shadow: var(--c-sh); } tr.tc3 td { display: block; padding: 0; border: 0; font-size: 12.5px; } tr.tc3 td[data-label]::before { content: attr(data-label); display: block; color: var(--c-mut); font-size: 11px; } tr.tc3 .tc3-td-name, tr.tc3 .tc3-td-act { grid-column: 1 / -1; min-width: 0; } tr.tc3 .tc3-actions { display: grid; grid-template-columns: 1fr 36px 36px; } tr.tc3 .tiob-action { width: 100%; } tr.tc3 .tc3-td-name__in { min-width: 0; } } @media (max-width: 380px) { .tc3 .tiob-cart-action.has-label .tc3-lbl { display: none; } } @media (hover: none) { .tc3--grid .tc3-foot .tiob-quickview-action { opacity: 1; transform: none; } .tc3--img .tc3-actions { opacity: 1; transform: none; } .tc3:hover .tc3-media img { transform: none; } } @media (prefers-reduced-motion: reduce) { .tc3, .tc3 * { transition: none !important; animation: none !important; } } /* toast (listing.js) */ #tiob-toast { position: fixed; bottom: 24px; left: 50%; z-index: 99999; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 14px; background: var(--hk-ink,#0f172a); color: #fff; font-size: 14px; font-weight: 700; direction: rtl; box-shadow: 0 16px 40px rgba(15, 23, 42, .3); opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .25s, transform .25s, visibility .25s; } #tiob-toast::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; background: var(--hk-ok,#10b981); vertical-align: middle; } #tiob-toast.tiob-remove::before { background: #f59e0b; } #tiob-toast.tiob-error::before, #tiob-toast.error::before { background: var(--hk-bad,#ef4444); } #tiob-toast.is-visible, #tiob-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* quick view */ #tiob-quickview-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } #tiob-quickview-modal.is-open { opacity: 1; visibility: visible; } #tiob-quickview-box { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px; background: var(--hk-card, #fff); direction: rtl; box-shadow: 0 30px 80px rgba(15, 23, 42, .35); transform: translateY(14px) scale(.98); transition: transform .25s; } #tiob-quickview-modal.is-open #tiob-quickview-box { transform: none; } #tiob-quickview-close { position: sticky; top: 12px; float: left; z-index: 2; width: 40px; height: 40px; margin: 12px; border: 0; border-radius: 50%; background: var(--hk-bg, #f1f5f9); color: var(--hk-ink,#0f172a); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; } #tiob-quickview-close:hover { background: var(--hk-bad,#ef4444); color: #fff; } #tiob-quickview-content { padding: 20px 24px 24px; min-height: 160px; color: var(--hk-txt2,#334155); } /* phones: toast above the safe area; legacy quick-view box (only used when QuickTiob is off) as bottom sheet */ @media (max-width: 640px) { #tiob-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } #tiob-quickview-modal { align-items: flex-end; padding: 0; } #tiob-quickview-box { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } } /* ===================================================================== * HikaShop pagination – TIOB v3.1.0 * One tidy bar: results on the right, pages in the middle, "show #" on the left. * Phones: pages on their own row, results + page size underneath. * Markup (HikaShop 6.5): .hikashop_products_pagination > .list-footer.pagination * > .limit, ul.pagination > li.page-item > .page-link, .counter * + span.hikashop_results_counter (the "…" items come from listing.js) * ===================================================================== */ :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) { clear: both; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "info pages size"; align-items: center; gap: 12px 20px; margin: 36px 0 28px !important; padding: 14px 18px !important; direction: rtl; background: var(--hk-card, #fff); border: 1px solid var(--hk-line, #e5e7eb); border-radius: 18px; box-shadow: var(--hk-sh, 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06)); } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .list-footer.pagination { display: contents !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination { grid-area: pages; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; background: none; border: 0; box-shadow: none; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination > li { display: inline-flex; margin: 0 !important; padding: 0; border: 0; background: none; float: none; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; min-width: 42px; height: 42px; margin: 0 !important; padding: 0 10px !important; border: 1px solid var(--hk-line, #e5e7eb) !important; border-radius: 12px !important; background: var(--hk-card, #fff) !important; color: var(--hk-txt2, #475569) !important; font-size: 14px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none !important; box-shadow: none !important; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination a.page-link:hover { background: var(--hk-pri-l, #eef2ff) !important; border-color: var(--hk-pri-b, #c7d2fe) !important; color: var(--hk-pri, #4f46e5) !important; transform: translateY(-1px); } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination a.page-link:focus-visible { outline: 3px solid rgba(79, 70, 229, .35); outline-offset: 2px; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination li.active .page-link { background: var(--hk-pri, #4f46e5) !important; border-color: var(--hk-pri, #4f46e5) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(79, 70, 229, .28) !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination :is(.pagenav_previous_chevron, .pagenav_next_chevron, .pagenav_end_chevron, .pagenav_start_chevron) { background: var(--hk-bg, #f8fafc) !important; color: var(--hk-ink, #0f172a) !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination li.disabled .page-link { opacity: .4; cursor: default; transform: none; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination li.tiob-pg-dots .page-link { min-width: 22px !important; padding: 0 2px !important; border-color: transparent !important; background: transparent !important; color: #94a3b8 !important; opacity: 1; letter-spacing: 1px; } /* RTL arrows as SVG masks (font arrows get mirrored by the browser in RTL) */ :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link > .fas { display: none !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fas) { position: relative; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fas)::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--hkpg-ico) no-repeat center / contain; mask: var(--hkpg-ico) no-repeat center / contain; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fa-angle-double-left) { --hkpg-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6-6 6M12 6l6 6-6 6'/%3E%3C/svg%3E"); --hkpg-tip: "اولین"; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fa-angle-left) { --hkpg-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); --hkpg-tip: "قبلی"; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fa-angle-right) { --hkpg-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); --hkpg-tip: "بعدی"; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fa-angle-double-right) { --hkpg-ico: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-6 6 6 6M12 6l-6 6 6 6'/%3E%3C/svg%3E"); --hkpg-tip: "آخرین"; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fas)::after { content: var(--hkpg-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; padding: 5px 10px; border-radius: 8px; background: var(--hk-ink, #0f172a); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fas):is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); } @media (hover: none) { :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link:has(> .fas)::after { display: none; } } /* results / "page x of y" */ :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .hikashop_results_counter, :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .counter { grid-area: info; justify-self: start; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; float: none !important; color: var(--hk-mut, #64748b); font-size: 13px; font-weight: 600; white-space: nowrap; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination):has(.hikashop_results_counter) .counter { display: none !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .hikashop_results_counter::before, :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .counter::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hk-ok, #10b981); box-shadow: 0 0 0 3px var(--hk-ok-l, #ecfdf5); } /* "show #" */ :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .limit { grid-area: size; justify-self: end; display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; float: none !important; color: var(--hk-mut, #64748b); font-size: 13px; font-weight: 600; white-space: nowrap; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .limit select { width: auto !important; min-width: 76px; height: 40px; margin: 0 !important; padding: 0 12px 0 30px !important; border: 1px solid var(--hk-line, #e5e7eb) !important; border-radius: 12px !important; background: var(--hk-card, #fff) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center / 14px !important; -webkit-appearance: none; appearance: none; color: var(--hk-ink, #0f172a) !important; font: inherit; font-size: 14px; font-weight: 700; box-shadow: none !important; cursor: pointer; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .limit select:focus { outline: 0; border-color: var(--hk-pri, #4f46e5) !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, .12) !important; } /* top bar: same parts, no frame */ .hikashop_products_pagination_top { margin: 0 0 20px !important; padding: 0 0 16px !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--hk-line, #e5e7eb) !important; border-radius: 0 !important; box-shadow: none !important; } @media (max-width: 767.98px) { :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pages pages" "info size"; gap: 12px; margin: 24px 0 20px !important; padding: 12px 10px !important; border-radius: 16px; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination { gap: 4px; min-width: 0; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link { min-width: 34px; height: 40px; padding: 0 4px !important; font-size: 13.5px; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination li.tiob-pg-dots .page-link { min-width: 16px !important; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination > li:first-child, :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination > li:has(.pagenav_end_chevron) { display: none; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .limit select { height: 38px; font-size: 16px; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .hikashop_results_counter, :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .counter { font-size: 12px; white-space: normal; } .hikashop_products_pagination_top { grid-template-areas: "info size"; } .hikashop_products_pagination_top ul.pagination { display: none !important; } } @media (max-width: 380px) { :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link { min-width: 34px; } :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) .limit > :not(select) { display: none; } } @media (pointer: coarse) and (min-width: 768px) { :is(.hikashop_products_pagination, .hikashop_subcategories_pagination, .hk-pagination) ul.pagination .page-link { min-height: 44px; min-width: 44px; } } /* ===================================================================== * HikaShop 6.5 div grid on phones: 2 cards per row (3 on wide phones). * HikaShop is a 12-column grid where every column spans 12 on phones. * ===================================================================== */ /* 2.7.2: same mobile grid without relying on :has() (some setups ignored it) */ @media (max-width: 767px) { html body .hikashop_products_listing .hk-row-fluid { display: grid !important; grid-template-columns: repeat(var(--tiob-cols, 2), minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; flex-wrap: initial !important; } html body .hikashop_products_listing .hk-row-fluid::before, html body .hikashop_products_listing .hk-row-fluid::after { content: none !important; display: none !important; } html body .hikashop_products_listing .hk-row-fluid > .hikashop_product, html body .hikashop_products_listing .hk-row-fluid > [class*="hkc-"] { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } html body .hikashop_products_listing .hk-row-fluid > .hikashop_product > .hikashop_container, html body .hikashop_products_listing .hk-row-fluid > .hikashop_product .hikashop_subcontainer { height: 100%; margin: 0 !important; padding: 0 !important; } } @media (max-width: 539px) { html body .hikashop_products_listing .hk-row-fluid { --tiob-cols: 2; } } @media (min-width: 540px) and (max-width: 767px) { html body .hikashop_products_listing .hk-row-fluid { --tiob-cols: 3; } } /* 2.7.4: HikaShop 6.5 is a 12-column CSS grid (.hkc-* { grid-column: span N }); on phones every column spans 12, so cards stayed one per row. Reset the span inside our grid. */ @media (max-width: 767px) { html body .hikashop_products_listing .hk-row-fluid > .hikashop_product, html body .hikashop_products_listing .hk-row-fluid > [class*="hkc-"] { grid-column: auto !important; grid-row: auto !important; --hk-span: 1; } } /* TIOB Digital 1.2.22: same "in cart" look as the template buttons */ .tc3 .tiob-cart-action.is-active { background: var(--tb-ok, #059669); color: #fff; border-color: transparent; } .tc3 .tiob-cart-action.is-active .tc3-lbl::after { content: var(--tb-incart-t, attr(data-on)); } @media (hover: hover) { .tc3 .tiob-cart-action.is-active:hover .tc3-lbl::after { content: "حذف از سبد"; } } .tc3 .tiob-wishlist-action.is-active { color: #e11d48; background: #fff1f5; border-color: #f9c4d2; } .tc3 .tiob-action.is-active .tiob-action-icon { animation: tc3InPop .35s ease; } @keyframes tc3InPop { 0% { transform: scale(.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .tc3 .tiob-action.is-active .tiob-action-icon { animation: none; } }